@taon-dev/cms 21.0.25 → 21.0.27

package/full-dts/taon-posts/taon-cms-post/taon-cms-post.component.d.ts

@@ -16,6 +16,7 @@ import type { TaonCmsPostVersionKind, TaonCmsPostVersionLinks } from '../../taon
 import { TaonCmsContentType } from '../../taon-cms-content/taon-cms-content.models';
 import type { TaonCmsTemplateVariable } from '../../taon-cms-content/taon-cms-template-variables';
 import type { TaonCmsTagEntity } from '../../taon-cms-tag/taon-cms-tag.entity';
+import type { TaonSpreadsheetData } from '../../taon-spreadsheet-table/taon-spreadsheet-table.models';
 import type { TaonCmsPostDraft, TaonCmsPostMode } from './taon-cms-post.models';
 interface RelatedChildFileSelection {
     id: number;
@@ -31,6 +32,7 @@ interface RelatedChildFileSelection {
 }
 export declare class TaonCmsPostComponent implements AfterViewInit, OnDestroy {
     readonly t: Translation;
+    readonly contentType: typeof TaonCmsContentType;
     readonly post: import("@angular/core", { with: { "resolution-mode": "import" } }).InputSignal<TaonCmsContentEntity>;
     readonly mode: import("@angular/core", { with: { "resolution-mode": "import" } }).ModelSignal<TaonCmsPostMode>;
     readonly changed: import("@angular/core", { with: { "resolution-mode": "import" } }).OutputEmitterRef<TaonCmsContentEntity>;
@@ -46,6 +48,8 @@ export declare class TaonCmsPostComponent implements AfterViewInit, OnDestroy {
     readonly visibilityInheritedTooltip: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<string>;
     readonly placeholderTellYourStory: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<string>;
     readonly draft: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<TaonCmsPostDraft>;
+    readonly jsonTableData: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<TaonSpreadsheetData>;
+    readonly jsonTableValidationError: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<string>;
     readonly postTypes: {
         value: TaonCmsContentType;
         label: string;
@@ -54,7 +58,7 @@ export declare class TaonCmsPostComponent implements AfterViewInit, OnDestroy {
         value: TaonCmsContentType;
         label: string;
     }>;
-    readonly currentPostTypeIcon: import("@angular/core", { with: { "resolution-mode": "import" } }).Signal<"video_library" | "audiotrack" | "attach_file" | "article">;
+    readonly currentPostTypeIcon: import("@angular/core", { with: { "resolution-mode": "import" } }).Signal<"video_library" | "audiotrack" | "attach_file" | "table_chart" | "article">;
     private readonly mediaAttachments;
     protected readonly tableCommands: {
         label: string;
@@ -99,6 +103,9 @@ export declare class TaonCmsPostComponent implements AfterViewInit, OnDestroy {
     private readonly stagedThumbnail;
     readonly uploading: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<boolean>;
     readonly uploadProgress: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<number>;
+    private mediaUploadAbort;
+    private childUploadAbort;
+    readonly childUploadRunning: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<boolean>;
     readonly mediaPreviewUrl: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<string>;
     readonly mediaPreviewLoading: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<boolean>;
     readonly mediaPreviewError: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<string>;
@@ -142,7 +149,7 @@ export declare class TaonCmsPostComponent implements AfterViewInit, OnDestroy {
     }>;
     readonly visibilityLoading: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<boolean>;
     readonly visibilityError: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<boolean>;
-    readonly draftStatus: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<"draft" | "published" | "archived">;
+    readonly draftStatus: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<"published" | "draft" | "archived">;
     readonly subtitleEmpty: import("@angular/core", { with: { "resolution-mode": "import" } }).Signal<boolean>;
     readonly descriptionEmpty: import("@angular/core", { with: { "resolution-mode": "import" } }).Signal<boolean>;
     readonly permissionSource: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<{
@@ -162,6 +169,8 @@ export declare class TaonCmsPostComponent implements AfterViewInit, OnDestroy {
     readonly statusControlDisabled: import("@angular/core", { with: { "resolution-mode": "import" } }).Signal<boolean>;
     private readonly api;
     private readonly contentConfig;
+    get requiredSlugs(): string[];
+    readonly selectedRequiredSlug: import("@angular/core", { with: { "resolution-mode": "import" } }).Signal<string>;
     readonly contentTab: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<number>;
     readonly contentEditor: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<Editor>;
     readonly rawContent: import("@angular/core", { with: { "resolution-mode": "import" } }).Signal<ElementRef<HTMLTextAreaElement>>;
@@ -226,12 +235,17 @@ export declare class TaonCmsPostComponent implements AfterViewInit, OnDestroy {
     private cleanupRelatedChildUploads;
     private updateRelatedChildFile;
     fileSelected(event: Event): Promise<void>;
+    cancelMediaUpload(): void;
+    cancelRelatedChildUploads(): void;
+    private fileTooLargeMessage;
+    private uploadErrorDetails;
     removeMedia(): void;
     private uploadedMediaUrl;
     private getMediaLink;
     private getMediaLinkForView;
     mediaFileName(key: string): string;
     updateSlug(event: Event): void;
+    selectRequiredSlug(slug: string | null): void;
     edit(): void;
     cancel(): void;
     save(): void;
@@ -245,6 +259,8 @@ export declare class TaonCmsPostComponent implements AfterViewInit, OnDestroy {
     private updateInput;
     private requirePost;
     private setPost;
+    setJsonTableData(value: TaonSpreadsheetData): void;
+    private loadJsonTableData;
     private setApplicationHookSelection;
     private acceptPost;
     private persist;

package/full-dts/taon-spreadsheet-table/index.d.ts

@@ -0,0 +1,4 @@
+// @ts-nocheck
+export * from './taon-spreadsheet-table.models';
+export * from './taon-spreadsheet-table.utils';
+export * from './taon-spreadsheet-table.component';

package/full-dts/taon-spreadsheet-table/taon-spreadsheet-table.component.d.ts

@@ -0,0 +1,51 @@
+// @ts-nocheck
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import type { TaonSpreadsheetColumn, TaonSpreadsheetColumnType, TaonSpreadsheetData } from './taon-spreadsheet-table.models';
+export declare class TaonSpreadsheetTableComponent {
+    readonly data: import("@angular/core", { with: { "resolution-mode": "import" } }).ModelSignal<TaonSpreadsheetData>;
+    readonly readOnly: import("@angular/core", { with: { "resolution-mode": "import" } }).InputSignal<boolean>;
+    readonly disabled: import("@angular/core", { with: { "resolution-mode": "import" } }).InputSignal<boolean>;
+    readonly validationError: import("@angular/core", { with: { "resolution-mode": "import" } }).ModelSignal<string>;
+    readonly view: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<"json" | "table" | "settings">;
+    readonly activeCell: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<{
+        row: number;
+        column: number;
+    }>;
+    readonly pendingImport: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<TaonSpreadsheetData>;
+    readonly importFormat: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<string>;
+    readonly importMode: import("@angular/core", { with: { "resolution-mode": "import" } }).WritableSignal<"replace" | "append">;
+    readonly columnTypes: TaonSpreadsheetColumnType[];
+    readonly jsonPreview: import("@angular/core", { with: { "resolution-mode": "import" } }).Signal<string>;
+    private readonly undoStack;
+    private readonly redoStack;
+    addColumn(): void;
+    addRow(): void;
+    deleteRow(rowIndex: number): void;
+    duplicateRow(rowIndex: number): void;
+    deleteColumn(columnIndex: number): void;
+    renameColumn(columnIndex: number, field: 'key' | 'label', value: string): void;
+    setColumnType(columnIndex: number, type: TaonSpreadsheetColumnType): void;
+    setCell(rowIndex: number, column: TaonSpreadsheetColumn, event: Event): void;
+    onCellKeydown(event: KeyboardEvent, row: number, column: number): void;
+    onCellPaste(event: ClipboardEvent, rowIndex: number, columnIndex: number): void;
+    onRowDrop(event: CdkDragDrop<TaonSpreadsheetData['rows']>): void;
+    onColumnDrop(event: CdkDragDrop<TaonSpreadsheetColumn[]>): void;
+    undo(): void;
+    redo(): void;
+    importFile(event: Event): Promise<void>;
+    applyImport(): void;
+    cancelImport(): void;
+    previewCell(row: Record<string, unknown>, column: TaonSpreadsheetColumn): string;
+    downloadJson(fullTable?: boolean): void;
+    downloadCsv(): void;
+    copyJson(): Promise<void>;
+    keyFromLabel(label: string): string;
+    setColumnWidth(columnIndex: number, value: string): void;
+    cellValue(rowIndex: number, column: TaonSpreadsheetColumn): string;
+    trackColumn(_index: number, column: TaonSpreadsheetColumn): string;
+    private clearCell;
+    private focusCell;
+    private commit;
+    private canEdit;
+    private download;
+}

package/full-dts/taon-spreadsheet-table/taon-spreadsheet-table.models.d.ts

@@ -0,0 +1,13 @@
+// @ts-nocheck
+export type TaonSpreadsheetColumnType = 'string' | 'number' | 'boolean' | 'date' | 'json';
+export interface TaonSpreadsheetColumn {
+    key: string;
+    label?: string;
+    type: TaonSpreadsheetColumnType;
+    width?: number;
+}
+export interface TaonSpreadsheetData {
+    version: 1;
+    columns: TaonSpreadsheetColumn[];
+    rows: Record<string, unknown>[];
+}

package/full-dts/taon-spreadsheet-table/taon-spreadsheet-table.utils.d.ts

@@ -0,0 +1,10 @@
+// @ts-nocheck
+import type { TaonSpreadsheetData } from './taon-spreadsheet-table.models';
+export declare const TAON_SPREADSHEET_MAX_BYTES = 10000000;
+export declare function normalizeSpreadsheetKey(header: string): string;
+export declare function validateSpreadsheetData(value: unknown): TaonSpreadsheetData;
+export declare function parseSpreadsheetDocument(body: string | null): TaonSpreadsheetData;
+export declare function importSpreadsheetJson(text: string): TaonSpreadsheetData;
+export declare function inferSpreadsheetData(rows: unknown[]): TaonSpreadsheetData;
+export declare function parseSpreadsheetCsv(text: string, delimiter?: ',' | ';' | '\t'): TaonSpreadsheetData;
+export declare function serializeSpreadsheetCsv(data: TaonSpreadsheetData): string;

package/full-dts/taon-spreadsheet-table/taon-spreadsheet-table.utils.spec.d.ts

@@ -0,0 +1,2 @@
+// @ts-nocheck
+export {};

package/html/lib/taon-posts/taon-cms-post/taon-cms-post.component.html

@@ -166,6 +166,14 @@
           </button>
         }
         <section class="post-content-editor">
+          @if (draft().type === contentType.JsonTable) {
+            <taon-spreadsheet-table
+              [data]="jsonTableData()"
+              [disabled]="busy() || dialogOpen()"
+              [validationError]="jsonTableValidationError()"
+              (dataChange)="setJsonTableData($event)"
+              (validationErrorChange)="jsonTableValidationError.set($event)" />
+          } @else {
           <mat-tab-group
             [selectedIndex]="contentTab()"
             (selectedIndexChange)="setContentTab($event)"
@@ -296,6 +304,7 @@
               {{ t.gettext('Post Thumbnail URL') }}
             </button>
           </mat-menu>
+          }
         </section>
         <label class="slug-field">
           <span>{{ t.gettext('URL slug') }}</span>
@@ -306,6 +315,21 @@
             (input)="updateSlug($event)"
             [placeholder]="t.gettext('my-post')" />
         </label>
+        @if (requiredSlugs.length) {
+          <mat-form-field
+            class="required-slugs-field"
+            appearance="outline">
+            <mat-label>{{ t.gettext('Required Slugs') }}</mat-label>
+            <mat-select
+              [value]="selectedRequiredSlug()"
+              [disabled]="busy() || dialogOpen()"
+              (selectionChange)="selectRequiredSlug($event.value)">
+              @for (slug of requiredSlugs; track slug) {
+                <mat-option [value]="slug">{{ slug }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        }
       </mat-tab>
       <mat-tab [label]="t.gettext('SETTINGS')">
         <div class="post-settings">
@@ -396,14 +420,14 @@
                             <p
                               class="error"
                               role="alert">
-                              {{ file.error }}
+                              {{ file.error | json }}
                             </p>
                           }
                         } @else if (file.status === 'error') {
                           <p
                             class="error"
                             role="alert">
-                            {{ file.error }}
+                            {{ file.error | json }}
                           </p>
                         } @else {
                           <p>{{ t.gettext('Waiting to upload.') }}</p>
@@ -432,6 +456,14 @@
                 (click)="uploadAndCreateChildren()">
                 {{ t.gettext('Upload and Create Children') }}
               </button>
+              @if (childUploadRunning()) {
+                <button
+                  mat-button
+                  type="button"
+                  (click)="cancelRelatedChildUploads()">
+                  {{ t.gettext('Cancel upload') }}
+                </button>
+              }
             </section>
           </mat-card>
           @if (mediaAttachment(); as media) {
@@ -445,6 +477,12 @@
                     mode="determinate"
                     [value]="uploadProgress()"
                     [attr.aria-label]="t.gettext('Media upload progress')" />
+                  <button
+                    mat-button
+                    type="button"
+                    (click)="cancelMediaUpload()">
+                    {{ t.gettext('Cancel upload') }}
+                  </button>
                 }
                 @if (draft()[media.key]; as key) {
                   @if (mediaPreviewLoading()) {
@@ -1207,9 +1245,16 @@
     @if (post.excerpt) {
       <p class="post-excerpt">{{ post.excerpt }}</p>
     }
-    <div
-      class="post-body"
-      [innerHTML]="resolvedBody()"></div>
+    @if (post.type === contentType.JsonTable) {
+      <taon-spreadsheet-table
+        [data]="jsonTableData()"
+        [validationError]="jsonTableValidationError()"
+        [readOnly]="true" />
+    } @else {
+      <div
+        class="post-body"
+        [innerHTML]="resolvedBody()"></div>
+    }
     @if (mediaAttachment(); as media) {
       @if (draft()[media.key]; as key) {
         @if (mediaPreviewLoading()) {

package/html/lib/taon-spreadsheet-table/taon-spreadsheet-table.component.html

@@ -0,0 +1,364 @@
+<section
+  class="spreadsheet"
+  [class.read-only]="readOnly() || disabled()">
+  <header class="toolbar">
+    @if (!readOnly()) {
+      <button
+        mat-button
+        type="button"
+        [disabled]="disabled()"
+        (click)="addRow()">
+        <mat-icon>add</mat-icon> Add row
+      </button>
+      <button
+        mat-button
+        type="button"
+        [disabled]="disabled()"
+        (click)="addColumn()">
+        <mat-icon>view_column</mat-icon> Add column
+      </button>
+      <label class="import-button">
+        <mat-icon>upload_file</mat-icon> Import JSON/CSV
+        <input
+          type="file"
+          accept=".json,.csv,application/json,text/csv"
+          [disabled]="disabled()"
+          (change)="importFile($event)" />
+      </label>
+      <button
+        mat-button
+        type="button"
+        [disabled]="disabled()"
+        (click)="undo()">
+        Undo
+      </button>
+      <button
+        mat-button
+        type="button"
+        [disabled]="disabled()"
+        (click)="redo()">
+        Redo
+      </button>
+    }
+    <div class="w-full">
+      <button
+        mat-button
+        type="button"
+        (click)="view.set('table')">
+        Table
+      </button>
+      <button
+        mat-button
+        type="button"
+        (click)="view.set('json')">
+        JSON Preview
+      </button>
+    </div>
+    @if (!readOnly()) {
+      <button
+        mat-button
+        type="button"
+        (click)="view.set('settings')">
+        Settings
+      </button>
+      <button
+        mat-button
+        type="button"
+        (click)="downloadJson()">
+        Export JSON
+      </button>
+      <button
+        mat-button
+        type="button"
+        (click)="downloadJson(true)">
+        Full JSON
+      </button>
+      <button
+        mat-button
+        type="button"
+        (click)="downloadCsv()">
+        Export CSV
+      </button>
+    }
+  </header>
+
+  @if (validationError()) {
+    <p
+      class="validation-error"
+      role="alert">
+      {{ validationError() }}
+    </p>
+  }
+
+  @if (pendingImport(); as imported) {
+    <section
+      class="import-preview"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="import-preview-title">
+      <h2 id="import-preview-title">Preview {{ importFormat() }} import</h2>
+      <p>
+        {{ imported.rows.length }} rows · {{ imported.columns.length }} columns
+      </p>
+      @if (data().rows.length || data().columns.length) {
+        <label>
+          Import mode
+          <mat-select
+            [value]="importMode()"
+            (selectionChange)="importMode.set($event.value)">
+            <mat-option value="replace">Replace table</mat-option>
+            <mat-option value="append">Append rows</mat-option>
+          </mat-select>
+        </label>
+      }
+      <div class="table-scroll">
+        <table>
+          <thead>
+            <tr>
+              @for (column of imported.columns; track column.key) {
+                <th>
+                  {{ column.label || column.key }}
+                  <small>{{ column.key }} · {{ column.type }}</small>
+                </th>
+              }
+            </tr>
+          </thead>
+          <tbody>
+            @for (row of imported.rows.slice(0, 5); track $index) {
+              <tr>
+                @for (column of imported.columns; track column.key) {
+                  <td>{{ previewCell(row, column) }}</td>
+                }
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+      <footer>
+        <button
+          mat-button
+          type="button"
+          (click)="cancelImport()">
+          Cancel
+        </button>
+        <button
+          mat-flat-button
+          type="button"
+          (click)="applyImport()">
+          Apply import
+        </button>
+      </footer>
+    </section>
+  }
+
+  @if (view() === 'table') {
+    @if (!data().columns.length) {
+      <div class="empty-state">
+        <p>No columns yet. Add a column or import a JSON/CSV file.</p>
+        @if (!readOnly()) {
+          <button
+            mat-stroked-button
+            type="button"
+            (click)="addColumn()">
+            Add first column
+          </button>
+        }
+      </div>
+    } @else {
+      <div class="table-scroll">
+        <table>
+          <thead
+            cdkDropList
+            cdkDropListOrientation="horizontal"
+            [cdkDropListDisabled]="readOnly() || disabled()"
+            (cdkDropListDropped)="onColumnDrop($event)">
+            <tr>
+              <th class="row-number">#</th>
+              @for (
+                column of data().columns;
+                track trackColumn($index, column)
+              ) {
+                <th
+                  cdkDrag
+                  cdkDragHandle
+                  [cdkDragDisabled]="readOnly() || disabled()"
+                  [style.minWidth.px]="column.width || 140">
+                  {{ column.label || column.key }}
+                  @if (!readOnly()) {
+                    <small>{{ column.type }}</small>
+                  }
+                </th>
+              }
+              @if (!readOnly()) {
+                <th class="row-actions">Actions</th>
+              }
+            </tr>
+          </thead>
+          <tbody
+            cdkDropList
+            [cdkDropListDisabled]="readOnly() || disabled()"
+            (cdkDropListDropped)="onRowDrop($event)">
+            @for (row of data().rows; track $index; let rowIndex = $index) {
+              <tr
+                cdkDrag
+                [cdkDragDisabled]="readOnly() || disabled()">
+                <th
+                  class="row-number"
+                  cdkDragHandle>
+                  {{ rowIndex + 1 }}
+                </th>
+                @for (
+                  column of data().columns;
+                  track trackColumn($index, column);
+                  let columnIndex = $index
+                ) {
+                  <td
+                    [class.active]="
+                      activeCell()?.row === rowIndex &&
+                      activeCell()?.column === columnIndex
+                    ">
+                    @if (column.type === 'boolean') {
+                      <input
+                        type="checkbox"
+                        [checked]="row[column.key] === true"
+                        [disabled]="readOnly() || disabled()"
+                        [attr.data-cell]="rowIndex + ':' + columnIndex"
+                        (focus)="
+                          activeCell.set({ row: rowIndex, column: columnIndex })
+                        "
+                        (change)="setCell(rowIndex, column, $event)"
+                        (keydown)="
+                          onCellKeydown($event, rowIndex, columnIndex)
+                        " />
+                    } @else if (column.type === 'json') {
+                      <textarea
+                        [value]="cellValue(rowIndex, column)"
+                        [readonly]="readOnly() || disabled()"
+                        [attr.data-cell]="rowIndex + ':' + columnIndex"
+                        (focus)="
+                          activeCell.set({ row: rowIndex, column: columnIndex })
+                        "
+                        (input)="setCell(rowIndex, column, $event)"
+                        (paste)="onCellPaste($event, rowIndex, columnIndex)"
+                        (keydown)="
+                          onCellKeydown($event, rowIndex, columnIndex)
+                        "></textarea>
+                    } @else {
+                      <input
+                        [type]="
+                          column.type === 'number'
+                            ? 'number'
+                            : column.type === 'date'
+                              ? 'date'
+                              : 'text'
+                        "
+                        [value]="cellValue(rowIndex, column)"
+                        [readonly]="readOnly() || disabled()"
+                        [attr.data-cell]="rowIndex + ':' + columnIndex"
+                        (focus)="
+                          activeCell.set({ row: rowIndex, column: columnIndex })
+                        "
+                        (input)="setCell(rowIndex, column, $event)"
+                        (paste)="onCellPaste($event, rowIndex, columnIndex)"
+                        (keydown)="
+                          onCellKeydown($event, rowIndex, columnIndex)
+                        " />
+                    }
+                  </td>
+                }
+                @if (!readOnly()) {
+                  <td class="row-actions">
+                    <button
+                      mat-icon-button
+                      type="button"
+                      aria-label="Duplicate row"
+                      (click)="duplicateRow(rowIndex)">
+                      <mat-icon>content_copy</mat-icon>
+                    </button>
+                    <button
+                      mat-icon-button
+                      type="button"
+                      aria-label="Delete row"
+                      (click)="deleteRow(rowIndex)">
+                      <mat-icon>delete</mat-icon>
+                    </button>
+                  </td>
+                }
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    }
+  } @else if (view() === 'json') {
+    <div class="json-preview">
+      <button
+        mat-stroked-button
+        type="button"
+        (click)="copyJson()">
+        Copy JSON
+      </button>
+      <pre>{{ jsonPreview() }}</pre>
+    </div>
+  } @else {
+    <div class="settings">
+      @for (
+        column of data().columns;
+        track trackColumn($index, column);
+        let columnIndex = $index
+      ) {
+        <fieldset>
+          <legend>Column {{ columnIndex + 1 }}</legend>
+          <label>
+            Label
+            <input
+              [value]="column.label || ''"
+              [disabled]="disabled()"
+              (change)="
+                renameColumn(columnIndex, 'label', $any($event.target).value)
+              " />
+          </label>
+          <label>
+            Key
+            <input
+              [value]="column.key"
+              [disabled]="disabled()"
+              (change)="
+                renameColumn(columnIndex, 'key', $any($event.target).value)
+              " />
+          </label>
+          <label>
+            Type
+            <mat-select
+              [value]="column.type"
+              [disabled]="disabled()"
+              (selectionChange)="setColumnType(columnIndex, $event.value)">
+              @for (type of columnTypes; track type) {
+                <mat-option [value]="type">{{ type }}</mat-option>
+              }
+            </mat-select>
+          </label>
+          <label>
+            Width (px)
+            <input
+              type="number"
+              min="40"
+              max="1000"
+              [value]="column.width || 140"
+              [disabled]="disabled()"
+              (change)="
+                setColumnWidth(columnIndex, $any($event.target).value)
+              " />
+          </label>
+          <button
+            mat-stroked-button
+            type="button"
+            [disabled]="disabled()"
+            (click)="deleteColumn(columnIndex)">
+            Delete column
+          </button>
+        </fieldset>
+      }
+    </div>
+  }
+</section>