@elderbyte/ngx-starter 14.12.0-beta6 → 14.12.1

package/src/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.ts

@@ -1,316 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ContentChild,
-  ElementRef,
-  forwardRef,
-  HostBinding,
-  Input,
-  NgZone,
-  Optional,
-  Self,
-  TemplateRef,
-  ViewEncapsulation
-} from '@angular/core';
-import {ElderMultiSelectBase} from '../elder-multi-select-base';
-import {BehaviorSubject, combineLatest, Observable} from 'rxjs';
-import {map} from 'rxjs/operators';
-import {LoggerFactory} from '@elderbyte/ts-logger';
-import {ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectCustomInputDirective} from '../../elder-select-chip.directive';
-import {ThemePalette} from '@angular/material/core';
-import {NgControl} from '@angular/forms';
-import {MatFormFieldControl} from '@angular/material/form-field';
-import {ELDER_SELECT_BASE, ElderSelectComponentState, TextResolverFn} from '../../elder-select-base';
-import {FocusMonitor} from '@angular/cdk/a11y';
-import {ElderDialogService} from '../../../dialogs/elder-dialog.service';
-import {TranslateService} from '@ngx-translate/core';
-
-class ChipModel<T> {
-  constructor(
-    public readonly value: T,
-    public readonly displayText: string,
-    public readonly color: ThemePalette,
-    public readonly removeable: boolean,
-    public readonly avatarSpec: ChipAvatarSpec
-  ) {
-  }
-}
-
-export interface ChipAvatarSpec {
-
-  /**
-   * Hides the avatar for this chip.
-   */
-  hide?: boolean;
-
-  /**
-   * Enables large styling of the avatar for this chip
-   */
-  large?: boolean;
-}
-
-@Component({
-  selector: 'elder-multi-select-chips',
-  templateUrl: './elder-multi-select-chips.component.html',
-  styleUrls: ['./elder-multi-select-chips.component.scss'],
-  // encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {provide: MatFormFieldControl, useExisting: ElderMultiSelectChipsComponent},
-    {
-      provide: ELDER_SELECT_BASE,
-      useExisting: forwardRef(() => ElderMultiSelectChipsComponent)
-    }
-  ]
-})
-export class ElderMultiSelectChipsComponent<TId = any, TEntity = any, TValue = any>
-  extends ElderMultiSelectBase<TId, TEntity, TValue> {
-
-  /***************************************************************************
-   *                                                                         *
-   * Fields                                                                  *
-   *                                                                         *
-   **************************************************************************/
-
-  public readonly selectChips$: Observable<ChipModel<TEntity>[]>;
-
-  @Input()
-  public defaultAvatarSpec: ChipAvatarSpec = {
-    hide: false,
-    large: false
-  };
-
-  /**
-   * Allows to customize each chip avatar individually.
-   */
-  @Input()
-  public avatarSpecFn: (e: TEntity) => ChipAvatarSpec = e => this.defaultAvatarSpec;
-
-  public selectable = true;
-
-  @Input()
-  public allowRemove = true;
-
-  @ContentChild(ElderSelectChipDirective, {read: TemplateRef, static: true})
-  public chipTemplateQuery: TemplateRef<any>;
-  private _chipTemplate: TemplateRef<any>;
-
-  @ContentChild(ElderSelectChipAvatarDirective, {read: TemplateRef, static: true})
-  public chipAvatarTemplateQuery: TemplateRef<any>;
-  private _chipAvatarTemplate: TemplateRef<any>;
-
-  @ContentChild(ElderSelectCustomInputDirective, {read: TemplateRef, static: true})
-  public customInputTemplateQuery: TemplateRef<any>;
-  private _customInputTemplate: TemplateRef<any>;
-
-  private readonly chipColorResolver$ = new BehaviorSubject<(o1: any) => ThemePalette>((value: TEntity) => undefined);
-  private _chipColorEnabled = false;
-  private readonly log = LoggerFactory.getLogger(this.constructor.name);
-
-  /***************************************************************************
-   *                                                                         *
-   * Constructor                                                             *
-   *                                                                         *
-   **************************************************************************/
-
-  constructor(
-    hostRef: ElementRef,
-    zone: NgZone,
-    focusMonitor: FocusMonitor,
-    translateService: TranslateService,
-    dialogService: ElderDialogService,
-    @Optional() @Self() ngControl: NgControl
-  ) {
-    super(zone, hostRef, 'multi-select-chips', focusMonitor, translateService, dialogService, ngControl);
-
-    this.placeholder = '...';
-
-    this.selectChips$ = combineLatest(
-      [
-        this.entities$,
-        this.entityIds$,
-        this.state$,
-        this.displayPropertyResolver$,
-        this.chipColorResolver$
-      ]
-    ).pipe(
-      map(([entities, entityIds, state, dPR, cCR]) =>
-        this.buildChipModelsOrFallback(entities, entityIds, state, dPR, cCR)
-      )
-    );
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Host Bindings                                                           *
-   *                                                                         *
-   **************************************************************************/
-
-  @HostBinding('class') get hostClass(): string {
-    return 'elder-select-base elder-multi-select';
-  }
-
-  @HostBinding('class.mat-select-disabled') get disabledClass(): boolean {
-    return this.disabled;
-  }
-
-  @HostBinding('class.mat-select-invalid') get errorStateClass(): boolean {
-    return this.errorState;
-  }
-
-  @HostBinding('class.mat-select-required') get requiredClass(): boolean {
-    return this.required;
-  }
-
-  @HostBinding('class.mat-select-empty') get emptyClass(): boolean {
-    return this.empty;
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Properties                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  @Input()
-  public set chipTemplate(template: TemplateRef<any>) {
-    this._chipTemplate = template;
-  }
-
-  public get chipTemplate(): TemplateRef<any> {
-    return this._chipTemplate || this.chipTemplateQuery;
-  }
-
-  @Input()
-  public set chipAvatarTemplate(template: TemplateRef<any>) {
-    this._chipAvatarTemplate = template;
-  }
-
-  public get chipAvatarTemplate(): TemplateRef<any> {
-    return this._chipAvatarTemplate || this.chipAvatarTemplateQuery;
-  }
-
-  @Input()
-  public set customInputTemplate(template: TemplateRef<any>) {
-    this._customInputTemplate = template;
-  }
-
-  public get customInputTemplate(): TemplateRef<any> {
-    return this._customInputTemplate || this.customInputTemplateQuery;
-  }
-
-  @Input()
-  public set chipColorEnabled(enabled: boolean) {
-    this._chipColorEnabled = enabled;
-  }
-
-  public get chipColorEnabled(): boolean {
-    return this.errorState || this._chipColorEnabled;
-  }
-
-  /**
-   * A function which returns the color of a given label object.
-   */
-  @Input()
-  public set chipColorResolver(fn: (o1: any) => ThemePalette) {
-    if (!fn) {
-      this.chipColorEnabled = false;
-      return;
-    }
-    if (typeof fn !== 'function') {
-      throw new Error('chipColorResolver must be a function!');
-    }
-    this.chipColorEnabled = true;
-    this.chipColorResolver$.next(fn);
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Public API                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  public resolveChipValue(e1: TEntity): any {
-    return this.getEntityId(e1);
-  }
-
-  public onChipKeyDown(event: KeyboardEvent, toRemove: TEntity): void {
-    this.log.warn('onChipKeyDown', event);
-    if(event.key == 'Backspace' || event.key == 'Delete'){
-      this.requestRemoveEntity(toRemove, event.shiftKey);
-    }
-  }
-
-  public onClickRemoveChip(
-    event: MouseEvent,
-    toRemove: TEntity
-  ): void {
-    event.stopPropagation();
-    event.preventDefault();
-    this.requestRemoveEntity(toRemove, event.shiftKey);
-  }
-
-  public focus(options?: FocusOptions) {
-    // TODO this.inputControl?.focus(options);
-    // this.customInputTemplate.focus(options)
-  }
-
-  public blur() {
-    // TODO this.inputControl?.blur();
-    // this.customInputTemplate.blur()
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Private methods                                                         *
-   *                                                                         *
-   **************************************************************************/
-
-  private buildChipModelsOrFallback(
-    entities: TEntity[],
-    entityIds: TId[],
-    state: ElderSelectComponentState,
-    dPR: TextResolverFn,
-    cCR: (o1: any) => ThemePalette
-  ): ChipModel<TEntity>[] {
-
-    if (state.error) {
-      return this.buildChipFallbackModels(entityIds);
-    }
-    return this.buildChipModels(entities, dPR, cCR);
-  }
-
-
-  private buildChipFallbackModels(entityIds: TId[]): ChipModel<TEntity>[] {
-    return entityIds.map(
-      id => new ChipModel<TEntity>(
-        <any>{id: id},
-        String(id),
-        'warn',
-        this.allowRemove && !this.isLocked,
-        this.defaultAvatarSpec
-      )
-    );
-  }
-
-  private buildChipModels(
-    entities: TEntity[],
-    dPR: TextResolverFn,
-    cCR: (o1: any) => ThemePalette
-  ): ChipModel<TEntity>[] {
-    if (entities) {
-      return entities.map(
-        e => new ChipModel<TEntity>(
-          e,
-          dPR(e),
-          cCR(e),
-          this.allowRemove && !this.isLocked,
-          this.avatarSpecFn(e) ?? this.defaultAvatarSpec
-        )
-      );
-    } else {
-      return <ChipModel<TEntity>[]>[];
-    }
-  }
-
-}

package/src/lib/components/select/multi/elder-multi-select-form-field.ts

@@ -1,80 +0,0 @@
-import {AfterViewInit, Directive, ViewChild} from '@angular/core';
-import {ElderSelectValueDirective} from '../elder-select-value.directive';
-import {ElderApplyControlFn} from '../../../common/forms/elder-from-field-base';
-import {ElderMultiSelectBase} from './elder-multi-select-base';
-import {ElderFromFieldMultiEntityBase} from '../../../common/forms/elder-from-field-multi-entity-base';
-import {ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectCustomInputDirective} from '../elder-select-chip.directive';
-import {ElderSelectBase} from '../elder-select-base';
-import {ElderMultiSelectChipsComponent} from './elder-multi-select-chips/elder-multi-select-chips.component';
-import {SelectionModelPopupDirective} from '../popup/selection-model-popup.directive';
-
-@Directive()
-export abstract class ElderMultiSelectFormField<TEntity, TId, TValue = TEntity | TId>
-  extends ElderFromFieldMultiEntityBase<TEntity, TId, TValue, ElderMultiSelectBase<TId, TEntity, TValue>>
-  implements AfterViewInit {
-
-  /***************************************************************************
-   *                                                                         *
-   * Fields                                                                  *
-   *                                                                         *
-   **************************************************************************/
-
-  @ViewChild(ElderSelectValueDirective)
-  public selectValueTemplate: ElderSelectValueDirective;
-
-  @ViewChild(SelectionModelPopupDirective)
-  public selectionModelPopupDirective: SelectionModelPopupDirective;
-
-  @ViewChild(ElderSelectChipDirective)
-  public selectChipDirective: ElderSelectChipDirective;
-
-  @ViewChild(ElderSelectChipAvatarDirective)
-  public selectChipAvatarDirective: ElderSelectChipAvatarDirective;
-
-  @ViewChild(ElderSelectCustomInputDirective)
-  public selectCustomInputDirective: ElderSelectCustomInputDirective;
-
-  /***************************************************************************
-   *                                                                         *
-   * Constructor                                                             *
-   *                                                                         *
-   **************************************************************************/
-
-  protected constructor(
-    initSelectFn: ElderApplyControlFn<ElderMultiSelectBase<TId, TEntity, TValue>>
-  ) {
-    super();
-    this.applyToControl(initSelectFn);
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Life Cycle                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  public ngAfterViewInit(): void {
-    const control = this.formFieldControl$.getValue();
-
-    if (control instanceof ElderSelectBase) {
-      if (this.selectValueTemplate) {
-        control.valueTemplate = this.selectValueTemplate.templateRef;
-      }
-      if (this.selectionModelPopupDirective) {
-        control.selectionPopup = this.selectionModelPopupDirective;
-      }
-    }
-
-    if (control instanceof ElderMultiSelectChipsComponent) {
-      if (this.selectChipDirective) {
-        control.chipTemplate = this.selectChipDirective.templateRef;
-      }
-      if (this.selectChipAvatarDirective) {
-        control.chipAvatarTemplate = this.selectChipAvatarDirective.templateRef;
-      }
-      if (this.selectCustomInputDirective) {
-        control.customInputTemplate = this.selectCustomInputDirective.templateRef;
-      }
-    }
-  }
-}

package/src/lib/components/select/popup/selection-model-popup-trigger-adapter.directive.ts

@@ -1,102 +0,0 @@
-import {ContentChild, Directive, EventEmitter, Input, Output, TemplateRef, ViewContainerRef} from '@angular/core';
-import {LoggerFactory} from '@elderbyte/ts-logger';
-import {SelectionModelPopupDirective} from './selection-model-popup.directive';
-import {Filter} from '../../../common/data/filters/filter';
-import {Sort} from '../../../common/data/sort';
-
-
-
-@Directive({
-  selector: '[elderSelectionPopupTriggerAdapter]',
-  exportAs: 'elderSelectionPopupTriggerAdapter',
-  host: {
-    '(click)': 'handleClick($event)'
-  },
-})
-export class ElderSelectionPopupTriggerAdapterDirective {
-
-  /***************************************************************************
-   *                                                                         *
-   * Fields                                                                  *
-   *                                                                         *
-   **************************************************************************/
-
-  private readonly log = LoggerFactory.getLogger(this.constructor.name);
-
-  @Output()
-  public readonly selectionChange = new EventEmitter<any[]>;
-
-  @Output()
-  public readonly selectionSingleChange = new EventEmitter<any>;
-
-  @Input()
-  public keyGetter = (entity: any) => entity.id;
-
-  @Input()
-  public selection: any[] = [];
-
-  @Input()
-  public filters: Filter[] = [];
-
-  @Input()
-  public sorts: Sort[] = [];
-
-  @Input()
-  public multiSelectionEnabled = false;
-
-  @ContentChild(SelectionModelPopupDirective)
-  public selectionPopup: SelectionModelPopupDirective;
-
-  /***************************************************************************
-   *                                                                         *
-   * Constructor                                                             *
-   *                                                                         *
-   **************************************************************************/
-
-  constructor(
-  ) { }
-
-  /***************************************************************************
-   *                                                                         *
-   * Public API                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-
-  /** Handles click events on the trigger. */
-  handleClick(event: MouseEvent): void {
-    if (this.selectionPopup) {
-      this.openSelectionPopup();
-    }
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Private methods                                                         *
-   *                                                                         *
-   **************************************************************************/
-
-  public openSelectionPopup(): void {
-    if (this.selectionPopup) {
-      this.selectionPopup.choose(
-        this.keyGetter,
-        this.selection || [],
-        this.filters || [],
-        this.sorts || [],
-        this.multiSelectionEnabled
-      ).subscribe(
-        (selection: any[]) => {
-          this.selectionChange.emit(selection)
-          if (!this.multiSelectionEnabled) {
-            const selectedEntity = selection?.length > 0 ? selection[0] : [];
-            this.selectionSingleChange.emit(selectedEntity)
-          }
-        }
-      );
-    } else {
-      this.log.warn('Cant open selection browser popup, since [SelectionModelPopupDirective] was not found!');
-    }
-  }
-
-
-}

package/src/lib/components/select/popup/selection-model-popup.directive.ts

@@ -1,145 +0,0 @@
-import {ChangeDetectorRef, Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
-import {LoggerFactory} from '@elderbyte/ts-logger';
-import {MatDialog, MatDialogRef} from '@angular/material/dialog';
-import {
-  ISelectionModelDialogOptions,
-  TemplatedSelectionDialogComponent
-} from './templated-selection-dialog/templated-selection-dialog.component';
-import {switchMap} from 'rxjs/operators';
-import {EMPTY, Observable, of} from 'rxjs';
-import {KeyGetterFn, SelectionModel} from '../../../common/selection/selection-model';
-import {Sort} from '../../../common/data/sort';
-import {Filter} from '../../../common/data/filters/filter';
-import {ElderTableProviders} from '../../data-view/table/model/elder-table-model-provider';
-import {ElderDataViewOptionsProvider} from '../../data-view/base/elder-data-view-options-provider';
-
-
-
-export function createSelectionModel(): SelectionModel<any> {
-  return new SelectionModel<any>();
-}
-
-export function createDataViewOptionsProvider(): ElderDataViewOptionsProvider {
-  return new ElderDataViewOptionsProvider();
-}
-
-@Directive({
-  selector: '[elderSelectionModelPopup]',
-  exportAs: 'elderSelectionModelPopup',
-  providers: [
-    {
-      provide: SelectionModel,
-      useFactory: createSelectionModel
-    },
-    {
-      provide: ElderDataViewOptionsProvider,
-      useFactory: createDataViewOptionsProvider
-    },
-    ElderTableProviders.ClearTableModel // Since this popup is frequently used inside an elder-table search box
-  ]
-})
-export class SelectionModelPopupDirective {
-
-  /***************************************************************************
-   *                                                                         *
-   * Fields                                                                  *
-   *                                                                         *
-   **************************************************************************/
-
-  private readonly log = LoggerFactory.getLogger(this.constructor.name);
-
-  private _transformerFn: (o: any) => any;
-
-  @Input('elderSelectionModelPopupTransform')
-  public set elderSelectionModelPopupTransform(fn: (o: any) => any) {
-    this._transformerFn = fn;
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Constructor                                                             *
-   *                                                                         *
-   **************************************************************************/
-
-  constructor(
-    private readonly templateRef: TemplateRef<any>,
-    private readonly viewContainer: ViewContainerRef,
-    private readonly dialog: MatDialog,
-    private readonly dataViewOptionsProvider: ElderDataViewOptionsProvider,
-    private readonly selectionModel: SelectionModel<any>,
-    private readonly changeDetectorRef: ChangeDetectorRef,
-  ) { }
-
-  /***************************************************************************
-   *                                                                         *
-   * Public API                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  /**
-   * Let the user choose some entities and return the selection.
-   */
-  public choose(
-    keyGetter: KeyGetterFn<any>,
-    currentSelection: any[],
-    filters?: Filter[],
-    sorts?: Sort[],
-    multi = false
-  ): Observable<any[]> {
-
-    this.dataViewOptionsProvider.updateOptions(
-      options => options
-        .withFilters(filters || [])
-        .withSorts(sorts || [])
-        .withSelectionMultiEnabled(multi)
-        .withInteractionMode('selection')
-    )
-
-    this.selectionModel.isMultipleSelection = multi;
-    this.selectionModel.keyGetterFn = keyGetter;
-    this.selectionModel.replaceSelection(currentSelection);
-
-    this.log.info('Replaced selection popup with current '+currentSelection.length+' entities:', currentSelection)
-
-    const dialogRef = this.openSelectDialog();
-
-    // This fixes dialog rendering when the browser template
-    // view container is outside the invoking control, which
-    // happens when using ng-content projection.
-    this.changeDetectorRef.markForCheck();
-
-    return dialogRef.afterClosed().pipe(
-      switchMap((chosenEntities: any[]) => {
-        if (chosenEntities) {
-          return this._transformerFn
-            ? of(chosenEntities.map(value => this._transformerFn(value)))
-            : of(chosenEntities);
-        } else {
-          return EMPTY;
-        }
-      })
-    );
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Private methods                                                         *
-   *                                                                         *
-   **************************************************************************/
-
-  private openSelectDialog(): MatDialogRef<TemplatedSelectionDialogComponent> {
-    return this.dialog.open(
-      TemplatedSelectionDialogComponent,
-      {
-        width: '90vw',
-        height: '90vh',
-        panelClass: 'custom-dialog-container',
-        data: <ISelectionModelDialogOptions> {
-          selectionComponentTemplate: this.templateRef
-        },
-        viewContainerRef: this.viewContainer
-      }
-    );
-  }
-
-}

package/src/lib/components/select/popup/templated-selection-dialog/templated-selection-dialog.component.html

@@ -1,18 +0,0 @@
-<div class="layout-col full">
-  <mat-toolbar elderTheme class="flex-none">
-    <button mat-icon-button type="button" matDialogClose="">
-      <mat-icon>close</mat-icon>
-    </button>
-    <span class="flex"></span>
-    <button mat-stroked-button type="submit" color="accent"
-            *ngIf="selectionModel.selection | async as selection"
-            [disabled]="!selection || selection.length === 0"
-            [mat-dialog-close]="selection"
-    >
-      {{'actions.select' | translate}}
-    </button>
-  </mat-toolbar>
-  <div class="layout-col flex" style="overflow: hidden">
-    <ng-container *ngTemplateOutlet="data.selectionComponentTemplate"></ng-container>
-  </div>
-</div>