@doug-williamson/ng-rhombus 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,7 +4,7 @@ import * as i0 from '@angular/core';
|
|
|
4
4
|
import { inject, Injectable, PLATFORM_ID, signal, computed, input, output, EventEmitter, Output, Input, Component, Injector, runInInjectionContext, ViewChild, effect } from '@angular/core';
|
|
5
5
|
import * as i3$1 from '@angular/material/sidenav';
|
|
6
6
|
import { MatSidenavModule } from '@angular/material/sidenav';
|
|
7
|
-
import { BehaviorSubject, filter, of, Subject, takeUntil } from 'rxjs';
|
|
7
|
+
import { BehaviorSubject, filter, of, Subject, takeUntil, firstValueFrom } from 'rxjs';
|
|
8
8
|
import * as i1$1 from '@angular/material/button';
|
|
9
9
|
import { MatButtonModule } from '@angular/material/button';
|
|
10
10
|
import * as i2 from '@angular/material/icon';
|
|
@@ -19,20 +19,20 @@ import { NavigationEnd, Router, RouterModule, RouterLink } from '@angular/router
|
|
|
19
19
|
import { MatSnackBar } from '@angular/material/snack-bar';
|
|
20
20
|
import { Auth, authState, signInWithEmailAndPassword } from '@angular/fire/auth';
|
|
21
21
|
import { switchMap } from 'rxjs/operators';
|
|
22
|
-
import * as i4$
|
|
22
|
+
import * as i4$2 from '@angular/common';
|
|
23
23
|
import { isPlatformBrowser, TitleCasePipe, DatePipe, CommonModule, NgClass, DOCUMENT } from '@angular/common';
|
|
24
24
|
import * as i4 from '@angular/material/progress-bar';
|
|
25
25
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
26
26
|
import * as i1$2 from '@angular/material/list';
|
|
27
27
|
import { MatListModule } from '@angular/material/list';
|
|
28
28
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
29
|
-
import * as
|
|
29
|
+
import * as i1$5 from '@angular/forms';
|
|
30
30
|
import { Validators, ReactiveFormsModule, FormBuilder } from '@angular/forms';
|
|
31
31
|
import * as i2$1 from '@angular/material/card';
|
|
32
32
|
import { MatCardModule } from '@angular/material/card';
|
|
33
33
|
import * as i5 from '@angular/material/form-field';
|
|
34
34
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
35
|
-
import * as
|
|
35
|
+
import * as i4$1 from '@angular/material/input';
|
|
36
36
|
import { MatInputModule } from '@angular/material/input';
|
|
37
37
|
import * as i1$4 from '@angular/material/progress-spinner';
|
|
38
38
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
@@ -40,18 +40,18 @@ import { Title, Meta } from '@angular/platform-browser';
|
|
|
40
40
|
import * as i3$2 from '@angular/material/table';
|
|
41
41
|
import { MatTableModule } from '@angular/material/table';
|
|
42
42
|
import * as i2$3 from '@angular/material/dialog';
|
|
43
|
-
import { MatDialog, MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
|
43
|
+
import { MatDialog, MatDialogModule, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
|
44
44
|
import { Firestore, collection, query, orderBy, getDocs, doc, getDoc, limit, setDoc, updateDoc, deleteDoc, serverTimestamp, addDoc } from '@angular/fire/firestore';
|
|
45
45
|
import { Storage, ref, uploadBytesResumable, deleteObject, getDownloadURL } from '@angular/fire/storage';
|
|
46
46
|
import * as i5$1 from '@angular/cdk/text-field';
|
|
47
47
|
import { TextFieldModule } from '@angular/cdk/text-field';
|
|
48
48
|
import { MatDividerModule } from '@angular/material/divider';
|
|
49
49
|
import { MarkdownComponent } from 'ngx-markdown';
|
|
50
|
-
import * as i1$
|
|
50
|
+
import * as i1$6 from '@fortawesome/angular-fontawesome';
|
|
51
51
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
52
|
-
import { faBluesky, faTiktok, faTwitch, faInstagram, faYoutube } from '@fortawesome/free-brands-svg-icons';
|
|
52
|
+
import { faLinkedin, faGithub, faBluesky, faTiktok, faTwitch, faInstagram, faYoutube } from '@fortawesome/free-brands-svg-icons';
|
|
53
53
|
import { faLink } from '@fortawesome/free-solid-svg-icons';
|
|
54
|
-
import * as
|
|
54
|
+
import * as i5$2 from '@angular/material/select';
|
|
55
55
|
import { MatSelectModule } from '@angular/material/select';
|
|
56
56
|
|
|
57
57
|
var ThemeEnum;
|
|
@@ -235,11 +235,11 @@ class NgRhombusNavListComponent {
|
|
|
235
235
|
ngOnInit() {
|
|
236
236
|
}
|
|
237
237
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
238
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusNavListComponent, isStandalone: true, selector: "ng-rhombus-nav-list", inputs: { routeCollection: "routeCollection" }, ngImport: i0, template: "<mat-nav-list class=\"accent-list\">\r\n @for (link of routeCollection; track link) {\r\n <a mat-list-item [routerLink]=\"link.route\" routerLinkActive=\"selected-menu-item\">\r\n <span>{{ link.label }}</span>\r\n </a>\r\n }\r\n</mat-nav-list>", styles: [":host{display:block;flex:0 0 250px;max-width:250px;margin:12px;--mat-list-list-item-container-color: var(--mat-sys-
|
|
238
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusNavListComponent, isStandalone: true, selector: "ng-rhombus-nav-list", inputs: { routeCollection: "routeCollection" }, ngImport: i0, template: "<mat-nav-list class=\"accent-list\">\r\n @for (link of routeCollection; track link) {\r\n <a mat-list-item [routerLink]=\"link.route\" routerLinkActive=\"selected-menu-item\">\r\n <span>{{ link.label }}</span>\r\n </a>\r\n }\r\n</mat-nav-list>", styles: [":host{display:block;flex:0 0 250px;max-width:250px;margin:12px;--mat-list-list-item-container-color: var(--mat-sys-surface);--mat-list-list-item-label-text-color: var(--mat-sys-on-surface);--mat-list-list-item-hover-label-text-color: var(--mat-sys-on-surface);--mat-list-list-item-focus-label-text-color: var(--mat-sys-on-surface)}.selected-menu-item{--mat-list-list-item-container-color: var(--mat-sys-primary);--mat-list-list-item-label-text-color: var(--mat-sys-on-primary);--mat-list-list-item-hover-label-text-color: var(--mat-sys-on-primary);--mat-list-list-item-focus-label-text-color: var(--mat-sys-on-primary)}a[mat-list-item]{margin-bottom:12px}a[mat-list-item]:last-child{margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i1$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTabsModule }] }); }
|
|
239
239
|
}
|
|
240
240
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusNavListComponent, decorators: [{
|
|
241
241
|
type: Component,
|
|
242
|
-
args: [{ selector: 'ng-rhombus-nav-list', imports: [RouterModule, MatListModule, MatIconModule, MatTabsModule], template: "<mat-nav-list class=\"accent-list\">\r\n @for (link of routeCollection; track link) {\r\n <a mat-list-item [routerLink]=\"link.route\" routerLinkActive=\"selected-menu-item\">\r\n <span>{{ link.label }}</span>\r\n </a>\r\n }\r\n</mat-nav-list>", styles: [":host{display:block;flex:0 0 250px;max-width:250px;margin:12px;--mat-list-list-item-container-color: var(--mat-sys-
|
|
242
|
+
args: [{ selector: 'ng-rhombus-nav-list', imports: [RouterModule, MatListModule, MatIconModule, MatTabsModule], template: "<mat-nav-list class=\"accent-list\">\r\n @for (link of routeCollection; track link) {\r\n <a mat-list-item [routerLink]=\"link.route\" routerLinkActive=\"selected-menu-item\">\r\n <span>{{ link.label }}</span>\r\n </a>\r\n }\r\n</mat-nav-list>", styles: [":host{display:block;flex:0 0 250px;max-width:250px;margin:12px;--mat-list-list-item-container-color: var(--mat-sys-surface);--mat-list-list-item-label-text-color: var(--mat-sys-on-surface);--mat-list-list-item-hover-label-text-color: var(--mat-sys-on-surface);--mat-list-list-item-focus-label-text-color: var(--mat-sys-on-surface)}.selected-menu-item{--mat-list-list-item-container-color: var(--mat-sys-primary);--mat-list-list-item-label-text-color: var(--mat-sys-on-primary);--mat-list-list-item-hover-label-text-color: var(--mat-sys-on-primary);--mat-list-list-item-focus-label-text-color: var(--mat-sys-on-primary)}a[mat-list-item]{margin-bottom:12px}a[mat-list-item]:last-child{margin-bottom:0}\n"] }]
|
|
243
243
|
}], propDecorators: { routeCollection: [{
|
|
244
244
|
type: Input
|
|
245
245
|
}] } });
|
|
@@ -279,11 +279,11 @@ class NgRhombusWrapperComponent {
|
|
|
279
279
|
this.logout.emit();
|
|
280
280
|
}
|
|
281
281
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusWrapperComponent, deps: [{ token: i1$3.BreakpointObserver }, { token: WrapperService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
282
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: NgRhombusWrapperComponent, isStandalone: true, selector: "ng-rhombus-wrapper", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, routeCollection: { classPropertyName: "routeCollection", publicName: "routeCollection", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { clickAddNewEvent: "clickAddNewEvent", logout: "logout" }, providers: [WrapperService], ngImport: i0, template: "<ng-rhombus-header class=\"header-wrapper\" [isMobile]=\"isMobile\" [title]=\"title\" (menuToggled)=\"sidenav.toggle()\"\r\n
|
|
282
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: NgRhombusWrapperComponent, isStandalone: true, selector: "ng-rhombus-wrapper", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, routeCollection: { classPropertyName: "routeCollection", publicName: "routeCollection", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { clickAddNewEvent: "clickAddNewEvent", logout: "logout" }, providers: [WrapperService], ngImport: i0, template: "<div class=\"h-full flex flex-col\">\r\n <ng-rhombus-header class=\"header-wrapper\" [isMobile]=\"isMobile\" [title]=\"title\" (menuToggled)=\"sidenav.toggle()\"\r\n (logOut)=\"logOut()\" [isLoading]=\"isLoading()\"></ng-rhombus-header>\r\n <mat-sidenav-container class=\"grow\">\r\n <mat-sidenav #sidenav [opened]=\"!isMobile\" [mode]=\"isMobile ? 'over' : 'side'\">\r\n <div class=\"nav-list-wrapper\">\r\n <ng-rhombus-nav-list [routeCollection]=\"routeCollection\"></ng-rhombus-nav-list>\r\n </div>\r\n </mat-sidenav>\r\n <mat-sidenav-content class=\"main-sidenav-content\">\r\n <!-- <mat-toolbar class=\"header-theme\">\r\n <span class=\"wrapper-flex\">\r\n <ng-container *ngFor=\"let breadcrumb of breadcrumbs()\">\r\n {{ breadcrumb.label }}\r\n </ng-container>\r\n </span>\r\n <button mat-icon-button (click)=\"clickedCreateNew()\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n </mat-toolbar> -->\r\n <router-outlet #o=\"outlet\"></router-outlet>\r\n </mat-sidenav-content>\r\n </mat-sidenav-container>\r\n</div>", styles: [".header-wrapper{z-index:5}mat-sidenav{width:250px}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i3$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: NgRhombusHeaderComponent, selector: "ng-rhombus-header", inputs: ["isLoading", "isMobile", "title"], outputs: ["logOut", "menuToggled"] }, { kind: "component", type: NgRhombusNavListComponent, selector: "ng-rhombus-nav-list", inputs: ["routeCollection"] }] }); }
|
|
283
283
|
}
|
|
284
284
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusWrapperComponent, decorators: [{
|
|
285
285
|
type: Component,
|
|
286
|
-
args: [{ selector: 'ng-rhombus-wrapper', imports: [MatSidenavModule, MatButtonModule, MatIconModule, MatListModule, MatProgressBarModule, MatToolbarModule, RouterModule, NgRhombusHeaderComponent, NgRhombusNavListComponent], providers: [WrapperService], template: "<ng-rhombus-header class=\"header-wrapper\" [isMobile]=\"isMobile\" [title]=\"title\" (menuToggled)=\"sidenav.toggle()\"\r\n
|
|
286
|
+
args: [{ selector: 'ng-rhombus-wrapper', imports: [MatSidenavModule, MatButtonModule, MatIconModule, MatListModule, MatProgressBarModule, MatToolbarModule, RouterModule, NgRhombusHeaderComponent, NgRhombusNavListComponent], providers: [WrapperService], template: "<div class=\"h-full flex flex-col\">\r\n <ng-rhombus-header class=\"header-wrapper\" [isMobile]=\"isMobile\" [title]=\"title\" (menuToggled)=\"sidenav.toggle()\"\r\n (logOut)=\"logOut()\" [isLoading]=\"isLoading()\"></ng-rhombus-header>\r\n <mat-sidenav-container class=\"grow\">\r\n <mat-sidenav #sidenav [opened]=\"!isMobile\" [mode]=\"isMobile ? 'over' : 'side'\">\r\n <div class=\"nav-list-wrapper\">\r\n <ng-rhombus-nav-list [routeCollection]=\"routeCollection\"></ng-rhombus-nav-list>\r\n </div>\r\n </mat-sidenav>\r\n <mat-sidenav-content class=\"main-sidenav-content\">\r\n <!-- <mat-toolbar class=\"header-theme\">\r\n <span class=\"wrapper-flex\">\r\n <ng-container *ngFor=\"let breadcrumb of breadcrumbs()\">\r\n {{ breadcrumb.label }}\r\n </ng-container>\r\n </span>\r\n <button mat-icon-button (click)=\"clickedCreateNew()\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n </mat-toolbar> -->\r\n <router-outlet #o=\"outlet\"></router-outlet>\r\n </mat-sidenav-content>\r\n </mat-sidenav-container>\r\n</div>", styles: [".header-wrapper{z-index:5}mat-sidenav{width:250px}\n"] }]
|
|
287
287
|
}], ctorParameters: () => [{ type: i1$3.BreakpointObserver }, { type: WrapperService }], propDecorators: { clickAddNewEvent: [{
|
|
288
288
|
type: Output
|
|
289
289
|
}], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], logout: [{ type: i0.Output, args: ["logout"] }], title: [{
|
|
@@ -326,13 +326,13 @@ class NgRhombusLoginComponent {
|
|
|
326
326
|
const rawForm = this.loginForm.getRawValue();
|
|
327
327
|
this.onSubmit.emit(rawForm);
|
|
328
328
|
}
|
|
329
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusLoginComponent, deps: [{ token:
|
|
330
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: NgRhombusLoginComponent, isStandalone: true, selector: "ng-rhombus-login", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit" }, ngImport: i0, template: "<div class=\"flex min-h-screen items-center justify-center bg-background\">\r\n <mat-card class=\"w-full max-w-[400px] p-10\">\r\n <mat-card-header>\r\n <mat-card-title-group>\r\n <mat-card-title>{{ title() }}</mat-card-title>\r\n <mat-card-subtitle>Administration</mat-card-subtitle>\r\n </mat-card-title-group>\r\n\r\n </mat-card-header>\r\n <form class=\"flex flex-col\" novalidate [formGroup]=\"loginForm\" (ngSubmit)=\"onSubmitForm()\">\r\n <mat-card-content>\r\n <mat-form-field class=\"w-full flex\">\r\n <mat-label>Email Address</mat-label>\r\n <input matInput placeholder=\"Placeholder\" formControlName=\"email\" aria-label=\"Email Address\" />\r\n <mat-icon matSuffix>email</mat-icon>\r\n <mat-error align=\"start\">Email Address Required</mat-error>\r\n </mat-form-field>\r\n <mat-form-field class=\"w-full flex\">\r\n <mat-label>Password</mat-label>\r\n <input matInput [type]=\"hidePassword() ? 'password' : 'text'\" placeholder=\"Placeholder\"\r\n formControlName=\"password\" aria-label=\"Password\" />\r\n <button mat-icon-button matSuffix (click)=\"hidePassword.set(!hidePassword())\" type=\"button\"\r\n style=\"margin-right: 0.25rem;\">\r\n <mat-icon>{{ hidePassword() ? 'visibility_off' : 'visibility' }}</mat-icon>\r\n </button>\r\n <mat-error align=\"start\">Password Required</mat-error>\r\n </mat-form-field>\r\n </mat-card-content>\r\n <button mat-flat-button class=\"login-button\" type=\"submit\" [disabled]=\"loading() || loginForm.invalid\">\r\n <ng-rhombus-loading-container [loading]=\"loading()\" [size]=\"20\">\r\n Login\r\n </ng-rhombus-loading-container>\r\n </button>\r\n </form>\r\n </mat-card>\r\n</div>", styles: ["mat-card{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.login-button{margin:8px 16px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type:
|
|
329
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusLoginComponent, deps: [{ token: i1$5.FormBuilder }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
330
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: NgRhombusLoginComponent, isStandalone: true, selector: "ng-rhombus-login", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit" }, ngImport: i0, template: "<div class=\"flex min-h-screen items-center justify-center bg-background\">\r\n <mat-card class=\"w-full max-w-[400px] p-10\">\r\n <mat-card-header>\r\n <mat-card-title-group>\r\n <mat-card-title>{{ title() }}</mat-card-title>\r\n <mat-card-subtitle>Administration</mat-card-subtitle>\r\n </mat-card-title-group>\r\n\r\n </mat-card-header>\r\n <form class=\"flex flex-col\" novalidate [formGroup]=\"loginForm\" (ngSubmit)=\"onSubmitForm()\">\r\n <mat-card-content>\r\n <mat-form-field class=\"w-full flex\">\r\n <mat-label>Email Address</mat-label>\r\n <input matInput placeholder=\"Placeholder\" formControlName=\"email\" aria-label=\"Email Address\" />\r\n <mat-icon matSuffix>email</mat-icon>\r\n <mat-error align=\"start\">Email Address Required</mat-error>\r\n </mat-form-field>\r\n <mat-form-field class=\"w-full flex\">\r\n <mat-label>Password</mat-label>\r\n <input matInput [type]=\"hidePassword() ? 'password' : 'text'\" placeholder=\"Placeholder\"\r\n formControlName=\"password\" aria-label=\"Password\" />\r\n <button mat-icon-button matSuffix (click)=\"hidePassword.set(!hidePassword())\" type=\"button\"\r\n style=\"margin-right: 0.25rem;\">\r\n <mat-icon>{{ hidePassword() ? 'visibility_off' : 'visibility' }}</mat-icon>\r\n </button>\r\n <mat-error align=\"start\">Password Required</mat-error>\r\n </mat-form-field>\r\n </mat-card-content>\r\n <button mat-flat-button class=\"login-button\" type=\"submit\" [disabled]=\"loading() || loginForm.invalid\">\r\n <ng-rhombus-loading-container [loading]=\"loading()\" [size]=\"20\">\r\n Login\r\n </ng-rhombus-loading-container>\r\n </button>\r\n </form>\r\n </mat-card>\r\n</div>", styles: ["mat-card{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.login-button{margin:8px 16px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i2$1.MatCardTitleGroup, selector: "mat-card-title-group" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: NgRhombusLoadingContainerComponent, selector: "ng-rhombus-loading-container", inputs: ["loading", "size"] }] }); }
|
|
331
331
|
}
|
|
332
332
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusLoginComponent, decorators: [{
|
|
333
333
|
type: Component,
|
|
334
334
|
args: [{ selector: 'ng-rhombus-login', imports: [ReactiveFormsModule, MatButtonModule, MatCardModule, MatFormFieldModule, MatIconModule, MatInputModule, NgRhombusLoadingContainerComponent], template: "<div class=\"flex min-h-screen items-center justify-center bg-background\">\r\n <mat-card class=\"w-full max-w-[400px] p-10\">\r\n <mat-card-header>\r\n <mat-card-title-group>\r\n <mat-card-title>{{ title() }}</mat-card-title>\r\n <mat-card-subtitle>Administration</mat-card-subtitle>\r\n </mat-card-title-group>\r\n\r\n </mat-card-header>\r\n <form class=\"flex flex-col\" novalidate [formGroup]=\"loginForm\" (ngSubmit)=\"onSubmitForm()\">\r\n <mat-card-content>\r\n <mat-form-field class=\"w-full flex\">\r\n <mat-label>Email Address</mat-label>\r\n <input matInput placeholder=\"Placeholder\" formControlName=\"email\" aria-label=\"Email Address\" />\r\n <mat-icon matSuffix>email</mat-icon>\r\n <mat-error align=\"start\">Email Address Required</mat-error>\r\n </mat-form-field>\r\n <mat-form-field class=\"w-full flex\">\r\n <mat-label>Password</mat-label>\r\n <input matInput [type]=\"hidePassword() ? 'password' : 'text'\" placeholder=\"Placeholder\"\r\n formControlName=\"password\" aria-label=\"Password\" />\r\n <button mat-icon-button matSuffix (click)=\"hidePassword.set(!hidePassword())\" type=\"button\"\r\n style=\"margin-right: 0.25rem;\">\r\n <mat-icon>{{ hidePassword() ? 'visibility_off' : 'visibility' }}</mat-icon>\r\n </button>\r\n <mat-error align=\"start\">Password Required</mat-error>\r\n </mat-form-field>\r\n </mat-card-content>\r\n <button mat-flat-button class=\"login-button\" type=\"submit\" [disabled]=\"loading() || loginForm.invalid\">\r\n <ng-rhombus-loading-container [loading]=\"loading()\" [size]=\"20\">\r\n Login\r\n </ng-rhombus-loading-container>\r\n </button>\r\n </form>\r\n </mat-card>\r\n</div>", styles: ["mat-card{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.login-button{margin:8px 16px}\n"] }]
|
|
335
|
-
}], ctorParameters: () => [{ type:
|
|
335
|
+
}], ctorParameters: () => [{ type: i1$5.FormBuilder }, { type: i1.Router }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }] } });
|
|
336
336
|
|
|
337
337
|
class NgRhombusSpinnerComponent {
|
|
338
338
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -349,11 +349,11 @@ class NgRhombusPageComponent {
|
|
|
349
349
|
this.backLink = input(null, ...(ngDevMode ? [{ debugName: "backLink" }] : [])); // optional back link (shows arrow_back when set)
|
|
350
350
|
}
|
|
351
351
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
352
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusPageComponent, isStandalone: true, selector: "ng-rhombus-page", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, backLink: { classPropertyName: "backLink", publicName: "backLink", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"page\">\r\n <mat-toolbar class=\"toolbar\"
|
|
352
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusPageComponent, isStandalone: true, selector: "ng-rhombus-page", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, backLink: { classPropertyName: "backLink", publicName: "backLink", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"page flex flex-col h-full\">\r\n <mat-toolbar class=\"toolbar\">\r\n @if (backLink()) {\r\n <button matIconButton [routerLink]=\"backLink()\" aria-label=\"Back\" class=\"back-button\">\r\n <mat-icon>arrow_back</mat-icon>\r\n </button>\r\n }\r\n <span>{{ title() }}</span>\r\n </mat-toolbar>\r\n\r\n <div class=\"content\">\r\n <ng-content></ng-content>\r\n </div>\r\n <mat-toolbar class=\"mt-6 flex justify-center\">\r\n <span class=\"title\">© 2026 - Powered By Rhombus</span>\r\n </mat-toolbar>\r\n\r\n\r\n</div>", styles: [":host{display:flex;flex-direction:column}.page{display:flex;flex-direction:column;margin:12px auto;width:min(100% - 24px,600px)}.content{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}:host(.no-elevation) .content{box-shadow:none}.toolbar{margin-bottom:12px;--mat-toolbar-container-background-color: var(--mat-sys-primary);--mat-toolbar-container-text-color: var(--mat-sys-on-primary);--mat-icon-button-icon-color: var(--mat-sys-on-primary)}.back-button{margin-right:8px}.title{font-size:14px}.content{margin-bottom:12px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
353
353
|
}
|
|
354
354
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusPageComponent, decorators: [{
|
|
355
355
|
type: Component,
|
|
356
|
-
args: [{ selector: 'ng-rhombus-page', imports: [MatButtonModule, MatToolbarModule, MatIconModule, RouterModule], template: "<div class=\"page\">\r\n <mat-toolbar class=\"toolbar\"
|
|
356
|
+
args: [{ selector: 'ng-rhombus-page', imports: [MatButtonModule, MatToolbarModule, MatIconModule, RouterModule], template: "<div class=\"page flex flex-col h-full\">\r\n <mat-toolbar class=\"toolbar\">\r\n @if (backLink()) {\r\n <button matIconButton [routerLink]=\"backLink()\" aria-label=\"Back\" class=\"back-button\">\r\n <mat-icon>arrow_back</mat-icon>\r\n </button>\r\n }\r\n <span>{{ title() }}</span>\r\n </mat-toolbar>\r\n\r\n <div class=\"content\">\r\n <ng-content></ng-content>\r\n </div>\r\n <mat-toolbar class=\"mt-6 flex justify-center\">\r\n <span class=\"title\">© 2026 - Powered By Rhombus</span>\r\n </mat-toolbar>\r\n\r\n\r\n</div>", styles: [":host{display:flex;flex-direction:column}.page{display:flex;flex-direction:column;margin:12px auto;width:min(100% - 24px,600px)}.content{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}:host(.no-elevation) .content{box-shadow:none}.toolbar{margin-bottom:12px;--mat-toolbar-container-background-color: var(--mat-sys-primary);--mat-toolbar-container-text-color: var(--mat-sys-on-primary);--mat-icon-button-icon-color: var(--mat-sys-on-primary)}.back-button{margin-right:8px}.title{font-size:14px}.content{margin-bottom:12px}\n"] }]
|
|
357
357
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], backLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLink", required: false }] }] } });
|
|
358
358
|
|
|
359
359
|
/*
|
|
@@ -532,7 +532,7 @@ class NgRhombusBlogTableComponent {
|
|
|
532
532
|
this.blogService = inject(NgRhombusBlogService);
|
|
533
533
|
this.dialog = inject(MatDialog);
|
|
534
534
|
this.dataSource = input([], ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
|
|
535
|
-
this.displayedColumns = ['
|
|
535
|
+
this.displayedColumns = ['title', 'description', 'timestamp', 'actions'];
|
|
536
536
|
}
|
|
537
537
|
goToBlogPost(id) {
|
|
538
538
|
this.editEvent.emit(id);
|
|
@@ -541,11 +541,11 @@ class NgRhombusBlogTableComponent {
|
|
|
541
541
|
this.deleteEvent.emit(blogPost);
|
|
542
542
|
}
|
|
543
543
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
544
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusBlogTableComponent, isStandalone: true, selector: "ng-rhombus-blog-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editEvent: "editEvent", deleteEvent: "deleteEvent" }, ngImport: i0, template: "@if (dataSource().length > 0) {\r\n<table mat-table [dataSource]=\"dataSource()\" class=\"
|
|
544
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusBlogTableComponent, isStandalone: true, selector: "ng-rhombus-blog-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editEvent: "editEvent", deleteEvent: "deleteEvent" }, ngImport: i0, template: "@if (dataSource().length > 0) {\r\n<table mat-table [dataSource]=\"dataSource()\" class=\"mat-elevation-z1\">\r\n\r\n\t<!-- Title Column -->\r\n\t<ng-container matColumnDef=\"title\">\r\n\t\t<th mat-header-cell *matHeaderCellDef>Title</th>\r\n\t\t<td mat-cell *matCellDef=\"let element\">{{element.title}}</td>\r\n\t</ng-container>\r\n\r\n\t<!-- Description Column -->\r\n\t<ng-container matColumnDef=\"description\">\r\n\t\t<th mat-header-cell *matHeaderCellDef>Description</th>\r\n\t\t<td mat-cell *matCellDef=\"let element\">{{element.description}}</td>\r\n\t</ng-container>\r\n\r\n\t<!-- Timestamp Column -->\r\n\t<ng-container matColumnDef=\"timestamp\">\r\n\t\t<th mat-header-cell *matHeaderCellDef>Date</th>\r\n\t\t<td mat-cell *matCellDef=\"let element\">{{ element.timestamp.toMillis() | date: 'MMMM d, y' }}</td>\r\n\t</ng-container>\r\n\r\n\t<ng-container matColumnDef=\"actions\">\r\n\t\t<th mat-header-cell *matHeaderCellDef></th>\r\n\t\t<td mat-cell *matCellDef=\"let s\">\r\n\t\t\t<button mat-icon-button (click)=\"goToBlogPost(s.id)\">\r\n\t\t\t\t<mat-icon>edit</mat-icon>\r\n\t\t\t</button>\r\n\t\t\t<button mat-icon-button (click)=\"onDeleteBlogPost(s)\">\r\n\t\t\t\t<mat-icon>delete</mat-icon>\r\n\t\t\t</button>\r\n\t\t</td>\r\n\t</ng-container>\r\n\r\n\t<tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n\t<tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n</table>\r\n} @else {\r\n<div class=\"empty-set\">\r\n\t<span>No blog posts created yet.</span>\r\n</div>\r\n\r\n}", styles: [".empty-set{margin:12px}.rhombus{overflow-y:auto}.mat-column-source,.mat-column-actions{text-align:center}.mat-column-source fa-icon,.mat-column-actions fa-icon{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: 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" }] }); }
|
|
545
545
|
}
|
|
546
546
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogTableComponent, decorators: [{
|
|
547
547
|
type: Component,
|
|
548
|
-
args: [{ selector: 'ng-rhombus-blog-table', imports: [CommonModule, MatButtonModule, MatIconModule, MatTableModule], template: "@if (dataSource().length > 0) {\r\n<table mat-table [dataSource]=\"dataSource()\" class=\"
|
|
548
|
+
args: [{ selector: 'ng-rhombus-blog-table', imports: [CommonModule, MatButtonModule, MatIconModule, MatTableModule], template: "@if (dataSource().length > 0) {\r\n<table mat-table [dataSource]=\"dataSource()\" class=\"mat-elevation-z1\">\r\n\r\n\t<!-- Title Column -->\r\n\t<ng-container matColumnDef=\"title\">\r\n\t\t<th mat-header-cell *matHeaderCellDef>Title</th>\r\n\t\t<td mat-cell *matCellDef=\"let element\">{{element.title}}</td>\r\n\t</ng-container>\r\n\r\n\t<!-- Description Column -->\r\n\t<ng-container matColumnDef=\"description\">\r\n\t\t<th mat-header-cell *matHeaderCellDef>Description</th>\r\n\t\t<td mat-cell *matCellDef=\"let element\">{{element.description}}</td>\r\n\t</ng-container>\r\n\r\n\t<!-- Timestamp Column -->\r\n\t<ng-container matColumnDef=\"timestamp\">\r\n\t\t<th mat-header-cell *matHeaderCellDef>Date</th>\r\n\t\t<td mat-cell *matCellDef=\"let element\">{{ element.timestamp.toMillis() | date: 'MMMM d, y' }}</td>\r\n\t</ng-container>\r\n\r\n\t<ng-container matColumnDef=\"actions\">\r\n\t\t<th mat-header-cell *matHeaderCellDef></th>\r\n\t\t<td mat-cell *matCellDef=\"let s\">\r\n\t\t\t<button mat-icon-button (click)=\"goToBlogPost(s.id)\">\r\n\t\t\t\t<mat-icon>edit</mat-icon>\r\n\t\t\t</button>\r\n\t\t\t<button mat-icon-button (click)=\"onDeleteBlogPost(s)\">\r\n\t\t\t\t<mat-icon>delete</mat-icon>\r\n\t\t\t</button>\r\n\t\t</td>\r\n\t</ng-container>\r\n\r\n\t<tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n\t<tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n</table>\r\n} @else {\r\n<div class=\"empty-set\">\r\n\t<span>No blog posts created yet.</span>\r\n</div>\r\n\r\n}", styles: [".empty-set{margin:12px}.rhombus{overflow-y:auto}.mat-column-source,.mat-column-actions{text-align:center}.mat-column-source fa-icon,.mat-column-actions fa-icon{display:inline-block}\n"] }]
|
|
549
549
|
}], propDecorators: { editEvent: [{
|
|
550
550
|
type: Output
|
|
551
551
|
}], deleteEvent: [{
|
|
@@ -770,7 +770,7 @@ class NgRhombusBlogAddEditComponent {
|
|
|
770
770
|
this.submitEvent.emit(submittedBlogPost);
|
|
771
771
|
}
|
|
772
772
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogAddEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
773
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: NgRhombusBlogAddEditComponent, isStandalone: true, selector: "ng-rhombus-blog-form", inputs: { blogPost: { classPropertyName: "blogPost", publicName: "blogPost", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent" }, viewQueries: [{ propertyName: "autosize", first: true, predicate: ["autosize"], descendants: true }, { propertyName: "blogPostPreview", first: true, predicate: ["blogPost"], descendants: true }], ngImport: i0, template: "<div class=\"h-full flex flex-row\">\r\n\t<div class=\"flex flex-col w-1/2 p-4\">\r\n\t\t<form novalidate class=\"h-full flex flex-col\" [formGroup]=\"blogPostForm\">\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Title</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"title\">\r\n\t\t\t</mat-form-field>\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Description</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"description\">\r\n\t\t\t</mat-form-field>\r\n\t\t\t<ng-rhombus-thumbnail-control [thumbnailSrc]=\"thumbnailSource\" [width]=\"200\" [height]=\"112\"\r\n\t\t\t\t[disabled]=\"blogPost() !== undefined\" (onFileUploaded)=\"onFileUploaded($event)\"\r\n\t\t\t\t(onFileDeleted)=\"onFileDeleted()\"></ng-rhombus-thumbnail-control>\r\n\t\t\t<mat-form-field class=\"h-full\">\r\n\t\t\t\t<mat-label>Content</mat-label>\r\n\t\t\t\t<textarea matInput required cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\r\n\t\t\t\t\tcdkAutosizeMaxRows=\"20\" formControlName=\"content\" (keyup)=\"onContentChange()\"></textarea>\r\n\t\t\t</mat-form-field>\r\n\t\t\t<div class=\"flex\">\r\n\t\t\t\t<button mat-raised-button class=\"\" (click)=\"onCancelClick()\" type=\"button\">Cancel</button>\r\n\t\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t\t<button mat-flat-button [disabled]=\"blogPostForm.invalid\" type=\"button\"\r\n\t\t\t\t\t(click)=\"onSubmit()\">Submit</button>\r\n\t\t\t</div>\r\n\t\t</form>\r\n\t</div>\r\n\r\n\t<div class=\"flex flex-col w-1/2 p-4 overflow-y-auto\">\r\n\t\t<mat-card>\r\n\t\t\t<mat-card-header>\r\n\t\t\t\t<mat-card-title>{{ blogPostForm.getRawValue().title }}</mat-card-title>\r\n\t\t\t\t<mat-card-subtitle>{{ blogPostForm.getRawValue().description }}</mat-card-subtitle>\r\n\t\t\t</mat-card-header>\r\n\t\t\t<img mat-card-image [src]=\"blogPostForm.getRawValue().thumbnail\" />\r\n\t\t\t<mat-card-content>\r\n\t\t\t\t<markdown [ngClass]=\"{ 'prose': true, 'dark:prose-invert': themeService.isDarkMode() }\"\r\n\t\t\t\t\t[data]=\"contentData()\" />\r\n\t\t\t</mat-card-content>\r\n\t\t\t<mat-card-footer>\r\n\t\t\t\t<span class=\"flex flex-row-reverse\">Doug Williamson</span>\r\n\t\t\t</mat-card-footer>\r\n\t\t</mat-card>\r\n\t</div>\r\n</div>", styles: [".mat-mdc-card-header,.mat-mdc-card-content,.mat-mdc-card-footer{padding:32px 16px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i2$1.MatCardFooter, selector: "mat-card-footer" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "directive", type: i2$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type:
|
|
773
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: NgRhombusBlogAddEditComponent, isStandalone: true, selector: "ng-rhombus-blog-form", inputs: { blogPost: { classPropertyName: "blogPost", publicName: "blogPost", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent" }, viewQueries: [{ propertyName: "autosize", first: true, predicate: ["autosize"], descendants: true }, { propertyName: "blogPostPreview", first: true, predicate: ["blogPost"], descendants: true }], ngImport: i0, template: "<div class=\"h-full flex flex-row\">\r\n\t<div class=\"flex flex-col w-1/2 p-4\">\r\n\t\t<form novalidate class=\"h-full flex flex-col\" [formGroup]=\"blogPostForm\">\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Title</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"title\">\r\n\t\t\t</mat-form-field>\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Description</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"description\">\r\n\t\t\t</mat-form-field>\r\n\t\t\t<ng-rhombus-thumbnail-control [thumbnailSrc]=\"thumbnailSource\" [width]=\"200\" [height]=\"112\"\r\n\t\t\t\t[disabled]=\"blogPost() !== undefined\" (onFileUploaded)=\"onFileUploaded($event)\"\r\n\t\t\t\t(onFileDeleted)=\"onFileDeleted()\"></ng-rhombus-thumbnail-control>\r\n\t\t\t<mat-form-field class=\"h-full\">\r\n\t\t\t\t<mat-label>Content</mat-label>\r\n\t\t\t\t<textarea matInput required cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\" cdkAutosizeMinRows=\"1\"\r\n\t\t\t\t\tcdkAutosizeMaxRows=\"20\" formControlName=\"content\" (keyup)=\"onContentChange()\"></textarea>\r\n\t\t\t</mat-form-field>\r\n\t\t\t<div class=\"flex\">\r\n\t\t\t\t<button mat-raised-button class=\"\" (click)=\"onCancelClick()\" type=\"button\">Cancel</button>\r\n\t\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t\t<button mat-flat-button [disabled]=\"blogPostForm.invalid\" type=\"button\"\r\n\t\t\t\t\t(click)=\"onSubmit()\">Submit</button>\r\n\t\t\t</div>\r\n\t\t</form>\r\n\t</div>\r\n\r\n\t<div class=\"flex flex-col w-1/2 p-4 overflow-y-auto\">\r\n\t\t<mat-card>\r\n\t\t\t<mat-card-header>\r\n\t\t\t\t<mat-card-title>{{ blogPostForm.getRawValue().title }}</mat-card-title>\r\n\t\t\t\t<mat-card-subtitle>{{ blogPostForm.getRawValue().description }}</mat-card-subtitle>\r\n\t\t\t</mat-card-header>\r\n\t\t\t<img mat-card-image [src]=\"blogPostForm.getRawValue().thumbnail\" />\r\n\t\t\t<mat-card-content>\r\n\t\t\t\t<markdown [ngClass]=\"{ 'prose': true, 'dark:prose-invert': themeService.isDarkMode() }\"\r\n\t\t\t\t\t[data]=\"contentData()\" />\r\n\t\t\t</mat-card-content>\r\n\t\t\t<mat-card-footer>\r\n\t\t\t\t<span class=\"flex flex-row-reverse\">Doug Williamson</span>\r\n\t\t\t</mat-card-footer>\r\n\t\t</mat-card>\r\n\t</div>\r\n</div>", styles: [".mat-mdc-card-header,.mat-mdc-card-content,.mat-mdc-card-footer{padding:32px 16px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i2$1.MatCardFooter, selector: "mat-card-footer" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "directive", type: i2$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "component", type: ThumbnailControlComponent, selector: "ng-rhombus-thumbnail-control", inputs: ["width", "height", "thumbnailSrc", "disabled"], outputs: ["onFileUploaded", "onFileDeleted"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }] }); }
|
|
774
774
|
}
|
|
775
775
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogAddEditComponent, decorators: [{
|
|
776
776
|
type: Component,
|
|
@@ -816,11 +816,11 @@ class NgRhombusBlogPostComponent {
|
|
|
816
816
|
}
|
|
817
817
|
}
|
|
818
818
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogPostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
819
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: NgRhombusBlogPostComponent, isStandalone: true, selector: "ng-rhombus-blog-post", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-card>\r\n\t<mat-card-header>\r\n\t\t<mat-card-title>{{ dataSource()?.title }}</mat-card-title>\r\n\t\t<mat-card-subtitle>{{ dataSource()?.description }}</mat-card-subtitle>\r\n\t</mat-card-header>\r\n\t<mat-card-content>\r\n\t\t<div class=\"flex items-center justify-between\">\r\n\t\t\t<p class=\"timestamp\">{{ dataSource()?.timestamp?.toMillis() | date: 'MMMM d, y' }}</p>\r\n\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t<button
|
|
819
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: NgRhombusBlogPostComponent, isStandalone: true, selector: "ng-rhombus-blog-post", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-card>\r\n\t<mat-card-header>\r\n\t\t<mat-card-title>{{ dataSource()?.title }}</mat-card-title>\r\n\t\t<mat-card-subtitle>{{ dataSource()?.description }}</mat-card-subtitle>\r\n\t</mat-card-header>\r\n\t<mat-card-content>\r\n\t\t<div class=\"flex items-center justify-between\">\r\n\t\t\t<p class=\"timestamp\">{{ dataSource()?.timestamp?.toMillis() | date: 'MMMM d, y' }}</p>\r\n\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t<button matIconButton [matMenuTriggerFor]=\"shareMenu\" aria-label=\"Share post\">\r\n\t\t\t\t<mat-icon>share</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\r\n\t\t<mat-menu #shareMenu=\"matMenu\">\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.twitter\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<mat-icon>open_in_new</mat-icon>\r\n\t\t\t\t<span>Share on X</span>\r\n\t\t\t</a>\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.facebook\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<mat-icon>open_in_new</mat-icon>\r\n\t\t\t\t<span>Share on Facebook</span>\r\n\t\t\t</a>\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.bluesky\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<mat-icon>open_in_new</mat-icon>\r\n\t\t\t\t<span>Share on Bluesky</span>\r\n\t\t\t</a>\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.linkedin\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<mat-icon>open_in_new</mat-icon>\r\n\t\t\t\t<span>Share on LinkedIn</span>\r\n\t\t\t</a>\r\n\t\t\t<button mat-menu-item (click)=\"copyLink()\">\r\n\t\t\t\t<mat-icon>content_copy</mat-icon>\r\n\t\t\t\t<span>Copy link</span>\r\n\t\t\t</button>\r\n\t\t</mat-menu>\r\n\t</mat-card-content>\r\n\t<img mat-card-image [src]=\"dataSource()?.thumbnail\" />\r\n\t<mat-card-content class=\"content\">\r\n\t\t<markdown [ngClass]=\"{ 'prose': true, 'dark:prose-invert': themeService.isDarkMode() }\"\r\n\t\t\t[data]=\"dataSource()?.content\" />\r\n\t</mat-card-content>\r\n\t<mat-card-footer>\r\n\t\t<span class=\"flex flex-row-reverse\">Doug Williamson</span>\r\n\t</mat-card-footer>\r\n</mat-card>", styles: [".card-image{--mat-card-elevated-container-shape: var(--mat-sys-shape-medium)}.mat-mdc-card-header{padding:32px 32px 16px}.mat-mdc-card-footer,.mat-mdc-card-content{padding:0 32px 32px}.content{padding:32px}.mat-mdc-card-title{margin-bottom:12px}.mat-mdc-card{border-radius:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i2$1.MatCardFooter, selector: "mat-card-footer" }, { kind: "component", type: i2$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$1.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "directive", type: i2$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
|
|
820
820
|
}
|
|
821
821
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusBlogPostComponent, decorators: [{
|
|
822
822
|
type: Component,
|
|
823
|
-
args: [{ selector: 'ng-rhombus-blog-post', imports: [DatePipe, NgClass, MarkdownComponent, MatCardModule, MatMenuModule, MatIconModule, MatButtonModule], template: "<mat-card>\r\n\t<mat-card-header>\r\n\t\t<mat-card-title>{{ dataSource()?.title }}</mat-card-title>\r\n\t\t<mat-card-subtitle>{{ dataSource()?.description }}</mat-card-subtitle>\r\n\t</mat-card-header>\r\n\t<mat-card-content>\r\n\t\t<div class=\"flex items-center justify-between\">\r\n\t\t\t<p class=\"timestamp\">{{ dataSource()?.timestamp?.toMillis() | date: 'MMMM d, y' }}</p>\r\n\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t<button
|
|
823
|
+
args: [{ selector: 'ng-rhombus-blog-post', imports: [DatePipe, NgClass, MarkdownComponent, MatCardModule, MatMenuModule, MatIconModule, MatButtonModule], template: "<mat-card>\r\n\t<mat-card-header>\r\n\t\t<mat-card-title>{{ dataSource()?.title }}</mat-card-title>\r\n\t\t<mat-card-subtitle>{{ dataSource()?.description }}</mat-card-subtitle>\r\n\t</mat-card-header>\r\n\t<mat-card-content>\r\n\t\t<div class=\"flex items-center justify-between\">\r\n\t\t\t<p class=\"timestamp\">{{ dataSource()?.timestamp?.toMillis() | date: 'MMMM d, y' }}</p>\r\n\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t<button matIconButton [matMenuTriggerFor]=\"shareMenu\" aria-label=\"Share post\">\r\n\t\t\t\t<mat-icon>share</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\r\n\t\t<mat-menu #shareMenu=\"matMenu\">\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.twitter\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<mat-icon>open_in_new</mat-icon>\r\n\t\t\t\t<span>Share on X</span>\r\n\t\t\t</a>\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.facebook\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<mat-icon>open_in_new</mat-icon>\r\n\t\t\t\t<span>Share on Facebook</span>\r\n\t\t\t</a>\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.bluesky\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<mat-icon>open_in_new</mat-icon>\r\n\t\t\t\t<span>Share on Bluesky</span>\r\n\t\t\t</a>\r\n\t\t\t<a mat-menu-item [href]=\"shareLinks.linkedin\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t<mat-icon>open_in_new</mat-icon>\r\n\t\t\t\t<span>Share on LinkedIn</span>\r\n\t\t\t</a>\r\n\t\t\t<button mat-menu-item (click)=\"copyLink()\">\r\n\t\t\t\t<mat-icon>content_copy</mat-icon>\r\n\t\t\t\t<span>Copy link</span>\r\n\t\t\t</button>\r\n\t\t</mat-menu>\r\n\t</mat-card-content>\r\n\t<img mat-card-image [src]=\"dataSource()?.thumbnail\" />\r\n\t<mat-card-content class=\"content\">\r\n\t\t<markdown [ngClass]=\"{ 'prose': true, 'dark:prose-invert': themeService.isDarkMode() }\"\r\n\t\t\t[data]=\"dataSource()?.content\" />\r\n\t</mat-card-content>\r\n\t<mat-card-footer>\r\n\t\t<span class=\"flex flex-row-reverse\">Doug Williamson</span>\r\n\t</mat-card-footer>\r\n</mat-card>", styles: [".card-image{--mat-card-elevated-container-shape: var(--mat-sys-shape-medium)}.mat-mdc-card-header{padding:32px 32px 16px}.mat-mdc-card-footer,.mat-mdc-card-content{padding:0 32px 32px}.content{padding:32px}.mat-mdc-card-title{margin-bottom:12px}.mat-mdc-card{border-radius:0}\n"] }]
|
|
824
824
|
}], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }] } });
|
|
825
825
|
|
|
826
826
|
class NgRhombusBlogDeletePostComponent {
|
|
@@ -878,7 +878,7 @@ class NgRhombusHomeAdminComponent {
|
|
|
878
878
|
console.log('cancel');
|
|
879
879
|
}
|
|
880
880
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusHomeAdminComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
881
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: NgRhombusHomeAdminComponent, isStandalone: true, selector: "ng-rhombus-home-admin", inputs: { formAdminData: { classPropertyName: "formAdminData", publicName: "formAdminData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent" }, ngImport: i0, template: "<mat-toolbar class=\"header-theme\">\r\n\t<span>Admin Component</span>\r\n</mat-toolbar>\r\n<div class=\"h-full flex flex-row\">\r\n\t<div class=\"flex flex-col w-1/2 p-4\">\r\n\t\t<form novalidate class=\"h-full flex flex-col\" [formGroup]=\"homeAdminForm\">\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Title</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"title\">\r\n\t\t\t</mat-form-field>\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Description</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"description\">\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<div class=\"flex\">\r\n\t\t\t\t<button mat-raised-button class=\"\" (click)=\"onCancelClick()\" type=\"button\">Cancel</button>\r\n\t\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t\t<button mat-flat-button [disabled]=\"homeAdminForm.invalid\" type=\"button\"\r\n\t\t\t\t\t(click)=\"onSubmit()\">Submit</button>\r\n\t\t\t</div>\r\n\t\t</form>\r\n\t</div>\r\n</div>", styles: [":host{height:100%;width:100%;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.header-theme{--mat-toolbar-container-background-color: var(--mat-sys-outline);--mat-toolbar-container-text-color: var(--mat-sys-on-primary);--mat-icon-button-icon-color: var(--mat-sys-on-primary)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type:
|
|
881
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.4", type: NgRhombusHomeAdminComponent, isStandalone: true, selector: "ng-rhombus-home-admin", inputs: { formAdminData: { classPropertyName: "formAdminData", publicName: "formAdminData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancelEvent: "cancelEvent", submitEvent: "submitEvent" }, ngImport: i0, template: "<mat-toolbar class=\"header-theme\">\r\n\t<span>Admin Component</span>\r\n</mat-toolbar>\r\n<div class=\"h-full flex flex-row\">\r\n\t<div class=\"flex flex-col w-1/2 p-4\">\r\n\t\t<form novalidate class=\"h-full flex flex-col\" [formGroup]=\"homeAdminForm\">\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Title</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"title\">\r\n\t\t\t</mat-form-field>\r\n\t\t\t<mat-form-field>\r\n\t\t\t\t<mat-label>Description</mat-label>\r\n\t\t\t\t<input matInput placeholder=\"Placeholder\" formControlName=\"description\">\r\n\t\t\t</mat-form-field>\r\n\r\n\t\t\t<div class=\"flex\">\r\n\t\t\t\t<button mat-raised-button class=\"\" (click)=\"onCancelClick()\" type=\"button\">Cancel</button>\r\n\t\t\t\t<div class=\"flex-1\"></div>\r\n\t\t\t\t<button mat-flat-button [disabled]=\"homeAdminForm.invalid\" type=\"button\"\r\n\t\t\t\t\t(click)=\"onSubmit()\">Submit</button>\r\n\t\t\t</div>\r\n\t\t</form>\r\n\t</div>\r\n</div>", styles: [":host{height:100%;width:100%;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.header-theme{--mat-toolbar-container-background-color: var(--mat-sys-outline);--mat-toolbar-container-text-color: var(--mat-sys-on-primary);--mat-icon-button-icon-color: var(--mat-sys-on-primary)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
|
|
882
882
|
}
|
|
883
883
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusHomeAdminComponent, decorators: [{
|
|
884
884
|
type: Component,
|
|
@@ -893,6 +893,8 @@ var SocialsSource;
|
|
|
893
893
|
SocialsSource["Instagram"] = "Instagram";
|
|
894
894
|
SocialsSource["TikTok"] = "TikTok";
|
|
895
895
|
SocialsSource["Bluesky"] = "Bluesky";
|
|
896
|
+
SocialsSource["GitHub"] = "GitHub";
|
|
897
|
+
SocialsSource["LinkedIn"] = "LinkedIn";
|
|
896
898
|
})(SocialsSource || (SocialsSource = {}));
|
|
897
899
|
class NgRhombusSocialsService {
|
|
898
900
|
constructor() {
|
|
@@ -945,6 +947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImpor
|
|
|
945
947
|
|
|
946
948
|
class NgRhombusSocialsListComponent {
|
|
947
949
|
constructor() {
|
|
950
|
+
this.wrapperService = inject(WrapperService);
|
|
948
951
|
this.socials = input([], ...(ngDevMode ? [{ debugName: "socials" }] : []));
|
|
949
952
|
}
|
|
950
953
|
iconFor(source) {
|
|
@@ -954,72 +957,136 @@ class NgRhombusSocialsListComponent {
|
|
|
954
957
|
case SocialsSource.Twitch: return faTwitch;
|
|
955
958
|
case SocialsSource.TikTok: return faTiktok;
|
|
956
959
|
case SocialsSource.Bluesky: return faBluesky; // no official brand, fallback
|
|
960
|
+
case SocialsSource.GitHub: return faGithub;
|
|
961
|
+
case SocialsSource.LinkedIn: return faLinkedin;
|
|
957
962
|
default: return faLink;
|
|
958
963
|
}
|
|
959
964
|
}
|
|
960
965
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSocialsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
961
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusSocialsListComponent, isStandalone: true, selector: "ng-rhombus-socials-list", inputs: { socials: { classPropertyName: "socials", publicName: "socials", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if ((socials()).length === 0) {\r\n<p class=\"m-6 justify-self-center\">No socials found.</p>\r\n} @else {\r\n<div class=\"toolbar-list\">\r\n @for (s of socials(); track s.id) {\r\n <a [attr.href]=\"s.url || null\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block\"\r\n [attr.aria-label]=\"'Open ' + s.source + ' link'\">\r\n <mat-toolbar class=\"social-toolbar actionable\" color=\"primary\">\r\n <fa-icon [icon]=\"iconFor(s.source)\" class=\"fa-icon\"></fa-icon>\r\n <span class=\"center\">{{ s.source }}</span>\r\n @if (s.url) {\r\n <mat-icon class=\"right\">
|
|
966
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusSocialsListComponent, isStandalone: true, selector: "ng-rhombus-socials-list", inputs: { socials: { classPropertyName: "socials", publicName: "socials", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if ((socials()).length === 0) {\r\n<p class=\"m-6 justify-self-center\">No socials found.</p>\r\n} @else {\r\n<div class=\"toolbar-list\">\r\n @for (s of socials(); track s.id) {\r\n <a [attr.href]=\"s.url || null\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block\"\r\n [attr.aria-label]=\"'Open ' + s.source + ' link'\">\r\n <mat-toolbar class=\"social-toolbar actionable\" color=\"primary\">\r\n <fa-icon [icon]=\"iconFor(s.source)\" class=\"fa-icon left\"></fa-icon>\r\n <span class=\"center\">{{ s.source }}</span>\r\n @if (s.url) {\r\n <button mat-icon-button class=\"right\" aria-label=\"Copy link\">\r\n <mat-icon>content_copy</mat-icon>\r\n </button>\r\n }\r\n </mat-toolbar>\r\n </a>\r\n }\r\n</div>\r\n}", styles: [".social-toolbar{--mat-toolbar-container-background-color: var(--mat-sys-surface);--mat-toolbar-container-text-color: var(--mat-sys-on-surface);--mat-icon-button-icon-color: var(--mat-sys-on-surface);display:grid;grid-template-columns:auto 1fr auto;align-items:center;min-height:48px;width:100%;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}@media(prefers-color-scheme:light){:host{--mat-list-list-item-leading-icon-color: var(--mat-sys-primary);--mat-list-list-item-label-text-color: var(--mat-sys-primary)}}.toolbar-list{display:grid;gap:12px}.actionable{cursor:pointer;transition:background-color .14s ease,box-shadow .14s ease}.actionable:hover{filter:brightness(1.08);box-shadow:0 2px 6px #00000026}.actionable:focus{outline:2px solid rgba(255,255,255,.8);outline-offset:2px}.left{margin-left:64px}.center{text-align:center}.right{margin-right:64px}\n"], dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$6.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2$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"] }] }); }
|
|
962
967
|
}
|
|
963
968
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSocialsListComponent, decorators: [{
|
|
964
969
|
type: Component,
|
|
965
|
-
args: [{ selector: 'ng-rhombus-socials-list', standalone: true, imports: [FontAwesomeModule, MatToolbarModule, MatIconModule], template: "@if ((socials()).length === 0) {\r\n<p class=\"m-6 justify-self-center\">No socials found.</p>\r\n} @else {\r\n<div class=\"toolbar-list\">\r\n @for (s of socials(); track s.id) {\r\n <a [attr.href]=\"s.url || null\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block\"\r\n [attr.aria-label]=\"'Open ' + s.source + ' link'\">\r\n <mat-toolbar class=\"social-toolbar actionable\" color=\"primary\">\r\n <fa-icon [icon]=\"iconFor(s.source)\" class=\"fa-icon\"></fa-icon>\r\n <span class=\"center\">{{ s.source }}</span>\r\n @if (s.url) {\r\n <mat-icon class=\"right\">
|
|
970
|
+
args: [{ selector: 'ng-rhombus-socials-list', standalone: true, imports: [FontAwesomeModule, MatToolbarModule, MatIconModule], template: "@if ((socials()).length === 0) {\r\n<p class=\"m-6 justify-self-center\">No socials found.</p>\r\n} @else {\r\n<div class=\"toolbar-list\">\r\n @for (s of socials(); track s.id) {\r\n <a [attr.href]=\"s.url || null\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block\"\r\n [attr.aria-label]=\"'Open ' + s.source + ' link'\">\r\n <mat-toolbar class=\"social-toolbar actionable\" color=\"primary\">\r\n <fa-icon [icon]=\"iconFor(s.source)\" class=\"fa-icon left\"></fa-icon>\r\n <span class=\"center\">{{ s.source }}</span>\r\n @if (s.url) {\r\n <button mat-icon-button class=\"right\" aria-label=\"Copy link\">\r\n <mat-icon>content_copy</mat-icon>\r\n </button>\r\n }\r\n </mat-toolbar>\r\n </a>\r\n }\r\n</div>\r\n}", styles: [".social-toolbar{--mat-toolbar-container-background-color: var(--mat-sys-surface);--mat-toolbar-container-text-color: var(--mat-sys-on-surface);--mat-icon-button-icon-color: var(--mat-sys-on-surface);display:grid;grid-template-columns:auto 1fr auto;align-items:center;min-height:48px;width:100%;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}@media(prefers-color-scheme:light){:host{--mat-list-list-item-leading-icon-color: var(--mat-sys-primary);--mat-list-list-item-label-text-color: var(--mat-sys-primary)}}.toolbar-list{display:grid;gap:12px}.actionable{cursor:pointer;transition:background-color .14s ease,box-shadow .14s ease}.actionable:hover{filter:brightness(1.08);box-shadow:0 2px 6px #00000026}.actionable:focus{outline:2px solid rgba(255,255,255,.8);outline-offset:2px}.left{margin-left:64px}.center{text-align:center}.right{margin-right:64px}\n"] }]
|
|
966
971
|
}], propDecorators: { socials: [{ type: i0.Input, args: [{ isSignal: true, alias: "socials", required: false }] }] } });
|
|
967
972
|
|
|
968
|
-
class
|
|
973
|
+
class NgRhombusSocialEditDialogComponent {
|
|
969
974
|
constructor() {
|
|
970
|
-
this.
|
|
971
|
-
this.
|
|
972
|
-
|
|
975
|
+
this.fb = inject(FormBuilder);
|
|
976
|
+
this.dialogRef = inject(MatDialogRef);
|
|
977
|
+
this.data = inject(MAT_DIALOG_DATA);
|
|
973
978
|
this.socialTypeOptions = [
|
|
974
979
|
{ label: 'Twitch', value: SocialsSource.Twitch },
|
|
975
980
|
{ label: 'YouTube', value: SocialsSource.YouTube },
|
|
976
981
|
{ label: 'Instagram', value: SocialsSource.Instagram },
|
|
977
982
|
{ label: 'TikTok', value: SocialsSource.TikTok },
|
|
978
|
-
{ label: 'Bluesky', value: SocialsSource.Bluesky }
|
|
983
|
+
{ label: 'Bluesky', value: SocialsSource.Bluesky },
|
|
984
|
+
{ label: 'GitHub', value: SocialsSource.GitHub },
|
|
985
|
+
{ label: 'LinkedIn', value: SocialsSource.LinkedIn }
|
|
979
986
|
];
|
|
980
|
-
this.fb = inject(FormBuilder);
|
|
981
|
-
this.svc = inject(NgRhombusSocialsService);
|
|
982
|
-
// simple inline form state
|
|
983
|
-
this.editingId = signal(null, ...(ngDevMode ? [{ debugName: "editingId" }] : []));
|
|
984
987
|
this.form = this.fb.group({
|
|
985
|
-
source: this.fb.control(null, { validators: [Validators.required] }),
|
|
986
|
-
url: this.fb.control('', { nonNullable: true, validators: [Validators.required] })
|
|
988
|
+
source: this.fb.control(this.data.social?.source ?? null, { validators: [Validators.required] }),
|
|
989
|
+
url: this.fb.control(this.data.social?.url ?? '', { nonNullable: true, validators: [Validators.required] })
|
|
987
990
|
});
|
|
988
991
|
}
|
|
989
|
-
|
|
990
|
-
this.editingId.set('');
|
|
991
|
-
this.form.reset({ source: null, url: '' });
|
|
992
|
-
}
|
|
993
|
-
startEdit(row) {
|
|
994
|
-
this.editingId.set(row.id);
|
|
995
|
-
this.form.reset({ source: row.source, url: row.url });
|
|
996
|
-
}
|
|
997
|
-
cancelEdit() {
|
|
998
|
-
this.editingId.set(null);
|
|
999
|
-
this.form.reset({ source: null, url: '' });
|
|
1000
|
-
}
|
|
1001
|
-
async save() {
|
|
1002
|
-
const id = this.editingId();
|
|
992
|
+
save() {
|
|
1003
993
|
const { source, url } = this.form.getRawValue();
|
|
1004
994
|
if (!source || !url)
|
|
1005
995
|
return;
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
996
|
+
this.dialogRef.close({ source, url });
|
|
997
|
+
}
|
|
998
|
+
cancel() {
|
|
999
|
+
this.dialogRef.close();
|
|
1000
|
+
}
|
|
1001
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSocialEditDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1002
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusSocialEditDialogComponent, isStandalone: true, selector: "ng-rhombus-social-edit-dialog", ngImport: i0, template: "<h2 mat-dialog-title>\r\n {{ data.social ? 'Edit Social' : 'Add Social' }}\r\n</h2>\r\n\r\n<form [formGroup]=\"form\" (ngSubmit)=\"save()\">\r\n <mat-dialog-content>\r\n <mat-form-field appearance=\"fill\" style=\"width: 100%\">\r\n <mat-label>Source</mat-label>\r\n <mat-select formControlName=\"source\">\r\n @for (opt of socialTypeOptions; track opt.value) {\r\n <mat-option [value]=\"opt.value\">\r\n {{ opt.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field appearance=\"fill\" style=\"width: 100%\">\r\n <mat-label>URL</mat-label>\r\n <input matInput formControlName=\"url\" />\r\n </mat-form-field>\r\n </mat-dialog-content>\r\n\r\n <mat-dialog-actions align=\"end\">\r\n <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\r\n <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"form.invalid\">\r\n Save\r\n </button>\r\n </mat-dialog-actions>\r\n</form>", dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
|
|
1003
|
+
}
|
|
1004
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSocialEditDialogComponent, decorators: [{
|
|
1005
|
+
type: Component,
|
|
1006
|
+
args: [{ selector: 'ng-rhombus-social-edit-dialog', standalone: true, imports: [MatDialogModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatButtonModule], template: "<h2 mat-dialog-title>\r\n {{ data.social ? 'Edit Social' : 'Add Social' }}\r\n</h2>\r\n\r\n<form [formGroup]=\"form\" (ngSubmit)=\"save()\">\r\n <mat-dialog-content>\r\n <mat-form-field appearance=\"fill\" style=\"width: 100%\">\r\n <mat-label>Source</mat-label>\r\n <mat-select formControlName=\"source\">\r\n @for (opt of socialTypeOptions; track opt.value) {\r\n <mat-option [value]=\"opt.value\">\r\n {{ opt.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <mat-form-field appearance=\"fill\" style=\"width: 100%\">\r\n <mat-label>URL</mat-label>\r\n <input matInput formControlName=\"url\" />\r\n </mat-form-field>\r\n </mat-dialog-content>\r\n\r\n <mat-dialog-actions align=\"end\">\r\n <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\r\n <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"form.invalid\">\r\n Save\r\n </button>\r\n </mat-dialog-actions>\r\n</form>" }]
|
|
1007
|
+
}] });
|
|
1008
|
+
|
|
1009
|
+
class NgRhombusSocialDeleteDialogComponent {
|
|
1010
|
+
constructor() {
|
|
1011
|
+
this.data = inject(MAT_DIALOG_DATA);
|
|
1012
|
+
this.dialogRef = inject(MatDialogRef);
|
|
1013
|
+
}
|
|
1014
|
+
cancel() {
|
|
1015
|
+
this.dialogRef.close(false);
|
|
1016
|
+
}
|
|
1017
|
+
confirm() {
|
|
1018
|
+
this.dialogRef.close(true);
|
|
1019
|
+
}
|
|
1020
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSocialDeleteDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1021
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.4", type: NgRhombusSocialDeleteDialogComponent, isStandalone: true, selector: "ng-rhombus-social-delete-dialog", ngImport: i0, template: "<h2 mat-dialog-title>Delete Social</h2>\r\n\r\n<mat-dialog-content>\r\n Are you sure you want to delete this social?\r\n <br />\r\n <strong>{{ data.social.source }} - {{ data.social.url }}</strong>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions align=\"end\">\r\n <button mat-button (click)=\"cancel()\">Cancel</button>\r\n <button mat-raised-button color=\"warn\" (click)=\"confirm()\">Delete</button>\r\n</mat-dialog-actions>\r\n", dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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"] }] }); }
|
|
1022
|
+
}
|
|
1023
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSocialDeleteDialogComponent, decorators: [{
|
|
1024
|
+
type: Component,
|
|
1025
|
+
args: [{ selector: 'ng-rhombus-social-delete-dialog', standalone: true, imports: [MatDialogModule, MatButtonModule], template: "<h2 mat-dialog-title>Delete Social</h2>\r\n\r\n<mat-dialog-content>\r\n Are you sure you want to delete this social?\r\n <br />\r\n <strong>{{ data.social.source }} - {{ data.social.url }}</strong>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions align=\"end\">\r\n <button mat-button (click)=\"cancel()\">Cancel</button>\r\n <button mat-raised-button color=\"warn\" (click)=\"confirm()\">Delete</button>\r\n</mat-dialog-actions>\r\n" }]
|
|
1026
|
+
}] });
|
|
1027
|
+
|
|
1028
|
+
class NgRhombusSocialsTableComponent {
|
|
1029
|
+
constructor() {
|
|
1030
|
+
this.socials = input([], ...(ngDevMode ? [{ debugName: "socials" }] : []));
|
|
1031
|
+
this.displayedColumns = ['source', 'url', 'actions'];
|
|
1032
|
+
this.socialTypeOptions = [
|
|
1033
|
+
{ label: 'Twitch', value: SocialsSource.Twitch },
|
|
1034
|
+
{ label: 'YouTube', value: SocialsSource.YouTube },
|
|
1035
|
+
{ label: 'Instagram', value: SocialsSource.Instagram },
|
|
1036
|
+
{ label: 'TikTok', value: SocialsSource.TikTok },
|
|
1037
|
+
{ label: 'Bluesky', value: SocialsSource.Bluesky },
|
|
1038
|
+
{ label: 'GitHub', value: SocialsSource.GitHub },
|
|
1039
|
+
{ label: 'LinkedIn', value: SocialsSource.LinkedIn }
|
|
1040
|
+
];
|
|
1041
|
+
this.svc = inject(NgRhombusSocialsService);
|
|
1042
|
+
this.dialog = inject(MatDialog);
|
|
1043
|
+
}
|
|
1044
|
+
iconFor(source) {
|
|
1045
|
+
switch (source) {
|
|
1046
|
+
case SocialsSource.YouTube: return faYoutube;
|
|
1047
|
+
case SocialsSource.Instagram: return faInstagram;
|
|
1048
|
+
case SocialsSource.Twitch: return faTwitch;
|
|
1049
|
+
case SocialsSource.TikTok: return faTiktok;
|
|
1050
|
+
case SocialsSource.Bluesky: return faBluesky; // no official brand, fallback
|
|
1051
|
+
case SocialsSource.GitHub: return faGithub;
|
|
1052
|
+
case SocialsSource.LinkedIn: return faLinkedin;
|
|
1053
|
+
default: return faLink;
|
|
1011
1054
|
}
|
|
1012
|
-
|
|
1055
|
+
}
|
|
1056
|
+
// called from parent "Add New" button or row action
|
|
1057
|
+
async startCreate() {
|
|
1058
|
+
const dialogRef = this.dialog.open(NgRhombusSocialEditDialogComponent, {
|
|
1059
|
+
data: { social: null },
|
|
1060
|
+
});
|
|
1061
|
+
const result = await firstValueFrom(dialogRef.afterClosed());
|
|
1062
|
+
if (!result)
|
|
1063
|
+
return;
|
|
1064
|
+
await this.svc.create({ source: result.source, url: result.url });
|
|
1065
|
+
}
|
|
1066
|
+
async startEdit(row) {
|
|
1067
|
+
const dialogRef = this.dialog.open(NgRhombusSocialEditDialogComponent, {
|
|
1068
|
+
data: { social: row },
|
|
1069
|
+
});
|
|
1070
|
+
const result = await firstValueFrom(dialogRef.afterClosed());
|
|
1071
|
+
if (!result)
|
|
1072
|
+
return;
|
|
1073
|
+
await this.svc.update(row.id, { source: result.source, url: result.url });
|
|
1013
1074
|
}
|
|
1014
1075
|
async delete(row) {
|
|
1076
|
+
const dialogRef = this.dialog.open(NgRhombusSocialDeleteDialogComponent, {
|
|
1077
|
+
data: { social: row },
|
|
1078
|
+
});
|
|
1079
|
+
const confirmed = await firstValueFrom(dialogRef.afterClosed());
|
|
1080
|
+
if (!confirmed)
|
|
1081
|
+
return;
|
|
1015
1082
|
await this.svc.remove(row.id);
|
|
1016
1083
|
}
|
|
1017
1084
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSocialsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1018
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusSocialsTableComponent, isStandalone: true, selector: "ng-rhombus-socials-table", inputs: { socials: { classPropertyName: "socials", publicName: "socials", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<
|
|
1085
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: NgRhombusSocialsTableComponent, isStandalone: true, selector: "ng-rhombus-socials-table", inputs: { socials: { classPropertyName: "socials", publicName: "socials", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<table mat-table [dataSource]=\"socials()\" class=\"mat-elevation-z1\">\r\n\r\n <ng-container matColumnDef=\"source\">\r\n <th mat-header-cell *matHeaderCellDef>Source</th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <!-- replace text with icon -->\r\n <fa-icon [icon]=\"iconFor(row.source)\" class=\"fa-icon left\"></fa-icon>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"url\">\r\n <th mat-header-cell *matHeaderCellDef>URL</th>\r\n <td mat-cell *matCellDef=\"let s\">\r\n <a [href]=\"s.url\" target=\"_blank\" rel=\"noopener\">{{ s.url }}</a>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"actions\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let s\">\r\n <button mat-icon-button color=\"primary\" (click)=\"startEdit(s)\"><mat-icon>edit</mat-icon></button>\r\n <button mat-icon-button color=\"warn\" (click)=\"delete(s)\"><mat-icon>delete</mat-icon></button>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n</table>\r\n\r\n\r\n@if ((socials()).length === 0) {\r\n<p>No socials found.</p>\r\n}", styles: [".full-width{width:100%}.mat-column-source,.mat-column-actions{text-align:center}.mat-column-source fa-icon,.mat-column-actions fa-icon{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$6.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }] }); }
|
|
1019
1086
|
}
|
|
1020
1087
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: NgRhombusSocialsTableComponent, decorators: [{
|
|
1021
1088
|
type: Component,
|
|
1022
|
-
args: [{ selector: 'ng-rhombus-socials-table', standalone: true, imports: [MatTableModule, MatButtonModule, MatSelectModule, MatIconModule,
|
|
1089
|
+
args: [{ selector: 'ng-rhombus-socials-table', standalone: true, imports: [FontAwesomeModule, MatTableModule, MatButtonModule, MatSelectModule, MatIconModule, MatFormFieldModule, MatInputModule], template: "<table mat-table [dataSource]=\"socials()\" class=\"mat-elevation-z1\">\r\n\r\n <ng-container matColumnDef=\"source\">\r\n <th mat-header-cell *matHeaderCellDef>Source</th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <!-- replace text with icon -->\r\n <fa-icon [icon]=\"iconFor(row.source)\" class=\"fa-icon left\"></fa-icon>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"url\">\r\n <th mat-header-cell *matHeaderCellDef>URL</th>\r\n <td mat-cell *matCellDef=\"let s\">\r\n <a [href]=\"s.url\" target=\"_blank\" rel=\"noopener\">{{ s.url }}</a>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"actions\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let s\">\r\n <button mat-icon-button color=\"primary\" (click)=\"startEdit(s)\"><mat-icon>edit</mat-icon></button>\r\n <button mat-icon-button color=\"warn\" (click)=\"delete(s)\"><mat-icon>delete</mat-icon></button>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n</table>\r\n\r\n\r\n@if ((socials()).length === 0) {\r\n<p>No socials found.</p>\r\n}", styles: [".full-width{width:100%}.mat-column-source,.mat-column-actions{text-align:center}.mat-column-source fa-icon,.mat-column-actions fa-icon{display:inline-block}\n"] }]
|
|
1023
1090
|
}], propDecorators: { socials: [{ type: i0.Input, args: [{ isSignal: true, alias: "socials", required: false }] }] } });
|
|
1024
1091
|
|
|
1025
1092
|
/*
|