@sumaris-net/ngx-components 2.6.4-alpha4 → 2.6.4-alpha5

package/src/app/shared/material/boolean/material.boolean.ts

@@ -0,0 +1,239 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, Input, OnInit, Optional, Output, Provider, ViewChild } from '@angular/core';
+import {FloatLabelType, MatFormFieldAppearance} from '@angular/material/form-field';
+import { ControlValueAccessor, UntypedFormBuilder, UntypedFormControl, FormGroupDirective, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+import { isNil, isNotNil, toNumber } from '../../functions';
+import { InputElement } from '../../inputs';
+import { MatRadioButton, MatRadioChange } from '@angular/material/radio';
+import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
+
+const DEFAULT_VALUE_ACCESSOR: Provider = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => MatBooleanField),
+  multi: true
+};
+
+
+const noop = () => {
+};
+
+@Component({
+  selector: 'mat-boolean-field',
+  templateUrl: './material.boolean.html',
+  styleUrls: ['./material.boolean.scss'],
+  providers: [
+    DEFAULT_VALUE_ACCESSOR
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MatBooleanField implements OnInit, ControlValueAccessor, InputElement {
+  private _onChangeCallback: (_: any) => void = noop;
+  private _onTouchedCallback: () => void = noop;
+  private _writing = false;
+
+  _value: boolean;
+  _tabindex: number;
+
+  showRadio = false;
+
+  @Input() disabled = false;
+  @Input() formControl: UntypedFormControl;
+  @Input() formControlName: string;
+  @Input() placeholder: string;
+  @Input() floatLabel: FloatLabelType = 'auto';
+  @Input() appearance: MatFormFieldAppearance;
+  @Input() readonly = false;
+  @Input() required = false;
+  @Input() compact = false;
+  @Input() style: 'radio' | 'checkbox' | 'button';
+  @Input() buttonsColCount: number;
+  @Input('class') classList: string;
+  @Input() yesLabel = 'COMMON.YES';
+  @Input() noLabel = 'COMMON.NO';
+  @Input() showButtonIcons = true;
+  @Input() yesIcon = 'checkmark';
+  @Input() noIcon = 'close';
+
+  @Output('keyup.enter')
+  onPressEnter = new EventEmitter<any>();
+
+  @Output()
+  onBlur = new EventEmitter<FocusEvent>();
+
+  @Input() set tabindex(value: number) {
+    if (this._tabindex !== value) {
+      this._tabindex = value;
+      setTimeout(() => this.updateTabIndex());
+    }
+  }
+
+  get tabindex(): number {
+    return this._tabindex;
+  }
+
+  get value(): any {
+    return this._value;
+  }
+
+  @Input()
+  set value(v: any) {
+    if (v !== this._value) {
+      this._value = v;
+      this._onChangeCallback(v);
+    }
+  }
+
+  @ViewChild('yesButton') yesButton: MatRadioButton;
+  @ViewChild('noButton') noButton: MatRadioButton;
+  @ViewChild('checkboxButton') checkboxButton: MatCheckbox;
+  @ViewChild('fakeInput') fakeInput: ElementRef;
+
+  constructor(
+    private translate: TranslateService,
+    private formBuilder: UntypedFormBuilder,
+    private cd: ChangeDetectorRef,
+    @Optional() private formGroupDir: FormGroupDirective
+  ) { }
+
+  ngOnInit() {
+    this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName) as UntypedFormControl;
+    if (!this.formControl) throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-boolean-field>.');
+
+    this.style = this.style || (this.compact ? 'checkbox' : 'radio');
+
+    if (this.style === 'button') {
+      this.buttonsColCount = toNumber(this.buttonsColCount, 2);
+    }
+
+    // Force show radio if label always on top
+    this.showRadio = this.showRadio || this.floatLabel === 'always';
+
+    this.updateTabIndex();
+  }
+
+  writeValue(value: any, event?: Event): void {
+    if (this._writing) return;
+
+    this._writing = true;
+    if (value !== this._value) {
+      this._value = value;
+      this.showRadio = this.floatLabel === 'always' || isNotNil(this._value);
+      if (isNotNil(this.tabindex)) {
+        setTimeout(() => this.updateTabIndex());
+      }
+    }
+    this._writing = false;
+
+    if (this.style === 'button') {
+      if (value !== this.formControl.value) {
+        this.formControl.patchValue(value, {emitEvent: false});
+        this._onChangeCallback(value);
+      }
+      if (event) this.onPressEnter.emit(event);
+    }
+
+    this.markForCheck();
+  }
+
+  registerOnChange(fn: any): void {
+    this._onChangeCallback = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this._onTouchedCallback = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+
+  _onBlur(event: FocusEvent) {
+    this.checkIfTouched();
+    this.onBlur.emit(event);
+  }
+
+  _onFocusFakeInput(event: FocusEvent) {
+    event.preventDefault();
+
+    // Hide the fake input
+    if (this.fakeInput) {
+      this.fakeInput.nativeElement.classList.add('hidden');
+      this.fakeInput.nativeElement.tabIndex = -1;
+    }
+
+    // Focus on first button
+    this.focus();
+  }
+
+  focus() {
+    this.showRadio = true;
+    setTimeout(() => {
+      if (this.yesButton) {
+        this.yesButton.focus();
+      }
+      else if (this.checkboxButton) {
+        this.checkboxButton.focus();
+      }
+      this.updateTabIndex();
+    });
+    this.markForCheck();
+  }
+
+  onRadioValueChanged(event: MatRadioChange): void {
+    if (this._writing) return; // Skip if call by self
+    this._writing = true;
+    this._value = event.value;
+    this.checkIfTouched();
+    this._onChangeCallback(event.value);
+    this._writing = false;
+  }
+
+  onCheckboxValueChanged(event: MatCheckboxChange): void {
+    if (this._writing) return; // Skip if call by self
+    this._writing = true;
+    this._value = event.checked;
+    this.checkIfTouched();
+    this._onChangeCallback(event.checked);
+    this._writing = false;
+  }
+
+  /* -- private method -- */
+
+  private checkIfTouched() {
+    if (this.formControl.touched) {
+      this.markForCheck();
+      this._onTouchedCallback();
+    }
+  }
+
+  /**
+   * This is a special case, because, this component has a temporary component displayed before the first focus event
+   */
+  private updateTabIndex() {
+    if (isNil(this._tabindex) || this._tabindex === -1) return;
+
+    if (this.fakeInput) {
+      if (this.showRadio) {
+        this.fakeInput.nativeElement.classList.add('hidden');
+        this.fakeInput.nativeElement.tabIndex = -1;
+      } else {
+        this.fakeInput.nativeElement.classList.remove('hidden');
+        this.fakeInput.nativeElement.tabIndex = this._tabindex;
+      }
+    }
+    if (this.yesButton) {
+      this.yesButton._inputElement.nativeElement.tabIndex = this.showRadio ? this._tabindex : -1;
+      this.noButton._inputElement.nativeElement.tabIndex = this.showRadio ? this._tabindex + 1 : -1;
+    } else if (this.checkboxButton) {
+      this.checkboxButton._inputElement.nativeElement.tabIndex = this.showRadio ? this._tabindex : -1;
+    }
+    this.markForCheck();
+  }
+
+
+  private markForCheck() {
+    this.cd.markForCheck();
+  }
+}
+

package/src/app/shared/material/chips/chips.module.ts

@@ -0,0 +1,44 @@
+import {NgModule} from '@angular/core';
+import {MatChipsField} from './material.chips';
+import {MatChipsModule} from '@angular/material/chips';
+import {CommonModule} from '@angular/common';
+import {IonicModule} from '@ionic/angular';
+import {ReactiveFormsModule} from '@angular/forms';
+import {SharedPipesModule} from '../../pipes/pipes.module';
+import {SharedDirectivesModule} from '../../directives/directives.module';
+import {MatCommonModule} from '@angular/material/core';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+import {MatSelectModule} from '@angular/material/select';
+import {TranslateModule} from '@ngx-translate/core';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    ReactiveFormsModule,
+    SharedPipesModule,
+    SharedDirectivesModule,
+    MatCommonModule,
+    MatAutocompleteModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatIconModule,
+    MatButtonModule,
+    MatSelectModule,
+    MatChipsModule,
+    TranslateModule.forChild(),
+  ],
+  declarations: [
+    MatChipsField
+  ],
+  exports: [
+    MatChipsField
+  ]
+})
+export class SharedMatChipsModule {
+
+}

