@elderbyte/ngx-starter 14.11.0 → 14.11.1

package/src/lib/components/forms/search/search-box/elder-search-box.component.html

@@ -0,0 +1,66 @@
+<div fxLayout="row" fxFlex>
+
+  <!-- Main search input -->
+  <mat-form-field
+    *ngIf="overlayState$ | async as overlayState"
+    fxFlex="grow" fxFlexAlign="center"
+    [elderDense]="dense">
+
+    <button matPrefix mat-icon-button type="button"
+            [elderOverlayTrigger]="searchPanel" (click)="blurFocus($event)"
+    >
+      <mat-icon>search</mat-icon>
+    </button>
+
+    <input matInput type="text" [name]="name" [placeholder]="placeholder" #search cdkFocusInitial
+           ngModel
+           elderSearchInput [elderSearchInputKey]="queryKey" #searchInput="elderSearchInput"
+           [autocomplete]="(autoPanel && overlayState.hasOverlay) ? 'off' : autocomplete"
+           [elderOverlayOrigin]="searchPanel"
+           [elderOverlayTrigger]="searchPanel"
+           [elderOverlayTriggerType]="'focus'"
+           [elderOverlayTriggerEnabled]="autoPanel && overlayState.hasOverlay && (searchInput?.state$ | async)?.pristine"
+    >
+    <mat-hint *ngIf="hint">{{hint}}</mat-hint>
+
+    <div fxLayout="row" matSuffix *ngIf="searchModel.userDefinedAttributes$ | async as userDefinedFilters">
+
+      <button mat-icon-button type="button"
+              *ngIf="userDefinedFilters.length > 0"
+              (click)="clearSearch($event)"
+              name="clear" aria-label="Clear">
+        <mat-icon>close</mat-icon>
+      </button>
+
+      <button mat-icon-button type="button"
+              *ngIf="overlayState.hasOverlay" name="openPanel"
+              [matBadge]="userDefinedFilters.length"
+              [matBadgeHidden]="userDefinedFilters.length == 0"
+              matBadgeColor="accent"
+              [elderOverlayTrigger]="searchPanel" (click)="blurFocus($event)">
+        <mat-icon [color]="userDefinedFilters.length > 0 ? 'accent' : undefined">filter_list</mat-icon>
+      </button>
+
+    </div>
+  </mat-form-field>
+</div>
+
+
+<!-- Overlay Panel for advanced search -->
+<elder-overlay #searchPanel="elderOverlay">
+  <elder-dialog-panel class="elder-search-panel-container">
+
+    <!-- Project the users search inputs here -->
+    <ng-content select="elder-search-panel"></ng-content>
+
+    <div fxLayout="row" fxLayoutAlign="space-between center">
+      <button mat-raised-button type="button" name="clear"
+              (click)="clearSearch($event)">{{'context.reset' | translate}}
+      </button>
+
+      <button mat-raised-button type="button" name="ok" color="primary"
+              (click)="searchPanel.closeOverlay()">Ok
+      </button>
+    </div>
+  </elder-dialog-panel>
+</elder-overlay>

package/src/lib/components/forms/search/search-box/elder-search-box.component.ts

