@sumaris-net/ngx-components 18.24.24 → 21.0.0-rc10

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

@@ -1,3 +1,8 @@
+@use 'ionic.globals' as *;
+@use 'ngx-components.globals' as *;
+@use 'functions' as *;
+@use 'mixins' as *;
+
 // --------------------------------------------------
 // Material Table
 // --------------------------------------------------
@@ -9,12 +14,14 @@
 }
 
 .dark .mat-mdc-table {
-  --mdc-checkbox-selected-checkmark-color: var(--ion-text-color);
-  --mdc-checkbox-unselected-icon-color: var(--ion-text-color);
-  --mdc-checkbox-selected-icon-color: var(--ion-color-accent);
-  --mdc-checkbox-unselected-focus-icon-color: var(--ion-text-color);
-  --mdc-checkbox-unselected-hover-icon-color: var(--ion-text-color);
-  --mdc-checkbox-unselected-pressed-icon-color: var(--ion-color-accent);
+  // 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);
+  --mat-checkbox-unselected-focus-icon-color: var(--ion-text-color);
+  --mat-checkbox-unselected-hover-icon-color: var(--ion-text-color);
+  --mat-checkbox-unselected-pressed-icon-color: var(--ion-color-accent);
 }
 
 .mat-mdc-table {
@@ -23,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;
@@ -32,24 +43,24 @@
   --mat-cell-horizontal-padding: #{$app-table-cell-horizontal-padding};
   --mat-cell-padding-top: calc(var(--mat-row-height) / 2 - var(--mat-table-row-item-label-text-size, 14px));
 
-  --mdc-typography-body1-font-size: 14px;
-  --mdc-typography-body1-letter-spacing: normal;
+  --mat-typography-body1-font-size: 14px;
+  --mat-typography-body1-letter-spacing: normal;
 
   --mat-form-field-container-text-tracking: normal;
   --mat-form-field-state-layer-color: #{$app-table-cell-focus-background-color};
   --mat-form-field-subscript-text-size: 10px;
-  --mdc-checkbox-state-layer-size: 20px;
-  --mdc-radio-state-layer-size: 20px;
-  --mdc-filled-text-field-container-color: transparent;
-  --mdc-filled-text-field-disabled-container-color: transparent;
-  --mdc-filled-text-field-input-text-color: var(--ion-text-color);
-  --mdc-filled-text-field-input-text-placeholder-color: var(--app-form-field-label-color);
-  --mdc-filled-text-field-caret-color: var(--ion-text-color);
-  --mdc-filled-text-field-active-indicator-color: transparent;
-  --mdc-filled-text-field-hover-label-text-color: var(--app-form-field-label-color);
-  --mdc-filled-text-field-hover-active-indicator-color: transparent;
-  --mdc-filled-text-field-focus-label-text-color: var(--ion-color-primary);
-  --mdc-filled-text-field-focus-active-indicator-color: var(--ion-color-primary);
+  --mat-checkbox-state-layer-size: 20px;
+  --mat-radio-state-layer-size: 20px;
+  --mat-form-field-filled-container-color: transparent;
+  --mat-form-field-filled-disabled-container-color: transparent;
+  --mat-form-field-filled-input-text-color: var(--ion-text-color);
+  --mat-form-field-filled-input-text-placeholder-color: var(--app-form-field-label-color);
+  --mat-form-field-filled-caret-color: var(--ion-text-color);
+  --mat-form-field-filled-active-indicator-color: transparent;
+  --mat-form-field-filled-hover-label-text-color: var(--app-form-field-label-color);
+  --mat-form-field-filled-hover-active-indicator-color: transparent;
+  --mat-form-field-filled-focus-label-text-color: var(--ion-color-primary);
+  --mat-form-field-filled-focus-active-indicator-color: var(--ion-color-primary);
 
   --mat-select-enabled-trigger-text-color: var(--ion-text-color);
   --mat-select-disabled-trigger-text-color: var(--ion-text-color);
@@ -271,7 +282,7 @@
       --ion-text-color: var(--app-table-row-item-selected-text-color) !important;
       --ion-background-color: var(--app-table-row-item-selected-background-color) !important;
 
-      --mdc-filled-text-field-input-text-color: var(--ion-text-color);
+      --mat-form-field-filled-input-text-color: var(--ion-text-color);
       --mat-select-enabled-trigger-text-color: var(--ion-text-color);
       --mat-select-disabled-trigger-text-color: var(--ion-text-color);
       --mat-checkbox-label-text-color: var(--ion-text-color);
@@ -332,10 +343,10 @@
       width: 100%;
 
       --mat-form-field-container-text-size: 14px;
-      --mdc-filled-text-field-label-text-size: var(--mat-form-field-container-text-size);
+      --mat-form-field-filled-label-text-size: var(--mat-form-field-container-text-size);
       --mat-select-trigger-text-size: var(--mat-form-field-container-text-size);
       --mat-mdc-form-field-height: calc(var(--mat-row-height) - 2px);
-      --mdc-outlined-text-field-outline-width: 0;
+      --mat-form-field-outlined-outline-width: 0;
       height: var(--mat-mdc-form-field-height);
 
       .mat-mdc-form-field-label {
@@ -410,7 +421,7 @@
         padding: 0;
 
         .mat-mdc-icon-button {
-          --mdc-icon-button-state-layer-size: 24px;
+          --mat-icon-button-state-layer-size: 24px;
           padding: 0;
 
           ion-icon,
@@ -421,7 +432,7 @@
           }
 
           .mat-mdc-button-touch-target {
-            width: var(--mdc-icon-button-state-layer-size);
+            width: var(--mat-icon-button-state-layer-size);
           }
         }
       }
