@lukfel/ng-scaffold 20.0.10

package/src/lib/components/navbar/navbar.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { NavbarConfig } from '../../models';
+
+@Component({
+    selector: 'lf-navbar',
+    templateUrl: './navbar.component.html',
+    styleUrls: ['./navbar.component.scss'],
+    standalone: false
+})
+export class NavbarComponent {
+
+  @Input() public navbarConfig: NavbarConfig | null = null;
+  @Input() public isMobile: boolean = false;
+  @Input() public currentRoute: string;
+
+  @Output() public navbarButtonClickEvent = new EventEmitter<string>();
+
+  public buttonClicked(id: string): void {
+    if(!id) {
+      return;
+    }
+
+    this.navbarButtonClickEvent.emit(id);
+  }
+
+  public isActive(id: string): boolean {
+    if(!id || !this.currentRoute) {
+      return false;
+    }
+
+    const route: string = this.currentRoute.substring(this.currentRoute.indexOf('/') + 1);
+    return route === id;
+  }
+
+}

package/src/lib/components/scaffold/scaffold.component.html

@@ -0,0 +1,74 @@
+<!-- header-height: 64px; navbar-size: 80px; floating-button-bottom: 24px -->
+
+<div class="lf-scaffold mat-app-background mat-typography" [ngClass]="scaffoldConfig?.class">
+  <!-- loading overlay -->
+  @if (scaffoldConfig?.loading) {
+    <lf-loading-overlay></lf-loading-overlay>
+  }
+  <!-- header -->
+  <lf-header
+    [headerConfig]="headerConfig"
+    [isMobile]="isMobile"
+    [routeLoading]="routeLoading"
+    [currentRoute]="currentRoute"
+    (headerButtonClickEvent)="headerButtonClicked($event)"
+    (headerInputSubmitEvent)="headerInputSubmitted($event)"
+    (headerInputChangeEvent)="headerInputChanged($event)"></lf-header>
+  <!-- navbar -->
+  <lf-navbar
+    [navbarConfig]="navbarConfig"
+    [isMobile]="isMobile"
+    [currentRoute]="currentRoute"
+    (navbarButtonClickEvent)="navbarButtonClicked($event)"></lf-navbar>
+  <!-- content wrapper -->
+  <div
+    class="lf-content-wrapper"
+    [class.lf-show-navbar]="navbarConfig?.enable && !isMobile"
+    [class.lf-show-header]="headerConfig?.enable && !(navbarConfig?.enable && isMobile)"
+    [class.lf-show-navbar-mobile]="navbarConfig?.enable && isMobile && !headerConfig?.enable"
+    [class.lf-show-header-and-navbar-mobile]="
+      headerConfig?.enable && navbarConfig?.enable && isMobile
+    "
+    #scrollContainer
+    cdkScrollable>
+    <!-- drawer -->
+    <lf-drawer
+      [drawerConfig]="drawerConfig"
+      [drawerPortal]="drawerPortal"
+      [isMobile]="isMobile"
+      [fixedOffset]="headerConfig?.enable ? 64 : 0">
+      <!-- drawer content -->
+      <ng-content select="[drawerContent]" drawerContent></ng-content>
+      <!-- content title card -->
+      <lf-content-title-card
+        [contentTitleCardConfig]="contentTitleCardConfig"
+        [isMobile]="isMobile"
+        [routeHistory]="routeHistory"
+        (backButtonClickEvent)="backButtonClicked()"></lf-content-title-card>
+      <!-- main content -->
+      <div
+        class="lf-content"
+        [class.lf-content-mobile]="isMobile"
+        [class.lf-show-footer]="footerConfig?.enable"
+        #content>
+        <ng-content></ng-content>
+      </div>
+      <!-- footer -->
+      <lf-footer [footerConfig]="footerConfig"></lf-footer>
+    </lf-drawer>
+  </div>
+  <!-- to top button -->
+  <lf-floating-button
+    [floatingButtonConfig]="floatingButtonConfig"
+    [onTop]="scrollTopPosition <= 0"
+    [isMobile]="isMobile && navbarConfig?.enable!"
+    [bottomBarEnabled]="bottomBarConfig?.enable!"
+    (floatingButtonClickEvent)="floatingButtonClicked($event)"></lf-floating-button>
+  <!-- bottom bar -->
+  <lf-bottom-bar
+    [bottomBarConfig]="bottomBarConfig"
+    [isMobile]="isMobile && navbarConfig?.enable!"
+    [navbarEnabled]="navbarConfig?.enable!"
+    (bottomBarCloseClickEvent)="bottomBarCloseClicked($event)"
+    (bottomBarButtonClickEvent)="bottomBarButtonClicked($event)"></lf-bottom-bar>
+</div>

