@elderbyte/ngx-starter 14.12.0-beta6 → 14.12.1

package/src/lib/components/select-chip-list/chip-list-select/elder-chip-list-select.component.ts

@@ -1,169 +0,0 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, forwardRef, Input, OnInit, Optional, Output} from '@angular/core';
-import {SelectionModel} from '../../../common/selection/selection-model';
-import {ELDER_DATA_VIEW} from '../../data-view/base/elder-data-view';
-import {LoggerFactory} from '@elderbyte/ts-logger';
-import {BehaviorSubject, Observable} from 'rxjs';
-import {map} from 'rxjs/operators';
-
-@Component({
-  selector: 'elder-chip-list-select',
-  templateUrl: './elder-chip-list-select.component.html',
-  styleUrls: ['./elder-chip-list-select.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: ELDER_DATA_VIEW,
-      useExisting: forwardRef(() => ElderChipListSelectComponent)
-    }
-  ]
-})
-export class ElderChipListSelectComponent implements OnInit {
-
-  /***************************************************************************
-   *                                                                         *
-   * Fields                                                                  *
-   *                                                                         *
-   **************************************************************************/
-
-  private readonly log = LoggerFactory.getLogger(this.constructor.name);
-
-  @Input()
-  public data$: BehaviorSubject<any[]> = new BehaviorSubject<any>([]);
-
-  /**
-   * The property used to compare two values.
-   * Useful if the values are entities with an id property.
-   */
-  @Input()
-  public idField = 'id';
-
-  /**
-   * The property whose values should be used for item display.
-   */
-  @Input()
-  public displayField: string = null;
-
-  /**
-   * The color used to indicated selection.
-   */
-  @Input()
-  public color: string;
-
-  /**
-   * If the chip list should be stacked.
-   */
-  @Input()
-  public stacked: false;
-
-  @Output()
-  public itemClick: EventEmitter<any> = new EventEmitter<any>();
-
-  /***************************************************************************
-   *                                                                         *
-   * Constructor                                                             *
-   *                                                                         *
-   **************************************************************************/
-
-  constructor(
-    @Optional() public selectionModel: SelectionModel<any>,
-  ) {
-    if (!selectionModel) {
-      this.selectionModel = new SelectionModel<any>(false, [], entity => entity ? this.getId(entity) : 0);
-    }
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Life Cycle                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  public ngOnInit(): void {
-
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Properties                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  @Input()
-  public set data(data: any[]) {
-    this.data$.next(data);
-  }
-
-  @Input()
-  public set selection(selection: any[]) {
-    this.selectionModel.replaceSelection(selection);
-  }
-
-  @Output()
-  public get selectionChange(): Observable<any[]> {
-    return this.selectionModel.changed;
-  }
-
-  @Output()
-  public get selectionSingleChange(): Observable<any> {
-    return this.selectionModel.changed.pipe(
-      map(selection => {
-        if (selection.length > 0) {
-          return selection[0];
-        } else {
-          return null;
-        }
-      })
-    );
-  }
-
-  @Input()
-  public set selectionMultiEnabled(enableMultiSelection: boolean) {
-    if (this.selectionModel) {
-      this.selectionModel.isMultipleSelection = enableMultiSelection;
-    }
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Component Events                                                        *
-   *                                                                         *
-   **************************************************************************/
-
-  /**
-   * Occurs when the user clicks on item
-   */
-  public onItemClick(entity: any): void {
-    this.selectionModel.toggle(entity);
-    this.itemClick.next(entity);
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Public API                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  public getDisplayText(value: any): any {
-    if (this.displayField && value) {
-      return (<any>value)[this.displayField];
-    }
-    return value;
-  }
-
-  public isSelected(value: any): boolean {
-    return this.selectionModel.isSelected(value);
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Private methods                                                         *
-   *                                                                         *
-   **************************************************************************/
-
-  private getId(entity: any): any {
-    return entity[this.idField] ?
-      entity[this.idField] : entity;
-  }
-
-
-}

package/src/lib/components/select-chip-list/elder-chip-list-select.module.ts

@@ -1,30 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {A11yModule} from '@angular/cdk/a11y';
-import {TranslateModule} from '@ngx-translate/core';
-import {ElderChipListSelectComponent} from './chip-list-select/elder-chip-list-select.component';
-import {MatChipsModule} from '@angular/material/chips';
-
-export {ElderChipListSelectComponent} from './chip-list-select/elder-chip-list-select.component';
-
-@NgModule({
-  imports: [
-    // Angular
-    CommonModule,
-
-    // Third Party
-    TranslateModule,
-
-    // Material
-    MatChipsModule,
-    A11yModule
-
-  ],
-  declarations: [
-    ElderChipListSelectComponent
-  ],
-  exports: [
-    ElderChipListSelectComponent
-  ]
-})
-export class ElderChipListSelectModule { }

package/src/lib/components/select-list/elder-select-list.module.ts

@@ -1,26 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ElderSelectListComponent } from './select-list/elder-select-list.component';
-import { ElderSelectListItemComponent } from './select-list-item/elder-select-list-item.component';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import {A11yModule} from '@angular/cdk/a11y';
-import {TranslateModule} from '@ngx-translate/core';
-
-export {ElderSelectListComponent} from './select-list/elder-select-list.component';
-export {ElderSelectListItemComponent} from './select-list-item/elder-select-list-item.component';
-
-
-@NgModule({
-  declarations: [ElderSelectListComponent, ElderSelectListItemComponent],
-  exports: [ElderSelectListComponent, ElderSelectListItemComponent],
-  imports: [
-    CommonModule,
-
-    MatIconModule, MatButtonModule,
-    A11yModule,
-
-    TranslateModule
-  ]
-})
-export class ElderSelectListModule { }

package/src/lib/components/select-list/select-list/elder-select-list.component.html

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

package/src/lib/components/select-list/select-list/elder-select-list.component.ts

@@ -1,91 +0,0 @@
-import {ChangeDetectionStrategy, Component, Input, OnInit, Output} from '@angular/core';
-import {BehaviorSubject, Observable} from 'rxjs';
-import {skip} from 'rxjs/operators';
-
-@Component({
-  selector: 'elder-select-list, ebs-select-list',
-  templateUrl: './elder-select-list.component.html',
-  styleUrls: ['./elder-select-list.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ElderSelectListComponent<T = any> implements OnInit {
-
-  /***************************************************************************
-   *                                                                         *
-   * Fields                                                                  *
-   *                                                                         *
-   **************************************************************************/
-
-  private readonly _valueChange = new BehaviorSubject<T>(null);
-
-  /**
-   * Function to compare the option values with the selected values. The first argument
-   * is a value from an item option. The second is the current value.
-   */
-  @Input()
-  public compareWith: (o1: T, o2: T) => boolean;
-
-  /***************************************************************************
-   *                                                                         *
-   * Constructor                                                             *
-   *                                                                         *
-   **************************************************************************/
-
-  constructor() { }
-
-  /***************************************************************************
-   *                                                                         *
-   * Life Cycle                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  public ngOnInit(): void {
-
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Properties                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  /**
-   * Emits when the value changes.
-   */
-  @Output()
-  public get valueChange(): Observable<T> {
-    return this._valueChange.pipe(
-      skip(1)
-    );
-  }
-
-  /**
-   * Sets the current selected value
-   */
-  @Input()
-  public set value(value: T) {
-    this._valueChange.next(value);
-  }
-
-  /**
-   * Gets the current selected value
-   */
-  public get value(): T {
-    return this._valueChange.value;
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Public API                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  public isActive(value: T): boolean {
-    if (this.compareWith) {
-      return this.compareWith(value, this.value);
-    } else {
-      return value === this.value;
-    }
-  }
-
-}

package/src/lib/components/select-list/select-list-item/elder-select-list-item.component.html

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

package/src/lib/components/select-list/select-list-item/elder-select-list-item.component.ts

@@ -1,135 +0,0 @@
-import {AfterContentInit, Component, ContentChildren, Input, OnInit, Output, QueryList} from '@angular/core';
-import {ElderSelectListComponent} from '../select-list/elder-select-list.component';
-import {animate, state, style, transition, trigger} from '@angular/animations';
-import {BehaviorSubject, Observable, Subject} from 'rxjs';
-import {map, startWith} from 'rxjs/operators';
-
-interface ElderSelectListItemState { // Necessary for 'ngIf as'
-  isActive: boolean;
-}
-
-@Component({
-  selector: 'elder-select-list-item, ebs-select-list-item',
-  templateUrl: './elder-select-list-item.component.html',
-  styleUrls: ['./elder-select-list-item.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')
-      ]),
-    ])
-  ]
-})
-export class ElderSelectListItemComponent implements OnInit, AfterContentInit {
-
-  /***************************************************************************
-   *                                                                         *
-   * Fields                                                                  *
-   *                                                                         *
-   **************************************************************************/
-
-  @Input()
-  public value: any;
-
-  @ContentChildren(ElderSelectListItemComponent)
-  public children: QueryList<ElderSelectListItemComponent>;
-
-  public readonly isOpen$ = new BehaviorSubject<boolean>(false);
-
-  public hasChildren$: Observable<boolean>;
-
-  private readonly _itemClickSubject = new Subject<any>();
-
-  public state$: Observable<ElderSelectListItemState>;
-
-  /***************************************************************************
-   *                                                                         *
-   * Constructor                                                             *
-   *                                                                         *
-   **************************************************************************/
-
-  constructor(
-    private selectListComponent: ElderSelectListComponent
-  ) { }
-
-  /***************************************************************************
-   *                                                                         *
-   * Life Cycle                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-
-  public ngOnInit(): void {
-    this.state$ = this.selectListComponent.valueChange.pipe(
-      map(value => this.currentState()),
-      startWith(this.currentState())
-    );
-  }
-
-  public ngAfterContentInit(): void {
-    this.hasChildren$ = this.children.changes.pipe(
-      map(() => this.checkHasChildren()),
-      startWith(this.checkHasChildren())
-    );
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Properties                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  @Output()
-  public get click(): Observable<any> {
-    return this._itemClickSubject.asObservable();
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Public Api                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  public itemClick(event: Event): void {
-
-    this._itemClickSubject.next(this.value);
-
-    if (this.checkHasChildren()) {
-      this.toggle();
-    } else {
-      this.selectListComponent.value = this.value;
-    }
-  }
-
-  public toggle(): void {
-    this.isOpen$.next(!this.isOpen$.getValue());
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Private methods                                                         *
-   *                                                                         *
-   **************************************************************************/
-
-  private currentState(): ElderSelectListItemState {
-    return {
-      isActive: this.selectListComponent.isActive(this.value)
-    };
-  }
-
-  private checkHasChildren(): boolean {
-    return this.children && this.children.length > 1;
-  }
-
-}

package/src/lib/components/shell/drawers/drawer-outlet-binding.ts

@@ -1,73 +0,0 @@
-import {RouterOutlet} from '@angular/router';
-import { MatDrawer } from '@angular/material/sidenav';
-import {Subscription} from 'rxjs';
-
-export class DrawerOutletBinding {
-
-  /***************************************************************************
-   *                                                                         *
-   * Fields                                                                  *
-   *                                                                         *
-   **************************************************************************/
-
-  private _subs: Subscription[] = [];
-
-  /***************************************************************************
-   *                                                                         *
-   * Static Builder                                                          *
-   *                                                                         *
-   **************************************************************************/
-
-  /**
-   * Creates a binding between the given router-outlet and the drawer.
-   * @param routerOutlet
-   * @param drawer
-   */
-  public static bind(routerOutlet: RouterOutlet, drawer: MatDrawer): DrawerOutletBinding {
-    const binding = new DrawerOutletBinding(routerOutlet, drawer);
-    binding.bind();
-    return binding;
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Constructor                                                             *
-   *                                                                         *
-   **************************************************************************/
-
-  private constructor(
-    private readonly routerOutlet: RouterOutlet,
-    private readonly drawer: MatDrawer
-  ) {
-    if (!routerOutlet) { throw new Error('routerOutlet must not be null!'); }
-    if (!drawer) { throw new Error('drawer must not be null!'); }
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Public API                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  public bind(): void {
-    this._subs = [
-      this.routerOutlet.activateEvents.subscribe(
-        () => { this.drawer.open(); }
-      ),
-      this.routerOutlet.deactivateEvents.subscribe(
-        () => { this.drawer.close(); }
-      ),
-    ];
-
-    if (this.routerOutlet.isActivated) {
-      this.drawer.open();
-    } else {
-      this.drawer.close();
-    }
-  }
-
-  public unbind(): void {
-    this._subs.forEach(s => s.unsubscribe());
-    this._subs = [];
-  }
-}