@elderbyte/ngx-starter 14.12.0-beta4 → 14.12.0-beta6

package/src/lib/components/navigation/toolbar/elder-toolbar-column.directive.ts

@@ -0,0 +1,53 @@
+import {Directive, Input, OnDestroy, OnInit, TemplateRef, ViewContainerRef} from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {ElderToolbarService} from './elder-toolbar.service';
+import {ToolbarColumnPosition} from './toolbar-column-position';
+
+@Directive({
+    selector: '[elderToolbarColumn], [ebsToolbarColumn]'
+})
+export class ElderToolbarColumnDirective implements OnInit, OnDestroy {
+
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+
+    private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+    /** Position at which column should be placed. */
+    @Input()
+    public elderToolbarColumn: ToolbarColumnPosition;
+
+    /** If the column should be considered as default (fallback). */
+    @Input()
+    public elderToolbarDefault: boolean;
+
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+
+    constructor(
+        private viewContainer: ViewContainerRef,
+        private toolbarService: ElderToolbarService,
+        public templateRef: TemplateRef<any>,
+    ) { }
+
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+
+    public ngOnInit(): void {
+        this.toolbarService.registerColumn(this.elderToolbarColumn, this.templateRef, this.elderToolbarDefault);
+    }
+
+    public ngOnDestroy(): void {
+        this.toolbarService.deregisterColumn(this.templateRef, this.elderToolbarColumn);
+    }
+
+}

package/src/lib/components/navigation/toolbar/elder-toolbar.module.ts

@@ -0,0 +1,51 @@
+
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {TranslateModule} from '@ngx-translate/core';
+import {RouterModule} from '@angular/router';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import {ElderToolbarComponent} from './toolbar/elder-toolbar.component';
+import {ElderLanguageModule} from '../../i18n/language/elder-language.module';
+import { ElderToolbarColumnDirective } from './elder-toolbar-column.directive';
+import {ElderToolbarTitleComponent} from './toolbar-title/elder-toolbar-title.component';
+
+export {ElderToolbarService} from './elder-toolbar.service';
+export {ElderToolbarColumnDirective} from './elder-toolbar-column.directive';
+export {ElderToolbarComponent} from './toolbar/elder-toolbar.component';
+
+export {ElderToolbarTitleComponent} from './toolbar-title/elder-toolbar-title.component';
+export {ElderToolbarTitleService, ToolbarHeader} from './toolbar-title/elder-toolbar-title.service';
+
+@NgModule({
+    imports: [
+        // common
+        CommonModule, RouterModule,
+
+        // layout
+        MatDividerModule,
+
+        // navigation
+        MatToolbarModule,
+
+        // buttons & indicators
+        MatButtonModule, MatIconModule, MatBadgeModule,
+
+        // translations
+        TranslateModule, ElderLanguageModule
+    ],
+    declarations: [
+      ElderToolbarComponent,
+      ElderToolbarColumnDirective,
+      ElderToolbarTitleComponent
+    ],
+    exports: [
+      ElderToolbarComponent,
+      ElderToolbarColumnDirective,
+      ElderToolbarTitleComponent
+    ]
+})
+export class ElderToolbarModule {}

package/src/lib/components/navigation/toolbar/elder-toolbar.service.ts