package/src/lib/components/scaffold/scaffold.component.scss

@@ -0,0 +1,48 @@
+@use '../../../../styles/variables' as *;
+
+.lf-scaffold {
+  height: 100vh;
+
+  .lf-content-wrapper {
+    transition: height $transition;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow-y: auto;
+
+    &.lf-show-navbar {
+      left: calc($navbar-height + (2 * $navbar-padding));
+    }
+
+    &.lf-show-header {
+      top: $header-height;
+      height: calc(100vh - $header-height);
+    }
+
+    &.lf-show-navbar-mobile {
+      height: calc(100vh - $navbar-height-mobile);
+    }
+
+    &.lf-show-header-and-navbar-mobile {
+      top: $header-height;
+      height: calc(100vh - $header-height - $navbar-height-mobile);
+    }
+
+    .lf-content {
+      padding-left: $content-padding;
+      padding-right: $content-padding;
+
+      &.lf-content-mobile {
+        padding-left: $content-padding-mobile;
+        padding-right: $content-padding-mobile;
+      }
+
+      &.lf-show-footer{
+        min-height: 100%;
+      }
+    }
+  }
+}
+

package/src/lib/components/scaffold/scaffold.component.spec.ts

@@ -0,0 +1,119 @@
+import { DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { RouterTestingModule } from '@angular/router/testing';
+import { Logger } from '../../services';
+import { SharedModule } from '../../shared/shared.module';
+import { BottomBarComponent } from '../bottom-bar/bottom-bar.component';
+import { ContentTitleCardComponent } from '../content-title-card/content-title-card.component';
+import { DrawerComponent } from '../drawer/drawer.component';
+import { FloatingButtonComponent } from '../floating-button/floating-button.component';
+import { FooterComponent } from '../footer/footer.component';
+import { HeaderComponent } from '../header/header.component';
+import { LoadingOverlayComponent } from '../loading-overlay/loading-overlay.component';
+import { NavbarComponent } from '../navbar/navbar.component';
+import { ScaffoldComponent } from './scaffold.component';
+
+// @Component({
+//   selector: 'lf-header',
+//   template: ''
+// })
+// class MockHeaderComponent {
+//   @Input() public headerConfig: HeaderConfig = {};
+//   @Input() public isMobile: boolean = false;
+//   @Input() public routeLoading: boolean = false;
+// }
+
+class MockLogger { }
+
+describe('ScaffoldComponent', () => {
+  let component: ScaffoldComponent;
+  let fixture: ComponentFixture<ScaffoldComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        // MockHeaderComponent
+        ScaffoldComponent,
+        LoadingOverlayComponent,
+        HeaderComponent,
+        NavbarComponent,
+        DrawerComponent,
+        ContentTitleCardComponent,
+        FooterComponent,
+        FloatingButtonComponent,
+        BottomBarComponent
+      ],
+      imports: [
+        SharedModule,
+        RouterTestingModule
+      ],
+      providers: [
+        { provide: Logger, useClass: MockLogger }
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ScaffoldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render the header component', () => {
+    component.headerConfig = { enable: true };
+    fixture.detectChanges();
+    const headerDebugElement: DebugElement = fixture.debugElement.query(
+      By.directive(HeaderComponent)
+    );
+    expect(headerDebugElement).toBeTruthy();
+  });
+
+
+  it('should render the navbar component', () => {
+    component.navbarConfig = { enable: true };
+    fixture.detectChanges();
+    const navbarDebugElement: DebugElement = fixture.debugElement.query(
+      By.directive(NavbarComponent)
+    );
+    expect(navbarDebugElement).toBeTruthy();
+  });
+
+  it('should render the drawer component', () => {
+    component.drawerConfig = { enable: true };
+    fixture.detectChanges();
+    const drawerDebugElement: DebugElement = fixture.debugElement.query(
+      By.directive(DrawerComponent)
+    );
+    expect(drawerDebugElement).toBeTruthy();
+  });
+
+  it('should render the title component', () => {
+    component.contentTitleCardConfig = { enable: true };
+    fixture.detectChanges();
+    const titleDebugElement: DebugElement = fixture.debugElement.query(
+      By.directive(ContentTitleCardComponent)
+    );
+    expect(titleDebugElement).toBeTruthy();
+  });
+
+  it('should render the footer component', () => {
+    component.footerConfig = { enable: true };
+    fixture.detectChanges();
+    const footerDebugElement: DebugElement = fixture.debugElement.query(
+      By.directive(FooterComponent)
+    );
+    expect(footerDebugElement).toBeTruthy();
+  });
+
+  it('should render the button component', () => {
+    component.floatingButtonConfig = { enable: true };
+    fixture.detectChanges();
+    const buttonDebugElement: DebugElement = fixture.debugElement.query(
+      By.directive(FloatingButtonComponent)
+    );
+    expect(buttonDebugElement).toBeTruthy();
+  });
+});

