@sumaris-net/ngx-components 2.9.0-alpha1 → 2.9.0-alpha2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sumaris-net/ngx-components",
   "description": "SUMARiS Angular components",
-  "version": "2.9.0-alpha1",
+  "version": "2.9.0-alpha2",
   "author": "contact@e-is.pro",
   "license": "AGPL-3.0",
   "readmeFilename": "README.md",

package/src/app/core/peer/select-peer.modal.d.ts

@@ -13,6 +13,7 @@ export interface ISelectPeerModalOptions {
     allowSelectDownPeer: boolean;
     onRefresh: EventEmitter<Event>;
     showSetManuallyButton: boolean;
+    selectedPeer?: string;
 }
 export declare class SelectPeerModal implements OnDestroy, ISelectPeerModalOptions {
     private modalCtrl;
@@ -24,14 +25,16 @@ export declare class SelectPeerModal implements OnDestroy, ISelectPeerModalOptio
     protected loggingService?: ILoggingService;
     private _subscription;
     private readonly _logger;
-    loading: boolean;
-    mobile: boolean;
-    $peers: Subject<Peer[]>;
-    peerMinVersion: string;
+    protected loading: boolean;
+    protected mobile: boolean;
+    protected $peers: Subject<Peer[]>;
+    protected peerMinVersion: string;
+    protected peerDefaultPrefix: string;
+    selectedPeer: string;
     canCancel: boolean;
     allowSelectDownPeer: boolean;
-    onRefresh: EventEmitter<Event>;
     showSetManuallyButton: boolean;
+    onRefresh: EventEmitter<Event>;
     constructor(modalCtrl: ModalController, popoverController: PopoverController, translate: TranslateService, http: HttpClient, cd: ChangeDetectorRef, environment: Environment, loggingService?: ILoggingService);
     set peers(peers: Observable<Peer[]>);
     cancel(): void;
@@ -43,12 +46,15 @@ export declare class SelectPeerModal implements OnDestroy, ISelectPeerModalOptio
      * @param peer
      */
     isCompatible(peer: Peer): boolean;
-    refresh(event: any): void;
+    refresh(event: Event): void;
     clickSetManually(event?: Event): Promise<void>;
     refreshPeers(peers: Peer[]): Promise<void>;
     protected refreshPeer(peer: Peer): Promise<Peer>;
     protected openPeerUrlPopover(event: Event, opts?: Partial<TextPopoverOptions>): Promise<any>;
     protected markForCheck(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectPeerModal, [null, null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectPeerModal, "select-peer-modal", never, { "canCancel": { "alias": "canCancel"; "required": false; }; "allowSelectDownPeer": { "alias": "allowSelectDownPeer"; "required": false; }; "onRefresh": { "alias": "onRefresh"; "required": false; }; "showSetManuallyButton": { "alias": "showSetManuallyButton"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectPeerModal, "select-peer-modal", never, { "selectedPeer": { "alias": "selectedPeer"; "required": false; }; "canCancel": { "alias": "canCancel"; "required": false; }; "allowSelectDownPeer": { "alias": "allowSelectDownPeer"; "required": false; }; "showSetManuallyButton": { "alias": "showSetManuallyButton"; "required": false; }; "onRefresh": { "alias": "onRefresh"; "required": false; }; }, {}, never, never, false, never>;
+    static ngAcceptInputType_canCancel: unknown;
+    static ngAcceptInputType_allowSelectDownPeer: unknown;
+    static ngAcceptInputType_showSetManuallyButton: unknown;
 }

package/src/app/shared/material/autocomplete/material.autocomplete.module.d.ts

@@ -17,6 +17,6 @@ import * as i15 from "@angular/material/select";
 import * as i16 from "@ngx-translate/core";
 export declare class SharedMatAutocompleteModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SharedMatAutocompleteModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedMatAutocompleteModule, [typeof i1.MatAutocompleteField], [typeof i2.CommonModule, typeof i3.IonicModule, typeof i4.ScrollingModule, typeof i5.ReactiveFormsModule, typeof i6.SharedPipesModule, typeof i7.SharedDirectivesModule, typeof i8.RxStateModule, typeof i9.MatCommonModule, typeof i10.MatAutocompleteModule, typeof i11.MatFormFieldModule, typeof i12.MatInputModule, typeof i13.MatIconModule, typeof i14.MatButtonModule, typeof i15.MatSelectModule, typeof i16.TranslateModule], [typeof i10.MatAutocompleteModule, typeof i1.MatAutocompleteField]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedMatAutocompleteModule, [typeof i1.MatAutocompleteField], [typeof i2.CommonModule, typeof i3.IonicModule, typeof i4.ScrollingModule, typeof i5.ReactiveFormsModule, typeof i6.SharedPipesModule, typeof i7.SharedDirectivesModule, typeof i8.RxStateModule, typeof i9.MatCommonModule, typeof i10.MatAutocompleteModule, typeof i11.MatFormFieldModule, typeof i12.MatInputModule, typeof i13.MatIconModule, typeof i14.MatButtonModule, typeof i15.MatSelectModule, typeof i9.MatRippleModule, typeof i16.TranslateModule], [typeof i10.MatAutocompleteModule, typeof i1.MatAutocompleteField]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SharedMatAutocompleteModule>;
 }

package/src/assets/manifest.json

@@ -2,7 +2,7 @@
   "name": "ngx-sumaris-components",
   "short_name": "ngx-sumaris-components",
   "manifest_version": 1,
-  "version": "2.9.0-alpha1",
+  "version": "2.9.0-alpha2",
   "default_locale": "fr",
   "description": "Angular components for building beautiful and responsive Apps",
   "icons": [{

package/src/environments/environment.class.d.ts

@@ -31,6 +31,7 @@ export declare class Environment {
         path?: string;
     }[];
     peerMinVersion?: string;
+    peerDefaultPrefix?: string;
     checkAppVersionIntervalInSeconds?: number;
     persistCache?: boolean;
     offline?: boolean;

package/src/theme/_functions.scss

@@ -5,3 +5,18 @@
   $remSize: $size / 16px;
   @return $remSize * 1rem;
 }
+
+@function get-color-contrast($color, $bw: false) {
+  $lightness: lightness($color);
+
+  @if $bw == true {
+    @if $lightness > 50% {
+      @return #000000; // retourne noir si la couleur est claire
+    } @else {
+      @return #ffffff; // retourne blanc si la couleur est foncée
+    }
+  }
+  @else {
+    @return invert($color); // retourne la couleur inversée si bw n'est pas true
+  }
+}

package/src/theme/_mixins.scss

@@ -44,18 +44,12 @@
   $contrast: map-get($value, contrast);
   $shade: map-get($value, shade);
   $tint: map-get($value, tint);
-  --ion-color-base: var(--ion-color-#{""+$color-name},
-    #{$base}) !important;
-  --ion-color-base-rgb: var(--ion-color-#{""+$color-name}-rgb,
-    #{color-to-rgb-list($base)}) !important;
-  --ion-color-contrast: var(--ion-color-#{""+$color-name}-contrast,
-    #{$contrast}) !important;
-  --ion-color-contrast-rgb: var(--ion-color-#{""+$color-name}-contrast-rgb,
-    #{color-to-rgb-list($contrast)}) !important;
-  --ion-color-shade: var(--ion-color-#{""+$color-name}-shade,
-    #{$shade}) !important;
-  --ion-color-tint: var(--ion-color-#{""+$color-name}-tint,
-    #{$tint}) !important;
+  --ion-color-base: var(--ion-color-#{""+$color-name}, #{$base}) !important;
+  --ion-color-base-rgb: var(--ion-color-#{""+$color-name}-rgb, #{color-to-rgb-list($base)}) !important;
+  --ion-color-contrast: var(--ion-color-#{""+$color-name}-contrast, #{$contrast}) !important;
+  --ion-color-contrast-rgb: var(--ion-color-#{""+$color-name}-contrast-rgb, #{color-to-rgb-list($contrast)}) !important;
+  --ion-color-shade: var(--ion-color-#{""+$color-name}-shade, #{$shade}) !important;
+  --ion-color-tint: var(--ion-color-#{""+$color-name}-tint, #{$tint}) !important;
 }
 
 @mixin generate-color-list($color-name) {
@@ -72,6 +66,20 @@
   --ion-color-#{""+$color-name}-tint: #{$tint};
 }
 
+@mixin generate-dark-color-list($color-name) {
+  $value: map-get($colors, $color-name);
+  $base: mix(map-get($value, base), #000, 50%);
+  $contrast: get-color-contrast($base, true);
+  $shade: lighten($base, 10%);
+  $tint: darken($base, 12%);
+  --ion-color-#{""+$color-name} : #{$base};
+  --ion-color-#{""+$color-name}-rgb: #{color-to-rgb-list($base)};
+  --ion-color-#{""+$color-name}-contrast: #{$contrast};
+  --ion-color-#{""+$color-name}-contrast-rgb: #{color-to-rgb-list($contrast)};
+  --ion-color-#{""+$color-name}-shade: #{$shade};
+  --ion-color-#{""+$color-name}-tint: #{$tint};
+}
+
 @mixin set-color-each-ion-colors($element-name) {
 
   @each $color-name, $value in $colors {
@@ -125,6 +133,7 @@
   --app-form-color-computed: #{$app-form-color-computed};
   --app-form-field-background-color: #{$app-form-field-background-color};
   --app-form-field-disabled-background-color: #{$app-form-field-disabled-background-color};
+  --app-form-field-label-color: #{$app-form-field-label-color};
   --app-table-row-item-selected-background-color: #{$app-table-row-item-selected-background-color};
   --app-table-row-item-selected-text-color: #{$app-table-row-item-selected-text-color};
 }
@@ -136,3 +145,10 @@
   --app-form-buttons-bar-height: 0px;
   --app-footer-height: 0px;
 }
+
+@mixin css-variables-to-root-dark() {
+  @each $color-name,
+  $value in $colors {
+    @include generate-dark-color-list($color-name);
+  }
+}

package/src/theme/_ngx-components.forms.scss

@@ -10,6 +10,10 @@ form.form-container {
 
   --mdc-filled-text-field-container-color: var(--app-form-field-background-color);
   --mdc-filled-text-field-disabled-container-color: var(--app-form-field-disabled-background-color);
+  --mdc-filled-text-field-input-text-color: var(--app-form-color);
+  --mdc-filled-text-field-caret-color: var(--app-form-color);
+  --mdc-filled-text-field-label-text-color: var(--app-form-field-label-color);
+  --mdc-filled-text-field-hover-label-text-color: var(--app-form-field-label-color);
   --mat-form-field-state-layer-color: var(--app-form-field-focus-background-color);
   --mat-form-field-container-height: 45px;
   --mat-form-field-container-text-size: inherit;
@@ -19,6 +23,7 @@ form.form-container {
   --mat-form-field-filled-with-label-container-padding-bottom: 0px;
   --mdc-filled-text-field-label-text-tracking: normal;
   --mat-select-trigger-text-size: var(--mat-form-field-container-text-size);
+  --mat-select-enabled-trigger-text-color: var(--app-form-color);
 
   .mat-form-field-disabled,
   .mat-mdc-input-element:disabled {
@@ -203,3 +208,16 @@ ion-grid.form-container {
     }
   }
 }
+
+// TODO: activer ce code et tester les mat-select en dark mode
+//html {
+//  div.mat-mdc-select-panel {
+//    --mat-select-panel-background-color: var(--ion-color-light);
+//
+//    .mat-mdc-option {
+//      --mat-option-label-text-color: var(--ion-color);
+//      --mat-option-selected-state-label-text-color: var(--ion-color-primary);
+//      color: var(--mat-option-label-text-color) !important;
+//    }
+//  }
+//}

package/src/theme/_ngx-components.globals.scss

@@ -14,6 +14,7 @@ $app-form-color-disabled: rgba(0, 0, 0, 0.55) !default;
 $app-form-color-computed: var(--ion-color-primary-tint) !default;
 $app-form-field-background-color: #f5f5f5 !default; // Form's field background
 $app-form-field-disabled-background-color: #fafafa !default;
+$app-form-field-label-color: rgba(0, 0, 0, 0.6) !default;
 
 $app-select-option-border-color: rgba(0, 0, 0, 0.12) !default;
 $app-table-border-color: rgba(0, 0, 0, 0.08) !default;

package/src/theme/_ngx-components.scss

@@ -207,10 +207,6 @@ mat-option:not(:last-of-type) {
   --max-width: calc(min(100%, 100vw - 64px));
   min-width: var(--min-width) !important;
   max-width: var(--max-width) !important;
-
-  &.left-workaround {
-    left: calc((min(var(--panel-left, 0px) + var(--panel-width, var(--min-width)), 100vw - 32px) - var(--panel-width, var(--min-width))));
-  }
 }
 .mat-mdc-autocomplete-panel {
   --min-width: 200px;
@@ -345,6 +341,10 @@ ion-list,
       position: sticky;
       top: 0;
     }
+
+    .searchbar-input {
+      --background: var(--app-form-field-background-color, var(--ion-background-color));
+    }
   }
 
   ion-row.ion-list-header,

package/src/theme/_ngx-components.table.scss

@@ -21,6 +21,8 @@
   min-width: calc(100% - 1px);
   border-collapse: separate;
   --mat-table-background-color: var(--background, var(--ion-background-color));
+  --mat-table-header-color: var(--ion-color-primary);
+  --mat-table-header-background-color: var(--mat-table-background-color);
   --mat-table-row-item-label-text-color: var(--ion-text-color);
   --mat-table-row-item-outline-color: var(--ion-border-color);
   --mat-table-row-item-label-text-size: 14px;
@@ -46,8 +48,8 @@
   --mdc-form-field-label-text-color: var(--ion-text-color);
 
   .mat-mdc-header-cell {
-    color: var(--ion-color-primary);
-    background: var(--mat-table-background-color) !important;
+    color: var(--mat-table-header-color);
+    background: var(--mat-table-header-background-color) !important;
 
     &.disabled {
       color: var(--ion-color-medium, grey);
@@ -529,6 +531,7 @@
   }
 }
 
+
 // Paginator
 .mat-mdc-paginator {
   --mat-paginator-container-size: var(--app-paginator-height, #{$app-paginator-height});

package/src/theme/_theme.variables.scss

@@ -5,72 +5,91 @@ html {
   &.plt-mobile {
     @include css-variables-to-root-mobile();
   }
-}
-
-html.dark {
-  --ion-color-primary: #428cff;
-  --ion-color-primary-rgb: 66, 140, 255;
-  --ion-color-primary-contrast: #ffffff;
-  --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: #3a7be0;
-  --ion-color-primary-tint: #5598ff;
-
-  --ion-color-secondary: #75C4FD;
-  --ion-color-secondary-rgb: 117, 196, 253;
-  --ion-color-secondary-contrast: #ffffff;
-  --ion-color-secondary-contrast-rgb: 255, 255, 255;
-  --ion-color-secondary-shade: #46b0e0;
-  --ion-color-secondary-tint: #62ceff;
-
-  --ion-color-tertiary: #6a64ff;
-  --ion-color-tertiary-rgb: 106, 100, 255;
-  --ion-color-tertiary-contrast: #ffffff;
-  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-  --ion-color-tertiary-shade: #5d58e0;
-  --ion-color-tertiary-tint: #7974ff;
-
-  --ion-color-success: #2fdf75;
-  --ion-color-success-rgb: 47, 223, 117;
-  --ion-color-success-contrast: #000000;
-  --ion-color-success-contrast-rgb: 0, 0, 0;
-  --ion-color-success-shade: #29c467;
-  --ion-color-success-tint: #44e283;
-
-  --ion-color-warning: #FF6434;
-  --ion-color-warning-rgb: 255, 100, 52;
-  --ion-color-warning-contrast: #000000;
-  --ion-color-warning-contrast-rgb: 0, 0, 0;
-  --ion-color-warning-shade: #E0BB4B;
-  --ion-color-warning-tint: #FFDA48;
-
-  --ion-color-danger: #fa0021;
-  --ion-color-danger-rgb: 255, 0, 33;
-  --ion-color-danger-contrast: #ffffff;
-  --ion-color-danger-contrast-rgb: 255, 255, 255;
-  --ion-color-danger-shade: #e04055;
-  --ion-color-danger-tint: #ff5b71;
-
-  --ion-color-dark: #f4f5f8;
-  --ion-color-dark-rgb: 244, 245, 248;
-  --ion-color-dark-contrast: #000000;
-  --ion-color-dark-contrast-rgb: 0, 0, 0;
-  --ion-color-dark-shade: #d7d8da;
-  --ion-color-dark-tint: #f5f6f9;
-
-  --ion-color-medium: #989aa2;
-  --ion-color-medium-rgb: 152, 154, 162;
-  --ion-color-medium-contrast: #000000;
-  --ion-color-medium-contrast-rgb: 0, 0, 0;
-  --ion-color-medium-shade: #86888f;
-  --ion-color-medium-tint: #a2a4ab;
-
-  --ion-color-light: #222428;
-  --ion-color-light-rgb: 34, 36, 40;
-  --ion-color-light-contrast: #ffffff;
-  --ion-color-light-contrast-rgb: 255, 255, 255;
-  --ion-color-light-shade: #1e2023;
-  --ion-color-light-tint: #383a3e;
 
+  &.dark {
+
+    @include css-variables-to-root-dark();
+
+    --ion-color-primary: #428cff;
+    --ion-color-primary-rgb: 66, 140, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3a7be0;
+    --ion-color-primary-tint: #5598ff;
+
+    --ion-color-secondary: #75C4FD;
+    --ion-color-secondary-rgb: 117, 196, 253;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #46b0e0;
+    --ion-color-secondary-tint: #62ceff;
+
+    --ion-color-tertiary: #6a64ff;
+    --ion-color-tertiary-rgb: 106, 100, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #5d58e0;
+    --ion-color-tertiary-tint: #7974ff;
+
+    --ion-color-success: #2fdf75;
+    --ion-color-success-rgb: 47, 223, 117;
+    --ion-color-success-contrast: #000000;
+    --ion-color-success-contrast-rgb: 0, 0, 0;
+    --ion-color-success-shade: #29c467;
+    --ion-color-success-tint: #44e283;
+
+    --ion-color-warning: #FF6434;
+    --ion-color-warning-rgb: 255, 100, 52;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #E0BB4B;
+    --ion-color-warning-tint: #FFDA48;
+
+    --ion-color-danger: #fa0021;
+    --ion-color-danger-rgb: 255, 0, 33;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #e04055;
+    --ion-color-danger-tint: #ff5b71;
+
+    --ion-color-dark: #f4f5f8;
+    --ion-color-dark-rgb: 244, 245, 248;
+    --ion-color-dark-contrast: #000000;
+    --ion-color-dark-contrast-rgb: 0, 0, 0;
+    --ion-color-dark-shade: #d7d8da;
+    --ion-color-dark-tint: #f5f6f9;
+
+    --ion-color-medium: #989aa2;
+    --ion-color-medium-rgb: 152, 154, 162;
+    --ion-color-medium-contrast: #000000;
+    --ion-color-medium-contrast-rgb: 0, 0, 0;
+    --ion-color-medium-shade: #86888f;
+    --ion-color-medium-tint: #a2a4ab;
+
+    --ion-color-light: #222428;
+    --ion-color-light-rgb: 34, 36, 40;
+    --ion-color-light-contrast: #ffffff;
+    --ion-color-light-contrast-rgb: 255, 255, 255;
+    --ion-color-light-shade: #1e2023;
+    --ion-color-light-tint: #383a3e;
+
+    --mat-select-panel-background-color: var(--ion-color-step-100);
+
+    ion-modal {
+      --ion-background-color: var(--ion-color-step-100);
+      --ion-toolbar-background: var(--ion-color-step-150);
+      --ion-toolbar-border-color: var(--ion-color-step-250);
+    }
+
+    ion-alert {
+      --ion-background-color: var(--ion-color-step-100);
+    }
+
+    ion-menu#menu {
+      --ion-item-text-color-selected: var(--ion-color-secondary100-contrast);
+      --ion-item-icon-color-selected: var(--ion-color-secondary100-contrast);
+    }
+  }
 }
 
 /*
@@ -79,9 +98,16 @@ html.dark {
  */
 
 html.ios.dark {
+  --app-form-color-disabled: #949494;
+  --app-form-color: var(--ion-text-color);
+  --app-form-field-background-color: var(--ion-color-light-tint);
+  //--app-form-field-disabled-background-color: var(--ion-color-light);
+
   --ion-background-color: #000000;
   --ion-background-color-rgb: 0, 0, 0;
 
+  //--ion-toolbar-background: #1f1f1f;
+
   --ion-text-color: #ffffff;
   --ion-text-color-rgb: 255, 255, 255;
 
@@ -110,12 +136,6 @@ html.ios.dark {
   --ion-card-background: #1c1c1d;
 }
 
-.ios ion-modal {
-  --ion-background-color: var(--ion-color-step-100);
-  --ion-toolbar-background: var(--ion-color-step-150);
-  --ion-toolbar-border-color: var(--ion-color-step-250);
-}
-
 /*
  * Material Design Dark Theme
  * -------------------------------------------
@@ -125,9 +145,11 @@ html.md.dark {
 
   --app-form-color-disabled: #949494;
   --app-form-color: var(--ion-text-color);
+  --app-form-field-background-color: var(--ion-color-light-tint);
+  --app-form-field-label-color: #949494;
 
   --ion-background-color: #121212;
-  --ion-background-color-rgb: 18,18,18; // #{color-to-rgb-list(#121212)};
+  --ion-background-color-rgb: 18,18,18;
   --ion-toolbar-background: #1f1f1f;
 
   --ion-text-color: #ffffffde;