@doug-williamson/ng-rhombus 1.0.8 → 2.0.0-beta.1

package/fesm2022/doug-williamson-ng-rhombus.mjs

@@ -1,58 +1,56 @@
 import * as i1$3 from '@angular/cdk/layout';
 import { Breakpoints } from '@angular/cdk/layout';
 import * as i0 from '@angular/core';
-import { inject, Injectable, PLATFORM_ID, signal, computed, input, output, EventEmitter, Output, Component, Input, Injector, runInInjectionContext, ViewChild, effect } from '@angular/core';
-import * as i3$1 from '@angular/material/sidenav';
+import { inject, Injectable, InjectionToken, PLATFORM_ID, signal, computed, input, output, EventEmitter, Output, Component, Input, ViewChild, effect } from '@angular/core';
+import * as i3 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { BehaviorSubject, filter, of, Subject, takeUntil, firstValueFrom } from 'rxjs';
 import * as i1$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i3 from '@angular/material/icon';
+import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i4 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i2 from '@angular/material/toolbar';
+import * as i5 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { toSignal } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/router';
 import { NavigationEnd, Router, RouterModule, RouterLink } from '@angular/router';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { Auth, authState, signInWithEmailAndPassword } from '@angular/fire/auth';
 import { switchMap } from 'rxjs/operators';
-import * as i4$2 from '@angular/common';
-import { isPlatformBrowser, TitleCasePipe, DatePipe, CommonModule, NgClass, DOCUMENT } from '@angular/common';
+import * as i5$1 from '@angular/common';
+import { isPlatformBrowser, TitleCasePipe, DOCUMENT, DatePipe, CommonModule, NgClass } from '@angular/common';
 import * as i6 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i1$2 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i1$5 from '@angular/forms';
+import * as i2$1 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormBuilder } from '@angular/forms';
-import * as i2$1 from '@angular/material/card';
+import * as i2$2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i5 from '@angular/material/form-field';
+import * as i3$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i4$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i1$4 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { Title, Meta } from '@angular/platform-browser';
+import * as i2$3 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatDividerModule } from '@angular/material/divider';
 import * as i3$2 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
-import * as i2$2 from '@angular/material/dialog';
+import * as i2$4 from '@angular/material/dialog';
 import { MatDialog, MatDialogModule, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { Firestore, collection, query, orderBy, getDocs, doc, getDoc, limit, setDoc, updateDoc, deleteDoc, serverTimestamp, addDoc } from '@angular/fire/firestore';
-import { Storage, ref, uploadBytesResumable, deleteObject, getDownloadURL } from '@angular/fire/storage';
-import * as i5$1 from '@angular/cdk/text-field';
+import * as i7 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i5$2 from '@angular/cdk/text-field';
 import { TextFieldModule } from '@angular/cdk/text-field';
-import { MatDividerModule } from '@angular/material/divider';
 import { MarkdownComponent } from 'ngx-markdown';
-import * as i1$6 from '@fortawesome/angular-fontawesome';
+import * as i1$5 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faXTwitter, faFacebook, faBluesky, faLinkedin, faGithub, faTiktok, faTwitch, faInstagram, faYoutube } from '@fortawesome/free-brands-svg-icons';
 import { faLink } from '@fortawesome/free-solid-svg-icons';
-import * as i5$2 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
 
 var ThemeEnum;
 (function (ThemeEnum) {
@@ -124,19 +122,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1.Router }, { type: i1.ActivatedRoute }] });
 
+const NG_RHOMBUS_AUTH_ADAPTER = new InjectionToken('NG_RHOMBUS_AUTH_ADAPTER', {
+    providedIn: 'root',
+    factory: () => ({
+        currentUser$: of(null),
+        login: async () => {
+            throw new Error('NG_RHOMBUS_AUTH_ADAPTER is not provided.');
+        },
+        logout: async () => { }
+    })
+});
+
 class NgRhombusAuthenticationService {
     constructor() {
-        this.firebaseAuth = inject(Auth);
-        this.currentUser$ = authState(this.firebaseAuth);
-        this.currentUserProfile$ = this.currentUser$.pipe(switchMap((user) => {
-            return user?.uid ? of(user) : of(null);
-        }));
-        this.currentUserProfile = toSignal(this.currentUserProfile$);
+        this.authAdapter = inject(NG_RHOMBUS_AUTH_ADAPTER);
+        this.currentUser$ = this.authAdapter.currentUser$;
+        this.currentUserProfile$ = this.currentUser$.pipe(switchMap((user) => of(user?.uid ? user : null)));
+        this.currentUserProfile = toSignal(this.currentUserProfile$, { initialValue: null });
     }
     login(email, password) {
-        return signInWithEmailAndPassword(this.firebaseAuth, email, password).then(() => { });
+        return this.authAdapter.login(email, password);
     }
-    logout() { return this.firebaseAuth.signOut(); }
+    logout() { return this.authAdapter.logout(); }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusAuthenticationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusAuthenticationService, providedIn: 'root' }); }
 }