package/src/lib/components/scaffold/scaffold.component.ts

@@ -0,0 +1,191 @@
+import { Breakpoints, BreakpointState } from '@angular/cdk/layout';
+import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
+
+import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild, DOCUMENT, inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { debounceTime, distinctUntilChanged, fromEvent, Subscription } from 'rxjs';
+import { BottomBarConfig, ContentTitleCardConfig, DrawerConfig, FloatingButtonConfig, FooterConfig, HeaderConfig, ScaffoldLibraryConfig, NavbarConfig, ScaffoldConfig } from '../../models';
+import { CONFIG } from '../../scaffold.module';
+import { BreakpointService, Logger, RouterService, ScaffoldService } from '../../services';
+
+@Component({
+  selector: 'lf-scaffold',
+  templateUrl: './scaffold.component.html',
+  styleUrls: ['./scaffold.component.scss'],
+  standalone: false
+})
+export class ScaffoldComponent implements OnInit, OnDestroy {
+  private scaffoldService = inject(ScaffoldService);
+  private breakpointService = inject(BreakpointService);
+  private routerService = inject(RouterService);
+  private logger = inject(Logger);
+  private route = inject(ActivatedRoute);
+  private document = inject<Document>(DOCUMENT);
+  private config = inject<ScaffoldLibraryConfig>(CONFIG, { optional: true });
+
+  @ViewChild('scrollContainer', { static: true }) public scrollContainer: ElementRef;
+  @ViewChild('content', { static: true }) public content: ElementRef;
+
+  @Output() public headerButtonClickEvent = new EventEmitter<string>();
+  @Output() public headerInputSubmitEvent = new EventEmitter<string>();
+  @Output() public headerInputChangeEvent = new EventEmitter<string>();
+  @Output() public navbarButtonClickEvent = new EventEmitter<string>();
+  @Output() public floatingButtonClickEvent = new EventEmitter<string>();
+  @Output() public bottomBarButtonClickEvent = new EventEmitter<string>();
+
+  public scaffoldConfig: ScaffoldConfig | null = null;
+  public headerConfig: HeaderConfig | null = null;
+  public navbarConfig: NavbarConfig | null = null;
+  public drawerConfig: DrawerConfig | null = null;
+  public drawerPortal: ComponentPortal<unknown> | TemplatePortal<unknown> | null;
+  public footerConfig: FooterConfig | null = null;
+  public contentTitleCardConfig: ContentTitleCardConfig | null = null;
+  public floatingButtonConfig: FloatingButtonConfig | null = null;
+  public bottomBarConfig: BottomBarConfig | null = null;
+
+  public routeHistory: string[] = [];
+  public currentRoute: string;
+  public isMobile: boolean = false;
+  public routeLoading: boolean = false;
+  public scrollTopPosition: number = 0;
+
+  private _subscription: Subscription = new Subscription;
+
+  ngOnInit(): void {
+    // Listen for config changes
+    this._subscription.add(this.scaffoldService.scaffoldConfig$.subscribe((scaffoldConfig: ScaffoldConfig) => {
+      if (this.config?.debugging) this.logger.log('[ScaffoldConfig]', scaffoldConfig);
+
+      this.scaffoldConfig = scaffoldConfig;
+      this.headerConfig = this.scaffoldConfig.headerConfig!;
+      this.navbarConfig = this.scaffoldConfig.navbarConfig!;
+      this.drawerConfig = this.scaffoldConfig.drawerConfig!;
+      this.footerConfig = this.scaffoldConfig.footerConfig!;
+      this.contentTitleCardConfig = this.scaffoldConfig.contentTitleCardConfig!;
+      this.floatingButtonConfig = this.scaffoldConfig.floatingButtonConfig!;
+      this.bottomBarConfig = this.scaffoldConfig.bottomBarConfig!;
+    }));
+
+    // Listen for drawer portal changes
+    this._subscription.add(this.scaffoldService.drawerPortal$.subscribe((drawerPortal: ComponentPortal<unknown> | TemplatePortal<unknown> | null) => {
+      if (this.config?.debugging) this.logger.log('[DrawerPortal]', drawerPortal);
+
+      this.drawerPortal = drawerPortal;
+    }));
+
+    // Listen for breakpoint changes
+    this._subscription.add(this.breakpointService.breakpoint$.subscribe((breakpointState: BreakpointState) => {
+      if (this.config?.debugging) this.logger.log('[BreakpointState]', breakpointState);
+
+      if (breakpointState.breakpoints[Breakpoints.XSmall]) {
+        this.isMobile = true;
+      } else if (breakpointState.breakpoints[Breakpoints.Small]) {
+        this.isMobile = true;
+      } else if (breakpointState.breakpoints[Breakpoints.Medium]) {
+        this.isMobile = false;
+      } else if (breakpointState.breakpoints[Breakpoints.Large]) {
+        this.isMobile = false;
+      }
+    }));
+
+    // Listen for route changes
+    this._subscription.add(this.routerService.routeHistory$.subscribe((routeHistory: string[]) => {
+      if (this.config?.debugging) this.logger.log('[RouteHistory]', routeHistory);
+
+      if (routeHistory) {
+        this.routeHistory = routeHistory;
+      }
+
+      if (this.scrollContainer && this.scaffoldConfig?.scrollPositionRestoration) {
+        this.scrollContainer.nativeElement.scrollTop = 0;
+      }
+    }));
+
+    // Listen for current route changes
+    this._subscription.add(this.routerService.currentRoute$.subscribe((currentRout: string) => {
+      this.currentRoute = currentRout
+    }));
+
+    // Listen for route loading
+    this._subscription.add(this.routerService.loading$.subscribe((routeLoading: boolean) => {
+      this.routeLoading = routeLoading
+    }));
+
+    // Listen to scroll events
+    if (this.scrollContainer) {
+      const element: HTMLElement = this.scrollContainer.nativeElement;
+
+      this._subscription.add(fromEvent(element, 'scroll').pipe(
+        distinctUntilChanged(),
+        debounceTime(100)
+      ).subscribe((e: Event) => {
+        const target: HTMLElement = e.target as HTMLElement;
+        this.scrollTopPosition = target.scrollTop;
+      }));
+    }
+
+    // Listen for fragments in the current route
+    if (this.scaffoldConfig?.anchorScrolling) {
+      this._subscription.add(this.route.fragment.subscribe((fragment: string | null) => {
+        if (fragment) {
+          if (this.config?.debugging) this.logger.log('[RouteFragment]', fragment);
+          setTimeout(() => {
+            const element = this.document.querySelector(`#${fragment}`);
+            if (element) {
+              element.scrollIntoView({ behavior: 'auto', block: 'start', inline: 'nearest' });
+            }
+          }, 100);
+        }
+      }));
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this._subscription) {
+      this._subscription.unsubscribe();
+    }
+  }
+
+  public headerButtonClicked(id: string): void {
+    this.scaffoldService.buttonClickEventValue = id;
+    this.headerButtonClickEvent.emit(id);
+  }
+
+  public headerInputSubmitted(value: string): void {
+    this.headerInputSubmitEvent.emit(value);
+  }
+
+  public headerInputChanged(value: string): void {
+    this.scaffoldService.headerInputChangeValue = value;
+    this.headerInputChangeEvent.emit(value);
+  }
+
+  public navbarButtonClicked(id: string): void {
+    this.scaffoldService.buttonClickEventValue = id;
+    this.navbarButtonClickEvent.emit(id);
+  }
+
+  public backButtonClicked(): void {
+    this.routerService.navigateBack();
+  }
+
+  public floatingButtonClicked(id: string): void {
+    if (!id && this.scrollContainer) {
+      this.scrollContainer.nativeElement.scrollTop = 0;
+    } else {
+      this.scaffoldService.buttonClickEventValue = id;
+      this.floatingButtonClickEvent.emit(id);
+    }
+  }
+
+  public bottomBarCloseClicked(id: string): void {
+    this.scaffoldService.buttonClickEventValue = id;
+    this.bottomBarButtonClickEvent.emit(id);
+  }
+
+  public bottomBarButtonClicked(id: string): void {
+    this.scaffoldService.buttonClickEventValue = id;
+    this.bottomBarButtonClickEvent.emit(id);
+  }
+
+}

