@sumaris-net/ngx-components 21.0.0-rc2 → 21.0.0-rc21

package/src/assets/manifest.json

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

package/src/theme/_functions.scss

@@ -1,5 +1,5 @@
-//@use './ionic/ionic.functions.string';
-//@use './ionic/ionic.functions.color';
+@forward './ionic/ionic.functions.string';
+@forward './ionic/ionic.functions.color';
 
 @function calculateRem($size) {
   $remSize: $size / 16px;

package/src/theme/_icons.scss

@@ -3,7 +3,7 @@
 // --------------------------------------------------
 // Import material icons
 // --------------------------------------------------
-@use 'material-design-icons-iconfont/src/material-design-icons' with (
+@forward 'material-design-icons-iconfont/src/material-design-icons' with (
   $material-design-icons-font-directory-path: '../dist/fonts/'
 );
 

package/src/theme/_ionic.globals.scss

@@ -1,12 +1,13 @@
-@use 'ionic/ionic.globals' as *;
-@use 'ionic/ionic.theme.default' as *;
+// Color functions (get-color-shade/tint, color-to-rgb-list) must be in scope here,
+// otherwise the $colors map below (and the mixins in _mixins.scss) would emit them as
+// literal, unevaluated CSS functions (e.g. `get-color-tint(#3880ff)`), producing invalid
+// values for --ion-color-*-tint/-shade/-rgb. With Sass modules, `@use ... as *` is NOT
+// transitive, so we must use/forward this module explicitly (the legacy @import made it global).
+@use 'ionic/ionic.functions.color' as *;
 
 // --------------------------------------------------
 // Define Ionic defaults
 // --------------------------------------------------
-@forward 'ionic/ionic.globals';
-@forward 'ionic/ionic.theme.default';
-
 $ionicons-font-path: '~ionicons/dist/fonts';
 
 // --------------------------------------------------
@@ -140,4 +141,9 @@ $colors: (
   dark: (base: $dark, contrast: #fff, shade: get-color-shade($dark), tint: get-color-tint($dark)),
   /* transparent */
   transparent: (base: $transparent, contrast: $dark, shade: $transparent, tint: $transparent)
+) !default;
+
+@forward 'ionic/ionic.functions.color';
+@forward 'ionic/ionic.globals' with (
+  $colors: $colors
 );

package/src/theme/_material.globals.scss

@@ -80,3 +80,5 @@ $mat-toolbar-height-mobile: 56px !default;
 $mat-toolbar-background-color: var(--ion-toolbar-background, var(--ion-background-color, whitesmoke)) !default;
 $mat-option-min-height: 48px !default;
 $mat-option-max-height: 48px !default;
+$mat-expansion-container-background-color: var(--ion-color-secondary100) !default;
+$mat-expansion-container-text-color: var(--ion-text-color) !default;

package/src/theme/_mixins.scss

@@ -4,8 +4,6 @@
 @use 'ngx-components.globals' as *;
 @use '@angular/material' as mat;
 
-@forward "functions";
-
 @mixin font-size($size) {
   font-size: calculateRem($size);
 }
@@ -44,12 +42,20 @@
 /**
 * Define CSS theme colors
 */
-@mixin generate-color($color-name) {
-  $value: map-get($colors, $color-name);
+@mixin generate-color($color-name, $value) {
   $base: map-get($value, base);
   $contrast: map-get($value, contrast);
+  @if not $contrast {
+    $contrast: get-color-contrast($base);
+  }
   $shade: map-get($value, shade);
+  @if not $shade {
+    $shade: get-color-shade($base);
+  }
   $tint: map-get($value, tint);
+  @if not $tint {
+    $tint: get-color-tint($base);
+  }
   --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)});
   --ion-color-contrast: var(--ion-color-#{""+$color-name}-contrast, #{$contrast}) !important;
@@ -58,10 +64,12 @@
   --ion-color-tint: var(--ion-color-#{""+$color-name}-tint, #{$tint}) !important;
 }
 
-@mixin generate-color-list($color-name) {
-  $value: map-get($colors, $color-name);
+@mixin generate-color-list($color-name, $value) {
   $base: map-get($value, base);
   $contrast: map-get($value, contrast);
+  @if not $contrast {
+    $contrast: get-color-contrast($base);
+  }
   $shade: map-get($value, shade);
   $tint: map-get($value, tint);
   --ion-color-#{""+$color-name} : #{$base};
@@ -72,8 +80,7 @@
   --ion-color-#{""+$color-name}-tint: #{$tint};
 }
 
-@mixin generate-dark-color-list($color-name) {
-  $value: map-get($colors, $color-name);
+@mixin generate-dark-color-list($color-name, $value) {
   $base: mix(map-get($value, base), #000, 50%);
   $contrast: get-color-contrast($base, true);
   $shade: lighten($base, 10%);
@@ -95,19 +102,19 @@
   }
 }
 
-@mixin css-variables-to-root() {
-  @each $color-name,
-  $value in $colors {
+@mixin css-variables-to-root($colors) {
+  @each $color-name, $value in $colors {
     .ion-color-#{""+$color-name} {
-      @include generate-color($color-name);
+      @include generate-color($color-name, $value);
     }
   }
 
   @each $color-name,
   $value in $colors {
-    @include generate-color-list($color-name);
+    @include generate-color-list($color-name, $value);
   }
 
+
   --ion-text-color: #{$text-color-value};
   --ion-text-color-rgb: #{$text-color-rgb-value};
   --ion-grid-column-padding: #{$ion-grid-column-padding};
@@ -122,10 +129,10 @@
   --ion-backdrop-opacity: 0.32;
   --ion-card-background-color: #{$card-background-color};
 
-  --expansion-panel-padding: var(--ion-padding);
-  --expansion-panel-header-padding: var(--ion-padding);
-  --mat-expansion-container-background-color: var(--ion-background-color);
-  --mat-expansion-container-text-color: var(--ion-text-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));
+  --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));
 
   --mat-tab-link-height: #{$mat-tab-link-height};
   --mat-tab-bar-height: #{$mat-tab-bar-height};
@@ -193,7 +200,7 @@
 
 }
 
-@mixin css-variables-to-root-dark() {
+@mixin css-variables-to-root-dark($colors) {
 
   @include mat.all-component-colors($candy-dark-theme);
 
@@ -202,7 +209,7 @@
 
   @each $color-name,
   $value in $colors {
-    @include generate-dark-color-list($color-name);
+    @include generate-dark-color-list($color-name, $value);
   }
 
   // Inverse background/text color

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

@@ -13,6 +13,9 @@ $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;
+
 // Form's field text and label
 $app-form-color: #{$text-color} !default;
 $app-form-color-rgb: #{$text-color-rgb} !default;

package/src/theme/_ngx-components.scss

@@ -209,6 +209,12 @@ mat-option {
       padding: 0 !important;
     }
   }
+
+  /* hide pseudo checkbox, in the footer*/
+  &.mat-pseudo-checkbox-hidden mat-pseudo-checkbox {
+    visibility: hidden;
+    display: none;
+  }
 }
 
 mat-option:not(:last-of-type) {
@@ -296,7 +302,7 @@ mat-option:not(:last-of-type) {
   }
 
   &:has(.min-width-80vw),
-  &:has(.mat-mdc-autocomplete-panel-80vw-size){
+  &:has(.mat-mdc-autocomplete-panel-80vw-size) {
     --min-width: 80vw;
   }
 
@@ -404,12 +410,14 @@ ion-list,
       /* Offset due to mat-pseudo-checkbox */
       padding-left: 32px;
     }
-    &.column {
+    &.sticky {
       /* Set header as sticky*/
       position: -webkit-sticky;
       position: sticky;
-      top: 0;
+      top: var(--top, 0);
       z-index: 1001;
+    }
+    &.column {
       background-color: var(--ion-color-secondary);
       border-bottom: 1px solid #{$app-select-option-border-color};
       color: var(--ion-color-secondary-contrast);
@@ -417,16 +425,16 @@ ion-list,
       @include font-size(12px);
       font-weight: 500;
       height: 20px;
+      --top: var(--header-column-top, 0);
       ion-col {
         white-space: nowrap;
         text-overflow: ellipsis;
       }
       &.mat-select-searchbar-sticky {
         /* offset because of the searchbar height */
-        top: var(--ion-searchbar-height, 58px);
+        --header-column-top: var(--ion-searchbar-height, 58px);
       }
     }
-
   }
 
   ion-row.ion-list-footer,
@@ -437,7 +445,7 @@ ion-list,
     /* Set footer as sticky*/
     position: -webkit-sticky;
     position: sticky;
-    bottom: 0;
+    bottom: var(--footer-bottom, 0);
     z-index: 1001;
     border-top: 1px solid #{$app-select-option-border-color};
     background-color: var(--ion-toolbar-background, #{$ion-toolbar-background});
@@ -453,6 +461,8 @@ ion-list,
       white-space: nowrap;
       text-overflow: ellipsis;
     }
+
+
   }
 
   ion-row {

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

@@ -14,6 +14,8 @@
 }
 
 .dark .mat-mdc-table {
+  // Pre-migration dark-theme sort arrow color (see light value in .mat-mdc-table below)
+  --mat-sort-arrow-color: #c6c6c6;
   --mat-checkbox-selected-checkmark-color: var(--ion-text-color);
   --mat-checkbox-unselected-icon-color: var(--ion-text-color);
   --mat-checkbox-selected-icon-color: var(--ion-color-accent);
@@ -28,6 +30,10 @@
   --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);
+  // Restore the sort arrow color. The Angular Material M2 theme used to emit this token
+  // (#757575 light / #c6c6c6 dark); after the M3 migration it is no longer set, so the arrow
+  // falls back to --mat-sys-on-surface (black). Keep the pre-migration grey for consistency.
+  --mat-sort-arrow-color: #757575;
   --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;
@@ -120,6 +126,8 @@
     .mat-mdc-footer-cell {
       // Remove default padding
       padding-inline: 0;
+      padding-inline-start: 0; // Compat Chrome < 87 (padding-inline not exists yet)
+      padding-inline-end: 0; // Compat Chrome < 87 (padding-inline not exists yet)
 
       &.ion-padding-start {
         padding-inline-start: var(--mat-cell-horizontal-padding);
@@ -357,7 +365,10 @@
       }
 
       .mdc-text-field {
+        // Remove default padding
         padding-inline: 0;
+        padding-inline-start: 0; // Compat Chrome < 87 (padding-inline not exists yet)
+        padding-inline-end: 0; // Compat Chrome < 87 (padding-inline not exists yet)
       }
 
       // Prefix

package/src/theme/_theme.scss

@@ -1,21 +1,22 @@
-@use 'ionic.globals' as *;
-@use 'material.globals' as *;
-@use "ngx-components.globals" as *;
+@forward 'ionic.globals';
+@forward 'material.globals';
+@forward 'ngx-components.globals';
 
 // --------------------------------------------------
 // Import Ionic style
 // --------------------------------------------------
 @use "ionic";
 // --------------------------------------------------
-// Import Ion Icons
+// Import Icons
 // --------------------------------------------------
 $ionicons-font-path: '~ionicons/dist/fonts';
 @use "icons";
 // --------------------------------------------------
 // Import Fonts
 // --------------------------------------------------
-$roboto-font-path: '~roboto-fontface/fonts/roboto';
-@use "roboto";
+@use "roboto" as * with (
+  $roboto-font-path: '~roboto-fontface/fonts/roboto'
+);
 // --------------------------------------------------
 // Import responsive style
 // --------------------------------------------------

package/src/theme/_theme.variables.scss

@@ -1,14 +1,20 @@
+@use 'ionic.globals' as *;
 @use "mixins" as *;
 
+
 * {
   @include font-roboto();
 }
 
 /** Inject all CSS Variables **/
-html {
-  @include css-variables-to-root();
-
-  &.plt-mobile {
+// NOTE: must use ':root' (not 'html') to match the specificity of Ionic 8's
+// default palette, which is now declared on ':root' in @ionic/angular/css/core.css.
+// A 'html' selector has a lower specificity than ':root' and would always be
+// overridden by Ionic's defaults (e.g. --ion-color-primary: #0054e9).
+:root {
+  @include css-variables-to-root($colors);
+
+  &:has(html.plt-mobile) {
     @include css-variables-to-root-mobile();
   }
 
@@ -19,7 +25,7 @@ html {
  * -------------------------------------------
  */
 html.dark {
-  @include css-variables-to-root-dark();
+  @include css-variables-to-root-dark($colors);
 
   --ion-color-primary: #428cff;
   --ion-color-primary-rgb: 66, 140, 255;

package/src/theme/ionic/ionic.globals.scss

@@ -8,8 +8,7 @@
 @use "./ionic.mixins" as *;
 
 // Default Theme
-@use "./ionic.theme.default" as *;
-
+@forward "./ionic.theme.default";
 
 // Default General
 // --------------------------------------------------

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

@@ -0,0 +1,287 @@
+import { Page, Locator, PlaywrightTestArgs } from '@playwright/test';
+
+declare const STARTUP_DATA_STORAGE_KEY = "__appStartupData";
+
+/**
+ * Utility selectors and helpers for Ionic components in e2e tests.
+ */
+declare const IonicSelectors: {
+    /** Ionic button */
+    button: string;
+    /** Ionic modal */
+    modal: string;
+    /** Ionic content area */
+    content: string;
+    /** Ionic item */
+    item: string;
+    /** Ionic label */
+    label: string;
+    /** Ionic spinner */
+    spinner: string;
+    /** Ionic skeleton text (loading placeholder) */
+    skeletonText: string;
+    /** Ionic back button */
+    backButton: string;
+    /** Ionic toolbar */
+    toolbar: string;
+    /** Ionic footer */
+    footer: string;
+    /** Ionic header */
+    header: string;
+};
+/**
+ * Helper functions for interacting with Ionic components.
+ */
+declare class IonicHelper {
+    private page;
+    constructor(page: Page);
+    /** Get an Ionic button by text content */
+    buttonByText(text: string | RegExp): Locator;
+    /** Get an Ionic button by CSS selector */
+    button(selector?: string, options?: {
+        hasText?: string | RegExp;
+    }): Locator;
+    /**
+     * Get an Ionic modal by its inner component selector (e.g. 'app-auth-form').
+     * Automatically wraps the selector in `ion-modal:has(...)` so callers
+     * only need to provide the component tag name.
+     */
+    modal(selector: string): Locator;
+    /** Wait for the Ionic app to be ready */
+    waitForAppReady(timeout?: number): Promise<void>;
+    /** Wait for loading spinners to disappear */
+    waitForLoadingComplete(timeout?: number): Promise<void>;
+}
+
+/**
+ * Utility selectors and helpers for Angular Material components in e2e tests.
+ */
+declare const MaterialSelectors: {
+    /** Material table row */
+    row: string;
+    /** Material header row */
+    headerRow: string;
+    /** Material cell */
+    cell: string;
+    /** Material form field */
+    formField: string;
+    /** Material input */
+    input: string;
+    /** Material tab group */
+    tabGroup: string;
+    /** Material tab label */
+    tabLabel: string;
+    /** Material paginator */
+    paginator: string;
+    /** Material icon */
+    icon: string;
+    /** Material autocomplete panel */
+    autocompletePanel: string;
+    /** Material autocomplete option */
+    autocompleteOption: string;
+};
+/**
+ * Helper functions for interacting with Angular Material components.
+ */
+declare class MaterialHelper {
+    private page;
+    constructor(page: Page);
+    /** 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 */
+    tableRow(index: number, scope?: Locator): Locator;
+    /** Click on a table row by index (0-based), optionally scoped to a parent locator */
+    clickRow(index: number, scope?: Locator): Promise<void>;
+    /** Get a tab by its label text */
+    tabByLabel(text: string | RegExp): Locator;
+    /** Click a tab by its label text */
+    clickTab(text: string | RegExp): Promise<void>;
+    /** Fill a mat-form-field input identified by its formControlName.
+     *  Supports both native inputs with formcontrolname and custom components (e.g. mat-autocomplete-field) wrapping an input. */
+    fillFormControl(formControlName: string, value: string): Promise<void>;
+    /**
+     * Select an option from a mat-select dropdown by formControlName.
+     * Opens the dropdown, waits for options to render, clicks the matching option, then waits for the dropdown to close.
+     */
+    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>;
+    /** 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>;
+}
+
+/**
+ * Common UI helper functions to improve readability of e2e tests.
+ * This helper centralizes access to Ionic and Material specific helpers.
+ */
+declare class UiHelper {
+    protected page: Page;
+    protected ionic: IonicHelper;
+    protected mat: MaterialHelper;
+    constructor(page: Page);
+    /**
+     * Click an element and wait for it to be ready.
+     * @param locator The locator to click.
+     * @param timeout The maximum time to wait.
+     */
+    click(locator: Locator, timeout?: number): Promise<void>;
+    /**
+     * Fill an input and wait for it to be ready.
+     * @param locator The locator to fill.
+     * @param value The value to enter.
+     * @param timeout The maximum time to wait.
+     */
+    fill(locator: Locator, value: string, timeout?: number): Promise<void>;
+    /**
+     * Wait for an element to be visible.
+     * @param locator The locator to wait for.
+     * @param timeout The maximum time to wait.
+     */
+    waitForVisible(locator: Locator, timeout?: number): Promise<void>;
+    /**
+     * Wait for an element to be hidden.
+     * @param locator The locator to wait for.
+     * @param timeout The maximum time to wait.
+     */
+    waitForHidden(locator: Locator, timeout?: number): Promise<void>;
+    /**
+     * Get a button by its text content.
+     * Supports both Ionic and Material buttons.
+     * @param text The text content to match.
+     * @param scope Optional locator to scope the search within.
+     */
+    button(text: string | RegExp, scope?: Locator): Locator;
+    /**
+     * Get an icon button by its icon name.
+     * Supports both Ionic and Material icon buttons.
+     * @param iconName The icon name (e.g. 'mail', 'search', 'ellipsis-horizontal').
+     * @param scope Optional locator to scope the search within.
+     */
+    iconButton(iconName: string, scope?: Locator): Locator;
+    /**
+     * Access to the underlying Playwright Page object.
+     */
+    get pageObj(): Page;
+    /** Get a modal by its selector */
+    modal(selector: string): Locator;
+    /** Get a tab by its label text */
+    tab(text: string | RegExp): Locator;
+    /** Wait for the app to be ready */
+    waitForAppReady(timeout?: number): Promise<void>;
+    /** Wait for loading spinners to disappear */
+    waitForLoadingComplete(timeout?: number): Promise<void>;
+    /** Wait for table rows to be loaded, optionally scoped to a parent locator */
+    waitForTableRows(timeout?: number, scope?: Locator): Promise<void>;
+    /** Get a single table row by index (0-based), optionally scoped to a parent locator */
+    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>;
+    /** Fill a mat-form-field input identified by its formControlName */
+    fillFormControl(formControlName: string, value: string): Promise<void>;
+    /** Select an autocomplete option */
+    selectAutocompleteOption(formControlName: string, searchText: string, optionText: string | RegExp): Promise<void>;
+    /**
+     * Select an option from a mat-select dropdown.
+     * Opens the dropdown, waits for options, clicks the matching one, then waits for the dropdown to close.
+     */
+    selectOption(formControlName: string, optionText: string | RegExp): Promise<void>;
+}
+
+/**
+ * Helper for authentication in e2e tests.
+ */
+declare class AuthHelper {
+    private page;
+    protected ui: UiHelper;
+    constructor(page: Page, ui?: UiHelper);
+    /** Login with given test credentials */
+    login(username: string, password: string): Promise<void>;
+    /** Wait until the user is logged in and return the email shown in the side menu */
+    waitForLoggedIn(): Promise<string | null>;
+    /** Setup startup data with provided credentials or environment variables */
+    loginByEnv(opts?: {
+        username?: string;
+        password?: string;
+        offline?: boolean;
+        peerUrl?: string;
+    }): Promise<void>;
+}
+
+/**
+ * Search environments based on provided criteria.
+ *
+ * Use when you need to run tests with one or more environments.
+ * Test can use `testWithEnv` to run tests with a specific environment.
+ * Example :
+ *
+ * ```
+ * test.describe('Sample test with environment', () => {
+ *    withEnvs({
+ *      peerTags: ['local'],
+ *      userTags: ['admin'],
+ *    }).forEach((env) => {
+ *      testWithEnv(env)(`Some test with environment ${env.id}`, async ({ page }) => {
+ *        // Test implementation
+ *      });
+ *    });
+ * });
+ * ```
+ *
+ * Environments are loaded from a JSON config file located at one of four paths :
+ * - `LOGIN_ENVS_PATH` environment variable
+ * - `.environments.json` in the current directory (e.g. `.environments.json`)
+ * - `.environments.json` in the `.local` directory (e.g. `.local/environments.json`)
+ * - `.environments.json` in the `e2e` directory (e.g. `e2e/.environments.json`)
+ *
+ * Example of JSON :
+ *
+ * ```
+ * {
+ *   "peers": [
+ *     {
+ *       "id": "local",
+ *       "tags": ["local"],
+ *       "url": "http://localhost:8080",
+ *       "users": [
+ *         {
+ *           "tags": ["admin"],
+ *           "username": "admin@sumaris.net",
+ *           "password": "admin"
+ *         }
+ *       ]
+ *     }
+ *   ]
+ * }
+ * ```
+ *
+ * @see testWithEnv
+ * @param filter Search criteria.
+ */
+declare function withEnvs(filter: EnvFilter): LoginEnv[];
+/**
+ * Currying function that returns a test function that can be used to run tests with a specific environment.
+ *
+ * ```
+ * testWithEnv(env)(`Some test with environment ${env.id}`, async ({ page }) => {
+ *   // Test implementation
+ * })
+ * ```
+ *
+ * @see withEnvs
+ * @param env Environment to use for the test.
+ */
+declare function testWithEnv(env: LoginEnv): (title: string, testFn: (args: PlaywrightTestArgs) => Promise<void>) => void;
+interface EnvFilter {
+    peerId?: string;
+    peerTags?: string[];
+    userTags?: string[];
+}
+interface LoginEnv {
+    id?: string;
+    peerUrl: string;
+    username: string;
+    password: string;
+}
+
+export { AuthHelper, IonicHelper, IonicSelectors, MaterialHelper, MaterialSelectors, STARTUP_DATA_STORAGE_KEY, UiHelper, testWithEnv, withEnvs };
+export type { EnvFilter, LoginEnv };