@@ -0,0 +1,149 @@
+import {
+  AfterContentInit, AfterViewInit, ChangeDetectionStrategy,
+  Component, ContentChild,
+  ElementRef, Input, OnDestroy,
+  OnInit,
+  ViewChild, ViewEncapsulation,
+} from '@angular/core';
+import { LoggerFactory } from '@elderbyte/ts-logger';
+import {ElderSearchContextDirective} from '../elder-search-context.directive';
+import {ElderSearchPanelComponent} from './elder-search-panel.component';
+import {BehaviorSubject, Subject} from 'rxjs';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
+
+
+export class OverlayState {
+  constructor(
+    public hasOverlay: boolean
+  ) { }
+}
+
+
+@Component({
+  selector: 'elder-search-box',
+  exportAs: 'elderSearchBox',
+  templateUrl: './elder-search-box.component.html',
+  styleUrls: ['./elder-search-box.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ElderSearchBoxComponent implements OnInit, OnDestroy, AfterViewInit, AfterContentInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger('ElderSearchBoxComponent');
+
+  private readonly unsubscribe$ = new Subject<void>();
+
+  // The search expression input Element
+  @ViewChild('search') search: ElementRef<HTMLInputElement>;
+
+  @ContentChild(ElderSearchPanelComponent) advancedSearch: ElderSearchPanelComponent;
+
+  public readonly overlayState$ = new BehaviorSubject<OverlayState>(new OverlayState(false));
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API Fields                                                       *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Display the search panel immediately when the user enters the search box.
+   */
+  @Input()
+  public autoPanel = true;
+
+  @Input()
+  public name = 'searchExpression';
+
+  @Input()
+  public queryKey = 'query';
+
+  @Input()
+  public placeholder: string;
+
+  @Input()
+  public label: string;
+
+  @Input()
+  public hint: string;
+
+  private _dense = false;
+
+  @Input()
+  public autocomplete = 'off';
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    public readonly searchModel: ElderSearchContextDirective,
+  ) {
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+
+  }
+
+  public ngAfterViewInit(): void {
+
+  }
+
+
+  public ngAfterContentInit(): void {
+    this.overlayState$.next(new OverlayState(!!this.advancedSearch));
+  }
+
+  public ngOnDestroy(): void {
+    this.unsubscribe$.next();
+    this.unsubscribe$.complete();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input()
+  public set dense(value: boolean) { this._dense = coerceBooleanProperty(value); }
+  public get dense(): boolean { return this._dense; }
+
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public blurFocus(event: any): void {
+    setTimeout(() => this.search.nativeElement.blur(), 0);
+  }
+
+  /**
+   * Occurs when the user clicks the clear search button
+   */
+  public clearSearch(event: any): void {
+    this.searchModel.reset();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+}

package/src/lib/components/forms/search/search-box/elder-search-panel.component.ts

@@ -0,0 +1,10 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+@Component({
+  selector: 'elder-search-panel',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ElderSearchPanelComponent {
+  constructor() { }
+}

package/src/lib/components/global-search/elder-global-search.component.html

@@ -0,0 +1,54 @@
+
+
+<div fxLayout="row" fxLayoutAlign="center center">
+
+  <span *ngIf="searchCollapsed" fxFlex></span>
+
+
+  <div *ngIf="!searchCollapsed" fxLayout="row" fxLayoutAlign="center center" fxFlex>
+
+    <!-- Query Keywords -->
+    <mat-form-field color="accent" floatPlaceholder="never" fxFlex>
+      <mat-icon matPrefix>search</mat-icon>
+      <input matInput type="search"
+             (keyup)="onQueryChanged()"
+             #txtSearch>
+    </mat-form-field>
+
+    <!-- Sort -->
+    <mat-menu #sortMenu="matMenu">
+      <button mat-menu-item type="button"
+              *ngFor="let sort of availableSort"
+              fxLayout="row" fxLayoutAlign="space-between center"
+              (click)="sortBy(sort)"
+      >
+        {{sort.name | translate}}
+        <mat-icon *ngIf="selectedSort?.id==sort.id">check</mat-icon>
+      </button>
+    </mat-menu>
+    <button mat-icon-button type="button"
+            *ngIf="canSort"
+            [matMenuTriggerFor]="sortMenu">
+      <mat-icon>sort</mat-icon>
+    </button>
+
+    <!-- Sort Asc/Desc-->
+    <button mat-icon-button type="button"
+            *ngIf="canSort"
+            (click)="toggleSortAsc()">
+      <mat-icon>{{sortAsc ? "arrow_downward" : "arrow_upward"}}</mat-icon>
+    </button>
+
+  </div>
+
+
+  <!-- Toggle Global Search -->
+  <button mat-icon-button type="button"
+          *ngIf="!isSearchHidden"
+          (click)="toggleSearch()"
+          [disabled]="globalSearchDisabled" >
+    <mat-icon>{{toggleIcon}}</mat-icon>
+  </button>
+</div>
+
+

package/src/lib/components/global-search/elder-global-search.component.ts

@@ -0,0 +1,158 @@
+import {
+  Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild,
+} from '@angular/core';
+import {ElderGlobalSearchService, SearchQuery, SortOption} from './elder-global-search.service';
+import {NavigationEnd, Router} from '@angular/router';
+import {Sort} from '../../common/data/sort';
+import {Subscription} from 'rxjs';
+import {filter} from 'rxjs/operators';
+
+
+/**
+ * @deprecated This component is considered EOL
+ */
+@Component({
+  selector: 'elder-global-search, ebs-global-search',
+  templateUrl: './elder-global-search.component.html',
+  styleUrls: ['./elder-global-search.component.scss']
+})
+export class ElderGlobalSearchComponent implements OnInit, OnDestroy {
+
+  private _searchCollapsed = true;
+  private _txtSearch: ElementRef;
+  private _subs: Subscription[] = [];
+
+  @Output()
+  public searchCollapsedChange = new EventEmitter<boolean>();
+
+  @Input()
+  public hideWhenDisabled: boolean;
+
+  private _availableSort: SortOption[] = [];
+  public selectedSort: SortOption;
+  public sortAsc = false;
+  public globalSearchDisabled: boolean;
+
+  constructor(
+    private router: Router,
+    private globalSearch: ElderGlobalSearchService) {
+
+    this.globalSearchDisabled = !globalSearch.showGlobalSearch;
+
+
+    this._subs.push(
+
+      globalSearch.showGlobalSearchObservable
+        .subscribe(value => {
+          this.globalSearchDisabled = !value;
+        }),
+
+      this.globalSearch.availableSortsObservable
+        .subscribe(available => {
+          this.availableSort = available;
+        }),
+
+      router.events.pipe(
+         filter(event => event instanceof NavigationEnd)
+        )
+        .subscribe(() => {
+          this.searchCollapsed = true;
+        })
+    );
+  }
+
+  public set availableSort(available: SortOption[]) {
+    this._availableSort = available;
+    if (available.length > 0) {
+        this.selectedSort = available[0];
+    }
+  }
+
+  public get availableSort(): SortOption[] {
+      return this._availableSort;
+  }
+
+  public get canSort(): boolean {
+    return this._availableSort && this.availableSort.length > 0;
+  }
+
+
+  ngOnInit() {
+    this.searchCollapsed = true;
+  }
+
+
+  ngOnDestroy(): void {
+    this._subs.forEach(sub => sub.unsubscribe());
+  }
+
+  @Input()
+  get searchCollapsed(): boolean {
+    return this._searchCollapsed;
+  }
+
+  @ViewChild('txtSearch')
+  set txtSearch(input: ElementRef) {
+    this._txtSearch = input;
+  }
+
+  set searchCollapsed(value: boolean) {
+    this._searchCollapsed = value;
+    this.searchCollapsedChange.emit(this.searchCollapsed);
+    if (!this._searchCollapsed) {
+      setTimeout(() => this._txtSearch.nativeElement.focus(), 0);
+    }
+  }
+
+  get toggleIcon(): string {
+    return this.searchCollapsed ? 'search' : 'close';
+  }
+
+  public toggleSearch() {
+    if (this.searchCollapsed) {
+      // Show search
+      this.searchCollapsed = false;
+    } else {
+      // Collapse search
+      this.searchCollapsed = true;
+      this.globalSearch.query = SearchQuery.Empty;
+    }
+  }
+
+  get isSearchHidden(): boolean {
+    return this.hideWhenDisabled && this.globalSearchDisabled;
+  }
+
+  public toggleSortAsc(): void {
+    this.sortAsc = !this.sortAsc;
+    this.onQueryChanged();
+  }
+
+  public sortBy(sort: SortOption) {
+    this.selectedSort = sort;
+    this.onQueryChanged();
+  }
+
+  public onQueryChanged() {
+
+    const sorts = this.selectedSort ? [this.convertToSort(this.selectedSort)] : [];
+
+    this.globalSearch.query = new SearchQuery(
+        this.keywordsValue,
+        sorts
+    );
+  }
+
+  private convertToSort(sort: SortOption): Sort {
+      return new Sort(sort.id, this.sortAsc ? 'asc' : 'desc');
+  }
+
+  private get keywordsValue(): string {
+    if (this._txtSearch) {
+      const txtInput = this._txtSearch.nativeElement as HTMLInputElement;
+      return txtInput.value;
+    }
+    return '';
+  }
+
+}

package/src/lib/components/global-search/elder-global-search.module.ts

@@ -0,0 +1,28 @@
+
+import {NgModule} from '@angular/core';
+import {ElderGlobalSearchComponent} from './elder-global-search.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {CommonModule} from '@angular/common';
+import {TranslateModule} from '@ngx-translate/core';
+
+export * from './elder-global-search.component';
+export * from './elder-global-search.service';
+
+/**
+ * @deprecated This module is considered EOL
+ */
+@NgModule({
+  declarations: [
+    ElderGlobalSearchComponent
+  ],
+  exports : [
+    ElderGlobalSearchComponent
+  ],
+  imports : [ CommonModule, MatIconModule, MatInputModule, MatButtonModule, MatMenuModule, FlexLayoutModule, TranslateModule ]
+})
+export class ElderGlobalSearchModule {
+}

package/src/lib/components/global-search/elder-global-search.service.ts

@@ -0,0 +1,118 @@
+import {Injectable} from '@angular/core';
+import {NavigationEnd, Router} from '@angular/router';
+import {Subject, Observable} from 'rxjs';
+import {filter, map, mergeMap} from 'rxjs/operators';
+import {Sort} from '../../common/data/sort';
+
+
+
+export class SortOption {
+    constructor(
+        public id: string,
+        public name: string
+    ) { }
+}
+
+/**
+ * Represents the search query which the user has configured
+ */
+export class SearchQuery {
+
+    public static Empty = new SearchQuery('', []);
+
+    constructor(
+        public keywords: string,
+        public sorts: Sort[]
+    ) { }
+}
+
+/**
+ * @deprecated This service is considered EOL
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class ElderGlobalSearchService {
+
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+
+    private _showGlobalSearch = false;
+    private _showGlobalSearchSubject = new Subject<boolean>();
+
+    private _query: SearchQuery;
+    private _querySubject = new Subject<SearchQuery>();
+    private _availableSorts = new Subject<SortOption[]>();
+
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+
+    constructor(
+        router: Router
+    ) {
+
+        router.events.pipe(
+            filter(event => event instanceof NavigationEnd),
+            map(() => router.routerState.root),
+            map(route => {
+                while (route.firstChild) { route = route.firstChild; }
+                return route;
+            }),
+            filter(route => route.outlet === 'primary'),
+            mergeMap(route => route.data)
+        )
+            .subscribe(currentRouteData  => {
+                const enableGlobalSearch = currentRouteData['enableGlobalSearch'];
+                this.showGlobalSearch = enableGlobalSearch != null ? !!enableGlobalSearch : !!currentRouteData['showGlobalSearch'];
+            });
+    }
+
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+
+
+    public get availableSortsObservable(): Observable<SortOption[]> {
+        return this._availableSorts;
+    }
+
+    public set availableSorts(sorts: SortOption[]) {
+        this._availableSorts.next(sorts);
+    }
+
+    public get queryObservable(): Observable<SearchQuery> {
+        return this._querySubject;
+    }
+
+    public get query(): SearchQuery {
+        return this._query;
+    }
+
+    public set query(value: SearchQuery) {
+        this._query = value;
+        this._querySubject.next(value);
+    }
+
+    public get showGlobalSearchObservable(): Observable<boolean> {
+        return this._showGlobalSearchSubject;
+    }
+
+    public get showGlobalSearch() {
+        return this._showGlobalSearch;
+    }
+
+    public set showGlobalSearch(value: boolean) {
+        this._showGlobalSearch = value;
+        this._showGlobalSearchSubject.next(value);
+    }
+
+
+}

package/src/lib/components/graph/elder-progress-bar/elder-progress-bar.component.html

@@ -0,0 +1,19 @@
+<div *ngIf="bars$ | async as bars" fxLayout="row" fxFlex="no-shrink"
+     [style.background]="barBackgroundColor"
+     [style.min-height]="minHeight"
+     style="min-width: 180px">
+
+  <div *ngIf="bars.length === 0"
+       [style.font-size]="minHeight+'px'">
+    &nbsp;
+  </div>
+
+  <span class="progress-content" *ngFor="let bar of bars"
+        [fxFlex]="bar.widthPercent"
+        [style.background]="bar.color"
+        [style.min-height]="minHeight"
+        [style.font-size]="minHeight+'px'">
+    &nbsp;
+  </span>
+
+</div>