package/src/lib/interceptors/loading.interceptor.ts

@@ -0,0 +1,51 @@
+import {
+  HttpEvent,
+  HttpHandler,
+  HttpInterceptor,
+  HttpRequest
+} from '@angular/common/http';
+import { Injectable, inject } from '@angular/core';
+import { Observable, finalize } from 'rxjs';
+import { ScaffoldService } from '../services';
+
+@Injectable()
+export class LoadingInterceptor implements HttpInterceptor {
+  private scaffoldService = inject(ScaffoldService);
+
+  private activeRequests = 0;
+  private loadingDelay = 100; // milliseconds
+  private spinnerTimeout: any;
+
+  public intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+    this.activeRequests++;
+
+    // Set a delayed spinner timeout
+    if (this.activeRequests === 1) {
+      this.spinnerTimeout = setTimeout(() => {
+        this.scaffoldService.updateScaffoldProperty('loading', true);
+      }, this.loadingDelay);
+    }
+
+    return next.handle(req).pipe(
+      // tap({
+      //   next: (event) => {
+      //     if (event instanceof HttpResponse) {
+      //       // Successful response
+      //     }
+      //   },
+      //   error: (error: HttpErrorResponse) => {
+      //     // Handle error if needed
+      //   }
+      // }),
+      finalize(() => {
+        this.activeRequests--;
+
+        if (this.activeRequests === 0) {
+          // Clear any pending spinner timeout
+          clearTimeout(this.spinnerTimeout);
+          this.scaffoldService.updateScaffoldProperty('loading', false);
+        }
+      })
+    );
+  }
+}

