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

package/src/app/shared/material/badge/badge.test.html

@@ -0,0 +1,261 @@
+
+<ion-header>
+  <ion-toolbar color="primary">
+
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+
+    <ion-title>matBadgeIcon directive</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+
+  <!-- small badge -->
+  <p>
+    <ion-text color="tertiary">
+      <span appBadge
+            appBadgeMatIcon="check"
+            appBadgeSize="small"
+            appBadgeColor="accent"
+            appBadgeOverlap="false">Small badge
+        <span class="mat-badge-content"></span>
+      </span>
+    </ion-text>
+  </p>
+
+  <!-- medium badge -->
+  <p>
+    <ion-text appBadge appBadgeMatIcon="check"
+              appBadgeSize="medium"
+              [appBadgeColor]="'tertiary'|matColor"
+              appBadgeOverlap="false"
+    >Medium badge</ion-text>
+  </p>
+
+  <!-- small badge -->
+  <p>
+    <ion-label appBadge appBadgeMatIcon="close" appBadgeSize="large"
+          appBadgeOverlap="false">Large badge</ion-label>
+  </p>
+
+  <!-- default size badge -->
+  <p>
+    <ion-label appBadge appBadgeMatIcon="check" [appBadgeColor]="'success'|matColor"
+            appBadgeOverlap="false">Badge (no size, no color)
+    </ion-label>
+  </p>
+
+  <!-- ion icon -->
+  <p>
+    <ion-label appBadge
+               appBadgeIcon="checkmark"
+               [appBadgeColor]="'success'|matColor"
+               appBadgeOverlap="false">Badge with ion-icon
+    </ion-label>
+  </p>
+
+  <!-- ion icon clear -->
+  <p>
+    <ion-label appBadge
+               appBadgeIcon="checkmark-circle"
+               [appBadgeColor]="'tertiary'|matColor"
+               appBadgeFill="clear"
+               appBadgeOverlap="false">Badge with clear icon
+    </ion-label>
+  </p>
+
+  <!-- changing text-->
+  <ion-row>
+    <ion-col>
+      <ion-label appBadge
+                        appBadgeIcon="checkmark-circle"
+                        [appBadgeColor]="'tertiary'|matColor"
+                        appBadgeFill="clear"
+                        appBadgeOverlap="false">{{userText}}
+      </ion-label>
+    </ion-col>
+    <ion-col>
+      <input type="text" [value]="userText" (input)="onInputChanged($event)">
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col>Configurable example :</ion-col>
+  </ion-row>
+  <ion-row class="ion-no-padding">
+    <ion-col size="auto">
+      <mat-icon [style.color]="'var(--ion-color-secondary)'"
+                appBadge
+                [appBadgeIcon]="$icon|async"
+                [appBadgeColor]="$color|async|matColor"
+                [appBadgeHidden]="$hidden|async"
+                [appBadgeFill]="$fill|async"
+                [appBadgeSize]="$size|async"
+                appBadgeOverlap="true"
+                appBadgePosition="above before">
+        <ion-icon slot="icon-only"
+                  [color]="'secondary'"
+                  name="navigate"
+        ></ion-icon>
+      </mat-icon>
+    </ion-col>
+
+    <ion-col>
+      <mat-form-field>
+        <mat-select placeholder="appBadgeColor"
+                    [value]="$color.value"
+                    (selectionChange)="this.$color.next($event.value)">
+          <mat-option [value]="'primary'">primary</mat-option>
+          <mat-option [value]="'secondary'">secondary</mat-option>
+          <mat-option [value]="'tertiary'">tertiary</mat-option>
+          <mat-option [value]="'danger'">danger</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </ion-col>
+
+    <ion-col>
+      <mat-form-field>
+        <mat-select placeholder="appBadgeIcon"
+                    [value]="$icon.value"
+                    (selectionChange)="this.$icon.next($event.value)">
+          <mat-option [value]="'checkmark-circle'">checkmark-circle</mat-option>
+          <mat-option [value]="'alert-circle'">alert-circle</mat-option>
+          <mat-option [value]="'alert'">alert</mat-option>
+          <mat-option [value]="'flag'">flag</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </ion-col>
+
+    <ion-col>
+      <mat-form-field>
+        <mat-select placeholder="appBadgeSize"
+                    [value]="$size.value"
+                    (selectionChange)="this.$size.next($event.value)">
+          <mat-option [value]="'large'">large</mat-option>
+          <mat-option [value]="'medium'">medium</mat-option>
+          <mat-option [value]="'small'">small</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </ion-col>
+
+    <ion-col>
+      <mat-form-field>
+        <mat-select placeholder="appBadgeFill"
+                    [value]="$fill.value"
+                    (selectionChange)="this.$fill.next($event.value)">
+          <mat-option [value]="'clear'">clear</mat-option>
+          <mat-option [value]="'solid'">solid</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </ion-col>
+
+    <ion-col>
+      <mat-form-field>
+        <mat-select placeholder="appBadgeHidden"
+                    [value]="$hidden.value"
+                    (selectionChange)="this.$hidden.next($event.value)">
+          <mat-option [value]="true">true</mat-option>
+          <mat-option [value]="false">false</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </ion-col>
+
+  </ion-row>
+
+  <ion-row>
+    <ion-col size="auto">
+      <p>mat-raised-button:</p>
+    </ion-col>
+    <ion-col>
+      <button mat-raised-button color="primary"
+              [appBadgeIcon]="$icon|async"
+              [appBadgeColor]="$color|async|matColor"
+              [appBadgeHidden]="$hidden|async"
+              [appBadgeFill]="$fill|async"
+              [appBadgeSize]="$size|async"
+              appBadgeOverlap="true"
+              appBadgePosition="below after">
+        {{userText}}
+      </button>
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col size="auto">
+      <p>mat-button with mat-label:</p>
+    </ion-col>
+    <ion-col>
+      <button mat-button color="primary"
+              class="ion-no-padding"
+              [appBadgeIcon]="$icon|async"
+              [appBadgeColor]="$color|async|matColor"
+              [appBadgeHidden]="$hidden|async"
+              [appBadgeFill]="$fill|async"
+              [appBadgeSize]="$size|async"
+              matBadgeOverlap="true"
+              matBadgePosition="above after">
+        {{userText}}
+      </button>
+    </ion-col>
+  </ion-row>
+
+  <h4>Angular Material Badge (standard way)</h4>
+
+  <ion-row>
+    <ion-col size="auto">
+      <p>mat-icon:</p>
+    </ion-col>
+    <ion-col>
+      <mat-icon [style.color]="'var(--ion-color-secondary)'"
+                [matBadge]="'!'"
+                [matBadgeColor]="$color|async|matColor"
+                [matBadgeHidden]="$hidden|async"
+                [matBadgeSize]="$size|async"
+                matBadgeOverlap="true">
+        <ion-icon slot="icon-only"
+                  [color]="'secondary'"
+                  name="navigate"
+        ></ion-icon>
+      </mat-icon>
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col size="auto">
+      <p>mat-button:</p>
+    </ion-col>
+    <ion-col>
+      <button mat-raised-button color="primary" [matBadge]="matBadgeContent"
+              [matBadgeColor]="$color|async|matColor"
+              [matBadgeHidden]="$hidden|async"
+              [matBadgeSize]="$size|async"
+              matBadgeOverlap="true"
+              matBadgePosition="above after">
+        {{userText}}
+      </button>
+    </ion-col>
+
+    <ion-col>
+      <input type="text" [value]="matBadgeContent" (input)="onMatBadgeContentChanged($event)">
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col size="auto">
+      <p>mat-button</p>
+    </ion-col>
+    <ion-col>
+      <button mat-button color="primary"
+              [matBadge]="matBadgeContent"
+              [matBadgeColor]="$color|async|matColor"
+              [matBadgeHidden]="$hidden|async"
+              [matBadgeSize]="$size|async"
+              matBadgeOverlap="true"
+              matBadgePosition="after">
+            {{userText}}
+      </button>
+    </ion-col>
+  </ion-row>
+</ion-content>

