@taon-dev/cms 21.0.25 → 21.0.27

package/websql/fesm2022/cms-websql.mjs

@@ -6,16 +6,16 @@ import { UtilsJson, _ } from 'tnp-core/websql';
 import { BaseCommandLineFeature } from 'tnp-helpers/websql';
 import { Translation } from '@taon-dev/i18n/websql';
 import * as i0 from '@angular/core';
-import { Injectable, inject, DestroyRef, signal, Input, ChangeDetectionStrategy, Component, input, effect, Directive, output, ViewChild, ElementRef, EventEmitter, SecurityContext, HostListener, Output, computed, model, viewChild, untracked } from '@angular/core';
+import { Injectable, inject, DestroyRef, signal, Input, ChangeDetectionStrategy, Component, input, effect, model, computed, Directive, output, ViewChild, ElementRef, EventEmitter, SecurityContext, HostListener, Output, viewChild, untracked } from '@angular/core';
 import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import { Observable, of, map as map$1, finalize, take, forkJoin, switchMap, from, firstValueFrom, combineLatest } from 'rxjs';
+import { of, map as map$1, finalize, Observable, take, forkJoin, switchMap, from, firstValueFrom, combineLatest } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
-import { Resource } from 'ng2-rest/websql';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { TaonDatatableComponent, adminLazyRoute as adminLazyRoute$1, TaonConfirmDialogComponent, insertTable, createTableEditor, TaonAdminContentFooterService } from '@taon-dev/ui/websql';
-import { AsyncPipe, DatePipe, NgTemplateOutlet } from '@angular/common';
+import { AsyncPipe, DatePipe, NgTemplateOutlet, JsonPipe } from '@angular/common';
 import { RouterOutlet, ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { Resource } from 'ng2-rest/websql';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3 from '@angular/material/dialog';
@@ -26,20 +26,22 @@ import * as i5 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i5$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
+import * as i17 from '@angular/cdk/drag-drop';
+import { moveItemInArray, CdkDrag, CdkDragHandle, CdkDropList, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
 import * as i3$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i5$2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
 import * as i3$2 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import JSZip from 'jszip';
 import { DomSanitizer } from '@angular/platform-browser';
-import * as i17 from '@angular/cdk/drag-drop';
-import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i3$3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i11 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
+import * as i16 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
 import * as i4$1 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i8 from '@angular/material/menu';
@@ -53,8 +55,6 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i10 from 'ngx-editor';
 import { toHTML, NgxEditorModule } from 'ngx-editor';
 import { addRowBefore, addRowAfter, deleteRow, addColumnBefore, addColumnAfter, deleteColumn, deleteTable } from 'prosemirror-tables';
-import * as i16 from '@angular/material/divider';
-import { MatDividerModule } from '@angular/material/divider';
 
 let TaonCmsApplicationHookEntity = class TaonCmsApplicationHookEntity extends TaonBaseEntity {
 };
@@ -88,6 +88,7 @@ var TaonCmsContentType;
     TaonCmsContentType["Video"] = "video";
     TaonCmsContentType["Audio"] = "audio";
     TaonCmsContentType["Attachment"] = "attachment";
+    TaonCmsContentType["JsonTable"] = "json-table";
 })(TaonCmsContentType || (TaonCmsContentType = {}));
 var TaonCmsContentState;
 (function (TaonCmsContentState) {
@@ -426,7 +427,7 @@ const CURRENT_PACKAGE_TAON_VERSION = 'v21';
 /**
  *  Autogenerated by current cli tool. Use *tnp release* to bump version.
  */
-const CURRENT_PACKAGE_VERSION = '21.0.25';
+const CURRENT_PACKAGE_VERSION = '21.0.27';
 // THIS FILE IS GENERATED - DO NOT MODIFY
 
 //#region tnp-helpers cli template
@@ -538,7 +539,7 @@ function validateContentInput(input, creating = false) {
     }
     if (input.type !== undefined &&
         !Object.values(TaonCmsContentType).includes(input.type)) {
-        contentError('type must be normal, video, audio, or attachment.');
+        contentError('type must be normal, video, audio, attachment, or json-table.');
     }
     for (const field of ['title', 'slug']) {
         if (creating || input[field] !== undefined) {
@@ -1542,6 +1543,389 @@ TaonCmsContentAssetEntity = __decorate([
     })
 ], TaonCmsContentAssetEntity);
 
+const dangerousKeys = new Set(['__proto__', 'prototype', 'constructor']);
+const supportedTypes = new Set([
+    'string',
+    'number',
+    'boolean',
+    'date',
+    'json',
+]);
+const maximumColumns = 200;
+const maximumRows = 10_000;
+const TAON_SPREADSHEET_MAX_BYTES = 10_000_000;
+function normalizeSpreadsheetKey(header) {
+    const words = header
+        .normalize('NFKD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .match(/[A-Za-z0-9]+/g);
+    if (!words?.length) {
+        return '';
+    }
+    return words
+        .map((word, index) => index === 0
+        ? word.charAt(0).toLowerCase() + word.slice(1)
+        : word.charAt(0).toUpperCase() + word.slice(1))
+        .join('');
+}
+function validateSpreadsheetData(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+        throw new Error('Table data must be an object.');
+    }
+    const source = value;
+    if (source.version !== 1 ||
+        !Array.isArray(source.columns) ||
+        !Array.isArray(source.rows)) {
+        throw new Error('Table data must use the supported version 1 format.');
+    }
+    if (source.columns.length > maximumColumns) {
+        throw new Error(`A table cannot have more than ${maximumColumns} columns.`);
+    }
+    if (source.rows.length > maximumRows) {
+        throw new Error(`A table cannot have more than ${maximumRows} rows.`);
+    }
+    const keys = new Set();
+    const columns = source.columns.map((column, index) => {
+        if (!column || typeof column !== 'object') {
+            throw new Error(`Column ${index + 1} is invalid.`);
+        }
+        const candidate = column;
+        if (typeof candidate.key !== 'string' ||
+            !/^[a-z][A-Za-z0-9]*$/.test(candidate.key) ||
+            dangerousKeys.has(candidate.key)) {
+            throw new Error(`Column ${index + 1} has an invalid key.`);
+        }
+        if (keys.has(candidate.key)) {
+            throw new Error(`The column key "${candidate.key}" is duplicated.`);
+        }
+        if (!supportedTypes.has(candidate.type)) {
+            throw new Error(`Column "${candidate.key}" has an unsupported type.`);
+        }
+        if (candidate.label !== undefined && typeof candidate.label !== 'string') {
+            throw new Error(`Column "${candidate.key}" has an invalid label.`);
+        }
+        if (candidate.width !== undefined &&
+            (!Number.isFinite(candidate.width) ||
+                candidate.width < 40 ||
+                candidate.width > 1000)) {
+            throw new Error(`Column "${candidate.key}" has an invalid width.`);
+        }
+        keys.add(candidate.key);
+        return {
+            key: candidate.key,
+            ...(candidate.label !== undefined ? { label: candidate.label } : {}),
+            type: candidate.type,
+            ...(candidate.width !== undefined ? { width: candidate.width } : {}),
+        };
+    });
+    const rows = source.rows.map((row, rowIndex) => {
+        if (!row || typeof row !== 'object' || Array.isArray(row)) {
+            throw new Error(`Row ${rowIndex + 1} must be an object.`);
+        }
+        const result = {};
+        for (const key of Object.keys(row)) {
+            if (dangerousKeys.has(key)) {
+                throw new Error(`Row ${rowIndex + 1} contains a dangerous key.`);
+            }
+            if (!keys.has(key)) {
+                throw new Error(`Row ${rowIndex + 1} contains unknown column "${key}".`);
+            }
+            const cell = row[key];
+            const column = columns.find(candidate => candidate.key === key);
+            if (cell !== null && cell !== undefined) {
+                const validType = column.type === 'string'
+                    ? typeof cell === 'string'
+                    : column.type === 'number'
+                        ? typeof cell === 'number' && Number.isFinite(cell)
+                        : column.type === 'boolean'
+                            ? typeof cell === 'boolean'
+                            : column.type === 'date'
+                                ? typeof cell === 'string' && isValidDateOnly(cell)
+                                : true;
+                if (!validType) {
+                    throw new Error(`Row ${rowIndex + 1}, column "${key}" does not match type "${column.type}".`);
+                }
+            }
+            if (column.type === 'json' && cell !== null && cell !== undefined) {
+                assertSafeJson(cell, `Row ${rowIndex + 1}, column "${key}"`);
+            }
+            result[key] = cell;
+        }
+        return result;
+    });
+    return { version: 1, columns, rows };
+}
+function parseSpreadsheetDocument(body) {
+    if (!body?.trim()) {
+        return { version: 1, columns: [], rows: [] };
+    }
+    let parsed;
+    try {
+        parsed = JSON.parse(body);
+    }
+    catch {
+        throw new Error('The saved JSON Table content is not valid JSON.');
+    }
+    if (parsed &&
+        typeof parsed === 'object' &&
+        !Array.isArray(parsed) &&
+        parsed.version === 1) {
+        return validateSpreadsheetData(parsed);
+    }
+    if (!Array.isArray(parsed)) {
+        throw new Error('JSON Table content must be a versioned table or an array.');
+    }
+    return inferSpreadsheetData(parsed);
+}
+function importSpreadsheetJson(text) {
+    let parsed;
+    try {
+        parsed = JSON.parse(text.replace(/^\uFEFF/, ''));
+    }
+    catch {
+        throw new Error('The selected JSON file is not valid JSON.');
+    }
+    if (parsed &&
+        typeof parsed === 'object' &&
+        !Array.isArray(parsed) &&
+        parsed.version === 1) {
+        return validateSpreadsheetData(parsed);
+    }
+    if (!Array.isArray(parsed)) {
+        throw new Error('JSON import must contain an array of row objects.');
+    }
+    return inferSpreadsheetData(parsed);
+}
+function inferSpreadsheetData(rows) {
+    if (rows.length > maximumRows) {
+        throw new Error(`A table cannot have more than ${maximumRows} rows.`);
+    }
+    if (rows.some(row => !row || typeof row !== 'object' || Array.isArray(row))) {
+        throw new Error('Every imported row must be an object.');
+    }
+    const headers = [...new Set(rows.flatMap(row => Object.keys(row)))];
+    if (headers.length > maximumColumns) {
+        throw new Error(`A table cannot have more than ${maximumColumns} columns.`);
+    }
+    const usedKeys = new Set();
+    const columns = headers.map(header => {
+        let key = normalizeSpreadsheetKey(header);
+        if (!key || !/^[A-Za-z]/.test(key)) {
+            key = `column${key ? key.charAt(0).toUpperCase() + key.slice(1) : ''}`;
+        }
+        const base = key;
+        let suffix = 2;
+        while (usedKeys.has(key) || dangerousKeys.has(key)) {
+            key = `${base}${suffix++}`;
+        }
+        usedKeys.add(key);
+        const values = rows.map(row => row[header]);
+        return {
+            key,
+            ...(header !== key ? { label: header } : {}),
+            type: inferType(values),
+        };
+    });
+    const keyByHeader = new Map(headers.map((header, index) => [header, columns[index].key]));
+    const normalizedRows = rows.map(row => {
+        const result = {};
+        for (const header of headers) {
+            const key = keyByHeader.get(header);
+            result[key] = row[header] ?? null;
+        }
+        return result;
+    });
+    return validateSpreadsheetData({
+        version: 1,
+        columns,
+        rows: normalizedRows,
+    });
+}
+function parseSpreadsheetCsv(text, delimiter) {
+    const source = text.replace(/^\uFEFF/, '');
+    const separator = delimiter ?? detectDelimiter(source);
+    const records = [];
+    let record = [];
+    let field = '';
+    let quoted = false;
+    for (let index = 0; index < source.length; index += 1) {
+        const char = source[index];
+        if (quoted) {
+            if (char === '"' && source[index + 1] === '"') {
+                field += '"';
+                index += 1;
+            }
+            else if (char === '"') {
+                quoted = false;
+            }
+            else {
+                field += char;
+            }
+        }
+        else if (char === '"' && field.length === 0) {
+            quoted = true;
+        }
+        else if (char === separator) {
+            record.push(field);
+            field = '';
+        }
+        else if (char === '\r' || char === '\n') {
+            record.push(field);
+            records.push(record);
+            record = [];
+            field = '';
+            if (char === '\r' && source[index + 1] === '\n') {
+                index += 1;
+            }
+        }
+        else {
+            field += char;
+        }
+    }
+    if (quoted) {
+        throw new Error('The CSV file contains an unterminated quoted value.');
+    }
+    if (field.length || record.length) {
+        record.push(field);
+        records.push(record);
+    }
+    const nonEmptyRecords = records.filter(row => row.some(cell => cell !== ''));
+    if (!nonEmptyRecords.length) {
+        return { version: 1, columns: [], rows: [] };
+    }
+    const headers = nonEmptyRecords[0].map(header => header.trim());
+    if (!headers.length || headers.some(header => !header)) {
+        throw new Error('CSV header cells must not be empty.');
+    }
+    if (new Set(headers).size !== headers.length) {
+        throw new Error('CSV headers must be unique before import.');
+    }
+    const rows = nonEmptyRecords.slice(1).map((cells, rowIndex) => {
+        if (cells.length > headers.length) {
+            throw new Error(`CSV row ${rowIndex + 2} has more cells than the header.`);
+        }
+        const result = {};
+        headers.forEach((header, index) => {
+            result[header] = parseCsvValue(cells[index] ?? '');
+        });
+        return result;
+    });
+    const inferred = inferSpreadsheetData(rows.length
+        ? rows
+        : [Object.fromEntries(headers.map(header => [header, '']))]);
+    return {
+        version: 1,
+        columns: inferred.columns,
+        rows: rows.length ? inferred.rows : [],
+    };
+}
+function serializeSpreadsheetCsv(data) {
+    const escape = (value) => {
+        let text = value === null || value === undefined
+            ? ''
+            : typeof value === 'string'
+                ? value
+                : JSON.stringify(value);
+        if (/^[\t\r\n ]*[=+\-@]/.test(text)) {
+            text = `'${text}`;
+        }
+        return /[",\r\n]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
+    };
+    const header = data.columns.map(column => escape(column.label || column.key));
+    const rows = data.rows.map(row => data.columns.map(column => escape(row[column.key] ?? '')).join(','));
+    return [header.join(','), ...rows].join('\r\n');
+}
+function inferType(values) {
+    const present = values.filter(value => value !== null && value !== undefined && value !== '');
+    if (present.length &&
+        present.every(value => typeof value === 'string' && isValidDateOnly(value))) {
+        return 'date';
+    }
+    if (present.length && present.every(value => typeof value === 'boolean')) {
+        return 'boolean';
+    }
+    if (present.length &&
+        present.every(value => typeof value === 'number' && Number.isFinite(value))) {
+        return 'number';
+    }
+    if (present.length && present.every(value => typeof value === 'object')) {
+        return 'json';
+    }
+    return 'string';
+}
+function detectDelimiter(text) {
+    const firstLine = text.split(/\r\n|\n|\r/, 1)[0] ?? '';
+    const candidates = [',', ';', '\t'];
+    return candidates.reduce((selected, candidate) => countUnquoted(firstLine, candidate) > countUnquoted(firstLine, selected)
+        ? candidate
+        : selected);
+}
+function countUnquoted(line, delimiter) {
+    let quoted = false;
+    let count = 0;
+    for (let index = 0; index < line.length; index += 1) {
+        if (line[index] === '"' && line[index + 1] === '"' && quoted) {
+            index += 1;
+        }
+        else if (line[index] === '"') {
+            quoted = !quoted;
+        }
+        else if (line[index] === delimiter && !quoted) {
+            count += 1;
+        }
+    }
+    return count;
+}
+function parseCsvValue(value) {
+    if (!value) {
+        return null;
+    }
+    if (/^(true|false)$/i.test(value)) {
+        return value.toLowerCase() === 'true';
+    }
+    if (/^-?(?:0|[1-9]\d*)(?:\.\d+)?$/.test(value)) {
+        const number = Number(value);
+        if (Number.isFinite(number)) {
+            return number;
+        }
+    }
+    return value;
+}
+function isValidDateOnly(value) {
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+        return false;
+    }
+    const date = new Date(`${value}T00:00:00.000Z`);
+    return (!Number.isNaN(date.getTime()) && date.toISOString().slice(0, 10) === value);
+}
+function assertSafeJson(value, path) {
+    if (value === null ||
+        typeof value === 'string' ||
+        typeof value === 'boolean') {
+        return;
+    }
+    if (typeof value === 'number') {
+        if (!Number.isFinite(value)) {
+            throw new Error(`${path} contains a non-finite number.`);
+        }
+        return;
+    }
+    if (Array.isArray(value)) {
+        value.forEach((item, index) => assertSafeJson(item, `${path}[${index}]`));
+        return;
+    }
+    if (typeof value === 'object') {
+        for (const [key, nestedValue] of Object.entries(value)) {
+            if (dangerousKeys.has(key)) {
+                throw new Error(`${path} contains a dangerous JSON key.`);
+            }
+            assertSafeJson(nestedValue, `${path}.${key}`);
+        }
+        return;
+    }
+    throw new Error(`${path} contains a value that cannot be serialized as JSON.`);
+}
+
 //#endregion
 let TaonCmsContentRepository = class TaonCmsContentRepository extends TaonBaseRepository {
     constructor() {
@@ -2061,7 +2445,7 @@ let TaonCmsContentRepository = class TaonCmsContentRepository extends TaonBaseRe
             if (content.status !== 'archived') {
                 contentError('Only archived posts can be permanently deleted.', 409);
             }
-            const repository = manager.getRepository(this.target);
+            const repository = manager.getRepository(TaonCmsContentEntity);
             const assetRepository = manager.getRepository(TaonCmsContentAssetEntity);
             const assetKeys = [
                 content.videoKey,
@@ -2666,6 +3050,21 @@ let TaonCmsContentRepository = class TaonCmsContentRepository extends TaonBaseRe
         if (title === undefined || slug === undefined) {
             contentError('title and slug are required.');
         }
+        if (type === TaonCmsContentType.JsonTable) {
+            try {
+                const body = input.body === undefined ? (current?.body ?? null) : input.body;
+                if (typeof body === 'string' && body.length > TAON_SPREADSHEET_MAX_BYTES) {
+                    contentError('JSON Table content exceeds the 10 MB limit.');
+                }
+                parseSpreadsheetDocument(body);
+            }
+            catch (error) {
+                if (error instanceof Error) {
+                    contentError(`JSON Table content is invalid: ${error.message}`);
+                }
+                throw error;
+            }
+        }
         const publishedAt = input.publishedAt === undefined
             ? (current?.publishedAt ?? null)
             : input.publishedAt;
@@ -4002,6 +4401,10 @@ let TaonCmsContentStorageController = class TaonCmsContentStorageController exte
         /* */
         /* */
         /* */
+        /* */
+        /* */
+        /* */
+        /* */
         return (void 0);
     }
     async handleUploadFiles(files, queryParams, req, res) {
@@ -4042,6 +4445,50 @@ let TaonCmsContentStorageController = class TaonCmsContentStorageController exte
         /* */
         return (void 0);
     }
+    /**
+     * Access is checked in beforeEachRequest (CMS managers only).
+     * The declared size is fixed at start and enforced for every part.
+     */
+    async authorizeMultipartUpload(options) {
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        return (void 0);
+    }
+    async handleCompletedMultipartUpload(object, queryParams, req) {
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        return (void 0);
+    }
+    async withDownloadUrl(object, req) {
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        /* */
+        return (void 0);
+    }
     afterFileUploadHook() { }
     async isMediaObjectAvailable(key) {
         /* */
@@ -4205,6 +4652,7 @@ function defaultThumbnailUrl(key) {
         video: '<rect x="248" y="132" width="144" height="100" rx="16"/><path d="m308 158 40 24-40 24z"/>',
         audio: '<path d="M280 164v40m20-60v80m20-98v116m20-98v80m20-60v40"/>',
         attachment: '<path d="M276 124h60l32 32v84h-92z M336 124v36h32m-70 30h48m-48 22h36"/>',
+        'json-table': '<path d="M252 130h136v100H252z M252 164h136m-92-34v100m46-100v100m-90-66h136m-136 33h136"/>',
     };
     const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360"><defs><linearGradient id="bg" x2="1" y2="1"><stop stop-color="#eaf0ff"/><stop offset="1" stop-color="#e4f5f0"/></linearGradient></defs><rect width="640" height="360" rx="24" fill="url(#bg)"/><circle cx="320" cy="180" r="112" fill="#fff" opacity=".65"/><g fill="none" stroke="#52669a" stroke-width="7" stroke-linecap="round" stroke-linejoin="round">${shapes[type]}</g></svg>`;
     return `data:image/svg+xml,${encodeURIComponent(svg)}`;
@@ -4379,6 +4827,8 @@ let TaonCmsContentController = class TaonCmsContentController extends TaonBaseCr
         /* */
         /* */
         /* */
+        /* */
+        /* */
         return (void 0);
     }
     //#endregion
@@ -4530,6 +4980,57 @@ let TaonCmsContentController = class TaonCmsContentController extends TaonBaseCr
         //#endregion
     }
     //#endregion
+    getJsonTableBySlug(slug) {
+        //#region @websqlFunc
+        return async (req, _res, { t }) => {
+            const post = await this.requireJsonTablePost(slug, req, t, false);
+            return this.jsonTableRows(post.body, t);
+        };
+        //#endregion
+    }
+    getPublicJsonTableBySlug(slug) {
+        //#region @websqlFunc
+        return async (req, _res, { t }) => {
+            const post = await this.requireJsonTablePost(slug, req, t, true);
+            return this.jsonTableRows(post.body, t);
+        };
+        //#endregion
+    }
+    async requireJsonTablePost(slug, req, t, publicOnly) {
+        //#region @websqlFunc
+        const normalizedSlug = typeof slug === 'string' ? slug.trim() : '';
+        if (!normalizedSlug || normalizedSlug.length > 255) {
+            contentError(t.gettext('The post slug is invalid.'), 400);
+        }
+        const post = await this.taonCmsContentRepository.getContentBySlugForMedia(normalizedSlug);
+        if (!post) {
+            contentError(t.gettext('The post was not found.'), 404);
+        }
+        if (post.type !== TaonCmsContentType.JsonTable) {
+            contentError(t.gettext('The post is not a JSON Table.'), 400);
+        }
+        await this.requireReadAccess(post, publicOnly, req, t);
+        return post;
+        //#endregion
+    }
+    jsonTableRows(body, t) {
+        //#region @websqlFunc
+        if (body && body.length > TAON_SPREADSHEET_MAX_BYTES) {
+            contentError('JSON Table content exceeds the 10 MB limit.', 400);
+        }
+        try {
+            return parseSpreadsheetDocument(body).rows;
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                contentError(t.gettext('JSON Table content is invalid: [[ error ]]', {
+                    error: error.message,
+                }), 400);
+            }
+            throw error;
+        }
+        //#endregion
+    }
     getPublicBySlug(slug) {
         //#region @websqlFunc
         return async (req, _res, { t }) => {
@@ -4864,6 +5365,20 @@ __decorate([
     __metadata("design:paramtypes", [String]),
     __metadata("design:returntype", Object)
 ], TaonCmsContentController.prototype, "getBySlug", null);
+__decorate([
+    GET(),
+    __param(0, Query('slug')),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String]),
+    __metadata("design:returntype", Object)
+], TaonCmsContentController.prototype, "getJsonTableBySlug", null);
+__decorate([
+    GET(),
+    __param(0, Query('slug')),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String]),
+    __metadata("design:returntype", Object)
+], TaonCmsContentController.prototype, "getPublicJsonTableBySlug", null);
 __decorate([
     GET(),
     __param(0, Query('slug')),
@@ -5046,6 +5561,8 @@ TaonCmsContentController = __decorate([
         allowedMethods: [
             'getAll',
             'getBy',
+            'getJsonTableBySlug',
+            'getPublicJsonTableBySlug',
             'getPublicBySlug',
             'getPublicVideoChildrenBySlug',
             'createContent',
@@ -5096,6 +5613,13 @@ TaonCmsContentMiddleware = __decorate([
 
 //#endregion
 let TaonCmsContentProvider = class TaonCmsContentProvider extends TaonBaseProvider {
+    constructor() {
+        super(...arguments);
+        /**
+         * Slugs offered in the post editor "Required Slugs" selector.
+         */
+        this.requiredSlugs = [];
+    }
     async _() {
         if (!this.siteName) {
             throw new Error(`Please provide siteName in TaonCmsContentProvider`);
@@ -5456,80 +5980,20 @@ const TaonCmsAbstractContext = createContext(() => ({
 }));
 // THIS FILE IS GENERATED - DO NOT MODIFY
 
-const progressCallbacks = new WeakMap();
-// Keep Taon's middleware, retries and response decoding; replace only the
-// final Fetch transport for uploads that request browser upload events.
-function trackCmsUpload(url, body, onProgress) {
-    const key = `cms-upload-progress-POST-${new URL(url).pathname}`;
-    if (!Resource.methodsInterceptors.has(key)) {
-        Resource.methodsInterceptors.set(key, {
-            intercept: ({ req, next }) => {
-                if (!(req.body instanceof FormData)) {
-                    return next.handle(req);
-                }
-                const uploadBody = req.body;
-                const callback = progressCallbacks.get(uploadBody);
-                if (!callback) {
-                    return next.handle(req);
-                }
-                return new Observable(subscriber => {
-                    const xhr = new XMLHttpRequest();
-                    xhr.open(req.method || 'POST', req.url);
-                    xhr.withCredentials = req.credentials === 'include';
-                    new Headers(req.headers).forEach((value, name) => {
-                        // The browser must supply the multipart boundary.
-                        if (name.toLowerCase() !== 'content-type') {
-                            xhr.setRequestHeader(name, value);
-                        }
-                    });
-                    xhr.upload.onprogress = event => {
-                        if (event.lengthComputable && event.total > 0) {
-                            callback(Math.min(100, Math.floor((event.loaded * 100) / event.total)));
-                        }
-                    };
-                    xhr.onload = () => {
-                        const headers = new Headers();
-                        for (const line of xhr
-                            .getAllResponseHeaders()
-                            .trim()
-                            .split(/[\r\n]+/)) {
-                            const separator = line.indexOf(':');
-                            if (separator > 0) {
-                                headers.append(line.slice(0, separator), line.slice(separator + 1).trim());
-                            }
-                        }
-                        subscriber.next(new Response([204, 205, 304].includes(xhr.status) ? null : xhr.responseText, {
-                            status: xhr.status,
-                            statusText: xhr.statusText,
-                            headers,
-                        }));
-                        subscriber.complete();
-                    };
-                    xhr.onerror = () => subscriber.error(new Error('Media upload network error.'));
-                    xhr.ontimeout = () => subscriber.error(new Error('Media upload timed out.'));
-                    xhr.onabort = () => subscriber.error(new Error('Media upload was cancelled.'));
-                    const abort = () => xhr.abort();
-                    req.signal?.addEventListener('abort', abort, { once: true });
-                    if (req.signal?.aborted) {
-                        subscriber.error(new Error('Media upload was cancelled.'));
-                    }
-                    else {
-                        callback(0);
-                        xhr.send(uploadBody);
-                    }
-                    return () => {
-                        req.signal?.removeEventListener('abort', abort);
-                        if (xhr.readyState !== XMLHttpRequest.DONE) {
-                            xhr.abort();
-                        }
-                    };
-                });
-            },
-        });
-    }
-    progressCallbacks.set(body, onProgress);
-    return () => progressCallbacks.delete(body);
-}
+const TaonCmsContentDefaultsValues = {
+    description: '',
+    version: 0,
+    id: void 0,
+    type: TaonCmsContentType.Normal,
+    videoKey: null,
+    audioKey: null,
+    attachmentKey: null,
+    thumbnailKey: null,
+};
+/**
+ * Strict maximum size of a single CMS media upload (1 GB).
+ */
+const TAON_CMS_MAX_UPLOAD_BYTES = 1_000_000_000;
 
 //#region imports
 //#endregion
@@ -5562,23 +6026,33 @@ class TaonCmsContentApiService extends TaonBaseAngularService {
     }
     //#endregion
     async getPublicBySlug(slug) {
-        const response = await this.taonCmsContentController
-            .getPublicBySlug(slug)
-            .request();
+        const response = await this.taonCmsContentController.getPublicBySlug(slug).request();
         if (response.statusCode >= 400 || !response.body?.json) {
             throw new Error(response.responseText || 'The post could not be loaded.');
         }
         return response.body.json;
     }
-    async getPublicVideoChildrenBySlug(slug) {
-        const response = await this.taonCmsContentController
-            .getPublicVideoChildrenBySlug(slug)
-            .request();
+    async getJsonTableBySlug(slug) {
+        const response = await this.taonCmsContentController.getJsonTableBySlug(slug).request();
         if (response.statusCode >= 400 || !Array.isArray(response.body?.json)) {
-            throw new Error(response.responseText || 'Public video children could not be loaded.');
+            throw new Error(response.responseText || 'The JSON Table could not be loaded.');
         }
         return response.body.json;
     }
+    getPublicJsonTableBySlug(slug) {
+        return this.taonCmsContentController.getPublicJsonTableBySlug(slug)
+            .request().observable.pipe(map(c => c.body.json), catchError(error => {
+            console.error(`Failed to load JSON table "${slug}":`, error);
+            return of([]);
+        }));
+    }
+    getPublicVideoChildrenBySlug(slug) {
+        return this.taonCmsContentController.getPublicVideoChildrenBySlug(slug)
+            .request().observable.pipe(map(c => c.body.json), catchError(error => {
+            console.error(`Failed to load public video children for "${slug}":`, error);
+            return of([]);
+        }));
+    }
     //#region API / get video link by slug
     /**
      * Get link to private video
@@ -5641,7 +6115,7 @@ class TaonCmsContentApiService extends TaonBaseAngularService {
     //#region API / get public content by hook
     getPublicContentByHook(hook) {
         return this.taonCmsContentController.getPublicContentByHook(hook)
-            .request().observable.pipe(map(res => res.body.text), catchError(() => of('---')));
+            .request().observable.pipe(map(res => (res.body.text || '')?.replace(/\\n/g, '\n')), catchError(() => of('---')));
     }
     //#endregion
     //#region API / list application hooks
@@ -5651,26 +6125,21 @@ class TaonCmsContentApiService extends TaonBaseAngularService {
     }
     //#endregion
     //#region API / upload media
-    async uploadMedia(file, onProgress) {
-        const formData = new FormData();
-        formData.append('file', file);
-        const stopTracking = onProgress
-            ? trackCmsUpload(this.taonCmsContentStorageController.getThisControllerMethodFullUrl('uploadFormDataToServer'), formData, onProgress)
-            : undefined;
-        try {
-            const response = await this.taonCmsContentStorageController
-                .uploadFormDataToServer(formData)
-                .request();
-            const objects = response.body.json;
-            if (!Array.isArray(objects) || objects.length !== 1 || !objects[0]?.key) {
-                throw new Error('The upload did not return a media key.');
-            }
-            onProgress?.(100);
-            return objects[0];
-        }
-        finally {
-            stopTracking?.();
+    async uploadMedia(file, onProgress, signal) {
+        if (file.size > TAON_CMS_MAX_UPLOAD_BYTES) {
+            throw new Error(`The file "${file.name}" is too large. The maximum upload size is 1 GB.`);
+        }
+        const objects = await this.taonCmsContentStorageController.uploadFileInChunks(file, {
+            fileName: file.name,
+            contentType: file.type || 'application/octet-stream',
+            signal,
+            onProgress,
+        });
+        if (!Array.isArray(objects) || objects.length !== 1 || !objects[0]?.key) {
+            throw new Error('The upload did not return a media key.');
         }
+        onProgress?.(100);
+        return objects[0];
     }
     //#endregion
     async deleteUnattachedMedia(key) {
@@ -5739,10 +6208,7 @@ class TaonCmsContentApiService extends TaonBaseAngularService {
     }
     //#endregion
     permanentlyDeleteContent(id, expectedVersion) {
-        return this.taonCmsContentController
-            .permanentlyDeleteContent(id, expectedVersion)
-            .request()
-            .observable.pipe(map(res => res.body.json));
+        return this.taonCmsContentController.permanentlyDeleteContent(id, expectedVersion).request().observable.pipe(map(res => res.body.json));
     }
     //#region API / restore content
     restoreContent(id, input) {
@@ -5767,7 +6233,8 @@ class TaonCmsContentApiService extends TaonBaseAngularService {
     }
     //#endregion
     async getParentPost(id) {
-        return (await this.taonCmsContentController.getParentPost(id).request()).body.json;
+        return (await this.taonCmsContentController.getParentPost(id).request())
+            .body.json;
     }
     async getVisibilityConfiguration(id) {
         return (await this.taonCmsContentController
@@ -5775,7 +6242,8 @@ class TaonCmsContentApiService extends TaonBaseAngularService {
             .request()).body.json;
     }
     async getPostVersions(id) {
-        return (await this.taonCmsContentController.getPostVersions(id).request()).body.json;
+        return (await this.taonCmsContentController.getPostVersions(id).request())
+            .body.json;
     }
     //#region API / list permissions
     listPermissions(id) {
@@ -5800,16 +6268,10 @@ class TaonCmsContentApiService extends TaonBaseAngularService {
     }
     //#endregion
     linkVersionPost(id, versionPostId, kind, expectedVersion) {
-        return this.taonCmsContentController
-            .linkVersionPost(id, versionPostId, kind, expectedVersion)
-            .request()
-            .observable.pipe(map(res => res.body.json));
+        return this.taonCmsContentController.linkVersionPost(id, versionPostId, kind, expectedVersion).request().observable.pipe(map(res => res.body.json));
     }
     removeVersionPost(id, kind, expectedVersion) {
-        return this.taonCmsContentController
-            .removeVersionPost(id, kind, expectedVersion)
-            .request()
-            .observable.pipe(map(res => res.body.json));
+        return this.taonCmsContentController.removeVersionPost(id, kind, expectedVersion).request().observable.pipe(map(res => res.body.json));
     }
     //#region API / get all entites
     /**
@@ -6373,6 +6835,13 @@ class TaonCmsContentConfigService extends TaonBaseAngularService {
     get siteName() {
         return this.taonCmsContentProvider.siteName;
     }
+    get requiredSlugs() {
+        return [
+            ...new Set((this.taonCmsContentProvider.requiredSlugs ?? [])
+                .map(slug => String(slug ?? '').trim())
+                .filter(Boolean)),
+        ];
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonCmsContentConfigService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonCmsContentConfigService }); }
 }
@@ -6380,17 +6849,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
             type: Injectable
         }] });
 
-const TaonCmsContentDefaultsValues = {
-    description: '',
-    version: 0,
-    id: void 0,
-    type: TaonCmsContentType.Normal,
-    videoKey: null,
-    audioKey: null,
-    attachmentKey: null,
-    thumbnailKey: null,
-};
-
 /**
  * Resolves allowlisted values as HTML text/attribute data, not markup.
  * The returned HTML must still pass through the renderer's HTML sanitizer.
@@ -6419,6 +6877,81 @@ function resolveTemplateVariables(content, context) {
     });
 }
 
+const progressCallbacks = new WeakMap();
+// Keep Taon's middleware, retries and response decoding; replace only the
+// final Fetch transport for uploads that request browser upload events.
+function trackCmsUpload(url, body, onProgress) {
+    const key = `cms-upload-progress-POST-${new URL(url).pathname}`;
+    if (!Resource.methodsInterceptors.has(key)) {
+        Resource.methodsInterceptors.set(key, {
+            intercept: ({ req, next }) => {
+                if (!(req.body instanceof FormData)) {
+                    return next.handle(req);
+                }
+                const uploadBody = req.body;
+                const callback = progressCallbacks.get(uploadBody);
+                if (!callback) {
+                    return next.handle(req);
+                }
+                return new Observable(subscriber => {
+                    const xhr = new XMLHttpRequest();
+                    xhr.open(req.method || 'POST', req.url);
+                    xhr.withCredentials = req.credentials === 'include';
+                    new Headers(req.headers).forEach((value, name) => {
+                        // The browser must supply the multipart boundary.
+                        if (name.toLowerCase() !== 'content-type') {
+                            xhr.setRequestHeader(name, value);
+                        }
+                    });
+                    xhr.upload.onprogress = event => {
+                        if (event.lengthComputable && event.total > 0) {
+                            callback(Math.min(100, Math.floor((event.loaded * 100) / event.total)));
+                        }
+                    };
+                    xhr.onload = () => {
+                        const headers = new Headers();
+                        for (const line of xhr
+                            .getAllResponseHeaders()
+                            .trim()
+                            .split(/[\r\n]+/)) {
+                            const separator = line.indexOf(':');
+                            if (separator > 0) {
+                                headers.append(line.slice(0, separator), line.slice(separator + 1).trim());
+                            }
+                        }
+                        subscriber.next(new Response([204, 205, 304].includes(xhr.status) ? null : xhr.responseText, {
+                            status: xhr.status,
+                            statusText: xhr.statusText,
+                            headers,
+                        }));
+                        subscriber.complete();
+                    };
+                    xhr.onerror = () => subscriber.error(new Error('Media upload network error.'));
+                    xhr.ontimeout = () => subscriber.error(new Error('Media upload timed out.'));
+                    xhr.onabort = () => subscriber.error(new Error('Media upload was cancelled.'));
+                    const abort = () => xhr.abort();
+                    req.signal?.addEventListener('abort', abort, { once: true });
+                    if (req.signal?.aborted) {
+                        subscriber.error(new Error('Media upload was cancelled.'));
+                    }
+                    else {
+                        callback(0);
+                        xhr.send(uploadBody);
+                    }
+                    return () => {
+                        req.signal?.removeEventListener('abort', abort);
+                        if (xhr.readyState !== XMLHttpRequest.DONE) {
+                            xhr.abort();
+                        }
+                    };
+                });
+            },
+        });
+    }
+    progressCallbacks.set(body, onProgress);
+    return () => progressCallbacks.delete(body);
+}
+
 class TaonCmsContentAssetApiService extends TaonBaseAngularService {
     constructor() {
         super(...arguments);
@@ -7007,6 +7540,606 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 }]
         }] });
 
+class TaonSpreadsheetTableComponent {
+    constructor() {
+        this.data = model({
+            version: 1,
+            columns: [],
+            rows: [],
+        }, ...(ngDevMode ? [{ debugName: "data" }] : []));
+        this.readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.validationError = model('', ...(ngDevMode ? [{ debugName: "validationError" }] : []));
+        this.view = signal('table', ...(ngDevMode ? [{ debugName: "view" }] : []));
+        this.activeCell = signal(null, ...(ngDevMode ? [{ debugName: "activeCell" }] : []));
+        this.pendingImport = signal(null, ...(ngDevMode ? [{ debugName: "pendingImport" }] : []));
+        this.importFormat = signal('', ...(ngDevMode ? [{ debugName: "importFormat" }] : []));
+        this.importMode = signal('replace', ...(ngDevMode ? [{ debugName: "importMode" }] : []));
+        this.columnTypes = [
+            'string',
+            'number',
+            'boolean',
+            'date',
+            'json',
+        ];
+        this.jsonPreview = computed(() => JSON.stringify(this.data().rows, null, 2), ...(ngDevMode ? [{ debugName: "jsonPreview" }] : []));
+        this.undoStack = [];
+        this.redoStack = [];
+    }
+    addColumn() {
+        if (!this.canEdit()) {
+            return;
+        }
+        const data = this.data();
+        let number = data.columns.length + 1;
+        let key = `column${number}`;
+        while (data.columns.some(column => column.key === key)) {
+            number += 1;
+            key = `column${number}`;
+        }
+        this.commit({
+            ...data,
+            columns: [
+                ...data.columns,
+                { key, label: `Column ${number}`, type: 'string' },
+            ],
+            rows: data.rows.map(row => ({ ...row, [key]: null })),
+        });
+    }
+    addRow() {
+        if (!this.canEdit()) {
+            return;
+        }
+        const row = {};
+        for (const column of this.data().columns) {
+            row[column.key] = null;
+        }
+        this.commit({ ...this.data(), rows: [...this.data().rows, row] });
+    }
+    deleteRow(rowIndex) {
+        if (!this.canEdit() ||
+            !globalThis.confirm('Delete this row? This cannot be undone.')) {
+            return;
+        }
+        this.commit({
+            ...this.data(),
+            rows: this.data().rows.filter((_, index) => index !== rowIndex),
+        });
+    }
+    duplicateRow(rowIndex) {
+        if (!this.canEdit()) {
+            return;
+        }
+        const rows = [...this.data().rows];
+        rows.splice(rowIndex + 1, 0, { ...rows[rowIndex] });
+        this.commit({ ...this.data(), rows });
+    }
+    deleteColumn(columnIndex) {
+        if (!this.canEdit() ||
+            !globalThis.confirm('Delete this column and its cell values? This cannot be undone.')) {
+            return;
+        }
+        const column = this.data().columns[columnIndex];
+        const rows = this.data().rows.map(row => {
+            const { [column.key]: _removed, ...remaining } = row;
+            return remaining;
+        });
+        this.commit({
+            ...this.data(),
+            columns: this.data().columns.filter((_, index) => index !== columnIndex),
+            rows,
+        });
+    }
+    renameColumn(columnIndex, field, value) {
+        if (!this.canEdit()) {
+            return;
+        }
+        const columns = this.data().columns.map(column => ({ ...column }));
+        const previousKey = columns[columnIndex].key;
+        const nextValue = field === 'key' ? value.trim() : value;
+        const nextKey = field === 'key' ? nextValue : previousKey;
+        if (field === 'key' &&
+            (!/^[a-z][A-Za-z0-9]*$/.test(nextKey) ||
+                ['__proto__', 'prototype', 'constructor'].includes(nextKey) ||
+                columns.some((column, index) => index !== columnIndex && column.key === nextKey))) {
+            this.validationError.set('Column keys must be unique, safe camelCase identifiers.');
+            return;
+        }
+        columns[columnIndex] = { ...columns[columnIndex], [field]: nextValue };
+        const rows = field === 'key' && previousKey !== nextKey
+            ? this.data().rows.map(row => {
+                const { [previousKey]: value, ...remaining } = row;
+                return { ...remaining, [nextKey]: value };
+            })
+            : this.data().rows;
+        this.commit({ ...this.data(), columns, rows });
+    }
+    setColumnType(columnIndex, type) {
+        if (!this.canEdit()) {
+            return;
+        }
+        const columns = this.data().columns.map(column => ({ ...column }));
+        columns[columnIndex] = { ...columns[columnIndex], type };
+        this.commit({ ...this.data(), columns });
+    }
+    setCell(rowIndex, column, event) {
+        if (!this.canEdit()) {
+            return;
+        }
+        const target = event.target;
+        let value = target.value;
+        if (column.type === 'number') {
+            value = target.value === '' ? null : Number(target.value);
+            if (value !== null && !Number.isFinite(value)) {
+                this.validationError.set(`Row ${rowIndex + 1}, ${column.label || column.key}: enter a valid number.`);
+                return;
+            }
+        }
+        else if (column.type === 'boolean') {
+            value = target.checked;
+        }
+        else if (column.type === 'date') {
+            value = target.value
+                ? new Date(`${target.value}T00:00:00.000Z`).toISOString().slice(0, 10)
+                : null;
+        }
+        else if (column.type === 'json') {
+            if (!target.value.trim()) {
+                value = null;
+            }
+            else {
+                try {
+                    value = JSON.parse(target.value);
+                }
+                catch {
+                    this.validationError.set(`Row ${rowIndex + 1}, ${column.label || column.key}: enter valid JSON.`);
+                    return;
+                }
+            }
+        }
+        const rows = this.data().rows.map((row, index) => index === rowIndex ? { ...row, [column.key]: value } : row);
+        this.commit({ ...this.data(), rows });
+    }
+    onCellKeydown(event, row, column) {
+        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+            const target = event.target;
+            if (target.tagName === 'TEXTAREA') {
+                return;
+            }
+            if (target instanceof HTMLInputElement &&
+                target.type !== 'checkbox' &&
+                (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+                const atBoundary = event.key === 'ArrowLeft'
+                    ? target.selectionStart === 0
+                    : target.selectionStart === target.value.length;
+                if (!atBoundary) {
+                    return;
+                }
+            }
+            event.preventDefault();
+            const next = {
+                row: row +
+                    (event.key === 'ArrowUp' ? -1 : event.key === 'ArrowDown' ? 1 : 0),
+                column: column +
+                    (event.key === 'ArrowLeft' ? -1 : event.key === 'ArrowRight' ? 1 : 0),
+            };
+            this.focusCell(next.row, next.column);
+            return;
+        }
+        if (event.target.tagName === 'TEXTAREA' &&
+            event.key === 'Enter' &&
+            !(event.ctrlKey || event.metaKey)) {
+            return;
+        }
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'z') {
+            event.preventDefault();
+            event.shiftKey ? this.redo() : this.undo();
+            return;
+        }
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'y') {
+            event.preventDefault();
+            this.redo();
+            return;
+        }
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c') {
+            event.preventDefault();
+            const value = this.cellValue(row, this.data().columns[column]);
+            void (navigator.clipboard?.writeText(value) ??
+                Promise.reject(new Error('Clipboard access is unavailable.'))).catch(() => {
+                this.validationError.set('Could not access the clipboard.');
+            });
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.target.blur();
+            return;
+        }
+        if (event.key === 'Tab' || event.key === 'Enter') {
+            event.preventDefault();
+            const direction = event.shiftKey ? -1 : 1;
+            let next = { row, column };
+            if (event.key === 'Tab') {
+                let nextColumn = column + direction;
+                let nextRow = row;
+                if (nextColumn >= this.data().columns.length) {
+                    nextColumn = 0;
+                    nextRow += 1;
+                }
+                else if (nextColumn < 0) {
+                    nextColumn = this.data().columns.length - 1;
+                    nextRow -= 1;
+                }
+                next = { row: nextRow, column: nextColumn };
+            }
+            else {
+                next = { row: row + direction, column };
+            }
+            if (event.key === 'Tab' &&
+                !event.shiftKey &&
+                next.row === this.data().rows.length) {
+                this.addRow();
+            }
+            this.activeCell.set(next);
+            this.focusCell(next.row, next.column);
+        }
+        else if (event.key === 'Backspace' || event.key === 'Delete') {
+            if (!['INPUT', 'TEXTAREA'].includes(event.target.tagName)) {
+                event.preventDefault();
+                this.clearCell(row, column);
+            }
+        }
+    }
+    onCellPaste(event, rowIndex, columnIndex) {
+        if (!this.canEdit()) {
+            return;
+        }
+        const text = event.clipboardData?.getData('text/plain');
+        if (!text || (!text.includes('\t') && !/[\r\n]/.test(text))) {
+            return;
+        }
+        event.preventDefault();
+        try {
+            const matrix = parseClipboardMatrix(text);
+            const columns = [...this.data().columns];
+            const pastedWidth = Math.max(...matrix.map(row => row.length));
+            while (columns.length < columnIndex + pastedWidth &&
+                columns.length < 200) {
+                let number = columns.length + 1;
+                let key = `column${number}`;
+                while (columns.some(column => column.key === key)) {
+                    key = `column${++number}`;
+                }
+                columns.push({ key, label: `Column ${number}`, type: 'string' });
+            }
+            if (columns.length < columnIndex + pastedWidth) {
+                throw new Error('Pasted data exceeds the 200-column table limit.');
+            }
+            const rows = [...this.data().rows];
+            while (rows.length < rowIndex + matrix.length && rows.length < 10_000) {
+                const newRow = {};
+                for (const column of columns) {
+                    newRow[column.key] = null;
+                }
+                rows.push(newRow);
+            }
+            if (rows.length < rowIndex + matrix.length) {
+                throw new Error('Pasted data exceeds the 10,000-row table limit.');
+            }
+            matrix.forEach((values, pastedRowIndex) => {
+                values.forEach((rawValue, pastedColumnIndex) => {
+                    const targetColumn = columnIndex + pastedColumnIndex;
+                    const column = columns[targetColumn];
+                    rows[rowIndex + pastedRowIndex] = {
+                        ...rows[rowIndex + pastedRowIndex],
+                        [column.key]: parsePastedCell(rawValue, column),
+                    };
+                });
+            });
+            this.commit({ version: 1, columns, rows });
+        }
+        catch (error) {
+            this.validationError.set(error instanceof Error ? error.message : 'The pasted data is invalid.');
+        }
+    }
+    onRowDrop(event) {
+        if (!this.canEdit() || event.previousIndex === event.currentIndex) {
+            return;
+        }
+        const rows = [...this.data().rows];
+        moveItemInArray(rows, event.previousIndex, event.currentIndex);
+        this.commit({ ...this.data(), rows });
+    }
+    onColumnDrop(event) {
+        if (!this.canEdit() || event.previousIndex === event.currentIndex) {
+            return;
+        }
+        const columns = [...this.data().columns];
+        moveItemInArray(columns, event.previousIndex, event.currentIndex);
+        this.commit({ ...this.data(), columns });
+    }
+    undo() {
+        if (!this.canEdit()) {
+            return;
+        }
+        const previous = this.undoStack.pop();
+        if (!previous) {
+            return;
+        }
+        this.redoStack.push(this.data());
+        this.data.set(previous);
+        this.validationError.set('');
+    }
+    redo() {
+        if (!this.canEdit()) {
+            return;
+        }
+        const next = this.redoStack.pop();
+        if (!next) {
+            return;
+        }
+        this.undoStack.push(this.data());
+        this.data.set(next);
+        this.validationError.set('');
+    }
+    async importFile(event) {
+        const inputElement = event.target;
+        const file = inputElement.files?.[0];
+        inputElement.value = '';
+        if (!file || !this.canEdit()) {
+            return;
+        }
+        try {
+            if (file.size > TAON_SPREADSHEET_MAX_BYTES) {
+                throw new Error('Import files must be 10 MB or smaller.');
+            }
+            const text = await file.text();
+            const imported = /\.json$/i.test(file.name)
+                ? importSpreadsheetJson(text)
+                : /\.csv$/i.test(file.name)
+                    ? parseSpreadsheetCsv(text)
+                    : (() => {
+                        throw new Error('Only JSON and CSV files are supported.');
+                    })();
+            this.importFormat.set(/\.json$/i.test(file.name) ? 'JSON' : 'CSV');
+            this.importMode.set('replace');
+            this.pendingImport.set(imported);
+        }
+        catch (error) {
+            this.validationError.set(error instanceof Error
+                ? error.message
+                : 'The selected file could not be imported.');
+        }
+    }
+    applyImport() {
+        const imported = this.pendingImport();
+        if (!imported || !this.canEdit()) {
+            return;
+        }
+        if (this.importMode() === 'replace' &&
+            (this.data().rows.length > 0 || this.data().columns.length > 0) &&
+            !globalThis.confirm('Replace the current table with the imported data?')) {
+            return;
+        }
+        if (this.importMode() === 'append') {
+            const currentColumns = this.data().columns;
+            const compatible = currentColumns.length === imported.columns.length &&
+                currentColumns.every((column, index) => column.key === imported.columns[index].key &&
+                    column.type === imported.columns[index].type);
+            if (!compatible) {
+                this.validationError.set('Append requires imported columns with the same keys, types, and order as this table.');
+                return;
+            }
+            this.commit({
+                ...this.data(),
+                rows: [...this.data().rows, ...imported.rows],
+            });
+        }
+        else {
+            this.commit(imported);
+        }
+        this.pendingImport.set(null);
+    }
+    cancelImport() {
+        this.pendingImport.set(null);
+    }
+    previewCell(row, column) {
+        const value = row[column.key];
+        return value === undefined
+            ? ''
+            : typeof value === 'string'
+                ? value
+                : JSON.stringify(value);
+    }
+    downloadJson(fullTable = false) {
+        const content = JSON.stringify(fullTable ? this.data() : this.data().rows, null, 2);
+        this.download(content, fullTable ? 'json-table.json' : 'table-data.json', 'application/json');
+    }
+    downloadCsv() {
+        this.download(serializeSpreadsheetCsv(this.data()), 'table-data.csv', 'text/csv');
+    }
+    async copyJson() {
+        try {
+            if (!navigator.clipboard) {
+                throw new Error('Clipboard access is unavailable.');
+            }
+            await navigator.clipboard.writeText(this.jsonPreview());
+            this.validationError.set('');
+        }
+        catch {
+            this.validationError.set('Could not access the clipboard. Copy the preview manually.');
+        }
+    }
+    keyFromLabel(label) {
+        return normalizeSpreadsheetKey(label);
+    }
+    setColumnWidth(columnIndex, value) {
+        if (!this.canEdit()) {
+            return;
+        }
+        const width = Number(value);
+        if (!Number.isFinite(width) || width < 40 || width > 1000) {
+            this.validationError.set('Column width must be between 40 and 1000 pixels.');
+            return;
+        }
+        const columns = this.data().columns.map(column => ({ ...column }));
+        columns[columnIndex] = { ...columns[columnIndex], width };
+        this.commit({ ...this.data(), columns });
+    }
+    cellValue(rowIndex, column) {
+        const value = this.data().rows[rowIndex]?.[column.key];
+        if (column.type === 'json' && value !== null && value !== undefined) {
+            return JSON.stringify(value);
+        }
+        return value === null || value === undefined ? '' : String(value);
+    }
+    trackColumn(_index, column) {
+        return column.key;
+    }
+    clearCell(rowIndex, columnIndex) {
+        const column = this.data().columns[columnIndex];
+        const rows = this.data().rows.map((row, index) => index === rowIndex ? { ...row, [column.key]: null } : row);
+        this.commit({ ...this.data(), rows });
+    }
+    focusCell(row, column) {
+        if (row < 0 ||
+            row >= this.data().rows.length ||
+            column < 0 ||
+            column >= this.data().columns.length) {
+            return;
+        }
+        this.activeCell.set({ row, column });
+        setTimeout(() => {
+            document
+                .querySelector(`[data-cell="${row}:${column}"]`)
+                ?.focus();
+        });
+    }
+    commit(value) {
+        try {
+            const validated = validateSpreadsheetData(value);
+            this.undoStack.push(this.data());
+            if (this.undoStack.length > 100) {
+                this.undoStack.shift();
+            }
+            this.redoStack.length = 0;
+            this.data.set(validated);
+            this.validationError.set('');
+        }
+        catch (error) {
+            this.validationError.set(error instanceof Error ? error.message : 'Table data is invalid.');
+        }
+    }
+    canEdit() {
+        return !this.readOnly() && !this.disabled();
+    }
+    download(content, fileName, contentType) {
+        const url = URL.createObjectURL(new Blob([content], { type: contentType }));
+        const anchor = document.createElement('a');
+        anchor.href = url;
+        anchor.download = fileName;
+        anchor.click();
+        URL.revokeObjectURL(url);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSpreadsheetTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonSpreadsheetTableComponent, isStandalone: true, selector: "taon-spreadsheet-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, validationError: { classPropertyName: "validationError", publicName: "validationError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", validationError: "validationErrorChange" }, ngImport: i0, template: "<section\n  class=\"spreadsheet\"\n  [class.read-only]=\"readOnly() || disabled()\">\n  <header class=\"toolbar\">\n    @if (!readOnly()) {\n      <button\n        mat-button\n        type=\"button\"\n        [disabled]=\"disabled()\"\n        (click)=\"addRow()\">\n        <mat-icon>add</mat-icon> Add row\n      </button>\n      <button\n        mat-button\n        type=\"button\"\n        [disabled]=\"disabled()\"\n        (click)=\"addColumn()\">\n        <mat-icon>view_column</mat-icon> Add column\n      </button>\n      <label class=\"import-button\">\n        <mat-icon>upload_file</mat-icon> Import JSON/CSV\n        <input\n          type=\"file\"\n          accept=\".json,.csv,application/json,text/csv\"\n          [disabled]=\"disabled()\"\n          (change)=\"importFile($event)\" />\n      </label>\n      <button\n        mat-button\n        type=\"button\"\n        [disabled]=\"disabled()\"\n        (click)=\"undo()\">\n        Undo\n      </button>\n      <button\n        mat-button\n        type=\"button\"\n        [disabled]=\"disabled()\"\n        (click)=\"redo()\">\n        Redo\n      </button>\n    }\n    <div class=\"w-full\">\n      <button\n        mat-button\n        type=\"button\"\n        (click)=\"view.set('table')\">\n        Table\n      </button>\n      <button\n        mat-button\n        type=\"button\"\n        (click)=\"view.set('json')\">\n        JSON Preview\n      </button>\n    </div>\n    @if (!readOnly()) {\n      <button\n        mat-button\n        type=\"button\"\n        (click)=\"view.set('settings')\">\n        Settings\n      </button>\n      <button\n        mat-button\n        type=\"button\"\n        (click)=\"downloadJson()\">\n        Export JSON\n      </button>\n      <button\n        mat-button\n        type=\"button\"\n        (click)=\"downloadJson(true)\">\n        Full JSON\n      </button>\n      <button\n        mat-button\n        type=\"button\"\n        (click)=\"downloadCsv()\">\n        Export CSV\n      </button>\n    }\n  </header>\n\n  @if (validationError()) {\n    <p\n      class=\"validation-error\"\n      role=\"alert\">\n      {{ validationError() }}\n    </p>\n  }\n\n  @if (pendingImport(); as imported) {\n    <section\n      class=\"import-preview\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"import-preview-title\">\n      <h2 id=\"import-preview-title\">Preview {{ importFormat() }} import</h2>\n      <p>\n        {{ imported.rows.length }} rows \u00B7 {{ imported.columns.length }} columns\n      </p>\n      @if (data().rows.length || data().columns.length) {\n        <label>\n          Import mode\n          <mat-select\n            [value]=\"importMode()\"\n            (selectionChange)=\"importMode.set($event.value)\">\n            <mat-option value=\"replace\">Replace table</mat-option>\n            <mat-option value=\"append\">Append rows</mat-option>\n          </mat-select>\n        </label>\n      }\n      <div class=\"table-scroll\">\n        <table>\n          <thead>\n            <tr>\n              @for (column of imported.columns; track column.key) {\n                <th>\n                  {{ column.label || column.key }}\n                  <small>{{ column.key }} \u00B7 {{ column.type }}</small>\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of imported.rows.slice(0, 5); track $index) {\n              <tr>\n                @for (column of imported.columns; track column.key) {\n                  <td>{{ previewCell(row, column) }}</td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n      <footer>\n        <button\n          mat-button\n          type=\"button\"\n          (click)=\"cancelImport()\">\n          Cancel\n        </button>\n        <button\n          mat-flat-button\n          type=\"button\"\n          (click)=\"applyImport()\">\n          Apply import\n        </button>\n      </footer>\n    </section>\n  }\n\n  @if (view() === 'table') {\n    @if (!data().columns.length) {\n      <div class=\"empty-state\">\n        <p>No columns yet. Add a column or import a JSON/CSV file.</p>\n        @if (!readOnly()) {\n          <button\n            mat-stroked-button\n            type=\"button\"\n            (click)=\"addColumn()\">\n            Add first column\n          </button>\n        }\n      </div>\n    } @else {\n      <div class=\"table-scroll\">\n        <table>\n          <thead\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            [cdkDropListDisabled]=\"readOnly() || disabled()\"\n            (cdkDropListDropped)=\"onColumnDrop($event)\">\n            <tr>\n              <th class=\"row-number\">#</th>\n              @for (\n                column of data().columns;\n                track trackColumn($index, column)\n              ) {\n                <th\n                  cdkDrag\n                  cdkDragHandle\n                  [cdkDragDisabled]=\"readOnly() || disabled()\"\n                  [style.minWidth.px]=\"column.width || 140\">\n                  {{ column.label || column.key }}\n                  @if (!readOnly()) {\n                    <small>{{ column.type }}</small>\n                  }\n                </th>\n              }\n              @if (!readOnly()) {\n                <th class=\"row-actions\">Actions</th>\n              }\n            </tr>\n          </thead>\n          <tbody\n            cdkDropList\n            [cdkDropListDisabled]=\"readOnly() || disabled()\"\n            (cdkDropListDropped)=\"onRowDrop($event)\">\n            @for (row of data().rows; track $index; let rowIndex = $index) {\n              <tr\n                cdkDrag\n                [cdkDragDisabled]=\"readOnly() || disabled()\">\n                <th\n                  class=\"row-number\"\n                  cdkDragHandle>\n                  {{ rowIndex + 1 }}\n                </th>\n                @for (\n                  column of data().columns;\n                  track trackColumn($index, column);\n                  let columnIndex = $index\n                ) {\n                  <td\n                    [class.active]=\"\n                      activeCell()?.row === rowIndex &&\n                      activeCell()?.column === columnIndex\n                    \">\n                    @if (column.type === 'boolean') {\n                      <input\n                        type=\"checkbox\"\n                        [checked]=\"row[column.key] === true\"\n                        [disabled]=\"readOnly() || disabled()\"\n                        [attr.data-cell]=\"rowIndex + ':' + columnIndex\"\n                        (focus)=\"\n                          activeCell.set({ row: rowIndex, column: columnIndex })\n                        \"\n                        (change)=\"setCell(rowIndex, column, $event)\"\n                        (keydown)=\"\n                          onCellKeydown($event, rowIndex, columnIndex)\n                        \" />\n                    } @else if (column.type === 'json') {\n                      <textarea\n                        [value]=\"cellValue(rowIndex, column)\"\n                        [readonly]=\"readOnly() || disabled()\"\n                        [attr.data-cell]=\"rowIndex + ':' + columnIndex\"\n                        (focus)=\"\n                          activeCell.set({ row: rowIndex, column: columnIndex })\n                        \"\n                        (input)=\"setCell(rowIndex, column, $event)\"\n                        (paste)=\"onCellPaste($event, rowIndex, columnIndex)\"\n                        (keydown)=\"\n                          onCellKeydown($event, rowIndex, columnIndex)\n                        \"></textarea>\n                    } @else {\n                      <input\n                        [type]=\"\n                          column.type === 'number'\n                            ? 'number'\n                            : column.type === 'date'\n                              ? 'date'\n                              : 'text'\n                        \"\n                        [value]=\"cellValue(rowIndex, column)\"\n                        [readonly]=\"readOnly() || disabled()\"\n                        [attr.data-cell]=\"rowIndex + ':' + columnIndex\"\n                        (focus)=\"\n                          activeCell.set({ row: rowIndex, column: columnIndex })\n                        \"\n                        (input)=\"setCell(rowIndex, column, $event)\"\n                        (paste)=\"onCellPaste($event, rowIndex, columnIndex)\"\n                        (keydown)=\"\n                          onCellKeydown($event, rowIndex, columnIndex)\n                        \" />\n                    }\n                  </td>\n                }\n                @if (!readOnly()) {\n                  <td class=\"row-actions\">\n                    <button\n                      mat-icon-button\n                      type=\"button\"\n                      aria-label=\"Duplicate row\"\n                      (click)=\"duplicateRow(rowIndex)\">\n                      <mat-icon>content_copy</mat-icon>\n                    </button>\n                    <button\n                      mat-icon-button\n                      type=\"button\"\n                      aria-label=\"Delete row\"\n                      (click)=\"deleteRow(rowIndex)\">\n                      <mat-icon>delete</mat-icon>\n                    </button>\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n  } @else if (view() === 'json') {\n    <div class=\"json-preview\">\n      <button\n        mat-stroked-button\n        type=\"button\"\n        (click)=\"copyJson()\">\n        Copy JSON\n      </button>\n      <pre>{{ jsonPreview() }}</pre>\n    </div>\n  } @else {\n    <div class=\"settings\">\n      @for (\n        column of data().columns;\n        track trackColumn($index, column);\n        let columnIndex = $index\n      ) {\n        <fieldset>\n          <legend>Column {{ columnIndex + 1 }}</legend>\n          <label>\n            Label\n            <input\n              [value]=\"column.label || ''\"\n              [disabled]=\"disabled()\"\n              (change)=\"\n                renameColumn(columnIndex, 'label', $any($event.target).value)\n              \" />\n          </label>\n          <label>\n            Key\n            <input\n              [value]=\"column.key\"\n              [disabled]=\"disabled()\"\n              (change)=\"\n                renameColumn(columnIndex, 'key', $any($event.target).value)\n              \" />\n          </label>\n          <label>\n            Type\n            <mat-select\n              [value]=\"column.type\"\n              [disabled]=\"disabled()\"\n              (selectionChange)=\"setColumnType(columnIndex, $event.value)\">\n              @for (type of columnTypes; track type) {\n                <mat-option [value]=\"type\">{{ type }}</mat-option>\n              }\n            </mat-select>\n          </label>\n          <label>\n            Width (px)\n            <input\n              type=\"number\"\n              min=\"40\"\n              max=\"1000\"\n              [value]=\"column.width || 140\"\n              [disabled]=\"disabled()\"\n              (change)=\"\n                setColumnWidth(columnIndex, $any($event.target).value)\n              \" />\n          </label>\n          <button\n            mat-stroked-button\n            type=\"button\"\n            [disabled]=\"disabled()\"\n            (click)=\"deleteColumn(columnIndex)\">\n            Delete column\n          </button>\n        </fieldset>\n      }\n    </div>\n  }\n</section>\n", styles: [":host{display:block;min-width:0}.spreadsheet{border:1px solid rgba(136,136,136,.3333333333);border-radius:6px;min-width:0}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;padding:.5rem;border-bottom:1px solid rgba(136,136,136,.3333333333)}.import-button{display:inline-flex;align-items:center;gap:.35rem;padding:0 .75rem;cursor:pointer;font:inherit}.import-button input{display:none}.table-scroll{max-width:100%;max-height:60vh;overflow:auto}table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0}th,td{padding:.35rem;border-right:1px solid rgba(136,136,136,.2);border-bottom:1px solid rgba(136,136,136,.2);text-align:left}thead th{position:sticky;top:0;z-index:1;background:var(--mat-sys-surface, white)}thead small{display:block;opacity:.65}.row-number{position:sticky;left:0;z-index:2;width:3rem;background:var(--mat-sys-surface, white);text-align:center}td input:not([type=checkbox]),td textarea{box-sizing:border-box;width:100%;min-width:7rem;padding:.4rem;border:1px solid transparent;color:inherit;background:transparent;font:inherit}td textarea{min-height:2.5rem;resize:vertical}td input:focus,td textarea:focus,td.active{outline:2px solid #3f51b5;outline-offset:-2px}.row-actions{white-space:nowrap}.empty-state,.json-preview,.settings{padding:1rem}.json-preview pre{max-height:60vh;overflow:auto;padding:1rem;background:#8881;font-family:monospace;white-space:pre-wrap;overflow-wrap:anywhere}.settings{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}.settings fieldset{display:grid;gap:.75rem;min-width:0}.settings label{display:grid;gap:.25rem}.settings input{min-width:0;padding:.5rem}.validation-error{margin:0;padding:.75rem 1rem;color:#b3261e}.import-preview{position:fixed;inset:10vh max(1rem,(100vw - 56rem) / 2);z-index:1000;display:grid;align-content:start;gap:.75rem;overflow:auto;padding:1.25rem;border:1px solid rgba(136,136,136,.4666666667);border-radius:8px;background:var(--mat-sys-surface, white);box-shadow:0 1rem 4rem #0005}.import-preview h2,.import-preview p{margin:0}.import-preview footer{display:flex;justify-content:flex-end;gap:.5rem}.read-only td input,.read-only td textarea{cursor:default}\n"], dependencies: [{ kind: "directive", type: 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: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: 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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonSpreadsheetTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'taon-spreadsheet-table', standalone: true, imports: [
+                        CdkDrag,
+                        CdkDragHandle,
+                        CdkDropList,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatSelectModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  class=\"spreadsheet\"\n  [class.read-only]=\"readOnly() || disabled()\">\n  <header class=\"toolbar\">\n    @if (!readOnly()) {\n      <button\n        mat-button\n        type=\"button\"\n        [disabled]=\"disabled()\"\n        (click)=\"addRow()\">\n        <mat-icon>add</mat-icon> Add row\n      </button>\n      <button\n        mat-button\n        type=\"button\"\n        [disabled]=\"disabled()\"\n        (click)=\"addColumn()\">\n        <mat-icon>view_column</mat-icon> Add column\n      </button>\n      <label class=\"import-button\">\n        <mat-icon>upload_file</mat-icon> Import JSON/CSV\n        <input\n          type=\"file\"\n          accept=\".json,.csv,application/json,text/csv\"\n          [disabled]=\"disabled()\"\n          (change)=\"importFile($event)\" />\n      </label>\n      <button\n        mat-button\n        type=\"button\"\n        [disabled]=\"disabled()\"\n        (click)=\"undo()\">\n        Undo\n      </button>\n      <button\n        mat-button\n        type=\"button\"\n        [disabled]=\"disabled()\"\n        (click)=\"redo()\">\n        Redo\n      </button>\n    }\n    <div class=\"w-full\">\n      <button\n        mat-button\n        type=\"button\"\n        (click)=\"view.set('table')\">\n        Table\n      </button>\n      <button\n        mat-button\n        type=\"button\"\n        (click)=\"view.set('json')\">\n        JSON Preview\n      </button>\n    </div>\n    @if (!readOnly()) {\n      <button\n        mat-button\n        type=\"button\"\n        (click)=\"view.set('settings')\">\n        Settings\n      </button>\n      <button\n        mat-button\n        type=\"button\"\n        (click)=\"downloadJson()\">\n        Export JSON\n      </button>\n      <button\n        mat-button\n        type=\"button\"\n        (click)=\"downloadJson(true)\">\n        Full JSON\n      </button>\n      <button\n        mat-button\n        type=\"button\"\n        (click)=\"downloadCsv()\">\n        Export CSV\n      </button>\n    }\n  </header>\n\n  @if (validationError()) {\n    <p\n      class=\"validation-error\"\n      role=\"alert\">\n      {{ validationError() }}\n    </p>\n  }\n\n  @if (pendingImport(); as imported) {\n    <section\n      class=\"import-preview\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"import-preview-title\">\n      <h2 id=\"import-preview-title\">Preview {{ importFormat() }} import</h2>\n      <p>\n        {{ imported.rows.length }} rows \u00B7 {{ imported.columns.length }} columns\n      </p>\n      @if (data().rows.length || data().columns.length) {\n        <label>\n          Import mode\n          <mat-select\n            [value]=\"importMode()\"\n            (selectionChange)=\"importMode.set($event.value)\">\n            <mat-option value=\"replace\">Replace table</mat-option>\n            <mat-option value=\"append\">Append rows</mat-option>\n          </mat-select>\n        </label>\n      }\n      <div class=\"table-scroll\">\n        <table>\n          <thead>\n            <tr>\n              @for (column of imported.columns; track column.key) {\n                <th>\n                  {{ column.label || column.key }}\n                  <small>{{ column.key }} \u00B7 {{ column.type }}</small>\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of imported.rows.slice(0, 5); track $index) {\n              <tr>\n                @for (column of imported.columns; track column.key) {\n                  <td>{{ previewCell(row, column) }}</td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n      <footer>\n        <button\n          mat-button\n          type=\"button\"\n          (click)=\"cancelImport()\">\n          Cancel\n        </button>\n        <button\n          mat-flat-button\n          type=\"button\"\n          (click)=\"applyImport()\">\n          Apply import\n        </button>\n      </footer>\n    </section>\n  }\n\n  @if (view() === 'table') {\n    @if (!data().columns.length) {\n      <div class=\"empty-state\">\n        <p>No columns yet. Add a column or import a JSON/CSV file.</p>\n        @if (!readOnly()) {\n          <button\n            mat-stroked-button\n            type=\"button\"\n            (click)=\"addColumn()\">\n            Add first column\n          </button>\n        }\n      </div>\n    } @else {\n      <div class=\"table-scroll\">\n        <table>\n          <thead\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            [cdkDropListDisabled]=\"readOnly() || disabled()\"\n            (cdkDropListDropped)=\"onColumnDrop($event)\">\n            <tr>\n              <th class=\"row-number\">#</th>\n              @for (\n                column of data().columns;\n                track trackColumn($index, column)\n              ) {\n                <th\n                  cdkDrag\n                  cdkDragHandle\n                  [cdkDragDisabled]=\"readOnly() || disabled()\"\n                  [style.minWidth.px]=\"column.width || 140\">\n                  {{ column.label || column.key }}\n                  @if (!readOnly()) {\n                    <small>{{ column.type }}</small>\n                  }\n                </th>\n              }\n              @if (!readOnly()) {\n                <th class=\"row-actions\">Actions</th>\n              }\n            </tr>\n          </thead>\n          <tbody\n            cdkDropList\n            [cdkDropListDisabled]=\"readOnly() || disabled()\"\n            (cdkDropListDropped)=\"onRowDrop($event)\">\n            @for (row of data().rows; track $index; let rowIndex = $index) {\n              <tr\n                cdkDrag\n                [cdkDragDisabled]=\"readOnly() || disabled()\">\n                <th\n                  class=\"row-number\"\n                  cdkDragHandle>\n                  {{ rowIndex + 1 }}\n                </th>\n                @for (\n                  column of data().columns;\n                  track trackColumn($index, column);\n                  let columnIndex = $index\n                ) {\n                  <td\n                    [class.active]=\"\n                      activeCell()?.row === rowIndex &&\n                      activeCell()?.column === columnIndex\n                    \">\n                    @if (column.type === 'boolean') {\n                      <input\n                        type=\"checkbox\"\n                        [checked]=\"row[column.key] === true\"\n                        [disabled]=\"readOnly() || disabled()\"\n                        [attr.data-cell]=\"rowIndex + ':' + columnIndex\"\n                        (focus)=\"\n                          activeCell.set({ row: rowIndex, column: columnIndex })\n                        \"\n                        (change)=\"setCell(rowIndex, column, $event)\"\n                        (keydown)=\"\n                          onCellKeydown($event, rowIndex, columnIndex)\n                        \" />\n                    } @else if (column.type === 'json') {\n                      <textarea\n                        [value]=\"cellValue(rowIndex, column)\"\n                        [readonly]=\"readOnly() || disabled()\"\n                        [attr.data-cell]=\"rowIndex + ':' + columnIndex\"\n                        (focus)=\"\n                          activeCell.set({ row: rowIndex, column: columnIndex })\n                        \"\n                        (input)=\"setCell(rowIndex, column, $event)\"\n                        (paste)=\"onCellPaste($event, rowIndex, columnIndex)\"\n                        (keydown)=\"\n                          onCellKeydown($event, rowIndex, columnIndex)\n                        \"></textarea>\n                    } @else {\n                      <input\n                        [type]=\"\n                          column.type === 'number'\n                            ? 'number'\n                            : column.type === 'date'\n                              ? 'date'\n                              : 'text'\n                        \"\n                        [value]=\"cellValue(rowIndex, column)\"\n                        [readonly]=\"readOnly() || disabled()\"\n                        [attr.data-cell]=\"rowIndex + ':' + columnIndex\"\n                        (focus)=\"\n                          activeCell.set({ row: rowIndex, column: columnIndex })\n                        \"\n                        (input)=\"setCell(rowIndex, column, $event)\"\n                        (paste)=\"onCellPaste($event, rowIndex, columnIndex)\"\n                        (keydown)=\"\n                          onCellKeydown($event, rowIndex, columnIndex)\n                        \" />\n                    }\n                  </td>\n                }\n                @if (!readOnly()) {\n                  <td class=\"row-actions\">\n                    <button\n                      mat-icon-button\n                      type=\"button\"\n                      aria-label=\"Duplicate row\"\n                      (click)=\"duplicateRow(rowIndex)\">\n                      <mat-icon>content_copy</mat-icon>\n                    </button>\n                    <button\n                      mat-icon-button\n                      type=\"button\"\n                      aria-label=\"Delete row\"\n                      (click)=\"deleteRow(rowIndex)\">\n                      <mat-icon>delete</mat-icon>\n                    </button>\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n  } @else if (view() === 'json') {\n    <div class=\"json-preview\">\n      <button\n        mat-stroked-button\n        type=\"button\"\n        (click)=\"copyJson()\">\n        Copy JSON\n      </button>\n      <pre>{{ jsonPreview() }}</pre>\n    </div>\n  } @else {\n    <div class=\"settings\">\n      @for (\n        column of data().columns;\n        track trackColumn($index, column);\n        let columnIndex = $index\n      ) {\n        <fieldset>\n          <legend>Column {{ columnIndex + 1 }}</legend>\n          <label>\n            Label\n            <input\n              [value]=\"column.label || ''\"\n              [disabled]=\"disabled()\"\n              (change)=\"\n                renameColumn(columnIndex, 'label', $any($event.target).value)\n              \" />\n          </label>\n          <label>\n            Key\n            <input\n              [value]=\"column.key\"\n              [disabled]=\"disabled()\"\n              (change)=\"\n                renameColumn(columnIndex, 'key', $any($event.target).value)\n              \" />\n          </label>\n          <label>\n            Type\n            <mat-select\n              [value]=\"column.type\"\n              [disabled]=\"disabled()\"\n              (selectionChange)=\"setColumnType(columnIndex, $event.value)\">\n              @for (type of columnTypes; track type) {\n                <mat-option [value]=\"type\">{{ type }}</mat-option>\n              }\n            </mat-select>\n          </label>\n          <label>\n            Width (px)\n            <input\n              type=\"number\"\n              min=\"40\"\n              max=\"1000\"\n              [value]=\"column.width || 140\"\n              [disabled]=\"disabled()\"\n              (change)=\"\n                setColumnWidth(columnIndex, $any($event.target).value)\n              \" />\n          </label>\n          <button\n            mat-stroked-button\n            type=\"button\"\n            [disabled]=\"disabled()\"\n            (click)=\"deleteColumn(columnIndex)\">\n            Delete column\n          </button>\n        </fieldset>\n      }\n    </div>\n  }\n</section>\n", styles: [":host{display:block;min-width:0}.spreadsheet{border:1px solid rgba(136,136,136,.3333333333);border-radius:6px;min-width:0}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;padding:.5rem;border-bottom:1px solid rgba(136,136,136,.3333333333)}.import-button{display:inline-flex;align-items:center;gap:.35rem;padding:0 .75rem;cursor:pointer;font:inherit}.import-button input{display:none}.table-scroll{max-width:100%;max-height:60vh;overflow:auto}table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0}th,td{padding:.35rem;border-right:1px solid rgba(136,136,136,.2);border-bottom:1px solid rgba(136,136,136,.2);text-align:left}thead th{position:sticky;top:0;z-index:1;background:var(--mat-sys-surface, white)}thead small{display:block;opacity:.65}.row-number{position:sticky;left:0;z-index:2;width:3rem;background:var(--mat-sys-surface, white);text-align:center}td input:not([type=checkbox]),td textarea{box-sizing:border-box;width:100%;min-width:7rem;padding:.4rem;border:1px solid transparent;color:inherit;background:transparent;font:inherit}td textarea{min-height:2.5rem;resize:vertical}td input:focus,td textarea:focus,td.active{outline:2px solid #3f51b5;outline-offset:-2px}.row-actions{white-space:nowrap}.empty-state,.json-preview,.settings{padding:1rem}.json-preview pre{max-height:60vh;overflow:auto;padding:1rem;background:#8881;font-family:monospace;white-space:pre-wrap;overflow-wrap:anywhere}.settings{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}.settings fieldset{display:grid;gap:.75rem;min-width:0}.settings label{display:grid;gap:.25rem}.settings input{min-width:0;padding:.5rem}.validation-error{margin:0;padding:.75rem 1rem;color:#b3261e}.import-preview{position:fixed;inset:10vh max(1rem,(100vw - 56rem) / 2);z-index:1000;display:grid;align-content:start;gap:.75rem;overflow:auto;padding:1.25rem;border:1px solid rgba(136,136,136,.4666666667);border-radius:8px;background:var(--mat-sys-surface, white);box-shadow:0 1rem 4rem #0005}.import-preview h2,.import-preview p{margin:0}.import-preview footer{display:flex;justify-content:flex-end;gap:.5rem}.read-only td input,.read-only td textarea{cursor:default}\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }, { type: i0.Output, args: ["dataChange"] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], validationError: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationError", required: false }] }, { type: i0.Output, args: ["validationErrorChange"] }] } });
+function parseClipboardMatrix(value) {
+    const rows = [];
+    let row = [];
+    let cell = '';
+    let quoted = false;
+    for (let index = 0; index < value.length; index += 1) {
+        const character = value[index];
+        if (quoted) {
+            if (character === '"' && value[index + 1] === '"') {
+                cell += '"';
+                index += 1;
+            }
+            else if (character === '"') {
+                quoted = false;
+            }
+            else {
+                cell += character;
+            }
+        }
+        else if (character === '"' && !cell) {
+            quoted = true;
+        }
+        else if (character === '\t') {
+            row.push(cell);
+            cell = '';
+        }
+        else if (character === '\r' || character === '\n') {
+            row.push(cell);
+            rows.push(row);
+            row = [];
+            cell = '';
+            if (character === '\r' && value[index + 1] === '\n') {
+                index += 1;
+            }
+        }
+        else {
+            cell += character;
+        }
+    }
+    if (quoted) {
+        throw new Error('Pasted data contains an unterminated quoted value.');
+    }
+    if (cell.length || row.length) {
+        row.push(cell);
+        rows.push(row);
+    }
+    return rows;
+}
+function parsePastedCell(value, column) {
+    if (value === '') {
+        return null;
+    }
+    if (column.type === 'number') {
+        const parsed = Number(value);
+        if (!Number.isFinite(parsed)) {
+            throw new Error(`"${value}" is not a valid number for ${column.label || column.key}.`);
+        }
+        return parsed;
+    }
+    if (column.type === 'boolean') {
+        if (/^(true|1|yes)$/i.test(value)) {
+            return true;
+        }
+        if (/^(false|0|no)$/i.test(value)) {
+            return false;
+        }
+        throw new Error(`"${value}" is not a valid boolean for ${column.label || column.key}.`);
+    }
+    if (column.type === 'date') {
+        if (!/^\d{4}-\d{2}-\d{2}$/.test(value) ||
+            Number.isNaN(Date.parse(`${value}T00:00:00.000Z`))) {
+            throw new Error(`"${value}" is not a valid date for ${column.label || column.key}.`);
+        }
+        return value;
+    }
+    if (column.type === 'json') {
+        try {
+            return JSON.parse(value);
+        }
+        catch {
+            throw new Error(`"${value}" is not valid JSON for ${column.label || column.key}.`);
+        }
+    }
+    return value;
+}
+
 //#region imports
 //#endregion
 class TaonCmsWebsiteFeatureApiService extends TaonBaseAngularService {
@@ -7170,7 +8303,7 @@ class TaonCmsWebsiteFeaturesComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonCmsWebsiteFeaturesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonCmsWebsiteFeaturesComponent, isStandalone: true, selector: "app-taon-cms-website-features", providers: [TaonCmsWebsiteFeatureApiService], ngImport: i0, template: "<h1>{{ t.gettext('Website Features') }}</h1>\n@if (error()) {\n  <p role=\"alert\">{{ error() }}</p>\n  <button mat-button type=\"button\" [disabled]=\"busy()\" (click)=\"reload()\">\n    {{ t.gettext('Reload features') }}\n  </button>\n}\n<p role=\"status\" aria-live=\"polite\">{{ feedback() }}</p>\n<ul [attr.aria-busy]=\"busy()\">\n  @for (feature of features(); track feature.key) {\n    <li>\n      <mat-checkbox\n        [checked]=\"feature.enabled\"\n        [disabled]=\"busy()\"\n        [attr.aria-label]=\"feature.name\"\n        (change)=\"toggle(feature, $event.checked)\" />\n      <div class=\"feature-name\">\n        <span>{{ feature.name }}</span>\n        <small>{{ feature.key }}</small>\n      </div>\n      <button mat-icon-button type=\"button\"\n        [attr.aria-label]=\"t.gettext('Copy feature key')\"\n        (click)=\"copyKey(feature.key)\">\n        <mat-icon>content_copy</mat-icon>\n      </button>\n      <button mat-icon-button type=\"button\" [disabled]=\"busy()\"\n        [attr.aria-label]=\"t.gettext('Delete feature')\"\n        (click)=\"deleteFeature(feature)\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </li>\n  }\n</ul>\n<form (ngSubmit)=\"addFeature()\">\n  <mat-form-field class=\"flex-grow\">\n    <mat-label>{{ t.gettext('Enter feature name') }}</mat-label>\n    <input matInput name=\"featureName\" [(ngModel)]=\"name\"\n      [disabled]=\"busy() || !loaded()\"\n      [placeholder]=\"t.gettext('Enter feature name')\" />\n  </mat-form-field>\n  <button mat-flat-button type=\"submit\" class=\"flex\"\n    [disabled]=\"busy() || !loaded() || !name.trim()\">\n    {{ t.gettext('Add feature') }}\n  </button>\n</form>\n", styles: [":host{display:block}ul{padding:0;list-style:none}li,form{display:flex;align-items:center;gap:.75rem;margin-block:.75rem}.feature-name{flex:1;min-width:0;overflow-wrap:anywhere}small{display:block;opacity:.7}\n"], dependencies: [{ 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonCmsWebsiteFeaturesComponent, isStandalone: true, selector: "app-taon-cms-website-features", providers: [TaonCmsWebsiteFeatureApiService], ngImport: i0, template: "<h1>{{ t.gettext('Website Features') }}</h1>\n@if (error()) {\n  <p role=\"alert\">{{ error() }}</p>\n  <button mat-button type=\"button\" [disabled]=\"busy()\" (click)=\"reload()\">\n    {{ t.gettext('Reload features') }}\n  </button>\n}\n<p role=\"status\" aria-live=\"polite\">{{ feedback() }}</p>\n<ul [attr.aria-busy]=\"busy()\">\n  @for (feature of features(); track feature.key) {\n    <li>\n      <mat-checkbox\n        [checked]=\"feature.enabled\"\n        [disabled]=\"busy()\"\n        [attr.aria-label]=\"feature.name\"\n        (change)=\"toggle(feature, $event.checked)\" />\n      <div class=\"feature-name\">\n        <span>{{ feature.name }}</span>\n        <small>{{ feature.key }}</small>\n      </div>\n      <button mat-icon-button type=\"button\"\n        [attr.aria-label]=\"t.gettext('Copy feature key')\"\n        (click)=\"copyKey(feature.key)\">\n        <mat-icon>content_copy</mat-icon>\n      </button>\n      <button mat-icon-button type=\"button\" [disabled]=\"busy()\"\n        [attr.aria-label]=\"t.gettext('Delete feature')\"\n        (click)=\"deleteFeature(feature)\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </li>\n  }\n</ul>\n<form (ngSubmit)=\"addFeature()\">\n  <mat-form-field class=\"flex-grow\">\n    <mat-label>{{ t.gettext('Enter feature name') }}</mat-label>\n    <input matInput name=\"featureName\" [(ngModel)]=\"name\"\n      [disabled]=\"busy() || !loaded()\"\n      [placeholder]=\"t.gettext('Enter feature name')\" />\n  </mat-form-field>\n  <button mat-flat-button type=\"submit\" class=\"flex\"\n    [disabled]=\"busy() || !loaded() || !name.trim()\">\n    {{ t.gettext('Add feature') }}\n  </button>\n</form>\n", styles: [":host{display:block}ul{padding:0;list-style:none}li,form{display:flex;align-items:center;gap:.75rem;margin-block:.75rem}.feature-name{flex:1;min-width:0;overflow-wrap:anywhere}small{display:block;opacity:.7}\n"], dependencies: [{ 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])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonCmsWebsiteFeaturesComponent, decorators: [{
             type: Component,
@@ -7274,7 +8407,7 @@ const TaonCmsCommentsBackofficeRoutes = [
  */
 // export default TaonCmsCommentsBackofficeRoutes;
 
-const t$f = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.ts', { "src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.html": { "en-US": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.html.en-US.i18n.data-NG3-0ZeO.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.html.pl-PL.i18n.data-DncFM6D3.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.html.de-DE.i18n.data-s2dXTIUw.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.ts": { "en-US": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.ts.en-US.i18n.data-DAA5R9fI.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.ts.pl-PL.i18n.data-CyKmux96.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.ts.de-DE.i18n.data-DgAHAzJM.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post-thumbnail.component.ts": { "en-US": async () => (await import('./cms-websql-taon-cms-post-thumbnail.component.ts.en-US.i18n.data-BTv1ecMg.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post-thumbnail.component.ts.pl-PL.i18n.data-CNPdfcRa.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post-thumbnail.component.ts.de-DE.i18n.data-B5JcoASn.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.html": { "en-US": async () => (await import('./cms-websql-taon-cms-post.component.html.en-US.i18n.data-BTWsCDp3.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post.component.html.pl-PL.i18n.data-CZhAYAQh.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post.component.html.de-DE.i18n.data-C5Nxovtl.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.ts": { "en-US": async () => (await import('./cms-websql-taon-cms-post.component.ts.en-US.i18n.data-D1Fh0Nd6.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post.component.ts.pl-PL.i18n.data-C-sVs8_U.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post.component.ts.de-DE.i18n.data-D10xOAxh.mjs')).default } });
+const t$f = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.ts', { "src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.html": { "en-US": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.html.en-US.i18n.data-NG3-0ZeO.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.html.pl-PL.i18n.data-DncFM6D3.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.html.de-DE.i18n.data-s2dXTIUw.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.ts": { "en-US": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.ts.en-US.i18n.data-DAA5R9fI.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.ts.pl-PL.i18n.data-CyKmux96.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.ts.de-DE.i18n.data-DgAHAzJM.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post-thumbnail.component.ts": { "en-US": async () => (await import('./cms-websql-taon-cms-post-thumbnail.component.ts.en-US.i18n.data-BTv1ecMg.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post-thumbnail.component.ts.pl-PL.i18n.data-CNPdfcRa.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post-thumbnail.component.ts.de-DE.i18n.data-B5JcoASn.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.html": { "en-US": async () => (await import('./cms-websql-taon-cms-post.component.html.en-US.i18n.data-YiL6-4Aq.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post.component.html.pl-PL.i18n.data-BzEKPeB_.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post.component.html.de-DE.i18n.data-BdxSK5vd.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.ts": { "en-US": async () => (await import('./cms-websql-taon-cms-post.component.ts.en-US.i18n.data-B8Vs_fm6.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post.component.ts.pl-PL.i18n.data-BaPFft3W.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post.component.ts.de-DE.i18n.data-B_w2dmsP.mjs')).default } });
 class TaonCmsPostChoiceDialogComponent {
     constructor() {
         this.t = t$f.for(this);
@@ -7677,7 +8810,7 @@ class TaonCmsCourseBackofficeComponent extends TaonCmsPostTableActions {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonCmsCourseBackofficeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonCmsCourseBackofficeComponent, isStandalone: true, selector: "taon-cms-course-backoffice", providers: [TaonCmsContentApiService], viewQueries: [{ propertyName: "datatable", first: true, predicate: TaonDatatableComponent, descendants: true }, { propertyName: "coverTemplate", first: true, predicate: ["coverTemplate"], descendants: true, static: true }, { propertyName: "visibilityTemplate", first: true, predicate: ["visibilityTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<h1>{{ t.gettext('Courses') }}</h1>\n<h2 style=\"color: goldenrod;\">{{ t.gettext('A course is a post with related posts and a thumbnail. Any post that is not archived can be a course.') }}</h2>\n<button mat-button type=\"button\" [disabled]=\"loading()\" (click)=\"reload()\">\n  {{ t.gettext('Reload courses') }}\n</button>\n@if (loading()) {\n  <p role=\"status\">{{ t.gettext('Loading courses...') }}</p>\n}\n@if (error()) {\n  <p role=\"alert\">{{ error() }}</p>\n}\n<taon-datatable\n  [data]=\"courses()\"\n  [columns]=\"columns\"\n  [allowedColumns]=\"['id', 'title', 'status']\"\n  tableId=\"cms-courses\"\n  storeTableFilters=\"query-params\"\n  [filtersTemplate]=\"filtersTemplate\"\n  [hideAddButton]=\"true\"\n  searchMode=\"advanced\"\n  [expansionTemplate]=\"expansionTemplate\">\n</taon-datatable>\n<ng-template #coverTemplate let-post>\n  <taon-cms-course-cover [post]=\"post\"></taon-cms-course-cover>\n</ng-template>\n<ng-template #visibilityTemplate let-post>\n  <span class=\"visibility\">\n    <mat-icon aria-hidden=\"true\">\n      {{ post.status === 'published' ? 'lock_open' : 'lock' }}\n    </mat-icon>\n    {{ post.status === 'published' ? t.gettext('Public') : t.gettext('Private') }}\n  </span>\n</ng-template>\n<ng-template #expansionTemplate let-course>\n  <taon-cms-course-contents\n    [course]=\"course\"\n    [actionsColumn]=\"actionsColumn\"\n    (editPostRequested)=\"openDetails($event)\">\n  </taon-cms-course-contents>\n</ng-template>\n<ng-template\n  #filtersTemplate\n  let-filters=\"filters\">\n  <mat-form-field appearance=\"outline\">\n    <mat-label>{{ t.gettext('ID') }}</mat-label>\n    <input\n      matInput\n      [(ngModel)]=\"filters.id\"\n      (keyup.enter)=\"datatable.applyAdvancedFilters()\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"outline\">\n    <mat-label>{{ t.gettext('Title') }}</mat-label>\n    <input\n      matInput\n      [(ngModel)]=\"filters.title\"\n      (keyup.enter)=\"datatable.applyAdvancedFilters()\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"outline\">\n    <mat-label>{{ t.gettext('Visibility') }}</mat-label>\n    <mat-select [(ngModel)]=\"filters.status\">\n      <mat-option value=\"published\">{{ t.gettext('Public') }}</mat-option>\n      <mat-option value=\"draft\">{{ t.gettext('Private') }}</mat-option>\n    </mat-select>\n  </mat-form-field>\n</ng-template>\n", styles: [":host{display:block}.visibility{display:inline-flex;align-items:center;gap:.4rem}:host ::ng-deep td.cms-course-public{background-color:#2e7d3214}:host ::ng-deep td.cms-course-private{background-color:#c6282812}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: TaonDatatableComponent, selector: "taon-datatable", inputs: ["pageNumber", "pageSize", "pageSizeOptions", "allowedColumns", "expansionTemplate", "entityCrudController", "columns", "hideSearch", "hideAddButton", "safe", "searchMode", "filtersTemplate", "storeTablePagination", "storeTableFilters", "tableId", "callQueryMethod", "data", "showPaginator"], outputs: ["expansionChange", "addingItem"] }, { kind: "component", type: TaonCmsCourseContentsComponent, selector: "taon-cms-course-contents", inputs: ["course", "actionsColumn"], outputs: ["editPostRequested"] }, { kind: "component", type: TaonCmsCourseCoverComponent, selector: "taon-cms-course-cover", inputs: ["post"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: TaonCmsCourseBackofficeComponent, isStandalone: true, selector: "taon-cms-course-backoffice", providers: [TaonCmsContentApiService], viewQueries: [{ propertyName: "datatable", first: true, predicate: TaonDatatableComponent, descendants: true }, { propertyName: "coverTemplate", first: true, predicate: ["coverTemplate"], descendants: true, static: true }, { propertyName: "visibilityTemplate", first: true, predicate: ["visibilityTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<h1>{{ t.gettext('Courses') }}</h1>\n<h2 style=\"color: goldenrod;\">{{ t.gettext('A course is a post with related posts and a thumbnail. Any post that is not archived can be a course.') }}</h2>\n<button mat-button type=\"button\" [disabled]=\"loading()\" (click)=\"reload()\">\n  {{ t.gettext('Reload courses') }}\n</button>\n@if (loading()) {\n  <p role=\"status\">{{ t.gettext('Loading courses...') }}</p>\n}\n@if (error()) {\n  <p role=\"alert\">{{ error() }}</p>\n}\n<taon-datatable\n  [data]=\"courses()\"\n  [columns]=\"columns\"\n  [allowedColumns]=\"['id', 'title', 'status']\"\n  tableId=\"cms-courses\"\n  storeTableFilters=\"query-params\"\n  [filtersTemplate]=\"filtersTemplate\"\n  [hideAddButton]=\"true\"\n  searchMode=\"advanced\"\n  [expansionTemplate]=\"expansionTemplate\">\n</taon-datatable>\n<ng-template #coverTemplate let-post>\n  <taon-cms-course-cover [post]=\"post\"></taon-cms-course-cover>\n</ng-template>\n<ng-template #visibilityTemplate let-post>\n  <span class=\"visibility\">\n    <mat-icon aria-hidden=\"true\">\n      {{ post.status === 'published' ? 'lock_open' : 'lock' }}\n    </mat-icon>\n    {{ post.status === 'published' ? t.gettext('Public') : t.gettext('Private') }}\n  </span>\n</ng-template>\n<ng-template #expansionTemplate let-course>\n  <taon-cms-course-contents\n    [course]=\"course\"\n    [actionsColumn]=\"actionsColumn\"\n    (editPostRequested)=\"openDetails($event)\">\n  </taon-cms-course-contents>\n</ng-template>\n<ng-template\n  #filtersTemplate\n  let-filters=\"filters\">\n  <mat-form-field appearance=\"outline\">\n    <mat-label>{{ t.gettext('ID') }}</mat-label>\n    <input\n      matInput\n      [(ngModel)]=\"filters.id\"\n      (keyup.enter)=\"datatable.applyAdvancedFilters()\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"outline\">\n    <mat-label>{{ t.gettext('Title') }}</mat-label>\n    <input\n      matInput\n      [(ngModel)]=\"filters.title\"\n      (keyup.enter)=\"datatable.applyAdvancedFilters()\" />\n  </mat-form-field>\n  <mat-form-field appearance=\"outline\">\n    <mat-label>{{ t.gettext('Visibility') }}</mat-label>\n    <mat-select [(ngModel)]=\"filters.status\">\n      <mat-option value=\"published\">{{ t.gettext('Public') }}</mat-option>\n      <mat-option value=\"draft\">{{ t.gettext('Private') }}</mat-option>\n    </mat-select>\n  </mat-form-field>\n</ng-template>\n", styles: [":host{display:block}.visibility{display:inline-flex;align-items:center;gap:.4rem}:host ::ng-deep td.cms-course-public{background-color:#2e7d3214}:host ::ng-deep td.cms-course-private{background-color:#c6282812}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: TaonDatatableComponent, selector: "taon-datatable", inputs: ["pageNumber", "pageSize", "pageSizeOptions", "allowedColumns", "expansionTemplate", "entityCrudController", "columns", "hideSearch", "hideAddButton", "safe", "searchMode", "filtersTemplate", "storeTablePagination", "storeTableFilters", "tableId", "callQueryMethod", "data", "showPaginator"], outputs: ["expansionChange", "addingItem"] }, { kind: "component", type: TaonCmsCourseContentsComponent, selector: "taon-cms-course-contents", inputs: ["course", "actionsColumn"], outputs: ["editPostRequested"] }, { kind: "component", type: TaonCmsCourseCoverComponent, selector: "taon-cms-course-cover", inputs: ["post"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonCmsCourseBackofficeComponent, decorators: [{
             type: Component,
@@ -8331,7 +9464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 args: ['paste', ['$event']]
             }] } });
 
-const t$a = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post-thumbnail.component.ts', { "src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.html": { "en-US": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.html.en-US.i18n.data-NG3-0ZeO.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.html.pl-PL.i18n.data-DncFM6D3.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.html.de-DE.i18n.data-s2dXTIUw.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.ts": { "en-US": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.ts.en-US.i18n.data-DAA5R9fI.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.ts.pl-PL.i18n.data-CyKmux96.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.ts.de-DE.i18n.data-DgAHAzJM.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post-thumbnail.component.ts": { "en-US": async () => (await import('./cms-websql-taon-cms-post-thumbnail.component.ts.en-US.i18n.data-BTv1ecMg.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post-thumbnail.component.ts.pl-PL.i18n.data-CNPdfcRa.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post-thumbnail.component.ts.de-DE.i18n.data-B5JcoASn.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.html": { "en-US": async () => (await import('./cms-websql-taon-cms-post.component.html.en-US.i18n.data-BTWsCDp3.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post.component.html.pl-PL.i18n.data-CZhAYAQh.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post.component.html.de-DE.i18n.data-C5Nxovtl.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.ts": { "en-US": async () => (await import('./cms-websql-taon-cms-post.component.ts.en-US.i18n.data-D1Fh0Nd6.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post.component.ts.pl-PL.i18n.data-C-sVs8_U.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post.component.ts.de-DE.i18n.data-D10xOAxh.mjs')).default } });
+const t$a = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post-thumbnail.component.ts', { "src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.html": { "en-US": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.html.en-US.i18n.data-NG3-0ZeO.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.html.pl-PL.i18n.data-DncFM6D3.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.html.de-DE.i18n.data-s2dXTIUw.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.ts": { "en-US": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.ts.en-US.i18n.data-DAA5R9fI.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.ts.pl-PL.i18n.data-CyKmux96.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.ts.de-DE.i18n.data-DgAHAzJM.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post-thumbnail.component.ts": { "en-US": async () => (await import('./cms-websql-taon-cms-post-thumbnail.component.ts.en-US.i18n.data-BTv1ecMg.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post-thumbnail.component.ts.pl-PL.i18n.data-CNPdfcRa.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post-thumbnail.component.ts.de-DE.i18n.data-B5JcoASn.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.html": { "en-US": async () => (await import('./cms-websql-taon-cms-post.component.html.en-US.i18n.data-YiL6-4Aq.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post.component.html.pl-PL.i18n.data-BzEKPeB_.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post.component.html.de-DE.i18n.data-BdxSK5vd.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.ts": { "en-US": async () => (await import('./cms-websql-taon-cms-post.component.ts.en-US.i18n.data-B8Vs_fm6.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post.component.ts.pl-PL.i18n.data-BaPFft3W.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post.component.ts.de-DE.i18n.data-B_w2dmsP.mjs')).default } });
 class TaonCmsPostThumbnailComponent {
     constructor() {
         this.t = t$a.for(this);
@@ -8537,8 +9670,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 //#region imports
 //#endregion
-const t$7 = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post.component.ts', { "src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.html": { "en-US": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.html.en-US.i18n.data-NG3-0ZeO.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.html.pl-PL.i18n.data-DncFM6D3.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.html.de-DE.i18n.data-s2dXTIUw.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.ts": { "en-US": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.ts.en-US.i18n.data-DAA5R9fI.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.ts.pl-PL.i18n.data-CyKmux96.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.ts.de-DE.i18n.data-DgAHAzJM.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post-thumbnail.component.ts": { "en-US": async () => (await import('./cms-websql-taon-cms-post-thumbnail.component.ts.en-US.i18n.data-BTv1ecMg.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post-thumbnail.component.ts.pl-PL.i18n.data-CNPdfcRa.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post-thumbnail.component.ts.de-DE.i18n.data-B5JcoASn.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.html": { "en-US": async () => (await import('./cms-websql-taon-cms-post.component.html.en-US.i18n.data-BTWsCDp3.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post.component.html.pl-PL.i18n.data-CZhAYAQh.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post.component.html.de-DE.i18n.data-C5Nxovtl.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.ts": { "en-US": async () => (await import('./cms-websql-taon-cms-post.component.ts.en-US.i18n.data-D1Fh0Nd6.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post.component.ts.pl-PL.i18n.data-C-sVs8_U.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post.component.ts.de-DE.i18n.data-D10xOAxh.mjs')).default } });
+const t$7 = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post.component.ts', { "src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.html": { "en-US": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.html.en-US.i18n.data-NG3-0ZeO.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.html.pl-PL.i18n.data-DncFM6D3.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.html.de-DE.i18n.data-s2dXTIUw.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.ts": { "en-US": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.ts.en-US.i18n.data-DAA5R9fI.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.ts.pl-PL.i18n.data-CyKmux96.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post-choice-dialog.component.ts.de-DE.i18n.data-DgAHAzJM.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post-thumbnail.component.ts": { "en-US": async () => (await import('./cms-websql-taon-cms-post-thumbnail.component.ts.en-US.i18n.data-BTv1ecMg.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post-thumbnail.component.ts.pl-PL.i18n.data-CNPdfcRa.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post-thumbnail.component.ts.de-DE.i18n.data-B5JcoASn.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.html": { "en-US": async () => (await import('./cms-websql-taon-cms-post.component.html.en-US.i18n.data-YiL6-4Aq.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post.component.html.pl-PL.i18n.data-BzEKPeB_.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post.component.html.de-DE.i18n.data-BdxSK5vd.mjs')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.ts": { "en-US": async () => (await import('./cms-websql-taon-cms-post.component.ts.en-US.i18n.data-B8Vs_fm6.mjs')).default, "pl-PL": async () => (await import('./cms-websql-taon-cms-post.component.ts.pl-PL.i18n.data-BaPFft3W.mjs')).default, "de-DE": async () => (await import('./cms-websql-taon-cms-post.component.ts.de-DE.i18n.data-B_w2dmsP.mjs')).default } });
 class TaonCmsPostComponent {
+    get requiredSlugs() {
+        return this.contentConfig.requiredSlugs;
+    }
     insertTable(event) {
         event.preventDefault();
         const editor = this.contentEditor();
@@ -8559,6 +9695,7 @@ class TaonCmsPostComponent {
     constructor() {
         //#region fields and getters
         this.t = t$7.for(this);
+        this.contentType = TaonCmsContentType;
         this.post = input(null, ...(ngDevMode ? [{ debugName: "post" }] : []));
         this.mode = model('view', ...(ngDevMode ? [{ debugName: "mode" }] : []));
         this.changed = output();
@@ -8585,6 +9722,12 @@ class TaonCmsPostComponent {
             categoryId: null,
             tagIds: [],
         }, ...(ngDevMode ? [{ debugName: "draft" }] : []));
+        this.jsonTableData = signal({
+            version: 1,
+            columns: [],
+            rows: [],
+        }, ...(ngDevMode ? [{ debugName: "jsonTableData" }] : []));
+        this.jsonTableValidationError = signal('', ...(ngDevMode ? [{ debugName: "jsonTableValidationError" }] : []));
         this.postTypes = [
             {
                 value: TaonCmsContentType.Normal,
@@ -8596,6 +9739,10 @@ class TaonCmsPostComponent {
                 value: TaonCmsContentType.Attachment,
                 label: this.t.gettext('Attachment post'),
             },
+            {
+                value: TaonCmsContentType.JsonTable,
+                label: this.t.gettext('JSON Table post'),
+            },
         ];
         this.currentPostType = computed(() => this.postTypes.find(type => type.value === this.draft().type) ??
             this.postTypes[0], ...(ngDevMode ? [{ debugName: "currentPostType" }] : []));
@@ -8607,6 +9754,8 @@ class TaonCmsPostComponent {
                     return 'audiotrack';
                 case TaonCmsContentType.Attachment:
                     return 'attach_file';
+                case TaonCmsContentType.JsonTable:
+                    return 'table_chart';
                 default:
                     return 'article';
             }
@@ -8667,6 +9816,9 @@ class TaonCmsPostComponent {
         this.stagedThumbnail = signal(null, ...(ngDevMode ? [{ debugName: "stagedThumbnail" }] : []));
         this.uploading = signal(false, ...(ngDevMode ? [{ debugName: "uploading" }] : []));
         this.uploadProgress = signal(0, ...(ngDevMode ? [{ debugName: "uploadProgress" }] : []));
+        this.mediaUploadAbort = null;
+        this.childUploadAbort = null;
+        this.childUploadRunning = signal(false, ...(ngDevMode ? [{ debugName: "childUploadRunning" }] : []));
         this.mediaPreviewUrl = signal('', ...(ngDevMode ? [{ debugName: "mediaPreviewUrl" }] : []));
         this.mediaPreviewLoading = signal(false, ...(ngDevMode ? [{ debugName: "mediaPreviewLoading" }] : []));
         this.mediaPreviewError = signal('', ...(ngDevMode ? [{ debugName: "mediaPreviewError" }] : []));
@@ -8779,7 +9931,9 @@ class TaonCmsPostComponent {
             !this.permissionsLoading() &&
             !this.permissionsError() &&
             !this.taxonomyLoading() &&
-            !this.taxonomyError(), ...(ngDevMode ? [{ debugName: "canSave" }] : []));
+            !this.taxonomyError() &&
+            (this.draft().type !== TaonCmsContentType.JsonTable ||
+                !this.jsonTableValidationError()), ...(ngDevMode ? [{ debugName: "canSave" }] : []));
         this.statusLabel = computed(() => {
             const status = this.mode() === 'add'
                 ? this.draftStatus()
@@ -8801,6 +9955,10 @@ class TaonCmsPostComponent {
             (this.mode() === 'edit' && !this.canSave()), ...(ngDevMode ? [{ debugName: "statusControlDisabled" }] : []));
         this.api = inject(TaonCmsContentApiService);
         this.contentConfig = inject(TaonCmsContentConfigService);
+        this.selectedRequiredSlug = computed(() => {
+            const slug = this.draft().slug;
+            return this.requiredSlugs.includes(slug) ? slug : null;
+        }, ...(ngDevMode ? [{ debugName: "selectedRequiredSlug" }] : []));
         this.contentTab = signal(0, ...(ngDevMode ? [{ debugName: "contentTab" }] : []));
         this.contentEditor = signal(null, ...(ngDevMode ? [{ debugName: "contentEditor" }] : []));
         this.rawContent = viewChild('rawContent', ...(ngDevMode ? [{ debugName: "rawContent" }] : []));
@@ -9011,7 +10169,10 @@ class TaonCmsPostComponent {
         });
     }
     //#endregion
-    ngOnDestroy() { }
+    ngOnDestroy() {
+        this.mediaUploadAbort?.abort();
+        this.childUploadAbort?.abort();
+    }
     //#region methods / load related posts
     loadTaxonomy(preserveSelectedTags = false) {
         this.taxonomyLoad?.unsubscribe();
@@ -9131,6 +10292,10 @@ class TaonCmsPostComponent {
             this.error.set(this.t.gettext('Please select an image for the thumbnail.'));
             return;
         }
+        if (file.size > TAON_CMS_MAX_UPLOAD_BYTES) {
+            this.error.set(this.fileTooLargeMessage(file));
+            return;
+        }
         this.busy.set(true);
         this.error.set('');
         try {
@@ -9714,6 +10879,33 @@ class TaonCmsPostComponent {
     //#endregion
     //#region methods / update draft
     updateDraft(field, value) {
+        if (field === 'type' &&
+            value === TaonCmsContentType.JsonTable &&
+            this.draft().type !== TaonCmsContentType.JsonTable) {
+            let tableData = {
+                version: 1,
+                columns: [],
+                rows: [],
+            };
+            if (this.draft().body.trim()) {
+                try {
+                    tableData = parseSpreadsheetDocument(this.draft().body);
+                }
+                catch {
+                    if (!globalThis.confirm('Changing the post to a JSON Table will replace its current body. Continue?')) {
+                        return;
+                    }
+                }
+            }
+            this.jsonTableData.set(tableData);
+            this.jsonTableValidationError.set('');
+            this.draft.update(draft => ({
+                ...draft,
+                type: value,
+                body: JSON.stringify(tableData),
+            }));
+            return;
+        }
         if (field === 'title' && this.mode() === 'add') {
             const title = String(value);
             this.draft.update(draft => ({
@@ -9747,10 +10939,13 @@ class TaonCmsPostComponent {
         if (!this.currentPost() || this.busy() || !files.length) {
             return;
         }
-        this.childBatchError.set('');
+        const oversized = files.filter(file => file.size > TAON_CMS_MAX_UPLOAD_BYTES);
+        this.childBatchError.set(oversized.map(file => this.fileTooLargeMessage(file)).join(' '));
         this.childFiles.update(selected => [
             ...selected,
-            ...files.map(file => ({
+            ...files
+                .filter(file => file.size <= TAON_CMS_MAX_UPLOAD_BYTES)
+                .map(file => ({
                 id: ++this.childFileSequence,
                 file,
                 status: 'pending',
@@ -9781,10 +10976,16 @@ class TaonCmsPostComponent {
         const pendingFiles = this.childFiles()
             .map((file, index) => ({ file, index }))
             .filter(({ file }) => file.status !== 'success');
+        const abort = new AbortController();
+        this.childUploadAbort = abort;
+        this.childUploadRunning.set(true);
         this.busy.set(true);
         this.childBatchError.set('');
         try {
             for (const { file: selectedFile, index } of pendingFiles) {
+                if (abort.signal.aborted) {
+                    break;
+                }
                 const expectedTitle = this.childTitlePreviews()[index];
                 this.updateRelatedChildFile(selectedFile.id, {
                     status: 'processing',
@@ -9800,22 +11001,24 @@ class TaonCmsPostComponent {
                     }
                     let uploads = this.childFiles().find(file => file.id === selectedFile.id)?.uploads;
                     if (!uploads?.source) {
+                        abort.signal.throwIfAborted();
                         const source = await this.api.uploadMedia(selectedFile.file, percentage => this.updateRelatedChildFile(selectedFile.id, {
                             progress: type === TaonCmsContentType.Video
                                 ? Math.round(percentage * 0.65)
                                 : Math.round(percentage * 0.8),
-                        }));
+                        }), abort.signal);
                         uploads = { ...uploads, source };
                         this.updateRelatedChildFile(selectedFile.id, { uploads });
                     }
                     if (type === TaonCmsContentType.Video && !uploads.thumbnail) {
                         const thumbnailBlob = await generateVideoThumbnail(selectedFile.file);
                         const extension = thumbnailBlob.type === 'image/webp' ? 'webp' : 'png';
+                        abort.signal.throwIfAborted();
                         const thumbnail = await this.api.uploadMedia(new File([thumbnailBlob], `thumbnail.${extension}`, {
                             type: thumbnailBlob.type,
                         }), percentage => this.updateRelatedChildFile(selectedFile.id, {
                             progress: 65 + Math.round(percentage * 0.25),
-                        }));
+                        }), abort.signal);
                         uploads = { ...uploads, thumbnail };
                         this.updateRelatedChildFile(selectedFile.id, { uploads });
                     }
@@ -9832,6 +11035,8 @@ class TaonCmsPostComponent {
                     if (!sourceUpload) {
                         throw new Error('The uploaded source file is unavailable.');
                     }
+                    // Cancellation is honoured only before the child post is created.
+                    abort.signal.throwIfAborted();
                     const result = await this.api.createRelatedChild(parent.id, {
                         titlePrefix,
                         expectedTitle,
@@ -9885,7 +11090,10 @@ class TaonCmsPostComponent {
                             ? await this.cleanupRelatedChildUploads(selectedFile.id, uploads)
                             : []
                         : [];
-                    const reason = error instanceof Error ? error.message : String(error);
+                    const reason = abort.signal.aborted
+                        ? this.t.gettext('Upload cancelled. No child post was created.')
+                        : error?.body?.json?.message ||
+                            (error instanceof Error ? error.message : String(error));
                     const verificationError = relatedPosts
                         ? ''
                         : `${this.t.gettext('The creation result could not be verified; retrying will not duplicate an existing child.')} `;
@@ -9899,6 +11107,10 @@ class TaonCmsPostComponent {
             }
         }
         finally {
+            if (this.childUploadAbort === abort) {
+                this.childUploadAbort = null;
+            }
+            this.childUploadRunning.set(false);
             this.busy.set(false);
             this.loadRelatedPosts();
         }
@@ -10036,7 +11248,14 @@ class TaonCmsPostComponent {
             input.value = '';
             return;
         }
+        if (file.size > TAON_CMS_MAX_UPLOAD_BYTES) {
+            input.value = '';
+            this.error.set(this.fileTooLargeMessage(file));
+            return;
+        }
         const session = this.editorSession;
+        const abort = new AbortController();
+        this.mediaUploadAbort = abort;
         this.busy.set(true);
         this.uploading.set(true);
         this.uploadProgress.set(0);
@@ -10046,7 +11265,7 @@ class TaonCmsPostComponent {
                 if (!this.destroyRef.destroyed) {
                     this.uploadProgress.set(percentage);
                 }
-            });
+            }, abort.signal);
             if (!this.destroyRef.destroyed && this.editorSession === session) {
                 const fileName = object.fileName || file.name;
                 this.mediaFileNames.update(names => ({
@@ -10075,10 +11294,20 @@ class TaonCmsPostComponent {
             }
         }
         catch (error) {
-            console.error('[taon-cms-post] Unable to upload media', error);
-            this.error.set(this.t.gettext('The media could not be uploaded. Please try again.'));
+            if (abort.signal.aborted) {
+                if (!this.destroyRef.destroyed) {
+                    this.error.set(this.t.gettext('The media upload was cancelled.'));
+                }
+            }
+            else {
+                console.error('[taon-cms-post] Unable to upload media', error);
+                this.error.set(`${this.t.gettext('The media could not be uploaded. Please try again.')}${this.uploadErrorDetails(error)}`);
+            }
         }
         finally {
+            if (this.mediaUploadAbort === abort) {
+                this.mediaUploadAbort = null;
+            }
             this.busy.set(false);
             this.uploading.set(false);
             this.uploadProgress.set(0);
@@ -10086,6 +11315,26 @@ class TaonCmsPostComponent {
         }
     }
     //#endregion
+    //#region methods / cancel media upload
+    cancelMediaUpload() {
+        this.mediaUploadAbort?.abort();
+    }
+    //#endregion
+    //#region methods / cancel related child uploads
+    cancelRelatedChildUploads() {
+        this.childUploadAbort?.abort();
+    }
+    //#endregion
+    //#region methods / upload error helpers
+    fileTooLargeMessage(file) {
+        return this.t.gettext('The file "[[ fileName ]]" is too large. The maximum upload size is 1 GB.', { fileName: file.name });
+    }
+    uploadErrorDetails(error) {
+        const message = error?.body?.json?.message ||
+            (error instanceof Error ? error.message : '');
+        return message ? ` (${message})` : '';
+    }
+    //#endregion
     //#region methods / remove media
     removeMedia() {
         const media = this.mediaAttachment();
@@ -10159,6 +11408,11 @@ class TaonCmsPostComponent {
             this.updateDraft('slug', event.target.value);
         }
     }
+    selectRequiredSlug(slug) {
+        if (slug && this.requiredSlugs.includes(slug)) {
+            this.updateDraft('slug', slug);
+        }
+    }
     //#endregion
     //#region methods / edit
     edit() {
@@ -10549,6 +11803,13 @@ class TaonCmsPostComponent {
             categoryId: post?.categoryId ?? null,
             tagIds: [],
         });
+        if ((post?.type ?? TaonCmsContentType.Normal) === TaonCmsContentType.JsonTable) {
+            this.loadJsonTableData(post?.body ?? null);
+        }
+        else {
+            this.jsonTableData.set({ version: 1, columns: [], rows: [] });
+            this.jsonTableValidationError.set('');
+        }
         if (post &&
             post.relatedPosts === undefined &&
             this.mode() !== 'view-clean') {
@@ -10562,6 +11823,34 @@ class TaonCmsPostComponent {
         }
     }
     //#endregion
+    setJsonTableData(value) {
+        try {
+            const data = validateSpreadsheetData(value);
+            this.jsonTableData.set(data);
+            this.draft.update(draft => ({
+                ...draft,
+                body: JSON.stringify(data),
+            }));
+        }
+        catch (error) {
+            this.jsonTableValidationError.set(error instanceof Error ? error.message : 'JSON Table data is invalid.');
+        }
+    }
+    loadJsonTableData(body) {
+        try {
+            const data = parseSpreadsheetDocument(body);
+            this.jsonTableData.set(data);
+            this.draft.update(draft => ({
+                ...draft,
+                body: JSON.stringify(data),
+            }));
+            this.jsonTableValidationError.set('');
+        }
+        catch (error) {
+            this.jsonTableData.set({ version: 1, columns: [], rows: [] });
+            this.jsonTableValidationError.set(error instanceof Error ? error.message : 'JSON Table data is invalid.');
+        }
+    }
     //#region methods / set application hook selection
     setApplicationHookSelection(post, hooks) {
         const assignedHook = post?.applicationHook !== undefined
@@ -10609,7 +11898,7 @@ class TaonCmsPostComponent {
             TaonPermissionApiService,
             TaonCmsCategoryApiService,
             TaonCmsTagApiService,
-        ], viewQueries: [{ propertyName: "rawContent", first: true, predicate: ["rawContent"], descendants: true, isSignal: true }, { propertyName: "actionButtonsTemplateRef", first: true, predicate: ["actionButtonsTemplate"], descendants: true }], ngImport: i0, template: "@if (mode() !== 'view-clean') {\n  <ng-template #actionButtonsTemplate>\n    <div class=\"buttons\">\n      @if (editing()) {\n        <button\n          mat-flat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen() || !canSave()\"\n          (click)=\"save()\">\n          {{ mode() === 'add' ? t.gettext('Add') : t.gettext('Save') }}\n        </button>\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen()\"\n          (click)=\"cancel()\">\n          {{ t.gettext('Cancel') }}\n        </button>\n      } @else if (currentPost()) {\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen()\"\n          (click)=\"edit()\">\n          <mat-icon>edit</mat-icon> {{ t.gettext('Edit') }}\n        </button>\n      }\n      @if (mode() !== 'add' && currentPost()) {\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen()\"\n          (click)=\"revert()\">\n          <mat-icon>history</mat-icon> {{ t.gettext('Revert') }}\n        </button>\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen()\"\n          (click)=\"delete()\">\n          <mat-icon>delete</mat-icon> {{ t.gettext('Delete') }}\n        </button>\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen()\"\n          (click)=\"duplicate()\">\n          <mat-icon>content_copy</mat-icon> {{ t.gettext('Duplicate') }}\n        </button>\n      }\n    </div>\n  </ng-template>\n  <header class=\"post-actions\">\n    @if (visibilitySource(); as source) {\n      <span\n        class=\"post-status\"\n        tabindex=\"0\"\n        [matTooltip]=\"visibilityInheritedTooltip()\"\n        [attr.aria-label]=\"visibilityInheritedTooltip()\">\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"true\">\n          {{ statusLabel() }}\n        </button>\n      </span>\n    } @else {\n      <button\n        class=\"post-status\"\n        mat-button\n        type=\"button\"\n        [disabled]=\"statusControlDisabled()\"\n        (click)=\"selectStatus()\">\n        {{ statusLabel() }}\n      </button>\n    }\n    <ng-container [ngTemplateOutlet]=\"actionButtonsTemplate\" />\n    @if (busy()) {\n      <span role=\"status\">{{\n        uploading()\n          ? t.gettext('Uploading... ') + uploadProgress() + '%'\n          : t.gettext('Saving...')\n      }}</span>\n    }\n  </header>\n  @if (error()) {\n    <p\n      class=\"error\"\n      role=\"alert\">\n      {{ error() }}\n    </p>\n  }\n}\n\n<article\n  class=\"post-article\"\n  [attr.aria-busy]=\"busy()\">\n  @if (editing()) {\n    <mat-tab-group animationDuration=\"0ms\">\n      <mat-tab [label]=\"t.gettext('CONTENT')\">\n        <mat-accordion class=\"post-type-accordion\">\n          <mat-expansion-panel #postTypePanel>\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <mat-icon>{{ currentPostTypeIcon() }}</mat-icon>\n                {{\n                  t.gettext('Current post type: [[ postType ]]', {\n                    postType: currentPostType().label,\n                  })\n                }}\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            <mat-radio-group\n              class=\"post-type-selector\"\n              [attr.aria-label]=\"t.gettext('Post type')\"\n              [value]=\"draft().type\"\n              [disabled]=\"busy() || dialogOpen()\"\n              (change)=\"updateDraft('type', $event.value)\">\n              @for (type of postTypes; track type.value) {\n                <mat-radio-button\n                  [value]=\"type.value\"\n                  (click)=\"postTypePanel.close()\"\n                  >{{ type.label }}</mat-radio-button\n                >\n              }\n            </mat-radio-group>\n          </mat-expansion-panel>\n        </mat-accordion>\n        <div\n          class=\"post-title editable\"\n          contenteditable=\"true\"\n          role=\"textbox\"\n          [attr.aria-label]=\"t.gettext('Post title')\"\n          aria-required=\"true\"\n          [attr.data-placeholder]=\"placeholderTitle()\"\n          [attr.contenteditable]=\"!busy() && !dialogOpen()\"\n          [taonCmsEditableSingleLine]=\"true\"\n          [taonCmsEditable]=\"draft().title\"\n          (taonCmsEditableChange)=\"updateDraft('title', $event)\"></div>\n        @if (subtitleEmpty()) {\n          <button\n            mat-button\n            type=\"button\"\n            [disabled]=\"busy() || dialogOpen()\"\n            (click)=\"generateLoremIpsum('excerpt')\">\n            {{ t.gettext('Generate Lorem Ipsum') }}\n          </button>\n        }\n        <div\n          class=\"post-excerpt editable\"\n          contenteditable=\"true\"\n          role=\"textbox\"\n          [attr.aria-label]=\"t.gettext('Post excerpt')\"\n          aria-multiline=\"true\"\n          [attr.data-placeholder]=\"placeholderShortIntro()\"\n          [attr.contenteditable]=\"!busy() && !dialogOpen()\"\n          [taonCmsEditable]=\"draft().excerpt\"\n          (taonCmsEditableChange)=\"updateDraft('excerpt', $event)\"></div>\n        @if (descriptionEmpty()) {\n          <button\n            mat-button\n            type=\"button\"\n            [disabled]=\"busy() || dialogOpen()\"\n            (click)=\"generateLoremIpsum('body')\">\n            {{ t.gettext('Generate Lorem Ipsum') }}\n          </button>\n        }\n        <section class=\"post-content-editor\">\n          <mat-tab-group\n            [selectedIndex]=\"contentTab()\"\n            (selectedIndexChange)=\"setContentTab($event)\"\n            [preserveContent]=\"true\"\n            animationDuration=\"0ms\">\n            <mat-tab [label]=\"t.gettext('Editor')\">\n              @if (contentEditor(); as editor) {\n                <ng-template #customMenu>\n                  <button\n                    type=\"button\"\n                    class=\"NgxEditor__MenuItem\"\n                    title=\"Table\"\n                    aria-label=\"Table actions\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    [matMenuTriggerFor]=\"tableMenu\"\n                    [matMenuTriggerRestoreFocus]=\"false\"\n                    (mousedown)=\"$event.preventDefault()\">\n                    <mat-icon>table_chart</mat-icon>\n                  </button>\n\n                  <mat-menu #tableMenu=\"matMenu\">\n                    <button\n                      mat-menu-item\n                      type=\"button\"\n                      (click)=\"insertTable($event)\">\n                      <mat-icon>add</mat-icon>\n                      <span>Insert table</span>\n                    </button>\n\n                    <mat-divider />\n\n                    @for (item of tableCommands; track item.label) {\n                      <button\n                        mat-menu-item\n                        type=\"button\"\n                        [disabled]=\"!canRunTableCommand(item.command)\"\n                        (click)=\"runTableCommand($event, item.command)\">\n                        {{ item.label }}\n                      </button>\n                    }\n                  </mat-menu>\n                </ng-template>\n\n                <ngx-editor-menu\n                  [editor]=\"editor\"\n                  [customMenuRef]=\"customMenu\"\n                  [toolbar]=\"contentToolbar\"\n                  [disabled]=\"busy() || dialogOpen()\" />\n                <ngx-editor\n                  [editor]=\"editor\"\n                  [placeholder]=\"placeholderTellYourStory()\" />\n              }\n            </mat-tab>\n            <mat-tab [label]=\"t.gettext('Raw')\">\n              <textarea\n                #rawContent\n                class=\"raw-content\"\n                [attr.aria-label]=\"t.gettext('Post body HTML')\"\n                [value]=\"draft().body\"\n                [disabled]=\"busy() || dialogOpen()\"\n                (input)=\"updateRawContent($event)\"\n                spellcheck=\"false\"></textarea>\n            </mat-tab>\n            <mat-tab [label]=\"t.gettext('Preview')\">\n              <div\n                class=\"post-body content-preview\"\n                [innerHTML]=\"resolvedBody()\"></div>\n            </mat-tab>\n          </mat-tab-group>\n          @if (contentTab() !== 2) {\n            <button\n              mat-button\n              type=\"button\"\n              [disabled]=\"busy() || dialogOpen() || !contentEditor()\"\n              [matMenuTriggerFor]=\"variableMenu\"\n              [matMenuTriggerRestoreFocus]=\"false\">\n              {{ t.gettext('Insert variable') }}\n            </button>\n          }\n          <mat-menu #variableMenu=\"matMenu\">\n            <button\n              mat-menu-item\n              [matMenuTriggerFor]=\"siteVariableMenu\">\n              {{ t.gettext('Site') }}\n            </button>\n            <button\n              mat-menu-item\n              [matMenuTriggerFor]=\"postVariableMenu\">\n              {{ t.gettext('Post') }}\n            </button>\n          </mat-menu>\n          <mat-menu #siteVariableMenu=\"matMenu\">\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('frontendUrl')\">\n              {{ t.gettext('Frontend URL') }}\n            </button>\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('site.name')\">\n              {{ t.gettext('Site name') }}\n            </button>\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('currentYear')\">\n              {{ t.gettext('Current year') }}\n            </button>\n          </mat-menu>\n          <mat-menu #postVariableMenu=\"matMenu\">\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('post.title')\">\n              {{ t.gettext('Post title') }}\n            </button>\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('post.url')\">\n              {{ t.gettext('Post URL') }}\n            </button>\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('post.id')\">\n              {{ t.gettext('Post ID') }}\n            </button>\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('post.thumbnailUrl')\">\n              {{ t.gettext('Post Thumbnail URL') }}\n            </button>\n          </mat-menu>\n        </section>\n        <label class=\"slug-field\">\n          <span>{{ t.gettext('URL slug') }}</span>\n          <input\n            [attr.aria-label]=\"t.gettext('URL slug')\"\n            [value]=\"draft().slug\"\n            [disabled]=\"busy() || dialogOpen()\"\n            (input)=\"updateSlug($event)\"\n            [placeholder]=\"t.gettext('my-post')\" />\n        </label>\n      </mat-tab>\n      <mat-tab [label]=\"t.gettext('SETTINGS')\">\n        <div class=\"post-settings\">\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"related-child-files\"\n              aria-labelledby=\"related-child-files-heading\">\n              <h2 id=\"related-child-files-heading\">\n                {{ t.gettext('Create related children from files') }}\n              </h2>\n              @if (!currentPost()) {\n                <p role=\"note\">\n                  {{\n                    t.gettext(\n                      'Please save the post before creating children.'\n                    )\n                  }}\n                </p>\n              }\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ t.gettext('Child title prefix') }}</mat-label>\n                <input\n                  matInput\n                  [value]=\"childTitlePrefix()\"\n                  [disabled]=\"!currentPost() || busy() || dialogOpen()\"\n                  (input)=\"updateChildTitlePrefix($event)\" />\n              </mat-form-field>\n              <input\n                #relatedChildFilesInput\n                hidden\n                type=\"file\"\n                multiple\n                [disabled]=\"!currentPost() || busy() || dialogOpen()\"\n                (change)=\"relatedChildFilesSelected($event)\" />\n              <button\n                mat-button\n                type=\"button\"\n                [disabled]=\"!currentPost() || busy() || dialogOpen()\"\n                (click)=\"relatedChildFilesInput.click()\">\n                <mat-icon>add</mat-icon>\n                {{ t.gettext('Choose files') }}\n              </button>\n              @if (childBatchError()) {\n                <p\n                  class=\"error\"\n                  role=\"alert\">\n                  {{ childBatchError() }}\n                </p>\n              }\n              @if (childFiles().length) {\n                <div class=\"related-child-progress\">\n                  <mat-progress-bar\n                    mode=\"determinate\"\n                    [value]=\"childOverallProgress()\"\n                    [attr.aria-label]=\"\n                      t.gettext('Overall child creation progress')\n                    \" />\n                  <span>\n                    {{ childOverallProgress() }}%\n                    {{ t.gettext('overall progress') }}\n                  </span>\n                </div>\n                <ul>\n                  @for (file of childFiles(); track file.id; let index =\n                  $index) {\n                    <li>\n                      <div class=\"related-child-file\">\n                        <div class=\"related-child-file-heading\">\n                          <span>{{ file.file.name }}</span>\n                          <span>{{ childTitlePreviews()[index] }}</span>\n                        </div>\n                        <div class=\"related-child-file-progress\">\n                          <mat-progress-bar\n                            mode=\"determinate\"\n                            [value]=\"file.progress\"\n                            [attr.aria-label]=\"\n                              t.gettext('Progress for [[ fileName ]]', {\n                                fileName: file.file.name,\n                              })\n                            \" />\n                          <span>{{ file.progress }}%</span>\n                        </div>\n                        @if (file.status === 'processing') {\n                          <p role=\"status\">{{ t.gettext('Processing...') }}</p>\n                        } @else if (file.status === 'success') {\n                          <p role=\"status\">{{ t.gettext('Child created.') }}</p>\n                          @if (file.error) {\n                            <p\n                              class=\"error\"\n                              role=\"alert\">\n                              {{ file.error }}\n                            </p>\n                          }\n                        } @else if (file.status === 'error') {\n                          <p\n                            class=\"error\"\n                            role=\"alert\">\n                            {{ file.error }}\n                          </p>\n                        } @else {\n                          <p>{{ t.gettext('Waiting to upload.') }}</p>\n                        }\n                      </div>\n                      <button\n                        mat-icon-button\n                        type=\"button\"\n                        [attr.aria-label]=\"\n                          t.gettext('Remove file [[ fileName ]]', {\n                            fileName: file.file.name,\n                          })\n                        \"\n                        [disabled]=\"!currentPost() || busy() || dialogOpen()\"\n                        (click)=\"removeRelatedChildFile(file.id)\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </li>\n                  }\n                </ul>\n              }\n              <button\n                mat-flat-button\n                type=\"button\"\n                [disabled]=\"!canUploadRelatedChildren()\"\n                (click)=\"uploadAndCreateChildren()\">\n                {{ t.gettext('Upload and Create Children') }}\n              </button>\n            </section>\n          </mat-card>\n          @if (mediaAttachment(); as media) {\n            <mat-card class=\"post-setting-card\">\n              <section\n                class=\"media-attachment\"\n                aria-labelledby=\"media-attachment-heading\">\n                <h2 id=\"media-attachment-heading\">{{ media.heading }}</h2>\n                @if (uploading()) {\n                  <mat-progress-bar\n                    mode=\"determinate\"\n                    [value]=\"uploadProgress()\"\n                    [attr.aria-label]=\"t.gettext('Media upload progress')\" />\n                }\n                @if (draft()[media.key]; as key) {\n                  @if (mediaPreviewLoading()) {\n                    <p role=\"status\">\n                      {{ t.gettext('Loading media preview...') }}\n                    </p>\n                  }\n                  @if (mediaPreviewError()) {\n                    <p\n                      class=\"error\"\n                      role=\"alert\">\n                      {{ mediaPreviewError() }}\n                    </p>\n                  }\n                  @if (media.type === 'video' && mediaPreviewUrl()) {\n                    <video\n                      controls\n                      preload=\"metadata\"\n                      [src]=\"mediaPreviewUrl()\">\n                      {{\n                        t.gettext(\n                          'Your browser does not support video playback.'\n                        )\n                      }}\n                    </video>\n                  } @else if (media.type === 'audio' && mediaPreviewUrl()) {\n                    <audio\n                      controls\n                      preload=\"metadata\"\n                      [src]=\"mediaPreviewUrl()\">\n                      {{\n                        t.gettext(\n                          'Your browser does not support audio playback.'\n                        )\n                      }}\n                    </audio>\n                  } @else if (\n                    media.type === 'attachment' && mediaPreviewUrl()\n                  ) {\n                    <p>\n                      {{\n                        t.gettext('Attached file: [[ fileName ]]', {\n                          fileName: mediaFileName(key),\n                        })\n                      }}\n                      <a\n                        [href]=\"mediaPreviewUrl()\"\n                        target=\"_blank\"\n                        rel=\"noopener\"\n                        >{{ t.gettext('Download or open') }}</a\n                      >\n                    </p>\n                  }\n                  <input\n                    #mediaInput\n                    hidden\n                    type=\"file\"\n                    [accept]=\"media.accept\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (change)=\"fileSelected($event)\" />\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (click)=\"mediaInput.click()\">\n                    {{ t.gettext('Replace') }}\n                  </button>\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (click)=\"removeMedia()\">\n                    {{ t.gettext('Remove') }}\n                  </button>\n                } @else {\n                  <input\n                    #mediaInput\n                    hidden\n                    type=\"file\"\n                    [accept]=\"media.accept\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (change)=\"fileSelected($event)\" />\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (click)=\"mediaInput.click()\">\n                    {{ media.uploadLabel }}\n                  </button>\n                }\n              </section>\n            </mat-card>\n          }\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"post-thumbnail\"\n              aria-labelledby=\"thumbnail-heading\">\n              <h2 id=\"thumbnail-heading\">{{ t.gettext('Thumbnail') }}</h2>\n              @if (thumbnailPreviewUrl()) {\n                <img\n                  class=\"thumbnail-preview\"\n                  [src]=\"thumbnailPreviewUrl()\"\n                  [alt]=\"t.gettext('Post thumbnail')\" />\n              } @else {\n                <p>{{ t.gettext('No thumbnail selected.') }}</p>\n              }\n              @if (thumbnailError()) {\n                <p role=\"alert\">{{ thumbnailError() }}</p>\n              }\n              <input\n                #thumbnailInput\n                hidden\n                type=\"file\"\n                accept=\"image/*\"\n                [disabled]=\"busy() || dialogOpen()\"\n                (change)=\"thumbnailSelected($event)\" />\n              <div class=\"buttons\">\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"thumbnailInput.click()\">\n                  {{ t.gettext('Upload Thumbnail') }}\n                </button>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"applyDefaultThumbnail()\">\n                  {{ t.gettext('Apply Default Placeholder') }}\n                </button>\n              </div>\n            </section>\n          </mat-card>\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"post-taxonomy\"\n              aria-labelledby=\"category-heading\">\n              <h2 id=\"category-heading\">{{ t.gettext('Category / Tags') }}</h2>\n              @if (taxonomyLoading()) {\n                <p role=\"status\">\n                  {{ t.gettext('Loading categories and tags...') }}\n                </p>\n              }\n              @if (taxonomyError()) {\n                <p role=\"alert\">{{ taxonomyError() }}</p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy()\"\n                  (click)=\"loadTaxonomy()\">\n                  {{ t.gettext('Try again') }}\n                </button>\n              }\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ t.gettext('Category') }}</mat-label>\n                <mat-select\n                  [value]=\"draft().categoryId\"\n                  [disabled]=\"\n                    busy() ||\n                    dialogOpen() ||\n                    taxonomyLoading() ||\n                    !!taxonomyError()\n                  \"\n                  (selectionChange)=\"updateDraft('categoryId', $event.value)\">\n                  <mat-option [value]=\"null\">{{\n                    t.gettext('None')\n                  }}</mat-option>\n                  @for (category of categories(); track category.id) {\n                    <mat-option [value]=\"category.id\">{{\n                      category.name\n                    }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <h3>{{ t.gettext('Tags') }}</h3>\n              <mat-chip-set [attr.aria-label]=\"t.gettext('Selected tags')\">\n                @for (tag of selectedTags(); track tag.id) {\n                  <mat-chip\n                    [disabled]=\"busy() || dialogOpen() || taxonomyLoading()\"\n                    (removed)=\"removeTag(tag.id)\">\n                    {{ tag.name }}\n                    <button\n                      matChipRemove\n                      type=\"button\"\n                      [disabled]=\"busy() || dialogOpen() || taxonomyLoading()\"\n                      [attr.aria-label]=\"\n                        t.gettext('Remove tag [[ name ]]', { name: tag.name })\n                      \">\n                      <mat-icon>cancel</mat-icon>\n                    </button>\n                  </mat-chip>\n                }\n              </mat-chip-set>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ t.gettext('Search tags') }}</mat-label>\n                <input\n                  matInput\n                  [value]=\"tagSearch()\"\n                  (input)=\"filterTags($event)\"\n                  [disabled]=\"busy() || dialogOpen() || taxonomyLoading()\" />\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ t.gettext('Add tag') }}</mat-label>\n                <mat-select\n                  [value]=\"null\"\n                  [disabled]=\"\n                    busy() ||\n                    dialogOpen() ||\n                    taxonomyLoading() ||\n                    !!taxonomyError()\n                  \"\n                  (selectionChange)=\"addTag($event.value)\">\n                  @for (tag of filteredTags(); track tag.id) {\n                    <mat-option [value]=\"tag.id\">{{ tag.name }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <div class=\"buttons\">\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen() || taxonomyLoading()\"\n                  (click)=\"createTaxonomy('category')\">\n                  <mat-icon>add</mat-icon> {{ t.gettext('Add category') }}\n                </button>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen() || taxonomyLoading()\"\n                  (click)=\"createTaxonomy('tag')\">\n                  <mat-icon>add</mat-icon> {{ t.gettext('Add tag') }}\n                </button>\n              </div>\n            </section>\n          </mat-card>\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"parent-post\"\n              aria-labelledby=\"parent-post-heading\">\n              <h2 id=\"parent-post-heading\">{{ t.gettext('Parent Post') }}</h2>\n              @if (parentPostLoading()) {\n                <p role=\"status\">{{ t.gettext('Loading parent post...') }}</p>\n              } @else if (parentPostError()) {\n                <p\n                  class=\"error\"\n                  role=\"alert\">\n                  {{ parentPostError() }}\n                </p>\n              } @else if (parentPost(); as parent) {\n                <p>\n                  <taon-cms-post-thumbnail [post]=\"parent\" />\n                  <a\n                    href=\"#\"\n                    (click)=\"requestPostEditor($event, parent)\">\n                    {{ parent.title }}\n                  </a>\n                </p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"removeParentPost()\">\n                  <mat-icon>link_off</mat-icon>\n                  {{ t.gettext('Remove from parent') }}\n                </button>\n              } @else {\n                <p>{{ t.gettext('No parent added') }}</p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen() || !currentPost()\"\n                  (click)=\"addAsChildOf()\">\n                  <mat-icon>account_tree</mat-icon>\n                  @if (currentPost()) {\n                    {{ t.gettext('Add as a child') }}\n                  } @else {\n                    {{\n                      t.gettext(\n                        'Add as a child (disabled \u2014 please save the post first)'\n                      )\n                    }}\n                  }\n                </button>\n              }\n            </section>\n          </mat-card>\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"related-posts\"\n              aria-labelledby=\"related-posts-heading\">\n              <h2 id=\"related-posts-heading\">\n                {{ t.gettext('Related posts') }}\n              </h2>\n              @if (relatedPostsLoading()) {\n                <p role=\"status\">{{ t.gettext('Loading related posts...') }}</p>\n              } @else if (relatedPostsError()) {\n                <p\n                  class=\"error\"\n                  role=\"alert\">\n                  {{ relatedPostsError() }}\n                </p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"loadRelatedPosts()\">\n                  {{ t.gettext('Try again') }}\n                </button>\n              } @else {\n                <ul\n                  cdkDropList\n                  [cdkDropListData]=\"relatedPosts()\"\n                  [cdkDropListDisabled]=\"busy() || dialogOpen()\"\n                  (cdkDropListDropped)=\"reorderRelatedPosts($event)\">\n                  @for (post of relatedPosts(); track post.id) {\n                    <li cdkDrag [cdkDragData]=\"post\">\n                      <button\n                        mat-icon-button\n                        cdkDragHandle\n                        type=\"button\"\n                        [disabled]=\"busy() || dialogOpen()\"\n                        [attr.aria-label]=\"\n                          t.gettext('Reorder related post [[ title ]]', {\n                            title: post.title,\n                          })\n                        \">\n                        <mat-icon>drag_indicator</mat-icon>\n                      </button>\n                      <taon-cms-post-thumbnail [post]=\"post\" />\n                      <span class=\"related-post-title\">\n                        #{{ post.id }} -\n                        <a\n                          href=\"#\"\n                          (click)=\"requestPostEditor($event, post)\">\n                          {{ post.title }}\n                        </a>\n                      </span>\n                      <button\n                        mat-icon-button\n                        type=\"button\"\n                        [attr.aria-label]=\"\n                          t.gettext('Remove related post [[ title ]]', {\n                            title: post.title,\n                          })\n                        \"\n                        [disabled]=\"busy() || dialogOpen()\"\n                        (click)=\"removeRelatedPost(post.id)\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </li>\n                  } @empty {\n                    <li>{{ t.gettext('No related posts yet.') }}</li>\n                  }\n                </ul>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"addRelatedPost()\">\n                  <mat-icon>add</mat-icon> {{ t.gettext('Add related post') }}\n                </button>\n              }\n              <mat-checkbox\n                [checked]=\"applyVisibilityToRelatedPosts()\"\n                [disabled]=\"busy() || dialogOpen()\"\n                (change)=\"applyVisibilityToRelatedPosts.set($event.checked)\">\n                {{ t.gettext('Apply visibility to related posts') }}\n              </mat-checkbox>\n            </section>\n          </mat-card>\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"post-version-links\"\n              aria-labelledby=\"post-version-links-heading\">\n              <h2 id=\"post-version-links-heading\">\n                {{ t.gettext('Post versions') }}\n              </h2>\n              @if (!currentPost()) {\n                <p role=\"note\">\n                  {{\n                    t.gettext('Save the post first to manage version links.')\n                  }}\n                </p>\n              }\n              @if (postVersionLinksLoading()) {\n                <p role=\"status\">{{ t.gettext('Loading post versions...') }}</p>\n              }\n              @if (postVersionLinksError()) {\n                <p\n                  class=\"error\"\n                  role=\"alert\">\n                  {{ postVersionLinksError() }}\n                </p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"loadPostVersionLinks(currentPost())\">\n                  {{ t.gettext('Try again') }}\n                </button>\n              }\n              <div class=\"post-version-link\">\n                <h3>{{ t.gettext('Public post version') }}</h3>\n                @if (postVersionLinks().publicVersionPost; as versionPost) {\n                  <p>\n                    <taon-cms-post-thumbnail [post]=\"versionPost\" />\n                    <a\n                      href=\"#\"\n                      (click)=\"requestPostEditor($event, versionPost)\">\n                      {{ versionPost.title }}\n                    </a>\n                    [{{ versionPost.slug }}]\n                  </p>\n                  @if (canEditPublicVersion()) {\n                    <button\n                      mat-button\n                      type=\"button\"\n                      [disabled]=\"busy() || dialogOpen()\"\n                      (click)=\"selectVersionPost('public')\">\n                      {{ t.gettext('Replace public version') }}\n                    </button>\n                    <button\n                      mat-button\n                      type=\"button\"\n                      [disabled]=\"busy() || dialogOpen()\"\n                      (click)=\"removeVersionPost('public')\">\n                      {{ t.gettext('Remove public version') }}\n                    </button>\n                  } @else {\n                    <p>\n                      {{\n                        t.gettext(\n                          'Version editing is disabled for the current post status.'\n                        )\n                      }}\n                    </p>\n                  }\n                } @else {\n                  @if (!postVersionLinksLoading() && !postVersionLinksError()) {\n                    <p>{{ t.gettext('No public post version linked.') }}</p>\n                  }\n                  @if (\n                    currentPost() &&\n                    !postVersionLinksLoading() &&\n                    !postVersionLinksError() &&\n                    !canEditPublicVersion()\n                  ) {\n                    <p>\n                      {{\n                        t.gettext(\n                          'Version editing is disabled for the current post status.'\n                        )\n                      }}\n                    </p>\n                  }\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"\n                      busy() || dialogOpen() || !canEditPublicVersion()\n                    \"\n                    (click)=\"selectVersionPost('public')\">\n                    <mat-icon>add</mat-icon>\n                    {{ t.gettext('Add public post version') }}\n                  </button>\n                }\n              </div>\n              <div class=\"post-version-link\">\n                <h3>{{ t.gettext('Private post version') }}</h3>\n                @if (postVersionLinks().privateVersionPost; as versionPost) {\n                  <p>\n                    <taon-cms-post-thumbnail [post]=\"versionPost\" />\n                    <a\n                      href=\"#\"\n                      (click)=\"requestPostEditor($event, versionPost)\">\n                      {{ versionPost.title }}\n                    </a>\n                    [{{ versionPost.slug }}]\n                  </p>\n                  @if (canEditPrivateVersion()) {\n                    <button\n                      mat-button\n                      type=\"button\"\n                      [disabled]=\"busy() || dialogOpen()\"\n                      (click)=\"selectVersionPost('private')\">\n                      {{ t.gettext('Replace private version') }}\n                    </button>\n                    <button\n                      mat-button\n                      type=\"button\"\n                      [disabled]=\"busy() || dialogOpen()\"\n                      (click)=\"removeVersionPost('private')\">\n                      {{ t.gettext('Remove private version') }}\n                    </button>\n                  } @else {\n                    <p>\n                      {{\n                        t.gettext(\n                          'Version editing is disabled for the current post status.'\n                        )\n                      }}\n                    </p>\n                  }\n                } @else {\n                  @if (!postVersionLinksLoading() && !postVersionLinksError()) {\n                    <p>{{ t.gettext('No private post version linked.') }}</p>\n                  }\n                  @if (\n                    currentPost() &&\n                    !postVersionLinksLoading() &&\n                    !postVersionLinksError() &&\n                    !canEditPrivateVersion()\n                  ) {\n                    <p>\n                      {{\n                        t.gettext(\n                          'Version editing is disabled for the current post status.'\n                        )\n                      }}\n                    </p>\n                  }\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"\n                      busy() || dialogOpen() || !canEditPrivateVersion()\n                    \"\n                    (click)=\"selectVersionPost('private')\">\n                    <mat-icon>add</mat-icon>\n                    {{ t.gettext('Add private post version') }}\n                  </button>\n                }\n              </div>\n            </section>\n          </mat-card>\n\n          @if (!mediaAttachment()) {\n            <mat-card class=\"post-setting-card\">\n              <section\n                class=\"application-hook\"\n                aria-labelledby=\"application-hook-heading\">\n                <h2 id=\"application-hook-heading\">\n                  {{ t.gettext('Hooks') }}\n                </h2>\n                @if (applicationHooksLoading()) {\n                  <p role=\"status\">\n                    {{ t.gettext('Loading application hooks...') }}\n                  </p>\n                } @else if (applicationHooksError()) {\n                  <p\n                    class=\"error\"\n                    role=\"alert\">\n                    {{ applicationHooksError() }}\n                  </p>\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (click)=\"loadApplicationHooks()\">\n                    {{ t.gettext('Try again') }}\n                  </button>\n                } @else {\n                  <mat-checkbox\n                    [checked]=\"useAsApplicationHook()\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (change)=\"setUseAsApplicationHook($event.checked)\">\n                    {{ t.gettext('Use as application hook') }}\n                  </mat-checkbox>\n                  @if (useAsApplicationHook()) {\n                    <mat-form-field\n                      appearance=\"outline\"\n                      subscriptSizing=\"dynamic\">\n                      <mat-label>{{ t.gettext('Application Hook') }}</mat-label>\n                      <mat-select\n                        [value]=\"selectedApplicationHook()\"\n                        [disabled]=\"busy() || dialogOpen()\"\n                        (selectionChange)=\"\n                          selectedApplicationHook.set($event.value)\n                        \">\n                        @for (\n                          applicationHook of applicationHooks();\n                          track applicationHook.id\n                        ) {\n                          <mat-option\n                            [value]=\"applicationHook.hook\"\n                            [disabled]=\"\n                              applicationHookInUseByAnotherPost(applicationHook)\n                            \">\n                            {{ applicationHookLabel(applicationHook.hook) }}\n                            @if (\n                              applicationHookInUseByAnotherPost(applicationHook)\n                            ) {\n                              {{\n                                t.gettext('(in use by post # [[ postId ]])', {\n                                  postId: applicationHook.contentId,\n                                })\n                              }}\n                            }\n                          </mat-option>\n                        } @empty {\n                          <mat-option [disabled]=\"true\">{{\n                            t.gettext('No application hooks configured')\n                          }}</mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  }\n                }\n              </section>\n            </mat-card>\n          }\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"post-permissions\"\n              aria-labelledby=\"post-permissions-heading\">\n              <h2 id=\"post-permissions-heading\">\n                {{ t.gettext('Permissions') }}\n              </h2>\n              @if (permissionSource(); as source) {\n                <p role=\"note\">\n                  {{\n                    t.gettext(\n                      'Permissions are inherited from # [[ postId ]] - [[ title ]]. Edit the source post to change them.',\n                      { postId: source.id, title: source.title }\n                    )\n                  }}\n                </p>\n              }\n              @if (permissionsLoading()) {\n                <p role=\"status\">\n                  {{ t.gettext('Loading assigned permissions...') }}\n                </p>\n              } @else if (permissionsError()) {\n                <p\n                  class=\"error\"\n                  role=\"alert\">\n                  {{ permissionsError() }}\n                </p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"loadPermissions()\">\n                  {{ t.gettext('Try again') }}\n                </button>\n              } @else {\n                <ul>\n                  @for (permission of permissions(); track permission.id) {\n                    <li>\n                      <span>{{ permission.name }} ({{ permission.code }})</span>\n                      <button\n                        mat-icon-button\n                        type=\"button\"\n                        [attr.aria-label]=\"\n                          t.gettext('Remove permission [[ name ]]', {\n                            name: permission.name,\n                          })\n                        \"\n                        [disabled]=\"\n                          busy() || dialogOpen() || !!permissionSource()\n                        \"\n                        (click)=\"removePermission(permission.id)\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </li>\n                  } @empty {\n                    <li>{{ t.gettext('No permissions assigned.') }}</li>\n                  }\n                </ul>\n                @if (permissionOptionsError()) {\n                  <p\n                    class=\"error\"\n                    role=\"alert\">\n                    {{ permissionOptionsError() }}\n                  </p>\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"\n                      busy() || dialogOpen() || permissionOptionsLoading()\n                    \"\n                    (click)=\"loadPermissionOptions()\">\n                    {{ t.gettext('Try again') }}\n                  </button>\n                } @else {\n                  <div class=\"permission-assignment\">\n                    <mat-form-field\n                      class=\"w-full\"\n                      appearance=\"outline\"\n                      subscriptSizing=\"dynamic\">\n                      <mat-label>{{ t.gettext('Permission') }}</mat-label>\n                      <mat-select\n                        [value]=\"selectedPermissionId()\"\n                        [disabled]=\"\n                          busy() ||\n                          dialogOpen() ||\n                          permissionOptionsLoading() ||\n                          !!permissionSource()\n                        \"\n                        (selectionChange)=\"\n                          selectedPermissionId.set($event.value)\n                        \">\n                        @for (\n                          permission of availablePermissions();\n                          track permission.id\n                        ) {\n                          <mat-option [value]=\"permission.id\"\n                            >{{ permission.name }} ({{\n                              permission.code\n                            }})</mat-option\n                          >\n                        } @empty {\n                          <mat-option [disabled]=\"true\">{{\n                            t.gettext('No permissions available')\n                          }}</mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <button\n                      mat-button\n                      type=\"button\"\n                      [disabled]=\"\n                        busy() ||\n                        dialogOpen() ||\n                        !selectedPermissionId() ||\n                        !!permissionSource()\n                      \"\n                      (click)=\"addPermission()\">\n                      <mat-icon>add</mat-icon>\n                      {{ t.gettext('Assign permission') }}\n                    </button>\n                  </div>\n                }\n              }\n              @if (!permissionSource()) {\n                <mat-checkbox\n                  [checked]=\"applyPermissionsToRelatedPosts()\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (change)=\"applyPermissionsToRelatedPosts.set($event.checked)\">\n                  {{ t.gettext('Apply permissions to related posts') }}\n                </mat-checkbox>\n              }\n            </section>\n          </mat-card>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  } @else if (currentPost(); as post) {\n    @if (thumbnailPreviewUrl()) {\n      <img\n        class=\"thumbnail-preview\"\n        [src]=\"thumbnailPreviewUrl()\"\n        [alt]=\"t.gettext('Post thumbnail')\" />\n    }\n    @if (thumbnailError()) {\n      <p role=\"alert\">{{ thumbnailError() }}</p>\n    }\n    <h1 class=\"post-title\">{{ post.title }}</h1>\n    @if (post.excerpt) {\n      <p class=\"post-excerpt\">{{ post.excerpt }}</p>\n    }\n    <div\n      class=\"post-body\"\n      [innerHTML]=\"resolvedBody()\"></div>\n    @if (mediaAttachment(); as media) {\n      @if (draft()[media.key]; as key) {\n        @if (mediaPreviewLoading()) {\n          <p role=\"status\">{{ t.gettext('Loading media...') }}</p>\n        } @else if (mediaPreviewError()) {\n          <p\n            class=\"error\"\n            role=\"alert\">\n            {{ mediaPreviewError() }}\n          </p>\n        } @else if (media.type === 'video' && mediaPreviewUrl()) {\n          <video\n            controls\n            preload=\"metadata\"\n            [attr.controlsList]=\"\n              currentPost()?.status === 'archived' ||\n              currentPost()?.status === 'draft'\n                ? 'nodownload noremoteplayback'\n                : null\n            \"\n            [poster]=\"thumbnailPreviewUrl() || null\"\n            [src]=\"mediaPreviewUrl()\">\n            {{ t.gettext('Your browser does not support video playback.') }}\n          </video>\n        } @else if (media.type === 'audio' && mediaPreviewUrl()) {\n          <audio\n            controls\n            preload=\"metadata\"\n            [attr.controlsList]=\"\n              currentPost()?.status === 'archived' ||\n              currentPost()?.status === 'draft'\n                ? 'nodownload noremoteplayback'\n                : null\n            \"\n            [src]=\"mediaPreviewUrl()\">\n            {{ t.gettext('Your browser does not support audio playback.') }}\n          </audio>\n        } @else if (media.type === 'attachment' && mediaPreviewUrl()) {\n          <p>\n            {{\n              t.gettext('Attached file: [[ fileName ]]', {\n                fileName: mediaFileName(key),\n              })\n            }}\n            <a\n              [href]=\"mediaPreviewUrl()\"\n              target=\"_blank\"\n              rel=\"noopener\"\n              >{{ t.gettext('Download or open') }}</a\n            >\n          </p>\n        }\n      }\n    }\n    @if (mode() === 'view-clean') {\n      <taon-cms-comments\n        [contentId]=\"post.id\"\n        class=\"w-full\" />\n    }\n  } @else {\n    <p role=\"status\">{{ t.gettext('No post is loaded.') }}</p>\n  }\n</article>\n", styles: [":host{display:block}:host ::ng-deep .NgxEditor .ProseMirror table{width:100%;border-collapse:collapse;table-layout:fixed;margin:12px 0}:host ::ng-deep .NgxEditor .ProseMirror td,:host ::ng-deep .NgxEditor .ProseMirror th{position:relative;min-width:60px;border:1px solid #aaa;padding:8px;vertical-align:top}:host ::ng-deep .NgxEditor .ProseMirror td>p,:host ::ng-deep .NgxEditor .ProseMirror th>p{margin:0}:host ::ng-deep .NgxEditor .ProseMirror .selectedCell{background:#3f51b51f}mat-expansion-panel{border-radius:0!important}.post-actions{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;padding:1rem;border-bottom:1px solid rgba(136,136,136,.2)}.post-status{margin-right:auto;text-transform:capitalize;opacity:.7}.buttons{display:flex;flex-wrap:wrap;gap:.5rem}.post-article{max-width:760px;margin:0 auto;padding:clamp(1.5rem,5vw,4rem) 1.5rem;overflow-wrap:anywhere}.post-settings{display:grid;gap:1rem;margin-top:1rem}.post-setting-card{display:block;padding:20px}.post-title{margin:0 0 1.5rem;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.15;letter-spacing:-.03em}.post-excerpt{margin:0 0 2rem;font-size:1.35rem;line-height:1.6;opacity:.7;white-space:pre-wrap}.post-body{font-family:Georgia,Times New Roman,serif;font-size:1.2rem;line-height:1.8;white-space:pre-wrap}.editable{min-height:1.2em;outline:none}.editable:focus{box-shadow:-3px 0 #8885}.editable:empty:before{content:attr(data-placeholder);opacity:.4;pointer-events:none}.post-content-editor{border:1px solid rgba(136,136,136,.3333333333);border-radius:4px;overflow:hidden}.raw-content{display:block;box-sizing:border-box;width:100%;min-height:20rem;padding:1rem;resize:vertical;border:0;color:inherit;background:transparent;font-family:monospace}ngx-editor{display:block;min-height:20rem}.content-preview{min-height:12rem;padding:1rem}.slug-field{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:3rem;padding-top:1rem;border-top:1px solid rgba(136,136,136,.2);font-size:.875rem}.slug-field input{flex:1;min-width:160px;padding:.5rem;color:inherit;background:transparent;border:1px solid rgba(136,136,136,.3333333333);border-radius:4px}.error{padding:1rem;color:#b3261e}.post-type-selector{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.post-type-accordion{display:block;margin-bottom:1rem}.post-type-accordion mat-panel-title{align-items:center;gap:.5rem}.media-attachment,.post-thumbnail,.post-taxonomy,.parent-post,.related-posts,.post-version-links,.application-hook,.post-permissions{margin-top:1.5rem;font-size:.875rem}.media-attachment h2,.post-thumbnail h2,.post-taxonomy h2,.parent-post h2,.related-posts h2,.post-version-links h2,.application-hook h2,.post-permissions h2{font-size:1rem}.media-attachment .thumbnail-preview,.post-thumbnail .thumbnail-preview,.post-taxonomy .thumbnail-preview,.parent-post .thumbnail-preview,.related-posts .thumbnail-preview,.post-version-links .thumbnail-preview,.application-hook .thumbnail-preview,.post-permissions .thumbnail-preview{display:block;width:min(100%,480px);max-height:320px;object-fit:contain;border-radius:12px;margin-bottom:.75rem}.media-attachment .post-taxonomy mat-form-field,.post-thumbnail .post-taxonomy mat-form-field,.post-taxonomy .post-taxonomy mat-form-field,.parent-post .post-taxonomy mat-form-field,.related-posts .post-taxonomy mat-form-field,.post-version-links .post-taxonomy mat-form-field,.application-hook .post-taxonomy mat-form-field,.post-permissions .post-taxonomy mat-form-field{display:block;margin-top:.75rem}.related-posts ul,.related-child-files ul,.post-permissions ul{padding:0;list-style:none}.related-posts mat-form-field,.related-child-files mat-form-field,.post-permissions mat-form-field{display:block;width:min(100%,28rem);margin-top:.75rem}.related-posts .application-hook,.related-child-files .application-hook,.post-permissions .application-hook{display:grid;align-items:start;gap:.75rem}.related-posts .application-hook mat-form-field,.related-child-files .application-hook mat-form-field,.post-permissions .application-hook mat-form-field{width:min(100%,28rem)}.related-posts li,.related-child-files li,.post-permissions li{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.related-child-files{margin-top:1.5rem;font-size:.875rem}.related-child-files li{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem 0;border-bottom:1px solid rgba(136,136,136,.2)}.related-post-title{flex:1}[cdkDragHandle]{cursor:grab}.related-child-file{flex:1;min-width:0}.related-child-file-heading,.related-child-file-progress,.related-child-progress{display:flex;align-items:center;gap:.75rem}.related-child-file-heading{justify-content:space-between;overflow-wrap:anywhere}.related-child-file-progress{margin-top:.5rem}.related-child-file-progress mat-progress-bar{flex:1}.related-child-progress{margin:.75rem 0}.related-child-progress mat-progress-bar{flex:1}.post-version-link{margin-top:1rem;padding-top:.75rem;border-top:1px solid rgba(136,136,136,.2)}.post-version-link h3{font-size:.95rem}video{max-width:100%;max-height:400px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i4$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i4$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i10.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i10.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i11.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i11.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i12.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i15.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: TaonCmsEditableDirective, selector: "[taonCmsEditable]", inputs: ["taonCmsEditableFormat", "taonCmsEditableSingleLine", "taonCmsEditable"], outputs: ["taonCmsEditableChange"] }, { kind: "component", type: TaonCmsCommentsComponent, selector: "taon-cms-comments", inputs: ["contentId"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i16.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i17.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: i17.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: i17.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: TaonCmsPostThumbnailComponent, selector: "taon-cms-post-thumbnail", inputs: ["post"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "rawContent", first: true, predicate: ["rawContent"], descendants: true, isSignal: true }, { propertyName: "actionButtonsTemplateRef", first: true, predicate: ["actionButtonsTemplate"], descendants: true }], ngImport: i0, template: "@if (mode() !== 'view-clean') {\n  <ng-template #actionButtonsTemplate>\n    <div class=\"buttons\">\n      @if (editing()) {\n        <button\n          mat-flat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen() || !canSave()\"\n          (click)=\"save()\">\n          {{ mode() === 'add' ? t.gettext('Add') : t.gettext('Save') }}\n        </button>\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen()\"\n          (click)=\"cancel()\">\n          {{ t.gettext('Cancel') }}\n        </button>\n      } @else if (currentPost()) {\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen()\"\n          (click)=\"edit()\">\n          <mat-icon>edit</mat-icon> {{ t.gettext('Edit') }}\n        </button>\n      }\n      @if (mode() !== 'add' && currentPost()) {\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen()\"\n          (click)=\"revert()\">\n          <mat-icon>history</mat-icon> {{ t.gettext('Revert') }}\n        </button>\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen()\"\n          (click)=\"delete()\">\n          <mat-icon>delete</mat-icon> {{ t.gettext('Delete') }}\n        </button>\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen()\"\n          (click)=\"duplicate()\">\n          <mat-icon>content_copy</mat-icon> {{ t.gettext('Duplicate') }}\n        </button>\n      }\n    </div>\n  </ng-template>\n  <header class=\"post-actions\">\n    @if (visibilitySource(); as source) {\n      <span\n        class=\"post-status\"\n        tabindex=\"0\"\n        [matTooltip]=\"visibilityInheritedTooltip()\"\n        [attr.aria-label]=\"visibilityInheritedTooltip()\">\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"true\">\n          {{ statusLabel() }}\n        </button>\n      </span>\n    } @else {\n      <button\n        class=\"post-status\"\n        mat-button\n        type=\"button\"\n        [disabled]=\"statusControlDisabled()\"\n        (click)=\"selectStatus()\">\n        {{ statusLabel() }}\n      </button>\n    }\n    <ng-container [ngTemplateOutlet]=\"actionButtonsTemplate\" />\n    @if (busy()) {\n      <span role=\"status\">{{\n        uploading()\n          ? t.gettext('Uploading... ') + uploadProgress() + '%'\n          : t.gettext('Saving...')\n      }}</span>\n    }\n  </header>\n  @if (error()) {\n    <p\n      class=\"error\"\n      role=\"alert\">\n      {{ error() }}\n    </p>\n  }\n}\n\n<article\n  class=\"post-article\"\n  [attr.aria-busy]=\"busy()\">\n  @if (editing()) {\n    <mat-tab-group animationDuration=\"0ms\">\n      <mat-tab [label]=\"t.gettext('CONTENT')\">\n        <mat-accordion class=\"post-type-accordion\">\n          <mat-expansion-panel #postTypePanel>\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <mat-icon>{{ currentPostTypeIcon() }}</mat-icon>\n                {{\n                  t.gettext('Current post type: [[ postType ]]', {\n                    postType: currentPostType().label,\n                  })\n                }}\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            <mat-radio-group\n              class=\"post-type-selector\"\n              [attr.aria-label]=\"t.gettext('Post type')\"\n              [value]=\"draft().type\"\n              [disabled]=\"busy() || dialogOpen()\"\n              (change)=\"updateDraft('type', $event.value)\">\n              @for (type of postTypes; track type.value) {\n                <mat-radio-button\n                  [value]=\"type.value\"\n                  (click)=\"postTypePanel.close()\"\n                  >{{ type.label }}</mat-radio-button\n                >\n              }\n            </mat-radio-group>\n          </mat-expansion-panel>\n        </mat-accordion>\n        <div\n          class=\"post-title editable\"\n          contenteditable=\"true\"\n          role=\"textbox\"\n          [attr.aria-label]=\"t.gettext('Post title')\"\n          aria-required=\"true\"\n          [attr.data-placeholder]=\"placeholderTitle()\"\n          [attr.contenteditable]=\"!busy() && !dialogOpen()\"\n          [taonCmsEditableSingleLine]=\"true\"\n          [taonCmsEditable]=\"draft().title\"\n          (taonCmsEditableChange)=\"updateDraft('title', $event)\"></div>\n        @if (subtitleEmpty()) {\n          <button\n            mat-button\n            type=\"button\"\n            [disabled]=\"busy() || dialogOpen()\"\n            (click)=\"generateLoremIpsum('excerpt')\">\n            {{ t.gettext('Generate Lorem Ipsum') }}\n          </button>\n        }\n        <div\n          class=\"post-excerpt editable\"\n          contenteditable=\"true\"\n          role=\"textbox\"\n          [attr.aria-label]=\"t.gettext('Post excerpt')\"\n          aria-multiline=\"true\"\n          [attr.data-placeholder]=\"placeholderShortIntro()\"\n          [attr.contenteditable]=\"!busy() && !dialogOpen()\"\n          [taonCmsEditable]=\"draft().excerpt\"\n          (taonCmsEditableChange)=\"updateDraft('excerpt', $event)\"></div>\n        @if (descriptionEmpty()) {\n          <button\n            mat-button\n            type=\"button\"\n            [disabled]=\"busy() || dialogOpen()\"\n            (click)=\"generateLoremIpsum('body')\">\n            {{ t.gettext('Generate Lorem Ipsum') }}\n          </button>\n        }\n        <section class=\"post-content-editor\">\n          @if (draft().type === contentType.JsonTable) {\n            <taon-spreadsheet-table\n              [data]=\"jsonTableData()\"\n              [disabled]=\"busy() || dialogOpen()\"\n              [validationError]=\"jsonTableValidationError()\"\n              (dataChange)=\"setJsonTableData($event)\"\n              (validationErrorChange)=\"jsonTableValidationError.set($event)\" />\n          } @else {\n          <mat-tab-group\n            [selectedIndex]=\"contentTab()\"\n            (selectedIndexChange)=\"setContentTab($event)\"\n            [preserveContent]=\"true\"\n            animationDuration=\"0ms\">\n            <mat-tab [label]=\"t.gettext('Editor')\">\n              @if (contentEditor(); as editor) {\n                <ng-template #customMenu>\n                  <button\n                    type=\"button\"\n                    class=\"NgxEditor__MenuItem\"\n                    title=\"Table\"\n                    aria-label=\"Table actions\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    [matMenuTriggerFor]=\"tableMenu\"\n                    [matMenuTriggerRestoreFocus]=\"false\"\n                    (mousedown)=\"$event.preventDefault()\">\n                    <mat-icon>table_chart</mat-icon>\n                  </button>\n\n                  <mat-menu #tableMenu=\"matMenu\">\n                    <button\n                      mat-menu-item\n                      type=\"button\"\n                      (click)=\"insertTable($event)\">\n                      <mat-icon>add</mat-icon>\n                      <span>Insert table</span>\n                    </button>\n\n                    <mat-divider />\n\n                    @for (item of tableCommands; track item.label) {\n                      <button\n                        mat-menu-item\n                        type=\"button\"\n                        [disabled]=\"!canRunTableCommand(item.command)\"\n                        (click)=\"runTableCommand($event, item.command)\">\n                        {{ item.label }}\n                      </button>\n                    }\n                  </mat-menu>\n                </ng-template>\n\n                <ngx-editor-menu\n                  [editor]=\"editor\"\n                  [customMenuRef]=\"customMenu\"\n                  [toolbar]=\"contentToolbar\"\n                  [disabled]=\"busy() || dialogOpen()\" />\n                <ngx-editor\n                  [editor]=\"editor\"\n                  [placeholder]=\"placeholderTellYourStory()\" />\n              }\n            </mat-tab>\n            <mat-tab [label]=\"t.gettext('Raw')\">\n              <textarea\n                #rawContent\n                class=\"raw-content\"\n                [attr.aria-label]=\"t.gettext('Post body HTML')\"\n                [value]=\"draft().body\"\n                [disabled]=\"busy() || dialogOpen()\"\n                (input)=\"updateRawContent($event)\"\n                spellcheck=\"false\"></textarea>\n            </mat-tab>\n            <mat-tab [label]=\"t.gettext('Preview')\">\n              <div\n                class=\"post-body content-preview\"\n                [innerHTML]=\"resolvedBody()\"></div>\n            </mat-tab>\n          </mat-tab-group>\n          @if (contentTab() !== 2) {\n            <button\n              mat-button\n              type=\"button\"\n              [disabled]=\"busy() || dialogOpen() || !contentEditor()\"\n              [matMenuTriggerFor]=\"variableMenu\"\n              [matMenuTriggerRestoreFocus]=\"false\">\n              {{ t.gettext('Insert variable') }}\n            </button>\n          }\n          <mat-menu #variableMenu=\"matMenu\">\n            <button\n              mat-menu-item\n              [matMenuTriggerFor]=\"siteVariableMenu\">\n              {{ t.gettext('Site') }}\n            </button>\n            <button\n              mat-menu-item\n              [matMenuTriggerFor]=\"postVariableMenu\">\n              {{ t.gettext('Post') }}\n            </button>\n          </mat-menu>\n          <mat-menu #siteVariableMenu=\"matMenu\">\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('frontendUrl')\">\n              {{ t.gettext('Frontend URL') }}\n            </button>\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('site.name')\">\n              {{ t.gettext('Site name') }}\n            </button>\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('currentYear')\">\n              {{ t.gettext('Current year') }}\n            </button>\n          </mat-menu>\n          <mat-menu #postVariableMenu=\"matMenu\">\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('post.title')\">\n              {{ t.gettext('Post title') }}\n            </button>\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('post.url')\">\n              {{ t.gettext('Post URL') }}\n            </button>\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('post.id')\">\n              {{ t.gettext('Post ID') }}\n            </button>\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('post.thumbnailUrl')\">\n              {{ t.gettext('Post Thumbnail URL') }}\n            </button>\n          </mat-menu>\n          }\n        </section>\n        <label class=\"slug-field\">\n          <span>{{ t.gettext('URL slug') }}</span>\n          <input\n            [attr.aria-label]=\"t.gettext('URL slug')\"\n            [value]=\"draft().slug\"\n            [disabled]=\"busy() || dialogOpen()\"\n            (input)=\"updateSlug($event)\"\n            [placeholder]=\"t.gettext('my-post')\" />\n        </label>\n        @if (requiredSlugs.length) {\n          <mat-form-field\n            class=\"required-slugs-field\"\n            appearance=\"outline\">\n            <mat-label>{{ t.gettext('Required Slugs') }}</mat-label>\n            <mat-select\n              [value]=\"selectedRequiredSlug()\"\n              [disabled]=\"busy() || dialogOpen()\"\n              (selectionChange)=\"selectRequiredSlug($event.value)\">\n              @for (slug of requiredSlugs; track slug) {\n                <mat-option [value]=\"slug\">{{ slug }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        }\n      </mat-tab>\n      <mat-tab [label]=\"t.gettext('SETTINGS')\">\n        <div class=\"post-settings\">\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"related-child-files\"\n              aria-labelledby=\"related-child-files-heading\">\n              <h2 id=\"related-child-files-heading\">\n                {{ t.gettext('Create related children from files') }}\n              </h2>\n              @if (!currentPost()) {\n                <p role=\"note\">\n                  {{\n                    t.gettext(\n                      'Please save the post before creating children.'\n                    )\n                  }}\n                </p>\n              }\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ t.gettext('Child title prefix') }}</mat-label>\n                <input\n                  matInput\n                  [value]=\"childTitlePrefix()\"\n                  [disabled]=\"!currentPost() || busy() || dialogOpen()\"\n                  (input)=\"updateChildTitlePrefix($event)\" />\n              </mat-form-field>\n              <input\n                #relatedChildFilesInput\n                hidden\n                type=\"file\"\n                multiple\n                [disabled]=\"!currentPost() || busy() || dialogOpen()\"\n                (change)=\"relatedChildFilesSelected($event)\" />\n              <button\n                mat-button\n                type=\"button\"\n                [disabled]=\"!currentPost() || busy() || dialogOpen()\"\n                (click)=\"relatedChildFilesInput.click()\">\n                <mat-icon>add</mat-icon>\n                {{ t.gettext('Choose files') }}\n              </button>\n              @if (childBatchError()) {\n                <p\n                  class=\"error\"\n                  role=\"alert\">\n                  {{ childBatchError() }}\n                </p>\n              }\n              @if (childFiles().length) {\n                <div class=\"related-child-progress\">\n                  <mat-progress-bar\n                    mode=\"determinate\"\n                    [value]=\"childOverallProgress()\"\n                    [attr.aria-label]=\"\n                      t.gettext('Overall child creation progress')\n                    \" />\n                  <span>\n                    {{ childOverallProgress() }}%\n                    {{ t.gettext('overall progress') }}\n                  </span>\n                </div>\n                <ul>\n                  @for (file of childFiles(); track file.id; let index =\n                  $index) {\n                    <li>\n                      <div class=\"related-child-file\">\n                        <div class=\"related-child-file-heading\">\n                          <span>{{ file.file.name }}</span>\n                          <span>{{ childTitlePreviews()[index] }}</span>\n                        </div>\n                        <div class=\"related-child-file-progress\">\n                          <mat-progress-bar\n                            mode=\"determinate\"\n                            [value]=\"file.progress\"\n                            [attr.aria-label]=\"\n                              t.gettext('Progress for [[ fileName ]]', {\n                                fileName: file.file.name,\n                              })\n                            \" />\n                          <span>{{ file.progress }}%</span>\n                        </div>\n                        @if (file.status === 'processing') {\n                          <p role=\"status\">{{ t.gettext('Processing...') }}</p>\n                        } @else if (file.status === 'success') {\n                          <p role=\"status\">{{ t.gettext('Child created.') }}</p>\n                          @if (file.error) {\n                            <p\n                              class=\"error\"\n                              role=\"alert\">\n                              {{ file.error | json }}\n                            </p>\n                          }\n                        } @else if (file.status === 'error') {\n                          <p\n                            class=\"error\"\n                            role=\"alert\">\n                            {{ file.error | json }}\n                          </p>\n                        } @else {\n                          <p>{{ t.gettext('Waiting to upload.') }}</p>\n                        }\n                      </div>\n                      <button\n                        mat-icon-button\n                        type=\"button\"\n                        [attr.aria-label]=\"\n                          t.gettext('Remove file [[ fileName ]]', {\n                            fileName: file.file.name,\n                          })\n                        \"\n                        [disabled]=\"!currentPost() || busy() || dialogOpen()\"\n                        (click)=\"removeRelatedChildFile(file.id)\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </li>\n                  }\n                </ul>\n              }\n              <button\n                mat-flat-button\n                type=\"button\"\n                [disabled]=\"!canUploadRelatedChildren()\"\n                (click)=\"uploadAndCreateChildren()\">\n                {{ t.gettext('Upload and Create Children') }}\n              </button>\n              @if (childUploadRunning()) {\n                <button\n                  mat-button\n                  type=\"button\"\n                  (click)=\"cancelRelatedChildUploads()\">\n                  {{ t.gettext('Cancel upload') }}\n                </button>\n              }\n            </section>\n          </mat-card>\n          @if (mediaAttachment(); as media) {\n            <mat-card class=\"post-setting-card\">\n              <section\n                class=\"media-attachment\"\n                aria-labelledby=\"media-attachment-heading\">\n                <h2 id=\"media-attachment-heading\">{{ media.heading }}</h2>\n                @if (uploading()) {\n                  <mat-progress-bar\n                    mode=\"determinate\"\n                    [value]=\"uploadProgress()\"\n                    [attr.aria-label]=\"t.gettext('Media upload progress')\" />\n                  <button\n                    mat-button\n                    type=\"button\"\n                    (click)=\"cancelMediaUpload()\">\n                    {{ t.gettext('Cancel upload') }}\n                  </button>\n                }\n                @if (draft()[media.key]; as key) {\n                  @if (mediaPreviewLoading()) {\n                    <p role=\"status\">\n                      {{ t.gettext('Loading media preview...') }}\n                    </p>\n                  }\n                  @if (mediaPreviewError()) {\n                    <p\n                      class=\"error\"\n                      role=\"alert\">\n                      {{ mediaPreviewError() }}\n                    </p>\n                  }\n                  @if (media.type === 'video' && mediaPreviewUrl()) {\n                    <video\n                      controls\n                      preload=\"metadata\"\n                      [src]=\"mediaPreviewUrl()\">\n                      {{\n                        t.gettext(\n                          'Your browser does not support video playback.'\n                        )\n                      }}\n                    </video>\n                  } @else if (media.type === 'audio' && mediaPreviewUrl()) {\n                    <audio\n                      controls\n                      preload=\"metadata\"\n                      [src]=\"mediaPreviewUrl()\">\n                      {{\n                        t.gettext(\n                          'Your browser does not support audio playback.'\n                        )\n                      }}\n                    </audio>\n                  } @else if (\n                    media.type === 'attachment' && mediaPreviewUrl()\n                  ) {\n                    <p>\n                      {{\n                        t.gettext('Attached file: [[ fileName ]]', {\n                          fileName: mediaFileName(key),\n                        })\n                      }}\n                      <a\n                        [href]=\"mediaPreviewUrl()\"\n                        target=\"_blank\"\n                        rel=\"noopener\"\n                        >{{ t.gettext('Download or open') }}</a\n                      >\n                    </p>\n                  }\n                  <input\n                    #mediaInput\n                    hidden\n                    type=\"file\"\n                    [accept]=\"media.accept\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (change)=\"fileSelected($event)\" />\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (click)=\"mediaInput.click()\">\n                    {{ t.gettext('Replace') }}\n                  </button>\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (click)=\"removeMedia()\">\n                    {{ t.gettext('Remove') }}\n                  </button>\n                } @else {\n                  <input\n                    #mediaInput\n                    hidden\n                    type=\"file\"\n                    [accept]=\"media.accept\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (change)=\"fileSelected($event)\" />\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (click)=\"mediaInput.click()\">\n                    {{ media.uploadLabel }}\n                  </button>\n                }\n              </section>\n            </mat-card>\n          }\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"post-thumbnail\"\n              aria-labelledby=\"thumbnail-heading\">\n              <h2 id=\"thumbnail-heading\">{{ t.gettext('Thumbnail') }}</h2>\n              @if (thumbnailPreviewUrl()) {\n                <img\n                  class=\"thumbnail-preview\"\n                  [src]=\"thumbnailPreviewUrl()\"\n                  [alt]=\"t.gettext('Post thumbnail')\" />\n              } @else {\n                <p>{{ t.gettext('No thumbnail selected.') }}</p>\n              }\n              @if (thumbnailError()) {\n                <p role=\"alert\">{{ thumbnailError() }}</p>\n              }\n              <input\n                #thumbnailInput\n                hidden\n                type=\"file\"\n                accept=\"image/*\"\n                [disabled]=\"busy() || dialogOpen()\"\n                (change)=\"thumbnailSelected($event)\" />\n              <div class=\"buttons\">\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"thumbnailInput.click()\">\n                  {{ t.gettext('Upload Thumbnail') }}\n                </button>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"applyDefaultThumbnail()\">\n                  {{ t.gettext('Apply Default Placeholder') }}\n                </button>\n              </div>\n            </section>\n          </mat-card>\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"post-taxonomy\"\n              aria-labelledby=\"category-heading\">\n              <h2 id=\"category-heading\">{{ t.gettext('Category / Tags') }}</h2>\n              @if (taxonomyLoading()) {\n                <p role=\"status\">\n                  {{ t.gettext('Loading categories and tags...') }}\n                </p>\n              }\n              @if (taxonomyError()) {\n                <p role=\"alert\">{{ taxonomyError() }}</p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy()\"\n                  (click)=\"loadTaxonomy()\">\n                  {{ t.gettext('Try again') }}\n                </button>\n              }\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ t.gettext('Category') }}</mat-label>\n                <mat-select\n                  [value]=\"draft().categoryId\"\n                  [disabled]=\"\n                    busy() ||\n                    dialogOpen() ||\n                    taxonomyLoading() ||\n                    !!taxonomyError()\n                  \"\n                  (selectionChange)=\"updateDraft('categoryId', $event.value)\">\n                  <mat-option [value]=\"null\">{{\n                    t.gettext('None')\n                  }}</mat-option>\n                  @for (category of categories(); track category.id) {\n                    <mat-option [value]=\"category.id\">{{\n                      category.name\n                    }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <h3>{{ t.gettext('Tags') }}</h3>\n              <mat-chip-set [attr.aria-label]=\"t.gettext('Selected tags')\">\n                @for (tag of selectedTags(); track tag.id) {\n                  <mat-chip\n                    [disabled]=\"busy() || dialogOpen() || taxonomyLoading()\"\n                    (removed)=\"removeTag(tag.id)\">\n                    {{ tag.name }}\n                    <button\n                      matChipRemove\n                      type=\"button\"\n                      [disabled]=\"busy() || dialogOpen() || taxonomyLoading()\"\n                      [attr.aria-label]=\"\n                        t.gettext('Remove tag [[ name ]]', { name: tag.name })\n                      \">\n                      <mat-icon>cancel</mat-icon>\n                    </button>\n                  </mat-chip>\n                }\n              </mat-chip-set>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ t.gettext('Search tags') }}</mat-label>\n                <input\n                  matInput\n                  [value]=\"tagSearch()\"\n                  (input)=\"filterTags($event)\"\n                  [disabled]=\"busy() || dialogOpen() || taxonomyLoading()\" />\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ t.gettext('Add tag') }}</mat-label>\n                <mat-select\n                  [value]=\"null\"\n                  [disabled]=\"\n                    busy() ||\n                    dialogOpen() ||\n                    taxonomyLoading() ||\n                    !!taxonomyError()\n                  \"\n                  (selectionChange)=\"addTag($event.value)\">\n                  @for (tag of filteredTags(); track tag.id) {\n                    <mat-option [value]=\"tag.id\">{{ tag.name }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <div class=\"buttons\">\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen() || taxonomyLoading()\"\n                  (click)=\"createTaxonomy('category')\">\n                  <mat-icon>add</mat-icon> {{ t.gettext('Add category') }}\n                </button>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen() || taxonomyLoading()\"\n                  (click)=\"createTaxonomy('tag')\">\n                  <mat-icon>add</mat-icon> {{ t.gettext('Add tag') }}\n                </button>\n              </div>\n            </section>\n          </mat-card>\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"parent-post\"\n              aria-labelledby=\"parent-post-heading\">\n              <h2 id=\"parent-post-heading\">{{ t.gettext('Parent Post') }}</h2>\n              @if (parentPostLoading()) {\n                <p role=\"status\">{{ t.gettext('Loading parent post...') }}</p>\n              } @else if (parentPostError()) {\n                <p\n                  class=\"error\"\n                  role=\"alert\">\n                  {{ parentPostError() }}\n                </p>\n              } @else if (parentPost(); as parent) {\n                <p>\n                  <taon-cms-post-thumbnail [post]=\"parent\" />\n                  <a\n                    href=\"#\"\n                    (click)=\"requestPostEditor($event, parent)\">\n                    {{ parent.title }}\n                  </a>\n                </p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"removeParentPost()\">\n                  <mat-icon>link_off</mat-icon>\n                  {{ t.gettext('Remove from parent') }}\n                </button>\n              } @else {\n                <p>{{ t.gettext('No parent added') }}</p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen() || !currentPost()\"\n                  (click)=\"addAsChildOf()\">\n                  <mat-icon>account_tree</mat-icon>\n                  @if (currentPost()) {\n                    {{ t.gettext('Add as a child') }}\n                  } @else {\n                    {{\n                      t.gettext(\n                        'Add as a child (disabled \u2014 please save the post first)'\n                      )\n                    }}\n                  }\n                </button>\n              }\n            </section>\n          </mat-card>\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"related-posts\"\n              aria-labelledby=\"related-posts-heading\">\n              <h2 id=\"related-posts-heading\">\n                {{ t.gettext('Related posts') }}\n              </h2>\n              @if (relatedPostsLoading()) {\n                <p role=\"status\">{{ t.gettext('Loading related posts...') }}</p>\n              } @else if (relatedPostsError()) {\n                <p\n                  class=\"error\"\n                  role=\"alert\">\n                  {{ relatedPostsError() }}\n                </p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"loadRelatedPosts()\">\n                  {{ t.gettext('Try again') }}\n                </button>\n              } @else {\n                <ul\n                  cdkDropList\n                  [cdkDropListData]=\"relatedPosts()\"\n                  [cdkDropListDisabled]=\"busy() || dialogOpen()\"\n                  (cdkDropListDropped)=\"reorderRelatedPosts($event)\">\n                  @for (post of relatedPosts(); track post.id) {\n                    <li cdkDrag [cdkDragData]=\"post\">\n                      <button\n                        mat-icon-button\n                        cdkDragHandle\n                        type=\"button\"\n                        [disabled]=\"busy() || dialogOpen()\"\n                        [attr.aria-label]=\"\n                          t.gettext('Reorder related post [[ title ]]', {\n                            title: post.title,\n                          })\n                        \">\n                        <mat-icon>drag_indicator</mat-icon>\n                      </button>\n                      <taon-cms-post-thumbnail [post]=\"post\" />\n                      <span class=\"related-post-title\">\n                        #{{ post.id }} -\n                        <a\n                          href=\"#\"\n                          (click)=\"requestPostEditor($event, post)\">\n                          {{ post.title }}\n                        </a>\n                      </span>\n                      <button\n                        mat-icon-button\n                        type=\"button\"\n                        [attr.aria-label]=\"\n                          t.gettext('Remove related post [[ title ]]', {\n                            title: post.title,\n                          })\n                        \"\n                        [disabled]=\"busy() || dialogOpen()\"\n                        (click)=\"removeRelatedPost(post.id)\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </li>\n                  } @empty {\n                    <li>{{ t.gettext('No related posts yet.') }}</li>\n                  }\n                </ul>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"addRelatedPost()\">\n                  <mat-icon>add</mat-icon> {{ t.gettext('Add related post') }}\n                </button>\n              }\n              <mat-checkbox\n                [checked]=\"applyVisibilityToRelatedPosts()\"\n                [disabled]=\"busy() || dialogOpen()\"\n                (change)=\"applyVisibilityToRelatedPosts.set($event.checked)\">\n                {{ t.gettext('Apply visibility to related posts') }}\n              </mat-checkbox>\n            </section>\n          </mat-card>\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"post-version-links\"\n              aria-labelledby=\"post-version-links-heading\">\n              <h2 id=\"post-version-links-heading\">\n                {{ t.gettext('Post versions') }}\n              </h2>\n              @if (!currentPost()) {\n                <p role=\"note\">\n                  {{\n                    t.gettext('Save the post first to manage version links.')\n                  }}\n                </p>\n              }\n              @if (postVersionLinksLoading()) {\n                <p role=\"status\">{{ t.gettext('Loading post versions...') }}</p>\n              }\n              @if (postVersionLinksError()) {\n                <p\n                  class=\"error\"\n                  role=\"alert\">\n                  {{ postVersionLinksError() }}\n                </p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"loadPostVersionLinks(currentPost())\">\n                  {{ t.gettext('Try again') }}\n                </button>\n              }\n              <div class=\"post-version-link\">\n                <h3>{{ t.gettext('Public post version') }}</h3>\n                @if (postVersionLinks().publicVersionPost; as versionPost) {\n                  <p>\n                    <taon-cms-post-thumbnail [post]=\"versionPost\" />\n                    <a\n                      href=\"#\"\n                      (click)=\"requestPostEditor($event, versionPost)\">\n                      {{ versionPost.title }}\n                    </a>\n                    [{{ versionPost.slug }}]\n                  </p>\n                  @if (canEditPublicVersion()) {\n                    <button\n                      mat-button\n                      type=\"button\"\n                      [disabled]=\"busy() || dialogOpen()\"\n                      (click)=\"selectVersionPost('public')\">\n                      {{ t.gettext('Replace public version') }}\n                    </button>\n                    <button\n                      mat-button\n                      type=\"button\"\n                      [disabled]=\"busy() || dialogOpen()\"\n                      (click)=\"removeVersionPost('public')\">\n                      {{ t.gettext('Remove public version') }}\n                    </button>\n                  } @else {\n                    <p>\n                      {{\n                        t.gettext(\n                          'Version editing is disabled for the current post status.'\n                        )\n                      }}\n                    </p>\n                  }\n                } @else {\n                  @if (!postVersionLinksLoading() && !postVersionLinksError()) {\n                    <p>{{ t.gettext('No public post version linked.') }}</p>\n                  }\n                  @if (\n                    currentPost() &&\n                    !postVersionLinksLoading() &&\n                    !postVersionLinksError() &&\n                    !canEditPublicVersion()\n                  ) {\n                    <p>\n                      {{\n                        t.gettext(\n                          'Version editing is disabled for the current post status.'\n                        )\n                      }}\n                    </p>\n                  }\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"\n                      busy() || dialogOpen() || !canEditPublicVersion()\n                    \"\n                    (click)=\"selectVersionPost('public')\">\n                    <mat-icon>add</mat-icon>\n                    {{ t.gettext('Add public post version') }}\n                  </button>\n                }\n              </div>\n              <div class=\"post-version-link\">\n                <h3>{{ t.gettext('Private post version') }}</h3>\n                @if (postVersionLinks().privateVersionPost; as versionPost) {\n                  <p>\n                    <taon-cms-post-thumbnail [post]=\"versionPost\" />\n                    <a\n                      href=\"#\"\n                      (click)=\"requestPostEditor($event, versionPost)\">\n                      {{ versionPost.title }}\n                    </a>\n                    [{{ versionPost.slug }}]\n                  </p>\n                  @if (canEditPrivateVersion()) {\n                    <button\n                      mat-button\n                      type=\"button\"\n                      [disabled]=\"busy() || dialogOpen()\"\n                      (click)=\"selectVersionPost('private')\">\n                      {{ t.gettext('Replace private version') }}\n                    </button>\n                    <button\n                      mat-button\n                      type=\"button\"\n                      [disabled]=\"busy() || dialogOpen()\"\n                      (click)=\"removeVersionPost('private')\">\n                      {{ t.gettext('Remove private version') }}\n                    </button>\n                  } @else {\n                    <p>\n                      {{\n                        t.gettext(\n                          'Version editing is disabled for the current post status.'\n                        )\n                      }}\n                    </p>\n                  }\n                } @else {\n                  @if (!postVersionLinksLoading() && !postVersionLinksError()) {\n                    <p>{{ t.gettext('No private post version linked.') }}</p>\n                  }\n                  @if (\n                    currentPost() &&\n                    !postVersionLinksLoading() &&\n                    !postVersionLinksError() &&\n                    !canEditPrivateVersion()\n                  ) {\n                    <p>\n                      {{\n                        t.gettext(\n                          'Version editing is disabled for the current post status.'\n                        )\n                      }}\n                    </p>\n                  }\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"\n                      busy() || dialogOpen() || !canEditPrivateVersion()\n                    \"\n                    (click)=\"selectVersionPost('private')\">\n                    <mat-icon>add</mat-icon>\n                    {{ t.gettext('Add private post version') }}\n                  </button>\n                }\n              </div>\n            </section>\n          </mat-card>\n\n          @if (!mediaAttachment()) {\n            <mat-card class=\"post-setting-card\">\n              <section\n                class=\"application-hook\"\n                aria-labelledby=\"application-hook-heading\">\n                <h2 id=\"application-hook-heading\">\n                  {{ t.gettext('Hooks') }}\n                </h2>\n                @if (applicationHooksLoading()) {\n                  <p role=\"status\">\n                    {{ t.gettext('Loading application hooks...') }}\n                  </p>\n                } @else if (applicationHooksError()) {\n                  <p\n                    class=\"error\"\n                    role=\"alert\">\n                    {{ applicationHooksError() }}\n                  </p>\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (click)=\"loadApplicationHooks()\">\n                    {{ t.gettext('Try again') }}\n                  </button>\n                } @else {\n                  <mat-checkbox\n                    [checked]=\"useAsApplicationHook()\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (change)=\"setUseAsApplicationHook($event.checked)\">\n                    {{ t.gettext('Use as application hook') }}\n                  </mat-checkbox>\n                  @if (useAsApplicationHook()) {\n                    <mat-form-field\n                      appearance=\"outline\"\n                      subscriptSizing=\"dynamic\">\n                      <mat-label>{{ t.gettext('Application Hook') }}</mat-label>\n                      <mat-select\n                        [value]=\"selectedApplicationHook()\"\n                        [disabled]=\"busy() || dialogOpen()\"\n                        (selectionChange)=\"\n                          selectedApplicationHook.set($event.value)\n                        \">\n                        @for (\n                          applicationHook of applicationHooks();\n                          track applicationHook.id\n                        ) {\n                          <mat-option\n                            [value]=\"applicationHook.hook\"\n                            [disabled]=\"\n                              applicationHookInUseByAnotherPost(applicationHook)\n                            \">\n                            {{ applicationHookLabel(applicationHook.hook) }}\n                            @if (\n                              applicationHookInUseByAnotherPost(applicationHook)\n                            ) {\n                              {{\n                                t.gettext('(in use by post # [[ postId ]])', {\n                                  postId: applicationHook.contentId,\n                                })\n                              }}\n                            }\n                          </mat-option>\n                        } @empty {\n                          <mat-option [disabled]=\"true\">{{\n                            t.gettext('No application hooks configured')\n                          }}</mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  }\n                }\n              </section>\n            </mat-card>\n          }\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"post-permissions\"\n              aria-labelledby=\"post-permissions-heading\">\n              <h2 id=\"post-permissions-heading\">\n                {{ t.gettext('Permissions') }}\n              </h2>\n              @if (permissionSource(); as source) {\n                <p role=\"note\">\n                  {{\n                    t.gettext(\n                      'Permissions are inherited from # [[ postId ]] - [[ title ]]. Edit the source post to change them.',\n                      { postId: source.id, title: source.title }\n                    )\n                  }}\n                </p>\n              }\n              @if (permissionsLoading()) {\n                <p role=\"status\">\n                  {{ t.gettext('Loading assigned permissions...') }}\n                </p>\n              } @else if (permissionsError()) {\n                <p\n                  class=\"error\"\n                  role=\"alert\">\n                  {{ permissionsError() }}\n                </p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"loadPermissions()\">\n                  {{ t.gettext('Try again') }}\n                </button>\n              } @else {\n                <ul>\n                  @for (permission of permissions(); track permission.id) {\n                    <li>\n                      <span>{{ permission.name }} ({{ permission.code }})</span>\n                      <button\n                        mat-icon-button\n                        type=\"button\"\n                        [attr.aria-label]=\"\n                          t.gettext('Remove permission [[ name ]]', {\n                            name: permission.name,\n                          })\n                        \"\n                        [disabled]=\"\n                          busy() || dialogOpen() || !!permissionSource()\n                        \"\n                        (click)=\"removePermission(permission.id)\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </li>\n                  } @empty {\n                    <li>{{ t.gettext('No permissions assigned.') }}</li>\n                  }\n                </ul>\n                @if (permissionOptionsError()) {\n                  <p\n                    class=\"error\"\n                    role=\"alert\">\n                    {{ permissionOptionsError() }}\n                  </p>\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"\n                      busy() || dialogOpen() || permissionOptionsLoading()\n                    \"\n                    (click)=\"loadPermissionOptions()\">\n                    {{ t.gettext('Try again') }}\n                  </button>\n                } @else {\n                  <div class=\"permission-assignment\">\n                    <mat-form-field\n                      class=\"w-full\"\n                      appearance=\"outline\"\n                      subscriptSizing=\"dynamic\">\n                      <mat-label>{{ t.gettext('Permission') }}</mat-label>\n                      <mat-select\n                        [value]=\"selectedPermissionId()\"\n                        [disabled]=\"\n                          busy() ||\n                          dialogOpen() ||\n                          permissionOptionsLoading() ||\n                          !!permissionSource()\n                        \"\n                        (selectionChange)=\"\n                          selectedPermissionId.set($event.value)\n                        \">\n                        @for (\n                          permission of availablePermissions();\n                          track permission.id\n                        ) {\n                          <mat-option [value]=\"permission.id\"\n                            >{{ permission.name }} ({{\n                              permission.code\n                            }})</mat-option\n                          >\n                        } @empty {\n                          <mat-option [disabled]=\"true\">{{\n                            t.gettext('No permissions available')\n                          }}</mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <button\n                      mat-button\n                      type=\"button\"\n                      [disabled]=\"\n                        busy() ||\n                        dialogOpen() ||\n                        !selectedPermissionId() ||\n                        !!permissionSource()\n                      \"\n                      (click)=\"addPermission()\">\n                      <mat-icon>add</mat-icon>\n                      {{ t.gettext('Assign permission') }}\n                    </button>\n                  </div>\n                }\n              }\n              @if (!permissionSource()) {\n                <mat-checkbox\n                  [checked]=\"applyPermissionsToRelatedPosts()\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (change)=\"applyPermissionsToRelatedPosts.set($event.checked)\">\n                  {{ t.gettext('Apply permissions to related posts') }}\n                </mat-checkbox>\n              }\n            </section>\n          </mat-card>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  } @else if (currentPost(); as post) {\n    @if (thumbnailPreviewUrl()) {\n      <img\n        class=\"thumbnail-preview\"\n        [src]=\"thumbnailPreviewUrl()\"\n        [alt]=\"t.gettext('Post thumbnail')\" />\n    }\n    @if (thumbnailError()) {\n      <p role=\"alert\">{{ thumbnailError() }}</p>\n    }\n    <h1 class=\"post-title\">{{ post.title }}</h1>\n    @if (post.excerpt) {\n      <p class=\"post-excerpt\">{{ post.excerpt }}</p>\n    }\n    @if (post.type === contentType.JsonTable) {\n      <taon-spreadsheet-table\n        [data]=\"jsonTableData()\"\n        [validationError]=\"jsonTableValidationError()\"\n        [readOnly]=\"true\" />\n    } @else {\n      <div\n        class=\"post-body\"\n        [innerHTML]=\"resolvedBody()\"></div>\n    }\n    @if (mediaAttachment(); as media) {\n      @if (draft()[media.key]; as key) {\n        @if (mediaPreviewLoading()) {\n          <p role=\"status\">{{ t.gettext('Loading media...') }}</p>\n        } @else if (mediaPreviewError()) {\n          <p\n            class=\"error\"\n            role=\"alert\">\n            {{ mediaPreviewError() }}\n          </p>\n        } @else if (media.type === 'video' && mediaPreviewUrl()) {\n          <video\n            controls\n            preload=\"metadata\"\n            [attr.controlsList]=\"\n              currentPost()?.status === 'archived' ||\n              currentPost()?.status === 'draft'\n                ? 'nodownload noremoteplayback'\n                : null\n            \"\n            [poster]=\"thumbnailPreviewUrl() || null\"\n            [src]=\"mediaPreviewUrl()\">\n            {{ t.gettext('Your browser does not support video playback.') }}\n          </video>\n        } @else if (media.type === 'audio' && mediaPreviewUrl()) {\n          <audio\n            controls\n            preload=\"metadata\"\n            [attr.controlsList]=\"\n              currentPost()?.status === 'archived' ||\n              currentPost()?.status === 'draft'\n                ? 'nodownload noremoteplayback'\n                : null\n            \"\n            [src]=\"mediaPreviewUrl()\">\n            {{ t.gettext('Your browser does not support audio playback.') }}\n          </audio>\n        } @else if (media.type === 'attachment' && mediaPreviewUrl()) {\n          <p>\n            {{\n              t.gettext('Attached file: [[ fileName ]]', {\n                fileName: mediaFileName(key),\n              })\n            }}\n            <a\n              [href]=\"mediaPreviewUrl()\"\n              target=\"_blank\"\n              rel=\"noopener\"\n              >{{ t.gettext('Download or open') }}</a\n            >\n          </p>\n        }\n      }\n    }\n    @if (mode() === 'view-clean') {\n      <taon-cms-comments\n        [contentId]=\"post.id\"\n        class=\"w-full\" />\n    }\n  } @else {\n    <p role=\"status\">{{ t.gettext('No post is loaded.') }}</p>\n  }\n</article>\n", styles: [":host{display:block}:host ::ng-deep .NgxEditor .ProseMirror table{width:100%;border-collapse:collapse;table-layout:fixed;margin:12px 0}:host ::ng-deep .NgxEditor .ProseMirror td,:host ::ng-deep .NgxEditor .ProseMirror th{position:relative;min-width:60px;border:1px solid #aaa;padding:8px;vertical-align:top}:host ::ng-deep .NgxEditor .ProseMirror td>p,:host ::ng-deep .NgxEditor .ProseMirror th>p{margin:0}:host ::ng-deep .NgxEditor .ProseMirror .selectedCell{background:#3f51b51f}mat-expansion-panel{border-radius:0!important}.post-actions{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;padding:1rem;border-bottom:1px solid rgba(136,136,136,.2)}.post-status{margin-right:auto;text-transform:capitalize;opacity:.7}.buttons{display:flex;flex-wrap:wrap;gap:.5rem}.post-article{max-width:760px;margin:0 auto;padding:clamp(1.5rem,5vw,4rem) 1.5rem;overflow-wrap:anywhere}.post-settings{display:grid;gap:1rem;margin-top:1rem}.post-setting-card{display:block;padding:20px}.post-title{margin:0 0 1.5rem;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.15;letter-spacing:-.03em}.post-excerpt{margin:0 0 2rem;font-size:1.35rem;line-height:1.6;opacity:.7;white-space:pre-wrap}.post-body{font-family:Georgia,Times New Roman,serif;font-size:1.2rem;line-height:1.8;white-space:pre-wrap}.editable{min-height:1.2em;outline:none}.editable:focus{box-shadow:-3px 0 #8885}.editable:empty:before{content:attr(data-placeholder);opacity:.4;pointer-events:none}.post-content-editor{border:1px solid rgba(136,136,136,.3333333333);border-radius:4px;overflow:hidden}.raw-content{display:block;box-sizing:border-box;width:100%;min-height:20rem;padding:1rem;resize:vertical;border:0;color:inherit;background:transparent;font-family:monospace}ngx-editor{display:block;min-height:20rem}.content-preview{min-height:12rem;padding:1rem}.slug-field{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:3rem;padding-top:1rem;border-top:1px solid rgba(136,136,136,.2);font-size:.875rem}.slug-field input{flex:1;min-width:160px;padding:.5rem;color:inherit;background:transparent;border:1px solid rgba(136,136,136,.3333333333);border-radius:4px}.error{padding:1rem;color:#b3261e}.post-type-selector{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.post-type-accordion{display:block;margin-bottom:1rem}.post-type-accordion mat-panel-title{align-items:center;gap:.5rem}.media-attachment,.post-thumbnail,.post-taxonomy,.parent-post,.related-posts,.post-version-links,.application-hook,.post-permissions{margin-top:1.5rem;font-size:.875rem}.media-attachment h2,.post-thumbnail h2,.post-taxonomy h2,.parent-post h2,.related-posts h2,.post-version-links h2,.application-hook h2,.post-permissions h2{font-size:1rem}.media-attachment .thumbnail-preview,.post-thumbnail .thumbnail-preview,.post-taxonomy .thumbnail-preview,.parent-post .thumbnail-preview,.related-posts .thumbnail-preview,.post-version-links .thumbnail-preview,.application-hook .thumbnail-preview,.post-permissions .thumbnail-preview{display:block;width:min(100%,480px);max-height:320px;object-fit:contain;border-radius:12px;margin-bottom:.75rem}.media-attachment .post-taxonomy mat-form-field,.post-thumbnail .post-taxonomy mat-form-field,.post-taxonomy .post-taxonomy mat-form-field,.parent-post .post-taxonomy mat-form-field,.related-posts .post-taxonomy mat-form-field,.post-version-links .post-taxonomy mat-form-field,.application-hook .post-taxonomy mat-form-field,.post-permissions .post-taxonomy mat-form-field{display:block;margin-top:.75rem}.related-posts ul,.related-child-files ul,.post-permissions ul{padding:0;list-style:none}.related-posts mat-form-field,.related-child-files mat-form-field,.post-permissions mat-form-field{display:block;width:min(100%,28rem);margin-top:.75rem}.related-posts .application-hook,.related-child-files .application-hook,.post-permissions .application-hook{display:grid;align-items:start;gap:.75rem}.related-posts .application-hook mat-form-field,.related-child-files .application-hook mat-form-field,.post-permissions .application-hook mat-form-field{width:min(100%,28rem)}.related-posts li,.related-child-files li,.post-permissions li{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.related-child-files{margin-top:1.5rem;font-size:.875rem}.related-child-files li{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem 0;border-bottom:1px solid rgba(136,136,136,.2)}.related-post-title{flex:1}[cdkDragHandle]{cursor:grab}.related-child-file{flex:1;min-width:0}.related-child-file-heading,.related-child-file-progress,.related-child-progress{display:flex;align-items:center;gap:.75rem}.related-child-file-heading{justify-content:space-between;overflow-wrap:anywhere}.related-child-file-progress{margin-top:.5rem}.related-child-file-progress mat-progress-bar{flex:1}.related-child-progress{margin:.75rem 0}.related-child-progress mat-progress-bar{flex:1}.post-version-link{margin-top:1rem;padding-top:.75rem;border-top:1px solid rgba(136,136,136,.2)}.post-version-link h3{font-size:.95rem}video{max-width:100%;max-height:400px!important}.required-slugs-field{width:100%;margin-top:1rem}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i4$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i4$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i10.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i10.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i11.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i11.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i12.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i15.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: TaonCmsEditableDirective, selector: "[taonCmsEditable]", inputs: ["taonCmsEditableFormat", "taonCmsEditableSingleLine", "taonCmsEditable"], outputs: ["taonCmsEditableChange"] }, { kind: "component", type: TaonCmsCommentsComponent, selector: "taon-cms-comments", inputs: ["contentId"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i16.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i17.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: i17.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: i17.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: TaonCmsPostThumbnailComponent, selector: "taon-cms-post-thumbnail", inputs: ["post"] }, { kind: "component", type: TaonSpreadsheetTableComponent, selector: "taon-spreadsheet-table", inputs: ["data", "readOnly", "disabled", "validationError"], outputs: ["dataChange", "validationErrorChange"] }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TaonCmsPostComponent, decorators: [{
             type: Component,
@@ -10635,13 +11924,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         MatDividerModule,
                         DragDropModule,
                         TaonCmsPostThumbnailComponent,
+                        TaonSpreadsheetTableComponent,
+                        JsonPipe,
                     ], providers: [
                         TaonCmsContentApiService,
                         TaonCmsContentConfigService,
                         TaonPermissionApiService,
                         TaonCmsCategoryApiService,
                         TaonCmsTagApiService,
-                    ], template: "@if (mode() !== 'view-clean') {\n  <ng-template #actionButtonsTemplate>\n    <div class=\"buttons\">\n      @if (editing()) {\n        <button\n          mat-flat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen() || !canSave()\"\n          (click)=\"save()\">\n          {{ mode() === 'add' ? t.gettext('Add') : t.gettext('Save') }}\n        </button>\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen()\"\n          (click)=\"cancel()\">\n          {{ t.gettext('Cancel') }}\n        </button>\n      } @else if (currentPost()) {\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen()\"\n          (click)=\"edit()\">\n          <mat-icon>edit</mat-icon> {{ t.gettext('Edit') }}\n        </button>\n      }\n      @if (mode() !== 'add' && currentPost()) {\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen()\"\n          (click)=\"revert()\">\n          <mat-icon>history</mat-icon> {{ t.gettext('Revert') }}\n        </button>\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen()\"\n          (click)=\"delete()\">\n          <mat-icon>delete</mat-icon> {{ t.gettext('Delete') }}\n        </button>\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen()\"\n          (click)=\"duplicate()\">\n          <mat-icon>content_copy</mat-icon> {{ t.gettext('Duplicate') }}\n        </button>\n      }\n    </div>\n  </ng-template>\n  <header class=\"post-actions\">\n    @if (visibilitySource(); as source) {\n      <span\n        class=\"post-status\"\n        tabindex=\"0\"\n        [matTooltip]=\"visibilityInheritedTooltip()\"\n        [attr.aria-label]=\"visibilityInheritedTooltip()\">\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"true\">\n          {{ statusLabel() }}\n        </button>\n      </span>\n    } @else {\n      <button\n        class=\"post-status\"\n        mat-button\n        type=\"button\"\n        [disabled]=\"statusControlDisabled()\"\n        (click)=\"selectStatus()\">\n        {{ statusLabel() }}\n      </button>\n    }\n    <ng-container [ngTemplateOutlet]=\"actionButtonsTemplate\" />\n    @if (busy()) {\n      <span role=\"status\">{{\n        uploading()\n          ? t.gettext('Uploading... ') + uploadProgress() + '%'\n          : t.gettext('Saving...')\n      }}</span>\n    }\n  </header>\n  @if (error()) {\n    <p\n      class=\"error\"\n      role=\"alert\">\n      {{ error() }}\n    </p>\n  }\n}\n\n<article\n  class=\"post-article\"\n  [attr.aria-busy]=\"busy()\">\n  @if (editing()) {\n    <mat-tab-group animationDuration=\"0ms\">\n      <mat-tab [label]=\"t.gettext('CONTENT')\">\n        <mat-accordion class=\"post-type-accordion\">\n          <mat-expansion-panel #postTypePanel>\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <mat-icon>{{ currentPostTypeIcon() }}</mat-icon>\n                {{\n                  t.gettext('Current post type: [[ postType ]]', {\n                    postType: currentPostType().label,\n                  })\n                }}\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            <mat-radio-group\n              class=\"post-type-selector\"\n              [attr.aria-label]=\"t.gettext('Post type')\"\n              [value]=\"draft().type\"\n              [disabled]=\"busy() || dialogOpen()\"\n              (change)=\"updateDraft('type', $event.value)\">\n              @for (type of postTypes; track type.value) {\n                <mat-radio-button\n                  [value]=\"type.value\"\n                  (click)=\"postTypePanel.close()\"\n                  >{{ type.label }}</mat-radio-button\n                >\n              }\n            </mat-radio-group>\n          </mat-expansion-panel>\n        </mat-accordion>\n        <div\n          class=\"post-title editable\"\n          contenteditable=\"true\"\n          role=\"textbox\"\n          [attr.aria-label]=\"t.gettext('Post title')\"\n          aria-required=\"true\"\n          [attr.data-placeholder]=\"placeholderTitle()\"\n          [attr.contenteditable]=\"!busy() && !dialogOpen()\"\n          [taonCmsEditableSingleLine]=\"true\"\n          [taonCmsEditable]=\"draft().title\"\n          (taonCmsEditableChange)=\"updateDraft('title', $event)\"></div>\n        @if (subtitleEmpty()) {\n          <button\n            mat-button\n            type=\"button\"\n            [disabled]=\"busy() || dialogOpen()\"\n            (click)=\"generateLoremIpsum('excerpt')\">\n            {{ t.gettext('Generate Lorem Ipsum') }}\n          </button>\n        }\n        <div\n          class=\"post-excerpt editable\"\n          contenteditable=\"true\"\n          role=\"textbox\"\n          [attr.aria-label]=\"t.gettext('Post excerpt')\"\n          aria-multiline=\"true\"\n          [attr.data-placeholder]=\"placeholderShortIntro()\"\n          [attr.contenteditable]=\"!busy() && !dialogOpen()\"\n          [taonCmsEditable]=\"draft().excerpt\"\n          (taonCmsEditableChange)=\"updateDraft('excerpt', $event)\"></div>\n        @if (descriptionEmpty()) {\n          <button\n            mat-button\n            type=\"button\"\n            [disabled]=\"busy() || dialogOpen()\"\n            (click)=\"generateLoremIpsum('body')\">\n            {{ t.gettext('Generate Lorem Ipsum') }}\n          </button>\n        }\n        <section class=\"post-content-editor\">\n          <mat-tab-group\n            [selectedIndex]=\"contentTab()\"\n            (selectedIndexChange)=\"setContentTab($event)\"\n            [preserveContent]=\"true\"\n            animationDuration=\"0ms\">\n            <mat-tab [label]=\"t.gettext('Editor')\">\n              @if (contentEditor(); as editor) {\n                <ng-template #customMenu>\n                  <button\n                    type=\"button\"\n                    class=\"NgxEditor__MenuItem\"\n                    title=\"Table\"\n                    aria-label=\"Table actions\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    [matMenuTriggerFor]=\"tableMenu\"\n                    [matMenuTriggerRestoreFocus]=\"false\"\n                    (mousedown)=\"$event.preventDefault()\">\n                    <mat-icon>table_chart</mat-icon>\n                  </button>\n\n                  <mat-menu #tableMenu=\"matMenu\">\n                    <button\n                      mat-menu-item\n                      type=\"button\"\n                      (click)=\"insertTable($event)\">\n                      <mat-icon>add</mat-icon>\n                      <span>Insert table</span>\n                    </button>\n\n                    <mat-divider />\n\n                    @for (item of tableCommands; track item.label) {\n                      <button\n                        mat-menu-item\n                        type=\"button\"\n                        [disabled]=\"!canRunTableCommand(item.command)\"\n                        (click)=\"runTableCommand($event, item.command)\">\n                        {{ item.label }}\n                      </button>\n                    }\n                  </mat-menu>\n                </ng-template>\n\n                <ngx-editor-menu\n                  [editor]=\"editor\"\n                  [customMenuRef]=\"customMenu\"\n                  [toolbar]=\"contentToolbar\"\n                  [disabled]=\"busy() || dialogOpen()\" />\n                <ngx-editor\n                  [editor]=\"editor\"\n                  [placeholder]=\"placeholderTellYourStory()\" />\n              }\n            </mat-tab>\n            <mat-tab [label]=\"t.gettext('Raw')\">\n              <textarea\n                #rawContent\n                class=\"raw-content\"\n                [attr.aria-label]=\"t.gettext('Post body HTML')\"\n                [value]=\"draft().body\"\n                [disabled]=\"busy() || dialogOpen()\"\n                (input)=\"updateRawContent($event)\"\n                spellcheck=\"false\"></textarea>\n            </mat-tab>\n            <mat-tab [label]=\"t.gettext('Preview')\">\n              <div\n                class=\"post-body content-preview\"\n                [innerHTML]=\"resolvedBody()\"></div>\n            </mat-tab>\n          </mat-tab-group>\n          @if (contentTab() !== 2) {\n            <button\n              mat-button\n              type=\"button\"\n              [disabled]=\"busy() || dialogOpen() || !contentEditor()\"\n              [matMenuTriggerFor]=\"variableMenu\"\n              [matMenuTriggerRestoreFocus]=\"false\">\n              {{ t.gettext('Insert variable') }}\n            </button>\n          }\n          <mat-menu #variableMenu=\"matMenu\">\n            <button\n              mat-menu-item\n              [matMenuTriggerFor]=\"siteVariableMenu\">\n              {{ t.gettext('Site') }}\n            </button>\n            <button\n              mat-menu-item\n              [matMenuTriggerFor]=\"postVariableMenu\">\n              {{ t.gettext('Post') }}\n            </button>\n          </mat-menu>\n          <mat-menu #siteVariableMenu=\"matMenu\">\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('frontendUrl')\">\n              {{ t.gettext('Frontend URL') }}\n            </button>\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('site.name')\">\n              {{ t.gettext('Site name') }}\n            </button>\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('currentYear')\">\n              {{ t.gettext('Current year') }}\n            </button>\n          </mat-menu>\n          <mat-menu #postVariableMenu=\"matMenu\">\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('post.title')\">\n              {{ t.gettext('Post title') }}\n            </button>\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('post.url')\">\n              {{ t.gettext('Post URL') }}\n            </button>\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('post.id')\">\n              {{ t.gettext('Post ID') }}\n            </button>\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('post.thumbnailUrl')\">\n              {{ t.gettext('Post Thumbnail URL') }}\n            </button>\n          </mat-menu>\n        </section>\n        <label class=\"slug-field\">\n          <span>{{ t.gettext('URL slug') }}</span>\n          <input\n            [attr.aria-label]=\"t.gettext('URL slug')\"\n            [value]=\"draft().slug\"\n            [disabled]=\"busy() || dialogOpen()\"\n            (input)=\"updateSlug($event)\"\n            [placeholder]=\"t.gettext('my-post')\" />\n        </label>\n      </mat-tab>\n      <mat-tab [label]=\"t.gettext('SETTINGS')\">\n        <div class=\"post-settings\">\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"related-child-files\"\n              aria-labelledby=\"related-child-files-heading\">\n              <h2 id=\"related-child-files-heading\">\n                {{ t.gettext('Create related children from files') }}\n              </h2>\n              @if (!currentPost()) {\n                <p role=\"note\">\n                  {{\n                    t.gettext(\n                      'Please save the post before creating children.'\n                    )\n                  }}\n                </p>\n              }\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ t.gettext('Child title prefix') }}</mat-label>\n                <input\n                  matInput\n                  [value]=\"childTitlePrefix()\"\n                  [disabled]=\"!currentPost() || busy() || dialogOpen()\"\n                  (input)=\"updateChildTitlePrefix($event)\" />\n              </mat-form-field>\n              <input\n                #relatedChildFilesInput\n                hidden\n                type=\"file\"\n                multiple\n                [disabled]=\"!currentPost() || busy() || dialogOpen()\"\n                (change)=\"relatedChildFilesSelected($event)\" />\n              <button\n                mat-button\n                type=\"button\"\n                [disabled]=\"!currentPost() || busy() || dialogOpen()\"\n                (click)=\"relatedChildFilesInput.click()\">\n                <mat-icon>add</mat-icon>\n                {{ t.gettext('Choose files') }}\n              </button>\n              @if (childBatchError()) {\n                <p\n                  class=\"error\"\n                  role=\"alert\">\n                  {{ childBatchError() }}\n                </p>\n              }\n              @if (childFiles().length) {\n                <div class=\"related-child-progress\">\n                  <mat-progress-bar\n                    mode=\"determinate\"\n                    [value]=\"childOverallProgress()\"\n                    [attr.aria-label]=\"\n                      t.gettext('Overall child creation progress')\n                    \" />\n                  <span>\n                    {{ childOverallProgress() }}%\n                    {{ t.gettext('overall progress') }}\n                  </span>\n                </div>\n                <ul>\n                  @for (file of childFiles(); track file.id; let index =\n                  $index) {\n                    <li>\n                      <div class=\"related-child-file\">\n                        <div class=\"related-child-file-heading\">\n                          <span>{{ file.file.name }}</span>\n                          <span>{{ childTitlePreviews()[index] }}</span>\n                        </div>\n                        <div class=\"related-child-file-progress\">\n                          <mat-progress-bar\n                            mode=\"determinate\"\n                            [value]=\"file.progress\"\n                            [attr.aria-label]=\"\n                              t.gettext('Progress for [[ fileName ]]', {\n                                fileName: file.file.name,\n                              })\n                            \" />\n                          <span>{{ file.progress }}%</span>\n                        </div>\n                        @if (file.status === 'processing') {\n                          <p role=\"status\">{{ t.gettext('Processing...') }}</p>\n                        } @else if (file.status === 'success') {\n                          <p role=\"status\">{{ t.gettext('Child created.') }}</p>\n                          @if (file.error) {\n                            <p\n                              class=\"error\"\n                              role=\"alert\">\n                              {{ file.error }}\n                            </p>\n                          }\n                        } @else if (file.status === 'error') {\n                          <p\n                            class=\"error\"\n                            role=\"alert\">\n                            {{ file.error }}\n                          </p>\n                        } @else {\n                          <p>{{ t.gettext('Waiting to upload.') }}</p>\n                        }\n                      </div>\n                      <button\n                        mat-icon-button\n                        type=\"button\"\n                        [attr.aria-label]=\"\n                          t.gettext('Remove file [[ fileName ]]', {\n                            fileName: file.file.name,\n                          })\n                        \"\n                        [disabled]=\"!currentPost() || busy() || dialogOpen()\"\n                        (click)=\"removeRelatedChildFile(file.id)\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </li>\n                  }\n                </ul>\n              }\n              <button\n                mat-flat-button\n                type=\"button\"\n                [disabled]=\"!canUploadRelatedChildren()\"\n                (click)=\"uploadAndCreateChildren()\">\n                {{ t.gettext('Upload and Create Children') }}\n              </button>\n            </section>\n          </mat-card>\n          @if (mediaAttachment(); as media) {\n            <mat-card class=\"post-setting-card\">\n              <section\n                class=\"media-attachment\"\n                aria-labelledby=\"media-attachment-heading\">\n                <h2 id=\"media-attachment-heading\">{{ media.heading }}</h2>\n                @if (uploading()) {\n                  <mat-progress-bar\n                    mode=\"determinate\"\n                    [value]=\"uploadProgress()\"\n                    [attr.aria-label]=\"t.gettext('Media upload progress')\" />\n                }\n                @if (draft()[media.key]; as key) {\n                  @if (mediaPreviewLoading()) {\n                    <p role=\"status\">\n                      {{ t.gettext('Loading media preview...') }}\n                    </p>\n                  }\n                  @if (mediaPreviewError()) {\n                    <p\n                      class=\"error\"\n                      role=\"alert\">\n                      {{ mediaPreviewError() }}\n                    </p>\n                  }\n                  @if (media.type === 'video' && mediaPreviewUrl()) {\n                    <video\n                      controls\n                      preload=\"metadata\"\n                      [src]=\"mediaPreviewUrl()\">\n                      {{\n                        t.gettext(\n                          'Your browser does not support video playback.'\n                        )\n                      }}\n                    </video>\n                  } @else if (media.type === 'audio' && mediaPreviewUrl()) {\n                    <audio\n                      controls\n                      preload=\"metadata\"\n                      [src]=\"mediaPreviewUrl()\">\n                      {{\n                        t.gettext(\n                          'Your browser does not support audio playback.'\n                        )\n                      }}\n                    </audio>\n                  } @else if (\n                    media.type === 'attachment' && mediaPreviewUrl()\n                  ) {\n                    <p>\n                      {{\n                        t.gettext('Attached file: [[ fileName ]]', {\n                          fileName: mediaFileName(key),\n                        })\n                      }}\n                      <a\n                        [href]=\"mediaPreviewUrl()\"\n                        target=\"_blank\"\n                        rel=\"noopener\"\n                        >{{ t.gettext('Download or open') }}</a\n                      >\n                    </p>\n                  }\n                  <input\n                    #mediaInput\n                    hidden\n                    type=\"file\"\n                    [accept]=\"media.accept\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (change)=\"fileSelected($event)\" />\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (click)=\"mediaInput.click()\">\n                    {{ t.gettext('Replace') }}\n                  </button>\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (click)=\"removeMedia()\">\n                    {{ t.gettext('Remove') }}\n                  </button>\n                } @else {\n                  <input\n                    #mediaInput\n                    hidden\n                    type=\"file\"\n                    [accept]=\"media.accept\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (change)=\"fileSelected($event)\" />\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (click)=\"mediaInput.click()\">\n                    {{ media.uploadLabel }}\n                  </button>\n                }\n              </section>\n            </mat-card>\n          }\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"post-thumbnail\"\n              aria-labelledby=\"thumbnail-heading\">\n              <h2 id=\"thumbnail-heading\">{{ t.gettext('Thumbnail') }}</h2>\n              @if (thumbnailPreviewUrl()) {\n                <img\n                  class=\"thumbnail-preview\"\n                  [src]=\"thumbnailPreviewUrl()\"\n                  [alt]=\"t.gettext('Post thumbnail')\" />\n              } @else {\n                <p>{{ t.gettext('No thumbnail selected.') }}</p>\n              }\n              @if (thumbnailError()) {\n                <p role=\"alert\">{{ thumbnailError() }}</p>\n              }\n              <input\n                #thumbnailInput\n                hidden\n                type=\"file\"\n                accept=\"image/*\"\n                [disabled]=\"busy() || dialogOpen()\"\n                (change)=\"thumbnailSelected($event)\" />\n              <div class=\"buttons\">\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"thumbnailInput.click()\">\n                  {{ t.gettext('Upload Thumbnail') }}\n                </button>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"applyDefaultThumbnail()\">\n                  {{ t.gettext('Apply Default Placeholder') }}\n                </button>\n              </div>\n            </section>\n          </mat-card>\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"post-taxonomy\"\n              aria-labelledby=\"category-heading\">\n              <h2 id=\"category-heading\">{{ t.gettext('Category / Tags') }}</h2>\n              @if (taxonomyLoading()) {\n                <p role=\"status\">\n                  {{ t.gettext('Loading categories and tags...') }}\n                </p>\n              }\n              @if (taxonomyError()) {\n                <p role=\"alert\">{{ taxonomyError() }}</p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy()\"\n                  (click)=\"loadTaxonomy()\">\n                  {{ t.gettext('Try again') }}\n                </button>\n              }\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ t.gettext('Category') }}</mat-label>\n                <mat-select\n                  [value]=\"draft().categoryId\"\n                  [disabled]=\"\n                    busy() ||\n                    dialogOpen() ||\n                    taxonomyLoading() ||\n                    !!taxonomyError()\n                  \"\n                  (selectionChange)=\"updateDraft('categoryId', $event.value)\">\n                  <mat-option [value]=\"null\">{{\n                    t.gettext('None')\n                  }}</mat-option>\n                  @for (category of categories(); track category.id) {\n                    <mat-option [value]=\"category.id\">{{\n                      category.name\n                    }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <h3>{{ t.gettext('Tags') }}</h3>\n              <mat-chip-set [attr.aria-label]=\"t.gettext('Selected tags')\">\n                @for (tag of selectedTags(); track tag.id) {\n                  <mat-chip\n                    [disabled]=\"busy() || dialogOpen() || taxonomyLoading()\"\n                    (removed)=\"removeTag(tag.id)\">\n                    {{ tag.name }}\n                    <button\n                      matChipRemove\n                      type=\"button\"\n                      [disabled]=\"busy() || dialogOpen() || taxonomyLoading()\"\n                      [attr.aria-label]=\"\n                        t.gettext('Remove tag [[ name ]]', { name: tag.name })\n                      \">\n                      <mat-icon>cancel</mat-icon>\n                    </button>\n                  </mat-chip>\n                }\n              </mat-chip-set>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ t.gettext('Search tags') }}</mat-label>\n                <input\n                  matInput\n                  [value]=\"tagSearch()\"\n                  (input)=\"filterTags($event)\"\n                  [disabled]=\"busy() || dialogOpen() || taxonomyLoading()\" />\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ t.gettext('Add tag') }}</mat-label>\n                <mat-select\n                  [value]=\"null\"\n                  [disabled]=\"\n                    busy() ||\n                    dialogOpen() ||\n                    taxonomyLoading() ||\n                    !!taxonomyError()\n                  \"\n                  (selectionChange)=\"addTag($event.value)\">\n                  @for (tag of filteredTags(); track tag.id) {\n                    <mat-option [value]=\"tag.id\">{{ tag.name }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <div class=\"buttons\">\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen() || taxonomyLoading()\"\n                  (click)=\"createTaxonomy('category')\">\n                  <mat-icon>add</mat-icon> {{ t.gettext('Add category') }}\n                </button>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen() || taxonomyLoading()\"\n                  (click)=\"createTaxonomy('tag')\">\n                  <mat-icon>add</mat-icon> {{ t.gettext('Add tag') }}\n                </button>\n              </div>\n            </section>\n          </mat-card>\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"parent-post\"\n              aria-labelledby=\"parent-post-heading\">\n              <h2 id=\"parent-post-heading\">{{ t.gettext('Parent Post') }}</h2>\n              @if (parentPostLoading()) {\n                <p role=\"status\">{{ t.gettext('Loading parent post...') }}</p>\n              } @else if (parentPostError()) {\n                <p\n                  class=\"error\"\n                  role=\"alert\">\n                  {{ parentPostError() }}\n                </p>\n              } @else if (parentPost(); as parent) {\n                <p>\n                  <taon-cms-post-thumbnail [post]=\"parent\" />\n                  <a\n                    href=\"#\"\n                    (click)=\"requestPostEditor($event, parent)\">\n                    {{ parent.title }}\n                  </a>\n                </p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"removeParentPost()\">\n                  <mat-icon>link_off</mat-icon>\n                  {{ t.gettext('Remove from parent') }}\n                </button>\n              } @else {\n                <p>{{ t.gettext('No parent added') }}</p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen() || !currentPost()\"\n                  (click)=\"addAsChildOf()\">\n                  <mat-icon>account_tree</mat-icon>\n                  @if (currentPost()) {\n                    {{ t.gettext('Add as a child') }}\n                  } @else {\n                    {{\n                      t.gettext(\n                        'Add as a child (disabled \u2014 please save the post first)'\n                      )\n                    }}\n                  }\n                </button>\n              }\n            </section>\n          </mat-card>\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"related-posts\"\n              aria-labelledby=\"related-posts-heading\">\n              <h2 id=\"related-posts-heading\">\n                {{ t.gettext('Related posts') }}\n              </h2>\n              @if (relatedPostsLoading()) {\n                <p role=\"status\">{{ t.gettext('Loading related posts...') }}</p>\n              } @else if (relatedPostsError()) {\n                <p\n                  class=\"error\"\n                  role=\"alert\">\n                  {{ relatedPostsError() }}\n                </p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"loadRelatedPosts()\">\n                  {{ t.gettext('Try again') }}\n                </button>\n              } @else {\n                <ul\n                  cdkDropList\n                  [cdkDropListData]=\"relatedPosts()\"\n                  [cdkDropListDisabled]=\"busy() || dialogOpen()\"\n                  (cdkDropListDropped)=\"reorderRelatedPosts($event)\">\n                  @for (post of relatedPosts(); track post.id) {\n                    <li cdkDrag [cdkDragData]=\"post\">\n                      <button\n                        mat-icon-button\n                        cdkDragHandle\n                        type=\"button\"\n                        [disabled]=\"busy() || dialogOpen()\"\n                        [attr.aria-label]=\"\n                          t.gettext('Reorder related post [[ title ]]', {\n                            title: post.title,\n                          })\n                        \">\n                        <mat-icon>drag_indicator</mat-icon>\n                      </button>\n                      <taon-cms-post-thumbnail [post]=\"post\" />\n                      <span class=\"related-post-title\">\n                        #{{ post.id }} -\n                        <a\n                          href=\"#\"\n                          (click)=\"requestPostEditor($event, post)\">\n                          {{ post.title }}\n                        </a>\n                      </span>\n                      <button\n                        mat-icon-button\n                        type=\"button\"\n                        [attr.aria-label]=\"\n                          t.gettext('Remove related post [[ title ]]', {\n                            title: post.title,\n                          })\n                        \"\n                        [disabled]=\"busy() || dialogOpen()\"\n                        (click)=\"removeRelatedPost(post.id)\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </li>\n                  } @empty {\n                    <li>{{ t.gettext('No related posts yet.') }}</li>\n                  }\n                </ul>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"addRelatedPost()\">\n                  <mat-icon>add</mat-icon> {{ t.gettext('Add related post') }}\n                </button>\n              }\n              <mat-checkbox\n                [checked]=\"applyVisibilityToRelatedPosts()\"\n                [disabled]=\"busy() || dialogOpen()\"\n                (change)=\"applyVisibilityToRelatedPosts.set($event.checked)\">\n                {{ t.gettext('Apply visibility to related posts') }}\n              </mat-checkbox>\n            </section>\n          </mat-card>\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"post-version-links\"\n              aria-labelledby=\"post-version-links-heading\">\n              <h2 id=\"post-version-links-heading\">\n                {{ t.gettext('Post versions') }}\n              </h2>\n              @if (!currentPost()) {\n                <p role=\"note\">\n                  {{\n                    t.gettext('Save the post first to manage version links.')\n                  }}\n                </p>\n              }\n              @if (postVersionLinksLoading()) {\n                <p role=\"status\">{{ t.gettext('Loading post versions...') }}</p>\n              }\n              @if (postVersionLinksError()) {\n                <p\n                  class=\"error\"\n                  role=\"alert\">\n                  {{ postVersionLinksError() }}\n                </p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"loadPostVersionLinks(currentPost())\">\n                  {{ t.gettext('Try again') }}\n                </button>\n              }\n              <div class=\"post-version-link\">\n                <h3>{{ t.gettext('Public post version') }}</h3>\n                @if (postVersionLinks().publicVersionPost; as versionPost) {\n                  <p>\n                    <taon-cms-post-thumbnail [post]=\"versionPost\" />\n                    <a\n                      href=\"#\"\n                      (click)=\"requestPostEditor($event, versionPost)\">\n                      {{ versionPost.title }}\n                    </a>\n                    [{{ versionPost.slug }}]\n                  </p>\n                  @if (canEditPublicVersion()) {\n                    <button\n                      mat-button\n                      type=\"button\"\n                      [disabled]=\"busy() || dialogOpen()\"\n                      (click)=\"selectVersionPost('public')\">\n                      {{ t.gettext('Replace public version') }}\n                    </button>\n                    <button\n                      mat-button\n                      type=\"button\"\n                      [disabled]=\"busy() || dialogOpen()\"\n                      (click)=\"removeVersionPost('public')\">\n                      {{ t.gettext('Remove public version') }}\n                    </button>\n                  } @else {\n                    <p>\n                      {{\n                        t.gettext(\n                          'Version editing is disabled for the current post status.'\n                        )\n                      }}\n                    </p>\n                  }\n                } @else {\n                  @if (!postVersionLinksLoading() && !postVersionLinksError()) {\n                    <p>{{ t.gettext('No public post version linked.') }}</p>\n                  }\n                  @if (\n                    currentPost() &&\n                    !postVersionLinksLoading() &&\n                    !postVersionLinksError() &&\n                    !canEditPublicVersion()\n                  ) {\n                    <p>\n                      {{\n                        t.gettext(\n                          'Version editing is disabled for the current post status.'\n                        )\n                      }}\n                    </p>\n                  }\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"\n                      busy() || dialogOpen() || !canEditPublicVersion()\n                    \"\n                    (click)=\"selectVersionPost('public')\">\n                    <mat-icon>add</mat-icon>\n                    {{ t.gettext('Add public post version') }}\n                  </button>\n                }\n              </div>\n              <div class=\"post-version-link\">\n                <h3>{{ t.gettext('Private post version') }}</h3>\n                @if (postVersionLinks().privateVersionPost; as versionPost) {\n                  <p>\n                    <taon-cms-post-thumbnail [post]=\"versionPost\" />\n                    <a\n                      href=\"#\"\n                      (click)=\"requestPostEditor($event, versionPost)\">\n                      {{ versionPost.title }}\n                    </a>\n                    [{{ versionPost.slug }}]\n                  </p>\n                  @if (canEditPrivateVersion()) {\n                    <button\n                      mat-button\n                      type=\"button\"\n                      [disabled]=\"busy() || dialogOpen()\"\n                      (click)=\"selectVersionPost('private')\">\n                      {{ t.gettext('Replace private version') }}\n                    </button>\n                    <button\n                      mat-button\n                      type=\"button\"\n                      [disabled]=\"busy() || dialogOpen()\"\n                      (click)=\"removeVersionPost('private')\">\n                      {{ t.gettext('Remove private version') }}\n                    </button>\n                  } @else {\n                    <p>\n                      {{\n                        t.gettext(\n                          'Version editing is disabled for the current post status.'\n                        )\n                      }}\n                    </p>\n                  }\n                } @else {\n                  @if (!postVersionLinksLoading() && !postVersionLinksError()) {\n                    <p>{{ t.gettext('No private post version linked.') }}</p>\n                  }\n                  @if (\n                    currentPost() &&\n                    !postVersionLinksLoading() &&\n                    !postVersionLinksError() &&\n                    !canEditPrivateVersion()\n                  ) {\n                    <p>\n                      {{\n                        t.gettext(\n                          'Version editing is disabled for the current post status.'\n                        )\n                      }}\n                    </p>\n                  }\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"\n                      busy() || dialogOpen() || !canEditPrivateVersion()\n                    \"\n                    (click)=\"selectVersionPost('private')\">\n                    <mat-icon>add</mat-icon>\n                    {{ t.gettext('Add private post version') }}\n                  </button>\n                }\n              </div>\n            </section>\n          </mat-card>\n\n          @if (!mediaAttachment()) {\n            <mat-card class=\"post-setting-card\">\n              <section\n                class=\"application-hook\"\n                aria-labelledby=\"application-hook-heading\">\n                <h2 id=\"application-hook-heading\">\n                  {{ t.gettext('Hooks') }}\n                </h2>\n                @if (applicationHooksLoading()) {\n                  <p role=\"status\">\n                    {{ t.gettext('Loading application hooks...') }}\n                  </p>\n                } @else if (applicationHooksError()) {\n                  <p\n                    class=\"error\"\n                    role=\"alert\">\n                    {{ applicationHooksError() }}\n                  </p>\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (click)=\"loadApplicationHooks()\">\n                    {{ t.gettext('Try again') }}\n                  </button>\n                } @else {\n                  <mat-checkbox\n                    [checked]=\"useAsApplicationHook()\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (change)=\"setUseAsApplicationHook($event.checked)\">\n                    {{ t.gettext('Use as application hook') }}\n                  </mat-checkbox>\n                  @if (useAsApplicationHook()) {\n                    <mat-form-field\n                      appearance=\"outline\"\n                      subscriptSizing=\"dynamic\">\n                      <mat-label>{{ t.gettext('Application Hook') }}</mat-label>\n                      <mat-select\n                        [value]=\"selectedApplicationHook()\"\n                        [disabled]=\"busy() || dialogOpen()\"\n                        (selectionChange)=\"\n                          selectedApplicationHook.set($event.value)\n                        \">\n                        @for (\n                          applicationHook of applicationHooks();\n                          track applicationHook.id\n                        ) {\n                          <mat-option\n                            [value]=\"applicationHook.hook\"\n                            [disabled]=\"\n                              applicationHookInUseByAnotherPost(applicationHook)\n                            \">\n                            {{ applicationHookLabel(applicationHook.hook) }}\n                            @if (\n                              applicationHookInUseByAnotherPost(applicationHook)\n                            ) {\n                              {{\n                                t.gettext('(in use by post # [[ postId ]])', {\n                                  postId: applicationHook.contentId,\n                                })\n                              }}\n                            }\n                          </mat-option>\n                        } @empty {\n                          <mat-option [disabled]=\"true\">{{\n                            t.gettext('No application hooks configured')\n                          }}</mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  }\n                }\n              </section>\n            </mat-card>\n          }\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"post-permissions\"\n              aria-labelledby=\"post-permissions-heading\">\n              <h2 id=\"post-permissions-heading\">\n                {{ t.gettext('Permissions') }}\n              </h2>\n              @if (permissionSource(); as source) {\n                <p role=\"note\">\n                  {{\n                    t.gettext(\n                      'Permissions are inherited from # [[ postId ]] - [[ title ]]. Edit the source post to change them.',\n                      { postId: source.id, title: source.title }\n                    )\n                  }}\n                </p>\n              }\n              @if (permissionsLoading()) {\n                <p role=\"status\">\n                  {{ t.gettext('Loading assigned permissions...') }}\n                </p>\n              } @else if (permissionsError()) {\n                <p\n                  class=\"error\"\n                  role=\"alert\">\n                  {{ permissionsError() }}\n                </p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"loadPermissions()\">\n                  {{ t.gettext('Try again') }}\n                </button>\n              } @else {\n                <ul>\n                  @for (permission of permissions(); track permission.id) {\n                    <li>\n                      <span>{{ permission.name }} ({{ permission.code }})</span>\n                      <button\n                        mat-icon-button\n                        type=\"button\"\n                        [attr.aria-label]=\"\n                          t.gettext('Remove permission [[ name ]]', {\n                            name: permission.name,\n                          })\n                        \"\n                        [disabled]=\"\n                          busy() || dialogOpen() || !!permissionSource()\n                        \"\n                        (click)=\"removePermission(permission.id)\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </li>\n                  } @empty {\n                    <li>{{ t.gettext('No permissions assigned.') }}</li>\n                  }\n                </ul>\n                @if (permissionOptionsError()) {\n                  <p\n                    class=\"error\"\n                    role=\"alert\">\n                    {{ permissionOptionsError() }}\n                  </p>\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"\n                      busy() || dialogOpen() || permissionOptionsLoading()\n                    \"\n                    (click)=\"loadPermissionOptions()\">\n                    {{ t.gettext('Try again') }}\n                  </button>\n                } @else {\n                  <div class=\"permission-assignment\">\n                    <mat-form-field\n                      class=\"w-full\"\n                      appearance=\"outline\"\n                      subscriptSizing=\"dynamic\">\n                      <mat-label>{{ t.gettext('Permission') }}</mat-label>\n                      <mat-select\n                        [value]=\"selectedPermissionId()\"\n                        [disabled]=\"\n                          busy() ||\n                          dialogOpen() ||\n                          permissionOptionsLoading() ||\n                          !!permissionSource()\n                        \"\n                        (selectionChange)=\"\n                          selectedPermissionId.set($event.value)\n                        \">\n                        @for (\n                          permission of availablePermissions();\n                          track permission.id\n                        ) {\n                          <mat-option [value]=\"permission.id\"\n                            >{{ permission.name }} ({{\n                              permission.code\n                            }})</mat-option\n                          >\n                        } @empty {\n                          <mat-option [disabled]=\"true\">{{\n                            t.gettext('No permissions available')\n                          }}</mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <button\n                      mat-button\n                      type=\"button\"\n                      [disabled]=\"\n                        busy() ||\n                        dialogOpen() ||\n                        !selectedPermissionId() ||\n                        !!permissionSource()\n                      \"\n                      (click)=\"addPermission()\">\n                      <mat-icon>add</mat-icon>\n                      {{ t.gettext('Assign permission') }}\n                    </button>\n                  </div>\n                }\n              }\n              @if (!permissionSource()) {\n                <mat-checkbox\n                  [checked]=\"applyPermissionsToRelatedPosts()\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (change)=\"applyPermissionsToRelatedPosts.set($event.checked)\">\n                  {{ t.gettext('Apply permissions to related posts') }}\n                </mat-checkbox>\n              }\n            </section>\n          </mat-card>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  } @else if (currentPost(); as post) {\n    @if (thumbnailPreviewUrl()) {\n      <img\n        class=\"thumbnail-preview\"\n        [src]=\"thumbnailPreviewUrl()\"\n        [alt]=\"t.gettext('Post thumbnail')\" />\n    }\n    @if (thumbnailError()) {\n      <p role=\"alert\">{{ thumbnailError() }}</p>\n    }\n    <h1 class=\"post-title\">{{ post.title }}</h1>\n    @if (post.excerpt) {\n      <p class=\"post-excerpt\">{{ post.excerpt }}</p>\n    }\n    <div\n      class=\"post-body\"\n      [innerHTML]=\"resolvedBody()\"></div>\n    @if (mediaAttachment(); as media) {\n      @if (draft()[media.key]; as key) {\n        @if (mediaPreviewLoading()) {\n          <p role=\"status\">{{ t.gettext('Loading media...') }}</p>\n        } @else if (mediaPreviewError()) {\n          <p\n            class=\"error\"\n            role=\"alert\">\n            {{ mediaPreviewError() }}\n          </p>\n        } @else if (media.type === 'video' && mediaPreviewUrl()) {\n          <video\n            controls\n            preload=\"metadata\"\n            [attr.controlsList]=\"\n              currentPost()?.status === 'archived' ||\n              currentPost()?.status === 'draft'\n                ? 'nodownload noremoteplayback'\n                : null\n            \"\n            [poster]=\"thumbnailPreviewUrl() || null\"\n            [src]=\"mediaPreviewUrl()\">\n            {{ t.gettext('Your browser does not support video playback.') }}\n          </video>\n        } @else if (media.type === 'audio' && mediaPreviewUrl()) {\n          <audio\n            controls\n            preload=\"metadata\"\n            [attr.controlsList]=\"\n              currentPost()?.status === 'archived' ||\n              currentPost()?.status === 'draft'\n                ? 'nodownload noremoteplayback'\n                : null\n            \"\n            [src]=\"mediaPreviewUrl()\">\n            {{ t.gettext('Your browser does not support audio playback.') }}\n          </audio>\n        } @else if (media.type === 'attachment' && mediaPreviewUrl()) {\n          <p>\n            {{\n              t.gettext('Attached file: [[ fileName ]]', {\n                fileName: mediaFileName(key),\n              })\n            }}\n            <a\n              [href]=\"mediaPreviewUrl()\"\n              target=\"_blank\"\n              rel=\"noopener\"\n              >{{ t.gettext('Download or open') }}</a\n            >\n          </p>\n        }\n      }\n    }\n    @if (mode() === 'view-clean') {\n      <taon-cms-comments\n        [contentId]=\"post.id\"\n        class=\"w-full\" />\n    }\n  } @else {\n    <p role=\"status\">{{ t.gettext('No post is loaded.') }}</p>\n  }\n</article>\n", styles: [":host{display:block}:host ::ng-deep .NgxEditor .ProseMirror table{width:100%;border-collapse:collapse;table-layout:fixed;margin:12px 0}:host ::ng-deep .NgxEditor .ProseMirror td,:host ::ng-deep .NgxEditor .ProseMirror th{position:relative;min-width:60px;border:1px solid #aaa;padding:8px;vertical-align:top}:host ::ng-deep .NgxEditor .ProseMirror td>p,:host ::ng-deep .NgxEditor .ProseMirror th>p{margin:0}:host ::ng-deep .NgxEditor .ProseMirror .selectedCell{background:#3f51b51f}mat-expansion-panel{border-radius:0!important}.post-actions{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;padding:1rem;border-bottom:1px solid rgba(136,136,136,.2)}.post-status{margin-right:auto;text-transform:capitalize;opacity:.7}.buttons{display:flex;flex-wrap:wrap;gap:.5rem}.post-article{max-width:760px;margin:0 auto;padding:clamp(1.5rem,5vw,4rem) 1.5rem;overflow-wrap:anywhere}.post-settings{display:grid;gap:1rem;margin-top:1rem}.post-setting-card{display:block;padding:20px}.post-title{margin:0 0 1.5rem;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.15;letter-spacing:-.03em}.post-excerpt{margin:0 0 2rem;font-size:1.35rem;line-height:1.6;opacity:.7;white-space:pre-wrap}.post-body{font-family:Georgia,Times New Roman,serif;font-size:1.2rem;line-height:1.8;white-space:pre-wrap}.editable{min-height:1.2em;outline:none}.editable:focus{box-shadow:-3px 0 #8885}.editable:empty:before{content:attr(data-placeholder);opacity:.4;pointer-events:none}.post-content-editor{border:1px solid rgba(136,136,136,.3333333333);border-radius:4px;overflow:hidden}.raw-content{display:block;box-sizing:border-box;width:100%;min-height:20rem;padding:1rem;resize:vertical;border:0;color:inherit;background:transparent;font-family:monospace}ngx-editor{display:block;min-height:20rem}.content-preview{min-height:12rem;padding:1rem}.slug-field{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:3rem;padding-top:1rem;border-top:1px solid rgba(136,136,136,.2);font-size:.875rem}.slug-field input{flex:1;min-width:160px;padding:.5rem;color:inherit;background:transparent;border:1px solid rgba(136,136,136,.3333333333);border-radius:4px}.error{padding:1rem;color:#b3261e}.post-type-selector{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.post-type-accordion{display:block;margin-bottom:1rem}.post-type-accordion mat-panel-title{align-items:center;gap:.5rem}.media-attachment,.post-thumbnail,.post-taxonomy,.parent-post,.related-posts,.post-version-links,.application-hook,.post-permissions{margin-top:1.5rem;font-size:.875rem}.media-attachment h2,.post-thumbnail h2,.post-taxonomy h2,.parent-post h2,.related-posts h2,.post-version-links h2,.application-hook h2,.post-permissions h2{font-size:1rem}.media-attachment .thumbnail-preview,.post-thumbnail .thumbnail-preview,.post-taxonomy .thumbnail-preview,.parent-post .thumbnail-preview,.related-posts .thumbnail-preview,.post-version-links .thumbnail-preview,.application-hook .thumbnail-preview,.post-permissions .thumbnail-preview{display:block;width:min(100%,480px);max-height:320px;object-fit:contain;border-radius:12px;margin-bottom:.75rem}.media-attachment .post-taxonomy mat-form-field,.post-thumbnail .post-taxonomy mat-form-field,.post-taxonomy .post-taxonomy mat-form-field,.parent-post .post-taxonomy mat-form-field,.related-posts .post-taxonomy mat-form-field,.post-version-links .post-taxonomy mat-form-field,.application-hook .post-taxonomy mat-form-field,.post-permissions .post-taxonomy mat-form-field{display:block;margin-top:.75rem}.related-posts ul,.related-child-files ul,.post-permissions ul{padding:0;list-style:none}.related-posts mat-form-field,.related-child-files mat-form-field,.post-permissions mat-form-field{display:block;width:min(100%,28rem);margin-top:.75rem}.related-posts .application-hook,.related-child-files .application-hook,.post-permissions .application-hook{display:grid;align-items:start;gap:.75rem}.related-posts .application-hook mat-form-field,.related-child-files .application-hook mat-form-field,.post-permissions .application-hook mat-form-field{width:min(100%,28rem)}.related-posts li,.related-child-files li,.post-permissions li{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.related-child-files{margin-top:1.5rem;font-size:.875rem}.related-child-files li{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem 0;border-bottom:1px solid rgba(136,136,136,.2)}.related-post-title{flex:1}[cdkDragHandle]{cursor:grab}.related-child-file{flex:1;min-width:0}.related-child-file-heading,.related-child-file-progress,.related-child-progress{display:flex;align-items:center;gap:.75rem}.related-child-file-heading{justify-content:space-between;overflow-wrap:anywhere}.related-child-file-progress{margin-top:.5rem}.related-child-file-progress mat-progress-bar{flex:1}.related-child-progress{margin:.75rem 0}.related-child-progress mat-progress-bar{flex:1}.post-version-link{margin-top:1rem;padding-top:.75rem;border-top:1px solid rgba(136,136,136,.2)}.post-version-link h3{font-size:.95rem}video{max-width:100%;max-height:400px!important}\n"] }]
+                    ], template: "@if (mode() !== 'view-clean') {\n  <ng-template #actionButtonsTemplate>\n    <div class=\"buttons\">\n      @if (editing()) {\n        <button\n          mat-flat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen() || !canSave()\"\n          (click)=\"save()\">\n          {{ mode() === 'add' ? t.gettext('Add') : t.gettext('Save') }}\n        </button>\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen()\"\n          (click)=\"cancel()\">\n          {{ t.gettext('Cancel') }}\n        </button>\n      } @else if (currentPost()) {\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen()\"\n          (click)=\"edit()\">\n          <mat-icon>edit</mat-icon> {{ t.gettext('Edit') }}\n        </button>\n      }\n      @if (mode() !== 'add' && currentPost()) {\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen()\"\n          (click)=\"revert()\">\n          <mat-icon>history</mat-icon> {{ t.gettext('Revert') }}\n        </button>\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen()\"\n          (click)=\"delete()\">\n          <mat-icon>delete</mat-icon> {{ t.gettext('Delete') }}\n        </button>\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"busy() || dialogOpen()\"\n          (click)=\"duplicate()\">\n          <mat-icon>content_copy</mat-icon> {{ t.gettext('Duplicate') }}\n        </button>\n      }\n    </div>\n  </ng-template>\n  <header class=\"post-actions\">\n    @if (visibilitySource(); as source) {\n      <span\n        class=\"post-status\"\n        tabindex=\"0\"\n        [matTooltip]=\"visibilityInheritedTooltip()\"\n        [attr.aria-label]=\"visibilityInheritedTooltip()\">\n        <button\n          mat-button\n          type=\"button\"\n          [disabled]=\"true\">\n          {{ statusLabel() }}\n        </button>\n      </span>\n    } @else {\n      <button\n        class=\"post-status\"\n        mat-button\n        type=\"button\"\n        [disabled]=\"statusControlDisabled()\"\n        (click)=\"selectStatus()\">\n        {{ statusLabel() }}\n      </button>\n    }\n    <ng-container [ngTemplateOutlet]=\"actionButtonsTemplate\" />\n    @if (busy()) {\n      <span role=\"status\">{{\n        uploading()\n          ? t.gettext('Uploading... ') + uploadProgress() + '%'\n          : t.gettext('Saving...')\n      }}</span>\n    }\n  </header>\n  @if (error()) {\n    <p\n      class=\"error\"\n      role=\"alert\">\n      {{ error() }}\n    </p>\n  }\n}\n\n<article\n  class=\"post-article\"\n  [attr.aria-busy]=\"busy()\">\n  @if (editing()) {\n    <mat-tab-group animationDuration=\"0ms\">\n      <mat-tab [label]=\"t.gettext('CONTENT')\">\n        <mat-accordion class=\"post-type-accordion\">\n          <mat-expansion-panel #postTypePanel>\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <mat-icon>{{ currentPostTypeIcon() }}</mat-icon>\n                {{\n                  t.gettext('Current post type: [[ postType ]]', {\n                    postType: currentPostType().label,\n                  })\n                }}\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n            <mat-radio-group\n              class=\"post-type-selector\"\n              [attr.aria-label]=\"t.gettext('Post type')\"\n              [value]=\"draft().type\"\n              [disabled]=\"busy() || dialogOpen()\"\n              (change)=\"updateDraft('type', $event.value)\">\n              @for (type of postTypes; track type.value) {\n                <mat-radio-button\n                  [value]=\"type.value\"\n                  (click)=\"postTypePanel.close()\"\n                  >{{ type.label }}</mat-radio-button\n                >\n              }\n            </mat-radio-group>\n          </mat-expansion-panel>\n        </mat-accordion>\n        <div\n          class=\"post-title editable\"\n          contenteditable=\"true\"\n          role=\"textbox\"\n          [attr.aria-label]=\"t.gettext('Post title')\"\n          aria-required=\"true\"\n          [attr.data-placeholder]=\"placeholderTitle()\"\n          [attr.contenteditable]=\"!busy() && !dialogOpen()\"\n          [taonCmsEditableSingleLine]=\"true\"\n          [taonCmsEditable]=\"draft().title\"\n          (taonCmsEditableChange)=\"updateDraft('title', $event)\"></div>\n        @if (subtitleEmpty()) {\n          <button\n            mat-button\n            type=\"button\"\n            [disabled]=\"busy() || dialogOpen()\"\n            (click)=\"generateLoremIpsum('excerpt')\">\n            {{ t.gettext('Generate Lorem Ipsum') }}\n          </button>\n        }\n        <div\n          class=\"post-excerpt editable\"\n          contenteditable=\"true\"\n          role=\"textbox\"\n          [attr.aria-label]=\"t.gettext('Post excerpt')\"\n          aria-multiline=\"true\"\n          [attr.data-placeholder]=\"placeholderShortIntro()\"\n          [attr.contenteditable]=\"!busy() && !dialogOpen()\"\n          [taonCmsEditable]=\"draft().excerpt\"\n          (taonCmsEditableChange)=\"updateDraft('excerpt', $event)\"></div>\n        @if (descriptionEmpty()) {\n          <button\n            mat-button\n            type=\"button\"\n            [disabled]=\"busy() || dialogOpen()\"\n            (click)=\"generateLoremIpsum('body')\">\n            {{ t.gettext('Generate Lorem Ipsum') }}\n          </button>\n        }\n        <section class=\"post-content-editor\">\n          @if (draft().type === contentType.JsonTable) {\n            <taon-spreadsheet-table\n              [data]=\"jsonTableData()\"\n              [disabled]=\"busy() || dialogOpen()\"\n              [validationError]=\"jsonTableValidationError()\"\n              (dataChange)=\"setJsonTableData($event)\"\n              (validationErrorChange)=\"jsonTableValidationError.set($event)\" />\n          } @else {\n          <mat-tab-group\n            [selectedIndex]=\"contentTab()\"\n            (selectedIndexChange)=\"setContentTab($event)\"\n            [preserveContent]=\"true\"\n            animationDuration=\"0ms\">\n            <mat-tab [label]=\"t.gettext('Editor')\">\n              @if (contentEditor(); as editor) {\n                <ng-template #customMenu>\n                  <button\n                    type=\"button\"\n                    class=\"NgxEditor__MenuItem\"\n                    title=\"Table\"\n                    aria-label=\"Table actions\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    [matMenuTriggerFor]=\"tableMenu\"\n                    [matMenuTriggerRestoreFocus]=\"false\"\n                    (mousedown)=\"$event.preventDefault()\">\n                    <mat-icon>table_chart</mat-icon>\n                  </button>\n\n                  <mat-menu #tableMenu=\"matMenu\">\n                    <button\n                      mat-menu-item\n                      type=\"button\"\n                      (click)=\"insertTable($event)\">\n                      <mat-icon>add</mat-icon>\n                      <span>Insert table</span>\n                    </button>\n\n                    <mat-divider />\n\n                    @for (item of tableCommands; track item.label) {\n                      <button\n                        mat-menu-item\n                        type=\"button\"\n                        [disabled]=\"!canRunTableCommand(item.command)\"\n                        (click)=\"runTableCommand($event, item.command)\">\n                        {{ item.label }}\n                      </button>\n                    }\n                  </mat-menu>\n                </ng-template>\n\n                <ngx-editor-menu\n                  [editor]=\"editor\"\n                  [customMenuRef]=\"customMenu\"\n                  [toolbar]=\"contentToolbar\"\n                  [disabled]=\"busy() || dialogOpen()\" />\n                <ngx-editor\n                  [editor]=\"editor\"\n                  [placeholder]=\"placeholderTellYourStory()\" />\n              }\n            </mat-tab>\n            <mat-tab [label]=\"t.gettext('Raw')\">\n              <textarea\n                #rawContent\n                class=\"raw-content\"\n                [attr.aria-label]=\"t.gettext('Post body HTML')\"\n                [value]=\"draft().body\"\n                [disabled]=\"busy() || dialogOpen()\"\n                (input)=\"updateRawContent($event)\"\n                spellcheck=\"false\"></textarea>\n            </mat-tab>\n            <mat-tab [label]=\"t.gettext('Preview')\">\n              <div\n                class=\"post-body content-preview\"\n                [innerHTML]=\"resolvedBody()\"></div>\n            </mat-tab>\n          </mat-tab-group>\n          @if (contentTab() !== 2) {\n            <button\n              mat-button\n              type=\"button\"\n              [disabled]=\"busy() || dialogOpen() || !contentEditor()\"\n              [matMenuTriggerFor]=\"variableMenu\"\n              [matMenuTriggerRestoreFocus]=\"false\">\n              {{ t.gettext('Insert variable') }}\n            </button>\n          }\n          <mat-menu #variableMenu=\"matMenu\">\n            <button\n              mat-menu-item\n              [matMenuTriggerFor]=\"siteVariableMenu\">\n              {{ t.gettext('Site') }}\n            </button>\n            <button\n              mat-menu-item\n              [matMenuTriggerFor]=\"postVariableMenu\">\n              {{ t.gettext('Post') }}\n            </button>\n          </mat-menu>\n          <mat-menu #siteVariableMenu=\"matMenu\">\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('frontendUrl')\">\n              {{ t.gettext('Frontend URL') }}\n            </button>\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('site.name')\">\n              {{ t.gettext('Site name') }}\n            </button>\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('currentYear')\">\n              {{ t.gettext('Current year') }}\n            </button>\n          </mat-menu>\n          <mat-menu #postVariableMenu=\"matMenu\">\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('post.title')\">\n              {{ t.gettext('Post title') }}\n            </button>\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('post.url')\">\n              {{ t.gettext('Post URL') }}\n            </button>\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('post.id')\">\n              {{ t.gettext('Post ID') }}\n            </button>\n            <button\n              mat-menu-item\n              (click)=\"insertVariable('post.thumbnailUrl')\">\n              {{ t.gettext('Post Thumbnail URL') }}\n            </button>\n          </mat-menu>\n          }\n        </section>\n        <label class=\"slug-field\">\n          <span>{{ t.gettext('URL slug') }}</span>\n          <input\n            [attr.aria-label]=\"t.gettext('URL slug')\"\n            [value]=\"draft().slug\"\n            [disabled]=\"busy() || dialogOpen()\"\n            (input)=\"updateSlug($event)\"\n            [placeholder]=\"t.gettext('my-post')\" />\n        </label>\n        @if (requiredSlugs.length) {\n          <mat-form-field\n            class=\"required-slugs-field\"\n            appearance=\"outline\">\n            <mat-label>{{ t.gettext('Required Slugs') }}</mat-label>\n            <mat-select\n              [value]=\"selectedRequiredSlug()\"\n              [disabled]=\"busy() || dialogOpen()\"\n              (selectionChange)=\"selectRequiredSlug($event.value)\">\n              @for (slug of requiredSlugs; track slug) {\n                <mat-option [value]=\"slug\">{{ slug }}</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        }\n      </mat-tab>\n      <mat-tab [label]=\"t.gettext('SETTINGS')\">\n        <div class=\"post-settings\">\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"related-child-files\"\n              aria-labelledby=\"related-child-files-heading\">\n              <h2 id=\"related-child-files-heading\">\n                {{ t.gettext('Create related children from files') }}\n              </h2>\n              @if (!currentPost()) {\n                <p role=\"note\">\n                  {{\n                    t.gettext(\n                      'Please save the post before creating children.'\n                    )\n                  }}\n                </p>\n              }\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ t.gettext('Child title prefix') }}</mat-label>\n                <input\n                  matInput\n                  [value]=\"childTitlePrefix()\"\n                  [disabled]=\"!currentPost() || busy() || dialogOpen()\"\n                  (input)=\"updateChildTitlePrefix($event)\" />\n              </mat-form-field>\n              <input\n                #relatedChildFilesInput\n                hidden\n                type=\"file\"\n                multiple\n                [disabled]=\"!currentPost() || busy() || dialogOpen()\"\n                (change)=\"relatedChildFilesSelected($event)\" />\n              <button\n                mat-button\n                type=\"button\"\n                [disabled]=\"!currentPost() || busy() || dialogOpen()\"\n                (click)=\"relatedChildFilesInput.click()\">\n                <mat-icon>add</mat-icon>\n                {{ t.gettext('Choose files') }}\n              </button>\n              @if (childBatchError()) {\n                <p\n                  class=\"error\"\n                  role=\"alert\">\n                  {{ childBatchError() }}\n                </p>\n              }\n              @if (childFiles().length) {\n                <div class=\"related-child-progress\">\n                  <mat-progress-bar\n                    mode=\"determinate\"\n                    [value]=\"childOverallProgress()\"\n                    [attr.aria-label]=\"\n                      t.gettext('Overall child creation progress')\n                    \" />\n                  <span>\n                    {{ childOverallProgress() }}%\n                    {{ t.gettext('overall progress') }}\n                  </span>\n                </div>\n                <ul>\n                  @for (file of childFiles(); track file.id; let index =\n                  $index) {\n                    <li>\n                      <div class=\"related-child-file\">\n                        <div class=\"related-child-file-heading\">\n                          <span>{{ file.file.name }}</span>\n                          <span>{{ childTitlePreviews()[index] }}</span>\n                        </div>\n                        <div class=\"related-child-file-progress\">\n                          <mat-progress-bar\n                            mode=\"determinate\"\n                            [value]=\"file.progress\"\n                            [attr.aria-label]=\"\n                              t.gettext('Progress for [[ fileName ]]', {\n                                fileName: file.file.name,\n                              })\n                            \" />\n                          <span>{{ file.progress }}%</span>\n                        </div>\n                        @if (file.status === 'processing') {\n                          <p role=\"status\">{{ t.gettext('Processing...') }}</p>\n                        } @else if (file.status === 'success') {\n                          <p role=\"status\">{{ t.gettext('Child created.') }}</p>\n                          @if (file.error) {\n                            <p\n                              class=\"error\"\n                              role=\"alert\">\n                              {{ file.error | json }}\n                            </p>\n                          }\n                        } @else if (file.status === 'error') {\n                          <p\n                            class=\"error\"\n                            role=\"alert\">\n                            {{ file.error | json }}\n                          </p>\n                        } @else {\n                          <p>{{ t.gettext('Waiting to upload.') }}</p>\n                        }\n                      </div>\n                      <button\n                        mat-icon-button\n                        type=\"button\"\n                        [attr.aria-label]=\"\n                          t.gettext('Remove file [[ fileName ]]', {\n                            fileName: file.file.name,\n                          })\n                        \"\n                        [disabled]=\"!currentPost() || busy() || dialogOpen()\"\n                        (click)=\"removeRelatedChildFile(file.id)\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </li>\n                  }\n                </ul>\n              }\n              <button\n                mat-flat-button\n                type=\"button\"\n                [disabled]=\"!canUploadRelatedChildren()\"\n                (click)=\"uploadAndCreateChildren()\">\n                {{ t.gettext('Upload and Create Children') }}\n              </button>\n              @if (childUploadRunning()) {\n                <button\n                  mat-button\n                  type=\"button\"\n                  (click)=\"cancelRelatedChildUploads()\">\n                  {{ t.gettext('Cancel upload') }}\n                </button>\n              }\n            </section>\n          </mat-card>\n          @if (mediaAttachment(); as media) {\n            <mat-card class=\"post-setting-card\">\n              <section\n                class=\"media-attachment\"\n                aria-labelledby=\"media-attachment-heading\">\n                <h2 id=\"media-attachment-heading\">{{ media.heading }}</h2>\n                @if (uploading()) {\n                  <mat-progress-bar\n                    mode=\"determinate\"\n                    [value]=\"uploadProgress()\"\n                    [attr.aria-label]=\"t.gettext('Media upload progress')\" />\n                  <button\n                    mat-button\n                    type=\"button\"\n                    (click)=\"cancelMediaUpload()\">\n                    {{ t.gettext('Cancel upload') }}\n                  </button>\n                }\n                @if (draft()[media.key]; as key) {\n                  @if (mediaPreviewLoading()) {\n                    <p role=\"status\">\n                      {{ t.gettext('Loading media preview...') }}\n                    </p>\n                  }\n                  @if (mediaPreviewError()) {\n                    <p\n                      class=\"error\"\n                      role=\"alert\">\n                      {{ mediaPreviewError() }}\n                    </p>\n                  }\n                  @if (media.type === 'video' && mediaPreviewUrl()) {\n                    <video\n                      controls\n                      preload=\"metadata\"\n                      [src]=\"mediaPreviewUrl()\">\n                      {{\n                        t.gettext(\n                          'Your browser does not support video playback.'\n                        )\n                      }}\n                    </video>\n                  } @else if (media.type === 'audio' && mediaPreviewUrl()) {\n                    <audio\n                      controls\n                      preload=\"metadata\"\n                      [src]=\"mediaPreviewUrl()\">\n                      {{\n                        t.gettext(\n                          'Your browser does not support audio playback.'\n                        )\n                      }}\n                    </audio>\n                  } @else if (\n                    media.type === 'attachment' && mediaPreviewUrl()\n                  ) {\n                    <p>\n                      {{\n                        t.gettext('Attached file: [[ fileName ]]', {\n                          fileName: mediaFileName(key),\n                        })\n                      }}\n                      <a\n                        [href]=\"mediaPreviewUrl()\"\n                        target=\"_blank\"\n                        rel=\"noopener\"\n                        >{{ t.gettext('Download or open') }}</a\n                      >\n                    </p>\n                  }\n                  <input\n                    #mediaInput\n                    hidden\n                    type=\"file\"\n                    [accept]=\"media.accept\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (change)=\"fileSelected($event)\" />\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (click)=\"mediaInput.click()\">\n                    {{ t.gettext('Replace') }}\n                  </button>\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (click)=\"removeMedia()\">\n                    {{ t.gettext('Remove') }}\n                  </button>\n                } @else {\n                  <input\n                    #mediaInput\n                    hidden\n                    type=\"file\"\n                    [accept]=\"media.accept\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (change)=\"fileSelected($event)\" />\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (click)=\"mediaInput.click()\">\n                    {{ media.uploadLabel }}\n                  </button>\n                }\n              </section>\n            </mat-card>\n          }\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"post-thumbnail\"\n              aria-labelledby=\"thumbnail-heading\">\n              <h2 id=\"thumbnail-heading\">{{ t.gettext('Thumbnail') }}</h2>\n              @if (thumbnailPreviewUrl()) {\n                <img\n                  class=\"thumbnail-preview\"\n                  [src]=\"thumbnailPreviewUrl()\"\n                  [alt]=\"t.gettext('Post thumbnail')\" />\n              } @else {\n                <p>{{ t.gettext('No thumbnail selected.') }}</p>\n              }\n              @if (thumbnailError()) {\n                <p role=\"alert\">{{ thumbnailError() }}</p>\n              }\n              <input\n                #thumbnailInput\n                hidden\n                type=\"file\"\n                accept=\"image/*\"\n                [disabled]=\"busy() || dialogOpen()\"\n                (change)=\"thumbnailSelected($event)\" />\n              <div class=\"buttons\">\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"thumbnailInput.click()\">\n                  {{ t.gettext('Upload Thumbnail') }}\n                </button>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"applyDefaultThumbnail()\">\n                  {{ t.gettext('Apply Default Placeholder') }}\n                </button>\n              </div>\n            </section>\n          </mat-card>\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"post-taxonomy\"\n              aria-labelledby=\"category-heading\">\n              <h2 id=\"category-heading\">{{ t.gettext('Category / Tags') }}</h2>\n              @if (taxonomyLoading()) {\n                <p role=\"status\">\n                  {{ t.gettext('Loading categories and tags...') }}\n                </p>\n              }\n              @if (taxonomyError()) {\n                <p role=\"alert\">{{ taxonomyError() }}</p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy()\"\n                  (click)=\"loadTaxonomy()\">\n                  {{ t.gettext('Try again') }}\n                </button>\n              }\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ t.gettext('Category') }}</mat-label>\n                <mat-select\n                  [value]=\"draft().categoryId\"\n                  [disabled]=\"\n                    busy() ||\n                    dialogOpen() ||\n                    taxonomyLoading() ||\n                    !!taxonomyError()\n                  \"\n                  (selectionChange)=\"updateDraft('categoryId', $event.value)\">\n                  <mat-option [value]=\"null\">{{\n                    t.gettext('None')\n                  }}</mat-option>\n                  @for (category of categories(); track category.id) {\n                    <mat-option [value]=\"category.id\">{{\n                      category.name\n                    }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <h3>{{ t.gettext('Tags') }}</h3>\n              <mat-chip-set [attr.aria-label]=\"t.gettext('Selected tags')\">\n                @for (tag of selectedTags(); track tag.id) {\n                  <mat-chip\n                    [disabled]=\"busy() || dialogOpen() || taxonomyLoading()\"\n                    (removed)=\"removeTag(tag.id)\">\n                    {{ tag.name }}\n                    <button\n                      matChipRemove\n                      type=\"button\"\n                      [disabled]=\"busy() || dialogOpen() || taxonomyLoading()\"\n                      [attr.aria-label]=\"\n                        t.gettext('Remove tag [[ name ]]', { name: tag.name })\n                      \">\n                      <mat-icon>cancel</mat-icon>\n                    </button>\n                  </mat-chip>\n                }\n              </mat-chip-set>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ t.gettext('Search tags') }}</mat-label>\n                <input\n                  matInput\n                  [value]=\"tagSearch()\"\n                  (input)=\"filterTags($event)\"\n                  [disabled]=\"busy() || dialogOpen() || taxonomyLoading()\" />\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ t.gettext('Add tag') }}</mat-label>\n                <mat-select\n                  [value]=\"null\"\n                  [disabled]=\"\n                    busy() ||\n                    dialogOpen() ||\n                    taxonomyLoading() ||\n                    !!taxonomyError()\n                  \"\n                  (selectionChange)=\"addTag($event.value)\">\n                  @for (tag of filteredTags(); track tag.id) {\n                    <mat-option [value]=\"tag.id\">{{ tag.name }}</mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n              <div class=\"buttons\">\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen() || taxonomyLoading()\"\n                  (click)=\"createTaxonomy('category')\">\n                  <mat-icon>add</mat-icon> {{ t.gettext('Add category') }}\n                </button>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen() || taxonomyLoading()\"\n                  (click)=\"createTaxonomy('tag')\">\n                  <mat-icon>add</mat-icon> {{ t.gettext('Add tag') }}\n                </button>\n              </div>\n            </section>\n          </mat-card>\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"parent-post\"\n              aria-labelledby=\"parent-post-heading\">\n              <h2 id=\"parent-post-heading\">{{ t.gettext('Parent Post') }}</h2>\n              @if (parentPostLoading()) {\n                <p role=\"status\">{{ t.gettext('Loading parent post...') }}</p>\n              } @else if (parentPostError()) {\n                <p\n                  class=\"error\"\n                  role=\"alert\">\n                  {{ parentPostError() }}\n                </p>\n              } @else if (parentPost(); as parent) {\n                <p>\n                  <taon-cms-post-thumbnail [post]=\"parent\" />\n                  <a\n                    href=\"#\"\n                    (click)=\"requestPostEditor($event, parent)\">\n                    {{ parent.title }}\n                  </a>\n                </p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"removeParentPost()\">\n                  <mat-icon>link_off</mat-icon>\n                  {{ t.gettext('Remove from parent') }}\n                </button>\n              } @else {\n                <p>{{ t.gettext('No parent added') }}</p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen() || !currentPost()\"\n                  (click)=\"addAsChildOf()\">\n                  <mat-icon>account_tree</mat-icon>\n                  @if (currentPost()) {\n                    {{ t.gettext('Add as a child') }}\n                  } @else {\n                    {{\n                      t.gettext(\n                        'Add as a child (disabled \u2014 please save the post first)'\n                      )\n                    }}\n                  }\n                </button>\n              }\n            </section>\n          </mat-card>\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"related-posts\"\n              aria-labelledby=\"related-posts-heading\">\n              <h2 id=\"related-posts-heading\">\n                {{ t.gettext('Related posts') }}\n              </h2>\n              @if (relatedPostsLoading()) {\n                <p role=\"status\">{{ t.gettext('Loading related posts...') }}</p>\n              } @else if (relatedPostsError()) {\n                <p\n                  class=\"error\"\n                  role=\"alert\">\n                  {{ relatedPostsError() }}\n                </p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"loadRelatedPosts()\">\n                  {{ t.gettext('Try again') }}\n                </button>\n              } @else {\n                <ul\n                  cdkDropList\n                  [cdkDropListData]=\"relatedPosts()\"\n                  [cdkDropListDisabled]=\"busy() || dialogOpen()\"\n                  (cdkDropListDropped)=\"reorderRelatedPosts($event)\">\n                  @for (post of relatedPosts(); track post.id) {\n                    <li cdkDrag [cdkDragData]=\"post\">\n                      <button\n                        mat-icon-button\n                        cdkDragHandle\n                        type=\"button\"\n                        [disabled]=\"busy() || dialogOpen()\"\n                        [attr.aria-label]=\"\n                          t.gettext('Reorder related post [[ title ]]', {\n                            title: post.title,\n                          })\n                        \">\n                        <mat-icon>drag_indicator</mat-icon>\n                      </button>\n                      <taon-cms-post-thumbnail [post]=\"post\" />\n                      <span class=\"related-post-title\">\n                        #{{ post.id }} -\n                        <a\n                          href=\"#\"\n                          (click)=\"requestPostEditor($event, post)\">\n                          {{ post.title }}\n                        </a>\n                      </span>\n                      <button\n                        mat-icon-button\n                        type=\"button\"\n                        [attr.aria-label]=\"\n                          t.gettext('Remove related post [[ title ]]', {\n                            title: post.title,\n                          })\n                        \"\n                        [disabled]=\"busy() || dialogOpen()\"\n                        (click)=\"removeRelatedPost(post.id)\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </li>\n                  } @empty {\n                    <li>{{ t.gettext('No related posts yet.') }}</li>\n                  }\n                </ul>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"addRelatedPost()\">\n                  <mat-icon>add</mat-icon> {{ t.gettext('Add related post') }}\n                </button>\n              }\n              <mat-checkbox\n                [checked]=\"applyVisibilityToRelatedPosts()\"\n                [disabled]=\"busy() || dialogOpen()\"\n                (change)=\"applyVisibilityToRelatedPosts.set($event.checked)\">\n                {{ t.gettext('Apply visibility to related posts') }}\n              </mat-checkbox>\n            </section>\n          </mat-card>\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"post-version-links\"\n              aria-labelledby=\"post-version-links-heading\">\n              <h2 id=\"post-version-links-heading\">\n                {{ t.gettext('Post versions') }}\n              </h2>\n              @if (!currentPost()) {\n                <p role=\"note\">\n                  {{\n                    t.gettext('Save the post first to manage version links.')\n                  }}\n                </p>\n              }\n              @if (postVersionLinksLoading()) {\n                <p role=\"status\">{{ t.gettext('Loading post versions...') }}</p>\n              }\n              @if (postVersionLinksError()) {\n                <p\n                  class=\"error\"\n                  role=\"alert\">\n                  {{ postVersionLinksError() }}\n                </p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"loadPostVersionLinks(currentPost())\">\n                  {{ t.gettext('Try again') }}\n                </button>\n              }\n              <div class=\"post-version-link\">\n                <h3>{{ t.gettext('Public post version') }}</h3>\n                @if (postVersionLinks().publicVersionPost; as versionPost) {\n                  <p>\n                    <taon-cms-post-thumbnail [post]=\"versionPost\" />\n                    <a\n                      href=\"#\"\n                      (click)=\"requestPostEditor($event, versionPost)\">\n                      {{ versionPost.title }}\n                    </a>\n                    [{{ versionPost.slug }}]\n                  </p>\n                  @if (canEditPublicVersion()) {\n                    <button\n                      mat-button\n                      type=\"button\"\n                      [disabled]=\"busy() || dialogOpen()\"\n                      (click)=\"selectVersionPost('public')\">\n                      {{ t.gettext('Replace public version') }}\n                    </button>\n                    <button\n                      mat-button\n                      type=\"button\"\n                      [disabled]=\"busy() || dialogOpen()\"\n                      (click)=\"removeVersionPost('public')\">\n                      {{ t.gettext('Remove public version') }}\n                    </button>\n                  } @else {\n                    <p>\n                      {{\n                        t.gettext(\n                          'Version editing is disabled for the current post status.'\n                        )\n                      }}\n                    </p>\n                  }\n                } @else {\n                  @if (!postVersionLinksLoading() && !postVersionLinksError()) {\n                    <p>{{ t.gettext('No public post version linked.') }}</p>\n                  }\n                  @if (\n                    currentPost() &&\n                    !postVersionLinksLoading() &&\n                    !postVersionLinksError() &&\n                    !canEditPublicVersion()\n                  ) {\n                    <p>\n                      {{\n                        t.gettext(\n                          'Version editing is disabled for the current post status.'\n                        )\n                      }}\n                    </p>\n                  }\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"\n                      busy() || dialogOpen() || !canEditPublicVersion()\n                    \"\n                    (click)=\"selectVersionPost('public')\">\n                    <mat-icon>add</mat-icon>\n                    {{ t.gettext('Add public post version') }}\n                  </button>\n                }\n              </div>\n              <div class=\"post-version-link\">\n                <h3>{{ t.gettext('Private post version') }}</h3>\n                @if (postVersionLinks().privateVersionPost; as versionPost) {\n                  <p>\n                    <taon-cms-post-thumbnail [post]=\"versionPost\" />\n                    <a\n                      href=\"#\"\n                      (click)=\"requestPostEditor($event, versionPost)\">\n                      {{ versionPost.title }}\n                    </a>\n                    [{{ versionPost.slug }}]\n                  </p>\n                  @if (canEditPrivateVersion()) {\n                    <button\n                      mat-button\n                      type=\"button\"\n                      [disabled]=\"busy() || dialogOpen()\"\n                      (click)=\"selectVersionPost('private')\">\n                      {{ t.gettext('Replace private version') }}\n                    </button>\n                    <button\n                      mat-button\n                      type=\"button\"\n                      [disabled]=\"busy() || dialogOpen()\"\n                      (click)=\"removeVersionPost('private')\">\n                      {{ t.gettext('Remove private version') }}\n                    </button>\n                  } @else {\n                    <p>\n                      {{\n                        t.gettext(\n                          'Version editing is disabled for the current post status.'\n                        )\n                      }}\n                    </p>\n                  }\n                } @else {\n                  @if (!postVersionLinksLoading() && !postVersionLinksError()) {\n                    <p>{{ t.gettext('No private post version linked.') }}</p>\n                  }\n                  @if (\n                    currentPost() &&\n                    !postVersionLinksLoading() &&\n                    !postVersionLinksError() &&\n                    !canEditPrivateVersion()\n                  ) {\n                    <p>\n                      {{\n                        t.gettext(\n                          'Version editing is disabled for the current post status.'\n                        )\n                      }}\n                    </p>\n                  }\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"\n                      busy() || dialogOpen() || !canEditPrivateVersion()\n                    \"\n                    (click)=\"selectVersionPost('private')\">\n                    <mat-icon>add</mat-icon>\n                    {{ t.gettext('Add private post version') }}\n                  </button>\n                }\n              </div>\n            </section>\n          </mat-card>\n\n          @if (!mediaAttachment()) {\n            <mat-card class=\"post-setting-card\">\n              <section\n                class=\"application-hook\"\n                aria-labelledby=\"application-hook-heading\">\n                <h2 id=\"application-hook-heading\">\n                  {{ t.gettext('Hooks') }}\n                </h2>\n                @if (applicationHooksLoading()) {\n                  <p role=\"status\">\n                    {{ t.gettext('Loading application hooks...') }}\n                  </p>\n                } @else if (applicationHooksError()) {\n                  <p\n                    class=\"error\"\n                    role=\"alert\">\n                    {{ applicationHooksError() }}\n                  </p>\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (click)=\"loadApplicationHooks()\">\n                    {{ t.gettext('Try again') }}\n                  </button>\n                } @else {\n                  <mat-checkbox\n                    [checked]=\"useAsApplicationHook()\"\n                    [disabled]=\"busy() || dialogOpen()\"\n                    (change)=\"setUseAsApplicationHook($event.checked)\">\n                    {{ t.gettext('Use as application hook') }}\n                  </mat-checkbox>\n                  @if (useAsApplicationHook()) {\n                    <mat-form-field\n                      appearance=\"outline\"\n                      subscriptSizing=\"dynamic\">\n                      <mat-label>{{ t.gettext('Application Hook') }}</mat-label>\n                      <mat-select\n                        [value]=\"selectedApplicationHook()\"\n                        [disabled]=\"busy() || dialogOpen()\"\n                        (selectionChange)=\"\n                          selectedApplicationHook.set($event.value)\n                        \">\n                        @for (\n                          applicationHook of applicationHooks();\n                          track applicationHook.id\n                        ) {\n                          <mat-option\n                            [value]=\"applicationHook.hook\"\n                            [disabled]=\"\n                              applicationHookInUseByAnotherPost(applicationHook)\n                            \">\n                            {{ applicationHookLabel(applicationHook.hook) }}\n                            @if (\n                              applicationHookInUseByAnotherPost(applicationHook)\n                            ) {\n                              {{\n                                t.gettext('(in use by post # [[ postId ]])', {\n                                  postId: applicationHook.contentId,\n                                })\n                              }}\n                            }\n                          </mat-option>\n                        } @empty {\n                          <mat-option [disabled]=\"true\">{{\n                            t.gettext('No application hooks configured')\n                          }}</mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  }\n                }\n              </section>\n            </mat-card>\n          }\n          <mat-card class=\"post-setting-card\">\n            <section\n              class=\"post-permissions\"\n              aria-labelledby=\"post-permissions-heading\">\n              <h2 id=\"post-permissions-heading\">\n                {{ t.gettext('Permissions') }}\n              </h2>\n              @if (permissionSource(); as source) {\n                <p role=\"note\">\n                  {{\n                    t.gettext(\n                      'Permissions are inherited from # [[ postId ]] - [[ title ]]. Edit the source post to change them.',\n                      { postId: source.id, title: source.title }\n                    )\n                  }}\n                </p>\n              }\n              @if (permissionsLoading()) {\n                <p role=\"status\">\n                  {{ t.gettext('Loading assigned permissions...') }}\n                </p>\n              } @else if (permissionsError()) {\n                <p\n                  class=\"error\"\n                  role=\"alert\">\n                  {{ permissionsError() }}\n                </p>\n                <button\n                  mat-button\n                  type=\"button\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (click)=\"loadPermissions()\">\n                  {{ t.gettext('Try again') }}\n                </button>\n              } @else {\n                <ul>\n                  @for (permission of permissions(); track permission.id) {\n                    <li>\n                      <span>{{ permission.name }} ({{ permission.code }})</span>\n                      <button\n                        mat-icon-button\n                        type=\"button\"\n                        [attr.aria-label]=\"\n                          t.gettext('Remove permission [[ name ]]', {\n                            name: permission.name,\n                          })\n                        \"\n                        [disabled]=\"\n                          busy() || dialogOpen() || !!permissionSource()\n                        \"\n                        (click)=\"removePermission(permission.id)\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </li>\n                  } @empty {\n                    <li>{{ t.gettext('No permissions assigned.') }}</li>\n                  }\n                </ul>\n                @if (permissionOptionsError()) {\n                  <p\n                    class=\"error\"\n                    role=\"alert\">\n                    {{ permissionOptionsError() }}\n                  </p>\n                  <button\n                    mat-button\n                    type=\"button\"\n                    [disabled]=\"\n                      busy() || dialogOpen() || permissionOptionsLoading()\n                    \"\n                    (click)=\"loadPermissionOptions()\">\n                    {{ t.gettext('Try again') }}\n                  </button>\n                } @else {\n                  <div class=\"permission-assignment\">\n                    <mat-form-field\n                      class=\"w-full\"\n                      appearance=\"outline\"\n                      subscriptSizing=\"dynamic\">\n                      <mat-label>{{ t.gettext('Permission') }}</mat-label>\n                      <mat-select\n                        [value]=\"selectedPermissionId()\"\n                        [disabled]=\"\n                          busy() ||\n                          dialogOpen() ||\n                          permissionOptionsLoading() ||\n                          !!permissionSource()\n                        \"\n                        (selectionChange)=\"\n                          selectedPermissionId.set($event.value)\n                        \">\n                        @for (\n                          permission of availablePermissions();\n                          track permission.id\n                        ) {\n                          <mat-option [value]=\"permission.id\"\n                            >{{ permission.name }} ({{\n                              permission.code\n                            }})</mat-option\n                          >\n                        } @empty {\n                          <mat-option [disabled]=\"true\">{{\n                            t.gettext('No permissions available')\n                          }}</mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <button\n                      mat-button\n                      type=\"button\"\n                      [disabled]=\"\n                        busy() ||\n                        dialogOpen() ||\n                        !selectedPermissionId() ||\n                        !!permissionSource()\n                      \"\n                      (click)=\"addPermission()\">\n                      <mat-icon>add</mat-icon>\n                      {{ t.gettext('Assign permission') }}\n                    </button>\n                  </div>\n                }\n              }\n              @if (!permissionSource()) {\n                <mat-checkbox\n                  [checked]=\"applyPermissionsToRelatedPosts()\"\n                  [disabled]=\"busy() || dialogOpen()\"\n                  (change)=\"applyPermissionsToRelatedPosts.set($event.checked)\">\n                  {{ t.gettext('Apply permissions to related posts') }}\n                </mat-checkbox>\n              }\n            </section>\n          </mat-card>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  } @else if (currentPost(); as post) {\n    @if (thumbnailPreviewUrl()) {\n      <img\n        class=\"thumbnail-preview\"\n        [src]=\"thumbnailPreviewUrl()\"\n        [alt]=\"t.gettext('Post thumbnail')\" />\n    }\n    @if (thumbnailError()) {\n      <p role=\"alert\">{{ thumbnailError() }}</p>\n    }\n    <h1 class=\"post-title\">{{ post.title }}</h1>\n    @if (post.excerpt) {\n      <p class=\"post-excerpt\">{{ post.excerpt }}</p>\n    }\n    @if (post.type === contentType.JsonTable) {\n      <taon-spreadsheet-table\n        [data]=\"jsonTableData()\"\n        [validationError]=\"jsonTableValidationError()\"\n        [readOnly]=\"true\" />\n    } @else {\n      <div\n        class=\"post-body\"\n        [innerHTML]=\"resolvedBody()\"></div>\n    }\n    @if (mediaAttachment(); as media) {\n      @if (draft()[media.key]; as key) {\n        @if (mediaPreviewLoading()) {\n          <p role=\"status\">{{ t.gettext('Loading media...') }}</p>\n        } @else if (mediaPreviewError()) {\n          <p\n            class=\"error\"\n            role=\"alert\">\n            {{ mediaPreviewError() }}\n          </p>\n        } @else if (media.type === 'video' && mediaPreviewUrl()) {\n          <video\n            controls\n            preload=\"metadata\"\n            [attr.controlsList]=\"\n              currentPost()?.status === 'archived' ||\n              currentPost()?.status === 'draft'\n                ? 'nodownload noremoteplayback'\n                : null\n            \"\n            [poster]=\"thumbnailPreviewUrl() || null\"\n            [src]=\"mediaPreviewUrl()\">\n            {{ t.gettext('Your browser does not support video playback.') }}\n          </video>\n        } @else if (media.type === 'audio' && mediaPreviewUrl()) {\n          <audio\n            controls\n            preload=\"metadata\"\n            [attr.controlsList]=\"\n              currentPost()?.status === 'archived' ||\n              currentPost()?.status === 'draft'\n                ? 'nodownload noremoteplayback'\n                : null\n            \"\n            [src]=\"mediaPreviewUrl()\">\n            {{ t.gettext('Your browser does not support audio playback.') }}\n          </audio>\n        } @else if (media.type === 'attachment' && mediaPreviewUrl()) {\n          <p>\n            {{\n              t.gettext('Attached file: [[ fileName ]]', {\n                fileName: mediaFileName(key),\n              })\n            }}\n            <a\n              [href]=\"mediaPreviewUrl()\"\n              target=\"_blank\"\n              rel=\"noopener\"\n              >{{ t.gettext('Download or open') }}</a\n            >\n          </p>\n        }\n      }\n    }\n    @if (mode() === 'view-clean') {\n      <taon-cms-comments\n        [contentId]=\"post.id\"\n        class=\"w-full\" />\n    }\n  } @else {\n    <p role=\"status\">{{ t.gettext('No post is loaded.') }}</p>\n  }\n</article>\n", styles: [":host{display:block}:host ::ng-deep .NgxEditor .ProseMirror table{width:100%;border-collapse:collapse;table-layout:fixed;margin:12px 0}:host ::ng-deep .NgxEditor .ProseMirror td,:host ::ng-deep .NgxEditor .ProseMirror th{position:relative;min-width:60px;border:1px solid #aaa;padding:8px;vertical-align:top}:host ::ng-deep .NgxEditor .ProseMirror td>p,:host ::ng-deep .NgxEditor .ProseMirror th>p{margin:0}:host ::ng-deep .NgxEditor .ProseMirror .selectedCell{background:#3f51b51f}mat-expansion-panel{border-radius:0!important}.post-actions{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;padding:1rem;border-bottom:1px solid rgba(136,136,136,.2)}.post-status{margin-right:auto;text-transform:capitalize;opacity:.7}.buttons{display:flex;flex-wrap:wrap;gap:.5rem}.post-article{max-width:760px;margin:0 auto;padding:clamp(1.5rem,5vw,4rem) 1.5rem;overflow-wrap:anywhere}.post-settings{display:grid;gap:1rem;margin-top:1rem}.post-setting-card{display:block;padding:20px}.post-title{margin:0 0 1.5rem;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.15;letter-spacing:-.03em}.post-excerpt{margin:0 0 2rem;font-size:1.35rem;line-height:1.6;opacity:.7;white-space:pre-wrap}.post-body{font-family:Georgia,Times New Roman,serif;font-size:1.2rem;line-height:1.8;white-space:pre-wrap}.editable{min-height:1.2em;outline:none}.editable:focus{box-shadow:-3px 0 #8885}.editable:empty:before{content:attr(data-placeholder);opacity:.4;pointer-events:none}.post-content-editor{border:1px solid rgba(136,136,136,.3333333333);border-radius:4px;overflow:hidden}.raw-content{display:block;box-sizing:border-box;width:100%;min-height:20rem;padding:1rem;resize:vertical;border:0;color:inherit;background:transparent;font-family:monospace}ngx-editor{display:block;min-height:20rem}.content-preview{min-height:12rem;padding:1rem}.slug-field{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:3rem;padding-top:1rem;border-top:1px solid rgba(136,136,136,.2);font-size:.875rem}.slug-field input{flex:1;min-width:160px;padding:.5rem;color:inherit;background:transparent;border:1px solid rgba(136,136,136,.3333333333);border-radius:4px}.error{padding:1rem;color:#b3261e}.post-type-selector{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.post-type-accordion{display:block;margin-bottom:1rem}.post-type-accordion mat-panel-title{align-items:center;gap:.5rem}.media-attachment,.post-thumbnail,.post-taxonomy,.parent-post,.related-posts,.post-version-links,.application-hook,.post-permissions{margin-top:1.5rem;font-size:.875rem}.media-attachment h2,.post-thumbnail h2,.post-taxonomy h2,.parent-post h2,.related-posts h2,.post-version-links h2,.application-hook h2,.post-permissions h2{font-size:1rem}.media-attachment .thumbnail-preview,.post-thumbnail .thumbnail-preview,.post-taxonomy .thumbnail-preview,.parent-post .thumbnail-preview,.related-posts .thumbnail-preview,.post-version-links .thumbnail-preview,.application-hook .thumbnail-preview,.post-permissions .thumbnail-preview{display:block;width:min(100%,480px);max-height:320px;object-fit:contain;border-radius:12px;margin-bottom:.75rem}.media-attachment .post-taxonomy mat-form-field,.post-thumbnail .post-taxonomy mat-form-field,.post-taxonomy .post-taxonomy mat-form-field,.parent-post .post-taxonomy mat-form-field,.related-posts .post-taxonomy mat-form-field,.post-version-links .post-taxonomy mat-form-field,.application-hook .post-taxonomy mat-form-field,.post-permissions .post-taxonomy mat-form-field{display:block;margin-top:.75rem}.related-posts ul,.related-child-files ul,.post-permissions ul{padding:0;list-style:none}.related-posts mat-form-field,.related-child-files mat-form-field,.post-permissions mat-form-field{display:block;width:min(100%,28rem);margin-top:.75rem}.related-posts .application-hook,.related-child-files .application-hook,.post-permissions .application-hook{display:grid;align-items:start;gap:.75rem}.related-posts .application-hook mat-form-field,.related-child-files .application-hook mat-form-field,.post-permissions .application-hook mat-form-field{width:min(100%,28rem)}.related-posts li,.related-child-files li,.post-permissions li{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.related-child-files{margin-top:1.5rem;font-size:.875rem}.related-child-files li{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem 0;border-bottom:1px solid rgba(136,136,136,.2)}.related-post-title{flex:1}[cdkDragHandle]{cursor:grab}.related-child-file{flex:1;min-width:0}.related-child-file-heading,.related-child-file-progress,.related-child-progress{display:flex;align-items:center;gap:.75rem}.related-child-file-heading{justify-content:space-between;overflow-wrap:anywhere}.related-child-file-progress{margin-top:.5rem}.related-child-file-progress mat-progress-bar{flex:1}.related-child-progress{margin:.75rem 0}.related-child-progress mat-progress-bar{flex:1}.post-version-link{margin-top:1rem;padding-top:.75rem;border-top:1px solid rgba(136,136,136,.2)}.post-version-link h3{font-size:.95rem}video{max-width:100%;max-height:400px!important}.required-slugs-field{width:100%;margin-top:1rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { post: [{ type: i0.Input, args: [{ isSignal: true, alias: "post", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }], changed: [{ type: i0.Output, args: ["changed"] }], deleted: [{ type: i0.Output, args: ["deleted"] }], editPostRequested: [{ type: i0.Output, args: ["editPostRequested"] }], duplicated: [{ type: i0.Output, args: ["duplicated"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], actionButtonsTemplate: [{ type: i0.Output, args: ["actionButtonsTemplate"] }], actionButtonsTemplateRef: [{
                 type: ViewChild,
                 args: ['actionButtonsTemplate']
@@ -11288,6 +12579,8 @@ var index$1 = /*#__PURE__*/Object.freeze({
     get CmsContext_1793664000000_postVersionLinks () { return CmsContext_1793664000000_postVersionLinks; },
     MIGRATIONS_CLASSES_FOR_CmsContext: MIGRATIONS_CLASSES_FOR_CmsContext,
     PROJECT_NPM_NAME: PROJECT_NPM_NAME,
+    TAON_CMS_MAX_UPLOAD_BYTES: TAON_CMS_MAX_UPLOAD_BYTES,
+    TAON_SPREADSHEET_MAX_BYTES: TAON_SPREADSHEET_MAX_BYTES,
     TaonCmsAbstractContext: TaonCmsAbstractContext,
     TaonCmsApplicationHook: TaonCmsApplicationHook,
     get TaonCmsApplicationHookEntity () { return TaonCmsApplicationHookEntity; },
@@ -11433,6 +12726,7 @@ var index$1 = /*#__PURE__*/Object.freeze({
     TaonCmsWebsiteFeaturesComponent: TaonCmsWebsiteFeaturesComponent,
     TaonCmsWebsiteFeaturesRoutes: TaonCmsWebsiteFeaturesRoutes,
     TaonRelatedPostChooserComponent: TaonRelatedPostChooserComponent,
+    TaonSpreadsheetTableComponent: TaonSpreadsheetTableComponent,
     TaonTaonCmsWebsiteFeatureConfig: TaonTaonCmsWebsiteFeatureConfig,
     contentError: contentError,
     default: index,
@@ -11440,13 +12734,20 @@ var index$1 = /*#__PURE__*/Object.freeze({
     defaultThumbnailUrl: defaultThumbnailUrl,
     extractDocumentHtml: extractDocumentHtml,
     generateVideoThumbnail: generateVideoThumbnail,
+    importSpreadsheetJson: importSpreadsheetJson,
+    inferSpreadsheetData: inferSpreadsheetData,
+    normalizeSpreadsheetKey: normalizeSpreadsheetKey,
+    parseSpreadsheetCsv: parseSpreadsheetCsv,
+    parseSpreadsheetDocument: parseSpreadsheetDocument,
     requireContentId: requireContentId,
     requireContentVersion: requireContentVersion,
     resolveTemplateVariables: resolveTemplateVariables,
+    serializeSpreadsheetCsv: serializeSpreadsheetCsv,
     startCli: startCli,
     trackCmsUpload: trackCmsUpload,
     validateCategoryHierarchy: validateCategoryHierarchy,
     validateContentInput: validateContentInput,
+    validateSpreadsheetData: validateSpreadsheetData,
     validateTaxonomy: validateTaxonomy,
     visiblePixelRatio: visiblePixelRatio
 });
@@ -11455,5 +12756,5 @@ var index$1 = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ID, BUILD_BASE_HREF, BUILD_FRAMEWORK_CLI_NAME, CURRENT_PACKAGE_TAON_VERSION, CURRENT_PACKAGE_VERSION, CmsContext_1792506757808_applicaitonHooks, CmsContext_1793664000000_postVersionLinks, MIGRATIONS_CLASSES_FOR_CmsContext, PROJECT_NPM_NAME, TaonCmsAbstractContext, TaonCmsApplicationHook, TaonCmsApplicationHookEntity, TaonCmsAssetPreviewComponent, TaonCmsAssetsBackofficeComponent, TaonCmsAssetsBackofficeRoutes, TaonCmsBackofficeComponent, TaonCmsBackofficeRoutes, TaonCmsBlockedUsersBackofficeComponent, TaonCmsCategoriesBackofficeRoutes, TaonCmsCategoryAbstractContext, TaonCmsCategoryApiService, TaonCmsCategoryController, TaonCmsCategoryDefaultsValues, TaonCmsCategoryEntity, TaonCmsCategoryMiddleware, TaonCmsCategoryProvider, TaonCmsCategoryRepository, TaonCmsCategoryState, TaonCmsCategorySubscriber, TaonCmsCategoryUtils, TaonCmsCommentAbstractContext, TaonCmsCommentApiService, TaonCmsCommentBlockedPhraseEntity, TaonCmsCommentBlockedUserEntity, TaonCmsCommentController, TaonCmsCommentDefaultsValues, TaonCmsCommentEntity, TaonCmsCommentMiddleware, TaonCmsCommentProvider, TaonCmsCommentRepository, TaonCmsCommentSpamReportEntity, TaonCmsCommentState, TaonCmsCommentSubscriber, TaonCmsCommentUtils, TaonCmsCommentVoteEntity, TaonCmsCommentsAllPreviewBackofficeComponent, TaonCmsCommentsAllPreviewBackofficeRoutes, TaonCmsCommentsBackofficeComponent, TaonCmsCommentsBackofficeRoutes, TaonCmsCommentsBlockedUsersRoutes, TaonCmsCommentsComponent, TaonCmsCommentsFiltersSettingsComponent, TaonCmsCommentsFiltersSettingsRoutes, TaonCmsContentAbstractContext, TaonCmsContentApiService, TaonCmsContentAssetAbstractContext, TaonCmsContentAssetApiService, TaonCmsContentAssetController, TaonCmsContentAssetDefaultsValues, TaonCmsContentAssetEntity, TaonCmsContentAssetMiddleware, TaonCmsContentAssetProvider, TaonCmsContentAssetRepository, TaonCmsContentAssetState, TaonCmsContentAssetSubscriber, TaonCmsContentAssetUtils, TaonCmsContentConfigService, TaonCmsContentController, TaonCmsContentDefaultsValues, TaonCmsContentEntity, TaonCmsContentMiddleware, TaonCmsContentPermissionAbstractContext, TaonCmsContentPermissionApiService, TaonCmsContentPermissionController, TaonCmsContentPermissionDefaultsValues, TaonCmsContentPermissionEntity, TaonCmsContentPermissionMiddleware, TaonCmsContentPermissionProvider, TaonCmsContentPermissionRepository, TaonCmsContentPermissionState, TaonCmsContentPermissionSubscriber, TaonCmsContentPermissionUtils, TaonCmsContentProvider, TaonCmsContentRepository, TaonCmsContentRevisionAbstractContext, TaonCmsContentRevisionApiService, TaonCmsContentRevisionController, TaonCmsContentRevisionDefaultsValues, TaonCmsContentRevisionEntity, TaonCmsContentRevisionMiddleware, TaonCmsContentRevisionProvider, TaonCmsContentRevisionRepository, TaonCmsContentRevisionState, TaonCmsContentRevisionSubscriber, TaonCmsContentRevisionUtils, TaonCmsContentState, TaonCmsContentStorageController, TaonCmsContentSubscriber, TaonCmsContentTagAbstractContext, TaonCmsContentTagApiService, TaonCmsContentTagController, TaonCmsContentTagDefaultsValues, TaonCmsContentTagEntity, TaonCmsContentTagMiddleware, TaonCmsContentTagProvider, TaonCmsContentTagRepository, TaonCmsContentTagState, TaonCmsContentTagSubscriber, TaonCmsContentTagUtils, TaonCmsContentType, TaonCmsContentUtils, TaonCmsCourseBackofficeComponent, TaonCmsCourseBackofficeRoutes, TaonCmsCourseContentsComponent, TaonCmsCourseCoverComponent, TaonCmsEditableDirective, TaonCmsPostChoiceDialogComponent, TaonCmsPostComponent, TaonCmsPostDetailsPageComponent, TaonCmsPostRoutes, TaonCmsPostTableActions, TaonCmsPostThumbnailComponent, TaonCmsPostsBackofficeComponent, TaonCmsPostsBackofficeRoutes, TaonCmsRevisionChooserComponent, TaonCmsTagAbstractContext, TaonCmsTagApiService, TaonCmsTagController, TaonCmsTagDefaultsValues, TaonCmsTagEntity, TaonCmsTagMiddleware, TaonCmsTagProvider, TaonCmsTagRepository, TaonCmsTagState, TaonCmsTagSubscriber, TaonCmsTagUtils, TaonCmsTagsBackofficeRoutes, TaonCmsTaxonomyBackofficeComponent, TaonCmsTaxonomyQuickCreateDialogComponent, TaonCmsWebsiteFeatureAbstractContext, TaonCmsWebsiteFeatureApiService, TaonCmsWebsiteFeatureConfigService, TaonCmsWebsiteFeatureController, TaonCmsWebsiteFeatureDefaultsValues, TaonCmsWebsiteFeatureErrors, TaonCmsWebsiteFeatureKvRepository, TaonCmsWebsiteFeatureModels, TaonCmsWebsiteFeatureProvider, TaonCmsWebsiteFeatureTranslationErorsMap, TaonCmsWebsiteFeatureUtils, TaonCmsWebsiteFeatureValidators, TaonCmsWebsiteFeaturesComponent, TaonCmsWebsiteFeaturesRoutes, TaonRelatedPostChooserComponent, TaonTaonCmsWebsiteFeatureConfig, contentError, defaultThumbnailKey, defaultThumbnailUrl, extractDocumentHtml, generateVideoThumbnail, requireContentId, requireContentVersion, resolveTemplateVariables, startCli, trackCmsUpload, validateCategoryHierarchy, validateContentInput, validateTaxonomy, visiblePixelRatio };
+export { APP_ID, BUILD_BASE_HREF, BUILD_FRAMEWORK_CLI_NAME, CURRENT_PACKAGE_TAON_VERSION, CURRENT_PACKAGE_VERSION, CmsContext_1792506757808_applicaitonHooks, CmsContext_1793664000000_postVersionLinks, MIGRATIONS_CLASSES_FOR_CmsContext, PROJECT_NPM_NAME, TAON_CMS_MAX_UPLOAD_BYTES, TAON_SPREADSHEET_MAX_BYTES, TaonCmsAbstractContext, TaonCmsApplicationHook, TaonCmsApplicationHookEntity, TaonCmsAssetPreviewComponent, TaonCmsAssetsBackofficeComponent, TaonCmsAssetsBackofficeRoutes, TaonCmsBackofficeComponent, TaonCmsBackofficeRoutes, TaonCmsBlockedUsersBackofficeComponent, TaonCmsCategoriesBackofficeRoutes, TaonCmsCategoryAbstractContext, TaonCmsCategoryApiService, TaonCmsCategoryController, TaonCmsCategoryDefaultsValues, TaonCmsCategoryEntity, TaonCmsCategoryMiddleware, TaonCmsCategoryProvider, TaonCmsCategoryRepository, TaonCmsCategoryState, TaonCmsCategorySubscriber, TaonCmsCategoryUtils, TaonCmsCommentAbstractContext, TaonCmsCommentApiService, TaonCmsCommentBlockedPhraseEntity, TaonCmsCommentBlockedUserEntity, TaonCmsCommentController, TaonCmsCommentDefaultsValues, TaonCmsCommentEntity, TaonCmsCommentMiddleware, TaonCmsCommentProvider, TaonCmsCommentRepository, TaonCmsCommentSpamReportEntity, TaonCmsCommentState, TaonCmsCommentSubscriber, TaonCmsCommentUtils, TaonCmsCommentVoteEntity, TaonCmsCommentsAllPreviewBackofficeComponent, TaonCmsCommentsAllPreviewBackofficeRoutes, TaonCmsCommentsBackofficeComponent, TaonCmsCommentsBackofficeRoutes, TaonCmsCommentsBlockedUsersRoutes, TaonCmsCommentsComponent, TaonCmsCommentsFiltersSettingsComponent, TaonCmsCommentsFiltersSettingsRoutes, TaonCmsContentAbstractContext, TaonCmsContentApiService, TaonCmsContentAssetAbstractContext, TaonCmsContentAssetApiService, TaonCmsContentAssetController, TaonCmsContentAssetDefaultsValues, TaonCmsContentAssetEntity, TaonCmsContentAssetMiddleware, TaonCmsContentAssetProvider, TaonCmsContentAssetRepository, TaonCmsContentAssetState, TaonCmsContentAssetSubscriber, TaonCmsContentAssetUtils, TaonCmsContentConfigService, TaonCmsContentController, TaonCmsContentDefaultsValues, TaonCmsContentEntity, TaonCmsContentMiddleware, TaonCmsContentPermissionAbstractContext, TaonCmsContentPermissionApiService, TaonCmsContentPermissionController, TaonCmsContentPermissionDefaultsValues, TaonCmsContentPermissionEntity, TaonCmsContentPermissionMiddleware, TaonCmsContentPermissionProvider, TaonCmsContentPermissionRepository, TaonCmsContentPermissionState, TaonCmsContentPermissionSubscriber, TaonCmsContentPermissionUtils, TaonCmsContentProvider, TaonCmsContentRepository, TaonCmsContentRevisionAbstractContext, TaonCmsContentRevisionApiService, TaonCmsContentRevisionController, TaonCmsContentRevisionDefaultsValues, TaonCmsContentRevisionEntity, TaonCmsContentRevisionMiddleware, TaonCmsContentRevisionProvider, TaonCmsContentRevisionRepository, TaonCmsContentRevisionState, TaonCmsContentRevisionSubscriber, TaonCmsContentRevisionUtils, TaonCmsContentState, TaonCmsContentStorageController, TaonCmsContentSubscriber, TaonCmsContentTagAbstractContext, TaonCmsContentTagApiService, TaonCmsContentTagController, TaonCmsContentTagDefaultsValues, TaonCmsContentTagEntity, TaonCmsContentTagMiddleware, TaonCmsContentTagProvider, TaonCmsContentTagRepository, TaonCmsContentTagState, TaonCmsContentTagSubscriber, TaonCmsContentTagUtils, TaonCmsContentType, TaonCmsContentUtils, TaonCmsCourseBackofficeComponent, TaonCmsCourseBackofficeRoutes, TaonCmsCourseContentsComponent, TaonCmsCourseCoverComponent, TaonCmsEditableDirective, TaonCmsPostChoiceDialogComponent, TaonCmsPostComponent, TaonCmsPostDetailsPageComponent, TaonCmsPostRoutes, TaonCmsPostTableActions, TaonCmsPostThumbnailComponent, TaonCmsPostsBackofficeComponent, TaonCmsPostsBackofficeRoutes, TaonCmsRevisionChooserComponent, TaonCmsTagAbstractContext, TaonCmsTagApiService, TaonCmsTagController, TaonCmsTagDefaultsValues, TaonCmsTagEntity, TaonCmsTagMiddleware, TaonCmsTagProvider, TaonCmsTagRepository, TaonCmsTagState, TaonCmsTagSubscriber, TaonCmsTagUtils, TaonCmsTagsBackofficeRoutes, TaonCmsTaxonomyBackofficeComponent, TaonCmsTaxonomyQuickCreateDialogComponent, TaonCmsWebsiteFeatureAbstractContext, TaonCmsWebsiteFeatureApiService, TaonCmsWebsiteFeatureConfigService, TaonCmsWebsiteFeatureController, TaonCmsWebsiteFeatureDefaultsValues, TaonCmsWebsiteFeatureErrors, TaonCmsWebsiteFeatureKvRepository, TaonCmsWebsiteFeatureModels, TaonCmsWebsiteFeatureProvider, TaonCmsWebsiteFeatureTranslationErorsMap, TaonCmsWebsiteFeatureUtils, TaonCmsWebsiteFeatureValidators, TaonCmsWebsiteFeaturesComponent, TaonCmsWebsiteFeaturesRoutes, TaonRelatedPostChooserComponent, TaonSpreadsheetTableComponent, TaonTaonCmsWebsiteFeatureConfig, contentError, defaultThumbnailKey, defaultThumbnailUrl, extractDocumentHtml, generateVideoThumbnail, importSpreadsheetJson, inferSpreadsheetData, normalizeSpreadsheetKey, parseSpreadsheetCsv, parseSpreadsheetDocument, requireContentId, requireContentVersion, resolveTemplateVariables, serializeSpreadsheetCsv, startCli, trackCmsUpload, validateCategoryHierarchy, validateContentInput, validateSpreadsheetData, validateTaxonomy, visiblePixelRatio };
 //# sourceMappingURL=cms-websql.mjs.map