package/src/lib/models/bottom-bar-config.model.ts

@@ -0,0 +1,8 @@
+import { MenuButton } from './menu-button.model';
+
+export interface BottomBarConfig {
+  enable?: boolean;
+  class?: string;
+  message?: string;
+  actions?: MenuButton[];
+}

package/src/lib/models/confirm-dialog-config.model.ts

@@ -0,0 +1,6 @@
+export interface ConfirmDialogConfig {
+  title?: string;
+  message?: string;
+  confirmLabel?: string;
+  closeLabel?: string;
+}

package/src/lib/models/content-title-card-config.model.ts

@@ -0,0 +1,6 @@
+export interface ContentTitleCardConfig {
+  enable?: boolean;
+  label?: string;
+  showBackButton?: boolean;
+  class?: string;
+}

package/src/lib/models/drawer-config.model.ts

@@ -0,0 +1,6 @@
+export interface DrawerConfig {
+  enable?: boolean;
+  open?: boolean;
+  fixed?: boolean;
+  class?: string;
+}

package/src/lib/models/floating-button-config.model.ts

@@ -0,0 +1,13 @@
+export interface FloatingButtonConfig {
+  enable?: boolean;
+  id?: string;
+  label?: string;
+  matIcon?: string;
+  svgIcon?: string;
+  outlineIcon?: boolean;
+  tooltip?: string;
+  horizontalPosition?: 'left' | 'center' | 'right';
+  bottomPositionPx?: number;
+  autoHide?: boolean;
+  class?: string;
+}