package/src/app/shared/material/badge/badge.test.ts

@@ -0,0 +1,36 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/core';
+import {BehaviorSubject} from 'rxjs';
+import {MatBadgeFill} from './badge.directive';
+import {MatBadgeSize} from '@angular/material/badge';
+import {AppColors} from '../../types';
+
+@Component({
+  selector: 'mat-badge-test',
+  templateUrl: './badge.test.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MatBadgeTestPage {
+
+  userText: string = 'A custom string';
+  matBadgeContent: string = '!';
+
+  $icon = new BehaviorSubject<string>('alert');
+  $size = new BehaviorSubject<MatBadgeSize>('small');
+  $fill = new BehaviorSubject<MatBadgeFill>('solid');
+  $color = new BehaviorSubject<AppColors>('danger');
+  $hidden = new BehaviorSubject<boolean>(false);
+  $overlap = new BehaviorSubject<boolean>(false);
+
+  constructor(private cd: ChangeDetectorRef) {
+  }
+
+  onInputChanged(event: any) {
+    this.userText = event.target.value;
+    this.cd.markForCheck();
+  }
+
+  onMatBadgeContentChanged(event: any) {
+    this.matBadgeContent = event.target.value;
+    this.cd.markForCheck();
+  }
+}

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

@@ -0,0 +1,40 @@
+import {NgModule} from '@angular/core';
+import {MatCommonModule} from '@angular/material/core';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {TranslateModule} from '@ngx-translate/core';
+import {CommonModule} from '@angular/common';
+import {IonicModule} from '@ionic/angular';
+import {SharedPipesModule} from '../../pipes/pipes.module';
+import {ReactiveFormsModule} from '@angular/forms';
+import {TextMaskModule} from 'angular2-text-mask';
+import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
+import {MatBooleanField} from './material.boolean';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    ReactiveFormsModule,
+    SharedPipesModule,
+    MatCommonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatRadioModule,
+    MatCheckboxModule,
+    TextMaskModule,
+    NgxMaterialTimepickerModule,
+    TranslateModule.forChild()
+  ],
+  exports: [
+    MatBooleanField
+  ],
+  declarations: [
+    MatBooleanField
+  ]
+})
+export class SharedMatBooleanModule {
+}
+

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