@@ -219,7 +226,7 @@ class NgRhombusHeaderComponent {
         this.logOut.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusHeaderComponent, isStandalone: true, selector: "ng-rhombus-header", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { logOut: "logOut", menuToggled: "menuToggled" }, ngImport: i0, template: "<mat-toolbar class=\"header-theme relative\">\r\n    @if (isMobile()) {\r\n    <button mat-icon-button (click)=\"toggleSidebar()\" color=\"red\">\r\n        <mat-icon>menu</mat-icon>\r\n    </button>\r\n    }\r\n    @if (isMobile()) {\r\n    <span class=\"flex-1\"></span>\r\n    }\r\n    <a mat-button class=\"title\" [routerLink]=\"['/']\">\r\n        {{ title() }}\r\n    </a>\r\n    <span class=\"flex-1\"></span>\r\n    <button class=\"mr-2\" mat-icon-button [mat-menu-trigger-for]=\"themeMenu\">\r\n        <mat-icon>{{ themeService.selectedTheme()?.icon }}</mat-icon>\r\n    </button>\r\n    <mat-menu #themeMenu=\"matMenu\">\r\n        @for (theme of themeService.getThemes(); track theme.name) {\r\n        <button [class.selected-theme]=\"themeService.selectedTheme()?.name === theme.name\" mat-menu-item\r\n            (click)=\"themeService.setTheme(theme.name)\">\r\n            <mat-icon>{{ theme.icon }}</mat-icon>\r\n            <span>{{ theme.name | titlecase }}</span>\r\n        </button>\r\n        }\r\n    </mat-menu>\r\n\r\n    @if (user()) {\r\n    <button mat-raised-button color=\"primary\" class=\"logout-button\" (click)=\"logout()\">\r\n        Logout\r\n    </button>\r\n    }\r\n</mat-toolbar>\r\n@if (isLoading()) {\r\n<mat-progress-bar class=\"!absolute top-[64px] z-10\" mode=\"indeterminate\" />\r\n}", styles: [".header-theme{--mat-toolbar-container-background-color: var(--mat-sys-primary);--mat-toolbar-container-text-color: var(--mat-sys-on-primary);--mat-icon-button-icon-color: var(--mat-sys-on-primary);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.title{font-size:22px}.selected-theme{--mat-menu-item-icon-color: var(--mat-sys-primary);--mat-menu-item-label-text-color: var(--mat-sys-primary)}mat-progress-bar{--mat-progress-bar-active-indicator-color: var(--mat-sys-primary);--mat-progress-bar-track-color: var(--mat-sys-surface-variant)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusHeaderComponent, isStandalone: true, selector: "ng-rhombus-header", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { logOut: "logOut", menuToggled: "menuToggled" }, ngImport: i0, template: "<mat-toolbar class=\"header-theme relative\">\r\n    @if (isMobile()) {\r\n    <button mat-icon-button (click)=\"toggleSidebar()\" color=\"red\">\r\n        <mat-icon>menu</mat-icon>\r\n    </button>\r\n    }\r\n    @if (isMobile()) {\r\n    <span class=\"flex-1\"></span>\r\n    }\r\n    <a mat-button class=\"title\" [routerLink]=\"['/']\">\r\n        {{ title() }}\r\n    </a>\r\n    <span class=\"flex-1\"></span>\r\n    <button class=\"mr-2\" mat-icon-button [mat-menu-trigger-for]=\"themeMenu\">\r\n        <mat-icon>{{ themeService.selectedTheme()?.icon }}</mat-icon>\r\n    </button>\r\n    <mat-menu #themeMenu=\"matMenu\">\r\n        @for (theme of themeService.getThemes(); track theme.name) {\r\n        <button [class.selected-theme]=\"themeService.selectedTheme()?.name === theme.name\" mat-menu-item\r\n            (click)=\"themeService.setTheme(theme.name)\">\r\n            <mat-icon>{{ theme.icon }}</mat-icon>\r\n            <span>{{ theme.name | titlecase }}</span>\r\n        </button>\r\n        }\r\n    </mat-menu>\r\n\r\n    @if (user()) {\r\n    <button mat-raised-button color=\"primary\" class=\"logout-button\" (click)=\"logout()\">\r\n        Logout\r\n    </button>\r\n    }\r\n</mat-toolbar>\r\n@if (isLoading()) {\r\n<mat-progress-bar class=\"!absolute top-[64px] z-10\" mode=\"indeterminate\" />\r\n}", styles: [".header-theme{--mat-toolbar-container-background-color: var(--mat-sys-primary);--mat-toolbar-container-text-color: var(--mat-sys-on-primary);--mat-icon-button-icon-color: var(--mat-sys-on-primary);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.title{font-size:22px}.selected-theme{--mat-menu-item-icon-color: var(--mat-sys-primary);--mat-menu-item-label-text-color: var(--mat-sys-primary)}mat-progress-bar{--mat-progress-bar-active-indicator-color: var(--mat-sys-primary);--mat-progress-bar-track-color: var(--mat-sys-surface-variant)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusHeaderComponent, decorators: [{
             type: Component,
@@ -285,11 +292,11 @@ class NgRhombusWrapperComponent {
         this.logout.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusWrapperComponent, deps: [{ token: i1$3.BreakpointObserver }, { token: WrapperService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: NgRhombusWrapperComponent, isStandalone: true, selector: "ng-rhombus-wrapper", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, routeCollection: { classPropertyName: "routeCollection", publicName: "routeCollection", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { clickAddNewEvent: "clickAddNewEvent", logout: "logout" }, providers: [WrapperService], ngImport: i0, template: "<div class=\"h-full flex flex-col\">\r\n    <ng-rhombus-header class=\"header-wrapper\" [isMobile]=\"isMobile\" [title]=\"title\" (menuToggled)=\"sidenav.toggle()\"\r\n        (logOut)=\"logOut()\" [isLoading]=\"isLoading()\"></ng-rhombus-header>\r\n    <mat-sidenav-container class=\"grow\">\r\n        <mat-sidenav #sidenav [opened]=\"!isMobile\" [mode]=\"isMobile ? 'over' : 'side'\">\r\n            <div class=\"nav-list-wrapper\">\r\n                <ng-rhombus-nav-list [routeCollection]=\"routeCollection\" (navItemSelected)=\"isMobile && sidenav.close()\"></ng-rhombus-nav-list>\r\n            </div>\r\n        </mat-sidenav>\r\n        <mat-sidenav-content class=\"main-sidenav-content\">\r\n            <!-- <mat-toolbar class=\"header-theme\">\r\n                <span class=\"wrapper-flex\">\r\n                    <ng-container *ngFor=\"let breadcrumb of breadcrumbs()\">\r\n                        {{ breadcrumb.label }}\r\n                    </ng-container>\r\n                </span>\r\n                <button mat-icon-button (click)=\"clickedCreateNew()\">\r\n                    <mat-icon>add</mat-icon>\r\n                </button>\r\n            </mat-toolbar> -->\r\n            <router-outlet #o=\"outlet\"></router-outlet>\r\n        </mat-sidenav-content>\r\n    </mat-sidenav-container>\r\n</div>", styles: [".header-wrapper{z-index:5}mat-sidenav{width:250px}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i3$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: NgRhombusHeaderComponent, selector: "ng-rhombus-header", inputs: ["isLoading", "isMobile", "title"], outputs: ["logOut", "menuToggled"] }, { kind: "component", type: NgRhombusNavListComponent, selector: "ng-rhombus-nav-list", inputs: ["routeCollection"], outputs: ["navItemSelected"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: NgRhombusWrapperComponent, isStandalone: true, selector: "ng-rhombus-wrapper", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, routeCollection: { classPropertyName: "routeCollection", publicName: "routeCollection", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { clickAddNewEvent: "clickAddNewEvent", logout: "logout" }, providers: [WrapperService], ngImport: i0, template: "<div class=\"h-full flex flex-col\">\r\n    <ng-rhombus-header class=\"header-wrapper\" [isMobile]=\"isMobile\" [title]=\"title\" (menuToggled)=\"sidenav.toggle()\"\r\n        (logOut)=\"logOut()\" [isLoading]=\"isLoading()\"></ng-rhombus-header>\r\n    <mat-sidenav-container class=\"grow\">\r\n        <mat-sidenav #sidenav [opened]=\"!isMobile\" [mode]=\"isMobile ? 'over' : 'side'\">\r\n            <div class=\"nav-list-wrapper\">\r\n                <ng-rhombus-nav-list [routeCollection]=\"routeCollection\"\r\n                    (navItemSelected)=\"isMobile && sidenav.close()\"></ng-rhombus-nav-list>\r\n            </div>\r\n        </mat-sidenav>\r\n        <mat-sidenav-content class=\"main-sidenav-content\">\r\n            <router-outlet #o=\"outlet\"></router-outlet>\r\n        </mat-sidenav-content>\r\n    </mat-sidenav-container>\r\n</div>", styles: [".header-wrapper{z-index:5}mat-sidenav{width:250px}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i3.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: NgRhombusHeaderComponent, selector: "ng-rhombus-header", inputs: ["isLoading", "isMobile", "title"], outputs: ["logOut", "menuToggled"] }, { kind: "component", type: NgRhombusNavListComponent, selector: "ng-rhombus-nav-list", inputs: ["routeCollection"], outputs: ["navItemSelected"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-rhombus-wrapper', imports: [MatSidenavModule, MatButtonModule, MatIconModule, MatListModule, MatProgressBarModule, MatToolbarModule, RouterModule, NgRhombusHeaderComponent, NgRhombusNavListComponent], providers: [WrapperService], template: "<div class=\"h-full flex flex-col\">\r\n    <ng-rhombus-header class=\"header-wrapper\" [isMobile]=\"isMobile\" [title]=\"title\" (menuToggled)=\"sidenav.toggle()\"\r\n        (logOut)=\"logOut()\" [isLoading]=\"isLoading()\"></ng-rhombus-header>\r\n    <mat-sidenav-container class=\"grow\">\r\n        <mat-sidenav #sidenav [opened]=\"!isMobile\" [mode]=\"isMobile ? 'over' : 'side'\">\r\n            <div class=\"nav-list-wrapper\">\r\n                <ng-rhombus-nav-list [routeCollection]=\"routeCollection\" (navItemSelected)=\"isMobile && sidenav.close()\"></ng-rhombus-nav-list>\r\n            </div>\r\n        </mat-sidenav>\r\n        <mat-sidenav-content class=\"main-sidenav-content\">\r\n            <!-- <mat-toolbar class=\"header-theme\">\r\n                <span class=\"wrapper-flex\">\r\n                    <ng-container *ngFor=\"let breadcrumb of breadcrumbs()\">\r\n                        {{ breadcrumb.label }}\r\n                    </ng-container>\r\n                </span>\r\n                <button mat-icon-button (click)=\"clickedCreateNew()\">\r\n                    <mat-icon>add</mat-icon>\r\n                </button>\r\n            </mat-toolbar> -->\r\n            <router-outlet #o=\"outlet\"></router-outlet>\r\n        </mat-sidenav-content>\r\n    </mat-sidenav-container>\r\n</div>", styles: [".header-wrapper{z-index:5}mat-sidenav{width:250px}\n"] }]
+            args: [{ selector: 'ng-rhombus-wrapper', imports: [MatSidenavModule, MatButtonModule, MatIconModule, MatListModule, MatProgressBarModule, RouterModule, NgRhombusHeaderComponent, NgRhombusNavListComponent], providers: [WrapperService], template: "<div class=\"h-full flex flex-col\">\r\n    <ng-rhombus-header class=\"header-wrapper\" [isMobile]=\"isMobile\" [title]=\"title\" (menuToggled)=\"sidenav.toggle()\"\r\n        (logOut)=\"logOut()\" [isLoading]=\"isLoading()\"></ng-rhombus-header>\r\n    <mat-sidenav-container class=\"grow\">\r\n        <mat-sidenav #sidenav [opened]=\"!isMobile\" [mode]=\"isMobile ? 'over' : 'side'\">\r\n            <div class=\"nav-list-wrapper\">\r\n                <ng-rhombus-nav-list [routeCollection]=\"routeCollection\"\r\n                    (navItemSelected)=\"isMobile && sidenav.close()\"></ng-rhombus-nav-list>\r\n            </div>\r\n        </mat-sidenav>\r\n        <mat-sidenav-content class=\"main-sidenav-content\">\r\n            <router-outlet #o=\"outlet\"></router-outlet>\r\n        </mat-sidenav-content>\r\n    </mat-sidenav-container>\r\n</div>", styles: [".header-wrapper{z-index:5}mat-sidenav{width:250px}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.BreakpointObserver }, { type: WrapperService }], propDecorators: { clickAddNewEvent: [{
                 type: Output
             }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], logout: [{ type: i0.Output, args: ["logout"] }], title: [{
@@ -332,13 +339,13 @@ class NgRhombusLoginComponent {
         const rawForm = this.loginForm.getRawValue();
         this.onSubmit.emit(rawForm);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusLoginComponent, deps: [{ token: i1$5.FormBuilder }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: NgRhombusLoginComponent, isStandalone: true, selector: "ng-rhombus-login", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit" }, ngImport: i0, template: "<div class=\"flex min-h-screen items-center justify-center bg-background\">\r\n    <mat-card class=\"w-full max-w-[400px] p-10\">\r\n        <mat-card-header>\r\n            <mat-card-title-group>\r\n                <mat-card-title>{{ title() }}</mat-card-title>\r\n                <mat-card-subtitle>Administration</mat-card-subtitle>\r\n            </mat-card-title-group>\r\n\r\n        </mat-card-header>\r\n        <form class=\"flex flex-col\" novalidate [formGroup]=\"loginForm\" (ngSubmit)=\"onSubmitForm()\">\r\n            <mat-card-content>\r\n                <mat-form-field class=\"w-full flex\">\r\n                    <mat-label>Email Address</mat-label>\r\n                    <input matInput placeholder=\"Placeholder\" formControlName=\"email\" aria-label=\"Email Address\" />\r\n                    <mat-icon matSuffix>email</mat-icon>\r\n                    <mat-error align=\"start\">Email Address Required</mat-error>\r\n                </mat-form-field>\r\n                <mat-form-field class=\"w-full flex\">\r\n                    <mat-label>Password</mat-label>\r\n                    <input matInput [type]=\"hidePassword() ? 'password' : 'text'\" placeholder=\"Placeholder\"\r\n                        formControlName=\"password\" aria-label=\"Password\" />\r\n                    <button mat-icon-button matSuffix (click)=\"hidePassword.set(!hidePassword())\" type=\"button\"\r\n                        style=\"margin-right: 0.25rem;\">\r\n                        <mat-icon>{{ hidePassword() ? 'visibility_off' : 'visibility' }}</mat-icon>\r\n                    </button>\r\n                    <mat-error align=\"start\">Password Required</mat-error>\r\n                </mat-form-field>\r\n            </mat-card-content>\r\n            <button mat-flat-button class=\"login-button\" type=\"submit\" [disabled]=\"loading() || loginForm.invalid\">\r\n                <ng-rhombus-loading-container [loading]=\"loading()\" [size]=\"20\">\r\n                    Login\r\n                </ng-rhombus-loading-container>\r\n            </button>\r\n        </form>\r\n    </mat-card>\r\n</div>", styles: ["mat-card{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.login-button{margin:8px 16px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i2$1.MatCardTitleGroup, selector: "mat-card-title-group" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: "component", type: NgRhombusLoadingContainerComponent, selector: "ng-rhombus-loading-container", inputs: ["loading", "size"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusLoginComponent, deps: [{ token: i2$1.FormBuilder }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: NgRhombusLoginComponent, isStandalone: true, selector: "ng-rhombus-login", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit" }, ngImport: i0, template: "<div class=\"flex min-h-screen items-center justify-center bg-background\">\r\n    <mat-card class=\"w-full max-w-[400px] p-10\">\r\n        <mat-card-header>\r\n            <mat-card-title-group>\r\n                <mat-card-title>{{ title() }}</mat-card-title>\r\n                <mat-card-subtitle>Administration</mat-card-subtitle>\r\n            </mat-card-title-group>\r\n\r\n        </mat-card-header>\r\n        <form class=\"flex flex-col\" novalidate [formGroup]=\"loginForm\" (ngSubmit)=\"onSubmitForm()\">\r\n            <mat-card-content>\r\n                <mat-form-field class=\"w-full flex\">\r\n                    <mat-label>Email Address</mat-label>\r\n                    <input matInput placeholder=\"Placeholder\" formControlName=\"email\" aria-label=\"Email Address\" />\r\n                    <mat-icon matSuffix>email</mat-icon>\r\n                    <mat-error align=\"start\">Email Address Required</mat-error>\r\n                </mat-form-field>\r\n                <mat-form-field class=\"w-full flex\">\r\n                    <mat-label>Password</mat-label>\r\n                    <input matInput [type]=\"hidePassword() ? 'password' : 'text'\" placeholder=\"Placeholder\"\r\n                        formControlName=\"password\" aria-label=\"Password\" />\r\n                    <button mat-icon-button matSuffix (click)=\"hidePassword.set(!hidePassword())\" type=\"button\"\r\n                        style=\"margin-right: 0.25rem;\">\r\n                        <mat-icon>{{ hidePassword() ? 'visibility_off' : 'visibility' }}</mat-icon>\r\n                    </button>\r\n                    <mat-error align=\"start\">Password Required</mat-error>\r\n                </mat-form-field>\r\n            </mat-card-content>\r\n            <button mat-flat-button class=\"login-button\" type=\"submit\" [disabled]=\"loading() || loginForm.invalid\">\r\n                <ng-rhombus-loading-container [loading]=\"loading()\" [size]=\"20\">\r\n                    Login\r\n                </ng-rhombus-loading-container>\r\n            </button>\r\n        </form>\r\n    </mat-card>\r\n</div>", styles: ["mat-card{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.login-button{margin:8px 16px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i2$2.MatCardTitleGroup, selector: "mat-card-title-group" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: "component", type: NgRhombusLoadingContainerComponent, selector: "ng-rhombus-loading-container", inputs: ["loading", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusLoginComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-rhombus-login', imports: [ReactiveFormsModule, MatButtonModule, MatCardModule, MatFormFieldModule, MatIconModule, MatInputModule, NgRhombusLoadingContainerComponent], template: "<div class=\"flex min-h-screen items-center justify-center bg-background\">\r\n    <mat-card class=\"w-full max-w-[400px] p-10\">\r\n        <mat-card-header>\r\n            <mat-card-title-group>\r\n                <mat-card-title>{{ title() }}</mat-card-title>\r\n                <mat-card-subtitle>Administration</mat-card-subtitle>\r\n            </mat-card-title-group>\r\n\r\n        </mat-card-header>\r\n        <form class=\"flex flex-col\" novalidate [formGroup]=\"loginForm\" (ngSubmit)=\"onSubmitForm()\">\r\n            <mat-card-content>\r\n                <mat-form-field class=\"w-full flex\">\r\n                    <mat-label>Email Address</mat-label>\r\n                    <input matInput placeholder=\"Placeholder\" formControlName=\"email\" aria-label=\"Email Address\" />\r\n                    <mat-icon matSuffix>email</mat-icon>\r\n                    <mat-error align=\"start\">Email Address Required</mat-error>\r\n                </mat-form-field>\r\n                <mat-form-field class=\"w-full flex\">\r\n                    <mat-label>Password</mat-label>\r\n                    <input matInput [type]=\"hidePassword() ? 'password' : 'text'\" placeholder=\"Placeholder\"\r\n                        formControlName=\"password\" aria-label=\"Password\" />\r\n                    <button mat-icon-button matSuffix (click)=\"hidePassword.set(!hidePassword())\" type=\"button\"\r\n                        style=\"margin-right: 0.25rem;\">\r\n                        <mat-icon>{{ hidePassword() ? 'visibility_off' : 'visibility' }}</mat-icon>\r\n                    </button>\r\n                    <mat-error align=\"start\">Password Required</mat-error>\r\n                </mat-form-field>\r\n            </mat-card-content>\r\n            <button mat-flat-button class=\"login-button\" type=\"submit\" [disabled]=\"loading() || loginForm.invalid\">\r\n                <ng-rhombus-loading-container [loading]=\"loading()\" [size]=\"20\">\r\n                    Login\r\n                </ng-rhombus-loading-container>\r\n            </button>\r\n        </form>\r\n    </mat-card>\r\n</div>", styles: ["mat-card{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.login-button{margin:8px 16px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.FormBuilder }, { type: i1.Router }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }] } });
+        }], ctorParameters: () => [{ type: i2$1.FormBuilder }, { type: i1.Router }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }] } });
 
 class NgRhombusSpinnerComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -356,52 +363,108 @@ class NgRhombusPageComponent {
         this.currentYear = new Date().getFullYear();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusPageComponent, isStandalone: true, selector: "ng-rhombus-page", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, backLink: { classPropertyName: "backLink", publicName: "backLink", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"page flex flex-col h-full\">\r\n    <mat-toolbar class=\"toolbar\">\r\n        @if (backLink()) {\r\n        <button matIconButton [routerLink]=\"backLink()\" aria-label=\"Back\" class=\"back-button\">\r\n            <mat-icon>arrow_back</mat-icon>\r\n        </button>\r\n        }\r\n        <span>{{ title() }}</span>\r\n    </mat-toolbar>\r\n\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <mat-toolbar class=\"mt-6 flex justify-center\">\r\n        <span class=\"title\">&copy; {{ currentYear }} - Powered By Rhombus</span>\r\n    </mat-toolbar>\r\n</div>", styles: [":host{display:flex;flex-direction:column}.page{display:flex;flex-direction:column;margin:12px auto;width:min(100% - 24px,600px)}.content{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}:host(.no-elevation) .content{box-shadow:none}.toolbar{margin-bottom:12px;--mat-toolbar-container-background-color: var(--mat-sys-primary);--mat-toolbar-container-text-color: var(--mat-sys-on-primary);--mat-icon-button-icon-color: var(--mat-sys-on-primary)}.back-button{margin-right:8px}.title{font-size:14px}.content{margin-bottom:12px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusPageComponent, isStandalone: true, selector: "ng-rhombus-page", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, backLink: { classPropertyName: "backLink", publicName: "backLink", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"page flex flex-col h-full\">\r\n    <div class=\"page-header\">\r\n        @if (backLink()) {\r\n        <button matIconButton [routerLink]=\"backLink()\" aria-label=\"Back\" class=\"back-button\">\r\n            <mat-icon>arrow_back</mat-icon>\r\n        </button>\r\n        }\r\n        <div class=\"page-header__title mat-title-large\">{{ title() }}</div>\r\n    </div>\r\n\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"page-footer mt-6\">\r\n        <div class=\"page-footer__text\">&copy; {{ currentYear }} - Powered By Rhombus</div>\r\n    </div>\r\n</div>", styles: [":host{display:flex;flex-direction:column}.page{display:flex;flex-direction:column;margin:12px auto;width:min(100% - 24px,600px)}.content{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}:host(.no-elevation) .content{box-shadow:none}.page-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:12px 16px;border:1px solid var(--mat-sys-outline-variant);border-left:0;border-right:0;background:var(--mat-sys-surface);color:var(--mat-sys-on-surface)}.page-header__title{margin:0}.back-button{margin-right:8px}.page-footer{display:flex;justify-content:center;padding:12px 16px;border:1px solid var(--mat-sys-outline-variant);border-left:0;border-right:0;background:var(--mat-sys-surface);color:var(--mat-sys-on-surface-variant)}.page-footer__text{font-size:14px}.content{margin-bottom:12px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-rhombus-page', imports: [MatButtonModule, MatToolbarModule, MatIconModule, RouterModule], template: "<div class=\"page flex flex-col h-full\">\r\n    <mat-toolbar class=\"toolbar\">\r\n        @if (backLink()) {\r\n        <button matIconButton [routerLink]=\"backLink()\" aria-label=\"Back\" class=\"back-button\">\r\n            <mat-icon>arrow_back</mat-icon>\r\n        </button>\r\n        }\r\n        <span>{{ title() }}</span>\r\n    </mat-toolbar>\r\n\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <mat-toolbar class=\"mt-6 flex justify-center\">\r\n        <span class=\"title\">&copy; {{ currentYear }} - Powered By Rhombus</span>\r\n    </mat-toolbar>\r\n</div>", styles: [":host{display:flex;flex-direction:column}.page{display:flex;flex-direction:column;margin:12px auto;width:min(100% - 24px,600px)}.content{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}:host(.no-elevation) .content{box-shadow:none}.toolbar{margin-bottom:12px;--mat-toolbar-container-background-color: var(--mat-sys-primary);--mat-toolbar-container-text-color: var(--mat-sys-on-primary);--mat-icon-button-icon-color: var(--mat-sys-on-primary)}.back-button{margin-right:8px}.title{font-size:14px}.content{margin-bottom:12px}\n"] }]
+            args: [{ selector: 'ng-rhombus-page', imports: [MatButtonModule, MatIconModule, RouterModule], template: "<div class=\"page flex flex-col h-full\">\r\n    <div class=\"page-header\">\r\n        @if (backLink()) {\r\n        <button matIconButton [routerLink]=\"backLink()\" aria-label=\"Back\" class=\"back-button\">\r\n            <mat-icon>arrow_back</mat-icon>\r\n        </button>\r\n        }\r\n        <div class=\"page-header__title mat-title-large\">{{ title() }}</div>\r\n    </div>\r\n\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"page-footer mt-6\">\r\n        <div class=\"page-footer__text\">&copy; {{ currentYear }} - Powered By Rhombus</div>\r\n    </div>\r\n</div>", styles: [":host{display:flex;flex-direction:column}.page{display:flex;flex-direction:column;margin:12px auto;width:min(100% - 24px,600px)}.content{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}:host(.no-elevation) .content{box-shadow:none}.page-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:12px 16px;border:1px solid var(--mat-sys-outline-variant);border-left:0;border-right:0;background:var(--mat-sys-surface);color:var(--mat-sys-on-surface)}.page-header__title{margin:0}.back-button{margin-right:8px}.page-footer{display:flex;justify-content:center;padding:12px 16px;border:1px solid var(--mat-sys-outline-variant);border-left:0;border-right:0;background:var(--mat-sys-surface);color:var(--mat-sys-on-surface-variant)}.page-footer__text{font-size:14px}.content{margin-bottom:12px}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], backLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLink", required: false }] }] } });
 
+const NG_RHOMBUS_SEO_ADAPTER = new InjectionToken('NG_RHOMBUS_SEO_ADAPTER', {
+    providedIn: 'root',
+    factory: () => ({
+        setTitle: () => { },
+        updateTag: () => { },
+    }),
+});
+
 /*
  * Public API Surface of @doug-williamson/ng-rhombus/shell
  */
 
+function ngRhombusTimestampToMillis(value) {
+    if (value == null)
+        return null;
+    if (typeof value === 'number')
+        return value;
+    if (value instanceof Date)
+        return value.getTime();
+    if (typeof value === 'string') {
+        const asNumber = Number(value);
+        if (Number.isFinite(asNumber))
+            return asNumber;
+        const asDate = new Date(value);
+        return Number.isFinite(asDate.getTime()) ? asDate.getTime() : null;
+    }
+    const maybeToMillis = value;
+    if (typeof maybeToMillis.toMillis === 'function') {
+        return maybeToMillis.toMillis();
+    }
+    const maybeSeconds = value;
+    if (typeof maybeSeconds.seconds === 'number') {
+        return maybeSeconds.seconds * 1000;
+    }
+    return null;
+}
+var ContentPillar;
+(function (ContentPillar) {
+    ContentPillar["DeveloperLife"] = "Developer Life";
+    ContentPillar["AngularWebEngineering"] = "Angular & Web Engineering";
+    ContentPillar["GamingAsAnAdult"] = "Gaming as an Adult";
+    ContentPillar["FatherhoodFamily"] = "Fatherhood & Family";
+    ContentPillar["CareerBalanceIdentity"] = "Career, Balance & Identity";
+})(ContentPillar || (ContentPillar = {}));
+var BlogSeries;
+(function (BlogSeries) {
+    BlogSeries["ThisWeekILearned"] = "This Week I Learned";
+    BlogSeries["DevDiary"] = "Dev Diary";
+    BlogSeries["AdultGamerNotes"] = "Adult Gamer Notes";
+    BlogSeries["LessonsFromFatherhood"] = "Lessons from Fatherhood";
+    BlogSeries["TradeoffsTruths"] = "Tradeoffs & Truths";
+    BlogSeries["FromTheEditor"] = "From The Editor";
+})(BlogSeries || (BlogSeries = {}));
+class IBlog {
+}
+
 class NgRhombusBlogListComponent {
     constructor() {
         this.goToRoute = new EventEmitter();
-        this.#title = inject(Title);
-        this.#meta = inject(Meta);
+        this.#seo = inject(NG_RHOMBUS_SEO_ADAPTER);
+        this.#platformId = inject(PLATFORM_ID);
+        this.#document = inject(DOCUMENT);
         this.dataSource = input([], ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+        this.timestampToMillis = ngRhombusTimestampToMillis;
     }
-    #title;
-    #meta;
+    #seo;
+    #platformId;
+    #document;
     ngOnInit() {
-        const imageUrl = new URL('/fav.ico', window.location.origin).toString();
+        const origin = isPlatformBrowser(this.#platformId) ? this.#document.location?.origin : undefined;
+        const imageUrl = origin ? new URL('/fav.ico', origin).toString() : '/fav.ico';
         // Document title
-        this.#title.setTitle('Blog - Doug Williamson');
+        this.#seo.setTitle('Blog - Doug Williamson');
         // Basic meta
-        this.#meta.updateTag({ name: 'description', content: 'This is my personal collection of blog posts.' });
+        this.#seo.updateTag({ name: 'description', content: 'This is my personal collection of blog posts.' });
         // Open Graph
-        this.#meta.updateTag({ property: 'og:type', content: 'article' });
-        this.#meta.updateTag({ property: 'og:title', content: 'Blog - Doug Williamson' });
-        this.#meta.updateTag({ property: 'og:description', content: 'This is my personal collection of blog posts.' });
-        this.#meta.updateTag({ property: 'og:image', content: imageUrl });
+        this.#seo.updateTag({ property: 'og:type', content: 'article' });
+        this.#seo.updateTag({ property: 'og:title', content: 'Blog - Doug Williamson' });
+        this.#seo.updateTag({ property: 'og:description', content: 'This is my personal collection of blog posts.' });
+        this.#seo.updateTag({ property: 'og:image', content: imageUrl });
         // Twitter Card
-        this.#meta.updateTag({ name: 'twitter:card', content: 'summary' });
-        this.#meta.updateTag({ name: 'twitter:title', content: 'Blog - Doug Williamson' });
-        this.#meta.updateTag({ name: 'twitter:description', content: 'This is my personal collection of blog posts.' });
-        this.#meta.updateTag({ name: 'twitter:image', content: imageUrl });
+        this.#seo.updateTag({ name: 'twitter:card', content: 'summary' });
+        this.#seo.updateTag({ name: 'twitter:title', content: 'Blog - Doug Williamson' });
+        this.#seo.updateTag({ name: 'twitter:description', content: 'This is my personal collection of blog posts.' });
+        this.#seo.updateTag({ name: 'twitter:image', content: imageUrl });
     }
     goToBlogPost(id) {
         this.goToRoute.emit(id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusBlogListComponent, isStandalone: true, selector: "ng-rhombus-blog-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { goToRoute: "goToRoute" }, ngImport: i0, template: "@if ((dataSource()).length === 0) {\r\n<p class=\"m-6 justify-self-center\">No blog posts found.</p>\r\n} @else {\r\n<mat-nav-list>\r\n\t@for (blogPost of dataSource(); track blogPost.id) {\r\n\t<mat-list-item (click)=\"goToRoute.emit(blogPost.id)\">\r\n\t\t<h3 matListItemTitle>{{ blogPost.title }}</h3>\r\n\t\t<p matListItemLine>{{ blogPost.description }}</p>\r\n\t\t<p matListItemMeta>{{ blogPost.timestamp.toMillis() | date: 'MMMM d, y' }}</p>\r\n\t</mat-list-item>\r\n\t}\r\n</mat-nav-list>\r\n}", styles: [".mdc-list{padding:0}.mdc-list-item{border-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i1$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$2.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i1$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i1$2.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusBlogListComponent, isStandalone: true, selector: "ng-rhombus-blog-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { goToRoute: "goToRoute" }, ngImport: i0, template: "@if ((dataSource()).length === 0) {\r\n<p class=\"m-6 justify-self-center\">No blog posts found.</p>\r\n} @else {\r\n<mat-nav-list>\r\n\t@for (blogPost of dataSource(); track blogPost.id; let last = $last) {\r\n\t<mat-list-item (click)=\"goToRoute.emit(blogPost.id)\" lines=\"2\">\r\n\t\t<h3 matListItemTitle>{{ blogPost.title }}</h3>\r\n\t\t<p matListItemMeta>{{ timestampToMillis(blogPost.timestamp) | date: 'MMMM d, y' }}</p>\r\n\r\n\t\t@if (blogPost.pillar || blogPost.series || (blogPost.tags?.length ?? 0) > 0) {\r\n\t\t<div matListItemLine class=\"taxonomy\">\r\n\t\t\t<mat-chip-set aria-label=\"Post taxonomy\">\r\n\t\t\t\t@if (blogPost.pillar) {\r\n\t\t\t\t<mat-chip [highlighted]=\"true\" class=\"primary-chips-theme\">Pillar: {{ blogPost.pillar }}</mat-chip>\r\n\t\t\t\t}\r\n\t\t\t\t@if (blogPost.series) {\r\n\t\t\t\t<mat-chip [highlighted]=\"true\" class=\"secondary-chips-theme\">Series: {{ blogPost.series }}</mat-chip>\r\n\t\t\t\t}\r\n\t\t\t\t<!-- @for (t of blogPost.tags ?? []; track t) {\r\n\t\t\t\t<mat-chip [highlighted]=\"true\" class=\"neutral-chips-theme\">#{{ t }}</mat-chip>\r\n\t\t\t\t} -->\r\n\t\t\t</mat-chip-set>\r\n\t\t</div>\r\n\t\t}\r\n\t</mat-list-item>\r\n\t@if (!last) {\r\n\t<mat-divider></mat-divider>\r\n\t}\r\n\t}\r\n</mat-nav-list>\r\n}", styles: [".neutral-chips-theme{--mat-chip-outline-color: var(--mat-sys-surface-variant);--mat-chip-elevated-selected-container-color: var(--mat-sys-surface-variant);--mat-chip-selected-label-text-color: var(--mat-sys-on-surface-variant);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.primary-chips-theme{--mat-chip-outline-color: var(--mat-sys-primary);--mat-chip-elevated-selected-container-color: var(--mat-sys-primary);--mat-chip-selected-label-text-color: var(--mat-sys-on-primary);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.secondary-chips-theme{--mat-chip-outline-color: var(--mat-sys-secondary);--mat-chip-elevated-selected-container-color: var(--mat-sys-secondary);--mat-chip-selected-label-text-color: var(--mat-sys-on-secondary);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.mdc-list{padding:0}.mdc-list-item{border-radius:0!important;height:auto;padding:12px 16px}.taxonomy mat-chip-set{max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i1$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i1$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i1$2.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i1$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i1$2.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i2$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-rhombus-blog-list', imports: [DatePipe, MatListModule], template: "@if ((dataSource()).length === 0) {\r\n<p class=\"m-6 justify-self-center\">No blog posts found.</p>\r\n} @else {\r\n<mat-nav-list>\r\n\t@for (blogPost of dataSource(); track blogPost.id) {\r\n\t<mat-list-item (click)=\"goToRoute.emit(blogPost.id)\">\r\n\t\t<h3 matListItemTitle>{{ blogPost.title }}</h3>\r\n\t\t<p matListItemLine>{{ blogPost.description }}</p>\r\n\t\t<p matListItemMeta>{{ blogPost.timestamp.toMillis() | date: 'MMMM d, y' }}</p>\r\n\t</mat-list-item>\r\n\t}\r\n</mat-nav-list>\r\n}", styles: [".mdc-list{padding:0}.mdc-list-item{border-radius:0!important}\n"] }]
+            args: [{ selector: 'ng-rhombus-blog-list', imports: [DatePipe, MatListModule, MatDividerModule, MatChipsModule], template: "@if ((dataSource()).length === 0) {\r\n<p class=\"m-6 justify-self-center\">No blog posts found.</p>\r\n} @else {\r\n<mat-nav-list>\r\n\t@for (blogPost of dataSource(); track blogPost.id; let last = $last) {\r\n\t<mat-list-item (click)=\"goToRoute.emit(blogPost.id)\" lines=\"2\">\r\n\t\t<h3 matListItemTitle>{{ blogPost.title }}</h3>\r\n\t\t<p matListItemMeta>{{ timestampToMillis(blogPost.timestamp) | date: 'MMMM d, y' }}</p>\r\n\r\n\t\t@if (blogPost.pillar || blogPost.series || (blogPost.tags?.length ?? 0) > 0) {\r\n\t\t<div matListItemLine class=\"taxonomy\">\r\n\t\t\t<mat-chip-set aria-label=\"Post taxonomy\">\r\n\t\t\t\t@if (blogPost.pillar) {\r\n\t\t\t\t<mat-chip [highlighted]=\"true\" class=\"primary-chips-theme\">Pillar: {{ blogPost.pillar }}</mat-chip>\r\n\t\t\t\t}\r\n\t\t\t\t@if (blogPost.series) {\r\n\t\t\t\t<mat-chip [highlighted]=\"true\" class=\"secondary-chips-theme\">Series: {{ blogPost.series }}</mat-chip>\r\n\t\t\t\t}\r\n\t\t\t\t<!-- @for (t of blogPost.tags ?? []; track t) {\r\n\t\t\t\t<mat-chip [highlighted]=\"true\" class=\"neutral-chips-theme\">#{{ t }}</mat-chip>\r\n\t\t\t\t} -->\r\n\t\t\t</mat-chip-set>\r\n\t\t</div>\r\n\t\t}\r\n\t</mat-list-item>\r\n\t@if (!last) {\r\n\t<mat-divider></mat-divider>\r\n\t}\r\n\t}\r\n</mat-nav-list>\r\n}", styles: [".neutral-chips-theme{--mat-chip-outline-color: var(--mat-sys-surface-variant);--mat-chip-elevated-selected-container-color: var(--mat-sys-surface-variant);--mat-chip-selected-label-text-color: var(--mat-sys-on-surface-variant);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.primary-chips-theme{--mat-chip-outline-color: var(--mat-sys-primary);--mat-chip-elevated-selected-container-color: var(--mat-sys-primary);--mat-chip-selected-label-text-color: var(--mat-sys-on-primary);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.secondary-chips-theme{--mat-chip-outline-color: var(--mat-sys-secondary);--mat-chip-elevated-selected-container-color: var(--mat-sys-secondary);--mat-chip-selected-label-text-color: var(--mat-sys-on-secondary);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.mdc-list{padding:0}.mdc-list-item{border-radius:0!important;height:auto;padding:12px 16px}.taxonomy mat-chip-set{max-width:100%}\n"] }]
         }], propDecorators: { goToRoute: [{
                 type: Output
             }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }] } });
@@ -409,13 +472,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImpor
 class NgRhombusBlogPostLatestComponent {
     constructor() {
         this.blogPost = input(...(ngDevMode ? [undefined, { debugName: "blogPost" }] : []));
+        this.timestampToMillis = ngRhombusTimestampToMillis;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogPostLatestComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: NgRhombusBlogPostLatestComponent, isStandalone: true, selector: "ng-rhombus-blog-post-latest", inputs: { blogPost: { classPropertyName: "blogPost", publicName: "blogPost", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-nav-list>\r\n    <mat-list-item [routerLink]=\"['/blog', blogPost()?.id]\">\r\n        <span matListItemTitle>{{ blogPost()?.title }}</span>\r\n        <span matListItemLine>{{ blogPost()?.description }}</span>\r\n        <span matListItemLine>{{ blogPost()?.timestamp?.toMillis() | date: 'MMMM d, y' }}</span>\r\n    </mat-list-item>\r\n</mat-nav-list>", styles: [".mdc-list-item{border-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i1$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$2.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i1$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: NgRhombusBlogPostLatestComponent, isStandalone: true, selector: "ng-rhombus-blog-post-latest", inputs: { blogPost: { classPropertyName: "blogPost", publicName: "blogPost", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-nav-list>\r\n    <mat-list-item [routerLink]=\"['/blog', blogPost()?.id]\">\r\n        <span matListItemTitle>{{ blogPost()?.title }}</span>\r\n        <span matListItemLine>{{ blogPost()?.description }}</span>\r\n        <span matListItemLine>{{ timestampToMillis(blogPost()?.timestamp) | date: 'MMMM d, y' }}</span>\r\n    </mat-list-item>\r\n</mat-nav-list>", styles: [".mdc-list-item{border-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i1$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$2.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i1$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogPostLatestComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-rhombus-blog-post-latest', imports: [DatePipe, MatListModule, RouterLink], template: "<mat-nav-list>\r\n    <mat-list-item [routerLink]=\"['/blog', blogPost()?.id]\">\r\n        <span matListItemTitle>{{ blogPost()?.title }}</span>\r\n        <span matListItemLine>{{ blogPost()?.description }}</span>\r\n        <span matListItemLine>{{ blogPost()?.timestamp?.toMillis() | date: 'MMMM d, y' }}</span>\r\n    </mat-list-item>\r\n</mat-nav-list>", styles: [".mdc-list-item{border-radius:0!important}\n"] }]
+            args: [{ selector: 'ng-rhombus-blog-post-latest', imports: [DatePipe, MatListModule, RouterLink], template: "<mat-nav-list>\r\n    <mat-list-item [routerLink]=\"['/blog', blogPost()?.id]\">\r\n        <span matListItemTitle>{{ blogPost()?.title }}</span>\r\n        <span matListItemLine>{{ blogPost()?.description }}</span>\r\n        <span matListItemLine>{{ timestampToMillis(blogPost()?.timestamp) | date: 'MMMM d, y' }}</span>\r\n    </mat-list-item>\r\n</mat-nav-list>", styles: [".mdc-list-item{border-radius:0!important}\n"] }]
         }], propDecorators: { blogPost: [{ type: i0.Input, args: [{ isSignal: true, alias: "blogPost", required: false }] }] } });
 
 class NgRhombusBlogPostHelper {
@@ -433,72 +497,125 @@ class NgRhombusBlogPostHelper {
     }
 }
 
+const NG_RHOMBUS_BLOG_ADAPTER = new InjectionToken('NG_RHOMBUS_BLOG_ADAPTER', {
+    providedIn: 'root',
+    factory: () => ({
+        fetchBlogPosts: async () => {
+            throw new Error('NG_RHOMBUS_BLOG_ADAPTER is not provided.');
+        },
+        fetchBlogPost: async () => {
+            throw new Error('NG_RHOMBUS_BLOG_ADAPTER is not provided.');
+        },
+        fetchLatestBlogPost: async () => {
+            throw new Error('NG_RHOMBUS_BLOG_ADAPTER is not provided.');
+        },
+        fetchLatestBlogPosts: async () => {
+            throw new Error('NG_RHOMBUS_BLOG_ADAPTER is not provided.');
+        },
+        fetchLatestBlogPostsBySeries: async () => {
+            throw new Error('NG_RHOMBUS_BLOG_ADAPTER is not provided.');
+        },
+        fetchAdjacentBlogPostsInSeries: async () => {
+            throw new Error('NG_RHOMBUS_BLOG_ADAPTER is not provided.');
+        },
+        fetchAdjacentBlogPosts: async () => {
+            throw new Error('NG_RHOMBUS_BLOG_ADAPTER is not provided.');
+        },
+        createBlogPost: async () => {
+            throw new Error('NG_RHOMBUS_BLOG_ADAPTER is not provided.');
+        },
+        updateBlogPost: async () => {
+            throw new Error('NG_RHOMBUS_BLOG_ADAPTER is not provided.');
+        },
+        deleteBlogPost: async () => {
+            throw new Error('NG_RHOMBUS_BLOG_ADAPTER is not provided.');
+        },
+    }),
+});
+
 class NgRhombusBlogService {
     constructor() {
         this.WORDS_PER_MINUTE = 200;
-        this.firestore = inject(Firestore);
-        this.injector = inject(Injector);
-        this.blogCollectionRef = collection(this.firestore, 'blog');
+        this.blogAdapter = inject(NG_RHOMBUS_BLOG_ADAPTER);
         this.blogPosts = signal([], ...(ngDevMode ? [{ debugName: "blogPosts" }] : []));
         this.selectedBlogPost = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedBlogPost" }] : []));
     }
+    normalizeBlogPost(post) {
+        const timestampMillis = ngRhombusTimestampToMillis(post.timestamp);
+        return {
+            ...post,
+            timestamp: timestampMillis ?? post.timestamp,
+        };
+    }
     async fetchBlogPosts() {
-        const q = query(this.blogCollectionRef, orderBy('timestamp', 'desc'));
-        const snapshot = await runInInjectionContext(this.injector, () => getDocs(q));
-        const posts = snapshot.docs.map(d => ({ ...d.data(), id: d.id }));
+        const posts = (await this.blogAdapter.fetchBlogPosts()).map(p => this.normalizeBlogPost(p));
         this.blogPosts.set(posts);
         return posts;
     }
     async fetchBlogPost(id) {
-        const blogPostDocumentRef = doc(this.firestore, 'blog', id);
-        // const docSnap = (await getDoc(blogPostDocumentRef)).data() as IBlog
-        // this.selectedBlogPost.set(docSnap);
-        // return docSnap;
-        const docSnap = await runInInjectionContext(this.injector, () => getDoc(blogPostDocumentRef));
-        if (docSnap.exists()) {
-            const docData = { ...docSnap.data(), id: id };
-            this.selectedBlogPost.set(docData);
-            return docData;
-        }
-        else {
-            return;
-        }
+        const post = await this.blogAdapter.fetchBlogPost(id);
+        if (!post)
+            return undefined;
+        const normalized = this.normalizeBlogPost(post);
+        this.selectedBlogPost.set(normalized);
+        return normalized;
     }
     async fetchLatestBlogPost() {
-        const latestQuery = query(this.blogCollectionRef, orderBy('timestamp', 'desc'), limit(1));
-        const snapshot = await runInInjectionContext(this.injector, () => getDocs(latestQuery));
-        if (!snapshot.empty) {
-            const doc = snapshot.docs[0];
-            const latestPost = { ...doc.data(), id: doc.id };
-            this.selectedBlogPost.set(latestPost);
-            return latestPost;
-        }
-        return undefined;
+        const post = await this.blogAdapter.fetchLatestBlogPost();
+        if (!post)
+            return undefined;
+        const normalized = this.normalizeBlogPost(post);
+        this.selectedBlogPost.set(normalized);
+        return normalized;
     }
     async createBlogPost(blogPost) {
-        const blogPostDocumentRef = doc(this.firestore, 'blog', NgRhombusBlogPostHelper.createSlug(blogPost.title));
-        await runInInjectionContext(this.injector, () => setDoc(blogPostDocumentRef, {
-            title: blogPost.title,
-            description: blogPost.description,
-            thumbnail: blogPost.thumbnail,
-            content: blogPost.content,
+        const id = NgRhombusBlogPostHelper.createSlug(blogPost.title);
+        await this.blogAdapter.createBlogPost({
+            ...blogPost,
+            id,
             timestamp: new Date(),
-            readTimeMinutes: blogPost.readTimeMinutes
-        }));
+        });
     }
     async updateBlogPost(blogPost) {
-        const blogPostDocumentRef = doc(this.firestore, 'blog', blogPost.id);
-        await runInInjectionContext(this.injector, () => updateDoc(blogPostDocumentRef, {
-            title: blogPost.title,
-            description: blogPost.description,
-            thumbnail: blogPost.thumbnail,
-            content: blogPost.content,
-            readTimeMinutes: blogPost.readTimeMinutes
-        }));
+        await this.blogAdapter.updateBlogPost(blogPost);
     }
     deleteBlogPost(id) {
-        const blogPostDocumentRef = doc(this.firestore, 'blog', id);
-        return runInInjectionContext(this.injector, () => deleteDoc(blogPostDocumentRef));
+        return this.blogAdapter.deleteBlogPost(id);
+    }
+    /** Latest N posts */
+    async fetchLatestBlogPosts(count = 5) {
+        const posts = await this.blogAdapter.fetchLatestBlogPosts(count);
+        return posts.map(p => this.normalizeBlogPost(p));
+    }
+    /** Latest N posts for a given series */
+    async fetchLatestBlogPostsBySeries(series, count = 5) {
+        const posts = await this.blogAdapter.fetchLatestBlogPostsBySeries(series, count);
+        return posts.map(p => this.normalizeBlogPost(p));
+    }
+    /**
+     * Adjacent posts within the same series as the current post.
+     * - nextNewer: newer than current within the series (if any)
+     * - nextOlder: older than current within the series (if any)
+     */
+    async fetchAdjacentBlogPostsInSeries(id) {
+        const result = await this.blogAdapter.fetchAdjacentBlogPostsInSeries(id);
+        return {
+            series: result.series,
+            nextNewer: result.nextNewer ? this.normalizeBlogPost(result.nextNewer) : undefined,
+            nextOlder: result.nextOlder ? this.normalizeBlogPost(result.nextOlder) : undefined,
+        };
+    }
+    /**
+     * Adjacent posts in the global "latest first" ordering.
+     * - nextNewer: newer than current (if any)
+     * - nextOlder: older than current (if any)
+     */
+    async fetchAdjacentBlogPosts(id) {
+        const result = await this.blogAdapter.fetchAdjacentBlogPosts(id);
+        return {
+            nextNewer: result.nextNewer ? this.normalizeBlogPost(result.nextNewer) : undefined,
+            nextOlder: result.nextOlder ? this.normalizeBlogPost(result.nextOlder) : undefined,
+        };
     }
     calculateReadTimeMinutes(text) {
         if (!text)
@@ -511,44 +628,30 @@ class NgRhombusBlogService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogService, decorators: [{
             type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class NgRhombusBlogPostThumbnailService {
-    constructor() {
-        this.firebaseStorage = inject(Storage);
-    }
-    uploadImage(imageName, image) {
-        const storageRef = ref(this.firebaseStorage, `thumbnails/${imageName}`);
-        return uploadBytesResumable(storageRef, image);
-    }
-    deleteImage(filePath) {
-        const storageDocRef = ref(this.firebaseStorage, filePath);
-        return deleteObject(storageDocRef).then(() => {
-        }).catch((error) => {
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogPostThumbnailService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogPostThumbnailService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogPostThumbnailService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+            args: [{ providedIn: 'root' }]
         }] });
 
 class NgRhombusBlogTableComponent {
     constructor() {
         this.editEvent = new EventEmitter();
         this.deleteEvent = new EventEmitter();
-        this.thumbnailService = inject(NgRhombusBlogPostThumbnailService);
         this.blogService = inject(NgRhombusBlogService);
         this.dialog = inject(MatDialog);
         this.dataSource = input([], ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
-        this.displayedColumns = ['title', 'description', 'timestamp', 'actions'];
+        this.timestampToMillis = ngRhombusTimestampToMillis;
+        this.displayedColumns = ['title', 'pillar', 'series', 'timestamp'];
+        this.detailColumns = ['detail'];
+        this.isMainRow = (_index, row) => row.kind === 'main';
+        this.isDetailRow = (_index, row) => row.kind === 'detail';
+    }
+    tableData() {
+        const posts = this.dataSource();
+        if (!posts?.length)
+            return [];
+        return posts.flatMap(post => [
+            { kind: 'main', post },
+            { kind: 'detail', post },
+        ]);
     }
     goToBlogPost(id) {
         this.editEvent.emit(id);
@@ -557,17 +660,49 @@ class NgRhombusBlogTableComponent {
         this.deleteEvent.emit(blogPost);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusBlogTableComponent, isStandalone: true, selector: "ng-rhombus-blog-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editEvent: "editEvent", deleteEvent: "deleteEvent" }, ngImport: i0, template: "@if (dataSource().length > 0) {\r\n<table mat-table [dataSource]=\"dataSource()\" class=\"mat-elevation-z1\">\r\n\r\n\t<!-- Title Column -->\r\n\t<ng-container matColumnDef=\"title\">\r\n\t\t<th mat-header-cell *matHeaderCellDef>Title</th>\r\n\t\t<td mat-cell *matCellDef=\"let element\">{{element.title}}</td>\r\n\t</ng-container>\r\n\r\n\t<!-- Description Column -->\r\n\t<ng-container matColumnDef=\"description\">\r\n\t\t<th mat-header-cell *matHeaderCellDef>Description</th>\r\n\t\t<td mat-cell *matCellDef=\"let element\">{{element.description}}</td>\r\n\t</ng-container>\r\n\r\n\t<!-- Timestamp Column -->\r\n\t<ng-container matColumnDef=\"timestamp\">\r\n\t\t<th mat-header-cell *matHeaderCellDef>Date</th>\r\n\t\t<td mat-cell *matCellDef=\"let element\">{{ element.timestamp.toMillis() | date: 'MMMM d, y' }}</td>\r\n\t</ng-container>\r\n\r\n\t<ng-container matColumnDef=\"actions\">\r\n\t\t<th mat-header-cell *matHeaderCellDef></th>\r\n\t\t<td mat-cell *matCellDef=\"let s\">\r\n\t\t\t<button mat-icon-button (click)=\"goToBlogPost(s.id)\">\r\n\t\t\t\t<mat-icon>edit</mat-icon>\r\n\t\t\t</button>\r\n\t\t\t<button mat-icon-button (click)=\"onDeleteBlogPost(s)\">\r\n\t\t\t\t<mat-icon>delete</mat-icon>\r\n\t\t\t</button>\r\n\t\t</td>\r\n\t</ng-container>\r\n\r\n\t<tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n\t<tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n</table>\r\n} @else {\r\n<div class=\"empty-set\">\r\n\t<span>No blog posts created yet.</span>\r\n</div>\r\n\r\n}", styles: [".empty-set{margin:12px}.rhombus{overflow-y:auto}.mat-column-source,.mat-column-actions{text-align:center}.mat-column-source fa-icon,.mat-column-actions fa-icon{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "pipe", type: i4$2.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusBlogTableComponent, isStandalone: true, selector: "ng-rhombus-blog-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editEvent: "editEvent", deleteEvent: "deleteEvent" }, ngImport: i0, template: "@if (dataSource().length > 0) {\r\n<table mat-table [dataSource]=\"tableData()\" class=\"mat-elevation-z1\" multiTemplateDataRows>\r\n\r\n\t<!-- Title Column -->\r\n\t<ng-container matColumnDef=\"title\">\r\n\t\t<th mat-header-cell *matHeaderCellDef>Title</th>\r\n\t\t<td mat-cell *matCellDef=\"let row\">{{ row.post.title }}</td>\r\n\t</ng-container>\r\n\r\n\t<!-- Pillar Column -->\r\n\t<ng-container matColumnDef=\"pillar\">\r\n\t\t<th mat-header-cell *matHeaderCellDef>Pillar</th>\r\n\t\t<td mat-cell *matCellDef=\"let row\">\r\n\t\t\t@if (row.post.pillar) {\r\n\t\t\t<mat-chip-set aria-label=\"Pillar\" role=\"list\">\r\n\t\t\t\t<mat-chip role=\"listitem\" [highlighted]=\"true\" class=\"primary-chips-theme\">{{ row.post.pillar\r\n\t\t\t\t\t}}</mat-chip>\r\n\t\t\t</mat-chip-set>\r\n\t\t\t} @else {\r\n\t\t\t\u2014\r\n\t\t\t}\r\n\t\t</td>\r\n\t</ng-container>\r\n\r\n\t<!-- Series Column -->\r\n\t<ng-container matColumnDef=\"series\">\r\n\t\t<th mat-header-cell *matHeaderCellDef>Series</th>\r\n\t\t<td mat-cell *matCellDef=\"let row\">\r\n\t\t\t@if (row.post.series) {\r\n\t\t\t<mat-chip-set aria-label=\"Series\" role=\"list\">\r\n\t\t\t\t<mat-chip role=\"listitem\" [highlighted]=\"true\" class=\"secondary-chips-theme\">{{ row.post.series\r\n\t\t\t\t\t}}</mat-chip>\r\n\t\t\t</mat-chip-set>\r\n\t\t\t} @else {\r\n\t\t\t\u2014\r\n\t\t\t}\r\n\t\t</td>\r\n\t</ng-container>\r\n\r\n\t<!-- Timestamp Column -->\r\n\t<ng-container matColumnDef=\"timestamp\">\r\n\t\t<th mat-header-cell *matHeaderCellDef>Date</th>\r\n\t\t<td mat-cell *matCellDef=\"let row\">{{ timestampToMillis(row.post.timestamp) | date: 'MMMM d, y' }}</td>\r\n\t</ng-container>\r\n\r\n\t<!-- Detail Row (full width) -->\r\n\t<ng-container matColumnDef=\"detail\">\r\n\t\t<td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"displayedColumns.length\">\r\n\t\t\t<div class=\"detail-content\">\r\n\t\t\t\t@if (row.post.description) {\r\n\t\t\t\t<div class=\"detail-description\">{{ row.post.description }}</div>\r\n\t\t\t\t}\r\n\r\n\t\t\t\t<div class=\"detail-actions\">\r\n\t\t\t\t\t<button mat-icon-button (click)=\"goToBlogPost(row.post.id)\" aria-label=\"Edit blog post\">\r\n\t\t\t\t\t\t<mat-icon>edit</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<button mat-icon-button (click)=\"onDeleteBlogPost(row.post)\" aria-label=\"Delete blog post\">\r\n\t\t\t\t\t\t<mat-icon>delete</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</td>\r\n\t</ng-container>\r\n\r\n\t<tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n\t<tr mat-row *matRowDef=\"let row; columns: displayedColumns; when: isMainRow\"></tr>\r\n\t<tr mat-row *matRowDef=\"let row; columns: detailColumns; when: isDetailRow\" class=\"detail-row\"></tr>\r\n</table>\r\n} @else {\r\n<div class=\"empty-set\">\r\n\t<span>No blog posts created yet.</span>\r\n</div>\r\n\r\n}", styles: [".empty-set{margin:12px}.neutral-chips-theme{--mat-chip-outline-color: var(--mat-sys-surface-variant);--mat-chip-elevated-selected-container-color: var(--mat-sys-surface-variant);--mat-chip-selected-label-text-color: var(--mat-sys-on-surface-variant);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.primary-chips-theme{--mat-chip-outline-color: var(--mat-sys-primary);--mat-chip-elevated-selected-container-color: var(--mat-sys-primary);--mat-chip-selected-label-text-color: var(--mat-sys-on-primary);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.secondary-chips-theme{--mat-chip-outline-color: var(--mat-sys-secondary);--mat-chip-elevated-selected-container-color: var(--mat-sys-secondary);--mat-chip-selected-label-text-color: var(--mat-sys-on-secondary);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.rhombus{overflow-y:auto}.mat-column-source,.mat-column-actions{text-align:center}.mat-column-source fa-icon,.mat-column-actions fa-icon{display:inline-block}.detail-row td{padding-top:0;padding-bottom:0}.detail-content{display:flex;flex-wrap:nowrap;gap:8px 12px;align-items:center;padding:8px 0 12px;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant)}.detail-actions{margin-left:auto;display:inline-flex;gap:4px;align-items:center}.detail-description{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i2$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "pipe", type: i5$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-rhombus-blog-table', imports: [CommonModule, MatButtonModule, MatIconModule, MatTableModule], template: "@if (dataSource().length > 0) {\r\n<table mat-table [dataSource]=\"dataSource()\" class=\"mat-elevation-z1\">\r\n\r\n\t<!-- Title Column -->\r\n\t<ng-container matColumnDef=\"title\">\r\n\t\t<th mat-header-cell *matHeaderCellDef>Title</th>\r\n\t\t<td mat-cell *matCellDef=\"let element\">{{element.title}}</td>\r\n\t</ng-container>\r\n\r\n\t<!-- Description Column -->\r\n\t<ng-container matColumnDef=\"description\">\r\n\t\t<th mat-header-cell *matHeaderCellDef>Description</th>\r\n\t\t<td mat-cell *matCellDef=\"let element\">{{element.description}}</td>\r\n\t</ng-container>\r\n\r\n\t<!-- Timestamp Column -->\r\n\t<ng-container matColumnDef=\"timestamp\">\r\n\t\t<th mat-header-cell *matHeaderCellDef>Date</th>\r\n\t\t<td mat-cell *matCellDef=\"let element\">{{ element.timestamp.toMillis() | date: 'MMMM d, y' }}</td>\r\n\t</ng-container>\r\n\r\n\t<ng-container matColumnDef=\"actions\">\r\n\t\t<th mat-header-cell *matHeaderCellDef></th>\r\n\t\t<td mat-cell *matCellDef=\"let s\">\r\n\t\t\t<button mat-icon-button (click)=\"goToBlogPost(s.id)\">\r\n\t\t\t\t<mat-icon>edit</mat-icon>\r\n\t\t\t</button>\r\n\t\t\t<button mat-icon-button (click)=\"onDeleteBlogPost(s)\">\r\n\t\t\t\t<mat-icon>delete</mat-icon>\r\n\t\t\t</button>\r\n\t\t</td>\r\n\t</ng-container>\r\n\r\n\t<tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n\t<tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n</table>\r\n} @else {\r\n<div class=\"empty-set\">\r\n\t<span>No blog posts created yet.</span>\r\n</div>\r\n\r\n}", styles: [".empty-set{margin:12px}.rhombus{overflow-y:auto}.mat-column-source,.mat-column-actions{text-align:center}.mat-column-source fa-icon,.mat-column-actions fa-icon{display:inline-block}\n"] }]
+            args: [{ selector: 'ng-rhombus-blog-table', imports: [CommonModule, MatButtonModule, MatIconModule, MatTableModule, MatChipsModule], template: "@if (dataSource().length > 0) {\r\n<table mat-table [dataSource]=\"tableData()\" class=\"mat-elevation-z1\" multiTemplateDataRows>\r\n\r\n\t<!-- Title Column -->\r\n\t<ng-container matColumnDef=\"title\">\r\n\t\t<th mat-header-cell *matHeaderCellDef>Title</th>\r\n\t\t<td mat-cell *matCellDef=\"let row\">{{ row.post.title }}</td>\r\n\t</ng-container>\r\n\r\n\t<!-- Pillar Column -->\r\n\t<ng-container matColumnDef=\"pillar\">\r\n\t\t<th mat-header-cell *matHeaderCellDef>Pillar</th>\r\n\t\t<td mat-cell *matCellDef=\"let row\">\r\n\t\t\t@if (row.post.pillar) {\r\n\t\t\t<mat-chip-set aria-label=\"Pillar\" role=\"list\">\r\n\t\t\t\t<mat-chip role=\"listitem\" [highlighted]=\"true\" class=\"primary-chips-theme\">{{ row.post.pillar\r\n\t\t\t\t\t}}</mat-chip>\r\n\t\t\t</mat-chip-set>\r\n\t\t\t} @else {\r\n\t\t\t\u2014\r\n\t\t\t}\r\n\t\t</td>\r\n\t</ng-container>\r\n\r\n\t<!-- Series Column -->\r\n\t<ng-container matColumnDef=\"series\">\r\n\t\t<th mat-header-cell *matHeaderCellDef>Series</th>\r\n\t\t<td mat-cell *matCellDef=\"let row\">\r\n\t\t\t@if (row.post.series) {\r\n\t\t\t<mat-chip-set aria-label=\"Series\" role=\"list\">\r\n\t\t\t\t<mat-chip role=\"listitem\" [highlighted]=\"true\" class=\"secondary-chips-theme\">{{ row.post.series\r\n\t\t\t\t\t}}</mat-chip>\r\n\t\t\t</mat-chip-set>\r\n\t\t\t} @else {\r\n\t\t\t\u2014\r\n\t\t\t}\r\n\t\t</td>\r\n\t</ng-container>\r\n\r\n\t<!-- Timestamp Column -->\r\n\t<ng-container matColumnDef=\"timestamp\">\r\n\t\t<th mat-header-cell *matHeaderCellDef>Date</th>\r\n\t\t<td mat-cell *matCellDef=\"let row\">{{ timestampToMillis(row.post.timestamp) | date: 'MMMM d, y' }}</td>\r\n\t</ng-container>\r\n\r\n\t<!-- Detail Row (full width) -->\r\n\t<ng-container matColumnDef=\"detail\">\r\n\t\t<td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"displayedColumns.length\">\r\n\t\t\t<div class=\"detail-content\">\r\n\t\t\t\t@if (row.post.description) {\r\n\t\t\t\t<div class=\"detail-description\">{{ row.post.description }}</div>\r\n\t\t\t\t}\r\n\r\n\t\t\t\t<div class=\"detail-actions\">\r\n\t\t\t\t\t<button mat-icon-button (click)=\"goToBlogPost(row.post.id)\" aria-label=\"Edit blog post\">\r\n\t\t\t\t\t\t<mat-icon>edit</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<button mat-icon-button (click)=\"onDeleteBlogPost(row.post)\" aria-label=\"Delete blog post\">\r\n\t\t\t\t\t\t<mat-icon>delete</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</td>\r\n\t</ng-container>\r\n\r\n\t<tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n\t<tr mat-row *matRowDef=\"let row; columns: displayedColumns; when: isMainRow\"></tr>\r\n\t<tr mat-row *matRowDef=\"let row; columns: detailColumns; when: isDetailRow\" class=\"detail-row\"></tr>\r\n</table>\r\n} @else {\r\n<div class=\"empty-set\">\r\n\t<span>No blog posts created yet.</span>\r\n</div>\r\n\r\n}", styles: [".empty-set{margin:12px}.neutral-chips-theme{--mat-chip-outline-color: var(--mat-sys-surface-variant);--mat-chip-elevated-selected-container-color: var(--mat-sys-surface-variant);--mat-chip-selected-label-text-color: var(--mat-sys-on-surface-variant);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.primary-chips-theme{--mat-chip-outline-color: var(--mat-sys-primary);--mat-chip-elevated-selected-container-color: var(--mat-sys-primary);--mat-chip-selected-label-text-color: var(--mat-sys-on-primary);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.secondary-chips-theme{--mat-chip-outline-color: var(--mat-sys-secondary);--mat-chip-elevated-selected-container-color: var(--mat-sys-secondary);--mat-chip-selected-label-text-color: var(--mat-sys-on-secondary);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.rhombus{overflow-y:auto}.mat-column-source,.mat-column-actions{text-align:center}.mat-column-source fa-icon,.mat-column-actions fa-icon{display:inline-block}.detail-row td{padding-top:0;padding-bottom:0}.detail-content{display:flex;flex-wrap:nowrap;gap:8px 12px;align-items:center;padding:8px 0 12px;font:var(--mat-sys-body-small);color:var(--mat-sys-on-surface-variant)}.detail-actions{margin-left:auto;display:inline-flex;gap:4px;align-items:center}.detail-description{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], propDecorators: { editEvent: [{
                 type: Output
             }], deleteEvent: [{
                 type: Output
             }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }] } });
 
+const NG_RHOMBUS_BLOG_THUMBNAIL_ADAPTER = new InjectionToken('NG_RHOMBUS_BLOG_THUMBNAIL_ADAPTER', {
+    providedIn: 'root',
+    factory: () => ({
+        uploadImageAndGetUrl: async () => {
+            throw new Error('NG_RHOMBUS_BLOG_THUMBNAIL_ADAPTER is not provided.');
+        },
+        deleteImage: async () => {
+            throw new Error('NG_RHOMBUS_BLOG_THUMBNAIL_ADAPTER is not provided.');
+        },
+    }),
+});
+
+class NgRhombusBlogPostThumbnailService {
+    constructor() {
+        this.adapter = inject(NG_RHOMBUS_BLOG_THUMBNAIL_ADAPTER);
+    }
+    uploadImage(imageName, image) {
+        return this.adapter.uploadImageAndGetUrl(imageName, image);
+    }
+    deleteImage(filePath) {
+        return this.adapter.deleteImage(filePath);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogPostThumbnailService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogPostThumbnailService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogPostThumbnailService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class NgRhombusBlogThumbnailComponent {
     constructor() {
         this.width = input(0, ...(ngDevMode ? [{ debugName: "width" }] : []));
@@ -590,7 +725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImpor
 
 class NgRhombusBlogDeleteThumbnailComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogDeleteThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.4", type: NgRhombusBlogDeleteThumbnailComponent, isStandalone: true, selector: "ng-rhombus-Blog-delete-thumbnail", ngImport: i0, template: "<h2 mat-dialog-title>Blog Post Thumbnail - Delete</h2>\r\n<mat-dialog-content>\r\n    <p>Would you like to delete this thumbnail?</p>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"false\" cdkFocusInitial>Cancel</button>\r\n    <button mat-button [mat-dialog-close]=\"true\">Confirm</button>\r\n</mat-dialog-actions>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.4", type: NgRhombusBlogDeleteThumbnailComponent, isStandalone: true, selector: "ng-rhombus-Blog-delete-thumbnail", ngImport: i0, template: "<h2 mat-dialog-title>Blog Post Thumbnail - Delete</h2>\r\n<mat-dialog-content>\r\n    <p>Would you like to delete this thumbnail?</p>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"false\" cdkFocusInitial>Cancel</button>\r\n    <button mat-button [mat-dialog-close]=\"true\">Confirm</button>\r\n</mat-dialog-actions>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogDeleteThumbnailComponent, decorators: [{
             type: Component,
@@ -603,24 +738,38 @@ class ThumbnailControlComponent {
         this.height = input(0, ...(ngDevMode ? [{ debugName: "height" }] : []));
         this.thumbnailSrc = input('', ...(ngDevMode ? [{ debugName: "thumbnailSrc" }] : []));
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.displayMode = input('preview', ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
         this.thumbnailService = inject(NgRhombusBlogPostThumbnailService);
         this.dialog = inject(MatDialog);
         this.onFileUploaded = output();
         this.onFileDeleted = output();
         this.uploadedFile = signal(undefined, ...(ngDevMode ? [{ debugName: "uploadedFile" }] : []));
         this.placeholder = computed(() => `https://placehold.co/${this.width()}x${this.height()}`, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-        this.imageSource = computed(() => { return this.uploadedFile() ?? this.placeholder(); }, ...(ngDevMode ? [{ debugName: "imageSource" }] : []));
+        this.hasThumbnail = computed(() => {
+            const fromUpload = this.uploadedFile();
+            if (fromUpload)
+                return true;
+            const fromInput = this.thumbnailSrc();
+            return !!fromInput;
+        }, ...(ngDevMode ? [{ debugName: "hasThumbnail" }] : []));
+        this.imageSource = computed(() => {
+            const fromUpload = this.uploadedFile();
+            if (fromUpload)
+                return fromUpload;
+            const fromInput = this.thumbnailSrc();
+            if (fromInput)
+                return fromInput;
+            return this.placeholder();
+        }, ...(ngDevMode ? [{ debugName: "imageSource" }] : []));
     }
     onThumbnailSelected(input) {
         if (!input.files || input.files.length <= 0) {
             return;
         }
         const file = input.files[0];
-        this.thumbnailService.uploadImage(file.name, file).then((snapshot) => {
-            getDownloadURL(snapshot.ref).then((downloadUrl) => {
-                this.uploadedFile.set(downloadUrl);
-                this.onFileUploaded.emit(downloadUrl);
-            });
+        this.thumbnailService.uploadImage(file.name, file).then((downloadUrl) => {
+            this.uploadedFile.set(downloadUrl);
+            this.onFileUploaded.emit(downloadUrl);
         });
     }
     onThumbnailDeleted() {
@@ -636,25 +785,22 @@ class ThumbnailControlComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: ThumbnailControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: ThumbnailControlComponent, isStandalone: true, selector: "ng-rhombus-thumbnail-control", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, thumbnailSrc: { classPropertyName: "thumbnailSrc", publicName: "thumbnailSrc", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFileUploaded: "onFileUploaded", onFileDeleted: "onFileDeleted" }, viewQueries: [{ propertyName: "thumbnailInput", first: true, predicate: ["thumbnailInput"], descendants: true }], ngImport: i0, template: "<div class=\"thumbnail-control-wrapper\">\r\n    <input #thumbnailInput hidden type=\"file\" (change)=\"onThumbnailSelected(thumbnailInput)\" />\r\n    <button mat-icon-button [disabled]=\"uploadedFile() || disabled()\" (click)=\"thumbnailInput.click()\" type=\"button\">\r\n        <mat-icon>upload_file</mat-icon>\r\n    </button>\r\n    <button class=\"delete-button\" mat-icon-button [disabled]=\"!uploadedFile()\" (click)=\"onThumbnailDeleted()\"\r\n        type=\"button\">\r\n        <mat-icon>delete</mat-icon>\r\n    </button>\r\n    <div class=\"flex\"></div>\r\n    <!-- <div class=\"image-placeholder\" [style.width]=\"width() + 'px'\" [style.height]=\"height() + 'px'\">\r\n        <img [src]=\"imageSource()\" [width]=\"width()\" [height]=\"height()\" />\r\n    </div> -->\r\n    <ng-rhombus-blog-thumbnail [imageSource]=\"thumbnailSrc()\" [width]=\"width()\" [height]=\"height()\"\r\n        [imageSource]=\"imageSource()\"></ng-rhombus-blog-thumbnail>\r\n</div>", styles: [".thumbnail-control-wrapper{display:flex;flex:1;align-items:center;padding-bottom:20px}.flex{flex:1 1 auto}.image-placeholder{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.delete-button{margin-left:12px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NgRhombusBlogThumbnailComponent, selector: "ng-rhombus-blog-thumbnail", inputs: ["width", "height", "imageSource"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: ThumbnailControlComponent, isStandalone: true, selector: "ng-rhombus-thumbnail-control", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, thumbnailSrc: { classPropertyName: "thumbnailSrc", publicName: "thumbnailSrc", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFileUploaded: "onFileUploaded", onFileDeleted: "onFileDeleted" }, viewQueries: [{ propertyName: "thumbnailInput", first: true, predicate: ["thumbnailInput"], descendants: true }], ngImport: i0, template: "<div class=\"thumbnail-control-wrapper\">\r\n    <input #thumbnailInput hidden type=\"file\" (change)=\"onThumbnailSelected(thumbnailInput)\" />\r\n    <button mat-icon-button [disabled]=\"uploadedFile() || disabled()\" (click)=\"thumbnailInput.click()\" type=\"button\">\r\n        <mat-icon>upload_file</mat-icon>\r\n    </button>\r\n    <button class=\"delete-button\" mat-icon-button [disabled]=\"!uploadedFile()\" (click)=\"onThumbnailDeleted()\"\r\n        type=\"button\">\r\n        <mat-icon>delete</mat-icon>\r\n    </button>\r\n    <div class=\"flex\"></div>\r\n\r\n    @if (displayMode() === 'preview') {\r\n    <ng-rhombus-blog-thumbnail [imageSource]=\"imageSource()\" [width]=\"width()\" [height]=\"height()\" />\r\n    } @else {\r\n    <div class=\"thumbnail-indicator\" [class.is-set]=\"hasThumbnail()\" aria-label=\"Thumbnail status\">\r\n        <mat-icon>{{ hasThumbnail() ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\r\n        <span class=\"thumbnail-indicator-text\">Thumbnail</span>\r\n    </div>\r\n    }\r\n</div>", styles: [".thumbnail-control-wrapper{display:flex;flex:1;align-items:center;padding-bottom:20px}.flex{flex:1 1 auto}.image-placeholder{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.delete-button{margin-left:12px}.thumbnail-indicator{display:inline-flex;align-items:center;gap:6px;opacity:.72}.thumbnail-indicator.is-set{opacity:1}.thumbnail-indicator-text{font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NgRhombusBlogThumbnailComponent, selector: "ng-rhombus-blog-thumbnail", inputs: ["width", "height", "imageSource"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: ThumbnailControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-rhombus-thumbnail-control', imports: [MatButtonModule, MatIconModule, NgRhombusBlogThumbnailComponent], template: "<div class=\"thumbnail-control-wrapper\">\r\n    <input #thumbnailInput hidden type=\"file\" (change)=\"onThumbnailSelected(thumbnailInput)\" />\r\n    <button mat-icon-button [disabled]=\"uploadedFile() || disabled()\" (click)=\"thumbnailInput.click()\" type=\"button\">\r\n        <mat-icon>upload_file</mat-icon>\r\n    </button>\r\n    <button class=\"delete-button\" mat-icon-button [disabled]=\"!uploadedFile()\" (click)=\"onThumbnailDeleted()\"\r\n        type=\"button\">\r\n        <mat-icon>delete</mat-icon>\r\n    </button>\r\n    <div class=\"flex\"></div>\r\n    <!-- <div class=\"image-placeholder\" [style.width]=\"width() + 'px'\" [style.height]=\"height() + 'px'\">\r\n        <img [src]=\"imageSource()\" [width]=\"width()\" [height]=\"height()\" />\r\n    </div> -->\r\n    <ng-rhombus-blog-thumbnail [imageSource]=\"thumbnailSrc()\" [width]=\"width()\" [height]=\"height()\"\r\n        [imageSource]=\"imageSource()\"></ng-rhombus-blog-thumbnail>\r\n</div>", styles: [".thumbnail-control-wrapper{display:flex;flex:1;align-items:center;padding-bottom:20px}.flex{flex:1 1 auto}.image-placeholder{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.delete-button{margin-left:12px}\n"] }]
-        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], thumbnailSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbnailSrc", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], thumbnailInput: [{
+            args: [{ selector: 'ng-rhombus-thumbnail-control', imports: [MatButtonModule, MatIconModule, NgRhombusBlogThumbnailComponent], template: "<div class=\"thumbnail-control-wrapper\">\r\n    <input #thumbnailInput hidden type=\"file\" (change)=\"onThumbnailSelected(thumbnailInput)\" />\r\n    <button mat-icon-button [disabled]=\"uploadedFile() || disabled()\" (click)=\"thumbnailInput.click()\" type=\"button\">\r\n        <mat-icon>upload_file</mat-icon>\r\n    </button>\r\n    <button class=\"delete-button\" mat-icon-button [disabled]=\"!uploadedFile()\" (click)=\"onThumbnailDeleted()\"\r\n        type=\"button\">\r\n        <mat-icon>delete</mat-icon>\r\n    </button>\r\n    <div class=\"flex\"></div>\r\n\r\n    @if (displayMode() === 'preview') {\r\n    <ng-rhombus-blog-thumbnail [imageSource]=\"imageSource()\" [width]=\"width()\" [height]=\"height()\" />\r\n    } @else {\r\n    <div class=\"thumbnail-indicator\" [class.is-set]=\"hasThumbnail()\" aria-label=\"Thumbnail status\">\r\n        <mat-icon>{{ hasThumbnail() ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\r\n        <span class=\"thumbnail-indicator-text\">Thumbnail</span>\r\n    </div>\r\n    }\r\n</div>", styles: [".thumbnail-control-wrapper{display:flex;flex:1;align-items:center;padding-bottom:20px}.flex{flex:1 1 auto}.image-placeholder{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.delete-button{margin-left:12px}.thumbnail-indicator{display:inline-flex;align-items:center;gap:6px;opacity:.72}.thumbnail-indicator.is-set{opacity:1}.thumbnail-indicator-text{font-size:12px}\n"] }]
+        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], thumbnailSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbnailSrc", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], thumbnailInput: [{
                 type: ViewChild,
                 args: ['thumbnailInput']
             }], onFileUploaded: [{ type: i0.Output, args: ["onFileUploaded"] }], onFileDeleted: [{ type: i0.Output, args: ["onFileDeleted"] }] } });
 
-class IBlog {
-}
-
 class NgRhombusBlogConfirmationComponent {
     constructor() {
         this.data = inject(MAT_DIALOG_DATA);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.4", type: NgRhombusBlogConfirmationComponent, isStandalone: true, selector: "ng-rhombus-blog-confirmation", ngImport: i0, template: "<h2 mat-dialog-title>{{ data.header }}</h2>\r\n<mat-dialog-content>\r\n    <p>{{ data.query }}</p>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"false\" cdkFocusInitial>Cancel</button>\r\n    <button mat-button [mat-dialog-close]=\"true\">Confirm</button>\r\n</mat-dialog-actions>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.4", type: NgRhombusBlogConfirmationComponent, isStandalone: true, selector: "ng-rhombus-blog-confirmation", ngImport: i0, template: "<h2 mat-dialog-title>{{ data.header }}</h2>\r\n<mat-dialog-content>\r\n    <p>{{ data.query }}</p>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"false\" cdkFocusInitial>Cancel</button>\r\n    <button mat-button [mat-dialog-close]=\"true\">Confirm</button>\r\n</mat-dialog-actions>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogConfirmationComponent, decorators: [{
             type: Component,
@@ -668,6 +814,8 @@ class NgRhombusBlogAddEditComponent {
         this.cancelEvent = output();
         this.submitEvent = output();
         this.contentData = signal('', ...(ngDevMode ? [{ debugName: "contentData" }] : []));
+        this.pillars = Object.values(ContentPillar);
+        this.seriesOptions = Object.values(BlogSeries);
         this.dialog = inject(MatDialog);
         this.thumbnailService = inject(NgRhombusBlogPostThumbnailService);
         this.formBuilder = inject(FormBuilder);
@@ -705,8 +853,29 @@ class NgRhombusBlogAddEditComponent {
             title: [this.blogPost()?.title, Validators.required],
             description: [this.blogPost()?.description, Validators.required],
             thumbnail: [this.blogPost()?.thumbnail, Validators.required],
-            content: [this.blogPost()?.content, Validators.required]
+            content: [this.blogPost()?.content, Validators.required],
+            // creator system
+            pillar: [this.blogPost()?.pillar ?? null, Validators.required],
+            series: [this.blogPost()?.series ?? null, Validators.required],
+            tagsCsv: [(this.blogPost()?.tags ?? []).join(', '), Validators.required],
         });
+        this.applyCreatorSystemRules();
+        this.blogPostForm.get('series')?.valueChanges.subscribe(() => this.applyCreatorSystemRules());
+    }
+    applyCreatorSystemRules() {
+        const pillarControl = this.blogPostForm.get('pillar');
+        const seriesValue = this.blogPostForm.get('series')?.value;
+        if (!pillarControl)
+            return;
+        if (seriesValue === BlogSeries.FromTheEditor) {
+            pillarControl.clearValidators();
+            if (pillarControl.value !== null)
+                pillarControl.setValue(null);
+        }
+        else {
+            pillarControl.setValidators([Validators.required]);
+        }
+        pillarControl.updateValueAndValidity({ emitEvent: false });
     }
     onContentChange() {
         this.contentData.set(this.blogPostForm.getRawValue().content);
@@ -772,28 +941,41 @@ class NgRhombusBlogAddEditComponent {
         }
     }
     onSubmit() {
-        if (this.blogPostForm.invalid) {
+        if (this.blogPostForm.invalid)
+            return;
+        const raw = this.blogPostForm.getRawValue();
+        const tags = this.parseTags(raw.tagsCsv);
+        if (tags.length < 3 || tags.length > 6) {
+            // keep it simple; if you prefer, set a form error and show mat-error
             return;
         }
-        const rawData = this.blogPostForm.getRawValue();
-        let submittedBlogPost = new IBlog();
-        if (this.blogPost()) {
+        const submittedBlogPost = new IBlog();
+        if (this.blogPost())
             submittedBlogPost.id = this.blogPost().id;
-        }
-        submittedBlogPost.title = rawData.title;
-        submittedBlogPost.description = rawData.description;
-        submittedBlogPost.thumbnail = rawData.thumbnail;
-        submittedBlogPost.content = rawData.content;
-        const readTimeMinutes = this.blogService.calculateReadTimeMinutes(rawData.content); // adjust property name
-        submittedBlogPost.readTimeMinutes = readTimeMinutes;
+        submittedBlogPost.title = raw.title;
+        submittedBlogPost.description = raw.description;
+        submittedBlogPost.thumbnail = raw.thumbnail;
+        submittedBlogPost.content = raw.content;
+        submittedBlogPost.pillar = raw.pillar;
+        submittedBlogPost.series = raw.series;
+        submittedBlogPost.tags = tags;
+        submittedBlogPost.readTimeMinutes = this.blogService.calculateReadTimeMinutes(raw.content);
         this.submitEvent.emit(submittedBlogPost);
     }
+    parseTags(csv) {
+        const tags = (csv ?? '')
+            .split(',')
+            .map(t => t.trim())
+            .filter(Boolean);
+        // unique, preserve order
+        return Array.from(new Set(tags));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogAddEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: NgRhombusBlogAddEditComponent, isStandalone: true, selector: "ng-rhombus-blog-form", inputs: { blogPost: { classPropertyName: "blogPost", publicName: "blogPost", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent" }, viewQueries: [{ propertyName: "autosize", first: true, predicate: ["autosize"], descendants: true }, { propertyName: "blogPostPreview", first: true, predicate: ["blogPost"], descendants: true }], ngImport: i0, template: "<div class=\"h-full flex flex-row\">\r\n\t<div class=\"flex flex-col w-1/2 p-4\">\r\n\t\t<form novalidate class=\"h-full flex flex-col\" [formGroup]=\"blogPostForm\">\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Title</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"title\">\r\n\t\t\t</mat-form-field>\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Description</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"description\">\r\n\t\t\t</mat-form-field>\r\n\t\t\t<ng-rhombus-thumbnail-control [thumbnailSrc]=\"thumbnailSource\" [width]=\"200\" [height]=\"112\"\r\n\t\t\t\t[disabled]=\"blogPost() !== undefined\" (onFileUploaded)=\"onFileUploaded($event)\"\r\n\t\t\t\t(onFileDeleted)=\"onFileDeleted()\"></ng-rhombus-thumbnail-control>\r\n\t\t\t<mat-form-field class=\"h-full\">\r\n\t\t\t\t<mat-label>Content</mat-label>\r\n\t\t\t\t<textarea matInput required cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\r\n\t\t\t\t\tcdkAutosizeMaxRows=\"20\" formControlName=\"content\" (keyup)=\"onContentChange()\"></textarea>\r\n\t\t\t</mat-form-field>\r\n\t\t\t<div class=\"flex\">\r\n\t\t\t\t<button mat-raised-button class=\"\" (click)=\"onCancelClick()\" type=\"button\">Cancel</button>\r\n\t\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t\t<button mat-flat-button [disabled]=\"blogPostForm.invalid\" type=\"button\"\r\n\t\t\t\t\t(click)=\"onSubmit()\">Submit</button>\r\n\t\t\t</div>\r\n\t\t</form>\r\n\t</div>\r\n\r\n\t<div class=\"flex flex-col w-1/2 p-4 overflow-y-auto\">\r\n\t\t<mat-card>\r\n\t\t\t<mat-card-header>\r\n\t\t\t\t<mat-card-title>{{ blogPostForm.getRawValue().title }}</mat-card-title>\r\n\t\t\t\t<mat-card-subtitle>{{ blogPostForm.getRawValue().description }}</mat-card-subtitle>\r\n\t\t\t</mat-card-header>\r\n\t\t\t<img mat-card-image [src]=\"blogPostForm.getRawValue().thumbnail\" />\r\n\t\t\t<mat-card-content>\r\n\t\t\t\t<markdown [ngClass]=\"{ 'prose': true, 'dark:prose-invert': themeService.isDarkMode() }\"\r\n\t\t\t\t\t[data]=\"contentData()\" />\r\n\t\t\t</mat-card-content>\r\n\t\t\t<mat-card-footer>\r\n\t\t\t\t<span class=\"flex flex-row-reverse\">Doug Williamson</span>\r\n\t\t\t</mat-card-footer>\r\n\t\t</mat-card>\r\n\t</div>\r\n</div>", styles: [".mat-mdc-card-header,.mat-mdc-card-content,.mat-mdc-card-footer{padding:32px 16px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i2$1.MatCardFooter, selector: "mat-card-footer" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "directive", type: i2$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: i5$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "component", type: ThumbnailControlComponent, selector: "ng-rhombus-thumbnail-control", inputs: ["width", "height", "thumbnailSrc", "disabled"], outputs: ["onFileUploaded", "onFileDeleted"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusBlogAddEditComponent, isStandalone: true, selector: "ng-rhombus-blog-form", inputs: { blogPost: { classPropertyName: "blogPost", publicName: "blogPost", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent" }, viewQueries: [{ propertyName: "autosize", first: true, predicate: ["autosize"], descendants: true }, { propertyName: "blogPostPreview", first: true, predicate: ["blogPost"], descendants: true }], ngImport: i0, template: "<div class=\"h-full flex flex-row\">\r\n\t<div class=\"flex flex-col w-1/2 p-4\">\r\n\t\t<form novalidate class=\"h-full flex flex-col\" [formGroup]=\"blogPostForm\">\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Title</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"title\">\r\n\t\t\t</mat-form-field>\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Description</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"description\">\r\n\t\t\t</mat-form-field>\r\n\t\t\t<ng-rhombus-thumbnail-control [thumbnailSrc]=\"thumbnailSource\" [width]=\"200\" [height]=\"112\"\r\n\t\t\t\t[displayMode]=\"'indicator'\" [disabled]=\"blogPost() !== undefined\"\r\n\t\t\t\t(onFileUploaded)=\"onFileUploaded($event)\"\r\n\t\t\t\t(onFileDeleted)=\"onFileDeleted()\"></ng-rhombus-thumbnail-control>\r\n\t\t\t<mat-form-field class=\"h-full\">\r\n\t\t\t\t<mat-label>Content</mat-label>\r\n\t\t\t\t<textarea matInput required cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\r\n\t\t\t\t\tcdkAutosizeMaxRows=\"20\" formControlName=\"content\" (keyup)=\"onContentChange()\"></textarea>\r\n\t\t\t</mat-form-field>\r\n\t\t\t<div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n\t\t\t\t<mat-form-field class=\"w-full\">\r\n\t\t\t\t\t<mat-label>Content Pillar (optional for From The Editor)</mat-label>\r\n\t\t\t\t\t<mat-select formControlName=\"pillar\" required>\r\n\t\t\t\t\t\t@for (p of pillars; track p) {\r\n\t\t\t\t\t\t<mat-option [value]=\"p\">{{ p }}</mat-option>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</mat-select>\r\n\t\t\t\t</mat-form-field>\r\n\r\n\t\t\t\t<mat-form-field class=\"w-full\">\r\n\t\t\t\t\t<mat-label>Series</mat-label>\r\n\t\t\t\t\t<mat-select formControlName=\"series\" required>\r\n\t\t\t\t\t\t@for (s of seriesOptions; track s) {\r\n\t\t\t\t\t\t<mat-option [value]=\"s\">{{ s }}</mat-option>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</mat-select>\r\n\t\t\t\t</mat-form-field>\r\n\t\t\t</div>\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Tags</mat-label>\r\n\t\t\t\t<input matInput formControlName=\"tagsCsv\" placeholder=\"3\u20136 tags, comma-separated\">\r\n\t\t\t\t<mat-hint>Example: angular, firestore, testing</mat-hint>\r\n\t\t\t</mat-form-field>\r\n\t\t\t<div class=\"flex\">\r\n\t\t\t\t<button mat-raised-button class=\"\" (click)=\"onCancelClick()\" type=\"button\">Cancel</button>\r\n\t\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t\t<button mat-flat-button [disabled]=\"blogPostForm.invalid\" type=\"button\"\r\n\t\t\t\t\t(click)=\"onSubmit()\">Submit</button>\r\n\t\t\t</div>\r\n\t\t</form>\r\n\t</div>\r\n\r\n\t<div class=\"flex flex-col w-1/2 p-4 overflow-y-auto\">\r\n\t\t<mat-card>\r\n\t\t\t<mat-card-header>\r\n\t\t\t\t<mat-card-title>{{ blogPostForm.getRawValue().title }}</mat-card-title>\r\n\t\t\t\t<mat-card-subtitle>{{ blogPostForm.getRawValue().description }}</mat-card-subtitle>\r\n\t\t\t</mat-card-header>\r\n\t\t\t<img mat-card-image [src]=\"blogPostForm.getRawValue().thumbnail\" />\r\n\t\t\t<mat-card-content>\r\n\t\t\t\t<markdown [ngClass]=\"{ 'prose': true, 'dark:prose-invert': themeService.isDarkMode() }\"\r\n\t\t\t\t\t[data]=\"contentData()\" />\r\n\t\t\t</mat-card-content>\r\n\t\t\t<mat-card-footer>\r\n\t\t\t\t<span class=\"flex flex-row-reverse\">Doug Williamson</span>\r\n\t\t\t</mat-card-footer>\r\n\t\t</mat-card>\r\n\t</div>\r\n</div>", styles: [".mat-mdc-card-header,.mat-mdc-card-content,.mat-mdc-card-footer{padding:32px 16px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$2.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i2$2.MatCardFooter, selector: "mat-card-footer" }, { kind: "component", type: i2$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$2.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "directive", type: i2$2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: i5$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "component", type: ThumbnailControlComponent, selector: "ng-rhombus-thumbnail-control", inputs: ["width", "height", "thumbnailSrc", "disabled", "displayMode"], outputs: ["onFileUploaded", "onFileDeleted"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogAddEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-rhombus-blog-form', imports: [NgClass, MatListModule, MatDividerModule, MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, MatProgressSpinnerModule, MatSidenavModule, ReactiveFormsModule, TextFieldModule, ThumbnailControlComponent, MatToolbarModule, MatIconModule, MarkdownComponent], template: "<div class=\"h-full flex flex-row\">\r\n\t<div class=\"flex flex-col w-1/2 p-4\">\r\n\t\t<form novalidate class=\"h-full flex flex-col\" [formGroup]=\"blogPostForm\">\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Title</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"title\">\r\n\t\t\t</mat-form-field>\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Description</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"description\">\r\n\t\t\t</mat-form-field>\r\n\t\t\t<ng-rhombus-thumbnail-control [thumbnailSrc]=\"thumbnailSource\" [width]=\"200\" [height]=\"112\"\r\n\t\t\t\t[disabled]=\"blogPost() !== undefined\" (onFileUploaded)=\"onFileUploaded($event)\"\r\n\t\t\t\t(onFileDeleted)=\"onFileDeleted()\"></ng-rhombus-thumbnail-control>\r\n\t\t\t<mat-form-field class=\"h-full\">\r\n\t\t\t\t<mat-label>Content</mat-label>\r\n\t\t\t\t<textarea matInput required cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\r\n\t\t\t\t\tcdkAutosizeMaxRows=\"20\" formControlName=\"content\" (keyup)=\"onContentChange()\"></textarea>\r\n\t\t\t</mat-form-field>\r\n\t\t\t<div class=\"flex\">\r\n\t\t\t\t<button mat-raised-button class=\"\" (click)=\"onCancelClick()\" type=\"button\">Cancel</button>\r\n\t\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t\t<button mat-flat-button [disabled]=\"blogPostForm.invalid\" type=\"button\"\r\n\t\t\t\t\t(click)=\"onSubmit()\">Submit</button>\r\n\t\t\t</div>\r\n\t\t</form>\r\n\t</div>\r\n\r\n\t<div class=\"flex flex-col w-1/2 p-4 overflow-y-auto\">\r\n\t\t<mat-card>\r\n\t\t\t<mat-card-header>\r\n\t\t\t\t<mat-card-title>{{ blogPostForm.getRawValue().title }}</mat-card-title>\r\n\t\t\t\t<mat-card-subtitle>{{ blogPostForm.getRawValue().description }}</mat-card-subtitle>\r\n\t\t\t</mat-card-header>\r\n\t\t\t<img mat-card-image [src]=\"blogPostForm.getRawValue().thumbnail\" />\r\n\t\t\t<mat-card-content>\r\n\t\t\t\t<markdown [ngClass]=\"{ 'prose': true, 'dark:prose-invert': themeService.isDarkMode() }\"\r\n\t\t\t\t\t[data]=\"contentData()\" />\r\n\t\t\t</mat-card-content>\r\n\t\t\t<mat-card-footer>\r\n\t\t\t\t<span class=\"flex flex-row-reverse\">Doug Williamson</span>\r\n\t\t\t</mat-card-footer>\r\n\t\t</mat-card>\r\n\t</div>\r\n</div>", styles: [".mat-mdc-card-header,.mat-mdc-card-content,.mat-mdc-card-footer{padding:32px 16px}\n"] }]
+            args: [{ selector: 'ng-rhombus-blog-form', imports: [NgClass, MatListModule, MatDividerModule, MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, MatProgressSpinnerModule, MatSidenavModule, ReactiveFormsModule, TextFieldModule, ThumbnailControlComponent, MatIconModule, MarkdownComponent, MatSelectModule], template: "<div class=\"h-full flex flex-row\">\r\n\t<div class=\"flex flex-col w-1/2 p-4\">\r\n\t\t<form novalidate class=\"h-full flex flex-col\" [formGroup]=\"blogPostForm\">\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Title</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"title\">\r\n\t\t\t</mat-form-field>\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Description</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"description\">\r\n\t\t\t</mat-form-field>\r\n\t\t\t<ng-rhombus-thumbnail-control [thumbnailSrc]=\"thumbnailSource\" [width]=\"200\" [height]=\"112\"\r\n\t\t\t\t[displayMode]=\"'indicator'\" [disabled]=\"blogPost() !== undefined\"\r\n\t\t\t\t(onFileUploaded)=\"onFileUploaded($event)\"\r\n\t\t\t\t(onFileDeleted)=\"onFileDeleted()\"></ng-rhombus-thumbnail-control>\r\n\t\t\t<mat-form-field class=\"h-full\">\r\n\t\t\t\t<mat-label>Content</mat-label>\r\n\t\t\t\t<textarea matInput required cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\r\n\t\t\t\t\tcdkAutosizeMaxRows=\"20\" formControlName=\"content\" (keyup)=\"onContentChange()\"></textarea>\r\n\t\t\t</mat-form-field>\r\n\t\t\t<div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n\t\t\t\t<mat-form-field class=\"w-full\">\r\n\t\t\t\t\t<mat-label>Content Pillar (optional for From The Editor)</mat-label>\r\n\t\t\t\t\t<mat-select formControlName=\"pillar\" required>\r\n\t\t\t\t\t\t@for (p of pillars; track p) {\r\n\t\t\t\t\t\t<mat-option [value]=\"p\">{{ p }}</mat-option>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</mat-select>\r\n\t\t\t\t</mat-form-field>\r\n\r\n\t\t\t\t<mat-form-field class=\"w-full\">\r\n\t\t\t\t\t<mat-label>Series</mat-label>\r\n\t\t\t\t\t<mat-select formControlName=\"series\" required>\r\n\t\t\t\t\t\t@for (s of seriesOptions; track s) {\r\n\t\t\t\t\t\t<mat-option [value]=\"s\">{{ s }}</mat-option>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</mat-select>\r\n\t\t\t\t</mat-form-field>\r\n\t\t\t</div>\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Tags</mat-label>\r\n\t\t\t\t<input matInput formControlName=\"tagsCsv\" placeholder=\"3\u20136 tags, comma-separated\">\r\n\t\t\t\t<mat-hint>Example: angular, firestore, testing</mat-hint>\r\n\t\t\t</mat-form-field>\r\n\t\t\t<div class=\"flex\">\r\n\t\t\t\t<button mat-raised-button class=\"\" (click)=\"onCancelClick()\" type=\"button\">Cancel</button>\r\n\t\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t\t<button mat-flat-button [disabled]=\"blogPostForm.invalid\" type=\"button\"\r\n\t\t\t\t\t(click)=\"onSubmit()\">Submit</button>\r\n\t\t\t</div>\r\n\t\t</form>\r\n\t</div>\r\n\r\n\t<div class=\"flex flex-col w-1/2 p-4 overflow-y-auto\">\r\n\t\t<mat-card>\r\n\t\t\t<mat-card-header>\r\n\t\t\t\t<mat-card-title>{{ blogPostForm.getRawValue().title }}</mat-card-title>\r\n\t\t\t\t<mat-card-subtitle>{{ blogPostForm.getRawValue().description }}</mat-card-subtitle>\r\n\t\t\t</mat-card-header>\r\n\t\t\t<img mat-card-image [src]=\"blogPostForm.getRawValue().thumbnail\" />\r\n\t\t\t<mat-card-content>\r\n\t\t\t\t<markdown [ngClass]=\"{ 'prose': true, 'dark:prose-invert': themeService.isDarkMode() }\"\r\n\t\t\t\t\t[data]=\"contentData()\" />\r\n\t\t\t</mat-card-content>\r\n\t\t\t<mat-card-footer>\r\n\t\t\t\t<span class=\"flex flex-row-reverse\">Doug Williamson</span>\r\n\t\t\t</mat-card-footer>\r\n\t\t</mat-card>\r\n\t</div>\r\n</div>", styles: [".mat-mdc-card-header,.mat-mdc-card-content,.mat-mdc-card-footer{padding:32px 16px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { blogPost: [{ type: i0.Input, args: [{ isSignal: true, alias: "blogPost", required: false }] }], cancelEvent: [{ type: i0.Output, args: ["cancelEvent"] }], submitEvent: [{ type: i0.Output, args: ["submitEvent"] }], autosize: [{
                 type: ViewChild,
                 args: ['autosize']
@@ -807,6 +989,7 @@ class NgRhombusBlogPostComponent {
         this.dataSource = input(...(ngDevMode ? [undefined, { debugName: "dataSource" }] : []));
         this.themeService = inject(ThemeService);
         this.#doc = inject(DOCUMENT);
+        this.timestampToMillis = ngRhombusTimestampToMillis;
         this.faXTwitter = faXTwitter;
         this.faFacebook = faFacebook;
         this.faBluesky = faBluesky;
@@ -838,17 +1021,40 @@ class NgRhombusBlogPostComponent {
             navigator.clipboard.writeText(u).catch(() => { });
         }
     }
+    normalizeTags(tags) {
+        if (!tags)
+            return [];
+        if (Array.isArray(tags))
+            return tags.map(t => `${t}`.trim()).filter(Boolean);
+        // handle "tag1, tag2"
+        return `${tags}`
+            .split(',')
+            .map(t => t.trim())
+            .filter(Boolean);
+    }
+    get contentPillar() {
+        return (this.dataSource()?.pillar ?? null) || null;
+    }
+    get series() {
+        return (this.dataSource()?.series ?? null) || null;
+    }
+    get tags() {
+        return this.normalizeTags(this.dataSource()?.tags ?? null);
+    }
+    get hasTaxonomy() {
+        return !!this.contentPillar || !!this.series || this.tags.length > 0;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogPostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: NgRhombusBlogPostComponent, isStandalone: true, selector: "ng-rhombus-blog-post", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-card>\r\n\t<mat-card-header>\r\n\t\t<mat-card-title>{{ dataSource()?.title }}</mat-card-title>\r\n\t\t<mat-card-subtitle>{{ dataSource()?.description }}</mat-card-subtitle>\r\n\t</mat-card-header>\r\n\t<mat-card-content>\r\n\t\t<div class=\"flex items-center justify-between\">\r\n\t\t\t<p class=\"timestamp\">\r\n\t\t\t\t{{ dataSource()?.readTimeMinutes }} {{ dataSource()?.readTimeMinutes === 1 ? 'min' : 'mins' }}\r\n\t\t\t\t&middot;\r\n\t\t\t\t{{ dataSource()?.timestamp?.toMillis() | date: 'MMM d, y' }}\r\n\t\t\t</p>\r\n\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t<button matIconButton [matMenuTriggerFor]=\"shareMenu\" aria-label=\"Share post\">\r\n\t\t\t\t<mat-icon>share</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\r\n\t\t<mat-menu #shareMenu=\"matMenu\">\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.twitter\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<fa-icon [icon]=\"faXTwitter\" class=\"mr-2\"></fa-icon>\r\n\t\t\t\t<span>Share on X</span>\r\n\t\t\t</a>\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.facebook\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<fa-icon [icon]=\"faFacebook\" class=\"mr-2\"></fa-icon>\r\n\t\t\t\t<span>Share on Facebook</span>\r\n\t\t\t</a>\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.bluesky\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<fa-icon [icon]=\"faBluesky\" class=\"mr-2\"></fa-icon>\r\n\t\t\t\t<span>Share on Bluesky</span>\r\n\t\t\t</a>\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.linkedin\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<fa-icon [icon]=\"faLinkedin\" class=\"mr-2\"></fa-icon>\r\n\t\t\t\t<span>Share on LinkedIn</span>\r\n\t\t\t</a>\r\n\t\t\t<button mat-menu-item (click)=\"copyLink()\">\r\n\t\t\t\t<mat-icon>content_copy</mat-icon>\r\n\t\t\t\t<span>Copy link</span>\r\n\t\t\t</button>\r\n\t\t</mat-menu>\r\n\t</mat-card-content>\r\n\t<img mat-card-image [src]=\"dataSource()?.thumbnail\" />\r\n\t<mat-card-content class=\"content\">\r\n\t\t<markdown [ngClass]=\"{ 'prose': true, 'dark:prose-invert': themeService.isDarkMode() }\"\r\n\t\t\t[data]=\"dataSource()?.content\" />\r\n\t</mat-card-content>\r\n\t<mat-card-footer>\r\n\t\t<span class=\"flex flex-row-reverse\">Doug Williamson</span>\r\n\t</mat-card-footer>\r\n</mat-card>", styles: [".card-image{--mat-card-elevated-container-shape: var(--mat-sys-shape-medium)}.mat-mdc-card-header{padding:32px 32px 16px}.mat-mdc-card-footer,.mat-mdc-card-content{padding:0 32px 32px}.content{padding:32px}.mat-mdc-card-title{margin-bottom:12px}.mat-mdc-card{border-radius:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i2$1.MatCardFooter, selector: "mat-card-footer" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "directive", type: i2$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$6.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusBlogPostComponent, isStandalone: true, selector: "ng-rhombus-blog-post", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-card>\r\n\t<mat-card-header>\r\n\t\t<mat-card-title>{{ dataSource()?.title }}</mat-card-title>\r\n\t\t<mat-card-subtitle>\r\n\t\t\t@if (contentPillar || series) {\r\n\t\t\t<mat-chip-set aria-label=\"Post taxonomy\" role=\"list\">\r\n\t\t\t\t@if (contentPillar) {\r\n\t\t\t\t<mat-chip role=\"listitem\" class=\"primary-chips-theme\" [highlighted]=\"true\">Pillar: {{ contentPillar\r\n\t\t\t\t\t}}</mat-chip>\r\n\t\t\t\t}\r\n\t\t\t\t@if (series) {\r\n\t\t\t\t<mat-chip role=\"listitem\" class=\"secondary-chips-theme\" [highlighted]=\"true\">Series: {{ series\r\n\t\t\t\t\t}}</mat-chip>\r\n\t\t\t\t}\r\n\t\t\t</mat-chip-set>\r\n\t\t\t}\r\n\t\t</mat-card-subtitle>\r\n\t</mat-card-header>\r\n\t<mat-card-content>\r\n\t\t<div class=\"flex items-center justify-between\">\r\n\t\t\t<p class=\"timestamp\">\r\n\t\t\t\t{{ dataSource()?.readTimeMinutes }} {{ dataSource()?.readTimeMinutes === 1 ? 'min' : 'mins' }}\r\n\t\t\t\t&middot;\r\n\t\t\t\t{{ timestampToMillis(dataSource()?.timestamp) | date: 'MMM d, y' }}\r\n\t\t\t</p>\r\n\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t<button matIconButton [matMenuTriggerFor]=\"shareMenu\" aria-label=\"Share post\">\r\n\t\t\t\t<mat-icon>share</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\r\n\t\t<mat-menu #shareMenu=\"matMenu\">\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.twitter\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<fa-icon [icon]=\"faXTwitter\" class=\"mr-2\"></fa-icon>\r\n\t\t\t\t<span>Share on X</span>\r\n\t\t\t</a>\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.facebook\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<fa-icon [icon]=\"faFacebook\" class=\"mr-2\"></fa-icon>\r\n\t\t\t\t<span>Share on Facebook</span>\r\n\t\t\t</a>\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.bluesky\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<fa-icon [icon]=\"faBluesky\" class=\"mr-2\"></fa-icon>\r\n\t\t\t\t<span>Share on Bluesky</span>\r\n\t\t\t</a>\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.linkedin\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<fa-icon [icon]=\"faLinkedin\" class=\"mr-2\"></fa-icon>\r\n\t\t\t\t<span>Share on LinkedIn</span>\r\n\t\t\t</a>\r\n\t\t\t<button mat-menu-item (click)=\"copyLink()\">\r\n\t\t\t\t<mat-icon>content_copy</mat-icon>\r\n\t\t\t\t<span>Copy link</span>\r\n\t\t\t</button>\r\n\t\t</mat-menu>\r\n\t</mat-card-content>\r\n\t<img mat-card-image [src]=\"dataSource()?.thumbnail\" />\r\n\t<mat-card-content class=\"content\">\r\n\t\t<markdown [ngClass]=\"{ 'prose': true, 'dark:prose-invert': themeService.isDarkMode() }\"\r\n\t\t\t[data]=\"dataSource()?.content\" />\r\n\t</mat-card-content>\r\n\t@if (tags.length) {\r\n\t<mat-card-content>\r\n\t\t<mat-chip-set aria-label=\"Post tags\" role=\"list\">\r\n\t\t\t@for (t of tags; track t) {\r\n\t\t\t<mat-chip role=\"listitem\" highlighted=\"true\" class=\"neutral-chips-theme\">#{{ t }}</mat-chip>\r\n\t\t\t}\r\n\t\t</mat-chip-set>\r\n\t</mat-card-content>\r\n\t}\r\n</mat-card>", styles: [".neutral-chips-theme{--mat-chip-outline-color: var(--mat-sys-surface-variant);--mat-chip-elevated-selected-container-color: var(--mat-sys-surface-variant);--mat-chip-selected-label-text-color: var(--mat-sys-on-surface-variant);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.primary-chips-theme{--mat-chip-outline-color: var(--mat-sys-primary);--mat-chip-elevated-selected-container-color: var(--mat-sys-primary);--mat-chip-selected-label-text-color: var(--mat-sys-on-primary);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.secondary-chips-theme{--mat-chip-outline-color: var(--mat-sys-secondary);--mat-chip-elevated-selected-container-color: var(--mat-sys-secondary);--mat-chip-selected-label-text-color: var(--mat-sys-on-secondary);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.card-image{--mat-card-elevated-container-shape: var(--mat-sys-shape-medium)}.mat-mdc-card-header{padding:32px 32px 16px}.mat-mdc-card-footer,.mat-mdc-card-content{padding:0 32px 32px}.content{padding:32px}.mat-mdc-card-title{margin-bottom:12px}.mat-mdc-card{border-radius:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$2.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "directive", type: i2$2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i2$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogPostComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-rhombus-blog-post', imports: [DatePipe, NgClass, MarkdownComponent, MatCardModule, MatMenuModule, MatIconModule, MatButtonModule, FontAwesomeModule], template: "<mat-card>\r\n\t<mat-card-header>\r\n\t\t<mat-card-title>{{ dataSource()?.title }}</mat-card-title>\r\n\t\t<mat-card-subtitle>{{ dataSource()?.description }}</mat-card-subtitle>\r\n\t</mat-card-header>\r\n\t<mat-card-content>\r\n\t\t<div class=\"flex items-center justify-between\">\r\n\t\t\t<p class=\"timestamp\">\r\n\t\t\t\t{{ dataSource()?.readTimeMinutes }} {{ dataSource()?.readTimeMinutes === 1 ? 'min' : 'mins' }}\r\n\t\t\t\t&middot;\r\n\t\t\t\t{{ dataSource()?.timestamp?.toMillis() | date: 'MMM d, y' }}\r\n\t\t\t</p>\r\n\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t<button matIconButton [matMenuTriggerFor]=\"shareMenu\" aria-label=\"Share post\">\r\n\t\t\t\t<mat-icon>share</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\r\n\t\t<mat-menu #shareMenu=\"matMenu\">\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.twitter\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<fa-icon [icon]=\"faXTwitter\" class=\"mr-2\"></fa-icon>\r\n\t\t\t\t<span>Share on X</span>\r\n\t\t\t</a>\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.facebook\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<fa-icon [icon]=\"faFacebook\" class=\"mr-2\"></fa-icon>\r\n\t\t\t\t<span>Share on Facebook</span>\r\n\t\t\t</a>\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.bluesky\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<fa-icon [icon]=\"faBluesky\" class=\"mr-2\"></fa-icon>\r\n\t\t\t\t<span>Share on Bluesky</span>\r\n\t\t\t</a>\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.linkedin\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<fa-icon [icon]=\"faLinkedin\" class=\"mr-2\"></fa-icon>\r\n\t\t\t\t<span>Share on LinkedIn</span>\r\n\t\t\t</a>\r\n\t\t\t<button mat-menu-item (click)=\"copyLink()\">\r\n\t\t\t\t<mat-icon>content_copy</mat-icon>\r\n\t\t\t\t<span>Copy link</span>\r\n\t\t\t</button>\r\n\t\t</mat-menu>\r\n\t</mat-card-content>\r\n\t<img mat-card-image [src]=\"dataSource()?.thumbnail\" />\r\n\t<mat-card-content class=\"content\">\r\n\t\t<markdown [ngClass]=\"{ 'prose': true, 'dark:prose-invert': themeService.isDarkMode() }\"\r\n\t\t\t[data]=\"dataSource()?.content\" />\r\n\t</mat-card-content>\r\n\t<mat-card-footer>\r\n\t\t<span class=\"flex flex-row-reverse\">Doug Williamson</span>\r\n\t</mat-card-footer>\r\n</mat-card>", styles: [".card-image{--mat-card-elevated-container-shape: var(--mat-sys-shape-medium)}.mat-mdc-card-header{padding:32px 32px 16px}.mat-mdc-card-footer,.mat-mdc-card-content{padding:0 32px 32px}.content{padding:32px}.mat-mdc-card-title{margin-bottom:12px}.mat-mdc-card{border-radius:0}\n"] }]
+            args: [{ selector: 'ng-rhombus-blog-post', imports: [DatePipe, NgClass, MarkdownComponent, MatCardModule, MatMenuModule, MatIconModule, MatButtonModule, MatChipsModule, FontAwesomeModule], template: "<mat-card>\r\n\t<mat-card-header>\r\n\t\t<mat-card-title>{{ dataSource()?.title }}</mat-card-title>\r\n\t\t<mat-card-subtitle>\r\n\t\t\t@if (contentPillar || series) {\r\n\t\t\t<mat-chip-set aria-label=\"Post taxonomy\" role=\"list\">\r\n\t\t\t\t@if (contentPillar) {\r\n\t\t\t\t<mat-chip role=\"listitem\" class=\"primary-chips-theme\" [highlighted]=\"true\">Pillar: {{ contentPillar\r\n\t\t\t\t\t}}</mat-chip>\r\n\t\t\t\t}\r\n\t\t\t\t@if (series) {\r\n\t\t\t\t<mat-chip role=\"listitem\" class=\"secondary-chips-theme\" [highlighted]=\"true\">Series: {{ series\r\n\t\t\t\t\t}}</mat-chip>\r\n\t\t\t\t}\r\n\t\t\t</mat-chip-set>\r\n\t\t\t}\r\n\t\t</mat-card-subtitle>\r\n\t</mat-card-header>\r\n\t<mat-card-content>\r\n\t\t<div class=\"flex items-center justify-between\">\r\n\t\t\t<p class=\"timestamp\">\r\n\t\t\t\t{{ dataSource()?.readTimeMinutes }} {{ dataSource()?.readTimeMinutes === 1 ? 'min' : 'mins' }}\r\n\t\t\t\t&middot;\r\n\t\t\t\t{{ timestampToMillis(dataSource()?.timestamp) | date: 'MMM d, y' }}\r\n\t\t\t</p>\r\n\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t<button matIconButton [matMenuTriggerFor]=\"shareMenu\" aria-label=\"Share post\">\r\n\t\t\t\t<mat-icon>share</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\r\n\t\t<mat-menu #shareMenu=\"matMenu\">\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.twitter\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<fa-icon [icon]=\"faXTwitter\" class=\"mr-2\"></fa-icon>\r\n\t\t\t\t<span>Share on X</span>\r\n\t\t\t</a>\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.facebook\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<fa-icon [icon]=\"faFacebook\" class=\"mr-2\"></fa-icon>\r\n\t\t\t\t<span>Share on Facebook</span>\r\n\t\t\t</a>\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.bluesky\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<fa-icon [icon]=\"faBluesky\" class=\"mr-2\"></fa-icon>\r\n\t\t\t\t<span>Share on Bluesky</span>\r\n\t\t\t</a>\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.linkedin\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<fa-icon [icon]=\"faLinkedin\" class=\"mr-2\"></fa-icon>\r\n\t\t\t\t<span>Share on LinkedIn</span>\r\n\t\t\t</a>\r\n\t\t\t<button mat-menu-item (click)=\"copyLink()\">\r\n\t\t\t\t<mat-icon>content_copy</mat-icon>\r\n\t\t\t\t<span>Copy link</span>\r\n\t\t\t</button>\r\n\t\t</mat-menu>\r\n\t</mat-card-content>\r\n\t<img mat-card-image [src]=\"dataSource()?.thumbnail\" />\r\n\t<mat-card-content class=\"content\">\r\n\t\t<markdown [ngClass]=\"{ 'prose': true, 'dark:prose-invert': themeService.isDarkMode() }\"\r\n\t\t\t[data]=\"dataSource()?.content\" />\r\n\t</mat-card-content>\r\n\t@if (tags.length) {\r\n\t<mat-card-content>\r\n\t\t<mat-chip-set aria-label=\"Post tags\" role=\"list\">\r\n\t\t\t@for (t of tags; track t) {\r\n\t\t\t<mat-chip role=\"listitem\" highlighted=\"true\" class=\"neutral-chips-theme\">#{{ t }}</mat-chip>\r\n\t\t\t}\r\n\t\t</mat-chip-set>\r\n\t</mat-card-content>\r\n\t}\r\n</mat-card>", styles: [".neutral-chips-theme{--mat-chip-outline-color: var(--mat-sys-surface-variant);--mat-chip-elevated-selected-container-color: var(--mat-sys-surface-variant);--mat-chip-selected-label-text-color: var(--mat-sys-on-surface-variant);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.primary-chips-theme{--mat-chip-outline-color: var(--mat-sys-primary);--mat-chip-elevated-selected-container-color: var(--mat-sys-primary);--mat-chip-selected-label-text-color: var(--mat-sys-on-primary);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.secondary-chips-theme{--mat-chip-outline-color: var(--mat-sys-secondary);--mat-chip-elevated-selected-container-color: var(--mat-sys-secondary);--mat-chip-selected-label-text-color: var(--mat-sys-on-secondary);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.card-image{--mat-card-elevated-container-shape: var(--mat-sys-shape-medium)}.mat-mdc-card-header{padding:32px 32px 16px}.mat-mdc-card-footer,.mat-mdc-card-content{padding:0 32px 32px}.content{padding:32px}.mat-mdc-card-title{margin-bottom:12px}.mat-mdc-card{border-radius:0}\n"] }]
         }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }] } });
 
 class NgRhombusBlogDeletePostComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogDeletePostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.4", type: NgRhombusBlogDeletePostComponent, isStandalone: true, selector: "ng-rhombus-Blog-delete-post", ngImport: i0, template: "<h2 mat-dialog-title>Blog Post - Delete</h2>\r\n<mat-dialog-content>\r\n    <p>Would you like to delete this blog post?</p>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"false\" cdkFocusInitial>Cancel</button>\r\n    <button mat-button [mat-dialog-close]=\"true\">Confirm</button>\r\n</mat-dialog-actions>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.4", type: NgRhombusBlogDeletePostComponent, isStandalone: true, selector: "ng-rhombus-Blog-delete-post", ngImport: i0, template: "<h2 mat-dialog-title>Blog Post - Delete</h2>\r\n<mat-dialog-content>\r\n    <p>Would you like to delete this blog post?</p>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"false\" cdkFocusInitial>Cancel</button>\r\n    <button mat-button [mat-dialog-close]=\"true\">Confirm</button>\r\n</mat-dialog-actions>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogDeletePostComponent, decorators: [{
             type: Component,
@@ -901,14 +1107,48 @@ class NgRhombusHomeAdminComponent {
         console.log('cancel');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusHomeAdminComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: NgRhombusHomeAdminComponent, isStandalone: true, selector: "ng-rhombus-home-admin", inputs: { formAdminData: { classPropertyName: "formAdminData", publicName: "formAdminData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent" }, ngImport: i0, template: "<mat-toolbar class=\"header-theme\">\r\n\t<span>Admin Component</span>\r\n</mat-toolbar>\r\n<div class=\"h-full flex flex-row\">\r\n\t<div class=\"flex flex-col w-1/2 p-4\">\r\n\t\t<form novalidate class=\"h-full flex flex-col\" [formGroup]=\"homeAdminForm\">\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Title</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"title\">\r\n\t\t\t</mat-form-field>\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Description</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"description\">\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<div class=\"flex\">\r\n\t\t\t\t<button mat-raised-button class=\"\" (click)=\"onCancelClick()\" type=\"button\">Cancel</button>\r\n\t\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t\t<button mat-flat-button [disabled]=\"homeAdminForm.invalid\" type=\"button\"\r\n\t\t\t\t\t(click)=\"onSubmit()\">Submit</button>\r\n\t\t\t</div>\r\n\t\t</form>\r\n\t</div>\r\n</div>", styles: [":host{height:100%;width:100%;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.header-theme{--mat-toolbar-container-background-color: var(--mat-sys-outline);--mat-toolbar-container-text-color: var(--mat-sys-on-primary);--mat-icon-button-icon-color: var(--mat-sys-on-primary)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: NgRhombusHomeAdminComponent, isStandalone: true, selector: "ng-rhombus-home-admin", inputs: { formAdminData: { classPropertyName: "formAdminData", publicName: "formAdminData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"page-header\">\r\n\t<div class=\"page-header__title mat-headline-small\">Admin Component</div>\r\n</div>\r\n<div class=\"h-full flex flex-row\">\r\n\t<div class=\"flex flex-col w-1/2 p-4\">\r\n\t\t<form novalidate class=\"h-full flex flex-col\" [formGroup]=\"homeAdminForm\">\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Title</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"title\">\r\n\t\t\t</mat-form-field>\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Description</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"description\">\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<div class=\"flex\">\r\n\t\t\t\t<button mat-raised-button class=\"\" (click)=\"onCancelClick()\" type=\"button\">Cancel</button>\r\n\t\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t\t<button mat-flat-button [disabled]=\"homeAdminForm.invalid\" type=\"button\"\r\n\t\t\t\t\t(click)=\"onSubmit()\">Submit</button>\r\n\t\t\t</div>\r\n\t\t</form>\r\n\t</div>\r\n</div>", styles: [":host{height:100%;width:100%;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.page-header{display:flex;align-items:center;padding:16px;border-bottom:1px solid var(--mat-sys-outline-variant);background:var(--mat-sys-surface-container);color:var(--mat-sys-on-surface)}.page-header__title{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusHomeAdminComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-rhombus-home-admin', imports: [MatButtonModule, MatToolbarModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule], template: "<mat-toolbar class=\"header-theme\">\r\n\t<span>Admin Component</span>\r\n</mat-toolbar>\r\n<div class=\"h-full flex flex-row\">\r\n\t<div class=\"flex flex-col w-1/2 p-4\">\r\n\t\t<form novalidate class=\"h-full flex flex-col\" [formGroup]=\"homeAdminForm\">\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Title</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"title\">\r\n\t\t\t</mat-form-field>\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Description</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"description\">\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<div class=\"flex\">\r\n\t\t\t\t<button mat-raised-button class=\"\" (click)=\"onCancelClick()\" type=\"button\">Cancel</button>\r\n\t\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t\t<button mat-flat-button [disabled]=\"homeAdminForm.invalid\" type=\"button\"\r\n\t\t\t\t\t(click)=\"onSubmit()\">Submit</button>\r\n\t\t\t</div>\r\n\t\t</form>\r\n\t</div>\r\n</div>", styles: [":host{height:100%;width:100%;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.header-theme{--mat-toolbar-container-background-color: var(--mat-sys-outline);--mat-toolbar-container-text-color: var(--mat-sys-on-primary);--mat-icon-button-icon-color: var(--mat-sys-on-primary)}\n"] }]
+            args: [{ selector: 'ng-rhombus-home-admin', imports: [MatButtonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule], template: "<div class=\"page-header\">\r\n\t<div class=\"page-header__title mat-headline-small\">Admin Component</div>\r\n</div>\r\n<div class=\"h-full flex flex-row\">\r\n\t<div class=\"flex flex-col w-1/2 p-4\">\r\n\t\t<form novalidate class=\"h-full flex flex-col\" [formGroup]=\"homeAdminForm\">\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Title</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"title\">\r\n\t\t\t</mat-form-field>\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Description</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"description\">\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<div class=\"flex\">\r\n\t\t\t\t<button mat-raised-button class=\"\" (click)=\"onCancelClick()\" type=\"button\">Cancel</button>\r\n\t\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t\t<button mat-flat-button [disabled]=\"homeAdminForm.invalid\" type=\"button\"\r\n\t\t\t\t\t(click)=\"onSubmit()\">Submit</button>\r\n\t\t\t</div>\r\n\t\t</form>\r\n\t</div>\r\n</div>", styles: [":host{height:100%;width:100%;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.page-header{display:flex;align-items:center;padding:16px;border-bottom:1px solid var(--mat-sys-outline-variant);background:var(--mat-sys-surface-container);color:var(--mat-sys-on-surface)}.page-header__title{margin:0}\n"] }]
         }], propDecorators: { formAdminData: [{ type: i0.Input, args: [{ isSignal: true, alias: "formAdminData", required: false }] }], cancelEvent: [{ type: i0.Output, args: ["cancelEvent"] }], submitEvent: [{ type: i0.Output, args: ["submitEvent"] }] } });
 
-// ...existing code...
+const NG_RHOMBUS_HOME_ADAPTER = new InjectionToken('NG_RHOMBUS_HOME_ADAPTER', {
+    providedIn: 'root',
+    factory: () => ({
+        fetchTopHomeDocument: async () => undefined,
+        saveOrUpdateHomeDocument: async () => {
+            throw new Error('NG_RHOMBUS_HOME_ADAPTER is not provided.');
+        }
+    })
+});
+
+class NgRhombusHomeService {
+    constructor() {
+        this.adapter = inject(NG_RHOMBUS_HOME_ADAPTER);
+        this.homeAdminData = signal(undefined, ...(ngDevMode ? [{ debugName: "homeAdminData" }] : []));
+    }
+    async fetchTopHomeDocument() {
+        const topHome = await this.adapter.fetchTopHomeDocument();
+        this.homeAdminData.set(topHome);
+        return topHome;
+    }
+    async saveOrUpdateHomeDocument(homeData) {
+        const result = await this.adapter.saveOrUpdateHomeDocument(homeData);
+        this.homeAdminData.set({ ...homeData, id: result.id });
+        return result;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusHomeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusHomeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusHomeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 var SocialsSource;
 (function (SocialsSource) {
     SocialsSource["Twitch"] = "Twitch";
@@ -919,45 +1159,82 @@ var SocialsSource;
     SocialsSource["GitHub"] = "GitHub";
     SocialsSource["LinkedIn"] = "LinkedIn";
 })(SocialsSource || (SocialsSource = {}));
+
+class NgRhombusSocialsListComponent {
+    constructor() {
+        this.wrapperService = inject(WrapperService);
+        this.socials = input([], ...(ngDevMode ? [{ debugName: "socials" }] : []));
+    }
+    iconFor(source) {
+        switch (source) {
+            case SocialsSource.YouTube: return faYoutube;
+            case SocialsSource.Instagram: return faInstagram;
+            case SocialsSource.Twitch: return faTwitch;
+            case SocialsSource.TikTok: return faTiktok;
+            case SocialsSource.Bluesky: return faBluesky; // no official brand, fallback
+            case SocialsSource.GitHub: return faGithub;
+            case SocialsSource.LinkedIn: return faLinkedin;
+            default: return faLink;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSocialsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusSocialsListComponent, isStandalone: true, selector: "ng-rhombus-socials-list", inputs: { socials: { classPropertyName: "socials", publicName: "socials", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if ((socials()).length === 0) {\r\n<p class=\"m-6 justify-self-center\">No socials found.</p>\r\n} @else {\r\n<div class=\"toolbar-list\">\r\n    @for (s of socials(); track s.id) {\r\n    <a [attr.href]=\"s.url || null\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block\"\r\n        [attr.aria-label]=\"'Open ' + s.source + ' link'\">\r\n        <div class=\"social-row actionable\">\r\n            <fa-icon [icon]=\"iconFor(s.source)\" class=\"fa-icon left\"></fa-icon>\r\n            <span class=\"center\">{{ s.source }}</span>\r\n            @if (s.url) {\r\n            <button mat-icon-button class=\"right\" aria-label=\"Copy link\">\r\n                <mat-icon>content_copy</mat-icon>\r\n            </button>\r\n            }\r\n        </div>\r\n    </a>\r\n    }\r\n</div>\r\n}", styles: [".social-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;min-height:48px;width:100%;padding:0 16px;border:1px solid var(--mat-sys-outline-variant);border-radius:12px;background:var(--mat-sys-surface-container);color:var(--mat-sys-on-surface);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}@media(prefers-color-scheme:light){:host{--mat-list-list-item-leading-icon-color: var(--mat-sys-primary);--mat-list-list-item-label-text-color: var(--mat-sys-primary)}}.toolbar-list{display:grid;gap:12px}.actionable{cursor:pointer;transition:background-color .14s ease,box-shadow .14s ease}.actionable:hover{background:var(--mat-sys-surface-container-high);box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}.actionable:focus{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.toolbar-list a:focus-visible .social-row{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.left{margin-left:64px}.center{text-align:center}.right{margin-right:64px}\n"], dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSocialsListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-rhombus-socials-list', standalone: true, imports: [FontAwesomeModule, MatIconModule, MatButtonModule], template: "@if ((socials()).length === 0) {\r\n<p class=\"m-6 justify-self-center\">No socials found.</p>\r\n} @else {\r\n<div class=\"toolbar-list\">\r\n    @for (s of socials(); track s.id) {\r\n    <a [attr.href]=\"s.url || null\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block\"\r\n        [attr.aria-label]=\"'Open ' + s.source + ' link'\">\r\n        <div class=\"social-row actionable\">\r\n            <fa-icon [icon]=\"iconFor(s.source)\" class=\"fa-icon left\"></fa-icon>\r\n            <span class=\"center\">{{ s.source }}</span>\r\n            @if (s.url) {\r\n            <button mat-icon-button class=\"right\" aria-label=\"Copy link\">\r\n                <mat-icon>content_copy</mat-icon>\r\n            </button>\r\n            }\r\n        </div>\r\n    </a>\r\n    }\r\n</div>\r\n}", styles: [".social-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;min-height:48px;width:100%;padding:0 16px;border:1px solid var(--mat-sys-outline-variant);border-radius:12px;background:var(--mat-sys-surface-container);color:var(--mat-sys-on-surface);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}@media(prefers-color-scheme:light){:host{--mat-list-list-item-leading-icon-color: var(--mat-sys-primary);--mat-list-list-item-label-text-color: var(--mat-sys-primary)}}.toolbar-list{display:grid;gap:12px}.actionable{cursor:pointer;transition:background-color .14s ease,box-shadow .14s ease}.actionable:hover{background:var(--mat-sys-surface-container-high);box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f}.actionable:focus{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.toolbar-list a:focus-visible .social-row{outline:2px solid var(--mat-sys-primary);outline-offset:2px}.left{margin-left:64px}.center{text-align:center}.right{margin-right:64px}\n"] }]
+        }], propDecorators: { socials: [{ type: i0.Input, args: [{ isSignal: true, alias: "socials", required: false }] }] } });
+
+const NG_RHOMBUS_SOCIALS_ADAPTER = new InjectionToken('NG_RHOMBUS_SOCIALS_ADAPTER', {
+    providedIn: 'root',
+    factory: () => ({
+        fetchAll: async () => [],
+        fetchById: async () => undefined,
+        create: async () => {
+            throw new Error('NG_RHOMBUS_SOCIALS_ADAPTER is not provided.');
+        },
+        update: async () => {
+            throw new Error('NG_RHOMBUS_SOCIALS_ADAPTER is not provided.');
+        },
+        remove: async () => {
+            throw new Error('NG_RHOMBUS_SOCIALS_ADAPTER is not provided.');
+        }
+    })
+});
+
 class NgRhombusSocialsService {
     constructor() {
-        this.firestore = inject(Firestore);
-        this.injector = inject(Injector);
-        this.socialsRef = collection(this.firestore, 'socials');
+        this.adapter = inject(NG_RHOMBUS_SOCIALS_ADAPTER);
         this.socials = signal([], ...(ngDevMode ? [{ debugName: "socials" }] : []));
     }
+    sort(items) {
+        return [...items].sort((a, b) => `${a.source}`.localeCompare(`${b.source}`));
+    }
     // List
     async fetchAll() {
-        const q = query(this.socialsRef, orderBy('source', 'asc'));
-        const snap = await runInInjectionContext(this.injector, () => getDocs(q));
-        const items = snap.docs.map(d => ({ ...d.data(), id: d.id, }));
-        this.socials.set(items);
-        return items;
+        const items = await this.adapter.fetchAll();
+        const sorted = this.sort(items);
+        this.socials.set(sorted);
+        return sorted;
     }
     // Read by id
     async fetchById(id) {
-        const ref = doc(this.socialsRef, id);
-        const d = await runInInjectionContext(this.injector, () => getDoc(ref));
-        return d.exists() ? ({ ...d.data(), id: d.id, }) : undefined;
+        return this.adapter.fetchById(id);
     }
     // Create (auto-id)
     async create(social) {
-        const payload = { ...social, updatedAt: serverTimestamp() };
-        const newDoc = await runInInjectionContext(this.injector, () => addDoc(this.socialsRef, payload));
-        // Optimistic cache update
-        this.socials.set([...this.socials(), { ...social, id: newDoc.id, }]);
-        return newDoc.id;
+        const id = await this.adapter.create(social);
+        this.socials.set(this.sort([...this.socials(), { ...social, id }]));
+        return id;
     }
     // Update (partial)
     async update(id, patch) {
-        const ref = doc(this.socialsRef, id);
-        await runInInjectionContext(this.injector, () => updateDoc(ref, { ...patch, updatedAt: serverTimestamp() }));
-        this.socials.set(this.socials().map(s => (s.id === id ? { ...s, ...patch } : s)));
+        await this.adapter.update(id, patch);
+        this.socials.set(this.sort(this.socials().map(s => (s.id === id ? { ...s, ...patch } : s))));
     }
     // Delete
     async remove(id) {
-        const ref = doc(this.socialsRef, id);
-        await runInInjectionContext(this.injector, () => deleteDoc(ref));
+        await this.adapter.remove(id);
         this.socials.set(this.socials().filter(s => s.id !== id));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSocialsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -968,31 +1245,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
-class NgRhombusSocialsListComponent {
-    constructor() {
-        this.wrapperService = inject(WrapperService);
-        this.socials = input([], ...(ngDevMode ? [{ debugName: "socials" }] : []));
-    }
-    iconFor(source) {
-        switch (source) {
-            case SocialsSource.YouTube: return faYoutube;
-            case SocialsSource.Instagram: return faInstagram;
-            case SocialsSource.Twitch: return faTwitch;
-            case SocialsSource.TikTok: return faTiktok;
-            case SocialsSource.Bluesky: return faBluesky; // no official brand, fallback
-            case SocialsSource.GitHub: return faGithub;
-            case SocialsSource.LinkedIn: return faLinkedin;
-            default: return faLink;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSocialsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusSocialsListComponent, isStandalone: true, selector: "ng-rhombus-socials-list", inputs: { socials: { classPropertyName: "socials", publicName: "socials", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if ((socials()).length === 0) {\r\n<p class=\"m-6 justify-self-center\">No socials found.</p>\r\n} @else {\r\n<div class=\"toolbar-list\">\r\n    @for (s of socials(); track s.id) {\r\n    <a [attr.href]=\"s.url || null\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block\"\r\n        [attr.aria-label]=\"'Open ' + s.source + ' link'\">\r\n        <mat-toolbar class=\"social-toolbar actionable\" color=\"primary\">\r\n            <fa-icon [icon]=\"iconFor(s.source)\" class=\"fa-icon left\"></fa-icon>\r\n            <span class=\"center\">{{ s.source }}</span>\r\n            @if (s.url) {\r\n            <button mat-icon-button class=\"right\" aria-label=\"Copy link\">\r\n                <mat-icon>content_copy</mat-icon>\r\n            </button>\r\n            }\r\n        </mat-toolbar>\r\n    </a>\r\n    }\r\n</div>\r\n}", styles: [".social-toolbar{--mat-toolbar-container-background-color: var(--mat-sys-surface);--mat-toolbar-container-text-color: var(--mat-sys-on-surface);--mat-icon-button-icon-color: var(--mat-sys-on-surface);display:grid;grid-template-columns:auto 1fr auto;align-items:center;min-height:48px;width:100%;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}@media(prefers-color-scheme:light){:host{--mat-list-list-item-leading-icon-color: var(--mat-sys-primary);--mat-list-list-item-label-text-color: var(--mat-sys-primary)}}.toolbar-list{display:grid;gap:12px}.actionable{cursor:pointer;transition:background-color .14s ease,box-shadow .14s ease}.actionable:hover{filter:brightness(1.08);box-shadow:0 2px 6px #00000026}.actionable:focus{outline:2px solid rgba(255,255,255,.8);outline-offset:2px}.left{margin-left:64px}.center{text-align:center}.right{margin-right:64px}\n"], dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$6.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSocialsListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ng-rhombus-socials-list', standalone: true, imports: [FontAwesomeModule, MatToolbarModule, MatIconModule], template: "@if ((socials()).length === 0) {\r\n<p class=\"m-6 justify-self-center\">No socials found.</p>\r\n} @else {\r\n<div class=\"toolbar-list\">\r\n    @for (s of socials(); track s.id) {\r\n    <a [attr.href]=\"s.url || null\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block\"\r\n        [attr.aria-label]=\"'Open ' + s.source + ' link'\">\r\n        <mat-toolbar class=\"social-toolbar actionable\" color=\"primary\">\r\n            <fa-icon [icon]=\"iconFor(s.source)\" class=\"fa-icon left\"></fa-icon>\r\n            <span class=\"center\">{{ s.source }}</span>\r\n            @if (s.url) {\r\n            <button mat-icon-button class=\"right\" aria-label=\"Copy link\">\r\n                <mat-icon>content_copy</mat-icon>\r\n            </button>\r\n            }\r\n        </mat-toolbar>\r\n    </a>\r\n    }\r\n</div>\r\n}", styles: [".social-toolbar{--mat-toolbar-container-background-color: var(--mat-sys-surface);--mat-toolbar-container-text-color: var(--mat-sys-on-surface);--mat-icon-button-icon-color: var(--mat-sys-on-surface);display:grid;grid-template-columns:auto 1fr auto;align-items:center;min-height:48px;width:100%;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}@media(prefers-color-scheme:light){:host{--mat-list-list-item-leading-icon-color: var(--mat-sys-primary);--mat-list-list-item-label-text-color: var(--mat-sys-primary)}}.toolbar-list{display:grid;gap:12px}.actionable{cursor:pointer;transition:background-color .14s ease,box-shadow .14s ease}.actionable:hover{filter:brightness(1.08);box-shadow:0 2px 6px #00000026}.actionable:focus{outline:2px solid rgba(255,255,255,.8);outline-offset:2px}.left{margin-left:64px}.center{text-align:center}.right{margin-right:64px}\n"] }]
-        }], propDecorators: { socials: [{ type: i0.Input, args: [{ isSignal: true, alias: "socials", required: false }] }] } });
-
 class NgRhombusSocialEditDialogComponent {
     constructor() {
         this.fb = inject(FormBuilder);
@@ -1022,7 +1274,7 @@ class NgRhombusSocialEditDialogComponent {
         this.dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSocialEditDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusSocialEditDialogComponent, isStandalone: true, selector: "ng-rhombus-social-edit-dialog", ngImport: i0, template: "<h2 mat-dialog-title>\r\n    {{ data.social ? 'Edit Social' : 'Add Social' }}\r\n</h2>\r\n\r\n<form [formGroup]=\"form\" (ngSubmit)=\"save()\">\r\n    <mat-dialog-content>\r\n        <mat-form-field appearance=\"fill\" style=\"width: 100%\">\r\n            <mat-label>Source</mat-label>\r\n            <mat-select formControlName=\"source\">\r\n                @for (opt of socialTypeOptions; track opt.value) {\r\n                <mat-option [value]=\"opt.value\">\r\n                    {{ opt.label }}\r\n                </mat-option>\r\n                }\r\n            </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" style=\"width: 100%\">\r\n            <mat-label>URL</mat-label>\r\n            <input matInput formControlName=\"url\" />\r\n        </mat-form-field>\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions align=\"end\">\r\n        <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\r\n        <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"form.invalid\">\r\n            Save\r\n        </button>\r\n    </mat-dialog-actions>\r\n</form>", dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusSocialEditDialogComponent, isStandalone: true, selector: "ng-rhombus-social-edit-dialog", ngImport: i0, template: "<h2 mat-dialog-title>\r\n    {{ data.social ? 'Edit Social' : 'Add Social' }}\r\n</h2>\r\n\r\n<form [formGroup]=\"form\" (ngSubmit)=\"save()\">\r\n    <mat-dialog-content>\r\n        <mat-form-field appearance=\"fill\" style=\"width: 100%\">\r\n            <mat-label>Source</mat-label>\r\n            <mat-select formControlName=\"source\">\r\n                @for (opt of socialTypeOptions; track opt.value) {\r\n                <mat-option [value]=\"opt.value\">\r\n                    {{ opt.label }}\r\n                </mat-option>\r\n                }\r\n            </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" style=\"width: 100%\">\r\n            <mat-label>URL</mat-label>\r\n            <input matInput formControlName=\"url\" />\r\n        </mat-form-field>\r\n    </mat-dialog-content>\r\n\r\n    <mat-dialog-actions align=\"end\">\r\n        <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\r\n        <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"form.invalid\">\r\n            Save\r\n        </button>\r\n    </mat-dialog-actions>\r\n</form>", dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSocialEditDialogComponent, decorators: [{
             type: Component,
@@ -1041,7 +1293,7 @@ class NgRhombusSocialDeleteDialogComponent {
         this.dialogRef.close(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSocialDeleteDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.4", type: NgRhombusSocialDeleteDialogComponent, isStandalone: true, selector: "ng-rhombus-social-delete-dialog", ngImport: i0, template: "<h2 mat-dialog-title>Delete Social</h2>\r\n\r\n<mat-dialog-content>\r\n  Are you sure you want to delete this social?\r\n  <br />\r\n  <strong>{{ data.social.source }} - {{ data.social.url }}</strong>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions align=\"end\">\r\n  <button mat-button (click)=\"cancel()\">Cancel</button>\r\n  <button mat-raised-button color=\"warn\" (click)=\"confirm()\">Delete</button>\r\n</mat-dialog-actions>\r\n", dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.4", type: NgRhombusSocialDeleteDialogComponent, isStandalone: true, selector: "ng-rhombus-social-delete-dialog", ngImport: i0, template: "<h2 mat-dialog-title>Delete Social</h2>\r\n\r\n<mat-dialog-content>\r\n  Are you sure you want to delete this social?\r\n  <br />\r\n  <strong>{{ data.social.source }} - {{ data.social.url }}</strong>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions align=\"end\">\r\n  <button mat-button (click)=\"cancel()\">Cancel</button>\r\n  <button mat-raised-button color=\"warn\" (click)=\"confirm()\">Delete</button>\r\n</mat-dialog-actions>\r\n", dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSocialDeleteDialogComponent, decorators: [{
             type: Component,
@@ -1105,7 +1357,7 @@ class NgRhombusSocialsTableComponent {
         await this.svc.remove(row.id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSocialsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusSocialsTableComponent, isStandalone: true, selector: "ng-rhombus-socials-table", inputs: { socials: { classPropertyName: "socials", publicName: "socials", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<table mat-table [dataSource]=\"socials()\" class=\"mat-elevation-z1\">\r\n\r\n    <ng-container matColumnDef=\"source\">\r\n        <th mat-header-cell *matHeaderCellDef>Source</th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n            <!-- replace text with icon -->\r\n            <fa-icon [icon]=\"iconFor(row.source)\" class=\"fa-icon left\"></fa-icon>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"url\">\r\n        <th mat-header-cell *matHeaderCellDef>URL</th>\r\n        <td mat-cell *matCellDef=\"let s\">\r\n            <a [href]=\"s.url\" target=\"_blank\" rel=\"noopener\">{{ s.url }}</a>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"actions\">\r\n        <th mat-header-cell *matHeaderCellDef></th>\r\n        <td mat-cell *matCellDef=\"let s\">\r\n            <button mat-icon-button color=\"primary\" (click)=\"startEdit(s)\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button color=\"warn\" (click)=\"delete(s)\"><mat-icon>delete</mat-icon></button>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n</table>\r\n\r\n\r\n@if (socials() && socials().length === 0) {\r\n<p>No socials found.</p>\r\n}", styles: [".full-width{width:100%}.mat-column-source,.mat-column-actions{text-align:center}.mat-column-source fa-icon,.mat-column-actions fa-icon{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$6.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusSocialsTableComponent, isStandalone: true, selector: "ng-rhombus-socials-table", inputs: { socials: { classPropertyName: "socials", publicName: "socials", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<table mat-table [dataSource]=\"socials()\" class=\"mat-elevation-z1\">\r\n\r\n    <ng-container matColumnDef=\"source\">\r\n        <th mat-header-cell *matHeaderCellDef>Source</th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n            <!-- replace text with icon -->\r\n            <fa-icon [icon]=\"iconFor(row.source)\" class=\"fa-icon left\"></fa-icon>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"url\">\r\n        <th mat-header-cell *matHeaderCellDef>URL</th>\r\n        <td mat-cell *matCellDef=\"let s\">\r\n            <a [href]=\"s.url\" target=\"_blank\" rel=\"noopener\">{{ s.url }}</a>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"actions\">\r\n        <th mat-header-cell *matHeaderCellDef></th>\r\n        <td mat-cell *matCellDef=\"let s\">\r\n            <button mat-icon-button color=\"primary\" (click)=\"startEdit(s)\"><mat-icon>edit</mat-icon></button>\r\n            <button mat-icon-button color=\"warn\" (click)=\"delete(s)\"><mat-icon>delete</mat-icon></button>\r\n        </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n</table>\r\n\r\n\r\n@if (socials() && socials().length === 0) {\r\n<p>No socials found.</p>\r\n}", styles: [".full-width{width:100%}.mat-column-source,.mat-column-actions{text-align:center}.mat-column-source fa-icon,.mat-column-actions fa-icon{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSocialsTableComponent, decorators: [{
             type: Component,
@@ -1120,5 +1372,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { IBlog, NgRhombusBlogAddEditComponent, NgRhombusBlogDeletePostComponent, NgRhombusBlogListComponent, NgRhombusBlogPostComponent, NgRhombusBlogPostLatestComponent, NgRhombusBlogPostThumbnailService, NgRhombusBlogService, NgRhombusBlogTableComponent, NgRhombusHomeAdminComponent, NgRhombusLoginComponent, NgRhombusPageComponent, NgRhombusSocialsListComponent, NgRhombusSocialsService, NgRhombusSocialsTableComponent, NgRhombusSpinnerComponent, NgRhombusWrapperComponent, SocialsSource, ThemeEnum, WrapperService };
+export { BlogSeries, ContentPillar, IBlog, IHome, NG_RHOMBUS_AUTH_ADAPTER, NG_RHOMBUS_BLOG_ADAPTER, NG_RHOMBUS_BLOG_THUMBNAIL_ADAPTER, NG_RHOMBUS_HOME_ADAPTER, NG_RHOMBUS_SEO_ADAPTER, NG_RHOMBUS_SOCIALS_ADAPTER, NgRhombusBlogAddEditComponent, NgRhombusBlogDeletePostComponent, NgRhombusBlogListComponent, NgRhombusBlogPostComponent, NgRhombusBlogPostLatestComponent, NgRhombusBlogPostThumbnailService, NgRhombusBlogService, NgRhombusBlogTableComponent, NgRhombusHomeAdminComponent, NgRhombusHomeService, NgRhombusLoginComponent, NgRhombusPageComponent, NgRhombusSocialsListComponent, NgRhombusSocialsService, NgRhombusSocialsTableComponent, NgRhombusSpinnerComponent, NgRhombusWrapperComponent, SocialsSource, ThemeEnum, WrapperService, ngRhombusTimestampToMillis };
 //# sourceMappingURL=doug-williamson-ng-rhombus.mjs.map