@sumaris-net/ngx-components 21.0.0-rc40 → 21.0.0-rc41

package/doc/changelog.md

@@ -2329,3 +2329,4 @@ enh: Environment: add useHash property to configure Angular router to use hash U
 - enh(image-gallery): add support for custom version query param
 - enh(image-gallery): emit `modeChange` when gallery mode updates
 - fix(menu) Rename getter `MenuService.enabled: `Observable<boolean>` into `enabled$`, and add `get enabled(): boolean`
+- enh(theme) Allow overriding configuration properties (e.g. `sumaris.color.*` theme colors) using the injected `ENVIRONMENT` token's new `properties` field - useful to customize the app without a server-side (Pod) configuration, e.g. for offline apps on mobile

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

@@ -234,6 +234,11 @@ class Environment {
     account;
     entityEditor;
     feed;
+    // Configuration options (same keys as the server's Pod configuration - e.g. 'sumaris.color.primary'),
+    // Used to override, or replace, the config loaded from the server (e.g. useful for offline mobile apps,
+    // or to fully customize the app without any server-side configuration).
+    // See CORE_CONFIG_OPTIONS for the list of existing keys.
+    properties;
 }
 
 const DATE_ISO_PATTERN = 'YYYY-MM-DDTHH:mm:ss.SSSZ';
@@ -17377,6 +17382,12 @@ const environment = Object.freeze({
         maxCount: 3,
     },
     buildDate: new Date().toISOString(),
+    // Example: override (or replace) server (Pod) configuration properties - e.g. theme colors -
+    // directly from the environment. Useful to customize the app without any server-side
+    // configuration (e.g. offline apps, on mobile). See CORE_CONFIG_OPTIONS for existing keys.
+    //properties: {
+    //  'sumaris.color.primary': '#5b5ef4',
+    //},
 });
 
 class EntityClasses {
@@ -26084,6 +26095,8 @@ class ConfigService extends BaseGraphqlService {
         // If this is the default config
         const defaultConfig = this.$data.value;
         if (isNotNil(defaultConfig) && reloadedConfig?.label === defaultConfig.label) {
+            // Re-apply environment properties (e.g. theme colors), so they are not lost on save
+            this.mergeEnvironmentProperties(reloadedConfig);
             // Emit update event when is default config
             this.$data.next(reloadedConfig);
         }
@@ -26158,12 +26171,28 @@ class ConfigService extends BaseGraphqlService {
         data.label = data.label || this.environment.name;
         // Reset name (if same as label)
         data.name = data.name !== data.label ? data.name : undefined;
+        // Merge environment properties (e.g. theme colors), to allow customizing the app
+        // without a server-side configuration (useful for offline apps, on mobile)
+        this.mergeEnvironmentProperties(data);
         // Check compatible version
         if (wasJustLoaded) {
             // TODO
         }
         return data;
     }
+    /**
+     * Merge the environment's properties (if any) into the given configuration.
+     * Environment properties take precedence over the server (Pod) configuration,
+     * so the app can be fully customized (e.g. theme colors) using only the injected
+     * ENVIRONMENT token - without requiring any change on the server side.
+     */
+    mergeEnvironmentProperties(data) {
+        const envProperties = this.environment.properties;
+        if (envProperties && Object.keys(envProperties).length) {
+            data.properties = { ...data.properties, ...envProperties };
+        }
+        return data;
+    }
     async restoreLocally() {
         let data;
         // Try to load from local storage