@thecodeblogs/blog 0.20.7 → 0.30.0

package/fesm2022/thecodeblogs-blog.mjs

@@ -4,7 +4,7 @@ import { Injectable, EventEmitter, PLATFORM_ID, Inject, SecurityContext, Compone
 import * as i1 from '@angular/common/http';
 import { HttpParams } from '@angular/common/http';
 import { map, debounceTime } from 'rxjs/operators';
-import { Subject, of, debounceTime as debounceTime$1, Subscription } from 'rxjs';
+import { Subject, of, debounceTime as debounceTime$1, ReplaySubject, map as map$2, catchError, Subscription } from 'rxjs';
 import * as i6 from '@angular/common';
 import { isPlatformBrowser, NgIf, CommonModule } from '@angular/common';
 import * as i2 from 'ngx-device-detector';
@@ -16,7 +16,7 @@ import * as i3 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i4 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
-import * as i5 from '@angular/material/button';
+import * as i15 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i6$1 from 'ng2-file-upload';
 import { FileUploader, FileUploadModule } from 'ng2-file-upload';
@@ -51,7 +51,7 @@ import { QuillEditorComponent } from 'ngx-quill';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import * as i4$1 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import * as i2$1 from '@angular/material/sidenav';
+import * as i3$2 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import * as i9$1 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
@@ -771,7 +771,7 @@ class EntrySelectorDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: EntrySelectorDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: EntryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: EntrySelectorDialogComponent, isStandalone: true, selector: "app-entry-selector-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Select an Entry to Edit</h1>\n<!--<mat-radio-group aria-label=\"Select an option\">-->\n<!--    <mat-radio-button class=\"option\" value=\"unpublished\">Unpublished</mat-radio-button>-->\n<!--    <mat-radio-button class=\"option\" value=\"published\">Published</mat-radio-button>-->\n<!--</mat-radio-group>-->\n<mat-divider class=\"option-list-divider\"></mat-divider>\n<div mat-dialog-content>\n\n  <table mat-table [dataSource]=entries>\n    <ng-container matColumnDef=\"id\">\n      <th mat-header-cell *matHeaderCellDef> Id </th>\n      <td mat-cell *matCellDef=\"let entry\"> {{entry.id}} </td>\n    </ng-container>\n    <ng-container matColumnDef=\"title\">\n      <th mat-header-cell *matHeaderCellDef> Title </th>\n      <td mat-cell *matCellDef=\"let entry\"> {{entry.title}} </td>\n    </ng-container>\n    <ng-container matColumnDef=\"create_date\">\n      <th mat-header-cell *matHeaderCellDef> Created </th>\n      <td mat-cell *matCellDef=\"let entry\"> {{entry.create_date}} </td>\n    </ng-container>\n    <ng-container matColumnDef=\"actions\">\n      <th mat-header-cell *matHeaderCellDef> Actions </th>\n      <td mat-cell *matCellDef=\"let entry\">\n        <button mat-button color=\"primary\" (click)=\"select(entry)\">Edit</button> | <button mat-button color=\"warn\" (click)=\"delete(entry)\">Delete</button>\n      </td>\n    </ng-container>\n    <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n    <tr mat-row *matRowDef=\"let myRowData; columns: columnsToDisplay\"></tr>\n  </table>\n  <div *ngIf=\"!entries?.length\">There are no unpublished entries</div>\n</div>\n<div mat-dialog-actions>\n  <button mat-button (click)=\"onNoClick()\">Cancel</button>\n</div>\n", styles: [".entry-checkbox-container{display:inline-block;width:100%;margin:5px 0}.option-list-divider{margin:10px 0}.option{margin-right:5px}.mat-column-actions{min-width:175px}.mat-column-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:365px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: EntrySelectorDialogComponent, isStandalone: true, selector: "app-entry-selector-dialog", ngImport: i0, template: "<h1 mat-dialog-title>Select an Entry to Edit</h1>\n<!--<mat-radio-group aria-label=\"Select an option\">-->\n<!--    <mat-radio-button class=\"option\" value=\"unpublished\">Unpublished</mat-radio-button>-->\n<!--    <mat-radio-button class=\"option\" value=\"published\">Published</mat-radio-button>-->\n<!--</mat-radio-group>-->\n<mat-divider class=\"option-list-divider\"></mat-divider>\n<div mat-dialog-content>\n\n  <table mat-table [dataSource]=entries>\n    <ng-container matColumnDef=\"id\">\n      <th mat-header-cell *matHeaderCellDef> Id </th>\n      <td mat-cell *matCellDef=\"let entry\"> {{entry.id}} </td>\n    </ng-container>\n    <ng-container matColumnDef=\"title\">\n      <th mat-header-cell *matHeaderCellDef> Title </th>\n      <td mat-cell *matCellDef=\"let entry\"> {{entry.title}} </td>\n    </ng-container>\n    <ng-container matColumnDef=\"create_date\">\n      <th mat-header-cell *matHeaderCellDef> Created </th>\n      <td mat-cell *matCellDef=\"let entry\"> {{entry.create_date}} </td>\n    </ng-container>\n    <ng-container matColumnDef=\"actions\">\n      <th mat-header-cell *matHeaderCellDef> Actions </th>\n      <td mat-cell *matCellDef=\"let entry\">\n        <button mat-button color=\"primary\" (click)=\"select(entry)\">Edit</button> | <button mat-button color=\"warn\" (click)=\"delete(entry)\">Delete</button>\n      </td>\n    </ng-container>\n    <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n    <tr mat-row *matRowDef=\"let myRowData; columns: columnsToDisplay\"></tr>\n  </table>\n  <div *ngIf=\"!entries?.length\">There are no unpublished entries</div>\n</div>\n<div mat-dialog-actions>\n  <button mat-button (click)=\"onNoClick()\">Cancel</button>\n</div>\n", styles: [".entry-checkbox-container{display:inline-block;width:100%;margin:5px 0}.option-list-divider{margin:10px 0}.option{margin-right:5px}.mat-column-actions{min-width:175px}.mat-column-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:365px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i15.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: EntrySelectorDialogComponent, decorators: [{
             type: Component,
@@ -788,6 +788,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                 }] }, { type: EntryService }] });
 
 class MediaUploadModalComponent {
+    isMockUploadMode() {
+        return Boolean(this.uploadService.isMock);
+    }
+    uploadFileInMockMode(file) {
+        if (!file) {
+            return;
+        }
+        const createFromFile = this.uploadService.createFromFile;
+        if (typeof createFromFile !== 'function') {
+            return;
+        }
+        this.uploading = true;
+        createFromFile.call(this.uploadService, file).subscribe((response) => {
+            this.uploadId = response.id;
+            this.imgLink = response[this.uploadUrlKey];
+            this.mimeType = response.mime_type;
+            this.uploading = false;
+        });
+    }
     static getCookie(name) {
         const ca = document.cookie.split(';');
         const caLen = ca.length;
@@ -830,8 +849,11 @@ class MediaUploadModalComponent {
         });
     }
     ngOnInit() {
+        const uploadEndpoint = this.isMockUploadMode()
+            ? this.uploadService.constructor.upload_endpoint || UploadService.upload_endpoint
+            : UploadService.upload_endpoint;
         this.uploader = new FileUploader({
-            url: UploadService.upload_endpoint,
+            url: uploadEndpoint,
             itemAlias: 'file',
             authToken: '',
             headers: [
@@ -851,12 +873,28 @@ class MediaUploadModalComponent {
             this.uploading = false;
         };
         if (this.file) {
-            this.uploader.addToQueue([this.file]);
-            this.uploader.uploadAll();
-            this.uploading = true;
+            if (this.isMockUploadMode()) {
+                this.uploadFileInMockMode(this.file);
+            }
+            else {
+                this.uploader.addToQueue([this.file]);
+                this.uploader.uploadAll();
+                this.uploading = true;
+            }
         }
     }
     onFileSelected(e) {
+        if (this.isMockUploadMode()) {
+            const files = e?.target?.files;
+            if (files && files.length > 0) {
+                this.uploadFileInMockMode(files[0]);
+                return;
+            }
+            if (this.uploader.queue.length > 0) {
+                this.uploadFileInMockMode(this.uploader.queue[0]._file);
+                return;
+            }
+        }
         this.uploader.uploadAll();
         this.uploading = true;
     }
@@ -910,7 +948,13 @@ class MediaUploadModalComponent {
                 }
                 else {
                     for (let i = 0; i < files.length; i++) {
-                        this.uploader.addToQueue([files[i]]);
+                        if (this.isMockUploadMode()) {
+                            this.uploadFileInMockMode(files[i]);
+                            return;
+                        }
+                        else {
+                            this.uploader.addToQueue([files[i]]);
+                        }
                     }
                     this.uploader.uploadAll();
                     this.uploading = true;
@@ -1247,7 +1291,7 @@ class EntryCreatorComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: EntryCreatorComponent, deps: [{ token: i1$3.Router }, { token: EntryService }, { token: TagService }, { token: IdentityService }, { token: i0.ChangeDetectorRef }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: EntryCreatorComponent, isStandalone: true, selector: "app-entry-creator", inputs: { allowedMimeTypes: "allowedMimeTypes", uploadUrlKey: "uploadUrlKey" }, providers: [provideNativeDateAdapter()], viewQueries: [{ propertyName: "tagInput", first: true, predicate: ["tagInput"], descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["tagauto"], descendants: true }], ngImport: i0, template: "<div class=\"section creator fields\">\n  <div style=\"padding: 10px;\">\n    <button\n      style=\"width: 100%;\"\n      mat-raised-button (click)=\"routeTo('create/v2(left-col:create//right-col:create)')\">V2</button>\n  </div>\n  <form #createForm=\"ngForm\" (change)=\"onChange()\" *ngIf=\"this.entry\">\n    <div class=\"form-group\">\n      <mat-form-field class=\"full-width\">\n        <mat-label>Title</mat-label>\n        <input matInput\n               [(ngModel)]=\"entry.title\"\n               name=\"title\">\n      </mat-form-field>\n    </div>\n    <mat-card class=\"form-section tags\">\n      <div>\n        <!--\n        <mat-form-field class=\"full-width\" hintLabel=\"Use a comma to seperate different tags\">\n          <mat-chip-listbox #tagList aria-label=\"Tags\">\n            <mat-chip-option\n                *ngFor=\"let tag of tags\"\n                [selectable]=\"selectable\"\n                [removable]=\"removable\"\n                (removed)=\"remove(tag)\">\n              {{tag}}\n              <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n            </mat-chip-option>\n            <input\n                matInput\n                placeholder=\"Tags...\"\n                #tagInput\n                [formControl]=\"tagCtrl\"\n                [matAutocomplete]=\"tagauto\"\n                [matChipInputFor]=\"tagList\"\n                [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                (matChipInputTokenEnd)=\"add($event)\">\n          </mat-chip-listbox>\n          <mat-autocomplete #tagauto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n            <mat-option *ngFor=\"let tag of filtered_tags | async\" [value]=\"tag\">\n              {{tag}}\n            </mat-option>\n          </mat-autocomplete>\n        </mat-form-field>\n        -->\n      </div>\n    </mat-card>\n    <mat-card class=\"form-section\" *ngFor=\"let section of entry.sections\">\n      <div>\n        <mat-form-field class=\"full-width\">\n          <mat-label>Subheading</mat-label>\n          <input matInput\n                 [(ngModel)]=\"section.subheading\"\n                 name=\"{{section.id}}-subheading\">\n        </mat-form-field>\n        <div class=\"form-content\" *ngFor=\"let content of section.contents\">\n          <div class=\"form-group\">\n            <mat-radio-group\n                aria-label=\"Select the Content Type\"\n                name=\"{{content.id}}-content-type\"\n                class=\"radio-group\"\n                [(ngModel)]=\"content.type\">\n              <mat-radio-button\n                  *ngFor=\"let value of Object.values(ContentType)\"\n                  class=\"radio-button\"\n                  [value]=\"value\">{{value}}\n              </mat-radio-button>\n            </mat-radio-group>\n          </div>\n          <ng-container [ngSwitch]=\"content.type\">\n            <ng-container *ngSwitchCase=\"ContentType.URL\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-value\"\n                    [(ngModel)]=\"content.value\">\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                <mat-label>Title</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-title\"\n                    [(ngModel)]=\"content.title\">\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.TEXT\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <textarea matInput\n                          cdkTextareaAutosize\n                          #autosize=\"cdkTextareaAutosize\"\n                          cdkAutosizeMinRows=\"3\"\n                          cdkAutosizeMaxRows=\"20\"\n                          name=\"{{content.id}}-content-value\"\n                          [(ngModel)]=\"content.value\"\n                          ></textarea>\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.HTML\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <textarea matInput\n                          cdkTextareaAutosize\n                          #autosize=\"cdkTextareaAutosize\"\n                          cdkAutosizeMinRows=\"3\"\n                          cdkAutosizeMaxRows=\"20\"\n                          name=\"{{content.id}}-content-value\"\n                          [(ngModel)]=\"content.value\"\n                          ></textarea>\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.CODE\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <textarea matInput\n                          cdkTextareaAutosize\n                          #autosize=\"cdkTextareaAutosize\"\n                          cdkAutosizeMinRows=\"10\"\n                          cdkAutosizeMaxRows=\"100\"\n                          name=\"{{content.id}}-content-value\"\n                          [(ngModel)]=\"content.value\"\n                          ></textarea>\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.IMAGE\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-value\"\n                    [(ngModel)]=\"content.value\">\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-source\"\n                    [(ngModel)]=\"content.value\">\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                <mat-label>Description</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-description\"\n                    [(ngModel)]=\"content.description\">\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.MEDIA\">\n              <div class=\"full-width\">\n                <ng-container *ngIf=\"content.value\">\n                  <mat-form-field class=\"full-width\">\n                    <mat-label>Value</mat-label>\n                    <input\n                        matInput\n                        name=\"{{content.id}}-content-value\"\n                        [(ngModel)]=\"content.value\">\n                  </mat-form-field>\n                  <mat-form-field class=\"full-width\">\n                    <mat-label>Description</mat-label>\n                    <input\n                        matInput\n                        name=\"{{content.id}}-content-description\"\n                        [(ngModel)]=\"content.description\">\n                  </mat-form-field>\n                </ng-container>\n                <ng-container *ngIf=\"content.additional\">\n                  <ng-container *ngFor=\"let add of content.additional\">\n                    <mat-form-field class=\"full-width\">\n                      <mat-label>{{add.key}}</mat-label>\n                      <input\n                          matInput\n                          name=\"{{content.id}}-content-{{add.key}}\"\n                          [(ngModel)]=\"add.value\"\n                          [disabled]=\"true\"\n                          >\n                    </mat-form-field>\n                  </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!content.value\">\n                  <button mat-raised-button (click)=startUploader(content)>Upload</button>\n                </ng-container>\n              </div>\n            </ng-container>\n          </ng-container>\n          <button mat-raised-button (click)=removeContent(content)>Remove Content</button>\n          <button mat-raised-button (click)=\"addContent(section)\">+ Add Content</button>\n        </div>\n        <button mat-raised-button (click)=\"removeSection(section)\">Remove Section</button>\n        <button mat-raised-button (click)=\"addContent(section)\" *ngIf=\"section.contents.length === 0\">+ Add\n          Content\n        </button>\n        <button mat-raised-button (click)=\"addSection()\">+ Add Section</button>\n      </div>\n\n    </mat-card>\n    <button mat-raised-button (click)=\"addSection()\" *ngIf=\"entry.sections?.length === 0\">+ Add Section</button>\n    <button mat-raised-button (click)=\"addSection()\" *ngIf=\"!entry.sections\">+ Add Section</button>\n\n    <div class=\"controls\">\n      <button mat-raised-button (click)=\"resetDate()\">Reset the Date</button>\n      <button mat-raised-button (click)=\"delete()\">Delete</button>\n      <button mat-raised-button [disabled]=\"scheduling\" (click)=\"publish()\">Publish</button>\n      <button mat-raised-button [disabled]=\"scheduling\" (click)=\"exposeScheduling()\">Schedule</button>\n      <button mat-raised-button (click)=\"startNew()\">New</button>\n    </div>\n    <p *ngIf=\"scheduling\">Publishing is disabled while scheduling is being used.</p>\n\n    <mat-card [hidden]=\"!scheduling\">\n      <h4>\n        Scheduling Options\n      </h4>\n\n      <div class=\"form-group\">\n        <mat-form-field class=\"full-width\">\n          <mat-label>Date</mat-label>\n          <input\n              #futurePublishDate\n              matInput\n              [matDatepicker]=\"picker\"\n              [min]=\"today\"\n              (dateInput)=\"onDateChange()\"\n              (dateChange)=\"onDateChange()\"\n              [(ngModel)]=\"entry.future_publish_date\"\n              name=\"future-publish-date\"\n              >\n              <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n              <mat-datepicker\n                  #picker></mat-datepicker>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Time</mat-label>\n          <input matInput [matTimepicker]=\"pickertwo\">\n            <mat-timepicker-toggle matIconSuffix [for]=\"pickertwo\"/>\n            <mat-timepicker #pickertwo/>\n        </mat-form-field>\n        <p>Times are represented in your local time zone</p>\n      </div>\n\n      <div mat-dialog-actions>\n        <div class=\"controls\">\n          <button mat-raised-button (click)=\"cancelScheduling()\">Cancel Scheduling</button>\n        </div>\n      </div>\n      <p>This post will be published as soon as its scheduled date and time arrive. No further action is needed by you. If you do not\n      want to use scheduling, you can cancel scheduling and manually publish.</p>\n    </mat-card>\n  </form>\n  <div class=\"controls\">\n    <button mat-raised-button (click)=\"seeEntries()\">See Entries</button>\n    <button *ngIf=\"!this.entry\" mat-raised-button (click)=\"startNew()\">New</button>\n  </div>\n</div>\n", styles: [".creator{min-height:calc(100vh - 100px)}form{padding:20px}.content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}button{margin:4px}.radio-group{display:flex;flex-direction:column;margin:15px 0}.radio-button{margin:4px}.full-width{width:100%}.content-card{margin:0 0 10px}.form-section{margin-bottom:10px}.form-content:not(:last-child){border-bottom:1px dotted #aaa;padding-bottom:10px}.controls{display:inline-block;width:100%;padding:10px}[hidden]{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i9.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i10.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i10.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: MatInputModule }, { kind: "directive", type: i11.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: "directive", type: i12.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i13.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i13.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i13.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i14.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i14.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i14.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: EntryCreatorComponent, isStandalone: true, selector: "app-entry-creator", inputs: { allowedMimeTypes: "allowedMimeTypes", uploadUrlKey: "uploadUrlKey" }, providers: [provideNativeDateAdapter()], viewQueries: [{ propertyName: "tagInput", first: true, predicate: ["tagInput"], descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["tagauto"], descendants: true }], ngImport: i0, template: "<div class=\"section creator fields\">\n  <div style=\"padding: 10px;\">\n    <button\n      style=\"width: 100%;\"\n      mat-raised-button (click)=\"routeTo('create/v2(left-col:create//right-col:create)')\">V2</button>\n  </div>\n  <form #createForm=\"ngForm\" (change)=\"onChange()\" *ngIf=\"this.entry\">\n    <div class=\"form-group\">\n      <mat-form-field class=\"full-width\">\n        <mat-label>Title</mat-label>\n        <input matInput\n               [(ngModel)]=\"entry.title\"\n               name=\"title\">\n      </mat-form-field>\n    </div>\n    <mat-card class=\"form-section tags\">\n      <div>\n        <!--\n        <mat-form-field class=\"full-width\" hintLabel=\"Use a comma to seperate different tags\">\n          <mat-chip-listbox #tagList aria-label=\"Tags\">\n            <mat-chip-option\n                *ngFor=\"let tag of tags\"\n                [selectable]=\"selectable\"\n                [removable]=\"removable\"\n                (removed)=\"remove(tag)\">\n              {{tag}}\n              <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n            </mat-chip-option>\n            <input\n                matInput\n                placeholder=\"Tags...\"\n                #tagInput\n                [formControl]=\"tagCtrl\"\n                [matAutocomplete]=\"tagauto\"\n                [matChipInputFor]=\"tagList\"\n                [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                (matChipInputTokenEnd)=\"add($event)\">\n          </mat-chip-listbox>\n          <mat-autocomplete #tagauto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n            <mat-option *ngFor=\"let tag of filtered_tags | async\" [value]=\"tag\">\n              {{tag}}\n            </mat-option>\n          </mat-autocomplete>\n        </mat-form-field>\n        -->\n      </div>\n    </mat-card>\n    <mat-card class=\"form-section\" *ngFor=\"let section of entry.sections\">\n      <div>\n        <mat-form-field class=\"full-width\">\n          <mat-label>Subheading</mat-label>\n          <input matInput\n                 [(ngModel)]=\"section.subheading\"\n                 name=\"{{section.id}}-subheading\">\n        </mat-form-field>\n        <div class=\"form-content\" *ngFor=\"let content of section.contents\">\n          <div class=\"form-group\">\n            <mat-radio-group\n                aria-label=\"Select the Content Type\"\n                name=\"{{content.id}}-content-type\"\n                class=\"radio-group\"\n                [(ngModel)]=\"content.type\">\n              <mat-radio-button\n                  *ngFor=\"let value of Object.values(ContentType)\"\n                  class=\"radio-button\"\n                  [value]=\"value\">{{value}}\n              </mat-radio-button>\n            </mat-radio-group>\n          </div>\n          <ng-container [ngSwitch]=\"content.type\">\n            <ng-container *ngSwitchCase=\"ContentType.URL\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-value\"\n                    [(ngModel)]=\"content.value\">\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                <mat-label>Title</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-title\"\n                    [(ngModel)]=\"content.title\">\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.TEXT\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <textarea matInput\n                          cdkTextareaAutosize\n                          #autosize=\"cdkTextareaAutosize\"\n                          cdkAutosizeMinRows=\"3\"\n                          cdkAutosizeMaxRows=\"20\"\n                          name=\"{{content.id}}-content-value\"\n                          [(ngModel)]=\"content.value\"\n                          ></textarea>\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.HTML\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <textarea matInput\n                          cdkTextareaAutosize\n                          #autosize=\"cdkTextareaAutosize\"\n                          cdkAutosizeMinRows=\"3\"\n                          cdkAutosizeMaxRows=\"20\"\n                          name=\"{{content.id}}-content-value\"\n                          [(ngModel)]=\"content.value\"\n                          ></textarea>\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.CODE\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <textarea matInput\n                          cdkTextareaAutosize\n                          #autosize=\"cdkTextareaAutosize\"\n                          cdkAutosizeMinRows=\"10\"\n                          cdkAutosizeMaxRows=\"100\"\n                          name=\"{{content.id}}-content-value\"\n                          [(ngModel)]=\"content.value\"\n                          ></textarea>\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.IMAGE\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-value\"\n                    [(ngModel)]=\"content.value\">\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-source\"\n                    [(ngModel)]=\"content.value\">\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                <mat-label>Description</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-description\"\n                    [(ngModel)]=\"content.description\">\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.MEDIA\">\n              <div class=\"full-width\">\n                <ng-container *ngIf=\"content.value\">\n                  <mat-form-field class=\"full-width\">\n                    <mat-label>Value</mat-label>\n                    <input\n                        matInput\n                        name=\"{{content.id}}-content-value\"\n                        [(ngModel)]=\"content.value\">\n                  </mat-form-field>\n                  <mat-form-field class=\"full-width\">\n                    <mat-label>Description</mat-label>\n                    <input\n                        matInput\n                        name=\"{{content.id}}-content-description\"\n                        [(ngModel)]=\"content.description\">\n                  </mat-form-field>\n                </ng-container>\n                <ng-container *ngIf=\"content.additional\">\n                  <ng-container *ngFor=\"let add of content.additional\">\n                    <mat-form-field class=\"full-width\">\n                      <mat-label>{{add.key}}</mat-label>\n                      <input\n                          matInput\n                          name=\"{{content.id}}-content-{{add.key}}\"\n                          [(ngModel)]=\"add.value\"\n                          [disabled]=\"true\"\n                          >\n                    </mat-form-field>\n                  </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!content.value\">\n                  <button mat-raised-button (click)=startUploader(content)>Upload</button>\n                </ng-container>\n              </div>\n            </ng-container>\n          </ng-container>\n          <button mat-raised-button (click)=removeContent(content)>Remove Content</button>\n          <button mat-raised-button (click)=\"addContent(section)\">+ Add Content</button>\n        </div>\n        <button mat-raised-button (click)=\"removeSection(section)\">Remove Section</button>\n        <button mat-raised-button (click)=\"addContent(section)\" *ngIf=\"section.contents.length === 0\">+ Add\n          Content\n        </button>\n        <button mat-raised-button (click)=\"addSection()\">+ Add Section</button>\n      </div>\n\n    </mat-card>\n    <button mat-raised-button (click)=\"addSection()\" *ngIf=\"entry.sections?.length === 0\">+ Add Section</button>\n    <button mat-raised-button (click)=\"addSection()\" *ngIf=\"!entry.sections\">+ Add Section</button>\n\n    <div class=\"controls\">\n      <button mat-raised-button (click)=\"resetDate()\">Reset the Date</button>\n      <button mat-raised-button (click)=\"delete()\">Delete</button>\n      <button mat-raised-button [disabled]=\"scheduling\" (click)=\"publish()\">Publish</button>\n      <button mat-raised-button [disabled]=\"scheduling\" (click)=\"exposeScheduling()\">Schedule</button>\n      <button mat-raised-button (click)=\"startNew()\">New</button>\n    </div>\n    <p *ngIf=\"scheduling\">Publishing is disabled while scheduling is being used.</p>\n\n    <mat-card [hidden]=\"!scheduling\">\n      <h4>\n        Scheduling Options\n      </h4>\n\n      <div class=\"form-group\">\n        <mat-form-field class=\"full-width\">\n          <mat-label>Date</mat-label>\n          <input\n              #futurePublishDate\n              matInput\n              [matDatepicker]=\"picker\"\n              [min]=\"today\"\n              (dateInput)=\"onDateChange()\"\n              (dateChange)=\"onDateChange()\"\n              [(ngModel)]=\"entry.future_publish_date\"\n              name=\"future-publish-date\"\n              >\n              <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n              <mat-datepicker\n                  #picker></mat-datepicker>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Time</mat-label>\n          <input matInput [matTimepicker]=\"pickertwo\">\n            <mat-timepicker-toggle matIconSuffix [for]=\"pickertwo\"/>\n            <mat-timepicker #pickertwo/>\n        </mat-form-field>\n        <p>Times are represented in your local time zone</p>\n      </div>\n\n      <div mat-dialog-actions>\n        <div class=\"controls\">\n          <button mat-raised-button (click)=\"cancelScheduling()\">Cancel Scheduling</button>\n        </div>\n      </div>\n      <p>This post will be published as soon as its scheduled date and time arrive. No further action is needed by you. If you do not\n      want to use scheduling, you can cancel scheduling and manually publish.</p>\n    </mat-card>\n  </form>\n  <div class=\"controls\">\n    <button mat-raised-button (click)=\"seeEntries()\">See Entries</button>\n    <button *ngIf=\"!this.entry\" mat-raised-button (click)=\"startNew()\">New</button>\n  </div>\n\n  <button class=\"floating-landing-button\" mat-fab (click)=\"routeTo('/')\">Home</button>\n</div>\n", styles: [".creator{min-height:calc(100vh - 100px)}form{padding:20px}.content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}button{margin:4px}.radio-group{display:flex;flex-direction:column;margin:15px 0}.radio-button{margin:4px}.full-width{width:100%}.content-card{margin:0 0 10px}.form-section{margin-bottom:10px}.form-content:not(:last-child){border-bottom:1px dotted #aaa;padding-bottom:10px}.controls{display:inline-block;width:100%;padding:10px}[hidden]{display:none!important}.floating-landing-button{position:fixed;right:20px;bottom:20px;z-index:1000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i9.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i10.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i10.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: MatInputModule }, { kind: "directive", type: i11.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: "directive", type: i12.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i13.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i13.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i13.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i14.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i14.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i14.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i15.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i15.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: EntryCreatorComponent, decorators: [{
             type: Component,
@@ -1266,7 +1310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                         MatDatepickerModule,
                         MatTimepickerModule,
                         MatButtonModule,
-                    ], template: "<div class=\"section creator fields\">\n  <div style=\"padding: 10px;\">\n    <button\n      style=\"width: 100%;\"\n      mat-raised-button (click)=\"routeTo('create/v2(left-col:create//right-col:create)')\">V2</button>\n  </div>\n  <form #createForm=\"ngForm\" (change)=\"onChange()\" *ngIf=\"this.entry\">\n    <div class=\"form-group\">\n      <mat-form-field class=\"full-width\">\n        <mat-label>Title</mat-label>\n        <input matInput\n               [(ngModel)]=\"entry.title\"\n               name=\"title\">\n      </mat-form-field>\n    </div>\n    <mat-card class=\"form-section tags\">\n      <div>\n        <!--\n        <mat-form-field class=\"full-width\" hintLabel=\"Use a comma to seperate different tags\">\n          <mat-chip-listbox #tagList aria-label=\"Tags\">\n            <mat-chip-option\n                *ngFor=\"let tag of tags\"\n                [selectable]=\"selectable\"\n                [removable]=\"removable\"\n                (removed)=\"remove(tag)\">\n              {{tag}}\n              <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n            </mat-chip-option>\n            <input\n                matInput\n                placeholder=\"Tags...\"\n                #tagInput\n                [formControl]=\"tagCtrl\"\n                [matAutocomplete]=\"tagauto\"\n                [matChipInputFor]=\"tagList\"\n                [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                (matChipInputTokenEnd)=\"add($event)\">\n          </mat-chip-listbox>\n          <mat-autocomplete #tagauto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n            <mat-option *ngFor=\"let tag of filtered_tags | async\" [value]=\"tag\">\n              {{tag}}\n            </mat-option>\n          </mat-autocomplete>\n        </mat-form-field>\n        -->\n      </div>\n    </mat-card>\n    <mat-card class=\"form-section\" *ngFor=\"let section of entry.sections\">\n      <div>\n        <mat-form-field class=\"full-width\">\n          <mat-label>Subheading</mat-label>\n          <input matInput\n                 [(ngModel)]=\"section.subheading\"\n                 name=\"{{section.id}}-subheading\">\n        </mat-form-field>\n        <div class=\"form-content\" *ngFor=\"let content of section.contents\">\n          <div class=\"form-group\">\n            <mat-radio-group\n                aria-label=\"Select the Content Type\"\n                name=\"{{content.id}}-content-type\"\n                class=\"radio-group\"\n                [(ngModel)]=\"content.type\">\n              <mat-radio-button\n                  *ngFor=\"let value of Object.values(ContentType)\"\n                  class=\"radio-button\"\n                  [value]=\"value\">{{value}}\n              </mat-radio-button>\n            </mat-radio-group>\n          </div>\n          <ng-container [ngSwitch]=\"content.type\">\n            <ng-container *ngSwitchCase=\"ContentType.URL\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-value\"\n                    [(ngModel)]=\"content.value\">\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                <mat-label>Title</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-title\"\n                    [(ngModel)]=\"content.title\">\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.TEXT\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <textarea matInput\n                          cdkTextareaAutosize\n                          #autosize=\"cdkTextareaAutosize\"\n                          cdkAutosizeMinRows=\"3\"\n                          cdkAutosizeMaxRows=\"20\"\n                          name=\"{{content.id}}-content-value\"\n                          [(ngModel)]=\"content.value\"\n                          ></textarea>\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.HTML\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <textarea matInput\n                          cdkTextareaAutosize\n                          #autosize=\"cdkTextareaAutosize\"\n                          cdkAutosizeMinRows=\"3\"\n                          cdkAutosizeMaxRows=\"20\"\n                          name=\"{{content.id}}-content-value\"\n                          [(ngModel)]=\"content.value\"\n                          ></textarea>\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.CODE\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <textarea matInput\n                          cdkTextareaAutosize\n                          #autosize=\"cdkTextareaAutosize\"\n                          cdkAutosizeMinRows=\"10\"\n                          cdkAutosizeMaxRows=\"100\"\n                          name=\"{{content.id}}-content-value\"\n                          [(ngModel)]=\"content.value\"\n                          ></textarea>\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.IMAGE\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-value\"\n                    [(ngModel)]=\"content.value\">\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-source\"\n                    [(ngModel)]=\"content.value\">\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                <mat-label>Description</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-description\"\n                    [(ngModel)]=\"content.description\">\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.MEDIA\">\n              <div class=\"full-width\">\n                <ng-container *ngIf=\"content.value\">\n                  <mat-form-field class=\"full-width\">\n                    <mat-label>Value</mat-label>\n                    <input\n                        matInput\n                        name=\"{{content.id}}-content-value\"\n                        [(ngModel)]=\"content.value\">\n                  </mat-form-field>\n                  <mat-form-field class=\"full-width\">\n                    <mat-label>Description</mat-label>\n                    <input\n                        matInput\n                        name=\"{{content.id}}-content-description\"\n                        [(ngModel)]=\"content.description\">\n                  </mat-form-field>\n                </ng-container>\n                <ng-container *ngIf=\"content.additional\">\n                  <ng-container *ngFor=\"let add of content.additional\">\n                    <mat-form-field class=\"full-width\">\n                      <mat-label>{{add.key}}</mat-label>\n                      <input\n                          matInput\n                          name=\"{{content.id}}-content-{{add.key}}\"\n                          [(ngModel)]=\"add.value\"\n                          [disabled]=\"true\"\n                          >\n                    </mat-form-field>\n                  </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!content.value\">\n                  <button mat-raised-button (click)=startUploader(content)>Upload</button>\n                </ng-container>\n              </div>\n            </ng-container>\n          </ng-container>\n          <button mat-raised-button (click)=removeContent(content)>Remove Content</button>\n          <button mat-raised-button (click)=\"addContent(section)\">+ Add Content</button>\n        </div>\n        <button mat-raised-button (click)=\"removeSection(section)\">Remove Section</button>\n        <button mat-raised-button (click)=\"addContent(section)\" *ngIf=\"section.contents.length === 0\">+ Add\n          Content\n        </button>\n        <button mat-raised-button (click)=\"addSection()\">+ Add Section</button>\n      </div>\n\n    </mat-card>\n    <button mat-raised-button (click)=\"addSection()\" *ngIf=\"entry.sections?.length === 0\">+ Add Section</button>\n    <button mat-raised-button (click)=\"addSection()\" *ngIf=\"!entry.sections\">+ Add Section</button>\n\n    <div class=\"controls\">\n      <button mat-raised-button (click)=\"resetDate()\">Reset the Date</button>\n      <button mat-raised-button (click)=\"delete()\">Delete</button>\n      <button mat-raised-button [disabled]=\"scheduling\" (click)=\"publish()\">Publish</button>\n      <button mat-raised-button [disabled]=\"scheduling\" (click)=\"exposeScheduling()\">Schedule</button>\n      <button mat-raised-button (click)=\"startNew()\">New</button>\n    </div>\n    <p *ngIf=\"scheduling\">Publishing is disabled while scheduling is being used.</p>\n\n    <mat-card [hidden]=\"!scheduling\">\n      <h4>\n        Scheduling Options\n      </h4>\n\n      <div class=\"form-group\">\n        <mat-form-field class=\"full-width\">\n          <mat-label>Date</mat-label>\n          <input\n              #futurePublishDate\n              matInput\n              [matDatepicker]=\"picker\"\n              [min]=\"today\"\n              (dateInput)=\"onDateChange()\"\n              (dateChange)=\"onDateChange()\"\n              [(ngModel)]=\"entry.future_publish_date\"\n              name=\"future-publish-date\"\n              >\n              <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n              <mat-datepicker\n                  #picker></mat-datepicker>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Time</mat-label>\n          <input matInput [matTimepicker]=\"pickertwo\">\n            <mat-timepicker-toggle matIconSuffix [for]=\"pickertwo\"/>\n            <mat-timepicker #pickertwo/>\n        </mat-form-field>\n        <p>Times are represented in your local time zone</p>\n      </div>\n\n      <div mat-dialog-actions>\n        <div class=\"controls\">\n          <button mat-raised-button (click)=\"cancelScheduling()\">Cancel Scheduling</button>\n        </div>\n      </div>\n      <p>This post will be published as soon as its scheduled date and time arrive. No further action is needed by you. If you do not\n      want to use scheduling, you can cancel scheduling and manually publish.</p>\n    </mat-card>\n  </form>\n  <div class=\"controls\">\n    <button mat-raised-button (click)=\"seeEntries()\">See Entries</button>\n    <button *ngIf=\"!this.entry\" mat-raised-button (click)=\"startNew()\">New</button>\n  </div>\n</div>\n", styles: [".creator{min-height:calc(100vh - 100px)}form{padding:20px}.content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}button{margin:4px}.radio-group{display:flex;flex-direction:column;margin:15px 0}.radio-button{margin:4px}.full-width{width:100%}.content-card{margin:0 0 10px}.form-section{margin-bottom:10px}.form-content:not(:last-child){border-bottom:1px dotted #aaa;padding-bottom:10px}.controls{display:inline-block;width:100%;padding:10px}[hidden]{display:none!important}\n"] }]
+                    ], template: "<div class=\"section creator fields\">\n  <div style=\"padding: 10px;\">\n    <button\n      style=\"width: 100%;\"\n      mat-raised-button (click)=\"routeTo('create/v2(left-col:create//right-col:create)')\">V2</button>\n  </div>\n  <form #createForm=\"ngForm\" (change)=\"onChange()\" *ngIf=\"this.entry\">\n    <div class=\"form-group\">\n      <mat-form-field class=\"full-width\">\n        <mat-label>Title</mat-label>\n        <input matInput\n               [(ngModel)]=\"entry.title\"\n               name=\"title\">\n      </mat-form-field>\n    </div>\n    <mat-card class=\"form-section tags\">\n      <div>\n        <!--\n        <mat-form-field class=\"full-width\" hintLabel=\"Use a comma to seperate different tags\">\n          <mat-chip-listbox #tagList aria-label=\"Tags\">\n            <mat-chip-option\n                *ngFor=\"let tag of tags\"\n                [selectable]=\"selectable\"\n                [removable]=\"removable\"\n                (removed)=\"remove(tag)\">\n              {{tag}}\n              <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n            </mat-chip-option>\n            <input\n                matInput\n                placeholder=\"Tags...\"\n                #tagInput\n                [formControl]=\"tagCtrl\"\n                [matAutocomplete]=\"tagauto\"\n                [matChipInputFor]=\"tagList\"\n                [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                (matChipInputTokenEnd)=\"add($event)\">\n          </mat-chip-listbox>\n          <mat-autocomplete #tagauto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n            <mat-option *ngFor=\"let tag of filtered_tags | async\" [value]=\"tag\">\n              {{tag}}\n            </mat-option>\n          </mat-autocomplete>\n        </mat-form-field>\n        -->\n      </div>\n    </mat-card>\n    <mat-card class=\"form-section\" *ngFor=\"let section of entry.sections\">\n      <div>\n        <mat-form-field class=\"full-width\">\n          <mat-label>Subheading</mat-label>\n          <input matInput\n                 [(ngModel)]=\"section.subheading\"\n                 name=\"{{section.id}}-subheading\">\n        </mat-form-field>\n        <div class=\"form-content\" *ngFor=\"let content of section.contents\">\n          <div class=\"form-group\">\n            <mat-radio-group\n                aria-label=\"Select the Content Type\"\n                name=\"{{content.id}}-content-type\"\n                class=\"radio-group\"\n                [(ngModel)]=\"content.type\">\n              <mat-radio-button\n                  *ngFor=\"let value of Object.values(ContentType)\"\n                  class=\"radio-button\"\n                  [value]=\"value\">{{value}}\n              </mat-radio-button>\n            </mat-radio-group>\n          </div>\n          <ng-container [ngSwitch]=\"content.type\">\n            <ng-container *ngSwitchCase=\"ContentType.URL\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-value\"\n                    [(ngModel)]=\"content.value\">\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                <mat-label>Title</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-title\"\n                    [(ngModel)]=\"content.title\">\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.TEXT\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <textarea matInput\n                          cdkTextareaAutosize\n                          #autosize=\"cdkTextareaAutosize\"\n                          cdkAutosizeMinRows=\"3\"\n                          cdkAutosizeMaxRows=\"20\"\n                          name=\"{{content.id}}-content-value\"\n                          [(ngModel)]=\"content.value\"\n                          ></textarea>\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.HTML\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <textarea matInput\n                          cdkTextareaAutosize\n                          #autosize=\"cdkTextareaAutosize\"\n                          cdkAutosizeMinRows=\"3\"\n                          cdkAutosizeMaxRows=\"20\"\n                          name=\"{{content.id}}-content-value\"\n                          [(ngModel)]=\"content.value\"\n                          ></textarea>\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.CODE\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <textarea matInput\n                          cdkTextareaAutosize\n                          #autosize=\"cdkTextareaAutosize\"\n                          cdkAutosizeMinRows=\"10\"\n                          cdkAutosizeMaxRows=\"100\"\n                          name=\"{{content.id}}-content-value\"\n                          [(ngModel)]=\"content.value\"\n                          ></textarea>\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.IMAGE\">\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-value\"\n                    [(ngModel)]=\"content.value\">\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                <mat-label>Value</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-source\"\n                    [(ngModel)]=\"content.value\">\n              </mat-form-field>\n              <mat-form-field class=\"full-width\">\n                <mat-label>Description</mat-label>\n                <input\n                    matInput\n                    name=\"{{content.id}}-content-description\"\n                    [(ngModel)]=\"content.description\">\n              </mat-form-field>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"ContentType.MEDIA\">\n              <div class=\"full-width\">\n                <ng-container *ngIf=\"content.value\">\n                  <mat-form-field class=\"full-width\">\n                    <mat-label>Value</mat-label>\n                    <input\n                        matInput\n                        name=\"{{content.id}}-content-value\"\n                        [(ngModel)]=\"content.value\">\n                  </mat-form-field>\n                  <mat-form-field class=\"full-width\">\n                    <mat-label>Description</mat-label>\n                    <input\n                        matInput\n                        name=\"{{content.id}}-content-description\"\n                        [(ngModel)]=\"content.description\">\n                  </mat-form-field>\n                </ng-container>\n                <ng-container *ngIf=\"content.additional\">\n                  <ng-container *ngFor=\"let add of content.additional\">\n                    <mat-form-field class=\"full-width\">\n                      <mat-label>{{add.key}}</mat-label>\n                      <input\n                          matInput\n                          name=\"{{content.id}}-content-{{add.key}}\"\n                          [(ngModel)]=\"add.value\"\n                          [disabled]=\"true\"\n                          >\n                    </mat-form-field>\n                  </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!content.value\">\n                  <button mat-raised-button (click)=startUploader(content)>Upload</button>\n                </ng-container>\n              </div>\n            </ng-container>\n          </ng-container>\n          <button mat-raised-button (click)=removeContent(content)>Remove Content</button>\n          <button mat-raised-button (click)=\"addContent(section)\">+ Add Content</button>\n        </div>\n        <button mat-raised-button (click)=\"removeSection(section)\">Remove Section</button>\n        <button mat-raised-button (click)=\"addContent(section)\" *ngIf=\"section.contents.length === 0\">+ Add\n          Content\n        </button>\n        <button mat-raised-button (click)=\"addSection()\">+ Add Section</button>\n      </div>\n\n    </mat-card>\n    <button mat-raised-button (click)=\"addSection()\" *ngIf=\"entry.sections?.length === 0\">+ Add Section</button>\n    <button mat-raised-button (click)=\"addSection()\" *ngIf=\"!entry.sections\">+ Add Section</button>\n\n    <div class=\"controls\">\n      <button mat-raised-button (click)=\"resetDate()\">Reset the Date</button>\n      <button mat-raised-button (click)=\"delete()\">Delete</button>\n      <button mat-raised-button [disabled]=\"scheduling\" (click)=\"publish()\">Publish</button>\n      <button mat-raised-button [disabled]=\"scheduling\" (click)=\"exposeScheduling()\">Schedule</button>\n      <button mat-raised-button (click)=\"startNew()\">New</button>\n    </div>\n    <p *ngIf=\"scheduling\">Publishing is disabled while scheduling is being used.</p>\n\n    <mat-card [hidden]=\"!scheduling\">\n      <h4>\n        Scheduling Options\n      </h4>\n\n      <div class=\"form-group\">\n        <mat-form-field class=\"full-width\">\n          <mat-label>Date</mat-label>\n          <input\n              #futurePublishDate\n              matInput\n              [matDatepicker]=\"picker\"\n              [min]=\"today\"\n              (dateInput)=\"onDateChange()\"\n              (dateChange)=\"onDateChange()\"\n              [(ngModel)]=\"entry.future_publish_date\"\n              name=\"future-publish-date\"\n              >\n              <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n              <mat-datepicker\n                  #picker></mat-datepicker>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Time</mat-label>\n          <input matInput [matTimepicker]=\"pickertwo\">\n            <mat-timepicker-toggle matIconSuffix [for]=\"pickertwo\"/>\n            <mat-timepicker #pickertwo/>\n        </mat-form-field>\n        <p>Times are represented in your local time zone</p>\n      </div>\n\n      <div mat-dialog-actions>\n        <div class=\"controls\">\n          <button mat-raised-button (click)=\"cancelScheduling()\">Cancel Scheduling</button>\n        </div>\n      </div>\n      <p>This post will be published as soon as its scheduled date and time arrive. No further action is needed by you. If you do not\n      want to use scheduling, you can cancel scheduling and manually publish.</p>\n    </mat-card>\n  </form>\n  <div class=\"controls\">\n    <button mat-raised-button (click)=\"seeEntries()\">See Entries</button>\n    <button *ngIf=\"!this.entry\" mat-raised-button (click)=\"startNew()\">New</button>\n  </div>\n\n  <button class=\"floating-landing-button\" mat-fab (click)=\"routeTo('/')\">Home</button>\n</div>\n", styles: [".creator{min-height:calc(100vh - 100px)}form{padding:20px}.content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}button{margin:4px}.radio-group{display:flex;flex-direction:column;margin:15px 0}.radio-button{margin:4px}.full-width{width:100%}.content-card{margin:0 0 10px}.form-section{margin-bottom:10px}.form-content:not(:last-child){border-bottom:1px dotted #aaa;padding-bottom:10px}.controls{display:inline-block;width:100%;padding:10px}[hidden]{display:none!important}.floating-landing-button{position:fixed;right:20px;bottom:20px;z-index:1000}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.Router }, { type: EntryService }, { type: TagService }, { type: IdentityService }, { type: i0.ChangeDetectorRef }, { type: i1$2.MatDialog }], propDecorators: { tagInput: [{
                 type: ViewChild,
                 args: ['tagInput']
@@ -1508,7 +1552,7 @@ class EntryWysiwygComponent {
         alert(something);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: EntryWysiwygComponent, deps: [{ token: i1$3.Router }, { token: EntryService }, { token: TagService }, { token: IdentityService }, { token: i1$2.MatDialog }, { token: i1$1.DomSanitizer }, { token: i7.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: EntryWysiwygComponent, isStandalone: true, selector: "lib-entry-wysiwyg", providers: [provideNativeDateAdapter()], ngImport: i0, template: "<div class=\"container\" style=\"padding: 20px;\">\n  <div style=\"padding: 10px;\">\n    <button\n      style=\"width: 100%;\"\n      mat-raised-button\n      (click)=\"routeTo('create(left-col:create//right-col:create)')\">V1</button>\n  </div>\n  <div>\n    <div *ngIf=\"entry\">\n      <h2>{{entry?.title}}</h2>\n\n      <h3>Posted {{entry?.create_date.toString() | timeAgo}} on {{entry?.create_date?.getMonth() + 1}}/{{entry?.create_date?.getDate()}}/{{entry?.create_date?.getFullYear()}}</h3>\n      <h5 *ngIf=\"entry?.showEditInformation()\">Article was last edited {{entry?.edit_date.toString() | timeAgo}}</h5>\n      <br>\n      <p *ngIf=\"entry?.tags?.length > 0\">Tags: <span *ngFor=\"let tag of entry?.tags; let last = last\">{{tag}}<ng-container *ngIf=\"!last\"> |\n      </ng-container></span><span *ngIf=\"entry?.views\">, {{entry._friendly_views}} views</span></p>\n    </div>\n\n    <div style=\"width: 100%; padding: 10px;\">\n      <button\n        style=\"width: 24%; margin: 5px;\"\n        mat-raised-button\n        (click)=\"publish()\"\n      >Publish</button>\n\n      <button\n        style=\"width: 24%; margin: 5px;\"\n        mat-raised-button\n        (click)=\"seeEntries()\"\n      >Entries</button>\n\n      <button\n        style=\"width: 24%; margin: 5px;\"\n        mat-raised-button\n        (click)=\"displayAlert('One day...')\"\n      >Advanced</button>\n\n      <button\n        style=\"width: 24%; margin: 5px;\"\n        mat-raised-button\n        (click)=\"startNew()\"\n      >New</button>\n    </div>\n  </div>\n\n  <form [formGroup]=\"form\">\n    <quill-editor\n      style=\"width: 100%;\"\n      format=\"{{format}}\"\n      formControlName=\"html\"\n      theme=\"bubble\"\n    ></quill-editor>\n  </form>\n</div>\n", styles: [".create-container{margin-left:auto;margin-right:auto;width:80%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: EntryWysiwygComponent, isStandalone: true, selector: "lib-entry-wysiwyg", providers: [provideNativeDateAdapter()], ngImport: i0, template: "<div class=\"container\" style=\"padding: 20px;\">\n  <div style=\"padding: 10px;\">\n    <button\n      style=\"width: 100%;\"\n      mat-raised-button\n      (click)=\"routeTo('create(left-col:create//right-col:create)')\">V1</button>\n  </div>\n  <div>\n    <div *ngIf=\"entry\">\n      <h2>{{entry?.title}}</h2>\n\n      <h3>Posted {{entry?.create_date.toString() | timeAgo}} on {{entry?.create_date?.getMonth() + 1}}/{{entry?.create_date?.getDate()}}/{{entry?.create_date?.getFullYear()}}</h3>\n      <h5 *ngIf=\"entry?.showEditInformation()\">Article was last edited {{entry?.edit_date.toString() | timeAgo}}</h5>\n      <br>\n      <p *ngIf=\"entry?.tags?.length > 0\">Tags: <span *ngFor=\"let tag of entry?.tags; let last = last\">{{tag}}<ng-container *ngIf=\"!last\"> |\n      </ng-container></span><span *ngIf=\"entry?.views\">, {{entry._friendly_views}} views</span></p>\n    </div>\n\n    <div style=\"width: 100%; padding: 10px;\">\n      <button\n        style=\"width: 24%; margin: 5px;\"\n        mat-raised-button\n        (click)=\"publish()\"\n      >Publish</button>\n\n      <button\n        style=\"width: 24%; margin: 5px;\"\n        mat-raised-button\n        (click)=\"seeEntries()\"\n      >Entries</button>\n\n      <button\n        style=\"width: 24%; margin: 5px;\"\n        mat-raised-button\n        (click)=\"displayAlert('One day...')\"\n      >Advanced</button>\n\n      <button\n        style=\"width: 24%; margin: 5px;\"\n        mat-raised-button\n        (click)=\"startNew()\"\n      >New</button>\n    </div>\n  </div>\n\n  <form [formGroup]=\"form\">\n    <quill-editor\n      style=\"width: 100%;\"\n      format=\"{{format}}\"\n      formControlName=\"html\"\n      theme=\"bubble\"\n    ></quill-editor>\n  </form>\n\n  <button class=\"floating-landing-button\" mat-fab (click)=\"routeTo('/')\">Home</button>\n</div>\n", styles: [".create-container{margin-left:auto;margin-right:auto;width:80%}.floating-landing-button{position:fixed;right:20px;bottom:20px;z-index:1000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i15.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i15.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: EntryWysiwygComponent, decorators: [{
             type: Component,
@@ -1520,7 +1564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                         MatButtonModule,
                         QuillEditorComponent,
                         TimeAgoPipe,
-                    ], template: "<div class=\"container\" style=\"padding: 20px;\">\n  <div style=\"padding: 10px;\">\n    <button\n      style=\"width: 100%;\"\n      mat-raised-button\n      (click)=\"routeTo('create(left-col:create//right-col:create)')\">V1</button>\n  </div>\n  <div>\n    <div *ngIf=\"entry\">\n      <h2>{{entry?.title}}</h2>\n\n      <h3>Posted {{entry?.create_date.toString() | timeAgo}} on {{entry?.create_date?.getMonth() + 1}}/{{entry?.create_date?.getDate()}}/{{entry?.create_date?.getFullYear()}}</h3>\n      <h5 *ngIf=\"entry?.showEditInformation()\">Article was last edited {{entry?.edit_date.toString() | timeAgo}}</h5>\n      <br>\n      <p *ngIf=\"entry?.tags?.length > 0\">Tags: <span *ngFor=\"let tag of entry?.tags; let last = last\">{{tag}}<ng-container *ngIf=\"!last\"> |\n      </ng-container></span><span *ngIf=\"entry?.views\">, {{entry._friendly_views}} views</span></p>\n    </div>\n\n    <div style=\"width: 100%; padding: 10px;\">\n      <button\n        style=\"width: 24%; margin: 5px;\"\n        mat-raised-button\n        (click)=\"publish()\"\n      >Publish</button>\n\n      <button\n        style=\"width: 24%; margin: 5px;\"\n        mat-raised-button\n        (click)=\"seeEntries()\"\n      >Entries</button>\n\n      <button\n        style=\"width: 24%; margin: 5px;\"\n        mat-raised-button\n        (click)=\"displayAlert('One day...')\"\n      >Advanced</button>\n\n      <button\n        style=\"width: 24%; margin: 5px;\"\n        mat-raised-button\n        (click)=\"startNew()\"\n      >New</button>\n    </div>\n  </div>\n\n  <form [formGroup]=\"form\">\n    <quill-editor\n      style=\"width: 100%;\"\n      format=\"{{format}}\"\n      formControlName=\"html\"\n      theme=\"bubble\"\n    ></quill-editor>\n  </form>\n</div>\n", styles: [".create-container{margin-left:auto;margin-right:auto;width:80%}\n"] }]
+                    ], template: "<div class=\"container\" style=\"padding: 20px;\">\n  <div style=\"padding: 10px;\">\n    <button\n      style=\"width: 100%;\"\n      mat-raised-button\n      (click)=\"routeTo('create(left-col:create//right-col:create)')\">V1</button>\n  </div>\n  <div>\n    <div *ngIf=\"entry\">\n      <h2>{{entry?.title}}</h2>\n\n      <h3>Posted {{entry?.create_date.toString() | timeAgo}} on {{entry?.create_date?.getMonth() + 1}}/{{entry?.create_date?.getDate()}}/{{entry?.create_date?.getFullYear()}}</h3>\n      <h5 *ngIf=\"entry?.showEditInformation()\">Article was last edited {{entry?.edit_date.toString() | timeAgo}}</h5>\n      <br>\n      <p *ngIf=\"entry?.tags?.length > 0\">Tags: <span *ngFor=\"let tag of entry?.tags; let last = last\">{{tag}}<ng-container *ngIf=\"!last\"> |\n      </ng-container></span><span *ngIf=\"entry?.views\">, {{entry._friendly_views}} views</span></p>\n    </div>\n\n    <div style=\"width: 100%; padding: 10px;\">\n      <button\n        style=\"width: 24%; margin: 5px;\"\n        mat-raised-button\n        (click)=\"publish()\"\n      >Publish</button>\n\n      <button\n        style=\"width: 24%; margin: 5px;\"\n        mat-raised-button\n        (click)=\"seeEntries()\"\n      >Entries</button>\n\n      <button\n        style=\"width: 24%; margin: 5px;\"\n        mat-raised-button\n        (click)=\"displayAlert('One day...')\"\n      >Advanced</button>\n\n      <button\n        style=\"width: 24%; margin: 5px;\"\n        mat-raised-button\n        (click)=\"startNew()\"\n      >New</button>\n    </div>\n  </div>\n\n  <form [formGroup]=\"form\">\n    <quill-editor\n      style=\"width: 100%;\"\n      format=\"{{format}}\"\n      formControlName=\"html\"\n      theme=\"bubble\"\n    ></quill-editor>\n  </form>\n\n  <button class=\"floating-landing-button\" mat-fab (click)=\"routeTo('/')\">Home</button>\n</div>\n", styles: [".create-container{margin-left:auto;margin-right:auto;width:80%}.floating-landing-button{position:fixed;right:20px;bottom:20px;z-index:1000}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.Router }, { type: EntryService }, { type: TagService }, { type: IdentityService }, { type: i1$2.MatDialog }, { type: i1$1.DomSanitizer }, { type: i7.FormBuilder }] });
 
 class StaticHtmlComponent {
@@ -2021,14 +2065,227 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
                 args: ['navcontainer', { static: false }]
             }] } });
 
+const FRONTEND_VERSION = '0.30.0';
+const EXPECTED_API_CONTRACT = '^1.0.0';
+
+class SyncConfigService {
+    constructor(http) {
+        this.http = http;
+        this.endpoint = '/blog_api/sync_config/';
+    }
+    getSyncConfig() {
+        return this.http.get(this.endpoint);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: SyncConfigService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: SyncConfigService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: SyncConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+
+class ApiCompatibilityService {
+    constructor(syncConfigService) {
+        this.syncConfigService = syncConfigService;
+        this.started = false;
+        this.resultSubject = new ReplaySubject(1);
+    }
+    ensureChecked() {
+        if (!this.started) {
+            this.started = true;
+            this.syncConfigService.getSyncConfig().pipe(map$2((cfg) => {
+                const backendApiContractVersion = cfg.api_contract_version || '';
+                const backendSupportedFrontendVersions = cfg.supported_frontend_versions || '';
+                if (!backendApiContractVersion || !backendSupportedFrontendVersions) {
+                    return this.createResult(false, 'Backend sync config is missing compatibility metadata.', backendApiContractVersion, backendSupportedFrontendVersions);
+                }
+                const apiContractMatches = this.satisfiesRange(backendApiContractVersion, EXPECTED_API_CONTRACT);
+                const frontendSupported = this.satisfiesRange(FRONTEND_VERSION, backendSupportedFrontendVersions);
+                if (!apiContractMatches) {
+                    return this.createResult(false, 'Backend API contract version is outside the frontend expected range.', backendApiContractVersion, backendSupportedFrontendVersions);
+                }
+                if (!frontendSupported) {
+                    return this.createResult(false, 'Frontend version is outside the backend supported range.', backendApiContractVersion, backendSupportedFrontendVersions);
+                }
+                return this.createResult(true, 'API compatibility validated.', backendApiContractVersion, backendSupportedFrontendVersions);
+            }), catchError((err) => {
+                return of(this.createResult(false, 'Unable to validate API compatibility from backend sync config.', '', ''));
+            })).subscribe((result) => {
+                this.current = result;
+                this.resultSubject.next(result);
+            });
+        }
+        return this.resultSubject.asObservable();
+    }
+    getCurrentResult() {
+        return this.current;
+    }
+    createResult(compatible, reason, backendApiContractVersion, backendSupportedFrontendVersions) {
+        return {
+            compatible,
+            reason,
+            frontendVersion: FRONTEND_VERSION,
+            expectedApiContract: EXPECTED_API_CONTRACT,
+            backendApiContractVersion,
+            backendSupportedFrontendVersions
+        };
+    }
+    satisfiesRange(versionText, rangeText) {
+        const version = this.parseVersion(versionText);
+        if (!version) {
+            return false;
+        }
+        if (!rangeText || rangeText.trim().length === 0) {
+            return false;
+        }
+        const range = rangeText.trim();
+        if (range.startsWith('^')) {
+            return this.satisfiesCaret(version, range.substring(1));
+        }
+        if (range.startsWith('~')) {
+            return this.satisfiesTilde(version, range.substring(1));
+        }
+        const tokens = range.split(/\s+/).filter((token) => token.length > 0);
+        if (tokens.length === 1 && !this.hasComparator(tokens[0])) {
+            const exact = this.parseVersion(tokens[0]);
+            return !!exact && this.compareVersions(version, exact) === 0;
+        }
+        for (const token of tokens) {
+            if (!this.satisfiesComparator(version, token)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    hasComparator(token) {
+        return token.startsWith('>=') ||
+            token.startsWith('<=') ||
+            token.startsWith('>') ||
+            token.startsWith('<') ||
+            token.startsWith('=');
+    }
+    satisfiesComparator(version, token) {
+        let comparator = '';
+        let versionText = token;
+        if (token.startsWith('>=')) {
+            comparator = '>=';
+            versionText = token.substring(2);
+        }
+        else if (token.startsWith('<=')) {
+            comparator = '<=';
+            versionText = token.substring(2);
+        }
+        else if (token.startsWith('>')) {
+            comparator = '>';
+            versionText = token.substring(1);
+        }
+        else if (token.startsWith('<')) {
+            comparator = '<';
+            versionText = token.substring(1);
+        }
+        else if (token.startsWith('=')) {
+            comparator = '=';
+            versionText = token.substring(1);
+        }
+        else {
+            comparator = '=';
+        }
+        const target = this.parseVersion(versionText);
+        if (!target) {
+            return false;
+        }
+        const cmp = this.compareVersions(version, target);
+        if (comparator === '>=') {
+            return cmp >= 0;
+        }
+        if (comparator === '<=') {
+            return cmp <= 0;
+        }
+        if (comparator === '>') {
+            return cmp > 0;
+        }
+        if (comparator === '<') {
+            return cmp < 0;
+        }
+        return cmp === 0;
+    }
+    satisfiesCaret(version, lowerBoundText) {
+        const lowerBound = this.parseVersion(lowerBoundText);
+        if (!lowerBound) {
+            return false;
+        }
+        if (this.compareVersions(version, lowerBound) < 0) {
+            return false;
+        }
+        const upperBound = {
+            major: lowerBound.major + 1,
+            minor: 0,
+            patch: 0
+        };
+        return this.compareVersions(version, upperBound) < 0;
+    }
+    satisfiesTilde(version, lowerBoundText) {
+        const lowerBound = this.parseVersion(lowerBoundText);
+        if (!lowerBound) {
+            return false;
+        }
+        if (this.compareVersions(version, lowerBound) < 0) {
+            return false;
+        }
+        const upperBound = {
+            major: lowerBound.major,
+            minor: lowerBound.minor + 1,
+            patch: 0
+        };
+        return this.compareVersions(version, upperBound) < 0;
+    }
+    compareVersions(left, right) {
+        if (left.major !== right.major) {
+            return left.major - right.major;
+        }
+        if (left.minor !== right.minor) {
+            return left.minor - right.minor;
+        }
+        return left.patch - right.patch;
+    }
+    parseVersion(text) {
+        const normalized = (text || '').trim();
+        const matches = normalized.match(/^(\d+)\.(\d+)\.(\d+)$/);
+        if (!matches) {
+            return null;
+        }
+        return {
+            major: Number(matches[1]),
+            minor: Number(matches[2]),
+            patch: Number(matches[3])
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: ApiCompatibilityService, deps: [{ token: SyncConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: ApiCompatibilityService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: ApiCompatibilityService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: SyncConfigService }] });
+
 class MainComponent {
-    constructor(router) {
+    constructor(router, apiCompatibilityService) {
         this.router = router;
+        this.apiCompatibilityService = apiCompatibilityService;
         this.loaded = true;
         this.subs = new Subscription();
         this.resizeSubject = new Subject();
+        this.compatibilityChecked = false;
     }
     ngOnInit() {
+        this.subs.add(this.apiCompatibilityService.ensureChecked().subscribe((result) => {
+            this.compatibility = result;
+            this.compatibilityChecked = true;
+        }));
         this.subs.add(this.router.events.subscribe((e) => {
             if (e instanceof NavigationEnd) {
                 if (e.urlAfterRedirects.includes('create')) {
@@ -2057,16 +2314,16 @@ class MainComponent {
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: MainComponent, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: MainComponent, isStandalone: true, selector: "lib-main", host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<ng-container *ngIf=\"loaded\">\n    <div class=\"container\">\n        <div class=\"body\">\n            <div class=\"container-row\">\n                <mat-sidenav-container [autosize]=\"true\">\n                    <mat-sidenav [(opened)]=\"showLeftCol\" #leftcol opened mode=\"side\" class=\"left no-scrollbar\">\n                        <router-outlet name=\"left-col\"></router-outlet>\n                        <button mat-mini-fab color=\"primary\" class=\"fade left-toggle\" *ngIf=\"showLeftCol\" (click)=\"leftcol.toggle()\"> << </button>\n                    </mat-sidenav>\n                    <mat-sidenav [(opened)]=\"showRightCol\" #rightcol mode=\"side\" position=\"end\" class=\"right\">\n                        <button mat-mini-fab color=\"primary\" class=\"fade right-toggle\" *ngIf=\"showRightCol\" (click)=\"rightcol.toggle()\"> >> </button>\n                        <router-outlet name=\"right-col\"></router-outlet>\n                    </mat-sidenav>\n                    <div class=\"middle\">\n                        <button mat-mini-fab color=\"primary\" class=\"fade left-toggle\" *ngIf=\"!showLeftCol\" (click)=\"leftcol.toggle()\"> >> </button>\n                        <button  mat-mini-fab color=\"primary\" class=\"fade right-toggle\" *ngIf=\"!showRightCol\" (click)=\"rightcol.toggle()\"> << </button>\n                        <router-outlet></router-outlet>\n                    </div>\n                </mat-sidenav-container>\n            </div>\n        </div>\n    </div>\n</ng-container>\n", styles: ["a{text-decoration:none}.body{flex-grow:1;max-height:calc(100vh - 100px);overflow:scroll}@media screen and (max-height: 560px){.body{max-height:100vh}}.left,.right{min-width:400px;max-width:33vw}.left-toggle{position:fixed;top:50%;left:5px;z-index:100}.right-toggle{position:fixed;top:50%;right:5px;z-index:100}a{margin-right:10px}a:not(:last-child):after{margin-left:10px;content:\"|\"}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i2$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i2$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: MainComponent, deps: [{ token: i1$3.Router }, { token: ApiCompatibilityService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: MainComponent, isStandalone: true, selector: "lib-main", host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<ng-container *ngIf=\"compatibilityChecked && compatibility && !compatibility.compatible\">\n    <div class=\"compatibility-error\">\n        <h2>Frontend/Backend Version Mismatch</h2>\n        <p>{{ compatibility.reason }}</p>\n        <p>Frontend version: {{ compatibility.frontendVersion }}</p>\n        <p>Expected API contract: {{ compatibility.expectedApiContract }}</p>\n        <p>Backend API contract: {{ compatibility.backendApiContractVersion || 'missing' }}</p>\n        <p>Backend supported frontend versions: {{ compatibility.backendSupportedFrontendVersions || 'missing' }}</p>\n    </div>\n</ng-container>\n<ng-container *ngIf=\"(!compatibilityChecked || !compatibility || compatibility.compatible) && loaded\">\n    <div class=\"container\">\n        <div class=\"body\">\n            <div class=\"container-row\">\n                <mat-sidenav-container [autosize]=\"true\">\n                    <mat-sidenav [(opened)]=\"showLeftCol\" #leftcol opened mode=\"side\" class=\"left no-scrollbar\">\n                        <router-outlet name=\"left-col\"></router-outlet>\n                        <button mat-mini-fab color=\"primary\" class=\"fade left-toggle\" *ngIf=\"showLeftCol\" (click)=\"leftcol.toggle()\"> << </button>\n                    </mat-sidenav>\n                    <mat-sidenav [(opened)]=\"showRightCol\" #rightcol mode=\"side\" position=\"end\" class=\"right\">\n                        <button mat-mini-fab color=\"primary\" class=\"fade right-toggle\" *ngIf=\"showRightCol\" (click)=\"rightcol.toggle()\"> >> </button>\n                        <router-outlet name=\"right-col\"></router-outlet>\n                    </mat-sidenav>\n                    <div class=\"middle\">\n                        <button mat-mini-fab color=\"primary\" class=\"fade left-toggle\" *ngIf=\"!showLeftCol\" (click)=\"leftcol.toggle()\"> >> </button>\n                        <button  mat-mini-fab color=\"primary\" class=\"fade right-toggle\" *ngIf=\"!showRightCol\" (click)=\"rightcol.toggle()\"> << </button>\n                        <router-outlet></router-outlet>\n                    </div>\n                </mat-sidenav-container>\n            </div>\n        </div>\n    </div>\n</ng-container>\n", styles: ["a{text-decoration:none}.body{flex-grow:1;max-height:calc(100vh - 100px);overflow:scroll}@media screen and (max-height: 560px){.body{max-height:100vh}}.left,.right{min-width:400px;max-width:33vw}.left-toggle{position:fixed;top:50%;left:5px;z-index:100}.right-toggle{position:fixed;top:50%;right:5px;z-index:100}a{margin-right:10px}a:not(:last-child):after{margin-left:10px;content:\"|\"}.compatibility-error{margin:2rem;padding:1.5rem;border:2px solid #7a1f1f;border-radius:8px;background:#fff5f5;color:#4b1515}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i3$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: MainComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-main', imports: [
                         RouterModule,
                         MatSidenavModule,
-                    ], template: "<ng-container *ngIf=\"loaded\">\n    <div class=\"container\">\n        <div class=\"body\">\n            <div class=\"container-row\">\n                <mat-sidenav-container [autosize]=\"true\">\n                    <mat-sidenav [(opened)]=\"showLeftCol\" #leftcol opened mode=\"side\" class=\"left no-scrollbar\">\n                        <router-outlet name=\"left-col\"></router-outlet>\n                        <button mat-mini-fab color=\"primary\" class=\"fade left-toggle\" *ngIf=\"showLeftCol\" (click)=\"leftcol.toggle()\"> << </button>\n                    </mat-sidenav>\n                    <mat-sidenav [(opened)]=\"showRightCol\" #rightcol mode=\"side\" position=\"end\" class=\"right\">\n                        <button mat-mini-fab color=\"primary\" class=\"fade right-toggle\" *ngIf=\"showRightCol\" (click)=\"rightcol.toggle()\"> >> </button>\n                        <router-outlet name=\"right-col\"></router-outlet>\n                    </mat-sidenav>\n                    <div class=\"middle\">\n                        <button mat-mini-fab color=\"primary\" class=\"fade left-toggle\" *ngIf=\"!showLeftCol\" (click)=\"leftcol.toggle()\"> >> </button>\n                        <button  mat-mini-fab color=\"primary\" class=\"fade right-toggle\" *ngIf=\"!showRightCol\" (click)=\"rightcol.toggle()\"> << </button>\n                        <router-outlet></router-outlet>\n                    </div>\n                </mat-sidenav-container>\n            </div>\n        </div>\n    </div>\n</ng-container>\n", styles: ["a{text-decoration:none}.body{flex-grow:1;max-height:calc(100vh - 100px);overflow:scroll}@media screen and (max-height: 560px){.body{max-height:100vh}}.left,.right{min-width:400px;max-width:33vw}.left-toggle{position:fixed;top:50%;left:5px;z-index:100}.right-toggle{position:fixed;top:50%;right:5px;z-index:100}a{margin-right:10px}a:not(:last-child):after{margin-left:10px;content:\"|\"}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.Router }], propDecorators: { onResize: [{
+                    ], template: "<ng-container *ngIf=\"compatibilityChecked && compatibility && !compatibility.compatible\">\n    <div class=\"compatibility-error\">\n        <h2>Frontend/Backend Version Mismatch</h2>\n        <p>{{ compatibility.reason }}</p>\n        <p>Frontend version: {{ compatibility.frontendVersion }}</p>\n        <p>Expected API contract: {{ compatibility.expectedApiContract }}</p>\n        <p>Backend API contract: {{ compatibility.backendApiContractVersion || 'missing' }}</p>\n        <p>Backend supported frontend versions: {{ compatibility.backendSupportedFrontendVersions || 'missing' }}</p>\n    </div>\n</ng-container>\n<ng-container *ngIf=\"(!compatibilityChecked || !compatibility || compatibility.compatible) && loaded\">\n    <div class=\"container\">\n        <div class=\"body\">\n            <div class=\"container-row\">\n                <mat-sidenav-container [autosize]=\"true\">\n                    <mat-sidenav [(opened)]=\"showLeftCol\" #leftcol opened mode=\"side\" class=\"left no-scrollbar\">\n                        <router-outlet name=\"left-col\"></router-outlet>\n                        <button mat-mini-fab color=\"primary\" class=\"fade left-toggle\" *ngIf=\"showLeftCol\" (click)=\"leftcol.toggle()\"> << </button>\n                    </mat-sidenav>\n                    <mat-sidenav [(opened)]=\"showRightCol\" #rightcol mode=\"side\" position=\"end\" class=\"right\">\n                        <button mat-mini-fab color=\"primary\" class=\"fade right-toggle\" *ngIf=\"showRightCol\" (click)=\"rightcol.toggle()\"> >> </button>\n                        <router-outlet name=\"right-col\"></router-outlet>\n                    </mat-sidenav>\n                    <div class=\"middle\">\n                        <button mat-mini-fab color=\"primary\" class=\"fade left-toggle\" *ngIf=\"!showLeftCol\" (click)=\"leftcol.toggle()\"> >> </button>\n                        <button  mat-mini-fab color=\"primary\" class=\"fade right-toggle\" *ngIf=\"!showRightCol\" (click)=\"rightcol.toggle()\"> << </button>\n                        <router-outlet></router-outlet>\n                    </div>\n                </mat-sidenav-container>\n            </div>\n        </div>\n    </div>\n</ng-container>\n", styles: ["a{text-decoration:none}.body{flex-grow:1;max-height:calc(100vh - 100px);overflow:scroll}@media screen and (max-height: 560px){.body{max-height:100vh}}.left,.right{min-width:400px;max-width:33vw}.left-toggle{position:fixed;top:50%;left:5px;z-index:100}.right-toggle{position:fixed;top:50%;right:5px;z-index:100}a{margin-right:10px}a:not(:last-child):after{margin-left:10px;content:\"|\"}.compatibility-error{margin:2rem;padding:1.5rem;border:2px solid #7a1f1f;border-radius:8px;background:#fff5f5;color:#4b1515}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.Router }, { type: ApiCompatibilityService }], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
             }] } });