@elderbyte/ngx-starter 14.12.0-beta6 → 14.12.0

package/src/lib/components/navigation/bread-crumbs/bread-crumbs/elder-bread-crumbs.component.ts

@@ -1,221 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  OnDestroy,
-  OnInit,
-  Output,
-  ViewChild
-} from '@angular/core';
-import {BehaviorSubject, Subject} from 'rxjs';
-import {LoggerFactory} from '@elderbyte/ts-logger';
-import {PathNode} from '../path/path';
-import {debounceTime, distinctUntilChanged, takeUntil} from 'rxjs/operators';
-import {MatMenuTrigger} from '@angular/material/menu';
-
-@Component({
-  selector: 'elder-bread-crumbs',
-  templateUrl: './elder-bread-crumbs.component.html',
-  styleUrls: ['./elder-bread-crumbs.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ElderBreadCrumbsComponent implements OnInit, OnDestroy {
-
-  /***************************************************************************
-   *                                                                         *
-   * Fields                                                                  *
-   *                                                                         *
-   **************************************************************************/
-
-  private readonly log = LoggerFactory.getLogger(this.constructor.name);
-
-  private readonly _unsubscribe = new Subject<void>();
-
-  private _path: string;
-
-  public readonly editMode$ = new BehaviorSubject<boolean>(false);
-
-  private readonly _pathInputChanged$: Subject<string> = new Subject<string>();
-
-  @Output()
-  public readonly pathChange = new EventEmitter<string>();
-
-  @Input()
-  public root = '/';
-
-  @Input()
-  public rootTranslation: string = null;
-
-  @Input()
-  public rootIcon: string;
-
-  @Input()
-  public backgroundColor: string;
-
-  @ViewChild(MatMenuTrigger)
-  public trigger: MatMenuTrigger;
-
-  public readonly nodes$ = new BehaviorSubject<PathNode[]>([]);
-
-  /***************************************************************************
-   *                                                                         *
-   * Constructor                                                             *
-   *                                                                         *
-   **************************************************************************/
-
-  constructor() {}
-
-  /***************************************************************************
-   *                                                                         *
-   * Life Cycle                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  public ngOnInit(): void {
-
-    this._pathInputChanged$.pipe(
-      takeUntil(this._unsubscribe),
-      distinctUntilChanged(), // only emit if value is different from previous value
-      debounceTime(250),
-    ).subscribe(
-      value => {
-        this.log.info(value);
-        this.pathChange.emit(value);
-      }
-    );
-  }
-
-  public ngOnDestroy() {
-    this._unsubscribe.next();
-    this._unsubscribe.complete();
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Properties                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  @Input()
-  public set editModeEnabled(value: boolean) {
-    this.editMode$.next(value);
-  }
-
-  public get editModeEnabled() {
-    return this.editMode$.getValue();
-  }
-
-  @Input()
-  public set path(path: string) {
-    if (this._path !== path) {
-      this._path = path;
-      this.nodes$.next(this.buildNodes(this._path));
-    }
-  }
-
-  public get rootRawDisplay(): string {
-    const parts = this.root.split('/');
-    const val = parts[parts.length - 1];
-    return val ? val : 'Home';
-  }
-
-  public get path(): string {
-    return this._path;
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Public API                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  public onEnter(): void {
-    this.disableEditMode();
-  }
-
-  public onPathEditBlur(event: Event): void {
-    // this.log.debug('blurred', event);
-    this.disableEditMode();
-  }
-
-
-  public onPathInputChange(value: string) {
-    this._pathInputChanged$.next(value);
-  }
-
-  public onMenuEditPathClick(event: any) {
-    this.trigger.closeMenu();
-    this.toggleEditMode();
-  }
-
-  public goToRoot() {
-    this.goToPath(new PathNode(this.root, ''));
-  }
-
-  public goToPath(node: PathNode) {
-    this.path = node.id;
-    this.pathChange.next(this._path);
-  }
-
-  public toggleEditMode(): void {
-    this.editModeEnabled = !this.editModeEnabled;
-  }
-
-  public enableEditMode(): void {
-    this.editModeEnabled = true;
-  }
-
-  public disableEditMode(): void {
-    this.editModeEnabled = false;
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Private methods                                                         *
-   *                                                                         *
-   **************************************************************************/
-
-
-  private buildNodes(path: string): PathNode[] {
-
-    const nodes: PathNode[] = [];
-
-    nodes.push(
-      new PathNode(
-        this.root,
-        this.rootTranslation ? this.rootTranslation : this.rootRawDisplay
-      )
-    );
-
-    if (path) {
-
-      path = path.startsWith(this.root) ? path.substr(this.root.length) : path;
-
-      this.log.debug('path: ' + path);
-
-      const parts = path.split('/');
-
-      let parent = this.root;
-
-      for (const part of parts) {
-
-        if (part.length === 0) { continue; }
-
-
-        const current = parent ? parent + '/' + part : part;
-
-        nodes.push(new PathNode(
-          current,
-          part
-        ));
-
-        parent = current;
-      }
-    }
-
-    return nodes;
-  }
-
-
-}

package/src/lib/components/navigation/bread-crumbs/elder-bread-crumbs.module.ts

@@ -1,37 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ElderBreadCrumbsComponent } from './bread-crumbs/elder-bread-crumbs.component';
-import { MatButtonModule } from '@angular/material/button';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import {TranslateModule} from '@ngx-translate/core';
-import {MatInputModule} from '@angular/material/input';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {ElderFormsDirectivesModule} from '../../forms/directives/elder-forms-directives.module';
-import {MatMenuModule} from '@angular/material/menu';
-
-export * from './bread-crumbs/elder-bread-crumbs.component';
-export * from './path/path';
-
-@NgModule({
-  imports: [
-    CommonModule, FormsModule, ReactiveFormsModule,
-
-    TranslateModule,
-
-    MatFormFieldModule,
-    MatIconModule,
-    MatButtonModule,
-    MatInputModule,
-    MatMenuModule,
-
-    ElderFormsDirectivesModule
-  ],
-  declarations: [
-    ElderBreadCrumbsComponent
-  ],
-  exports: [
-    ElderBreadCrumbsComponent
-  ]
-})
-export class ElderBreadCrumbsModule { }

package/src/lib/components/navigation/bread-crumbs/path/path.ts

@@ -1,49 +0,0 @@
-
-export class PathNode {
-  constructor(
-    public readonly id: string,
-    public readonly name: string
-  ) { }
-}
-
-export class Path {
-
-  /***************************************************************************
-   *                                                                         *
-   * Public API                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  public static readonly DELIMITER = '/';
-
-  /***************************************************************************
-   *                                                                         *
-   * Fields                                                                  *
-   *                                                                         *
-   **************************************************************************/
-
-  private readonly _nodes: PathNode[] = [];
-
-  /***************************************************************************
-   *                                                                         *
-   * Constructor                                                             *
-   *                                                                         *
-   **************************************************************************/
-
-  constructor(
-    nodes: PathNode[]
-  ) {
-    this._nodes.push(...nodes);
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Properties                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  public get nodes(): PathNode[] {
-    return this.nodes;
-  }
-
-}

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

@@ -1,35 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {ElderNavListComponent} from './nav-list/elder-nav-list.component';
-import { ElderNavLinkComponent } from './nav-link/elder-nav-link.component';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import {RouterModule} from '@angular/router';
-import {TranslateModule} from '@ngx-translate/core';
-import {A11yModule} from '@angular/cdk/a11y';
-import { ElderNavGroupComponent } from './nav-group/elder-nav-group.component';
-
-export {ElderNavListComponent} from './nav-list/elder-nav-list.component';
-export {ElderNavLinkComponent} from './nav-link/elder-nav-link.component';
-export {ElderNavGroupComponent} from './nav-group/elder-nav-group.component';
-
-@NgModule({
-  declarations: [
-    ElderNavListComponent,
-    ElderNavLinkComponent,
-    ElderNavGroupComponent
-  ],
-  exports: [
-    ElderNavListComponent,
-    ElderNavLinkComponent,
-    ElderNavGroupComponent
-  ],
-  imports: [
-    CommonModule, RouterModule,
-    MatIconModule, MatButtonModule,
-    A11yModule,
-
-    TranslateModule
-  ]
-})
-export class ElderNavModule { }

package/src/lib/components/navigation/nav/nav-group/elder-nav-group.component.html

@@ -1,30 +0,0 @@
-
-<ng-container *ngIf="(state$ | async) as state">
-  <div class="layout-col nav-group"
-       [class.nav-group-active]="state.isOpen"
-  >
-    <a mat-button
-       class="layout-row place-start-center nav-group-button mat-button-fill"
-       [tabIndex]="0"
-       [class.nav-group-button-active]="state.isOpen"
-       [class.nav-group-button-inactive]="!state.isOpen"
-       [color]="state.isOpen ? 'primary' : undefined"
-       (click)="itemClick($event)"
-    >
-
-      <div class="layout-row place-start-center gap-lg flex noselect">
-        <ng-content></ng-content>
-        <span class="flex"></span>
-        <mat-icon>{{state.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>
-      </div>
-
-    </a>
-
-    <!-- Nested Items projection -->
-    <div class="layout-col nav-group-items-container"
-         [@openClose]="state.isOpen ? 'open' : 'closed'">
-      <ng-content select="elder-nav-link"></ng-content>
-    </div>
-
-  </div>
-</ng-container>

package/src/lib/components/navigation/nav/nav-group/elder-nav-group.component.ts

@@ -1,94 +0,0 @@
-import {ChangeDetectionStrategy, Component, ContentChildren, OnInit, Output, QueryList} from '@angular/core';
-import {animate, state, style, transition, trigger} from '@angular/animations';
-import {ElderNavLinkComponent} from '../nav-link/elder-nav-link.component';
-import {BehaviorSubject, Observable, Subject} from 'rxjs';
-
-
-interface NavGroupState {
-  isOpen: boolean;
-}
-
-@Component({
-  selector: 'elder-nav-group, ebs-nav-group',
-  templateUrl: './elder-nav-group.component.html',
-  styleUrls: ['./elder-nav-group.component.scss'],
-  animations: [
-    trigger('openClose', [
-      state('open', style({
-        height: '*',
-        opacity: 1,
-      })),
-      state('closed', style({
-        height: 0,
-        opacity: 0.5,
-      })),
-      transition('open => closed', [
-        animate('200ms')
-      ]),
-      transition('closed => open', [
-        animate('200ms')
-      ]),
-    ])
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ElderNavGroupComponent implements OnInit {
-
-
-  /***************************************************************************
-   *                                                                         *
-   * Fields                                                                  *
-   *                                                                         *
-   **************************************************************************/
-
-  @ContentChildren(ElderNavLinkComponent)
-  public children: QueryList<ElderNavLinkComponent>;
-
-  public readonly state$ = new BehaviorSubject<NavGroupState>({ isOpen: false });
-
-  private readonly _itemClickSubject = new Subject<void>();
-
-  /***************************************************************************
-   *                                                                         *
-   * Constructor                                                             *
-   *                                                                         *
-   **************************************************************************/
-
-  constructor() { }
-
-  /***************************************************************************
-   *                                                                         *
-   * Life Cycle                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  public ngOnInit(): void {
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Properties                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  @Output()
-  public get click(): Observable<any> {
-    return this._itemClickSubject.asObservable();
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Public Api                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  public itemClick(event: Event): void {
-    this._itemClickSubject.next();
-    this.toggle();
-  }
-
-  public toggle(): void {
-    const myState = this.state$.getValue();
-    this.state$.next({ isOpen: !myState.isOpen });
-  }
-}

package/src/lib/components/navigation/nav/nav-link/elder-nav-link.component.html

@@ -1,86 +0,0 @@
-<!-- Router Link -->
-<a mat-button *ngIf="(routerLink$ | async) as routerLink"
-   class="layout-row place-start-center nav-link"
-   [tabIndex]="0"
-   [routerLink]="routerLink"
-   [queryParamsHandling]="queryParamsHandling"
-   [queryParams]="queryParams"
-   routerLinkActive="nav-link-active"
-   #rla="routerLinkActive"
-   [color]="rla.isActive ? 'primary' : ''"
->
-
-  <ng-container [ngTemplateOutlet]="rla.isActive ? activeLinkContent : inactiveLinkContent">
-  </ng-container>
-
-</a>
-
-<!-- Href Link -->
-<a mat-button *ngIf="(href$ | async) as href"
-   class="layout-row place-start-center nav-link"
-   [tabIndex]="0"
-   [href]="href"
-   [target]="target$ | async"
->
-
-  <ng-container [ngTemplateOutlet]="inactiveLinkContent">
-  </ng-container>
-
-</a>
-
-<!-- Simple Button -->
-<a mat-button *ngIf="(fallbackToButton$ | async)"
-   class="layout-row place-start-center nav-link"
-   [tabIndex]="0"
->
-
-  <ng-container [ngTemplateOutlet]="inactiveLinkContent">
-  </ng-container>
-
-</a>
-
-
-<!-- Content for an active Nav Element -->
-<ng-template #activeLinkContent>
-
-  <div class="layout-row place-start-center">
-
-    <mat-icon *ngIf="!svgIcon" class="nav-icon"
-              [fontIcon]="fontIcon"
-              [fontSet]="fontSet">
-      {{icon}}
-    </mat-icon>
-
-    <mat-icon *ngIf="svgIcon" class="nav-icon"
-              [svgIcon]="svgIcon"
-    ></mat-icon>
-
-    <span class="noselect nav-text nav-text-active">
-      {{ title | translate}}
-
-    </span>
-  </div>
-
-</ng-template>
-
-<!-- Content for an inactive Nav Element -->
-<ng-template #inactiveLinkContent>
-
-  <div class="layout-row place-start-center">
-
-    <mat-icon *ngIf="!svgIcon" class="nav-icon nav-icon-inactive"
-              [fontIcon]="fontIcon"
-              [fontSet]="fontSet">
-      {{icon}}
-    </mat-icon>
-
-    <mat-icon *ngIf="svgIcon" class="nav-icon nav-icon-inactive"
-              [svgIcon]="svgIcon"
-    ></mat-icon>
-
-    <span class="noselect nav-text nav-text-inactive">
-      {{ title | translate}}
-    </span>
-  </div>
-
-</ng-template>

package/src/lib/components/navigation/nav/nav-link/elder-nav-link.component.ts

@@ -1,78 +0,0 @@
-import {Component, HostBinding, Input, OnInit} from '@angular/core';
-import {BehaviorSubject, combineLatest, Observable} from 'rxjs';
-import {map} from 'rxjs/operators';
-import {QueryParamsHandling} from '@angular/router';
-
-@Component({
-  selector: 'elder-nav-link, ebs-nav-link',
-  templateUrl: './elder-nav-link.component.html',
-  styleUrls: ['./elder-nav-link.component.scss']
-  // changeDetection: ChangeDetectionStrategy.OnPush Fix RouterLinkActive binding first :(
-})
-export class ElderNavLinkComponent implements OnInit {
-
-  @HostBinding('attr.tabindex') tabIndex = -1;
-
-  public routerLink$ = new BehaviorSubject<string>('');
-  public href$ = new BehaviorSubject<string>('');
-  public target$ = new BehaviorSubject<string>('_blank');
-
-
-  @Input()
-  public title: string;
-
-  @Input()
-  public set routerLink(value: string) {
-    this.routerLink$.next(value);
-  }
-
-  @Input()
-  public set href(value: string) {
-    this.href$.next(value);
-  }
-
-  @Input()
-  public set target(value: string) {
-    this.target$.next(value);
-  }
-
-  @Input()
-  public queryParamsHandling: QueryParamsHandling;
-
-  @Input()
-  public queryParams: {
-    [k: string]: any;
-  } = {};
-
-  @Input()
-  public icon: string;
-
-  @Input()
-  public fontIcon: string;
-
-  @Input()
-  public fontSet: string;
-
-  @Input()
-  public svgIcon: string;
-
-  constructor() {
-  }
-
-  ngOnInit() {
-  }
-
-
-  // If neither routerLink nor href is defined, we fallback to simple button.
-  public get fallbackToButton$(): Observable<boolean> {
-    return combineLatest(
-      this.routerLink$,
-      this.href$
-    )
-      .pipe(
-        map((result) => !result[0] && !result[1])
-      );
-  }
-
-
-}

package/src/lib/components/navigation/nav/nav-list/elder-nav-list.component.html

@@ -1,5 +0,0 @@
-<div class="layout-col full elder-nav-list-full" tabindex="0">
-  <div class="layout-col flex scrollable" >
-    <ng-content></ng-content>
-  </div>
-</div>

package/src/lib/components/navigation/nav/nav-list/elder-nav-list.component.ts

@@ -1,11 +0,0 @@
-import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
-
-@Component({
-  selector: 'elder-nav-list, ebs-nav-list',
-  templateUrl: './elder-nav-list.component.html',
-  styleUrls: ['./elder-nav-list.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ElderNavListComponent {
-  constructor() { }
-}