@@ -622,7 +633,7 @@
   }
 
   button {
-    --mdc-icon-button-state-layer-size: var(--mat-paginator-container-size) !important;
+    --mat-icon-button-state-layer-size: var(--mat-paginator-container-size) !important;
     padding: 6px !important;
   }
 }

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

@@ -1,21 +1,23 @@
+@use "ionic.globals" as *;
+
 // --------------------------------------------------
 // Material tab group/link
 // --------------------------------------------------
 
 // -- Keep Angular 14 tab style
 .mat-mdc-tab-label-container, .mat-mdc-tab-link-container {
-  --mat-tab-header-divider-color: rgba(0,0,0,.12) !important;
-  --mat-tab-header-divider-height: 1px !important;
-  --mat-tab-header-background-color: var(--background, var(--ion-background-color));
-  background-color: var(--mat-tab-header-background-color);
+  --mat-tab-divider-color: rgba(0,0,0,.12) !important;
+  --mat-tab-divider-height: 1px !important;
+  --mat-tab-background-color: var(--background, var(--ion-background-color));
+  background-color: var(--mat-tab-background-color);
 }
 .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
-  --mat-tab-header-active-label-text-color: #000000de !important;
-  --mat-tab-header-active-focus-label-text-color: #000000de !important;
-  --mat-tab-header-active-hover-label-text-color: #000000de !important;
+  --mat-tab-active-label-text-color: #000000de !important;
+  --mat-tab-active-focus-label-text-color: #000000de !important;
+  --mat-tab-active-hover-label-text-color: #000000de !important;
 }
 .mat-mdc-tab-header {
-  --mat-tab-header-label-text-tracking: 0.0178571429em !important;
+  --mat-tab-label-text-tracking: 0.0178571429em !important;
 }
 
 // --- Allow to hide headers
