@doug-williamson/ng-rhombus 0.0.21 → 0.0.22

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

@@ -1,7 +1,7 @@
 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, Input, Component, ViewChild, effect } from '@angular/core';
+import { inject, Injectable, PLATFORM_ID, signal, computed, input, output, EventEmitter, Output, Input, Component, Injector, runInInjectionContext, ViewChild, effect } from '@angular/core';
 import * as i3$1 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { BehaviorSubject, filter, of, Subject, takeUntil } from 'rxjs';
@@ -19,8 +19,8 @@ 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 } from '@angular/common';
+import * as i4$1 from '@angular/common';
+import { isPlatformBrowser, TitleCasePipe, DatePipe, CommonModule, NgClass } from '@angular/common';
 import * as i4 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i1$2 from '@angular/material/list';
@@ -28,7 +28,7 @@ import { MatListModule } from '@angular/material/list';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i6 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormBuilder } from '@angular/forms';
-import * as i4$1 from '@angular/material/card';
+import * as i2$1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i5 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -38,7 +38,7 @@ import * as i1$4 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i3$2 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
-import * as i2$1 from '@angular/material/dialog';
+import * as i2$3 from '@angular/material/dialog';
 import { MatDialog, MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Firestore, collection, getDocs, doc, getDoc, query, orderBy, limit, setDoc, updateDoc, deleteDoc, serverTimestamp, addDoc } from '@angular/fire/firestore';
 import { Storage, ref, uploadBytesResumable, getDownloadURL } from '@angular/fire/storage';
@@ -47,7 +47,11 @@ import * as i5$1 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 i4$3 from '@angular/material/select';
+import * as i1$5 from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faBluesky, faTiktok, faTwitch, faInstagram, faYoutube } from '@fortawesome/free-brands-svg-icons';
+import { faLink } from '@fortawesome/free-solid-svg-icons';
+import * as i4$2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 
 var ThemeEnum;
@@ -175,6 +179,13 @@ class ThemeService {
             { name: 'system', icon: 'desktop_windows' },
         ];
         this.selectedTheme = computed(() => this.themes.find((t) => t.name === this.appTheme()), ...(ngDevMode ? [{ debugName: "selectedTheme" }] : []));
