@elderbyte/ngx-starter 14.11.0 → 14.11.1

package/src/lib/components/measures/quantity-input/elder-quantity-input.component.ts

@@ -0,0 +1,221 @@
+import {ChangeDetectionStrategy, Component, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {Quantity} from '../model/quantity';
+import {buildFormIntegrationProviders} from '../../../common/forms/template-composite-control';
+import {Unit} from '../model/unit';
+import {BehaviorSubject, combineLatest, Observable} from 'rxjs';
+import {filter, map, tap} from 'rxjs/operators';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {FormFieldBaseComponent} from '../../../common/forms/form-field-base.component';
+import {ViewProviders} from '../../../common/forms/view-providers';
+import {ElderUnitService} from '../elder-unit.service';
+import {FloatLabelType} from '@angular/material/form-field';
+import {DecimalPipe} from '@angular/common';
+import {MatInput} from '@angular/material/input';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
+
+@Component({
+  selector: 'elder-quantity-input',
+  templateUrl: './elder-quantity-input.component.html',
+  styleUrls: ['./elder-quantity-input.component.scss'],
+  providers: buildFormIntegrationProviders(ElderQuantityInputComponent),
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [ViewProviders.ParentControlContainer]
+})
+export class ElderQuantityInputComponent extends FormFieldBaseComponent<Quantity> implements OnInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly log = LoggerFactory.getLogger(this.constructor.name);
+
+  /**
+   * Weather the number 0 should result in valid 'required' validation or not.
+   * If true, the number 0 will be ignored as input when the 'required' directive is active.
+   */
+  private _requiredIgnoreZero = false;
+
+  /**
+   * Only allow a multiple of the given number to be a valid quantity.
+   */
+  @Input()
+  public multipleOf: number | number[] = null;
+
+  /**
+   * Display format for the quantity value:
+   * {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
+   */
+  @Input()
+  public displayFormat: string = null;
+
+  public readonly quantityInput$ = new BehaviorSubject<MatInput>(null);
+
+  public readonly unitSymbol$: Observable<string>;
+
+  public readonly formattedValue$: Observable<string | number>;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private readonly unitService: ElderUnitService,
+    private readonly decimalPipe: DecimalPipe
+  ) {
+    super();
+
+    this.floatLabel = 'auto';
+
+    this.value = Quantity.from(null, null);
+
+
+    this.unitSymbol$ = this.value$.pipe(
+      map(v => v?.unit),
+      map(unit => {
+        if (unit) {
+          return this.unitService.getUnitSymbol(unit);
+        } else {
+          return '';
+        }
+      })
+    );
+
+    this.formattedValue$ = combineLatest(
+      [
+        this.quantityInput$.pipe(filter(input => !!input)),
+        this.value$
+      ]
+    ).pipe(
+      map(([input, quantity]) => {
+        const quantityNumber = quantity?.value;
+        if (!input?.focused && this.displayFormat && quantityNumber) {
+          return this.decimalPipe.transform(quantityNumber, this.displayFormat, 'en')
+            .replace('\'', '')
+            .replace('’', '')
+            .replace(',', '');
+        } else {
+          return quantityNumber;
+        }
+      })
+    );
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  @ViewChild('quantityInput')
+  public set quantityInput(input: MatInput) {
+    this.quantityInput$.next(input);
+  }
+
+  @Input()
+  public set requiredIgnoreZero(ignore: boolean) {
+    this._requiredIgnoreZero = coerceBooleanProperty(ignore);
+  }
+
+  public get requiredIgnoreZero(): boolean {
+    return this._requiredIgnoreZero;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Deprecated Properties                                                   *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * @deprecated
+   */
+  @Output()
+  public get quantityNumberChange(): Observable<number | null> {
+    return this.quantityValueChange;
+  }
+
+  /**
+   * @deprecated
+   */
+  @Input()
+  public set quantityNumber(quantityValue: number) {
+    this.quantityValue = quantityValue;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+
+  @Output()
+  public get quantityValueChange(): Observable<number | null> {
+    return this.valueChange.pipe(
+      map(q => q?.value)
+    );
+  }
+
+  public get quantityValue(): number {
+    return this.value?.value;
+  }
+
+  @Input()
+  public set quantityValue(quantityValue: number) {
+    this.value = Quantity.from(this.value?.unit, quantityValue);
+  }
+
+  @Input()
+  public set unit(unit: Unit) {
+    this.value = Quantity.from(unit, this.value?.value);
+  }
+
+  @Output()
+  public get unitChange(): Observable<Unit | null> {
+    return this.valueChange.pipe(
+      map(q => q?.unit)
+    );
+  }
+
+  public get unit(): Unit {
+    return this.value?.unit;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public onQuantityValueChanged(value: number): void {
+    this.updateValue(Quantity.from(this.value?.unit, value));
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private Methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  protected valuesEquals(a: Quantity, b: Quantity): boolean {
+    if (a === b) {
+      return true;
+    }
+    return a?.value === b?.value
+      && a?.unit === b?.unit;
+  }
+
+}

package/src/lib/components/measures/util/elder-quantity.service.ts

@@ -0,0 +1,313 @@
+import {Unit} from '../model/unit';
+import {Quantity} from '../model/quantity';
+import {UnitInfo} from '../model/unit-registry';
+import {Injectable} from '@angular/core';
+import {ElderUnitService} from '../elder-unit.service';
+import {Dimensions} from '../model/dimensions';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ElderQuantityService {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  private readonly QUANTITY_CACHE_SIZE = 500;
+  private readonly QUANTITY_CACHE = new Map<string, Quantity>();
+
+  /***************************************************************************
+   *                                                                         *
+   * Builder support                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  public createArea(length: Quantity, width: Quantity): Dimensions {
+    return this.createDimensions(
+      length,
+      width,
+      Quantity.zero(length.unit)
+    );
+  }
+
+  public createDimensions(
+    length: Quantity,
+    width: Quantity,
+    height: Quantity
+  ): Dimensions {
+    return Dimensions.from(
+      length.unit,
+      length.value,
+      this.convertToUnit(width, length.unit).value,
+      this.convertToUnit(height, length.unit).value
+    );
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private readonly unitService: ElderUnitService
+  ) {
+  }
+
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public withUnit(quantity: Quantity, unit: Unit) {
+    return Quantity.from(unit, quantity.value);
+  }
+
+  public withValue(quantity: Quantity, value: number) {
+    return Quantity.from(quantity.unit, value);
+  }
+
+  public cacheLookup(lookup: Quantity): Quantity {
+    return this.QUANTITY_CACHE.get(this.getQuantityIdentifier(lookup));
+  }
+
+  public cacheUpdate(key: Quantity, value: Quantity) {
+    if (this.QUANTITY_CACHE.size >= this.QUANTITY_CACHE_SIZE) {
+      this.QUANTITY_CACHE.clear();
+    }
+    this.QUANTITY_CACHE.set(this.getQuantityIdentifier(key), value);
+  }
+
+  /**
+   * Multiplies a quantity with a multiplier and returns a quantity.
+   *
+   * Example:
+   * Quantity(10,'kg') * 3 = Quantity(30000,'g')
+   *
+   * @param quantity
+   * @param multiplier
+   */
+
+  public multiply(quantity: Quantity, multiplier: number): Quantity {
+
+    if (!quantity || !multiplier) {
+      return null;
+    }
+    return Quantity.from(
+      quantity.unit,
+      quantity.value * multiplier
+    );
+  }
+
+  /**
+   * Divides a quantity by another quantity and returns a scalar.
+   *
+   * Examples:
+   * Quantity(10,'kg') / Quantity(5,'kg') = 2
+   * Quantity(10,'kg') / Quantity(5,'g') = 2000
+   *
+   * @param dividend
+   * @param divisor
+   */
+  public divideByQuantity(dividend: Quantity, divisor: Quantity): number {
+
+    if (!dividend || !divisor) {
+      return null;
+    }
+    const dividendNormal =  this.toBaseUnitValue(dividend);
+    const divisorNormal =  this.toBaseUnitValue(divisor);
+    return dividendNormal / divisorNormal;
+  }
+
+
+  /**
+   * Sums up Quantities and returns a Quantity.
+   *
+   * Example:
+   * Quantity(10,'kg') + Quantity(5,'kg') + Quantity(5,'g') = Quantity(15005, 'g')
+   *
+   * @param quantities
+   */
+  public sum(quantities: Quantity[]): Quantity {
+    if (!quantities || quantities.length === 0) {
+      return null;
+    }
+
+    const targetUnit = quantities[0].unit;
+
+    return Quantity.from(
+      targetUnit,
+      quantities.reduce(
+        (total, add) => {
+          return total + this.convertToUnit(add, targetUnit).value;
+        }, 0
+      )
+    );
+  }
+
+  /**
+   * Subtracts a quantity from another quantity and returns a quantity.
+   *
+   * Example:
+   * Quantity(10,'kg') - Quantity(5,'g') = Quantity(9995, 'g')
+   *
+   * @param minuend
+   * @param subtrahend
+   */
+  public subtract(minuend: Quantity, subtrahend: Quantity): Quantity {
+    if (!minuend || !subtrahend) {
+      return null;
+    }
+    return Quantity.from(
+      minuend.unit,
+      minuend.value - this.convertToUnit(subtrahend, minuend.unit).value
+    );
+  }
+
+  /**
+   * Subtracts a quantity from another quantity and returns a quantity.
+   *
+   * Example:
+   * Quantity(10,'kg') + Quantity(500,'g') = Quantity(10.5, 'kg')
+   *
+   * @param left
+   * @param right
+   */
+  public add(left: Quantity, right: Quantity): Quantity {
+    if (!left || !right) {
+      return null;
+    }
+    return Quantity.from(
+      left.unit,
+      left.value - this.convertToUnit(right, left.unit).value
+    );
+  }
+
+  /**
+   * Transforms a quantity to another quantity of the same dimension by target-SI
+   *
+   * @param quantity
+   * @param targetUnit
+   */
+  public convertToUnit(quantity: Quantity, targetUnit: Unit): Quantity {
+    if (!quantity || !targetUnit) {
+      return null;
+    }
+
+    if (quantity.unit === targetUnit) {
+      return Quantity.from(quantity.unit, quantity.value);
+    }
+
+    const targetBaseFactor = this.unitService.getToBaseFactor(targetUnit);
+
+    if (targetBaseFactor > 0) {
+      return Quantity.from(
+        targetUnit,
+        this.toBaseUnitValue(quantity) / targetBaseFactor
+      );
+    } else {
+      this.logger.warn('Failed to convert quantity to target unit:' + targetUnit + '. Quantity: ', quantity);
+      return quantity;
+    }
+  }
+
+  public toBaseUnitValue(quantity: Quantity): number {
+    const targetBaseFactor = this.unitService.getToBaseFactor(quantity.unit);
+    return quantity.value * targetBaseFactor;
+  }
+
+  /**
+   * Returns a quantity in a normalized form.
+   * A cache is used to reduce calculations.
+   *
+   * 8500 kg -> 8.5 t
+   * 9000000 mm -> 9 km
+   * 1215 m -> 1.2 km
+   *
+   * @param quantity
+   */
+  public normalize(quantity: Quantity): Quantity {
+
+    // Check cache
+    const cachedItem = this.cacheLookup(quantity);
+
+    // Value is in cache
+    if (cachedItem) {
+      return cachedItem;
+    } else {
+
+      const targetQuantity = this.normalizeInternal(quantity);
+
+      // Update cache
+      this.cacheUpdate(quantity, targetQuantity);
+
+      return targetQuantity;
+
+    }
+  }
+
+
+
+  /***************************************************************************
+   *                                                                         *
+   * Private Methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private normalizeInternal(quantity: Quantity): Quantity {
+
+    // Given quantity value in base unit
+
+    const dimension = this.unitService.getUnitDimension(quantity.unit);
+
+    if (!dimension) { return quantity; }
+
+    const baseValue = this.toBaseUnitValue(quantity);
+
+    let suitableUnit: UnitInfo;
+
+    const dimensionUnits = this.unitService.getUnitInfosByDimension(dimension);
+
+    if (dimensionUnits) {
+
+      const factorSortedUnits = dimensionUnits.sort((a, b) => b.toBaseFactor - a.toBaseFactor);
+
+      for (const unitInfo of factorSortedUnits) {
+        const signedBaseValue = ((baseValue < 0) ? baseValue * -1 : baseValue);
+        if (unitInfo.toBaseFactor <= signedBaseValue) {
+          suitableUnit = unitInfo;
+          break;
+        }
+      }
+    } else {
+      this.logger.debug('Could not find Dimension info for ' + dimension + '. (' + quantity.unit + ' --> ' + dimension + ')');
+    }
+
+    if (!suitableUnit) {
+      return quantity;
+    }
+
+    const currentToBase = this.unitService.getToBaseFactor(quantity.unit);
+
+    // Ensure we prefer the initial unit if the actual value is not affected.
+    // This helps to be consistent and display the actual unit in rare cases when multiple unit alternatives exist (same factor)
+    if (suitableUnit.toBaseFactor === currentToBase) {
+      return quantity;
+    } else {
+      return this.convertToUnit(quantity, suitableUnit.unit);
+    }
+  }
+
+  private getQuantityIdentifier(quantity: Quantity): string {
+    return quantity.value + '-' + quantity.unit;
+  }
+
+}

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

@@ -0,0 +1,89 @@
+
+<!-- main container-->
+<div fxLayout="row" fxLayoutAlign="start center" fxFlex
+     [style.background-color]="backgroundColor" class="breadcrumb-bar"
+     *ngIf="{enabled: editMode$ | async} as editMode"
+>
+
+  <!-- path container -->
+  <form #breadCrumbForm="ngForm" fxLayout="row" fxLayoutAlign="start center" fxFlex
+       fxLayoutGap="12px" class="breadcrumb-path"
+       (click)="enableEditMode()"
+  >
+      <!-- path edit control (if editMode:enabled) -->
+      <mat-form-field fxFlex *ngIf="editMode.enabled" elderDense >
+        {{ pathInput.focus() }}
+        <input matInput type="text" name="pathInput" #pathInput
+               [ngModel]="path" (ngModelChange)="onPathInputChange($event)"
+               (blur)="onPathEditBlur($event)"
+               elderKeyEvent [elderKeyEventFilter]="'Enter'" (onElderKeyEvent)="onEnter()">
+      </mat-form-field>
+
+      <!-- navigation control (if editMode:disabled) -->
+      <ng-container *ngIf="!editMode.enabled">
+
+        <div fxFlex fxLayoutAlign="start center">
+
+          <div fxLayout="row" fxLayoutAlign="center center"
+               *ngFor="let node of nodes$ | async;let isFirst = first;let isLast = last">
+
+            <!-- arrow right icon as path element delimiter -->
+            <mat-icon *ngIf="!isFirst" class="noselect breadcrumb-arrow">keyboard_arrow_right</mat-icon>
+
+            <!-- root element (case root icon) -->
+            <a *ngIf="isFirst && rootIcon"
+               mat-icon-button class="breadcrumb"
+               (click)="goToPath(node)" elderStopEventPropagation
+            >
+              <mat-icon>{{rootIcon}}</mat-icon>
+            </a>
+
+            <!-- intermediate elements (not last and (not first or root icon)) -->
+            <a *ngIf="!isLast && (!isFirst || !rootIcon)"
+               mat-button class="breadcrumb"
+               (click)="goToPath(node)" elderStopEventPropagation
+            >
+              <span>{{node.name}}</span>
+            </a>
+
+            <!-- last element (is last and (not first or root icon)) -->
+            <a mat-button class="breadcrumb" *ngIf="isLast && (!isFirst || !rootIcon)"
+               (click)="null" elderStopEventPropagation
+            >
+              {{node.name}}
+              <mat-icon>arrow_drop_down</mat-icon>
+            </a>
+
+          </div>
+
+        </div>
+
+      </ng-container>
+
+  </form>
+
+  <!-- bread crumb action menu button -->
+  <button mat-icon-button type="button" [matMenuTriggerFor]="menu">
+
+    <mat-icon style="font-size: 22px">arrow_drop_down</mat-icon>
+
+    <mat-menu #menu="matMenu">
+
+      <button mat-menu-item type="button" [elderClipboardPut]="path">
+        <mat-icon>content_copy</mat-icon>
+        <span>{{'Pfad kopieren'}}</span>
+      </button>
+
+      <button mat-menu-item type="button" (click)="onMenuEditPathClick($event)" elderStopEventPropagation>
+        <mat-icon *ngIf="!editMode.enabled">edit</mat-icon>
+        <mat-icon *ngIf="editMode.enabled">done</mat-icon>
+        <span *ngIf="!editMode.enabled">{{'Pfad editieren'}}</span>
+        <span *ngIf="editMode.enabled">{{'Pfad bestätigen'}}</span>
+      </button>
+
+    </mat-menu>
+
+  </button>
+</div>
+
+