@@ -0,0 +1,77 @@
+import {Injectable, TemplateRef} from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {ToolbarColumnPosition} from './toolbar-column-position';
+import {Observable} from 'rxjs';
+import {TemplateSlotManager} from '../../../common/templates/template-slot-manager';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ElderToolbarService {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  private readonly slotManager: TemplateSlotManager<ToolbarColumnPosition>;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructors                                                            *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor() {
+    this.slotManager = new TemplateSlotManager(
+      [
+        'left',
+        'left.begin',
+        ['left.end', 'left.actions'],
+        'center',
+        'right',
+        ['right.begin', 'right.actions'],
+        'right.end',
+      ]
+    );
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Returns an observable which emits the current active template for the given position
+   * over time.
+   */
+  public activeColumnTemplate(position: ToolbarColumnPosition): Observable<TemplateRef<any>> {
+    return this.slotManager.activeSlotTemplate(position);
+  }
+
+  /**
+   * Registers the given template as toolbar column at the given position.
+   *
+   * @param position at which template should be placed
+   * @param template to set at position
+   * @param isDefault if the given template should be used as app default
+   */
+  public registerColumn(position: ToolbarColumnPosition, template: TemplateRef<any>, isDefault = false): void {
+    this.slotManager.registerSlotTemplate(position, template, isDefault);
+  }
+
+  /**
+   * Deregister the given template from the toolbar.
+   *
+   * @param template to deregister
+   * @param position if set, the template will only be deregistered if it was registered at this position (optional)
+   */
+  public deregisterColumn(template: TemplateRef<any>, position?: ToolbarColumnPosition) {
+    this.slotManager.deregisterSlotTemplate(template, position);
+  }
+
+}

package/src/lib/components/navigation/toolbar/toolbar/elder-toolbar.component.html

@@ -0,0 +1,47 @@
+<div class="layout-row">
+
+  <ng-content></ng-content>
+
+  <mat-toolbar class="layout-row place-start-center" [color]="color$ | async">
+
+    <div class="layout-row place-start-center">
+      <ng-container *ngTemplateOutlet="(slotTemplate$('left.begin') | async)"></ng-container>
+      <ng-container *ngTemplateOutlet="(slotTemplate$('left') | async) || defaultLeftColumnTemplate"></ng-container>
+      <ng-container *ngTemplateOutlet="(slotTemplate$('left.end') | async) || defaultEmptyTemplate"></ng-container>
+    </div>
+
+    <div class="layout-row place-center-center flex">
+      <ng-container *ngTemplateOutlet="(slotTemplate$('center') | async) || defaultCenterColumnTemplate"></ng-container>
+    </div>
+
+    <div class="layout-row place-end-center">
+      <ng-container *ngTemplateOutlet="(slotTemplate$('right.begin') | async) || defaultEmptyTemplate"></ng-container>
+      <ng-container *ngTemplateOutlet="(slotTemplate$('right') | async) || defaultRightColumnTemplate"></ng-container>
+      <ng-container *ngTemplateOutlet="(slotTemplate$('right.end') | async)"></ng-container>
+    </div>
+
+
+    <!-- Default Templates -->
+
+    <ng-template #defaultLeftColumnTemplate>
+
+      <elder-toolbar-title></elder-toolbar-title>
+
+    </ng-template>
+
+
+    <ng-template #defaultCenterColumnTemplate></ng-template>
+
+    <ng-template #defaultEmptyTemplate></ng-template>
+
+
+    <ng-template #defaultRightColumnTemplate>
+
+      <elder-language-switcher [slimMode]="true"></elder-language-switcher>
+
+    </ng-template>
+
+  </mat-toolbar>
+
+</div>
+

package/src/lib/components/navigation/toolbar/toolbar/elder-toolbar.component.ts

@@ -0,0 +1,78 @@
+import {ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, TemplateRef} from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {ElderToolbarService} from '../elder-toolbar.service';
+import {BehaviorSubject, Observable, Subject} from 'rxjs';
+import {ToolbarColumnPosition} from '../toolbar-column-position';
+import {ThemePalette} from '@angular/material/core';
+import {ElderThemeService} from '../../../theme/elder-theme.service';
+import {takeUntil} from 'rxjs/operators';
+
+@Component({
+  selector: 'elder-toolbar, ebs-toolbar',
+  templateUrl: './elder-toolbar.component.html',
+  styleUrls: ['./elder-toolbar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ElderToolbarComponent implements OnInit, OnDestroy {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  /** The color of the Toolbar */
+  public readonly color$ = new BehaviorSubject<ThemePalette>('primary');
+
+  private readonly destroy$ = new Subject<void>();
+
+  @Input()
+  public set color(c: ThemePalette){
+    this.color$.next(c);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private toolbarService: ElderToolbarService,
+    private themeService: ElderThemeService
+  ) {
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+    this.themeService
+      .activeTheme$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(theme => this.color$.next(theme.heroBackground))
+  }
+
+  public ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public slotTemplate$(slot: ToolbarColumnPosition): Observable<TemplateRef<any>> {
+    return this.toolbarService.activeColumnTemplate(slot);
+  }
+
+
+
+}

package/src/lib/components/navigation/toolbar/toolbar-column-position.ts

@@ -0,0 +1,20 @@
+
+
+export type ToolbarColumnPosition =
+  'left' |
+  'left.begin' |
+  'left.end' |
+
+  /**
+   * Synonym to left.end
+   */
+  'left.actions' |
+  'center' |
+  'right' |
+  'right.begin' |
+  'right.end' |
+
+  /**
+   * Synonym to right.begin
+   */
+  'right.actions';

package/src/lib/components/navigation/toolbar/toolbar-title/elder-toolbar-title.component.html

@@ -0,0 +1 @@
+<h3 class="mat-title">{{(title$ | async) | translate}}</h3>

package/src/lib/components/navigation/toolbar/toolbar-title/elder-toolbar-title.component.ts

@@ -0,0 +1,54 @@
+import {AfterViewInit, ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
+import {ElderToolbarTitleService} from './elder-toolbar-title.service';
+import {map} from 'rxjs/operators';
+import {ActivatedRoute} from '@angular/router';
+import {Observable} from 'rxjs';
+
+@Component({
+  selector: 'elder-toolbar-title, ebs-toolbar-title',
+  templateUrl: './elder-toolbar-title.component.html',
+  styleUrls: ['./elder-toolbar-title.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ElderToolbarTitleComponent implements OnInit, AfterViewInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  public title$: Observable<string>;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private toolbarService: ElderToolbarTitleService,
+    private activatedRoute: ActivatedRoute
+  ) {
+
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Lifecycle                                                               *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+    this.title$ = this.toolbarService.titleChange
+      .pipe(
+        map(tb => tb.name)
+      );
+  }
+
+  public ngAfterViewInit(): void {
+    setTimeout(() => {
+      this.toolbarService.updateTitle(this.activatedRoute);
+    }, 10);
+  }
+}

package/src/lib/components/navigation/toolbar/toolbar-title/elder-toolbar-title.service.ts

@@ -0,0 +1,107 @@
+
+import {Injectable} from '@angular/core';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
+import {filter, map} from 'rxjs/operators';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+
+
+export class ToolbarHeader {
+  constructor(
+    public name: string) {
+  }
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ElderToolbarTitleService {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  private _title = new ToolbarHeader('');
+  private _titleChange: BehaviorSubject<ToolbarHeader>;
+
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private router: Router,
+    private activatedRoute: ActivatedRoute
+  ) {
+    this._titleChange = new BehaviorSubject<ToolbarHeader>(this._title);
+
+    router.events.pipe(
+      filter(event => event instanceof NavigationEnd),
+      map(() => this.activatedRoute)
+    )
+      .subscribe(active  => {
+        this.updateTitle(active);
+      });
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public set title(title: ToolbarHeader) {
+    this._title = title;
+    this._titleChange.next(title);
+  }
+
+  public get title(): ToolbarHeader {
+    return this._title;
+  }
+
+  public get titleChange(): Observable<ToolbarHeader> {
+    return this._titleChange;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public Api                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public updateTitle(activatedRoute: ActivatedRoute): void {
+
+    const title = this.resolveTitle(activatedRoute);
+
+    // this.logger.trace('Updating Title to: ' + title, activatedRoute);
+
+    this.title = new ToolbarHeader(title);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private resolveTitle(activatedRoute: ActivatedRoute): string {
+
+    let resolvedTitle = 'Loading ...';
+
+    while (activatedRoute) {
+      const point = activatedRoute.snapshot.data['title'];
+      if (point) {
+        resolvedTitle = point;
+      }
+      activatedRoute = activatedRoute.firstChild;
+    }
+
+    return resolvedTitle;
+  }
+}

package/src/lib/components/overlays/elder-overlay-origin.directive.ts

@@ -0,0 +1,45 @@
+import {Directive, ElementRef, Input} from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {ElderOverlayComponent} from './elder-overlay.component';
+
+@Directive({
+  selector: '[elderOverlayOrigin]'
+})
+export class ElderOverlayOriginDirective {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  private _overlay: ElderOverlayComponent;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private _host: ElementRef<HTMLElement>,
+  ) { }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input('elderOverlayOrigin')
+  public set overlay(overlay: ElderOverlayComponent) {
+    this._overlay = overlay;
+    this._overlay.origin = this._host;
+  }
+
+  public get overlay(): ElderOverlayComponent {
+    return this._overlay;
+  }
+}

package/src/lib/components/overlays/elder-overlay-trigger.directive.ts

@@ -0,0 +1,71 @@
+import {Directive, ElementRef, HostListener, Input} from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {ElderOverlayComponent} from './elder-overlay.component';
+
+@Directive({
+  selector: '[elderOverlayTrigger]'
+})
+export class ElderOverlayTriggerDirective {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  @Input('elderOverlayTrigger')
+  public overlay: ElderOverlayComponent;
+
+  @Input('elderOverlayTriggerType')
+  public type: 'click' | 'focus' = 'click';
+
+  @Input('elderOverlayTriggerEnabled')
+  public enabled = true;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private _host: ElementRef<HTMLElement>,
+  ) { }
+
+  /***************************************************************************
+   *                                                                         *
+   * Event Listeners                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  @HostListener('click', ['$event'])
+  handleClick(event: MouseEvent): void {
+    if (this.type === 'click') {
+      this.handleTrigger();
+    }
+  }
+
+  @HostListener('focus', ['$event'])
+  handleFocus(event: MouseEvent): void {
+    if (this.type === 'focus') {
+      this.handleTrigger();
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private handleTrigger(): void {
+    if (this.enabled && this.overlay) {
+      this.overlay.showOverlay({
+        source: this._host
+      });
+    }
+  }
+
+}