+        this.isDarkMode = computed(() => {
+            const data = this.appTheme();
+            if (data === 'system' || data === 'dark') {
+                return true;
+            }
+            return false;
+        }, ...(ngDevMode ? [{ debugName: "isDarkMode" }] : []));
         this.setTheme(this.getThemeFromLocalStorage());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -224,11 +235,11 @@ class NgRhombusNavListComponent {
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusNavListComponent, isStandalone: true, selector: "ng-rhombus-nav-list", inputs: { routeCollection: "routeCollection" }, ngImport: i0, template: "<mat-nav-list>\r\n    @for (link of routeCollection; track link) {\r\n    <a mat-list-item [routerLink]=\"link.route\" routerLinkActive=\"selected-menu-item\">\r\n        <span>{{ link.label }}</span>\r\n    </a>\r\n    }\r\n</mat-nav-list>", styles: [":host{display:block;flex:0 0 250px;max-width:250px;margin:12px}.selected-menu-item{--mat-list-list-item-container-color: var(--mat-sys-primary);--mat-list-list-item-label-text-color: var(--mat-sys-on-primary);--mat-list-list-item-hover-label-text-color: var(--mat-sys-on-primary);--mat-list-list-item-focus-label-text-color: var(--mat-sys-on-primary)}\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: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { 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: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTabsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusNavListComponent, isStandalone: true, selector: "ng-rhombus-nav-list", inputs: { routeCollection: "routeCollection" }, ngImport: i0, template: "<mat-nav-list class=\"accent-list\">\r\n    @for (link of routeCollection; track link) {\r\n    <a mat-list-item [routerLink]=\"link.route\" routerLinkActive=\"selected-menu-item\">\r\n        <span>{{ link.label }}</span>\r\n    </a>\r\n    }\r\n</mat-nav-list>", styles: [":host{display:block;flex:0 0 250px;max-width:250px;margin:12px;--mat-list-list-item-container-color: var(--mat-sys-primary-container);--mat-list-list-item-label-text-color: var(--mat-sys-on-primary-container);--mat-list-list-item-hover-label-text-color: var(--mat-sys-on-primary-container);--mat-list-list-item-focus-label-text-color: var(--mat-sys-on-primary-container)}.selected-menu-item{--mat-list-list-item-container-color: var(--mat-sys-primary);--mat-list-list-item-label-text-color: var(--mat-sys-on-primary);--mat-list-list-item-hover-label-text-color: var(--mat-sys-on-primary);--mat-list-list-item-focus-label-text-color: var(--mat-sys-on-primary)}a[mat-list-item]{margin-bottom:12px}a[mat-list-item]:last-child{margin-bottom:0}\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: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { 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: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTabsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusNavListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-rhombus-nav-list', imports: [RouterModule, MatListModule, MatIconModule, MatTabsModule], template: "<mat-nav-list>\r\n    @for (link of routeCollection; track link) {\r\n    <a mat-list-item [routerLink]=\"link.route\" routerLinkActive=\"selected-menu-item\">\r\n        <span>{{ link.label }}</span>\r\n    </a>\r\n    }\r\n</mat-nav-list>", styles: [":host{display:block;flex:0 0 250px;max-width:250px;margin:12px}.selected-menu-item{--mat-list-list-item-container-color: var(--mat-sys-primary);--mat-list-list-item-label-text-color: var(--mat-sys-on-primary);--mat-list-list-item-hover-label-text-color: var(--mat-sys-on-primary);--mat-list-list-item-focus-label-text-color: var(--mat-sys-on-primary)}\n"] }]
+            args: [{ selector: 'ng-rhombus-nav-list', imports: [RouterModule, MatListModule, MatIconModule, MatTabsModule], template: "<mat-nav-list class=\"accent-list\">\r\n    @for (link of routeCollection; track link) {\r\n    <a mat-list-item [routerLink]=\"link.route\" routerLinkActive=\"selected-menu-item\">\r\n        <span>{{ link.label }}</span>\r\n    </a>\r\n    }\r\n</mat-nav-list>", styles: [":host{display:block;flex:0 0 250px;max-width:250px;margin:12px;--mat-list-list-item-container-color: var(--mat-sys-primary-container);--mat-list-list-item-label-text-color: var(--mat-sys-on-primary-container);--mat-list-list-item-hover-label-text-color: var(--mat-sys-on-primary-container);--mat-list-list-item-focus-label-text-color: var(--mat-sys-on-primary-container)}.selected-menu-item{--mat-list-list-item-container-color: var(--mat-sys-primary);--mat-list-list-item-label-text-color: var(--mat-sys-on-primary);--mat-list-list-item-hover-label-text-color: var(--mat-sys-on-primary);--mat-list-list-item-focus-label-text-color: var(--mat-sys-on-primary)}a[mat-list-item]{margin-bottom:12px}a[mat-list-item]:last-child{margin-bottom:0}\n"] }]
         }], propDecorators: { routeCollection: [{
                 type: Input
             }] } });
@@ -268,11 +279,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: "<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>\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\"></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>", styles: [":host{position:relative}.main-sidenav-content{overflow:hidden}mat-sidenav-container{height:calc(100vh - 64px)}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"] }] }); }
+    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: "<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>\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\"></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>", styles: [":host{position:relative}mat-sidenav-container{height:calc(100vh - 64px)}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"] }] }); }
 }
 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: "<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>\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\"></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>", styles: [":host{position:relative}.main-sidenav-content{overflow:hidden}mat-sidenav-container{height:calc(100vh - 64px)}mat-sidenav{width:250px}\n"] }]
