@sumaris-net/ngx-components 18.10.29 → 18.12.0

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

@@ -0,0 +1,275 @@
+<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>
+    </ion-text>
+  </p>
+
+  <!-- small badge with text -->
+  <p>
+    <ion-text color="tertiary">
+      <span [appBadge]="0" appBadgeSize="small" appBadgeColor="accent" appBadgeOverlap="false">
+        Small badge with text 0
+      </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-label>appBadgeColor</mat-label>
+        <mat-select [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-label>appBadgeIcon</mat-label>
+        <mat-select [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-label>appBadgeSize</mat-label>
+        <mat-select [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-label>appBadgeFill</mat-label>
+        <mat-select [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-label>appBadgeHidden</mat-label>
+        <mat-select [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,34 @@
+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 = 'A custom string';
+  matBadgeContent = '!';
+
+  $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,36 @@
+import { NgModule } from '@angular/core';
+import { MatCommonModule } from '@angular/material/core';
+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 { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { SharedDirectivesModule } from '../../directives/directives.module';
+import { MatBooleanField } from './material.boolean';
+import { MatIcon } from '@angular/material/icon';
+import { MatIconButton } from '@angular/material/button';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    ReactiveFormsModule,
+    SharedPipesModule,
+    MatCommonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatRadioModule,
+    MatCheckboxModule,
+    TranslateModule.forChild(),
+    SharedDirectivesModule,
+    MatIcon,
+    MatIconButton,
+  ],
+  exports: [MatBooleanField],
+  declarations: [MatBooleanField],
+})
+export class SharedMatBooleanModule {}

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

@@ -0,0 +1,271 @@
+@if (readonly) {
+  <mat-form-field
+    [floatLabel]="floatLabel | asFloatLabelType"
+    [appearance]="appearance"
+    [subscriptSizing]="subscriptSizing"
+    class="mat-form-field-disabled {{ classList }}"
+  >
+    @if (floatLabel !== 'never' && !!placeholder) {
+      <mat-label>{{ placeholder }}</mat-label>
+    }
+    <div matPrefix>
+      <ng-container *ngTemplateOutlet="matPrefixTemplate"></ng-container>
+    </div>
+    <input matInput hidden type="text" readonly [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>
+} @else {
+  @switch (style) {
+    <!-- Radio -->
+    @case ('radio') {
+      <mat-form-field
+        [floatLabel]="showRadio && (!floatLabel || floatLabel === 'auto') ? 'always' : (floatLabel | asFloatLabelType)"
+        [appearance]="appearance"
+        [subscriptSizing]="subscriptSizing"
+        class="mat-boolean-field mat-boolean-field-radio {{ classList }}"
+      >
+        @if (floatLabel !== 'never' && !!placeholder) {
+          <mat-label [title]="placeholder">
+            {{ placeholder }}
+            <span [class.cdk-visually-hidden]="showRadio">({{ yesLabel | translate }}/{{ noLabel | 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)"
+          (blur)="onBlurInput($event)"
+          (keydown.space)="toggleValue($event)"
+          (keyup.arrowLeft)="toggleValue($event)"
+          (keyup.arrowRight)="toggleValue($event)"
+          (keyup.arrowUp)="toggleValue($event)"
+          (keyup.arrowDown)="toggleValue($event)"
+          [required]="required"
+          [appAutofocus]="autofocus"
+          [class.cdk-visually-hidden]="showRadio"
+          [tabindex]="tabindex"
+        />
+
+        <!-- radio button -->
+        <mat-radio-group
+          [class.cdk-visually-hidden]="!showRadio"
+          [formControl]="formControl"
+          (change)="onRadioValueChanged($event)"
+          (blur)="onBlurInput($event)"
+        >
+          <mat-radio-button #yesRadioButton [value]="true" tabIndex="-1">
+            <span>{{ yesLabel | translate }}</span>
+          </mat-radio-button>
+          &nbsp;
+          <mat-radio-button #noRadioButton [value]="false" tabIndex="-1">
+            <span>{{ noLabel | translate }}</span>
+          </mat-radio-button>
+        </mat-radio-group>
+
+        @if (formControl.hasError('required')) {
+          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>
+        }
+
+        @if (clearable) {
+          <button
+            matSuffix
+            mat-icon-button
+            tabindex="-1"
+            type="button"
+            (click)="clearValue($event)"
+            [hidden]="_value | isNil"
+          >
+            <mat-icon>close</mat-icon>
+          </button>
+        }
+
+        <div matSuffix>
+          <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
+        </div>
+      </mat-form-field>
+    }
+
+    <!-- Checkbox -->
+    @case ('checkbox') {
+      <mat-form-field
+        [floatLabel]="!floatLabel || floatLabel === 'auto' ? 'always' : (floatLabel | asFloatLabelType)"
+        [appearance]="appearance"
+        class="mat-boolean-field mat-boolean-field-checkbox {{ classList }}"
+      >
+        <div matPrefix>
+          <ng-container *ngTemplateOutlet="matPrefixTemplate"></ng-container>
+        </div>
+
+        <!-- Add a empty label, for layout alignment -->
+        @if (floatLabel !== 'never' && !!placeholder) {
+          <mat-label>&nbsp;</mat-label>
+        }
+
+        <input
+          matInput
+          #fakeInput
+          readonly="true"
+          [formControl]="formControl"
+          [required]="required"
+          [class.cdk-visually-hidden]="showRadio"
+          [tabindex]="tabindex"
+          [appAutofocus]="autofocus"
+          (focus)="onFocusFakeInput($event)"
+          (keydown.space)="toggleValue($event)"
+        />
+
+        <!-- checkbox, when compact -->
+        <mat-checkbox
+          #checkboxButton
+          [formControl]="formControl"
+          [indeterminate]="value | isNil"
+          [class.cdk-visually-hidden]="!showRadio"
+          [labelPosition]="labelPosition"
+          [title]="placeholder || ''"
+          [tabIndex]="-1"
+          (change)="onCheckboxValueChanged($event)"
+          (blur)="onBlurInput($event)"
+        >
+          @if (floatLabel !== 'never' && !!placeholder) {
+            {{ placeholder || '' }}
+          }
+        </mat-checkbox>
+
+        @if (formControl.hasError('required')) {
+          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>
+        }
+
+        @if (clearable) {
+          <button
+            matSuffix
+            mat-icon-button
+            tabindex="-1"
+            type="button"
+            (click)="clearValue($event)"
+            [hidden]="_value | isNil"
+          >
+            <mat-icon>close</mat-icon>
+          </button>
+        }
+
+        <div matSuffix>
+          <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
+        </div>
+      </mat-form-field>
+    }
+
+    <!-- Buttons -->
+    @case ('button') {
+      <mat-form-field
+        [floatLabel]="!floatLabel || floatLabel === 'auto' ? 'always' : (floatLabel | asFloatLabelType)"
+        [appearance]="appearance"
+        [subscriptSizing]="subscriptSizing"
+        class="mat-boolean-field mat-boolean-field-button {{ classList }}"
+      >
+        <div matPrefix>
+          <ng-container *ngTemplateOutlet="matPrefixTemplate"></ng-container>
+        </div>
+
+        @if (floatLabel !== 'never' && !!placeholder) {
+          <mat-label [title]="placeholder">{{ placeholder }}</mat-label>
+        }
+
+        <input
+          #fakeInput
+          matInput
+          type="text"
+          class="cdk-visually-hidden"
+          readonly="true"
+          [formControl]="formControl"
+          [appAutofocus]="autofocus"
+          (focus)="onFocusFakeInput($event)"
+          (keydown.space)="toggleValue($event)"
+          (keyup.arrowLeft)="toggleValue($event)"
+          (keyup.arrowRight)="toggleValue($event)"
+          (keyup.arrowUp)="toggleValue($event)"
+          (keyup.arrowDown)="toggleValue($event)"
+          [required]="required"
+          [tabindex]="_tabindex"
+        />
+        @if (formControl.disabled) {
+          <ion-text>
+            {{ (value === null ? 'COMMON.EMPTY_OPTION' : value === true ? yesLabel : noLabel) | translate }}
+          </ion-text>
+        } @else {
+          <div class="mat-form-field-buttons" [style.--buttons-col-count]="buttonsColCount">
+            <!-- yes -->
+            <ion-button
+              #yesButton
+              class="mat-form-field-button"
+              [tabIndex]="-1"
+              (click)="writeValue(true, $event)"
+              (keyup.enter)="writeValue(true, $event)"
+              [color]="_value === null ? 'tertiary' : _value === true ? 'accent' : 'light'"
+            >
+              @if (showButtonIcons && yesIcon; as icon) {
+                <ion-icon slot="start" [name]="icon"></ion-icon>
+              }
+              {{ yesLabel | translate }}
+            </ion-button>
+
+            <!-- No button -->
+            <ion-button
+              #noButton
+              class="mat-form-field-button"
+              [tabIndex]="-1"
+              (click)="writeValue(false, $event)"
+              (keydown.space)="toggleValue($event)"
+              (keyup.enter)="writeValue(false, $event)"
+              [color]="_value === null ? 'tertiary' : _value === false ? 'accent' : 'light'"
+            >
+              @if (showButtonIcons && noIcon; as icon) {
+                <ion-icon slot="start" [name]="icon"></ion-icon>
+              }
+              {{ noLabel | translate }}
+            </ion-button>
+          </div>
+        }
+
+        @if (formControl.hasError('required')) {
+          <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>
+        }
+
+        @if (clearable) {
+          <ion-button
+            matSuffix
+            fill="clear"
+            size="small"
+            color="medium"
+            tabindex="-1"
+            (click)="clearValue($event)"
+            [class.cdk-visually-hidden]="_value | isNil"
+          >
+            <ion-icon slot="icon-only" name="close"></ion-icon>
+          </ion-button>
+        }
+
+        <div matSuffix>
+          <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
+        </div>
+      </mat-form-field>
+    }
+  }
+}
+
+<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,27 @@
+:host {
+  width: 100%;
+}
+
+.mat-mdc-form-field {
+
+  .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: 4px;
+      --flex-basis: calc(100% / var(--buttons-col-count, 2) - var(--button-padding-end, 0px));
+      flex: 0 1 var(--flex-basis);
+      max-width: calc(min(var(--flex-basis), 150px));
+      text-transform: capitalize; // Avoid uppercase text
+      white-space: normal;
+      margin: 0 !important;
+      padding-inline-end: var(--button-padding-end) !important;
+      padding-bottom: var(--button-padding-end) !important;
+      height: var(--mat-mdc-form-field-height, 40px);
+    }
+  }
+}