package/src/app/shared/material/chips/material.chips.html

@@ -0,0 +1,146 @@
+<ion-grid class="ion-no-padding">
+  <ion-row>
+    <ion-col class="ion-no-padding">
+      <mat-form-field [floatLabel]="floatLabel"
+                      [appearance]="appearance"
+                      class="material-chips"
+                      [class.mat-form-field-disabled]="disabled">
+        <div matPrefix>
+          <ng-container *ngTemplateOutlet="matPrefixTemplate"></ng-container>
+        </div>
+        <mat-label>{{placeholder}}</mat-label>
+        <mat-chip-list #chipList
+                       (focus)="filterChipsFocusEvent($event)" >
+          <mat-chip class="ion-no-margin"
+            *ngFor="let item of value"
+            [selectable]="false"
+            [removable]="!disabled"
+            (removed)="remove(item)"
+            [color]="chipColor"
+            >
+            {{displayWith(item)}}
+            <mat-icon matChipRemove *ngIf="!disabled">cancel</mat-icon>
+          </mat-chip>
+
+          <input #matInputText type="text"
+                 [matAutocomplete]="autocomplete"
+                 [matAutocompletePosition]="matAutocompletePosition"
+                 [formControl]="inputControl"
+                 [appAutofocus]="autofocus"
+                 [tabindex]="_tabindex"
+                 [readonly]="disabled"
+                 [hidden]="disabled"
+                 [required]="required"
+                 (click)="clicked.emit($event)"
+                 (focus)="filterInputTextFocusEvent($event)"
+                 (blur)="filterInputTextBlurEvent($event)"
+                 (keydown.escape)="keydownEscape.emit($event)"
+                 (keyup.enter)="keyupEnter.emit($event)"
+                 (keyup.arrowDown)="!autocomplete.showPanel && dropButtonClick.emit($event)"
+                 [matChipInputFor]="chipList"
+          >
+        </mat-chip-list>
+
+        <!-- autocomplete -->
+        <mat-autocomplete #autocomplete="matAutocomplete"
+                          (optionSelected)="add($event)"
+                          autoActiveFirstOption
+                          [displayWith]="displayWith"
+                          [class]="classList"
+                          [panelWidth]="panelWidth">
+          <!-- Headers -->
+          <ion-row class="mat-autocomplete-header column ion-no-padding">
+            <ion-col *ngFor="let attr of displayAttributes; index as i" [size]="displayColumnSizes[i]">
+              <ion-label [innerHTML]="displayColumnNames[i] | translate"></ion-label>
+            </ion-col>
+          </ion-row>
+
+              <!-- Options -->
+          <ng-container *ngIf="$filteredItems | async as items; else loadingTemplate">
+            <!-- No item option -->
+            <mat-option *ngIf="items | isEmptyArray" class="ion-padding text-italic" disabled>
+                <ion-label><i>{{noResultMessage | translate}}</i></ion-label>
+            </mat-option>
+
+            <mat-option *ngFor="let item of items" [value]="item" class="ion-no-padding">
+              <ion-row [classList]="item.classList">
+                <ion-col *ngFor="let path of displayAttributes; index as i;"
+                         [size]="displayColumnSizes[i]"
+                         [title]="text.innerText">
+                  <ion-text><span #text [innerHTML]="item | propertyGet: path | highlight: { search: inputControl.value, withAccent: highlightAccent }"></span></ion-text>
+                </ion-col>
+              </ion-row>
+            </mat-option>
+
+            <!-- More item -->
+            <mat-option *ngIf="_moreItemsCount" (ngInit)="_initAutocompleteInfiniteScroll()"
+                        class="ion-padding" disabled>
+              <ion-skeleton-text [animated]="true" style="width: 100%"></ion-skeleton-text>
+            </mat-option>
+          </ng-container>
+
+
+          <!-- Loading spinner -->
+          <ng-template #loadingTemplate>
+            <mat-option *ngIf="(matInputText.value | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate"
+                        class="ion-padding" disabled>
+              <ion-skeleton-text [animated]="true" style="width: 100%"></ion-skeleton-text>
+            </mat-option>
+          </ng-template>
+
+          <!-- Need more characters -->
+          <ng-template #waitMoreCharacterTemplate>
+            <mat-option class="ion-padding text-italic" disabled>
+              <ion-label>
+                {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}
+              </ion-label>
+            </mat-option>
+          </ng-template>
+
+          <!-- footer -->
+          <ion-row *ngIf="itemCount as count" class="mat-autocomplete-footer ion-no-padding">
+            <ion-col>
+              <ion-text class="ion-float-end ion-padding-end"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>
+            </ion-col>
+          </ion-row>
+
+        </mat-autocomplete>
+
+        <div matSuffix class="mat-form-field-suffix-bottom">
+          <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
+        </div>
+
+        <mat-error *ngIf="formControl.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
+        <ng-content select="[matError]"></ng-content>
+
+      </mat-form-field>
+
+    </ion-col>
+    <ion-col size="auto" class="ion-align-self-center">
+      <ng-content select="[matAfter]"></ng-content>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+<ng-template #matPrefixTemplate>
+  <ng-content select="[matPrefix]"></ng-content>
+</ng-template>
+
+
+<ng-template #matSuffixTemplate>
+  <button matSuffix mat-icon-button tabindex="-1"
+          type="button"
+          (click)="dropButtonClick.emit($event)"
+          [hidden]="disabled">
+    <mat-icon class="large select-arrow">arrow_drop_down</mat-icon>
+  </button>
+  <button matSuffix mat-icon-button tabindex="-1"
+          type="button"
+          *ngIf="clearable"
+          (click)="clearValue($event)"
+          [hidden]="disabled || !formControl.value">
+    <mat-icon>close</mat-icon>
+  </button>
+
+  <ng-content select="[matSuffix]"></ng-content>
+</ng-template>