+            args: [{ selector: 'ng-rhombus-wrapper', imports: [MatSidenavModule, MatButtonModule, MatIconModule, MatListModule, MatProgressBarModule, MatToolbarModule, RouterModule, NgRhombusHeaderComponent, NgRhombusNavListComponent], providers: [WrapperService], template: "<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>\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\"></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>", styles: [":host{position:relative}mat-sidenav-container{height:calc(100vh - 64px)}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: [{
@@ -316,13 +327,35 @@ class NgRhombusLoginComponent {
         this.onSubmit.emit(rawForm);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusLoginComponent, deps: [{ token: i6.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: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.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: i4$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i4$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i4$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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.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.ɵ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: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.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: i6.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.4", type: NgRhombusSpinnerComponent, isStandalone: true, selector: "ng-rhombus-spinner", ngImport: i0, template: "<div class=\"spinner-backdrop\">\r\n    <mat-spinner></mat-spinner>\r\n</div>", styles: [".spinner-backdrop{position:absolute;inset:0;background:#0000004d;display:flex;align-items:center;justify-content:center;z-index:2000}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-rhombus-spinner', imports: [MatProgressSpinnerModule], template: "<div class=\"spinner-backdrop\">\r\n    <mat-spinner></mat-spinner>\r\n</div>", styles: [".spinner-backdrop{position:absolute;inset:0;background:#0000004d;display:flex;align-items:center;justify-content:center;z-index:2000}\n"] }]
+        }] });
+
+class NgRhombusPageComponent {
+    constructor() {
+        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : [])); // toolbar title
+        this.backLink = input(null, ...(ngDevMode ? [{ debugName: "backLink" }] : [])); // optional back link (shows arrow_back when set)
+    }
+    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\">\r\n    <mat-toolbar class=\"toolbar\" color=\"primary\">\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</div>", styles: [":host{display:flex;flex-direction:column}.page{display:flex;flex-direction:column;margin:12px auto;width:min(100% - 24px,600px);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.toolbar{--mat-toolbar-container-background-color: var(--mat-sys-primary-container);--mat-toolbar-container-text-color: var(--mat-sys-on-primary-container);--mat-icon-button-icon-color: var(--mat-sys-on-primary-container)}.back-button{margin-right:8px}\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$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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\">\r\n    <mat-toolbar class=\"toolbar\" color=\"primary\">\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</div>", styles: [":host{display:flex;flex-direction:column}.page{display:flex;flex-direction:column;margin:12px auto;width:min(100% - 24px,600px);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.toolbar{--mat-toolbar-container-background-color: var(--mat-sys-primary-container);--mat-toolbar-container-text-color: var(--mat-sys-on-primary-container);--mat-icon-button-icon-color: var(--mat-sys-on-primary-container)}.back-button{margin-right:8px}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], backLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLink", required: false }] }] } });
+
 /*
  * Public API Surface of @doug-williamson/ng-rhombus/shell
  */
@@ -336,11 +369,11 @@ class NgRhombusBlogListComponent {
         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: "<mat-nav-list>\r\n\t@for (blogPost of dataSource(); track blogPost.id) {\r\n\t\t<mat-list-item (click)=\"goToRoute.emit(blogPost.id)\">\r\n\t\t\t<h3 matListItemTitle>{{ blogPost.title }}</h3>\r\n\t\t\t<p matListItemLine>{{ blogPost.description }}</p>\r\n\t\t\t<p matListItemMeta>{{ blogPost.timestamp.toMillis() | date: 'MMMM d, y' }}</p>\r\n\t\t</mat-list-item>\r\n\t}\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: 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: "<mat-nav-list>\r\n\t@for (blogPost of dataSource(); track blogPost.id) {\r\n\t\t<mat-list-item (click)=\"goToRoute.emit(blogPost.id)\">\r\n\t\t\t<h3 matListItemTitle>{{ blogPost.title }}</h3>\r\n\t\t\t<p matListItemLine>{{ blogPost.description }}</p>\r\n\t\t\t<p matListItemMeta>{{ blogPost.timestamp.toMillis() | date: 'MMMM d, y' }}</p>\r\n\t\t</mat-list-item>\r\n\t}\r\n</mat-nav-list>", 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" }] }); }
 }
 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: "<mat-nav-list>\r\n\t@for (blogPost of dataSource(); track blogPost.id) {\r\n\t\t<mat-list-item (click)=\"goToRoute.emit(blogPost.id)\">\r\n\t\t\t<h3 matListItemTitle>{{ blogPost.title }}</h3>\r\n\t\t\t<p matListItemLine>{{ blogPost.description }}</p>\r\n\t\t\t<p matListItemMeta>{{ blogPost.timestamp.toMillis() | date: 'MMMM d, y' }}</p>\r\n\t\t</mat-list-item>\r\n\t}\r\n</mat-nav-list>", styles: [".mdc-list-item{border-radius:0!important}\n"] }]
+            args: [{ selector: 'ng-rhombus-blog-list', imports: [DatePipe, MatListModule], template: "<mat-nav-list>\r\n\t@for (blogPost of dataSource(); track blogPost.id) {\r\n\t\t<mat-list-item (click)=\"goToRoute.emit(blogPost.id)\">\r\n\t\t\t<h3 matListItemTitle>{{ blogPost.title }}</h3>\r\n\t\t\t<p matListItemLine>{{ blogPost.description }}</p>\r\n\t\t\t<p matListItemMeta>{{ blogPost.timestamp.toMillis() | date: 'MMMM d, y' }}</p>\r\n\t\t</mat-list-item>\r\n\t}\r\n</mat-nav-list>", styles: [".mdc-list{padding:0}.mdc-list-item{border-radius:0!important}\n"] }]
         }], propDecorators: { goToRoute: [{
                 type: Output
             }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }] } });
