@doug-williamson/ng-rhombus 0.0.16

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

@@ -0,0 +1,945 @@
+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 * as i3$1 from '@angular/material/sidenav';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { BehaviorSubject, filter, of, Subject, takeUntil } from 'rxjs';
+import * as i1$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i2$2 from '@angular/material/toolbar';
+import { MatToolbar, MatToolbarModule } from '@angular/material/toolbar';
+import { toSignal } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/router';
+import { NavigationEnd, Router, RouterModule, RouterLink } from '@angular/router';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Auth, authState, signInWithEmailAndPassword } from '@angular/fire/auth';
+import { switchMap } from 'rxjs/operators';
+import * as i4$2 from '@angular/common';
+import { isPlatformBrowser, TitleCasePipe, CommonModule, DatePipe } 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';
+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 { MatCardModule } from '@angular/material/card';
+import * as i5 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i7 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i1$4 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i3$2 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import * as i2$1 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';
+import { deleteObject } from 'firebase/storage';
+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 { MatSelectModule } from '@angular/material/select';
+
+var ThemeEnum;
+(function (ThemeEnum) {
+    ThemeEnum["LIGHT"] = "light";
+    ThemeEnum["DARK"] = "dark";
+})(ThemeEnum || (ThemeEnum = {}));
+class WrapperService {
+    // triggerCreateNew = toSignal(this._triggerCreateNew.asObservable());
+    constructor(router, activatedRoute) {
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+        this.snackbar = inject(MatSnackBar);
+        this._darkModeSubject = new BehaviorSubject(false);
+        this.darkMode = toSignal(this._darkModeSubject.asObservable(), { initialValue: false });
+        this._breadcrumbs = new BehaviorSubject([]);
+        this.breadcrumbs = toSignal(this._breadcrumbs.asObservable(), { initialValue: undefined });
+        this._triggerCreateNew = new BehaviorSubject(undefined);
+        this.triggerCreateNew = this._triggerCreateNew.asObservable();
+        this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(event => {
+            //set breadcrumbs
+            this._breadcrumbs.next(this.getBreadcrumbs(this.activatedRoute.root));
+        });
+    }
+    clickedCreateNew() {
+        this._triggerCreateNew.next(undefined);
+    }
+    getBreadcrumbs(route, url = "", breadcrumbs = []) {
+        const ROUTE_DATA_BREADCRUMB = 'breadcrumb';
+        //get the child routes
+        let children = route.children;
+        if (children.length === 0) {
+            // return breadcrumbs;
+        }
+        //iterate over each children
+        for (let child of children) {
+            //verify primary route
+            // if (child.outlet !== PRIMARY_OUTLET || child.snapshot.url.length==0) {
+            //   continue;
+            // }
+            //verify the custom data property "breadcrumb" is specified on the route
+            // if (!child.snapshot.data.hasOwnProperty(ROUTE_DATA_BREADCRUMB)) {
+            //   return this.getBreadcrumbs(child, url, breadcrumbs);
+            // }
+            //get the route's URL segment
+            let routeURL = child.snapshot.url.map(segment => segment.path).join("/");
+            //append route URL to URL
+            url += `${routeURL}`;
+            //add breadcrumb
+            let breadcrumb = {
+                label: child.snapshot.data[ROUTE_DATA_BREADCRUMB],
+                url: url
+            };
+            breadcrumbs.push(breadcrumb);
+            //recursive
+            return this.getBreadcrumbs(child, url, breadcrumbs);
+        }
+        return breadcrumbs;
+    }
+    openSnackbar(message) {
+        this.snackbar.open(message, undefined, { duration: 3000 });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: WrapperService, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: WrapperService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: WrapperService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.Router }, { type: i1.ActivatedRoute }] });
+
+class NgRhombusAuthenticationService {
+    constructor() {
+        this.firebaseAuth = inject(Auth);
+        this.currentUser$ = authState(this.firebaseAuth);
+        this.currentUserProfile$ = this.currentUser$.pipe(switchMap((user) => {
+            return user?.uid ? of(user) : of(null);
+        }));
+        this.currentUserProfile = toSignal(this.currentUserProfile$);
+    }
+    login(email, password) {
+        return signInWithEmailAndPassword(this.firebaseAuth, email, password).then(() => { });
+    }
+    logout() { return this.firebaseAuth.signOut(); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusAuthenticationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusAuthenticationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusAuthenticationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ThemeService {
+    getThemes() {
+        return this.themes;
+    }
+    setTheme(theme) {
+        if (isPlatformBrowser(this.platformId)) {
+            this.appTheme.set(theme);
+            const colorScheme = theme === 'system' ? 'light dark' : theme;
+            document.body.style.setProperty('color-scheme', colorScheme);
+            this.setThemeInLocalStorage(theme);
+        }
+    }
+    setThemeInLocalStorage(theme) {
+        if (isPlatformBrowser(this.platformId)) {
+            localStorage.setItem(this.PREFERRED_THEME_COOKIE, theme);
+        }
+    }
+    getThemeFromLocalStorage() {
+        return isPlatformBrowser(this.platformId) ? localStorage.getItem(this.PREFERRED_THEME_COOKIE) : "";
+    }
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this.appTheme = signal('system', ...(ngDevMode ? [{ debugName: "appTheme" }] : []));
+        this.PREFERRED_THEME_COOKIE = 'preferred-theme';
+        this.themes = [
+            { name: 'light', icon: 'light_mode' },
+            { name: 'dark', icon: 'dark_mode' },
+            { name: 'system', icon: 'desktop_windows' },
+        ];
+        this.selectedTheme = computed(() => this.themes.find((t) => t.name === this.appTheme()), ...(ngDevMode ? [{ debugName: "selectedTheme" }] : []));
+        this.setTheme(this.getThemeFromLocalStorage());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ThemeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class NgRhombusHeaderComponent {
+    constructor() {
+        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.wrapperService = inject(WrapperService);
+        this.authService = inject(NgRhombusAuthenticationService);
+        this.themeService = inject(ThemeService);
+        this.router = inject(Router);
+        this.logOut = output();
+        this.darkMode = this.wrapperService.darkMode;
+        this.user = this.authService.currentUserProfile;
+        this.isMobile = false;
+        this.menuToggled = new EventEmitter;
+    }
+    toggleSidebar() {
+        this.menuToggled.emit();
+    }
+    logout() {
+        this.logOut.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NgRhombusHeaderComponent, isStandalone: true, selector: "ng-rhombus-header", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { logOut: "logOut", menuToggled: "menuToggled" }, ngImport: i0, template: "<mat-toolbar class=\"header-theme relative\">\r\n    @if (isMobile) {\r\n    <button mat-icon-button (click)=\"toggleSidebar()\" color=\"red\">\r\n        <mat-icon>menu</mat-icon>\r\n    </button>\r\n    }\r\n\r\n    <span class=\"flex-1\">{{ title }}</span>\r\n\r\n    <button class=\"mr-2\" mat-icon-button [mat-menu-trigger-for]=\"themeMenu\">\r\n        <mat-icon>{{ themeService.selectedTheme()?.icon }}</mat-icon>\r\n    </button>\r\n    <mat-menu #themeMenu=\"matMenu\">\r\n        @for (theme of themeService.getThemes(); track theme.name) {\r\n        <button [class.selected-theme]=\"themeService.selectedTheme()?.name === theme.name\" mat-menu-item\r\n            (click)=\"themeService.setTheme(theme.name)\">\r\n            <mat-icon>{{ theme.icon }}</mat-icon>\r\n            <span>{{ theme.name | titlecase }}</span>\r\n        </button>\r\n        }\r\n    </mat-menu>\r\n\r\n    @if (user()) {\r\n    <button mat-raised-button color=\"primary\" class=\"logout-button\" (click)=\"logout()\">\r\n        Logout\r\n    </button>\r\n    }\r\n</mat-toolbar>\r\n@if (isLoading()) {\r\n<mat-progress-bar class=\"!absolute top-[64px] z-10\" mode=\"indeterminate\" />\r\n}", styles: [".header-theme{--mat-toolbar-container-background-color: var(--mat-sys-primary);--mat-toolbar-container-text-color: var(--mat-sys-on-primary);--mat-icon-button-icon-color: var(--mat-sys-on-primary);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.selected-theme{--mat-menu-item-icon-color: var(--mat-sys-primary);--mat-menu-item-label-text-color: var(--mat-sys-primary)}mat-progress-bar{--mat-progress-bar-active-indicator-color: var(--mat-sys-primary);--mat-progress-bar-track-color: var(--mat-sys-surface-variant)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-rhombus-header', imports: [MatButtonModule, MatIconModule, MatMenuModule, MatToolbar, TitleCasePipe, MatProgressBarModule], template: "<mat-toolbar class=\"header-theme relative\">\r\n    @if (isMobile) {\r\n    <button mat-icon-button (click)=\"toggleSidebar()\" color=\"red\">\r\n        <mat-icon>menu</mat-icon>\r\n    </button>\r\n    }\r\n\r\n    <span class=\"flex-1\">{{ title }}</span>\r\n\r\n    <button class=\"mr-2\" mat-icon-button [mat-menu-trigger-for]=\"themeMenu\">\r\n        <mat-icon>{{ themeService.selectedTheme()?.icon }}</mat-icon>\r\n    </button>\r\n    <mat-menu #themeMenu=\"matMenu\">\r\n        @for (theme of themeService.getThemes(); track theme.name) {\r\n        <button [class.selected-theme]=\"themeService.selectedTheme()?.name === theme.name\" mat-menu-item\r\n            (click)=\"themeService.setTheme(theme.name)\">\r\n            <mat-icon>{{ theme.icon }}</mat-icon>\r\n            <span>{{ theme.name | titlecase }}</span>\r\n        </button>\r\n        }\r\n    </mat-menu>\r\n\r\n    @if (user()) {\r\n    <button mat-raised-button color=\"primary\" class=\"logout-button\" (click)=\"logout()\">\r\n        Logout\r\n    </button>\r\n    }\r\n</mat-toolbar>\r\n@if (isLoading()) {\r\n<mat-progress-bar class=\"!absolute top-[64px] z-10\" mode=\"indeterminate\" />\r\n}", styles: [".header-theme{--mat-toolbar-container-background-color: var(--mat-sys-primary);--mat-toolbar-container-text-color: var(--mat-sys-on-primary);--mat-icon-button-icon-color: var(--mat-sys-on-primary);box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.selected-theme{--mat-menu-item-icon-color: var(--mat-sys-primary);--mat-menu-item-label-text-color: var(--mat-sys-primary)}mat-progress-bar{--mat-progress-bar-active-indicator-color: var(--mat-sys-primary);--mat-progress-bar-track-color: var(--mat-sys-surface-variant)}\n"] }]
+        }], propDecorators: { isMobile: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], menuToggled: [{
+                type: Output
+            }] } });
+
+class NgRhombusNavListComponent {
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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: [".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: CommonModule }, { 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: "20.3.0", ngImport: i0, type: NgRhombusNavListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-rhombus-nav-list', imports: [CommonModule, 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: [".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"] }]
+        }], propDecorators: { routeCollection: [{
+                type: Input
+            }] } });
+
+class NgRhombusWrapperComponent {
+    constructor(breakpointObserver, wrapperService) {
+        this.breakpointObserver = breakpointObserver;
+        this.wrapperService = wrapperService;
+        this.clickAddNewEvent = new EventEmitter();
+        this.destroyed = new Subject();
+        this.isMobile = false;
+        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.logout = output();
+        this.breadcrumbs = computed(() => { return this.wrapperService.breadcrumbs(); }, ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : []));
+        this.fillerContent = Array.from({ length: 50 }, () => `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+         labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+         voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+         cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`);
+        this.breakpointObserver
+            .observe([Breakpoints.XSmall])
+            .pipe(takeUntil(this.destroyed))
+            .subscribe(result => {
+            this.isMobile = result.matches;
+        });
+    }
+    ngOnInit() {
+    }
+    ngOnDestroy() {
+        this.destroyed.next();
+        this.destroyed.complete();
+    }
+    clickedCreateNew() {
+        this.clickAddNewEvent.emit();
+    }
+    logOut() {
+        this.logout.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", 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: "20.3.0", 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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "20.3.0", ngImport: i0, type: NgRhombusWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-rhombus-wrapper', imports: [CommonModule, 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)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.BreakpointObserver }, { type: WrapperService }], propDecorators: { clickAddNewEvent: [{
+                type: Output
+            }], title: [{
+                type: Input
+            }], routeCollection: [{
+                type: Input
+            }] } });
+
+class NgRhombusLoadingContainerComponent {
+    constructor() {
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.size = input(40, ...(ngDevMode ? [{ debugName: "size" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusLoadingContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NgRhombusLoadingContainerComponent, isStandalone: true, selector: "ng-rhombus-loading-container", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (loading()) {\r\n<mat-progress-spinner class=\"loading-spinner\" [diameter]=\"size()\" mode=\"indeterminate\" />\r\n} @else {\r\n<ng-content />\r\n}", styles: [":host{display:block;position:relative}.loading-spinner{position:absolute;top:50%;left:50%;translate:-50% -50%}\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: "20.3.0", ngImport: i0, type: NgRhombusLoadingContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-rhombus-loading-container', imports: [MatProgressSpinnerModule], template: "@if (loading()) {\r\n<mat-progress-spinner class=\"loading-spinner\" [diameter]=\"size()\" mode=\"indeterminate\" />\r\n} @else {\r\n<ng-content />\r\n}", styles: [":host{display:block;position:relative}.loading-spinner{position:absolute;top:50%;left:50%;translate:-50% -50%}\n"] }]
+        }] });
+
+class NgRhombusLoginComponent {
+    constructor(fb, router) {
+        this.fb = fb;
+        this.router = router;
+        this.authorizing = false;
+        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.onSubmit = output();
+        this.hidePassword = signal(true, ...(ngDevMode ? [{ debugName: "hidePassword" }] : []));
+        this.authService = inject(NgRhombusAuthenticationService);
+    }
+    ngOnInit() {
+        this.loginForm = this.fb.group({
+            email: ['', [Validators.required, Validators.email]],
+            password: ['', [Validators.required, Validators.minLength(6)]],
+        });
+    }
+    onSubmitForm() {
+        const rawForm = this.loginForm.getRawValue();
+        this.onSubmit.emit(rawForm);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", 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: "20.3.0", 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}\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],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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", 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}\n"] }]
+        }], ctorParameters: () => [{ type: i6.FormBuilder }, { type: i1.Router }] });
+
+/*
+ * Public API Surface of @doug-williamson/ng-rhombus/shell
+ */
+
+class NgRhombusBlogListComponent {
+    constructor() {
+        this.goToRoute = new EventEmitter();
+        this.dataSource = input([], ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+    }
+    goToBlogPost(id) {
+        this.goToRoute.emit(id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", 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"] }]
+        }], propDecorators: { goToRoute: [{
+                type: Output
+            }] } });
+
+class NgRhombusBlogPostLatestComponent {
+    constructor() {
+        this.blogPost = input(...(ngDevMode ? [undefined, { debugName: "blogPost" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogPostLatestComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: NgRhombusBlogPostLatestComponent, isStandalone: true, selector: "ng-rhombus-blog-post-latest", inputs: { blogPost: { classPropertyName: "blogPost", publicName: "blogPost", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-nav-list>\r\n    <mat-list-item [routerLink]=\"['/blog', blogPost()?.id]\">\r\n        <span matListItemTitle>{{ blogPost()?.title }}</span>\r\n        <span matListItemLine>{{ blogPost()?.description }}</span>\r\n        <span matListItemLine>{{ blogPost()?.timestamp?.toMillis() | date: 'MMMM d, y' }}</span>\r\n    </mat-list-item>\r\n</mat-nav-list>", styles: [".mdc-list-item{border-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i1$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1$2.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i1$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogPostLatestComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-rhombus-blog-post-latest', imports: [DatePipe, MatListModule, RouterLink], template: "<mat-nav-list>\r\n    <mat-list-item [routerLink]=\"['/blog', blogPost()?.id]\">\r\n        <span matListItemTitle>{{ blogPost()?.title }}</span>\r\n        <span matListItemLine>{{ blogPost()?.description }}</span>\r\n        <span matListItemLine>{{ blogPost()?.timestamp?.toMillis() | date: 'MMMM d, y' }}</span>\r\n    </mat-list-item>\r\n</mat-nav-list>", styles: [".mdc-list-item{border-radius:0!important}\n"] }]
+        }] });
+
+class NgRhombusBlogPostHelper {
+    static createSlug(title) {
+        const slug = title.toLowerCase().replace(/\s+/g, '-');
+        const randomThreeDigitNumber = Math.floor(Math.random() * 1000);
+        return `${slug}-${randomThreeDigitNumber}`;
+    }
+}
+
+class NgRhombusBlogService {
+    constructor() {
+        this.firestore = inject(Firestore);
+        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 returnData = [...data.docs.map(d => ({ ...d.data(), id: d.id }))];
+        this.blogPosts.set(returnData);
+        return returnData;
+    }
+    async fetchBlogPost(id) {
+        const blogPostDocumentRef = doc(this.firestore, 'blog', id);
+        // const docSnap = (await getDoc(blogPostDocumentRef)).data() as IBlog
+        // this.selectedBlogPost.set(docSnap);
+        // return docSnap;
+        const docSnap = await getDoc(blogPostDocumentRef);
+        if (docSnap.exists()) {
+            const docData = { ...docSnap.data(), id: id };
+            this.selectedBlogPost.set(docData);
+            return docData;
+        }
+        else {
+            return;
+        }
+    }
+    async fetchLatestBlogPost() {
+        const latestQuery = query(this.blogCollectionRef, orderBy('timestamp', 'desc'), limit(1));
+        const snapshot = await getDocs(latestQuery);
+        if (!snapshot.empty) {
+            const doc = snapshot.docs[0];
+            const latestPost = { ...doc.data(), id: doc.id };
+            this.selectedBlogPost.set(latestPost);
+            return latestPost;
+        }
+        return undefined;
+    }
+    async createBlogPost(blogPost) {
+        const blogPostDocumentRef = doc(this.firestore, 'blog', NgRhombusBlogPostHelper.createSlug(blogPost.title));
+        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, {
+            title: blogPost.title,
+            description: blogPost.description,
+            thumbnail: blogPost.thumbnail,
+            content: blogPost.content,
+        });
+    }
+    deleteBlogPost(id) {
+        const blogPostDocumentRef = doc(this.firestore, 'blog', id);
+        return deleteDoc(blogPostDocumentRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class NgRhombusBlogPostThumbnailService {
+    constructor() {
+        this.firebaseStorage = inject(Storage);
+    }
+    uploadImage(imageName, image) {
+        const storageRef = ref(this.firebaseStorage, `thumbnails/${imageName}`);
+        return uploadBytesResumable(storageRef, image);
+    }
+    deleteImage(filePath) {
+        const storageDocRef = ref(this.firebaseStorage, filePath);
+        return deleteObject(storageDocRef).then(() => {
+        }).catch((error) => {
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogPostThumbnailService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogPostThumbnailService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogPostThumbnailService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class NgRhombusBlogTableComponent {
+    constructor() {
+        this.editEvent = new EventEmitter();
+        this.deleteEvent = new EventEmitter();
+        this.thumbnailService = inject(NgRhombusBlogPostThumbnailService);
+        this.blogService = inject(NgRhombusBlogService);
+        this.dialog = inject(MatDialog);
+        this.dataSource = input([], ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+        this.displayedColumns = ['timestamp', 'title', 'description', 'edit', 'delete'];
+    }
+    goToBlogPost(id) {
+        this.editEvent.emit(id);
+    }
+    onDeleteBlogPost(blogPost) {
+        this.deleteEvent.emit(blogPost);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-rhombus-blog-table', imports: [CommonModule, MatButtonModule, MatIconModule, MatTableModule], template: "@if (dataSource().length > 0) {\r\n<table mat-table [dataSource]=\"dataSource()\" class=\"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"] }]
+        }], propDecorators: { editEvent: [{
+                type: Output
+            }], deleteEvent: [{
+                type: Output
+            }] } });
+
+class NgRhombusBlogThumbnailComponent {
+    constructor() {
+        this.width = input(0, ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.height = input(0, ...(ngDevMode ? [{ debugName: "height" }] : []));
+        this.imageSource = input(...(ngDevMode ? [undefined, { debugName: "imageSource" }] : []));
+        this.placeholder = computed(() => `https://placehold.co/${this.width()}x${this.height()}`, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.contentSource = computed(() => { return this.imageSource() !== '' ? this.imageSource() : this.placeholder(); }, ...(ngDevMode ? [{ debugName: "contentSource" }] : []));
+    }
+    ngOnInit() {
+        if (this.width() === 0 && this.height() === 0) {
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: NgRhombusBlogThumbnailComponent, isStandalone: true, selector: "ng-rhombus-blog-thumbnail", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, imageSource: { classPropertyName: "imageSource", publicName: "imageSource", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"image-placeholder\" [style.width]=\"width() + 'px'\" [style.height]=\"height() + 'px'\">\r\n    <img [src]=\"contentSource()\" [width]=\"width()\" [height]=\"height()\" />\r\n</div>", styles: [".image-placeholder{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}img{width:100%;height:auto}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogThumbnailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-rhombus-blog-thumbnail', imports: [], template: "<div class=\"image-placeholder\" [style.width]=\"width() + 'px'\" [style.height]=\"height() + 'px'\">\r\n    <img [src]=\"contentSource()\" [width]=\"width()\" [height]=\"height()\" />\r\n</div>", styles: [".image-placeholder{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}img{width:100%;height:auto}\n"] }]
+        }] });
+
+class NgRhombusBlogDeleteThumbnailComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogDeleteThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", 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]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogDeleteThumbnailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-rhombus-Blog-delete-thumbnail', imports: [MatButtonModule, MatDialogModule], 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>" }]
+        }] });
+
+class ThumbnailControlComponent {
+    constructor() {
+        this.width = input(0, ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.height = input(0, ...(ngDevMode ? [{ debugName: "height" }] : []));
+        this.thumbnailSrc = input('', ...(ngDevMode ? [{ debugName: "thumbnailSrc" }] : []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.thumbnailService = inject(NgRhombusBlogPostThumbnailService);
+        this.dialog = inject(MatDialog);
+        this.onFileUploaded = output();
+        this.onFileDeleted = output();
+        this.uploadedFile = signal(undefined, ...(ngDevMode ? [{ debugName: "uploadedFile" }] : []));
+        this.placeholder = computed(() => `https://placehold.co/${this.width()}x${this.height()}`, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.imageSource = computed(() => { return this.uploadedFile() ?? this.placeholder(); }, ...(ngDevMode ? [{ debugName: "imageSource" }] : []));
+    }
+    onThumbnailSelected(input) {
+        if (!input.files || input.files.length <= 0) {
+            return;
+        }
+        const file = input.files[0];
+        this.thumbnailService.uploadImage(file.name, file).then((snapshot) => {
+            getDownloadURL(snapshot.ref).then((downloadUrl) => {
+                this.uploadedFile.set(downloadUrl);
+                this.onFileUploaded.emit(downloadUrl);
+            });
+        });
+    }
+    onThumbnailDeleted() {
+        const dialogRef = this.dialog.open(NgRhombusBlogDeleteThumbnailComponent);
+        dialogRef.afterClosed().subscribe(result => {
+            if (result) {
+                this.thumbnailService.deleteImage(this.uploadedFile()).then(() => {
+                    this.uploadedFile.set(undefined);
+                    this.thumbnailInput.nativeElement.value = '';
+                    this.onFileDeleted.emit();
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ThumbnailControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: ThumbnailControlComponent, isStandalone: true, selector: "ng-rhombus-thumbnail-control", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, thumbnailSrc: { classPropertyName: "thumbnailSrc", publicName: "thumbnailSrc", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFileUploaded: "onFileUploaded", onFileDeleted: "onFileDeleted" }, viewQueries: [{ propertyName: "thumbnailInput", first: true, predicate: ["thumbnailInput"], descendants: true }], ngImport: i0, template: "<div class=\"thumbnail-control-wrapper\">\r\n    <input #thumbnailInput hidden type=\"file\" (change)=\"onThumbnailSelected(thumbnailInput)\" />\r\n    <button mat-icon-button [disabled]=\"uploadedFile() || disabled()\" (click)=\"thumbnailInput.click()\" type=\"button\">\r\n        <mat-icon>upload_file</mat-icon>\r\n    </button>\r\n    <button class=\"delete-button\" mat-icon-button [disabled]=\"!uploadedFile()\" (click)=\"onThumbnailDeleted()\"\r\n        type=\"button\">\r\n        <mat-icon>delete</mat-icon>\r\n    </button>\r\n    <div class=\"flex\"></div>\r\n    <!-- <div class=\"image-placeholder\" [style.width]=\"width() + 'px'\" [style.height]=\"height() + 'px'\">\r\n        <img [src]=\"imageSource()\" [width]=\"width()\" [height]=\"height()\" />\r\n    </div> -->\r\n    <ng-rhombus-blog-thumbnail [imageSource]=\"thumbnailSrc()\" [width]=\"width()\" [height]=\"height()\"\r\n        [imageSource]=\"imageSource()\"></ng-rhombus-blog-thumbnail>\r\n</div>", styles: [".thumbnail-control-wrapper{display:flex;flex:1;align-items:center;padding-bottom:20px}.flex{flex:1 1 auto}.image-placeholder{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.delete-button{margin-left:12px}\n"], dependencies: [{ kind: "ngmodule", type: 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: "component", type: NgRhombusBlogThumbnailComponent, selector: "ng-rhombus-blog-thumbnail", inputs: ["width", "height", "imageSource"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ThumbnailControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-rhombus-thumbnail-control', imports: [CommonModule, MatButtonModule, MatIconModule, NgRhombusBlogThumbnailComponent], template: "<div class=\"thumbnail-control-wrapper\">\r\n    <input #thumbnailInput hidden type=\"file\" (change)=\"onThumbnailSelected(thumbnailInput)\" />\r\n    <button mat-icon-button [disabled]=\"uploadedFile() || disabled()\" (click)=\"thumbnailInput.click()\" type=\"button\">\r\n        <mat-icon>upload_file</mat-icon>\r\n    </button>\r\n    <button class=\"delete-button\" mat-icon-button [disabled]=\"!uploadedFile()\" (click)=\"onThumbnailDeleted()\"\r\n        type=\"button\">\r\n        <mat-icon>delete</mat-icon>\r\n    </button>\r\n    <div class=\"flex\"></div>\r\n    <!-- <div class=\"image-placeholder\" [style.width]=\"width() + 'px'\" [style.height]=\"height() + 'px'\">\r\n        <img [src]=\"imageSource()\" [width]=\"width()\" [height]=\"height()\" />\r\n    </div> -->\r\n    <ng-rhombus-blog-thumbnail [imageSource]=\"thumbnailSrc()\" [width]=\"width()\" [height]=\"height()\"\r\n        [imageSource]=\"imageSource()\"></ng-rhombus-blog-thumbnail>\r\n</div>", styles: [".thumbnail-control-wrapper{display:flex;flex:1;align-items:center;padding-bottom:20px}.flex{flex:1 1 auto}.image-placeholder{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.delete-button{margin-left:12px}\n"] }]
+        }], propDecorators: { thumbnailInput: [{
+                type: ViewChild,
+                args: ['thumbnailInput']
+            }] } });
+
+class IBlog {
+}
+
+class NgRhombusBlogConfirmationComponent {
+    constructor() {
+        this.data = inject(MAT_DIALOG_DATA);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", 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]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogConfirmationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-rhombus-blog-confirmation', imports: [MatButtonModule, MatDialogModule], 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>" }]
+        }] });
+
+class NgRhombusBlogAddEditComponent {
+    constructor() {
+        this.blogPost = input(undefined, ...(ngDevMode ? [{ debugName: "blogPost" }] : []));
+        this.cancelEvent = output();
+        this.submitEvent = output();
+        this.contentData = signal('', ...(ngDevMode ? [{ debugName: "contentData" }] : []));
+        this.dialog = inject(MatDialog);
+        this.thumbnailService = inject(NgRhombusBlogPostThumbnailService);
+        this.formBuilder = inject(FormBuilder);
+        this.markdown = `## Markdown __rulez__!
+	---
+
+	### Syntax highlight
+	\`\`\`typescript
+	const language = 'typescript';
+	\`\`\`
+
+	### Lists
+	1. Ordered list
+	2. Another bullet point
+	- Unordered list
+	- Another unordered bullet
+
+	### Blockquote
+	> Blockquote to the max`;
+        effect(() => {
+            if (this.blogPost()) {
+                this.blogPostForm.patchValue({
+                    title: this.blogPost()?.title,
+                    description: this.blogPost()?.description,
+                    thumbnail: this.blogPost()?.thumbnail,
+                    content: this.blogPost()?.content,
+                });
+            }
+            this.onContentChange();
+        });
+    }
+    ngOnInit() {
+        this.blogPostForm = this.formBuilder.group({
+            title: [this.blogPost()?.title, Validators.required],
+            description: [this.blogPost()?.description, Validators.required],
+            thumbnail: [this.blogPost()?.thumbnail, Validators.required],
+            content: [this.blogPost()?.content, Validators.required]
+        });
+    }
+    onContentChange() {
+        this.contentData.set(this.blogPostForm.getRawValue().content);
+    }
+    get thumbnailSource() {
+        return this.blogPostForm.getRawValue().thumbnail;
+    }
+    onFileUploaded(downloadUrl) {
+        this.blogPostForm.patchValue({
+            thumbnail: downloadUrl
+        });
+        this.blogPostForm.markAsDirty();
+    }
+    onFileDeleted() {
+        this.blogPostForm.patchValue({
+            thumbnail: ''
+        });
+    }
+    onCancelClick() {
+        if (this.blogPost()) {
+            // EDIT form
+            if (this.blogPostForm.dirty) {
+                const dialogRef = this.dialog.open(NgRhombusBlogConfirmationComponent, {
+                    data: {
+                        header: 'Cancel Revision',
+                        query: 'Are you sure? You will lose your revision(s).'
+                    }
+                });
+                dialogRef.afterClosed().subscribe(result => {
+                    if (result) {
+                        this.cancelEvent.emit();
+                    }
+                });
+            }
+            else {
+                this.cancelEvent.emit();
+            }
+        }
+        else {
+            // CREATE form
+            if (this.blogPostForm.dirty) {
+                const dialogRef = this.dialog.open(NgRhombusBlogConfirmationComponent, {
+                    data: {
+                        header: 'Cancel Create',
+                        query: 'Are you sure? You will lose your progress.'
+                    }
+                });
+                dialogRef.afterClosed().subscribe(result => {
+                    if (result) {
+                        if (this.blogPostForm.getRawValue().thumbnail) {
+                            this.thumbnailService.deleteImage(this.blogPostForm.getRawValue().thumbnail).then(() => {
+                                this.onFileDeleted();
+                                this.cancelEvent.emit();
+                            });
+                        }
+                        this.cancelEvent.emit();
+                    }
+                });
+            }
+            else {
+                this.cancelEvent.emit();
+            }
+        }
+    }
+    onSubmit() {
+        if (this.blogPostForm.invalid) {
+            return;
+        }
+        const rawData = this.blogPostForm.getRawValue();
+        let submittedBlogPost = new IBlog();
+        if (this.blogPost()) {
+            submittedBlogPost.id = this.blogPost().id;
+        }
+        submittedBlogPost.title = rawData.title;
+        submittedBlogPost.description = rawData.description;
+        submittedBlogPost.thumbnail = rawData.thumbnail;
+        submittedBlogPost.content = rawData.content;
+        this.submitEvent.emit(submittedBlogPost);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogAddEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", 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: CommonModule }, { 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],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: "20.3.0", ngImport: i0, type: NgRhombusBlogAddEditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-rhombus-blog-form', imports: [MatListModule, MatDividerModule, CommonModule, 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>" }]
+        }], ctorParameters: () => [], propDecorators: { autosize: [{
+                type: ViewChild,
+                args: ['autosize']
+            }], blogPostPreview: [{
+                type: ViewChild,
+                args: ['blogPost']
+            }] } });
+
+class NgRhombusBlogPostComponent {
+    constructor() {
+        this.dataSource = input(...(ngDevMode ? [undefined, { debugName: "dataSource" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogPostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", 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]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", 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>" }]
+        }] });
+
+class NgRhombusBlogDeletePostComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogDeletePostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", 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]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusBlogDeletePostComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-rhombus-Blog-delete-post', imports: [MatButtonModule, MatDialogModule], 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>" }]
+        }] });
+
+/*
+ * Public API Surface of @doug-williamson/ng-rhombus/shell
+ */
+
+class IHome {
+}
+
+class NgRhombusHomeAdminComponent {
+    constructor() {
+        this.formAdminData = input(undefined, ...(ngDevMode ? [{ debugName: "formAdminData" }] : []));
+        this.cancelEvent = output();
+        this.submitEvent = output();
+        this.fb = inject(FormBuilder);
+    }
+    ngOnInit() {
+        // build once
+        this.homeAdminForm = this.fb.group({
+            title: ['', Validators.required],
+            description: ['', Validators.required],
+            // add other fields here...
+        });
+        // react to input changes (runs when data arrives)
+        effect(() => {
+            const data = this.formAdminData();
+            if (data) {
+                this.homeAdminForm.patchValue(data, { emitEvent: false });
+            }
+        });
+    }
+    onSubmit() {
+        if (this.homeAdminForm.invalid) {
+            return;
+        }
+        const rawData = this.homeAdminForm.getRawValue();
+        let submittedHomeAdmin = new IHome();
+        if (this.formAdminData()) {
+            submittedHomeAdmin.id = this.formAdminData().id;
+        }
+        submittedHomeAdmin.title = rawData.title;
+        submittedHomeAdmin.description = rawData.description;
+        this.submitEvent.emit(submittedHomeAdmin);
+    }
+    onCancelClick() {
+        console.log('cancel');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusHomeAdminComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: NgRhombusHomeAdminComponent, isStandalone: true, selector: "ng-rhombus-home-admin", inputs: { formAdminData: { classPropertyName: "formAdminData", publicName: "formAdminData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent" }, ngImport: i0, template: "<mat-toolbar class=\"header-theme\">\r\n\t<span>Admin Component</span>\r\n</mat-toolbar>\r\n<div class=\"h-full flex flex-row\">\r\n\t<div class=\"flex flex-col w-1/2 p-4\">\r\n\t\t<form novalidate class=\"h-full flex flex-col\" [formGroup]=\"homeAdminForm\">\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Title</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"title\">\r\n\t\t\t</mat-form-field>\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Description</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"description\">\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<div class=\"flex\">\r\n\t\t\t\t<button mat-raised-button class=\"\" (click)=\"onCancelClick()\" type=\"button\">Cancel</button>\r\n\t\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t\t<button mat-flat-button [disabled]=\"homeAdminForm.invalid\" type=\"button\"\r\n\t\t\t\t\t(click)=\"onSubmit()\">Submit</button>\r\n\t\t\t</div>\r\n\t\t</form>\r\n\t</div>\r\n</div>", styles: [":host{height:100%;width:100%;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.header-theme{--mat-toolbar-container-background-color: var(--mat-sys-outline);--mat-toolbar-container-text-color: var(--mat-sys-on-primary);--mat-icon-button-icon-color: var(--mat-sys-on-primary)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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],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: "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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusHomeAdminComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-rhombus-home-admin', imports: [MatButtonModule, MatToolbarModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule], template: "<mat-toolbar class=\"header-theme\">\r\n\t<span>Admin Component</span>\r\n</mat-toolbar>\r\n<div class=\"h-full flex flex-row\">\r\n\t<div class=\"flex flex-col w-1/2 p-4\">\r\n\t\t<form novalidate class=\"h-full flex flex-col\" [formGroup]=\"homeAdminForm\">\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Title</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"title\">\r\n\t\t\t</mat-form-field>\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Description</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"description\">\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<div class=\"flex\">\r\n\t\t\t\t<button mat-raised-button class=\"\" (click)=\"onCancelClick()\" type=\"button\">Cancel</button>\r\n\t\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t\t<button mat-flat-button [disabled]=\"homeAdminForm.invalid\" type=\"button\"\r\n\t\t\t\t\t(click)=\"onSubmit()\">Submit</button>\r\n\t\t\t</div>\r\n\t\t</form>\r\n\t</div>\r\n</div>", styles: [":host{height:100%;width:100%;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.header-theme{--mat-toolbar-container-background-color: var(--mat-sys-outline);--mat-toolbar-container-text-color: var(--mat-sys-on-primary);--mat-icon-button-icon-color: var(--mat-sys-on-primary)}\n"] }]
+        }] });
+
+// ...existing code...
+var SocialsSource;
+(function (SocialsSource) {
+    SocialsSource["Twitch"] = "Twitch";
+    SocialsSource["YouTube"] = "YouTube";
+    SocialsSource["Instagram"] = "Instagram";
+    SocialsSource["TikTok"] = "TikTok";
+    SocialsSource["Bluesky"] = "Bluesky";
+})(SocialsSource || (SocialsSource = {}));
+class NgRhombusSocialsService {
+    constructor() {
+        this.firestore = inject(Firestore);
+        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 items = snap.docs.map(d => ({ ...d.data(), id: d.id, }));
+        this.socials.set(items);
+        return items;
+    }
+    // Read by id
+    async fetchById(id) {
+        const ref = doc(this.socialsRef, id);
+        const d = await 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);
+        // Optimistic cache update
+        this.socials.set([...this.socials(), { ...social, id: newDoc.id, }]);
+        return newDoc.id;
+    }
+    // Update (partial)
+    async update(id, patch) {
+        const ref = doc(this.socialsRef, id);
+        await 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);
+        this.socials.set(this.socials().filter(s => s.id !== id));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusSocialsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusSocialsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusSocialsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+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';
+        }
+    }
+    openUrl(url) {
+        if (!url)
+            return;
+        window.open(url, '_blank', 'noopener');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusSocialsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", 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"] }]
+        }] });
+
+class NgRhombusSocialsTableComponent {
+    constructor() {
+        this.socials = input([], ...(ngDevMode ? [{ debugName: "socials" }] : []));
+        this.displayedColumns = ['id', 'source', 'url', 'actions'];
+        // Dropdown options
+        this.socialTypeOptions = [
+            { label: 'Twitch', value: SocialsSource.Twitch },
+            { label: 'YouTube', value: SocialsSource.YouTube },
+            { label: 'Instagram', value: SocialsSource.Instagram },
+            { label: 'TikTok', value: SocialsSource.TikTok },
+            { label: 'Bluesky', value: SocialsSource.Bluesky }
+        ];
+        this.fb = inject(FormBuilder);
+        this.svc = inject(NgRhombusSocialsService);
+        // simple inline form state
+        this.editingId = signal(null, ...(ngDevMode ? [{ debugName: "editingId" }] : []));
+        this.form = this.fb.group({
+            source: this.fb.control(null, { validators: [Validators.required] }),
+            url: this.fb.control('', { nonNullable: true, validators: [Validators.required] })
+        });
+    }
+    startCreate() {
+        this.editingId.set('');
+        this.form.reset({ source: null, url: '' });
+    }
+    startEdit(row) {
+        this.editingId.set(row.id);
+        this.form.reset({ source: row.source, url: row.url });
+    }
+    cancelEdit() {
+        this.editingId.set(null);
+        this.form.reset({ source: null, url: '' });
+    }
+    async save() {
+        const id = this.editingId();
+        const { source, url } = this.form.getRawValue();
+        if (!source || !url)
+            return;
+        if (id === '') {
+            await this.svc.create({ source, url });
+        }
+        else {
+            await this.svc.update(id, { source, url });
+        }
+        this.cancelEdit();
+    }
+    async delete(row) {
+        await this.svc.remove(row.id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NgRhombusSocialsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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],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: "20.3.0", ngImport: i0, type: NgRhombusSocialsTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-rhombus-socials-table', standalone: true, imports: [MatTableModule, MatButtonModule, MatSelectModule, MatIconModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule], 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"] }]
+        }] });
+
+/*
+ * Public API Surface of @doug-williamson/ng-rhombus
+ */
+
+/**
+ * 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 };
+//# sourceMappingURL=doug-williamson-ng-rhombus.mjs.map