@sumaris-net/ngx-components 18.12.0 → 18.12.1

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

@@ -1,275 +0,0 @@
-<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

@@ -1,34 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,271 +0,0 @@
-@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

@@ -1,27 +0,0 @@
-: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);
-    }
-  }
-}