@sumaris-net/ngx-components 21.3.3-rc1 → 21.3.4

package/package.json

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

package/src/assets/i18n/en-US.json

@@ -653,10 +653,12 @@
       "DRAG_AND_DROP": "Drag and drop a file{{ extension }} here<br/>or",
       "BROWSE": "Browse",
       "IMPORTING": "Import in progress",
+      "DONE_COUNT": "{{count}} / {{total}} file(s) ready",
       "BTN_IMPORT_POLICY_DOTS": "Import policy...",
       "ERROR": "Error while uploading file",
       "MAX_FILE_SIZE_ERROR": "The file size is too large to be uploaded ({{maxFileSizeMb}} MB max)",
       "EXTENSION_NOT_ALLOWED_ERROR": "The file extension is not allowed ({{fileExtensionsExcluded}} excluded)",
+      "TYPE_NOT_ALLOWED_ERROR": "This file type is not allowed (expected: {{fileExtension}}).",
       "IMPORT_POLICY": {
         "TITLE": "Import options",
         "INSERT-ONLY": "Inserts only",

package/src/assets/i18n/en.json

@@ -653,10 +653,12 @@
       "DRAG_AND_DROP": "Drag and drop a file{{ extension }} here<br/>or",
       "BROWSE": "Browse",
       "IMPORTING": "Import in progress",
+      "DONE_COUNT": "{{count}} / {{total}} file(s) ready",
       "BTN_IMPORT_POLICY_DOTS": "Import policy...",
       "ERROR": "Error while uploading file",
       "MAX_FILE_SIZE_ERROR": "The file size is too large to be uploaded ({{maxFileSizeMb}} MB max)",
       "EXTENSION_NOT_ALLOWED_ERROR": "The file extension is not allowed ({{fileExtensionsExcluded}} excluded)",
+      "TYPE_NOT_ALLOWED_ERROR": "This file type is not allowed (expected: {{fileExtension}}).",
       "IMPORT_POLICY": {
         "TITLE": "Import options",
         "INSERT-ONLY": "Inserts only",

package/src/assets/i18n/fr.json

@@ -656,10 +656,12 @@
       "DRAG_AND_DROP": "Glisser et déposer un fichier{{ extension }} ici<br/>ou",
       "BROWSE": "Parcourir",
       "IMPORTING": "Importation en cours",
+      "DONE_COUNT": "{{count}} / {{total}} fichier(s) prêt(s)",
       "BTN_IMPORT_POLICY_DOTS": "Stratégie d'importation...",
       "ERROR": "Erreur durant l'envoi de fichier",
       "MAX_FILE_SIZE_ERROR": "La taille du fichier est trop importante pour être téléversé ({{maxFileSizeMb}} Mo max).",
       "EXTENSION_NOT_ALLOWED_ERROR": "L'extension du fichier n'est pas autorisée ({{fileExtensionsExcluded}} exclus).",
+      "TYPE_NOT_ALLOWED_ERROR": "Ce type de fichier n'est pas accepté (attendu : {{fileExtension}}).",
       "IMPORT_POLICY": {
         "TITLE": "Stratégie d'importation",
         "INSERT-ONLY": "Insertions uniquement",

package/src/assets/manifest.json

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

package/src/theme/_mixins.scss

@@ -129,8 +129,10 @@
   --ion-backdrop-opacity: 0.32;
   --ion-card-background-color: #{$card-background-color};
 
-  --expansion-panel-padding: var($app-expansion-panel-padding, var(--ion-padding));
-  --expansion-panel-header-padding: var($app-expansion-panel-header-padding, var(--ion-padding));
+  // Do NOT write `var($app-expansion-panel-padding, ...)`: `var()` only accepts a custom property name, so
+  // `var(0, ...)` is invalid and drops the property (expansion panels header was rendered without padding)
+  --expansion-panel-padding: #{$app-expansion-panel-padding};
+  --expansion-panel-header-padding: #{$app-expansion-panel-header-padding};
   --mat-expansion-container-background-color:var($mat-expansion-container-background-color, var(--ion-background-color));
   --mat-expansion-container-text-color: var($mat-expansion-container-text-color, var(--ion-text-color));
 
@@ -140,14 +142,18 @@
   --mat-toolbar-height: #{$mat-toolbar-height-desktop};
   --mat-toolbar-standard-height: #{$mat-toolbar-height-desktop};
   --mat-toolbar-mobile-height: #{$mat-toolbar-height-mobile};
-  --mat-paginator-height: $paginator-height;
+  --mat-paginator-height: #{$app-paginator-height};
   --mat-option-min-height: #{$mat-option-min-height};
   --mat-option-max-height: #{$mat-option-max-height};
   --mat-toolbar-background-color: var(--ion-toolbar-background);
   --mat-toolbar-container-background-color: var(--ion-toolbar-background);
   --mat-toolbar-container-text-color: var(--ion-text-color);
   --mat-table-background-color: var(--ion-background-color);
-
+  .mat-primary {
+    --mat-progress-bar-active-indicator-color: var(--ion-color-primary);
+    --mat-pseudo-checkbox-full-selected-icon-color: var(--ion-color-primary);
+    --mat-pseudo-checkbox-minimal-selected-checkmark-color: var(--ion-color-primary);
+  }
   --as-gutter-background-color: var(--ion-toolbar-background);
 
   --app-table-header-height: #{$app-table-header-height};
@@ -222,6 +228,12 @@
   --app-form-color-rgb: #{$background-color-rgb-value};
   --app-form-field-focus-background-color: rgba(#{$background-color-rgb-value}, 0.87);
 
+  .mat-primary {
+    --mat-progress-bar-active-indicator-color: var(--ion-color-primary);
+    --mat-pseudo-checkbox-full-selected-icon-color: var(--ion-color-primary);
+    --mat-pseudo-checkbox-minimal-selected-checkmark-color: var(--ion-color-primary);
+  }
+
   // Step colors
   --ion-color-step-50: #{$text-color-step-50};
   --ion-color-step-100: #{$text-color-step-100};

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

@@ -13,8 +13,8 @@ $app-table-cell-focus-background-color: transparent !default;
 $app-paginator-height: 34px !default;
 $app-form-buttons-bar-height: 56px !default;
 
-$app-expansion-panel-padding: 0 !default;
-$app-expansion-panel-header-padding: 0 !default;
+$app-expansion-panel-padding: var(--ion-padding) !default;
+$app-expansion-panel-header-padding: var(--ion-padding) !default;
 
 // Form's field text and label
 $app-form-color: #{$text-color} !default;

package/src/theme/_ngx-components.scss

@@ -93,7 +93,16 @@ ion-content {
 }
 
 ion-footer {
-  padding-bottom: var(--ion-safe-area-bottom);
+  &:has(mat-paginator) {
+    mat-paginator {
+      padding-bottom: var(--ion-safe-area-bottom);
+    }
+  }
+
+  &:not(:has(mat-paginator)) {
+    padding-bottom: var(--ion-safe-area-bottom);
+  }
+
 }
 
 ion-fab[vertical="bottom"] {

package/types/sumaris-net-ngx-components-testing.d.ts

@@ -73,6 +73,10 @@ declare const MaterialSelectors: {
     tabLabel: string;
     /** Material paginator */
     paginator: string;
+    /** Material paginator range label (e.g. '1 - 20 of 42') */
+    paginatorRangeLabel: string;
+    /** Material progress bar */
+    progressBar: string;
     /** Material icon */
     icon: string;
     /** Material autocomplete panel */
@@ -86,6 +90,8 @@ declare const MaterialSelectors: {
 declare class MaterialHelper {
     private page;
     constructor(page: Page);
+    /** Append a suffix (e.g. a class) to each part of a selector list (e.g. 'mat-cell, td[mat-cell]') */
+    protected static withSuffix(selectors: string, suffix: string): string;
     /** Get all visible table rows, optionally scoped to a parent locator */
     tableRows(scope?: Locator): Locator;
     /** Get a single table row by index (0-based), optionally scoped to a parent locator */
@@ -106,6 +112,18 @@ declare class MaterialHelper {
     selectMatSelectOption(formControlName: string, optionText: string | RegExp): Promise<void>;
     /** Select an autocomplete option by text after typing in a form control */
     selectAutocompleteOption(formControlName: string, searchText: string, optionText: string | RegExp): Promise<void>;
+    /** Get the cells of a table column (e.g. 'lastName'), optionally scoped to a parent locator */
+    tableCells(column: string, scope?: Locator): Locator;
+    /** Get the cell of a row, in the given column (e.g. 'lastName') */
+    rowCell(row: Locator, column: string): Locator;
+    /** Get the table rows having a cell (in the given column) that contains the text, optionally scoped to a parent locator */
+    tableRowsByCell(column: string, text: string | RegExp, scope?: Locator): Locator;
+    /** Get the header cell of a table column (e.g. to sort it), optionally scoped to a parent locator */
+    tableHeaderCell(column: string, scope?: Locator): Locator;
+    /** Read the total count, from the paginator range label (e.g. '1 - 20 of 42' -> 42), optionally scoped to a parent locator */
+    paginatorTotal(scope?: Locator): Promise<number>;
+    /** Wait for the progress bar(s) to stop (not in 'query' mode), optionally scoped to a parent locator */
+    waitForProgressBarIdle(timeout?: number, scope?: Locator): Promise<void>;
     /** Wait for table rows to be loaded (at least one row visible), optionally scoped to a parent locator */
     waitForTableRows(timeout?: number, scope?: Locator): Promise<void>;
 }
@@ -176,6 +194,18 @@ declare class UiHelper {
     tableRow(index: number, scope?: Locator): Locator;
     /** Click on a table row by index, optionally scoped to a parent locator */
     clickRow(index: number, scope?: Locator): Promise<void>;
+    /** Get the cells of a table column, optionally scoped to a parent locator */
+    tableCells(column: string, scope?: Locator): Locator;
+    /** Get the cell of a row, in the given column */
+    rowCell(row: Locator, column: string): Locator;
+    /** Get the table rows having a cell (in the given column) that contains the text */
+    tableRowsByCell(column: string, text: string | RegExp, scope?: Locator): Locator;
+    /** Get the header cell of a table column */
+    tableHeaderCell(column: string, scope?: Locator): Locator;
+    /** Read the total count, from the table paginator */
+    paginatorTotal(scope?: Locator): Promise<number>;
+    /** Wait for the progress bar(s) to stop (e.g. end of all HTTP requests) */
+    waitForProgressBarIdle(timeout?: number, scope?: Locator): Promise<void>;
     /** Fill a mat-form-field input identified by its formControlName */
     fillFormControl(formControlName: string, value: string): Promise<void>;
     /** Select an autocomplete option */