package/src/app/shared/material/chips/material.chips.scss

@@ -0,0 +1,65 @@
+:host {
+  width: 100%;
+  display: inline-block;
+  position: relative;
+
+  &.ion-text-wrap {
+    ion-label {
+      white-space: normal !important;
+    }
+  }
+}
+
+button[hidden] {
+  display: none;
+}
+.mat-standard-chip.mat-chip-with-trailing-icon {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-right: 7px;
+  padding-left: 12px;
+}
+// This try to copy style as .mat-select-arrow
+mat-icon.select-arrow {
+  color: rgba(0,0,0,0.47);
+  font-size: 150%;
+}
+
+.mat-chip.mat-standard-chip {
+  margin: 1px 0 0 2px !important;
+  min-height: calc(32px - 0.5em - 1px);
+  &.mat-chip-with-trailing-icon {
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-right: 7px;
+    padding-left: 12px;
+
+    mat-icon {
+      color: inherit;
+    }
+  }
+
+  &.mat-primary {
+    background-color: var(--ion-color-primary);
+    color: var(--ion-color-primary-contrast);
+  }
+  &.mat-secondary {
+    background-color: var(--ion-color-secondary);
+    color: var(--ion-color-secondary-contrast);
+  }
+  &.mat-tertiary {
+    background-color: var(--ion-color-tertiary);
+    color: var(--ion-color-tertiary-contrast);
+  }
+  &.mat-accent {
+    background-color: var(--ion-color-accent);
+    color: var(--ion-color-accent-contrast);
+  }
+  &.mat-warning {
+    background-color: var(--ion-color-warning);
+    color: var(--ion-color-warning-contrast);
+  }
+}
+.mat-form-field-appearance-legacy .mat-standard-chip {
+  min-height: calc(32px - 0.4375em - 1px);
+}