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

package/src/app/shared/hotkeys/shared-hotkeys.module.ts

@@ -1,27 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {TranslateModule} from '@ngx-translate/core';
-import {Hotkeys} from './hotkeys.service';
-import {HotkeysDialogComponent} from './dialog/hotkeys-dialog.component';
-import {MatDialogModule} from '@angular/material/dialog';
-import {MatCommonModule} from '@angular/material/core';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    MatCommonModule,
-    MatDialogModule,
-    TranslateModule.forChild()
-  ],
-  exports: [
-    HotkeysDialogComponent
-  ],
-  declarations: [
-    HotkeysDialogComponent
-  ],
-  providers: [
-    Hotkeys
-  ]
-})
-export class SharedHotkeysModule {
-}

package/src/app/shared/http/http.utils.ts

@@ -1,89 +0,0 @@
-import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
-
-export class HttpUtils {
-  static async getText(http: HttpClient,
-                       uri: string,
-                       opts?: {
-                            nocache?: boolean;
-                            headers?: HttpHeaders | {
-                              [header: string]: string | string[];
-                            };
-                            params?: HttpParams | {
-                              [param: string]: string | string[];
-                            };
-                            reportProgress?: boolean;
-                            responseType?: 'text';
-                            withCredentials?: boolean;
-                          }): Promise<string> {
-
-    // Add headers
-    opts = opts || {responseType: 'text'};
-
-    // Force no cache
-    if (opts.nocache === true) {
-      opts.headers = (opts.headers instanceof HttpHeaders ? opts.headers : new HttpHeaders(opts.headers));
-      opts.headers
-        .append('Cache-Control', 'no-cache')
-        .append('Pragma', 'no-cache');
-    }
-
-    // Use web http client
-    try {
-      return (await http.get(uri, {...opts, responseType: 'text'}).toPromise());
-    }
-    catch (err) {
-      if (err && err.message) {
-        console.error(`[network] Error on get request ${uri}: ${err.message}`, err);
-      }
-      else {
-        console.error(`[network] Error on get request ${uri}: ${err && err.statusText}`, err);
-      }
-      throw {code: err.status, message: 'ERROR.UNKNOWN_NETWORK_ERROR'};
-    }
-  }
-
-  static async getJson<T>(http: HttpClient,
-                          uri: string,
-                          opts?: {
-                              nocache?: boolean;
-                              headers?: HttpHeaders | {
-                                [header: string]: string | string[];
-                              };
-                              params?: HttpParams | {
-                                [param: string]: string | string[];
-                              };
-                              reportProgress?: boolean;
-                              responseType?: 'json';
-                              withCredentials?: boolean;
-                            }): Promise<T> {
-
-    // Add headers
-    opts = opts || {};
-
-    // Force no cache
-    if (opts.nocache === true) {
-      opts.headers = (opts.headers instanceof HttpHeaders ? opts.headers : new HttpHeaders(opts.headers));
-      opts.headers
-        .append('Cache-Control', 'no-cache')
-        .append('Pragma', 'no-cache')
-      ;
-    }
-
-    // Use web http client
-    try {
-      return (await http.get(uri, {...opts, responseType: 'json'}).toPromise()) as T;
-    }
-    catch (err) {
-      if (err && err.message) {
-        console.error(`[network] Error on get request ${uri}: ${err.message}`, err);
-      }
-      else {
-        console.error(`[network] Error on get request ${uri}: ${err && err.statusText}`, err);
-      }
-      throw err;
-    }
-  }
-}
-
-
-

package/src/app/shared/image/gallery/image-gallery.component.html