@@ -0,0 +1,155 @@
+<mat-form-field  *ngIf="readonly; else writable"
+                 [floatLabel]="floatLabel"
+                 class="mat-form-field-disabled {{classList}}">
+  <div matPrefix>
+    <ng-container *ngTemplateOutlet="matPrefixTemplate"></ng-container>
+  </div>
+  <input matInput hidden type="text" readonly
+         [placeholder]="placeholder"
+         [formControl]="formControl">
+  <ion-text>{{(value == null ? 'COMMON.EMPTY_OPTION' : (value === true ? yesLabel : noLabel)) | translate }}</ion-text>
+  <div matSuffix>
+    <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
+  </div>
+</mat-form-field>
+
+<ng-template #writable>
+  <ng-container [ngSwitch]="style">
+
+    <!-- Radio -->
+    <mat-form-field *ngSwitchCase="'radio'"
+                    [floatLabel]="showRadio && (!floatLabel || floatLabel === 'auto') ? 'always': floatLabel"
+                    [appearance]="appearance"
+                    class="mat-boolean-field mat-boolean-field-radio {{classList}}">
+      <mat-label *ngIf="placeholder && floatLabel!=='never'">
+        {{placeholder}}
+        <span [hidden]="showRadio">({{yesLabel|translate}}/{{'COMMON.NO'|translate}})</span>
+      </mat-label>
+      <div matPrefix>
+        <ng-container *ngTemplateOutlet="matPrefixTemplate"></ng-container>
+      </div>
+      <input matInput #fakeInput type="text" readonly="true"
+             [formControl]="formControl"
+             (focus)="_onFocusFakeInput($event)"
+             [required]="required"
+             [class.cdk-visually-hidden]="showRadio"
+             [tabindex]="tabindex">
+
+      <!-- radio button -->
+      <mat-radio-group [hidden]="!showRadio"
+                       [formControl]="formControl"
+                       (change)="onRadioValueChanged($event)">
+        <mat-radio-button #yesButton [value]="true">
+          <span>{{yesLabel|translate}}</span>
+        </mat-radio-button>&nbsp;
+        <mat-radio-button #noButton [value]="false">
+          <span>{{noLabel|translate}}</span>
+        </mat-radio-button>
+      </mat-radio-group>
+
+      <mat-error *ngIf="formControl.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
+
+      <div matSuffix>
+        <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
+      </div>
+    </mat-form-field>
+
+    <!-- Checkbox -->
+    <mat-form-field *ngSwitchCase="'checkbox'"
+                    [floatLabel]="floatLabel"
+                    [appearance]="appearance"
+                    class="mat-boolean-field mat-boolean-field-checkbox {{classList}}">
+      <mat-label *ngIf="placeholder && !showRadio">
+        {{placeholder}}
+      </mat-label>
+      <div matPrefix>
+        <ng-container *ngTemplateOutlet="matPrefixTemplate"></ng-container>
+      </div>
+      <input matInput #matInput
+             [formControl]="formControl"
+             (focus)="_onFocusFakeInput($event)"
+             [required]="required"
+             [class.cdk-visually-hidden]="showRadio"
+             [tabindex]="tabindex">
+
+      <mat-label *ngIf="placeholder; else noPlaceHolder">
+        {{ placeholder }}
+      </mat-label>
+      <ng-template #noPlaceHolder>
+        <ion-label>&nbsp;</ion-label>
+      </ng-template>
+
+      <!-- checkbox, when compact -->
+      <mat-checkbox #checkboxButton
+                    [formControl]="formControl"
+                    (change)="onCheckboxValueChanged($event)"
+                    [indeterminate]="value===null"
+                    [hidden]="!showRadio"
+                    [tabindex]="tabindex">
+      </mat-checkbox>
+
+      <mat-error *ngIf="formControl.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
+
+      <div matSuffix>
+        <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
+      </div>
+    </mat-form-field>
+
+    <!-- Buttons -->
+    <mat-form-field *ngSwitchCase="'button'"
+                    [floatLabel]="floatLabel === 'never' ? 'never' : 'always'"
+                    [appearance]="appearance"
+                    class="mat-boolean-field mat-boolean-field-button {{classList}}">
+      <div matPrefix>
+        <ng-container *ngTemplateOutlet="matPrefixTemplate"></ng-container>
+      </div>
+      <input matInput type="text" hidden
+             [formControl]="formControl"
+             [placeholder]="placeholder"
+             [required]="required">
+      <div class="mat-form-field-buttons"
+           *ngIf="formControl.enabled || (formControl.value != null); else emptyLabel"
+           [style.--buttons-col-count]="buttonsColCount">
+        <!-- yes -->
+        <ion-button class="mat-form-field-button"
+                    [tabindex]="_tabindex"
+                    [disabled]="formControl.disabled"
+                    (click)="writeValue(true, $event)"
+                    (keyup.enter)="writeValue(true, $event)"
+                    [color]="_value == null ? 'tertiary' : (_value === true) ? 'accent' : 'light'">
+          <ion-icon *ngIf="showButtonIcons && yesIcon; let icon" slot="start" [name]="icon"></ion-icon>
+          {{yesLabel|translate}}
+        </ion-button>
+
+        <!-- No button -->
+        <ion-button class="mat-form-field-button"
+                    [tabindex]="_tabindex !== undefined ? (_tabindex + 1) : undefined"
+                    [disabled]="formControl.disabled"
+                    (click)="writeValue(false, $event)"
+                    (keyup.enter)="writeValue(false, $event)"
+                    [color]="_value == null ? 'tertiary' : (_value === false) ? 'accent' : 'light'">
+          <ion-icon *ngIf="showButtonIcons && noIcon; let icon" slot="start" [name]="icon"></ion-icon>
+          {{noLabel|translate}}
+        </ion-button>
+      </div>
+        <ng-template #emptyLabel>
+          <ion-label translate>COMMON.EMPTY_OPTION</ion-label>
+      </ng-template>
+
+      <mat-error *ngIf="formControl.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
+      <div matSuffix>
+        <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
+      </div>
+
+    </mat-form-field>
+  </ng-container>
+
+</ng-template>
+
+
+<ng-template #matPrefixTemplate>
+  <ng-content select="[matPrefix]"></ng-content>
+</ng-template>
+<ng-template #matSuffixTemplate>
+  <ng-content select="[matSuffix]"></ng-content>
+</ng-template>

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

@@ -0,0 +1,34 @@
+:host {
+  width: 100%;
+}
+
+.mat-form-field {
+
+  &.mat-boolean-field-radio {
+    margin-top: -2px; // Fix alignment
+  }
+
+  &.mat-boolean-field-button {
+    margin-top: -4px; // Fix alignment
+  }
+
+  .mat-form-field-buttons {
+    width: 100%;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    align-items: center;
+
+    .mat-form-field-button {
+      --button-padding-end: 2px;
+      --flex-basis: calc(100% / var(--buttons-col-count, 2) - var(--button-padding-end));
+      flex: 0 1 var(--flex-basis);
+      max-width: calc(min(var(--flex-basis), 150px));
+      text-transform: capitalize; // Avoid uppercase text
+      white-space: normal;
+      padding-inline-end: var(--button-padding-end) !important;
+      padding-bottom: var(--button-padding-end) !important;
+      height: 40px;
+    }
+  }
+}