@elderbyte/ngx-starter 14.12.0-beta6 → 14.12.0

package/src/lib/components/select/elder-select-base.ts

@@ -1,355 +0,0 @@
-import {ContentChild, Directive, ElementRef, EventEmitter, InjectionToken, Input, NgZone, Output, TemplateRef} from '@angular/core';
-import {BehaviorSubject, combineLatest, Observable} from 'rxjs';
-import {LoggerFactory} from '@elderbyte/ts-logger';
-import {IDataContext} from '../../common/data/data-context/data-context';
-import {IDataSource} from '../../common/data/datasource/data-source';
-import {DataContextBuilder} from '../../common/data/data-context/data-context-builder';
-import {Filter} from '../../common/data/filters/filter';
-import {Sort} from '../../common/data/sort';
-import {ElderSelectValueDirective} from './elder-select-value.directive';
-import {SelectionModelPopupDirective} from './popup/selection-model-popup.directive';
-import {DataContextStatus} from '../../common/data/data-context/data-context-status';
-import {filter, map, switchMap} from 'rxjs/operators';
-import {runInZone} from '../../common/utils/ng-zone-utils';
-import {FilterContext} from '../../common/data/filters/filter-context';
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
-import {ElderFormFieldControlBase} from '../../common/forms/elder-form-field-control-base.directive';
-import {NgControl} from '@angular/forms';
-import {FocusMonitor} from '@angular/cdk/a11y';
-import {TranslateService} from '@ngx-translate/core';
-
-export type TextResolverFn = (value: any) => string;
-
-export class ElderSelectComponentState {
-
-  public static fromDataContext(dcState: DataContextStatus): ElderSelectComponentState {
-    if (dcState.loading) {
-      return ElderSelectComponentState.loading();
-    } else if (dcState.error) {
-      return ElderSelectComponentState.error(dcState.error);
-    } else {
-      return ElderSelectComponentState.idle();
-    }
-  }
-
-
-  public static idle(): ElderSelectComponentState {
-    return new ElderSelectComponentState(true, false, null);
-  }
-
-  public static loading(): ElderSelectComponentState {
-    return new ElderSelectComponentState(false, true, null);
-  }
-
-  public static error(error: string): ElderSelectComponentState {
-    return new ElderSelectComponentState(false, false, error);
-  }
-
-  constructor(
-    public readonly idle: boolean,
-    public readonly loading: boolean,
-    public readonly error: string
-  ) {
-  }
-}
-
-export const ELDER_SELECT_BASE = new InjectionToken<ElderSelectBase<any, any, any>>('ElderSelectBase');
-
-
-/**
- * Base component for Elder Selection Controls.
- *
- *  Elder Selection has the following abstract concept:
- *
- * - Suggestion-Model: A DataSource and derived DataContext for the (auto-complete) suggestions.
- *
- * @param TID Entity Id Type
- * @param T Entity Type
- * @param TValue Value backing the control. Can be the entity, the id or something else.
- */
-@Directive()
-// eslint-disable-next-line @angular-eslint/directive-class-suffix
-export abstract class ElderSelectBase<TId, TEntity, TValue> extends ElderFormFieldControlBase<TValue> {
-
-  /***************************************************************************
-   *                                                                         *
-   * Fields                                                                  *
-   *                                                                         *
-   **************************************************************************/
-
-  private readonly _logger = LoggerFactory.getLogger(this.constructor.name);
-  private readonly _filterContext = new FilterContext();
-
-  private _valueAsId: boolean;
-
-  protected timeoutAfterMs = 5000;
-
-  /**
-   * Define if elder-select should clean up the
-   * data-context resources for you.
-   *
-   * In more advanced scenarios where you plan to reuse the same data-context
-   * set this to false and release the resources yourself. (dataContext.close)
-   */
-  @Input()
-  public cleanUp = true;
-
-  public readonly displayPropertyResolver$ = new BehaviorSubject<TextResolverFn>((value: TEntity) => this.propertyStringValue(value, null));
-
-  /**
-   * Entity DataContext, which is used
-   * to side load entities by id and also
-   * to load suggestions when auto-completing.
-   */
-  public readonly dataContext$ = new BehaviorSubject<IDataContext<TEntity>>(null);
-
-  /**
-   * Page size. (Used for infinite scrolling chunks)
-   */
-  @Input()
-  public pageSize = 10;
-
-  @Input()
-  public queryFilter = 'query';
-
-  @Input()
-  public sorts: Sort[] = [];
-
-  @Input()
-  public icon: string;
-
-  /**
-   * The option template to customize the ui look.
-   */
-  @ContentChild(ElderSelectValueDirective, {read: TemplateRef, static: true})
-  public valueTemplateQuery: TemplateRef<any>;
-  private _valueTemplate: TemplateRef<any>;
-
-  @ContentChild(SelectionModelPopupDirective)
-  public selectionPopup: SelectionModelPopupDirective;
-
-  @Input()
-  public isOptionDisabledFn: (option: TEntity) => boolean;
-
-  @Input()
-  public isOptionHiddenFn: (option: TEntity) => boolean;
-
-  /**
-   * Emits an event when the user has clicked on the current
-   * selected entity.
-   */
-  @Output()
-  public readonly currentClicked = new EventEmitter<TEntity>();
-
-  public readonly state$ = new BehaviorSubject<ElderSelectComponentState>(ElderSelectComponentState.idle());
-  public readonly mergedState$: Observable<ElderSelectComponentState>;
-
-  /***************************************************************************
-   *                                                                         *
-   * Constructor                                                             *
-   *                                                                         *
-   **************************************************************************/
-
-  protected constructor(
-    private readonly zone: NgZone,
-    hostRef: ElementRef,
-    controlType: string,
-    focusMonitor: FocusMonitor,
-    translateService: TranslateService,
-    ngControl?: NgControl
-  ) {
-    super(hostRef, controlType, focusMonitor, translateService, ngControl);
-
-    this.mergedState$ = combineLatest([
-      this.dataContext$.pipe(filter(dc => !!dc), switchMap(dc => dc.status)),
-      this.state$
-    ]).pipe(
-      map(([dcState, state]) => {
-        if (dcState.idle) {
-          return state;
-        } else {
-          return ElderSelectComponentState.fromDataContext(dcState);
-        }
-      }),
-      runInZone(this.zone)
-    );
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Properties                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  @Input()
-  public set valueAsId(valueAsId: BooleanInput) {
-    this._valueAsId = coerceBooleanProperty(valueAsId);
-  }
-
-  public get valueAsId(): boolean {
-    return this._valueAsId;
-  }
-
-  /**
-   * The property used to display the values.
-   */
-  @Input()
-  public set displayProperty(property: string) {
-    this.displayPropertyResolver = (value => this.propertyStringValue(value, property));
-  }
-
-  @Input()
-  public set displayPropertyResolver(resolver: TextResolverFn) {
-    this.displayPropertyResolver$.next(resolver);
-  }
-
-  @Input()
-  public set filters(filters: Filter[]) {
-    this.replaceFilters(filters);
-  }
-
-  public get filters(): Filter[] {
-    return this._filterContext.filtersSnapshot;
-  }
-
-  @Input()
-  public set dataSource(source: IDataSource<TEntity>) {
-    this.dataContext = DataContextBuilder.start<TEntity>()
-      .pageSize(this.pageSize)
-      .build(source);
-  }
-
-  @Input()
-  public set data(data: Array<TEntity> | IDataContext<TEntity>) {
-
-    this.autoCleanUp();
-
-    if (data instanceof Array) {
-      this.dataContext = DataContextBuilder.start<TEntity>()
-        .localSort()
-        .buildLocal(data); // Memory leak
-      this.dataContext.start();
-    } else {
-      if (data) {
-        this.dataContext = data;
-      } else {
-        this.dataContext = DataContextBuilder.start<TEntity>().buildEmpty();
-      }
-    }
-  }
-
-  public set dataContext(data: IDataContext<TEntity>) {
-    this.autoCleanUp();
-    this.dataContext$.next(data);
-    this.onDataContextChanged(data);
-  }
-
-  public get dataContext(): IDataContext<TEntity> {
-    return this.dataContext$.getValue();
-  }
-
-  @Input()
-  public set valueTemplate(template: TemplateRef<any>) {
-    this._valueTemplate = template;
-  }
-
-  public get valueTemplate(): TemplateRef<any> {
-    return this._valueTemplate || this.valueTemplateQuery;
-  }
-
-  public override get errorState(): boolean {
-    return !!this.state$.getValue().error || super.errorState;
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Public API                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  public onCurrentClicked(entity: TEntity): void {
-    this.currentClicked.emit(entity);
-  }
-
-  public updateFilter(updatedFilter?: Filter): void {
-    this._filterContext.updateFilter(updatedFilter);
-  }
-
-  public updateFilters(updatedFilters?: Filter[]): void {
-    this._filterContext.updateFilters(updatedFilters);
-  }
-
-  public replaceFilters(newFilters?: Filter[]) {
-    this._filterContext.replaceFilters(newFilters);
-  }
-
-  public clearFilters(): void {
-    this._filterContext.clear();
-  }
-
-  public updateState(state: ElderSelectComponentState): void {
-    this.state$.next(state);
-    this.emitStateChange();
-  }
-
-  public override get shouldLabelFloat(): boolean {
-    return this.errorState || !!this.icon || super.shouldLabelFloat;
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Abstract API                                                            *
-   *                                                                         *
-   **************************************************************************/
-
-  /**
-   * Occurs when the suggestions data-context has changed
-   */
-  protected abstract onDataContextChanged(data: IDataContext<TEntity>): void;
-
-  /***************************************************************************
-   *                                                                         *
-   * Internal API                                                            *
-   *                                                                         *
-   **************************************************************************/
-
-  protected getEntityId(entity: TEntity): TId {
-    return this.dataContext?.dataSource?.getId(entity) || entity;
-  }
-
-  protected isEqual(a: TEntity, b: TEntity): boolean {
-    if (a === b) {
-      return true;
-    }
-    if (this.isEmpty(a) && this.isEmpty(b)) { // HACK: Handle empty string as undefined.
-      return true;
-    }
-    return this.getEntityId(a) === this.getEntityId(b);
-  }
-
-  protected isEmpty(a: TEntity): boolean {
-    return (a === null || a === undefined || <any>a === '');
-  }
-
-  /**
-   * Performs clean up of the current data context if auto clean up is enabled.
-   */
-  protected autoCleanUp(): void {
-    if (this.cleanUp && this.dataContext) {
-      this._logger.debug('Releasing DataContext resources to prevent memory leak. [cleanUp]="true"');
-      this.dataContext.close();
-    }
-  }
-
-  protected propertyStringValue(value: TEntity, property: string): string | null {
-    if (value === null || value === undefined) {
-      return null;
-    }
-
-    if (property) {
-      return (<any>value)[property];
-    }
-
-    return String(value);
-  }
-}

package/src/lib/components/select/elder-select-chip.directive.ts

@@ -1,32 +0,0 @@
-import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';
-
-@Directive({
-  selector: '[elderSelectChip]'
-})
-export class ElderSelectChipDirective {
-  constructor(
-    public templateRef: TemplateRef<any>,
-    public viewContainer: ViewContainerRef
-  ) { }
-}
-
-
-@Directive({
-  selector: '[elderSelectChipAvatar]'
-})
-export class ElderSelectChipAvatarDirective {
-  constructor(
-    public templateRef: TemplateRef<any>,
-    public viewContainer: ViewContainerRef
-  ) { }
-}
-
-@Directive({
-  selector: '[elderCustomInput]'
-})
-export class ElderSelectCustomInputDirective {
-  constructor(
-    public templateRef: TemplateRef<any>,
-    public viewContainer: ViewContainerRef
-  ) { }
-}

package/src/lib/components/select/elder-select-on-tab.directive.ts

@@ -1,150 +0,0 @@
-import {AfterViewInit, Directive, Host, HostListener, Inject, OnDestroy, SkipSelf} from '@angular/core';
-import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
-import {Subject} from 'rxjs/internal/Subject';
-import {delay, map, takeUntil, tap} from 'rxjs/operators';
-import {merge} from 'rxjs';
-import {LoggerFactory} from '@elderbyte/ts-logger';
-import {ValueAccessorBase} from '../../common/forms/value-accessor-base';
-import {ELDER_SELECT_BASE, ElderSelectBase} from './elder-select-base';
-import {MatOption} from '@angular/material/core';
-import {isElderEntityValueAccessor} from '../../common/forms/elder-entity-value-accessor';
-
-@Directive({
-  selector: '[elderSelectOnTab]'
-})
-export class ElderSelectOnTabDirective<TEntity = any, TId = any, TValue = TEntity | TId> implements AfterViewInit, OnDestroy {
-
-  /***************************************************************************
-   *                                                                         *
-   * Fields                                                                  *
-   *                                                                         *
-   **************************************************************************/
-
-  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
-
-  private readonly destroy$ = new Subject<void>();
-
-  private readonly controlValueAccessor: ValueAccessorBase<any>;
-
-  /**
-   * Whether the autocomplete panel was open before the event
-   */
-  private panelOpen = false;
-
-  /**
-   * Whether the user selected an option.
-   * (We want to ignore selections if there is already a selection present and the user tabs away)
-   */
-  private userInput = false;
-
-  /***************************************************************************
-   *                                                                         *
-   * Constructor                                                             *
-   *                                                                         *
-   **************************************************************************/
-
-  constructor(
-    private readonly autoTrigger: MatAutocompleteTrigger,
-    @SkipSelf() @Inject(ELDER_SELECT_BASE) private readonly elderSelectBase: ElderSelectBase<any, any, any>
-  ) {
-    this.controlValueAccessor = elderSelectBase;
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Event Listener                                                          *
-   *                                                                         *
-   **************************************************************************/
-
-  @HostListener('keydown.arrowup')
-  @HostListener('keydown.arrowdown')
-  public onOptionSelect(){
-    this.userInput = true;
-  }
-
-  @HostListener('keydown.tab')
-  public onBlur(): void {
-
-    if (!this.panelOpen) { return; }
-
-    if (!this.userInput) {
-      // The user did not select anything in the auto-complete
-
-      if (this.controlValueAccessor.value) {
-        this.logger.warn('Discarding TAB since the user did probably not intend to change the value! userInput:', this.userInput);
-        return;
-      }
-
-      if(!this.elderSelectBase.required) {
-        // The user did not select any option and no current value is present.
-        // Since the input is NOT marked as required, we assume the user did not want to select a value
-        return;
-      }
-    }
-
-    const activeOption = this.autoTrigger.activeOption as MatOption<TEntity>;
-    if (activeOption) {
-      const entity = activeOption.value;
-      this.writeEntity(entity);
-    }
-
-    this.reset();
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Life Cycle                                                              *
-   *                                                                         *
-   **************************************************************************/
-
-  public ngAfterViewInit() {
-    const autocomplete = this.autoTrigger.autocomplete;
-    merge(
-      autocomplete.opened.pipe(map(() => true)),
-      autocomplete.closed.pipe(map(() => false))
-    ).pipe(
-      takeUntil(this.destroy$),
-      delay(0)
-    ).subscribe(value => this.panelOpen = value);
-
-    this.autoTrigger.optionSelections.pipe( // TODO https://github.com/angular/components/pull/14813
-      takeUntil(this.destroy$),
-      tap(opt => this.logger.debug('[optionSelections] CHANGED ', opt)),
-      map(opt => opt.isUserInput)
-    ).subscribe(isUserInput => this.userInput = isUserInput);
-  }
-
-  public ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  /***************************************************************************
-   *                                                                         *
-   * Private methods                                                         *
-   *                                                                         *
-   **************************************************************************/
-
-  private reset(): void {
-    this.userInput = false;
-  }
-
-  private writeEntity(entity: TEntity): void {
-    const value = this.entityToValue(entity);
-    this.controlValueAccessor.updateValue(value);
-    this.autoTrigger.writeValue(value);
-    this.logger.warn('Wrote entity to control as value: ', value);
-  }
-
-  private entityToValue(entity: TEntity): TValue {
-    if (isElderEntityValueAccessor(this.controlValueAccessor)) {
-      // Since elder-select may use the entity id as value (valueAsId),
-      // we can not directly write to the value safely.
-      return this.controlValueAccessor.entityToValue(entity);
-    } else {
-      // By default, write the selected option to the control value
-      this.logger.warn('[controlValueAccessor] is not a ElderEntityValueAccessor!: ', this.controlValueAccessor);
-      return <any>entity;
-    }
-  }
-}

package/src/lib/components/select/elder-select-value.directive.ts

@@ -1,9 +0,0 @@
-import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';
-
-@Directive({selector: '[elderSelectValue]'})
-export class ElderSelectValueDirective {
-  constructor(
-    public templateRef: TemplateRef<any>,
-    public viewContainer: ViewContainerRef) {
-  }
-}

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

@@ -1,93 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {ElderSelectComponent} from './single/elder-select/elder-select.component';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatIconModule} from '@angular/material/icon';
-import {MatSelectModule} from '@angular/material/select';
-import {TranslateModule} from '@ngx-translate/core';
-import {TemplatedSelectionDialogComponent} from './popup/templated-selection-dialog/templated-selection-dialog.component';
-import {MatDialogModule} from '@angular/material/dialog';
-import {MatButtonModule} from '@angular/material/button';
-import {SelectionModelPopupDirective} from './popup/selection-model-popup.directive';
-import {ElderFormsDirectivesModule} from '../forms/directives/elder-forms-directives.module';
-import {MatInputModule} from '@angular/material/input';
-import {MatAutocompleteModule} from '@angular/material/autocomplete';
-import {MatToolbarModule} from '@angular/material/toolbar';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
-import {ElderTableModule} from '../data-view/table/elder-table.module';
-import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-import {ElderInfiniteScrollModule} from '../infinitescroll/elder-infinite-scroll.module';
-import {ElderSelectOnTabDirective} from './elder-select-on-tab.directive';
-import {ElderAutocompleteModule} from '../input/autocomplete/elder-autocomplete.module';
-import {ElderSelectValueDirective} from './elder-select-value.directive';
-import {ElderMultiSelectChipsComponent} from './multi/elder-multi-select-chips/elder-multi-select-chips.component';
-import {MatChipsModule} from '@angular/material/chips';
-import {ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectCustomInputDirective} from './elder-select-chip.directive';
-import {ElderAutoSelectFirstDirective} from './auto/elder-auto-select-first.directive';
-import {ElderPipesModule} from '../../pipes/elder-pipes.module';
-import { ElderClearSelectDirective } from './single/elder-clear-select.directive';
-import {MatTooltipModule} from '@angular/material/tooltip';
-import {ElderThemeModule} from '../theme/elder-theme.module';
-import {ElderSelectionPopupTriggerAdapterDirective} from './popup/selection-model-popup-trigger-adapter.directive';
-
-export {ElderSelectValueDirective} from './elder-select-value.directive';
-export * from './elder-select-chip.directive';
-export {ElderSelectOnTabDirective} from './elder-select-on-tab.directive';
-export {ElderSelectComponent} from './single/elder-select/elder-select.component';
-export {
-  TemplatedSelectionDialogComponent, ISelectionModelDialogOptions
-} from './popup/templated-selection-dialog/templated-selection-dialog.component';
-export {SelectionModelPopupDirective} from './popup/selection-model-popup.directive';
-export {ElderSelectionPopupTriggerAdapterDirective} from './popup/selection-model-popup-trigger-adapter.directive';
-export {ElderMultiSelectBase} from './multi/elder-multi-select-base';
-export {ElderMultiSelectChipsComponent, ChipAvatarSpec} from './multi/elder-multi-select-chips/elder-multi-select-chips.component';
-export {ElderAutoSelectFirstDirective} from './auto/elder-auto-select-first.directive';
-export {ElderClearSelectDirective} from './single/elder-clear-select.directive';
-
-@NgModule({
-    imports: [
-        CommonModule, FormsModule, ReactiveFormsModule,
-
-        MatFormFieldModule,
-        MatIconModule,
-        MatSelectModule,
-        MatDialogModule, MatButtonModule,
-        MatInputModule, MatAutocompleteModule,
-        MatToolbarModule, MatProgressBarModule,
-        MatProgressSpinnerModule,
-
-        TranslateModule,
-
-        ElderFormsDirectivesModule, ElderTableModule, ElderInfiniteScrollModule, ElderAutocompleteModule, MatChipsModule, ElderPipesModule, MatTooltipModule, ElderThemeModule,
-    ],
-  declarations: [
-    ElderSelectComponent,
-    ElderSelectValueDirective,
-    TemplatedSelectionDialogComponent,
-    SelectionModelPopupDirective,
-    ElderSelectionPopupTriggerAdapterDirective,
-    ElderSelectOnTabDirective,
-    ElderMultiSelectChipsComponent,
-    ElderSelectChipDirective,
-    ElderSelectChipAvatarDirective,
-    ElderAutoSelectFirstDirective,
-    ElderClearSelectDirective,
-    ElderSelectCustomInputDirective
-  ],
-  exports: [
-    ElderSelectComponent,
-    ElderSelectValueDirective,
-    TemplatedSelectionDialogComponent,
-    SelectionModelPopupDirective,
-    ElderSelectionPopupTriggerAdapterDirective,
-    ElderMultiSelectChipsComponent,
-    ElderSelectChipDirective,
-    ElderSelectChipAvatarDirective,
-    ElderAutoSelectFirstDirective,
-    ElderClearSelectDirective,
-    ElderSelectCustomInputDirective
-  ]
-})
-export class ElderSelectModule {
-}