@@ -1,231 +0,0 @@
-
-
-<ion-toolbar color="light" *ngIf="showToolbar">
-  <!-- Add -->
-  <button mat-icon-button
-          *ngIf="!readOnly && !mobile && enabled"
-          [title]="'COMMON.BTN_ADD'|translate"
-          (click)="add()">
-    <mat-icon>add</mat-icon>
-  </button>
-
-  <ion-buttons slot="end">
-    <!-- Toggle view mode -->
-    <ion-segment (ionChange)="toggleViewMode($event)" color="accent"
-                 [value]="_colSize">
-      <ion-segment-button [value]="4">
-        <mat-icon>view_module</mat-icon>
-      </ion-segment-button>
-      <ion-segment-button [value]="12">
-        <mat-icon>view_list</mat-icon>
-      </ion-segment-button>
-    </ion-segment>
-  </ion-buttons>
-</ion-toolbar>
-
-<div class="gallery-container {{this.mode}}">
-  <div *ngIf="mobile && zoomActive" class="backdrop" [style.opacity]="zoomScale"></div>
-
-  <ion-grid class="ion-no-padding">
-    <ion-row>
-      <ion-col *ngFor="let row of rows; index as index; trackBy: trackByFn" [size]="_colSize">
-        <ion-card #card
-                  class="image-card"
-                  [class.zoom-hover]="!mobile"
-                  [color]="cardColor"
-                  *ngVar="row|propertyGet: 'currentData'; let image"
-                  (click)="clickRow(row, index)"
-                  tappable
-                  @fadeInAnimation>
-          <figure class="card-thumbnail">
-            <img [src]="image.url||image.dataUrl"/>
-          </figure>
-
-          <!-- toolbar for title (when not hover) -->
-          <ion-toolbar color="transparent" class="title">
-            <ion-label class="card-title">{{image.title}}</ion-label>
-          </ion-toolbar>
-
-          <!-- action toolbar (desktop only) shown when hover image -->
-          <ion-toolbar #cardToolbar *ngIf="!mobile && !readOnly" color="light" class="buttons">
-
-            <!-- edit title button -->
-            <button mat-button *ngIf="showTitle" slot="start"
-                    [disabled]="disabled"
-                    (click)="editTitle($event, row, cardToolbar)"
-                    (focusin)="showCardToolbar(cardToolbar)">
-              <mat-icon>edit</mat-icon>
-              <mat-label>
-                <span *ngIf="row.currentData.title|isNotNilOrBlank; else editLabel" translate>IMAGE.GALLERY.BTN_EDIT_TITLE</span>
-                <ng-template #editLabel>
-                  <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>
-                </ng-template>
-              </mat-label>
-            </button>
-
-            <div class="flex-spacer"></div>
-
-            <!-- delete button -->
-            <button mat-icon-button slot="end"
-                    class="ion-float-end"
-                    [title]="'COMMON.BTN_DELETE'|translate"
-                    [disabled]="disabled"
-                    (click)="delete($event, row)">
-              <mat-icon>delete</mat-icon>
-            </button>
-          </ion-toolbar>
-        </ion-card>
-      </ion-col>
-
-      <ion-col *ngIf="showAddCardButton && !readOnly" [size]="_colSize" @fadeInAnimation>
-        <ion-card class="image-card-button" color="light"
-                  (click)="add($event)"
-                  [disabled]="disabled"
-                  tappable>
-          <ion-card-content>
-            <div class="icon-container">
-              <ion-icon name="camera" [color]="addButtonColor"></ion-icon>
-              <ion-icon name="add" [color]="addButtonColor" class="icon-secondary"></ion-icon>
-            </div>
-          </ion-card-content>
-        </ion-card>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
-
-</div>
-
-<!-- FAB button: add -->
-<ion-fab slot="fixed" vertical="bottom" horizontal="end"
-         *ngIf="showFabButton && !readOnly"
-         [class.cdk-visually-hidden]="disabled"
-         @fadeInOutAnimation>
-
-  <ion-fab-button color="tertiary" (click)="add($event)">
-    <ion-icon name="camera"></ion-icon>
-    <ion-icon name="add" class="icon-secondary" style="left: 33px; top: 9px; font-size: 20px;"></ion-icon>
-  </ion-fab-button>
-</ion-fab>
-
-<!-- Zoom modal -->
-<ion-modal #zoomModal class="stack-modal zoom-modal"
-           [class.modal-fullscreen]="mobile"
-           [class.modal-large]="!mobile">
-  <ng-template>
-    <ion-content class="ion-no-padding ion-no-margin" >
-      <!-- Counter  -->
-      <div class="top-left" *ngVar="rows?.length as count">
-        <ion-label color="light">
-          {{activeSlideIndex + 1}} / {{count}}
-        </ion-label>
-      </div>
-
-      <!-- zoom button -->
-      <div class="top-right">
-        <ion-button *ngIf="!mobile" (click)="zoom(modalSwiper, true)" color="light">
-          <ion-icon slot="icon-only" name="add"></ion-icon>
-        </ion-button>
-        <ion-button *ngIf="!mobile" (click)="zoom(modalSwiper, false)" color="light">
-          <ion-icon name="remove" slot="icon-only"></ion-icon>
-        </ion-button>
-      </div>
-
-      <!-- navigation side buttons next/back -->
-      <ng-container *ngIf="!mobile && (rows|isArrayLength:{greaterThan: 1})">
-        <div class="side-buttons prev"
-             (click)="slidePrev(modalSwiper)">
-          <ion-icon name="chevron-back"></ion-icon>
-        </div>
-        <div class="side-buttons next"
-             (click)="slideNext(modalSwiper)">
-          <ion-icon name="chevron-forward"></ion-icon>
-        </div>
-      </ng-container>
-
-      <!-- image slides -->
-      <swiper-container #modalSwiper [modules]="swiperModules" [zoom]="true">
-        <swiper-slide *ngFor="let row of rows; last as last">
-          <div class="swiper-zoom-container" *ngIf="row|propertyGet: 'currentData'; let image"
-               (ngInit)="last && initModalSlides(modalSwiper)">
-            <img [src]="image.url||image.dataUrl">
-          </div>
-        </swiper-slide>
-      </swiper-container>
-    </ion-content>
-
-    <ion-footer>
-      <ion-toolbar color="light">
-        <ion-row>
-          <ion-col size="4" class="ion-text-start">
-            <ion-button *ngIf="!readOnly"
-                        (click)="deleteFromModal($event, modalSwiper)"
-                        [disabled]="disabled"
-                        fill="clear" color="danger">
-              <mat-icon slot="start">delete</mat-icon>
-              {{'COMMON.BTN_DELETE'|translate}}
-            </ion-button>
-          </ion-col>
-          <ion-col size="4">
-          </ion-col>
-          <ion-col size="4" class="ion-text-end">
-            <ion-button (click)="zoomModal.dismiss()" color="tertiary" fill="clear" *ngIf="mobile; else desktop">
-              <ion-icon slot="start" name="close"></ion-icon>
-              {{'COMMON.BTN_CLOSE'|translate}}
-            </ion-button>
-            <ng-template #desktop>
-              <ion-button (click)="zoomModal.dismiss()" color="tertiary">
-                {{'COMMON.BTN_CLOSE'|translate}}
-              </ion-button>
-            </ng-template>
-          </ion-col>
-        </ion-row>
-      </ion-toolbar>
-    </ion-footer>
-  </ng-template>
-</ion-modal>
-
-<ion-popover #titlePopover>
-  <ng-template>
-    <ion-content class="ion-padding" cdkTrapFocus [cdkTrapFocusAutoCapture]="true" >
-      <form [formGroup]="_titleForm">
-        <mat-form-field floatLabel="auto">
-          <mat-label translate>IMAGE.GALLERY.TITLE</mat-label>
-          <input
-            matInput
-            formControlName="title"
-            [readonly]="disabled"
-            [appAutofocus]="_titleAutofocus"
-            (keydown.control.enter)="titlePopover.dismiss(_titleForm.controls.title.value)"
-          />
-
-        </mat-form-field>
-      </form>
-    </ion-content>
-
-
-    <ion-footer>
-      <ion-toolbar>
-        <ion-row class="ion-no-padding" nowrap>
-          <ion-col>
-
-          </ion-col>
-
-          <ion-col size="auto">
-            <ion-button fill="clear" color="dark" (click)="titlePopover.dismiss(null, 'CANCEL')">
-              <ion-label translate>COMMON.BTN_CANCEL</ion-label>
-            </ion-button>
-            <ion-button
-              [fill]="disabled ? 'clear' : 'solid'"
-              (click)="titlePopover.dismiss(_titleForm.controls.title.value)"
-              (keyup.enter)="titlePopover.dismiss(_titleForm.controls.title.value)"
-              color="tertiary"
-              [disabled]="disabled"
-              [title]="'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate">
-              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>
-            </ion-button>
-          </ion-col>
-        </ion-row>
-      </ion-toolbar>
-    </ion-footer>
-  </ng-template>
-</ion-popover>