@@ -52,14 +54,14 @@
 // --- Dark mode
 .dark {
   .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
-    --mat-tab-header-active-label-text-color: var(--ion-text-color, #000000de) !important;
-    --mat-tab-header-active-focus-label-text-color: var(--ion-text-color, #000000de) !important;
-    --mat-tab-header-active-hover-label-text-color: var(--ion-text-color, #000000de) !important;
-    --mat-tab-header-inactive-label-text-color: var(--app-form-color-disabled);
-    --mat-tab-header-inactive-hover-label-text-color: var(--ion-text-color, #000000de);
+    --mat-tab-active-label-text-color: var(--ion-text-color, #000000de) !important;
+    --mat-tab-active-focus-label-text-color: var(--ion-text-color, #000000de) !important;
+    --mat-tab-active-hover-label-text-color: var(--ion-text-color, #000000de) !important;
+    --mat-tab-inactive-label-text-color: var(--app-form-color-disabled);
+    --mat-tab-inactive-hover-label-text-color: var(--ion-text-color, #000000de);
   }
   .mat-mdc-tab-label-container, .mat-mdc-tab-link-container {
-    --mat-tab-header-divider-color: var(--ion-border-color, rgba(0,0,0,.12)) !important;
+    --mat-tab-divider-color: var(--ion-border-color, rgba(0,0,0,.12)) !important;
   }
 }
 

package/src/theme/_responsive.scss

@@ -1,3 +1,5 @@
+@use "ionic.globals" as *;
+
 // --------------------------------------------------
 // Hidden/Visible responsive
 // --------------------------------------------------

package/src/theme/_roboto.scss

@@ -1,4 +1,7 @@
+@use "ionic.globals" as *;
+
 // Roboto Font
+// --------------------------
 // Google
 // Apache License, version 2.0
 // http://www.apache.org/licenses/LICENSE-2.0.html

package/src/theme/_theme.scss

@@ -1,37 +1,34 @@
-// --------------------------------------------------
-// Import globals (variables, functions and mixins)
-// --------------------------------------------------
-@import "globals";
+@use 'ionic.globals' as *;
+@use 'material.globals' as *;
+@use "ngx-components.globals" as *;
+
 // --------------------------------------------------
 // Import Ionic style
 // --------------------------------------------------
-@import "ionic";
+@use "ionic";
 // --------------------------------------------------
 // Import Ion Icons
 // --------------------------------------------------
 $ionicons-font-path: '~ionicons/dist/fonts';
-@import "icons";
+@use "icons";
 // --------------------------------------------------
 // Import Fonts
 // --------------------------------------------------
 $roboto-font-path: '~roboto-fontface/fonts/roboto';
-@import "roboto";
+@use "roboto";
 // --------------------------------------------------
 // Import responsive style
 // --------------------------------------------------
-@import "responsive";
+@use "responsive";
 // --------------------------------------------------
 // Import material style
 // --------------------------------------------------
-@import "material";
+@use "material";
 // --------------------------------------------------
 // Import markdown style
 // --------------------------------------------------
-@import "markdown";
+@use "markdown";
 // --------------------------------------------------
 // Import SUMARiS style
 // --------------------------------------------------
-@import "ngx-components";
-@import "ngx-components.tabs";
-@import "ngx-components.table";
-@import "ngx-components.forms";
+@use "ngx-components";

package/src/theme/_theme.variables.scss

@@ -1,5 +1,15 @@
+@use "mixins" as *;
+
+* {
+  @include font-roboto();
+}
+
 /** Inject all CSS Variables **/
-html {
+// 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();
 
   &.plt-mobile {
@@ -15,7 +25,6 @@ html {
 html.dark {
   @include css-variables-to-root-dark();
 
-
   --ion-color-primary: #428cff;
   --ion-color-primary-rgb: 66, 140, 255;
   --ion-color-primary-contrast: #ffffff;

package/src/theme/ionic/ionic.functions.color.scss

@@ -1,3 +1,6 @@
+@use "sass:color";
+@use "sass:map";
+
 // Gets the active color's css variable from a variation. Alpha is optional.
 // --------------------------------------------------------------------------------------------
 // Example usage:
@@ -20,8 +23,8 @@
 // ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
 // --------------------------------------------------------------------------------------------
 @function ion-color($name, $variation, $alpha: null, $rgb: null) {
-  $values: map-get($colors, $name);
-  $value: map-get($values, $variation);
+  $values: map.get($colors, $name);
+  $value: map.get($values, $variation);
   $variable: --ion-color-#{$name}-#{$variation};
 
   @if ($variation == base) {
@@ -43,17 +46,22 @@
 // Mixes a color with black to create its shade.
 // --------------------------------------------------------------------------------------------
 @function get-color-shade($color) {
-  @return mix(#000, $color, 12%);
+  @return color.mix(#000, $color, 12%);
 }
 
 // Mixes a color with white to create its tint.
 // --------------------------------------------------------------------------------------------
 @function get-color-tint($color) {
-  @return mix(#fff, $color, 10%);
+  @return color.mix(#fff, $color, 10%);
 }
 
 // Converts a color to a comma separated rgb.
 // --------------------------------------------------------------------------------------------
 @function color-to-rgb-list($color) {
-  @return #{red($color)},#{green($color)},#{blue($color)};
+
+  $red:   color.channel($color, "red",   $space: rgb);
+  $green: color.channel($color, "green", $space: rgb);
+  $blue:  color.channel($color, "blue",  $space: rgb);
+
+  @return #{$red},#{$green},#{$blue};
 }

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

@@ -1,14 +1,14 @@
 // Global Utility Functions
-@import "./ionic.functions.string";
+@use "./ionic.functions.string" as *;
 
 // Global Color Functions
-@import "./ionic.functions.color";
+@use "./ionic.functions.color" as *;
 
 // Global Mixins
-@import "./ionic.mixins";
+@use "./ionic.mixins" as *;
 
 // Default Theme
-@import "./ionic.theme.default";
+@use "./ionic.theme.default" as *;
 
 
 // Default General

package/src/theme/ionic/ionic.theme.default.scss

@@ -1,3 +1,5 @@
+@use './ionic.functions.color' as *;
+
 // Ionic Theme
 // -------------------------------------------------------------------------------------------
 // This file contains the theme variables shared

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

@@ -0,0 +1,286 @@
+import { Page, Locator } from 'playwright';
+import { PlaywrightTestArgs } from '@playwright/test';
+
+/**
+ * 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, UiHelper, testWithEnv, withEnvs };
+export type { EnvFilter, LoginEnv };