package/src/lib/models/footer-config.model.ts

@@ -0,0 +1,10 @@
+import { NavigationLink } from './navigation-link.model';
+
+export interface FooterConfig {
+  enable?: boolean;
+  svgLogo?: string;
+  imgLogo?: string;
+  copyright?: string;
+  links?: NavigationLink[];
+  class?: string;
+}

package/src/lib/models/header-config.model.ts

@@ -0,0 +1,26 @@
+import { MenuButton } from './menu-button.model';
+
+export interface HeaderConfig {
+  enable?: boolean;
+  svgLogo?: string;
+  imgLogo?: string;
+  title?: string;
+  subtitle?: string;
+  titleRouterLink?: string;
+  loading?: boolean;
+  showRouteLoading?: boolean;
+  leftMenuButton?: MenuButton;
+  rightMenuButtons?: MenuButton[];
+  inputConfig?: HeaderInputConfig;
+  class?: string;
+}
+
+export interface HeaderInputConfig {
+  enable?: boolean;
+  label?: string;
+  matIconSubmit?: string;
+  // matIconPrefix?: string;
+  hint?: string;
+  disabled?: boolean;
+  autoFocus?: boolean;
+}

package/src/lib/models/index.ts

@@ -0,0 +1,15 @@
+export { BottomBarConfig } from './bottom-bar-config.model';
+export { ConfirmDialogConfig } from './confirm-dialog-config.model';
+export { ContentTitleCardConfig } from './content-title-card-config.model';
+export { DrawerConfig } from './drawer-config.model';
+export { FloatingButtonConfig } from './floating-button-config.model';
+export { FooterConfig } from './footer-config.model';
+export { HeaderConfig, HeaderInputConfig } from './header-config.model';
+export { ScaffoldLibraryConfig } from './library-config.model';
+export { MenuButton } from './menu-button.model';
+export { NavbarConfig } from './navbar-config.model';
+export { NavigationLink } from './navigation-link.model';
+export { PlaceholderConfig } from './placeholder-config.model';
+export { ScaffoldConfig } from './scaffold-config.model';
+export { SeoConfig } from './seo-config.model';
+

package/src/lib/models/library-config.model.ts

@@ -0,0 +1,4 @@
+export interface ScaffoldLibraryConfig {
+  production?: boolean;
+  debugging?: boolean;
+}

package/src/lib/models/menu-button.model.ts

@@ -0,0 +1,10 @@
+export interface MenuButton {
+  id: string;
+  label?: string;
+  matIcon?: string;
+  svgIcon?: string;
+  outlineIcon?: boolean;
+  tooltip?: string;
+  class?: string;
+  menuButtons?: MenuButton[];
+}

package/src/lib/models/navbar-config.model.ts

@@ -0,0 +1,8 @@
+import { MenuButton } from './menu-button.model';
+
+export interface NavbarConfig {
+  enable?: boolean;
+  showAllLabels?: boolean;
+  menuButtons?: MenuButton[];
+  class?: string;
+}

package/src/lib/models/navigation-link.model.ts

@@ -0,0 +1,6 @@
+export interface NavigationLink {
+  label?: string;
+  routerLink?: string;
+  href?: string;
+  externalTab?: boolean;
+}

package/src/lib/models/placeholder-config.model.ts

@@ -0,0 +1,7 @@
+export interface PlaceholderConfig {
+  matIcon?: string;
+  svgIcon?: string;
+  outlineIcon?: boolean;
+  heading?: string;
+  message?: string;
+}