package/src/app/shared/image/gallery/image-gallery.component.scss

@@ -1,196 +0,0 @@
-:host {
-  --image-margin-inline: 10px;
-}
-mat-toolbar, .mat-toolbar-single-row {
-  padding: 0;
-  height: 42px;
-}
-ion-card {
-  margin-left: unset;
-  margin-right: unset;
-  margin-inline: var(--image-margin-inline, 10px);
-}
-.image-slide {
-  overflow: visible;
-}
-.image-card {
-  height: calc(100% - 23px);
-  background-color: var(--ion-color-base);
-  z-index: 9;
-  --img-scale: 1;
-
-  .card-thumbnail {
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    justify-content: center; /* horizontal center */
-    align-items: center; /* vertical center */
-    margin: 0;
-    padding: 0;
-
-    width: 100%; /* Thumbnail dimensions. */
-    height: 100%; /*** Change the height to make the image smaller ***/
-
-
-    & > img {
-      /* Tip: use 1:1 ratio images */
-      min-height: 100%; /* or width when img.width > img.height */
-      transition: scale 200ms ease-in-out;
-      scale: var(--img-scale);
-      max-height: var(--img-max-height);
-    }
-  }
-  &.zoom-hover:hover {
-    --img-scale: 1.2;
-  }
-
-  ion-toolbar {
-    --top-offset: calc(-1 * var(--ion-toolbar-height));
-    position: absolute;
-  }
-  ion-toolbar.title {
-    --padding-start: 16px;
-    --padding-end: 16px;
-    --ion-color-base: transparent !important;
-    position: absolute;
-    top: calc(100% + var(--top-offset));
-    transition: opacity 200ms ease-in-out;
-    //opacity: 1;
-    ion-label {
-      color: white;
-    }
-  }
-  &:hover ion-toolbar.title {
-    //opacity: 0;
-  }
-  ion-toolbar.buttons {
-    --padding-start: 4px;
-    --padding-end: 4px;
-    --ion-color-base: var(--ion-color-light) !important;
-    position: absolute;
-    top: calc(100%);
-    transition: transform 200ms ease-in-out;
-  }
-  &:hover ion-toolbar.buttons,
-  ion-toolbar.buttons.focused
-  {
-    transform: translateY(var(--top-offset));
-  }
-}
-
-.image-card-button {
-
-  height: calc(100% - var(--image-margin-inline, 0px) * 2 - 3px);
-  transition: 200ms ease-in-out;
-  max-width: 250px;
-
-  ion-card-content {
-    height: 100%;
-  }
-
-  .icon-container {
-    height: auto;
-    position: relative;
-    top: calc(50% - 75px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    //height: 100%;
-  }
-
-  ion-icon:first-of-type {
-    font-size: 150px;
-    height: 150px;
-    position: relative;
-    top: 0;
-  }
-
-  ion-icon.icon-secondary {
-    font-size: 50px;
-    position: absolute;
-    top: 0;
-    left: max(min(calc(50% + 25px), calc(100% - 50px)), 0px);
-  }
-
-  ion-button {
-    float: right;
-  }
-
-  &:hover {
-    --ion-color-base: var(--ion-color-shade) !important;
-  }
-  &:hover ion-icon {
-    --ion-color-base: var(--ion-color-shade) !important;
-  }
-}
-
-.backdrop {
-  height: calc(100vh);
-  width: calc(100vw);
-  background: black;
-  position: absolute;
-  z-index: 10;
-}
-
-.zoom-modal {
-  user-select: none;
-  .top-left {
-    z-index: 14;
-    position: absolute;
-    display: inline-grid;
-    left: var(--ion-padding-start, 8px);
-    top: var(--ion-padding-start, 8px);
-  }
-  .top-right {
-    z-index: 14;
-    position: absolute;
-    display: inline-grid;
-    right: var(--ion-padding-start, 8px);
-    top: var(--ion-padding-start, 8px);
-  }
-  .side-buttons {
-
-    --side-buttons-width: 120px;
-    --side-buttons-margin: calc(var(--side-buttons-width) / 3);
-
-    z-index: 13;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: var(--side-buttons-width);
-
-    ion-icon {
-      top: calc(50%);
-      color: white;
-      font-size: 2.5rem;
-      position: absolute;
-      opacity: 0;
-      transition-duration: 150ms;
-      transition-timing-function: ease-in;
-    }
-    &:hover {
-      cursor: pointer;
-      ion-icon {
-        opacity: 1;
-      }
-    }
-
-    &.prev {
-      left: 0;
-      ion-icon {
-        left: var(--side-buttons-margin);
-      }
-    }
-    &.next {
-      right: 0;
-      ion-icon {
-        right: var(--side-buttons-margin);
-      }
-    }
-  }
-
-  ion-slides {
-    height: 100%;
-    background: black;
-  }
-}