@@ -368,12 +401,13 @@ class NgRhombusBlogPostHelper {
 class NgRhombusBlogService {
     constructor() {
         this.firestore = inject(Firestore);
+        this.injector = inject(Injector);
         this.blogCollectionRef = collection(this.firestore, 'blog');
         this.blogPosts = signal([], ...(ngDevMode ? [{ debugName: "blogPosts" }] : []));
         this.selectedBlogPost = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedBlogPost" }] : []));
     }
     async fetchBlogPosts() {
-        const data = await getDocs(this.blogCollectionRef);
+        const data = await runInInjectionContext(this.injector, () => getDocs(this.blogCollectionRef));
         const returnData = [...data.docs.map(d => ({ ...d.data(), id: d.id }))];
         this.blogPosts.set(returnData);
         return returnData;
@@ -383,7 +417,7 @@ class NgRhombusBlogService {
         // const docSnap = (await getDoc(blogPostDocumentRef)).data() as IBlog
         // this.selectedBlogPost.set(docSnap);
         // return docSnap;
-        const docSnap = await getDoc(blogPostDocumentRef);
+        const docSnap = await runInInjectionContext(this.injector, () => getDoc(blogPostDocumentRef));
         if (docSnap.exists()) {
             const docData = { ...docSnap.data(), id: id };
             this.selectedBlogPost.set(docData);
@@ -395,7 +429,7 @@ class NgRhombusBlogService {
     }
     async fetchLatestBlogPost() {
         const latestQuery = query(this.blogCollectionRef, orderBy('timestamp', 'desc'), limit(1));
-        const snapshot = await getDocs(latestQuery);
+        const snapshot = await runInInjectionContext(this.injector, () => getDocs(latestQuery));
         if (!snapshot.empty) {
             const doc = snapshot.docs[0];
             const latestPost = { ...doc.data(), id: doc.id };
@@ -406,26 +440,26 @@ class NgRhombusBlogService {
     }
     async createBlogPost(blogPost) {
         const blogPostDocumentRef = doc(this.firestore, 'blog', NgRhombusBlogPostHelper.createSlug(blogPost.title));
-        setDoc(blogPostDocumentRef, {
+        await runInInjectionContext(this.injector, () => setDoc(blogPostDocumentRef, {
             title: blogPost.title,
             description: blogPost.description,
             thumbnail: blogPost.thumbnail,
             content: blogPost.content,
             timestamp: new Date()
-        });
+        }));
     }
     async updateBlogPost(blogPost) {
         const blogPostDocumentRef = doc(this.firestore, 'blog', blogPost.id);
-        updateDoc(blogPostDocumentRef, {
+        await runInInjectionContext(this.injector, () => updateDoc(blogPostDocumentRef, {
             title: blogPost.title,
             description: blogPost.description,
             thumbnail: blogPost.thumbnail,
             content: blogPost.content,
-        });
+        }));
     }
     deleteBlogPost(id) {
         const blogPostDocumentRef = doc(this.firestore, 'blog', id);
-        return deleteDoc(blogPostDocumentRef);
+        return runInInjectionContext(this.injector, () => deleteDoc(blogPostDocumentRef));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogService, providedIn: 'root' }); }
@@ -478,7 +512,7 @@ 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=\"w-full h-full\">\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<!-- 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<!-- Edit Column -->\r\n\t<ng-container matColumnDef=\"edit\">\r\n\t\t<th mat-header-cell *matHeaderCellDef aria-label=\"row actions\">&nbsp;</th>\r\n\t\t<td mat-cell *matCellDef=\"let element\">\r\n\t\t\t<button mat-icon-button (click)=\"goToBlogPost(element.id)\">\r\n\t\t\t\t<mat-icon>edit</mat-icon>\r\n\t\t\t</button>\r\n\t\t</td>\r\n\t</ng-container>\r\n\r\n\t<!-- Delete Column -->\r\n\t<ng-container matColumnDef=\"delete\">\r\n\t\t<th mat-header-cell *matHeaderCellDef aria-label=\"row actions\">&nbsp;</th>\r\n\t\t<td mat-cell *matCellDef=\"let element\">\r\n\t\t\t<button mat-icon-button (click)=\"onDeleteBlogPost(element)\">\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}\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: "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]=\"dataSource()\" class=\"w-full h-full\">\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<!-- 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<!-- Edit Column -->\r\n\t<ng-container matColumnDef=\"edit\">\r\n\t\t<th mat-header-cell *matHeaderCellDef aria-label=\"row actions\">&nbsp;</th>\r\n\t\t<td mat-cell *matCellDef=\"let element\">\r\n\t\t\t<button mat-icon-button (click)=\"goToBlogPost(element.id)\">\r\n\t\t\t\t<mat-icon>edit</mat-icon>\r\n\t\t\t</button>\r\n\t\t</td>\r\n\t</ng-container>\r\n\r\n\t<!-- Delete Column -->\r\n\t<ng-container matColumnDef=\"delete\">\r\n\t\t<th mat-header-cell *matHeaderCellDef aria-label=\"row actions\">&nbsp;</th>\r\n\t\t<td mat-cell *matCellDef=\"let element\">\r\n\t\t\t<button mat-icon-button (click)=\"onDeleteBlogPost(element)\">\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}\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: "pipe", type: i4$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogTableComponent, decorators: [{
             type: Component,
@@ -511,7 +545,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$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$1.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$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$3.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,
@@ -575,7 +609,7 @@ class NgRhombusBlogConfirmationComponent {
         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$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$1.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$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$3.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,
@@ -584,6 +618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImpor
 
 class NgRhombusBlogAddEditComponent {
     constructor() {
+        this.themeService = inject(ThemeService);
         this.blogPost = input(undefined, ...(ngDevMode ? [{ debugName: "blogPost" }] : []));
         this.cancelEvent = output();
         this.submitEvent = output();
@@ -706,11 +741,11 @@ class NgRhombusBlogAddEditComponent {
         this.submitEvent.emit(submittedBlogPost);
     }
     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 [src]=\"blogPostForm.getRawValue().thumbnail\" />\r\n\t\t\t<mat-card-content>\r\n\t\t\t\t<markdown class=\"prose\" [data]=\"contentData()\" />\r\n\t\t\t</mat-card-content>\r\n\t\t</mat-card>\r\n\t</div>\r\n</div>", styles: [""], dependencies: [{ 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: i4$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i4$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: i7.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: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.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.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: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: i7.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: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogAddEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-rhombus-blog-form', imports: [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 [src]=\"blogPostForm.getRawValue().thumbnail\" />\r\n\t\t\t<mat-card-content>\r\n\t\t\t\t<markdown class=\"prose\" [data]=\"contentData()\" />\r\n\t\t\t</mat-card-content>\r\n\t\t</mat-card>\r\n\t</div>\r\n</div>" }]
+            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: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']
@@ -722,18 +757,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImpor
 class NgRhombusBlogPostComponent {
     constructor() {
         this.dataSource = input(...(ngDevMode ? [undefined, { debugName: "dataSource" }] : []));
+        this.themeService = inject(ThemeService);
+    }
+    ngOnInit() {
     }
     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: "<<<<<<< HEAD\r\n\r\n<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<img [src]=\"dataSource()?.thumbnail\" />\r\n\t<mat-card-content>\r\n\t\t<markdown class=\"prose\" [data]=\"dataSource()?.content\" />\r\n\t</mat-card-content>", styles: [""], dependencies: [{ 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: i4$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i4$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }] }); }
+    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: "@defer {\r\n<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-title>{{ dataSource()?.description }}</mat-card-title>\r\n\t\t<mat-card-subtitle>{{ dataSource()?.timestamp?.toMillis() | date: 'MMMM d, y' }}</mat-card-subtitle>\r\n\t</mat-card-header>\r\n\t<img mat-card-image [src]=\"dataSource()?.thumbnail\" />\r\n\t<mat-card-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>\r\n} @placeholder {\r\n\r\n} @error {\r\n<span>Failed to load blog posts.</span>\r\n}", styles: [".card-image{--mat-card-elevated-container-shape: var(--mat-sys-shape-medium)}.mat-mdc-card-header,.mat-mdc-card-content,.mat-mdc-card-footer{padding:16px}.mat-mdc-card-title{margin-bottom:12px}.mat-mdc-card{border-radius:0}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }], deferBlockDependencies: [() => [import('@angular/common').then(m => m.NgClass), import('ngx-markdown').then(m => m.MarkdownComponent), i2$1.MatCard, i2$1.MatCardContent, i2$1.MatCardFooter, i2$1.MatCardHeader, i2$1.MatCardImage, i2$1.MatCardSubtitle, i2$1.MatCardTitle, import('@angular/common').then(m => m.DatePipe)]] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogPostComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ng-rhombus-blog-post', imports: [MarkdownComponent, MatCardModule], template: "<<<<<<< HEAD\r\n\r\n<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<img [src]=\"dataSource()?.thumbnail\" />\r\n\t<mat-card-content>\r\n\t\t<markdown class=\"prose\" [data]=\"dataSource()?.content\" />\r\n\t</mat-card-content>" }]
-        }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }] } });
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogPostComponent, resolveDeferredDeps: () => [import('@angular/common').then(m => m.NgClass), import('ngx-markdown').then(m => m.MarkdownComponent), import('@angular/common').then(m => m.DatePipe)], resolveMetadata: (NgClass, MarkdownComponent, DatePipe) => ({ decorators: [{
+                type: Component,
+                args: [{ selector: 'ng-rhombus-blog-post', imports: [DatePipe, NgClass, MarkdownComponent, MatCardModule, NgRhombusSpinnerComponent], template: "@defer {\r\n<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-title>{{ dataSource()?.description }}</mat-card-title>\r\n\t\t<mat-card-subtitle>{{ dataSource()?.timestamp?.toMillis() | date: 'MMMM d, y' }}</mat-card-subtitle>\r\n\t</mat-card-header>\r\n\t<img mat-card-image [src]=\"dataSource()?.thumbnail\" />\r\n\t<mat-card-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>\r\n} @placeholder {\r\n\r\n} @error {\r\n<span>Failed to load blog posts.</span>\r\n}", styles: [".card-image{--mat-card-elevated-container-shape: var(--mat-sys-shape-medium)}.mat-mdc-card-header,.mat-mdc-card-content,.mat-mdc-card-footer{padding:16px}.mat-mdc-card-title{margin-bottom:12px}.mat-mdc-card{border-radius:0}\n"] }]
+            }], ctorParameters: null, 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$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$1.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$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$3.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,
@@ -805,13 +843,14 @@ var SocialsSource;
 class NgRhombusSocialsService {
     constructor() {
         this.firestore = inject(Firestore);
+        this.injector = inject(Injector);
         this.socialsRef = collection(this.firestore, 'socials');
         this.socials = signal([], ...(ngDevMode ? [{ debugName: "socials" }] : []));
     }
     // List
     async fetchAll() {
         const q = query(this.socialsRef, orderBy('source', 'asc'));
-        const snap = await getDocs(q);
+        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;
@@ -819,13 +858,13 @@ class NgRhombusSocialsService {
     // Read by id
     async fetchById(id) {
         const ref = doc(this.socialsRef, id);
-        const d = await getDoc(ref);
+        const d = await runInInjectionContext(this.injector, () => getDoc(ref));
         return d.exists() ? ({ ...d.data(), id: d.id, }) : undefined;
     }
     // Create (auto-id)
     async create(social) {
         const payload = { ...social, updatedAt: serverTimestamp() };
-        const newDoc = await addDoc(this.socialsRef, payload);
+        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;
@@ -833,13 +872,13 @@ class NgRhombusSocialsService {
     // Update (partial)
     async update(id, patch) {
         const ref = doc(this.socialsRef, id);
-        await updateDoc(ref, { ...patch, updatedAt: serverTimestamp() });
+        await runInInjectionContext(this.injector, () => updateDoc(ref, { ...patch, updatedAt: serverTimestamp() }));
         this.socials.set(this.socials().map(s => (s.id === id ? { ...s, ...patch } : s)));
     }
     // Delete
     async remove(id) {
         const ref = doc(this.socialsRef, id);
-        await deleteDoc(ref);
+        await runInInjectionContext(this.injector, () => deleteDoc(ref));
         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 }); }
@@ -854,15 +893,14 @@ class NgRhombusSocialsListComponent {
     constructor() {
         this.socials = input([], ...(ngDevMode ? [{ debugName: "socials" }] : []));
     }
-    // Map source to Material icon names (adjust as desired)
     iconFor(source) {
         switch (source) {
-            case SocialsSource.Twitch: return 'sports_esports';
-            case SocialsSource.YouTube: return 'ondemand_video';
-            case SocialsSource.Instagram: return 'camera_alt';
-            case SocialsSource.TikTok: return 'music_note';
-            case SocialsSource.Bluesky: return 'cloud';
-            default: return 'link';
+            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
+            default: return faLink;
         }
     }
     openUrl(url) {
@@ -871,11 +909,11 @@ class NgRhombusSocialsListComponent {
         window.open(url, '_blank', 'noopener');
     }
     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>No socials found.</p>\r\n} @else {\r\n<div class=\"toolbar-list\">\r\n    @for (s of socials(); track s.id) {\r\n    <mat-toolbar class=\"social-toolbar actionable\" color=\"primary\" role=\"button\" tabindex=\"0\" (click)=\"openUrl(s.url)\"\r\n        aria-label=\"Open {{ s.source }} link\">\r\n        <mat-icon class=\"left\">{{ iconFor(s.source) }}</mat-icon>\r\n        <span class=\"center\">{{ s.source }}</span>\r\n        @if (s.url) {\r\n        <mat-icon class=\"right\">open_in_new</mat-icon>\r\n        }\r\n    </mat-toolbar>\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);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;display:grid;grid-template-columns:auto 1fr auto;align-items:center;min-height:48px;width:100%}.toolbar-list{display:grid;gap:8px;margin: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-right:8px}.center{text-align:center}.right{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    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>No socials found.</p>\r\n} @else {\r\n<div class=\"toolbar-list\">\r\n    @for (s of socials(); track s.id) {\r\n    <mat-toolbar class=\"social-toolbar actionable\" color=\"primary\" role=\"button\" tabindex=\"0\" (click)=\"openUrl(s.url)\"\r\n        aria-label=\"Open {{ s.source }} link\">\r\n        <fa-icon [icon]=\"iconFor(s.source)\" class=\"fa-icon\"></fa-icon>\r\n        <span class=\"center\">{{ s.source }}</span>\r\n        @if (s.url) {\r\n        <mat-icon class=\"right\">open_in_new</mat-icon>\r\n        }\r\n    </mat-toolbar>\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%}@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:8px}.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-right:8px}.center{text-align:center}.right{display:inline-flex;align-items:center}\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: MatToolbarModule }, { kind: "component", type: i2$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.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: [MatToolbarModule, MatIconModule], template: "@if ((socials()).length === 0) {\r\n<p>No socials found.</p>\r\n} @else {\r\n<div class=\"toolbar-list\">\r\n    @for (s of socials(); track s.id) {\r\n    <mat-toolbar class=\"social-toolbar actionable\" color=\"primary\" role=\"button\" tabindex=\"0\" (click)=\"openUrl(s.url)\"\r\n        aria-label=\"Open {{ s.source }} link\">\r\n        <mat-icon class=\"left\">{{ iconFor(s.source) }}</mat-icon>\r\n        <span class=\"center\">{{ s.source }}</span>\r\n        @if (s.url) {\r\n        <mat-icon class=\"right\">open_in_new</mat-icon>\r\n        }\r\n    </mat-toolbar>\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);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;display:grid;grid-template-columns:auto 1fr auto;align-items:center;min-height:48px;width:100%}.toolbar-list{display:grid;gap:8px;margin: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-right:8px}.center{text-align:center}.right{display:inline-flex;align-items:center}\n"] }]
+            args: [{ selector: 'ng-rhombus-socials-list', standalone: true, imports: [FontAwesomeModule, MatToolbarModule, MatIconModule], template: "@if ((socials()).length === 0) {\r\n<p>No socials found.</p>\r\n} @else {\r\n<div class=\"toolbar-list\">\r\n    @for (s of socials(); track s.id) {\r\n    <mat-toolbar class=\"social-toolbar actionable\" color=\"primary\" role=\"button\" tabindex=\"0\" (click)=\"openUrl(s.url)\"\r\n        aria-label=\"Open {{ s.source }} link\">\r\n        <fa-icon [icon]=\"iconFor(s.source)\" class=\"fa-icon\"></fa-icon>\r\n        <span class=\"center\">{{ s.source }}</span>\r\n        @if (s.url) {\r\n        <mat-icon class=\"right\">open_in_new</mat-icon>\r\n        }\r\n    </mat-toolbar>\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%}@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:8px}.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-right:8px}.center{text-align:center}.right{display:inline-flex;align-items:center}\n"] }]
         }], propDecorators: { socials: [{ type: i0.Input, args: [{ isSignal: true, alias: "socials", required: false }] }] } });
 
 class NgRhombusSocialsTableComponent {
@@ -928,7 +966,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: "<div class=\"actions-bar\">\r\n    <button mat-button color=\"primary\" (click)=\"startCreate()\">\r\n        <mat-icon>add</mat-icon> Add Social\r\n    </button>\r\n</div>\r\n\r\n<table mat-table [dataSource]=\"socials()\" class=\"mat-elevation-z1\">\r\n    <ng-container matColumnDef=\"id\">\r\n        <th mat-header-cell *matHeaderCellDef>ID</th>\r\n        <td mat-cell *matCellDef=\"let s\">{{ s.id }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"source\">\r\n        <th mat-header-cell *matHeaderCellDef>Source</th>\r\n        <td mat-cell *matCellDef=\"let s\">{{ s.source }}</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>Actions</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@if (editingId() !== null) {\r\n<form class=\"edit-form\" [formGroup]=\"form\" (ngSubmit)=\"save()\">\r\n    <h3>{{ editingId() === '' ? 'Create Social' : 'Edit Social' }}</h3>\r\n\r\n    <mat-form-field appearance=\"fill\" class=\"full-width\">\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\">{{ opt.label }}</mat-option>\r\n            }\r\n        </mat-select>\r\n    </mat-form-field>\r\n\r\n    <div class=\"form-row\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n            <mat-label>URL</mat-label>\r\n            <input matInput formControlName=\"url\" placeholder=\"https://example.com/handle\">\r\n        </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"form-actions\">\r\n        <button mat-button type=\"submit\" color=\"primary\">Save</button>\r\n        <button mat-button type=\"button\" (click)=\"cancelEdit()\">Cancel</button>\r\n    </div>\r\n</form>\r\n}\r\n\r\n@if ((socials()).length === 0) {\r\n<p>No socials found.</p>\r\n}", styles: [".full-width{width:100%}\n"], dependencies: [{ 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.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: MatSelectModule }, { 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: "component", type: i4$3.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: i4$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.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.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: "<div class=\"actions-bar\">\r\n    <button mat-button color=\"primary\" (click)=\"startCreate()\">\r\n        <mat-icon>add</mat-icon> Add Social\r\n    </button>\r\n</div>\r\n\r\n<table mat-table [dataSource]=\"socials()\" class=\"mat-elevation-z1\">\r\n    <ng-container matColumnDef=\"id\">\r\n        <th mat-header-cell *matHeaderCellDef>ID</th>\r\n        <td mat-cell *matCellDef=\"let s\">{{ s.id }}</td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"source\">\r\n        <th mat-header-cell *matHeaderCellDef>Source</th>\r\n        <td mat-cell *matCellDef=\"let s\">{{ s.source }}</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>Actions</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@if (editingId() !== null) {\r\n<form class=\"edit-form\" [formGroup]=\"form\" (ngSubmit)=\"save()\">\r\n    <h3>{{ editingId() === '' ? 'Create Social' : 'Edit Social' }}</h3>\r\n\r\n    <mat-form-field appearance=\"fill\" class=\"full-width\">\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\">{{ opt.label }}</mat-option>\r\n            }\r\n        </mat-select>\r\n    </mat-form-field>\r\n\r\n    <div class=\"form-row\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n            <mat-label>URL</mat-label>\r\n            <input matInput formControlName=\"url\" placeholder=\"https://example.com/handle\">\r\n        </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"form-actions\">\r\n        <button mat-button type=\"submit\" color=\"primary\">Save</button>\r\n        <button mat-button type=\"button\" (click)=\"cancelEdit()\">Cancel</button>\r\n    </div>\r\n</form>\r\n}\r\n\r\n@if ((socials()).length === 0) {\r\n<p>No socials found.</p>\r\n}", styles: [".full-width{width:100%}\n"], dependencies: [{ 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.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: MatSelectModule }, { 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: "component", type: i4$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: i4$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.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: NgRhombusSocialsTableComponent, decorators: [{
             type: Component,
@@ -943,5 +981,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, NgRhombusSocialsListComponent, NgRhombusSocialsService, NgRhombusSocialsTableComponent, NgRhombusWrapperComponent, SocialsSource, ThemeEnum, WrapperService };
+export { IBlog, NgRhombusBlogAddEditComponent, NgRhombusBlogDeletePostComponent, NgRhombusBlogListComponent, NgRhombusBlogPostComponent, NgRhombusBlogPostLatestComponent, NgRhombusBlogPostThumbnailService, NgRhombusBlogService, NgRhombusBlogTableComponent, NgRhombusHomeAdminComponent, NgRhombusLoginComponent, NgRhombusPageComponent, NgRhombusSocialsListComponent, NgRhombusSocialsService, NgRhombusSocialsTableComponent, NgRhombusSpinnerComponent, NgRhombusWrapperComponent, SocialsSource, ThemeEnum, WrapperService };
 //# sourceMappingURL=doug-williamson-ng-rhombus.mjs.map