@sumaris-net/ngx-components 18.22.27 → 18.22.29-alpha1

package/fesm2022/sumaris-net.ngx-components.mjs

@@ -145,9 +145,10 @@ import * as i4$1 from 'ionic-cache';
 import { CacheModule } from 'ionic-cache';
 import * as i13$1 from '@awesome-cordova-plugins/downloader/ngx';
 import { NotificationVisibility } from '@awesome-cordova-plugins/downloader/ngx';
-import { StatusBar } from '@capacitor/status-bar';
+import { Style, StatusBar } from '@capacitor/status-bar';
 import { Browser } from '@capacitor/browser';
 import { Clipboard } from '@capacitor/clipboard';
+import { EdgeToEdge } from '@capawesome/capacitor-android-edge-to-edge-support';
 import * as i2$6 from '@angular/cdk/platform';
 import * as i3$5 from '@angular/cdk/clipboard';
 import { select } from '@rx-angular/state/selections';
@@ -6760,6 +6761,7 @@ class CapacitorPlugins {
     static Camera = 'Camera';
     static StatusBar = 'StatusBar';
     static Keyboard = 'Keyboard';
+    static EdgeToEdge = 'EdgeToEdge';
     //static readonly BarcodeScanner = 'BarcodeScanner';
     static isAvailable = Capacitor.isPluginAvailable;
 }
@@ -25461,11 +25463,99 @@ class PlatformService extends StartableService {
             console.error('[platform] Unable to copy to clipboard: ' + data);
         }
     }
-    toggleDarkTheme(enable) {
-        const wasEnabled = document.documentElement.classList.contains('dark');
+    async updateTheme(options) {
+        if (!options)
+            return;
+        const style = document.documentElement.style;
+        // options.colors = {
+        //   ...options.colors,
+        //   primary: '#124541',
+        // };
+        // Set colors
+        if (options.colors) {
+            console.info('[platform] Changing theme colors ', options.colors);
+            // Add 100 & 900 color for primary and secondary color
+            ['primary', 'secondary'].forEach((colorName) => {
+                const color = options.colors[colorName];
+                options.colors[colorName + '100'] = (color && mixHex('#ffffff', color, 10)) || undefined;
+                options.colors[colorName + '900'] = (color && mixHex('#000000', color, 12)) || undefined;
+            });
+            Object.getOwnPropertyNames(options.colors).forEach((colorName) => {
+                // Remove existing value
+                style.removeProperty(`--ion-color-${colorName}`);
+                style.removeProperty(`--ion-color-${colorName}-rgb`);
+                style.removeProperty(`--ion-color-${colorName}-contrast`);
+                style.removeProperty(`--ion-color-${colorName}-contrast-rgb`);
+                style.removeProperty(`--ion-color-${colorName}-shade`);
+                style.removeProperty(`--ion-color-${colorName}-tint`);
+                // Set new value, if any
+                const color = options.colors[colorName];
+                if (isNotNilOrBlank(color)) {
+                    // Base color
+                    style.setProperty(`--ion-color-${colorName}`, color);
+                    style.setProperty(`--ion-color-${colorName}-rgb`, hexToRgbArray(color).join(', '));
+                    // Contrast color
+                    const contrastColor = getColorContrast(color, true);
+                    style.setProperty(`--ion-color-${colorName}-contrast`, contrastColor);
+                    style.setProperty(`--ion-color-${colorName}-contrast-rgb`, hexToRgbArray(contrastColor).join(', '));
+                    // Shade color
+                    style.setProperty(`--ion-color-${colorName}-shade`, getColorShade(color));
+                    // Tint color
+                    style.setProperty(`--ion-color-${colorName}-tint`, getColorTint(color));
+                }
+            });
+        }
+        // Set CSS vars
+        if (options.vars) {
+            console.info('[platform] Changing theme vars ', options.vars);
+            Object.getOwnPropertyNames(options.vars).forEach((varName) => {
+                // Set new value, if any
+                const value = options.vars[varName];
+                if (isNotNilOrBlank(value)) {
+                    style.setProperty(varName, value);
+                }
+                else {
+                    style.removeProperty(varName);
+                }
+            });
+        }
+        // Set dark mode
+        if (isNotNil(options.darkMode)) {
+            await this.toggleDarkTheme(options.darkMode);
+        }
+    }
+    async toggleDarkTheme(enable) {
+        const classList = document.documentElement.classList;
+        // Toggle the class
+        const wasEnabled = classList.contains('dark');
         if (enable !== wasEnabled) {
             console.debug(`[platform] ${enable ? 'Enable' : 'Disable'} dark mode...`);
-            document.documentElement.classList.toggle('dark', enable);
+            classList.toggle('dark', enable);
+        }
+        // If mobile (Android or iOS)
+        if (this.isApp() && (this.isIOS() || this.isAndroid())) {
+            // Read the primary color, if any
+            const style = getComputedStyle(document.documentElement);
+            const primaryColor = style.getPropertyValue('--ion-color-primary')?.trim();
+            // Configure status bar style
+            const statusBarStyle = enable ? Style.Light : Style.Dark;
+            console.debug(`[platform] StatusBar style: ${statusBarStyle} ...`);
+            try {
+                await StatusBar.setStyle({ style: statusBarStyle });
+            }
+            catch (err) {
+                console.error('[platform] Error while setting StatusBar style', err);
+            }
+            // Configure status bar background color (always use black on dark mode)
+            const backgroundColor = !primaryColor || enable ? '#000000' : primaryColor;
+            console.debug(`[platform] StatusBar background color: ${backgroundColor}`);
+            try {
+                await EdgeToEdge.setBackgroundColor({ color: backgroundColor });
+                await StatusBar.setBackgroundColor({ color: backgroundColor });
+            }
+            catch (err) {
+                console.error('[platform] Error while setting StatusBar background color', err);
+            }
         }
     }
     toggleHighContrast(enable) {
@@ -25496,6 +25586,9 @@ class PlatformService extends StartableService {
             });
             this.registerSubscription(combineLatest([isScreen$, this.settings.darkMode$]).subscribe(([isScreen, enable]) => this.toggleDarkTheme(isScreen && enable)));
         }
+        else {
+            await this.toggleDarkTheme(false);
+        }
         // Workaround, for MS Windows touch screen (detected as mobile, but forced as desktop)
         if (!mobile &&
             (win.document.documentElement?.classList.contains('plt-mobile') || win.document.documentElement.classList?.contains('plt-mobileweb'))) {
@@ -25510,8 +25603,14 @@ class PlatformService extends StartableService {
         console.info('[platform] Configuring Capacitor plugins...');
         let pluginName;
         try {
+            pluginName = CapacitorPlugins.EdgeToEdge;
+            if (this.isApp()) {
+                // TODO tests enable
+                await EdgeToEdge.disable();
+            }
             pluginName = CapacitorPlugins.StatusBar;
-            if (this.isApp() && this.isAndroid()) {
+            if (this.isApp()) {
+                // Avoid overlays (Android 15 or iOS)
                 await StatusBar.setOverlaysWebView({ overlay: false });
             }
             // Hide accessory bar (iOS only)