@wavemaker/rn-codegen 11.14.3-rc.6401 → 11.15.0-2.247

package/src/templates/foundation-theme/wavemaker/design-tokens/variables/carousel.variant.less

@@ -1,4 +1,12 @@
 .app-carousel-active-dot {
   --wm-carousel-dots-background: var(--wm-color-primary-container);
   --wm-carousel-dots-opacity: 1px;
+  --wm-carousel-dots-width: 10px;
+  --wm-carousel-dots-height: 10px;
+  --wm-carousel-dots-border-color: var(--wm-color-primary-container);
+  --wm-carousel-dots-border-radius: 5px;
+  --wm-carousel-dots-border-width: var(--wm-border-width-base);
+  --wm-carousel-dots-margin-left: var(--wm-radius-xxs);
+  --wm-carousel-dots-margin-right: var(--wm-radius-xxs);
+  --wm-carousel-slide-padding-horizontal: var(--wm-space-4);
 }

package/src/templates/foundation-theme/wavemaker/design-tokens/variables/container.variant.less

@@ -1,21 +1,44 @@
 .app-default-container {
   --wm-container-border-style: var(--wm-border-style-base);
-  --wm-container-border-width: var(--wm-border-width-0);
+  --wm-container-border-width-top: var(--wm-border-width-0);
+  --wm-container-border-width-bottom: var(--wm-border-width-0);
+  --wm-container-border-width-left: var(--wm-border-width-0);
+  --wm-container-border-width-right: var(--wm-border-width-0);
   --wm-container-border-color: transparent;
   --wm-container-border-radius: var(--wm-radius-none);
+  --wm-container-box-shadow: var(--wm-elevation-shadow-none);
+  --wm-container-padding-top: var(--wm-space-0);
+  --wm-container-padding-bottom: var(--wm-space-0);
+  --wm-container-padding-left: var(--wm-space-0);
+  --wm-container-padding-right: var(--wm-space-0);
 }
 
 .app-outlined-container {
   --wm-container-border-style: var(--wm-border-style-base);
-  --wm-container-border-width: var(--wm-border-width-base);
+  --wm-container-border-width-top: var(--wm-border-width-base);
+  --wm-container-border-width-bottom: var(--wm-border-width-base);
+  --wm-container-border-width-left: var(--wm-border-width-base);
+  --wm-container-border-width-right: var(--wm-border-width-base);
   --wm-container-border-color: var(--wm-color-outline-variant);
   --wm-container-border-radius: 1px;
+  --wm-container-box-shadow: var(--wm-elevation-shadow-none);
+  --wm-container-padding-top: var(--wm-space-0);
+  --wm-container-padding-bottom: var(--wm-space-0);
+  --wm-container-padding-left: var(--wm-space-0);
+  --wm-container-padding-right: var(--wm-space-0);
 }
 
 .app-elevated-container {
   --wm-container-box-shadow: var(--wm-elevation-shadow-1);
   --wm-container-border-style: var(--wm-border-style-base);
   --wm-container-border-color: transparent;
-  --wm-container-border-width: var(--wm-border-width-base);
+  --wm-container-border-width-top: var(--wm-border-width-base);
+  --wm-container-border-width-bottom: var(--wm-border-width-base);
+  --wm-container-border-width-left: var(--wm-border-width-base);
+  --wm-container-border-width-right: var(--wm-border-width-base);
   --wm-container-border-radius: var(--wm-radius-sm);
+  --wm-container-padding-top: var(--wm-space-0);
+  --wm-container-padding-bottom: var(--wm-space-0);
+  --wm-container-padding-left: var(--wm-space-0);
+  --wm-container-padding-right: var(--wm-space-0);
 }

package/src/templates/foundation-theme/wavemaker/design-tokens/variables/form-controls.variant.less

@@ -1,13 +1,19 @@
 .app-input-focused {
   --wm-form-controls-border-color: var(--wm-color-primary);
-  --wm-form-controls-border-width: var(--wm-border-width-base);
+  --wm-form-controls-border-top-width: var(--wm-border-width-1);
+  --wm-form-controls-border-left-width: var(--wm-border-width-1);
+  --wm-form-controls-border-right-width: var(--wm-border-width-1);
+  --wm-form-controls-border-bottom-width: var(--wm-border-width-1);
   --wm-form-controls-background: var(--wm-color-outline-variant);
   --wm-form-controls-color: var(--wm-color-black);
 }
 
 .app-input-disabled {
   --wm-form-controls-border-color: var(--wm-color-shadow);
-  --wm-form-controls-border-width: var(--wm-border-width-base);
+  --wm-form-controls-border-top-width: var(--wm-border-width-1);
+  --wm-form-controls-border-left-width: var(--wm-border-width-1);
+  --wm-form-controls-border-right-width: var(--wm-border-width-1);
+  --wm-form-controls-border-bottom-width: var(--wm-border-width-1);
   --wm-form-controls-background: var(--wm-color-surface-dim);
   --wm-form-controls-color: var(--wm-color-scrim);
   --wm-form-controls-opacity: 0.67;

package/src/templates/foundation-theme/wavemaker/design-tokens/variables/label.variant.less

@@ -1,41 +1,57 @@
+.p {
+  --wm-label-font-size: var(--wm-p-font-size);
+  --wm-label-font-weight: var(--wm-p-font-weight);
+  --wm-label-font-family: var(--wm-p-font-family);
+  --wm-label-line-height: var(--wm-p-line-height);
+  --wm-label-letter-spacing: var(--wm-p-letter-spacing);
+}
+
 .h1 {
   --wm-label-font-size: var(--wm-h1-font-size);
   --wm-label-font-weight: var(--wm-h1-font-weight);
   --wm-label-font-family: var(--wm-h1-font-family);
+  --wm-label-line-height: var(--wm-h1-line-height);
+  --wm-label-letter-spacing: var(--wm-h1-letter-spacing);
 }
 
 .h2 {
   --wm-label-font-size: var(--wm-h2-font-size);
   --wm-label-font-weight: var(--wm-h2-font-weight);
   --wm-label-font-family: var(--wm-h2-font-family);
+  --wm-label-line-height: var(--wm-h2-line-height);
+  --wm-label-letter-spacing: var(--wm-h2-letter-spacing);
 }
 
 .h3 {
   --wm-label-font-size: var(--wm-h3-font-size);
   --wm-label-font-weight: var(--wm-h3-font-weight);
   --wm-label-font-family: var(--wm-h3-font-family);
+  --wm-label-line-height: var(--wm-h3-line-height);
+  --wm-label-letter-spacing: var(--wm-h3-letter-spacing);
 }
 
 .h4 {
   --wm-label-font-size: var(--wm-h4-font-size);
   --wm-label-font-weight: var(--wm-h4-font-weight);
   --wm-label-font-family: var(--wm-h4-font-family);
+  --wm-label-line-height: var(--wm-h4-line-height);
+  --wm-label-letter-spacing: var(--wm-h4-letter-spacing);
 }
 
 .h5 {
   --wm-label-font-size: var(--wm-h5-font-size);
   --wm-label-font-weight: var(--wm-h5-font-weight);
   --wm-label-font-family: var(--wm-h5-font-family);
+  --wm-label-line-height: var(--wm-h5-line-height);
+  --wm-label-letter-spacing: var(--wm-h5-letter-spacing);
 }
 
 .h6 {
   --wm-label-font-size: var(--wm-h6-font-size);
   --wm-label-font-weight: var(--wm-h6-font-weight);
   --wm-label-font-family: var(--wm-h6-font-family);
-}
-
-.p {
-  --wm-label-font-size: var(--wm-body-small-font-size);
+  --wm-label-line-height: var(--wm-h6-line-height);
+  --wm-label-letter-spacing: var(--wm-h6-letter-spacing);
 }
 
 .media-heading {
@@ -50,6 +66,10 @@
   --wm-label-color: var(--wm-color-secondary);
 }
 
+.text-tertiary {
+  --wm-label-color: var(--wm-color-tertiary);
+}
+
 .text-success {
   --wm-label-color: var(--wm-color-success);
 }
@@ -92,6 +112,17 @@
   --wm-label-color: var(--wm-color-on-secondary);
 }
 
+.label-tertiary {
+  --wm-label-padding-left: var(--wm-space-8);
+  --wm-label-padding-right: var(--wm-space-8);
+  --wm-label-padding-top: var(--wm-space-4);
+  --wm-label-padding-bottom: var(--wm-space-4);
+  --wm-label-font-weight: var(--wm-font-weight-700);
+  --wm-label-border-radius: 6px;
+  --wm-label-background-color: var(--wm-color-tertiary);
+  --wm-label-color: var(--wm-color-on-tertiary);
+}
+
 .label-success {
   --wm-label-padding-left: var(--wm-space-8);
   --wm-label-padding-right: var(--wm-space-8);

package/src/templates/foundation-theme/wavemaker/design-tokens/variables/navitem.variant.less

@@ -0,0 +1,14 @@
+.app-navitem-active,
+.app-navitem-active.app-navitem-anchor {
+  --wm-navitem-color: var(--wm-color-on-secondary-fixed);
+  --wm-navitem-icon-size: var(--wm-icon-size);
+  --wm-navitem-icon-color: var(--wm-color-on-secondary-container);
+  --wm-navitem-border-radius: var(--wm-radius-pill);
+  --wm-navitem-background: var(--wm-color-secondary-fixed);
+  --wm-navitem-badge-font-size: var(--wm-label-large-font-size);
+  --wm-navitem-badge-font-family: var(--wm-label-large-font-family);
+  --wm-navitem-badge-font-weight: var(--wm-font-weight-600);
+  --wm-navitem-badge-border-radius: var(--wm-radius-circle);
+  --wm-navitem-badge-background: var(--wm-color-secondary-fixed-dim);
+  --wm-navitem-caret-color: var(--wm-color-on-secondary-fixed);
+}

package/src/templates/foundation-theme/wavemaker/design-tokens/variables/panel.variant.less

@@ -1,47 +1,55 @@
 .panel-default {
   --wm-panel-heading-background: var(--wm-color-surface-container);
-  --wm-panel-heading-color: var(--wm-color-on-surface);
+  --wm-panel-heading-icon-color: var(--wm-color-on-surface);
+  --wm-panel-heading-text-color: var(--wm-color-on-surface);
   --wm-panel-description-color: var(--wm-color-on-surface);
 }
 
 .panel-primary {
   --wm-panel-heading-background: var(--wm-color-primary-container);
-  --wm-panel-heading-color: var(--wm-color-primary);
+  --wm-panel-heading-icon-color: var(--wm-color-primary);
+  --wm-panel-heading-text-color: var(--wm-color-primary);
   --wm-panel-description-color: var(--wm-color-primary);
 }
 
 .panel-secondary.root {
   --wm-panel-heading-background: var(--wm-color-secondary-container);
-  --wm-panel-heading-color: var(--wm-color-secondary);
+  --wm-panel-heading-icon-color: var(--wm-color-secondary);
+  --wm-panel-heading-text-color: var(--wm-color-secondary);
   --wm-panel-description-color: var(--wm-color-secondary);
 }
 
 .panel-tertiary {
   --wm-panel-heading-background: var(--wm-color-tertiary-container);
-  --wm-panel-heading-color: var(--wm-color-tertiary);
+  --wm-panel-heading-icon-color: var(--wm-color-tertiary);
+  --wm-panel-heading-text-color: var(--wm-color-tertiary);
   --wm-panel-description-color: var(--wm-color-tertiary);
 }
 
 .panel-success {
   --wm-panel-heading-background: var(--wm-color-success-container);
-  --wm-panel-heading-color: var(--wm-color-success);
+  --wm-panel-heading-icon-color: var(--wm-color-success);
+  --wm-panel-heading-text-color: var(--wm-color-success);
   --wm-panel-description-color: var(--wm-color-success);
 }
 
 .panel-info {
   --wm-panel-heading-background: var(--wm-color-info-container);
-  --wm-panel-heading-color: var(--wm-color-info);
+  --wm-panel-heading-icon-color: var(--wm-color-info);
+  --wm-panel-heading-text-color: var(--wm-color-info);
   --wm-panel-description-color: var(--wm-color-info);
 }
 
 .panel-warning {
   --wm-panel-heading-background: var(--wm-color-warning-container);
-  --wm-panel-heading-color: var(--wm-color-warning);
+  --wm-panel-heading-icon-color: var(--wm-color-warning);
+  --wm-panel-heading-text-color: var(--wm-color-warning);
   --wm-panel-description-color: var(--wm-color-warning);
 }
 
 .panel-danger {
   --wm-panel-heading-background: var(--wm-color-error-container);
-  --wm-panel-heading-color: var(--wm-color-error);
+  --wm-panel-heading-icon-color: var(--wm-color-error);
+  --wm-panel-heading-text-color: var(--wm-color-error);
   --wm-panel-description-color: var(--wm-color-error);
 }

package/src/templates/foundation-theme/wavemaker/design-tokens/variables/picture.variant.less

@@ -7,7 +7,7 @@
   --wm-picture-border-color: var(--wm-color-border);
   --wm-picture-border-style: var(--wm-border-style-base);
   --wm-picture-border-width: var(--wm-border-width-0);
-  --wm-picture-background: transparent;
+  --wm-picture-background: var(--wm-color-transparent);
   --wm-picture-radius: var(--wm-radius-xs);
 }
 
@@ -20,7 +20,7 @@
   --wm-picture-border-color: var(--wm-color-border);
   --wm-picture-border-style: var(--wm-border-style-base);
   --wm-picture-border-width: var(--wm-border-width-0);
-  --wm-picture-background: transparent;
+  --wm-picture-background: var(--wm-color-transparent);
   --wm-picture-radius: var(--wm-radius-circle);
 }
 

package/src/templates/foundation-theme/wavemaker/design-tokens/variables/switch.variant.less

@@ -1,7 +1,12 @@
-.app-switch-btn-selected {
+.app-switch-btn-selected,
+.app-switch-btn-selected-text {
   --wm-switch-button-background-color: var(--wm-color-secondary-fixed);
   --wm-switch-button-color: var(--wm-color-on-secondary-container);
   --wm-switch-button-border-color: var(--wm-color-outline);
+  --wm-switch-button-font-size: var(--wm-label-large-font-size);
+  --wm-switch-button-font-family: var(--wm-font-family-brand);
+  --wm-switch-button-font-weight: var(--wm-font-weight-500);
+  --wm-switch-button-text-transform: capitalize;
 }
 
 .app-switch-disabled {

package/src/templates/foundation-theme/wavemaker/design-tokens/variables/tabs.variant.less

@@ -2,9 +2,13 @@
 .app-tabheader-active-item-text,
 .app-tabheader-active-item-icon,
 .app-tabheader-active-indicator {
+  --wm-tabs-item-heading-font-size: var(--wm-h6-font-size);
+  --wm-tabs-item-heading-font-weight: var(--wm-h6-font-weight);
+  --wm-tabs-item-heading-line-height: var(--wm-h6-line-height);
   --wm-tabs-item-heading-indicator-height: 3px;
   --wm-tabs-item-heading-indicator-background: var(--wm-color-primary);
   --wm-tabs-item-heading-background: var(--wm-color-surface);
-  --wm-tabs-item-heading-text: var(--wm-color-primary);
-  --wm-tabs-item-heading-icon: var(--wm-color-primary);
+  --wm-tabs-item-heading-text-color: var(--wm-color-primary);
+  --wm-tabs-item-heading-icon-size: var(--wm-icon-size);
+  --wm-tabs-item-heading-icon-color: var(--wm-color-primary);
 }

package/src/templates/foundation-theme/wavemaker/design-tokens/variables/toggle.variant.less

@@ -1,7 +1,15 @@
 .app-toggle-on,
 .app-toggle-handle-on {
   --wm-toggle-background-color: var(--wm-color-secondary);
+  --wm-toggle-border-color: var(--wm-color-secondary);
+  --wm-toggle-border-radius: 18px;
+  --wm-toggle-border-width: 2px;
   --wm-toggle-handle-color: var(--wm-color-on-secondary);
+  --wm-toggle-handle-width: 16px;
+  --wm-toggle-handle-height: 16px;
+  --wm-toggle-handle-radius: 18px;
+  --wm-toggle-handle-margin-left: 8px;
+  --wm-toggle-handle-margin-right: 1px;
 }
 
 .app-toggle-disabled {

package/src/templates/foundation-theme/wavemaker/variables.js.less

@@ -362,4 +362,6 @@
     audioPlayerFgColor: "@{audioPlayerFgColor}";
     tooltipBgColor: "@{tooltipBgColor}";
     tooltipBorderColor: "@{tooltipBorderColor}";
+    overlayColor: "@{overlayColor}";
+    leftPanelOverlayColor: "@{leftPanelOverlayColor}";
 };

package/src/templates/foundation-theme/wavemaker/variables.less

@@ -360,4 +360,6 @@
 @audioPlayerFgColor: if(isdefined(@_audioPlayerFgColor), @_audioPlayerFgColor, @defaultColor3);
 @tooltipBgColor: if(isdefined(@_tooltipBgColor), @_tooltipBgColor, fade(#fff, 40%));
 @tooltipBorderColor: if(isdefined(@_tooltipBorderColor), @_tooltipBorderColor, #404040);
+@overlayColor: if(isdefined(@_overlayColor), @_overlayColor, rgba(127, 127, 127, 1));
+@leftPanelOverlayColor: if(isdefined(@_leftPanelOverlayColor), @_leftPanelOverlayColor, @overlayColor);
 }

package/src/templates/package.web.json

@@ -11,9 +11,9 @@
         "postinstall": ""
     },
     "dependencies": {
-        "@wavemaker/app-rn-runtime": "11.14.3-rc.6401",
-        "@wavemaker/variables": "11.14.3-rc.6401",
-        "@wavemaker/rn-codegen": "11.14.3-rc.6401",
+        "@wavemaker/app-rn-runtime": "11.15.0-2.247",
+        "@wavemaker/variables": "11.15.0-2.247",
+        "@wavemaker/rn-codegen": "11.15.0-2.247",
         "@wavemaker/wavepulse-agent": "1.0.11",
         "expo": "54.0.12",
         "expo-build-properties": "1.0.9",

package/src/templates/project/app.json

@@ -7,6 +7,7 @@
     },
     "name": "wm-react-native-app",
     "slug": "wm-react-native-app",
+    "scheme": "wm-react-native-app",
     "version": "1.0.0",
     "jsEngine": "hermes",
     "orientation": "portrait",

package/src/templates/project/applyAutoLayout.styles.js

@@ -0,0 +1,90 @@
+import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';
+
+const AUTO_LAYOUT_OVERRIDES = {
+    'app-label': {
+        root: {
+            alignSelf: 'auto'
+        }
+    },
+    'app-container': {
+        root: {
+            overflow: 'hidden'
+        }
+    },
+    'app-composite': {
+        root: {
+            width: '100%'
+        }
+    },
+    'app-wizard': {
+        root: {
+            width: '100%'
+        }
+    },
+    'app-panel': {
+        root: {
+            width: '100%'
+        }
+    },
+    'app-carousel': {
+        root: {
+            width: '100%'
+        }
+    },
+    'app-search': {
+        rootWrapper: {
+            width: '100%'
+        }
+    },
+    'app-form': {
+        root: {
+            width: '100%',
+        }
+    },
+    'app-area-chart': {
+        root: {
+            width: '100%',
+        }
+    },
+    'app-bar-chart': {
+        root: {
+            width: '100%'
+        }
+    },
+    'app-column-chart': {
+        root: {
+            width: '100%'
+        }
+    },
+    'app-donut-chart': {
+        root: {
+            width: '100%'
+        }
+    },
+    'app-pie-chart': {
+        root: {
+            width: '100%'
+        }
+    },
+    'app-stack-chart': {
+        root: {
+            width: '100%'
+        }
+    },
+    'app-progress-bar': {
+        root: {
+            width: '100%'
+        }
+    },
+
+
+};
+export const applyAutoLayoutPatch = (theme) => {
+    const overrideTheme = BASE_THEME.$new('auto-layout-patch', AUTO_LAYOUT_OVERRIDES);
+    let target = theme;
+    while (target.parent.name !== 'default' && target.parent.name !== 'auto-layout-patch') {
+        target = target.parent;
+    }
+
+    target.parent = overrideTheme;
+};

package/src/templates/project/esbuild/esbuild.script.js

@@ -55,6 +55,28 @@ class EsBuilder {
     });
   }
 
+  patchTouchableRipple(){
+    const path = `${__dirname}/../node_modules/react-native-paper/lib/module/core/PaperProvider.js`;
+    const updateProps = (content) => {
+        if (content.includes("const getTheme = () => {")) {
+            content = content.replace(`const getTheme = () => {`, `const themeValue = React.useMemo(() => {`);
+            content = content.replace(/\};\n.*const.*\{/g,`}, [props.theme, colorScheme, reduceMotionEnabled]);\n  const {`);
+            content = content.replace(/\} = props;/,`\} = props;
+                const settingsValue = React.useMemo(() => ({
+                    icon: MaterialCommunityIcon,
+                    rippleEffectEnabled: true,
+                    ...settings
+                }), [settings]);`);
+            content = content.replace(/value:\s*\{[\s\S]*?\}/g, `value: settingsValue`);
+            content = content.replace(/theme:\s*getTheme\(\)/g, `theme: themeValue`);
+        }
+        return content;
+    }
+    console.log('Applied TouchableRipple patch.');
+    return readAndReplaceFileContent(path, updateProps);
+}
+
+
   async patchCamera() {
     return readAndReplaceFileContent(`${__dirname}/../node_modules/expo-camera/build/useWebQRScanner.js`, (c) => {
       if (c.indexOf('@koale/useworker') > 0) {
@@ -361,6 +383,7 @@ class EsBuilder {
         .then(() => this.patchReactNativeAssets())
         // .then(() => this.patchBabelExpoPreset())
         // .then(() => this.patchReactNavigation())
+        .then(() => this.patchTouchableRipple())
         .then(() => this.patchReactNativeReanimated())
         .then(() => this.patchExpoVideo())
         .then(() => {

package/src/templates/project/package.json

@@ -11,9 +11,9 @@
         "postinstall": "node ./scripts/post-build.js"
     },
     "dependencies": {
-        "@wavemaker/app-rn-runtime": "11.14.3-rc.6401",
-        "@wavemaker/variables": "11.14.3-rc.6401",
-        "@wavemaker/rn-codegen": "11.14.3-rc.6401",
+        "@wavemaker/app-rn-runtime": "11.15.0-2.247",
+        "@wavemaker/variables": "11.15.0-2.247",
+        "@wavemaker/rn-codegen": "11.15.0-2.247",
         "@wavemaker/wavepulse-agent": "1.0.11",
         "expo": "54.0.12",
         "expo-build-properties": "1.0.9",

package/src/templates/project/scripts/post-build.js

@@ -13,8 +13,29 @@ async function readAndReplaceFileContent(path, writeFn) {
     });
 }
 
+async function patchTouchableRipple(){
+    const path = `${__dirname}/../node_modules/react-native-paper/src/core/PaperProvider.tsx`;
+    const updateProps = (content) => {
+        if (content.includes("const getTheme = () => {")) {
+            content = content.replace(`const getTheme = () => {`, `const themeValue = React.useMemo(() => {`);
+            content = content.replace(/\};\n\n.*const.* props;/g,`}, [props.theme, colorScheme, reduceMotionEnabled]);\n  const { children, settings } = props;`);
+            content = content.replace(`const { children, settings } = props;`,`const { children, settings } = props;\n
+                const settingsValue = React.useMemo(() => ({
+                    icon: MaterialCommunityIcon,
+                    rippleEffectEnabled: true,
+                    ...settings
+                }), [settings]);\n`);
+            content = content.replace(/value=\s*\{\{[\s\S]*\}\}/g, `value={settingsValue}`);
+            content = content.replace(`theme={getTheme()}`, `theme={themeValue}`);
+        }
+        return content;
+    }
+    await readAndReplaceFileContent(path, updateProps);
+    console.log('Patched TouchableRipple')
+}
+
 function patch() {
-    return null;
+    patchTouchableRipple()
 }
 
 patch();

package/src/templates/project/wavepulse/rn2css.json

@@ -92,6 +92,7 @@
     "app-search.focusedText": ".app-search-focused-text",
     "app-search.dropDownContent": ".app-search-dropdown-content",
     "app-search.searchInputWrapper": ".app-search-text-wrapper",
+    "app-search.clearButton": ".app-search-clear-btn",
     "app-search.clearButton.root": ".app-search-clear-btn",
     "app-search.searchButton": ".app-search-btn",
     "app-search.clearButton.icon.icon": ".app-search-clear-icon",
@@ -499,12 +500,10 @@
     "app-textarea.helpText": ".app-textarea-help-text",
     "app-textarea.skeleton": ".app-textarea-skeleton",
     "app-toggle.root": ".app-toggle",
-    "app-toggle-on.root": ".app-toggle-on",
-    "app-toggle-off.root": ".app-toggle-off",
+    "app-toggle-on": ".app-toggle-handle-on",
+    "app-toggle-off": ".app-toggle-handle-off",
     "app-toggle.text": ".app-toggle-text",
     "app-toggle.handle": ".app-toggle-handle",
-    "app-toggle-on.handle": ".app-toggle-handle-on",
-    "app-toggle-off.handle": ".app-toggle-handle-off",
     "app-appnavbar.root": ".app-appnavbar",
     "app-appnavbar.action": ".app-appnavbar-action",
     "app-appnavbar.leftSection": ".app-appnavbar-left-section",

package/src/templates/variables.template

@@ -95,6 +95,11 @@ export default ({{scope}}) => {
                 baseURL: {{../../scope}}.appConfig.url,
                 securityService: () => {{../../scope}}.appConfig.SecurityService,
                 useDefaultSuccessHandler: {{useDefaultSuccessHandler}},
+                {{#if onBeforeUpdate}}
+                onBeforeUpdate: (variable, inputData, options) => {
+                    return {{{onBeforeUpdate}}}
+                },
+                {{/if}}
                 {{/ifEquals}}
                 {{#ifEquals classname 'LogoutAction' this}}
                 baseURL: {{../../scope}}.appConfig.url,

package/src/theme/components/basic/picture.styledef.js

@@ -5,49 +5,18 @@ exports.default = {
             className: '.app-picture',
             rnStyleSelector: 'app-picture.root',
             studioStyleSelector: '.app-picture',
-            style: {},
-            dtStyle: {
-                'overflow': 'var(--wm-picture-root-overflow)',
-                'width': 'var(--wm-picture-root-width)',
-                'rippleColor': 'var(--wm-picture-root-rippleColor)'
-            }
+            style: {}
         }, {
             className: '.app-picture-skeleton',
             rnStyleSelector: 'app-picture.skeleton',
             studioStyleSelector: '.app-picture-skeleton',
-            style: {},
-            dtStyle: {
-                'width': 'var(--wm-picture-skeleton-width)',
-                'height': 'var(--wm-picture-skeleton-height)'
-            }
-        }, {
-            className: '.app-picture.picture',
-            dtStyle: {
-                'width': 'var(--wm-picture-width)',
-                'height': 'var(--wm-picture-height)'
-            }
+            style: {}
         }, {
             className: '.thumbnail-image.app-picture',
-            studioStyleSelector: '.img-thumbnail.app-picture',
+            studioStyleSelector: '.thumbnail-image.app-picture',
             style: {
                 'background-color': '@pictureThumbBgColor',
                 'border-color': '@pictureThumbBorderColor'
-            }, dtStyle: {
-                'border-radius': 'var(--wm-picture-border-radius)',
-                'background-color': 'var(--wm-color-white)',
-                'border-color': 'var(--wm-picture-thumbnail-border-color)',
-                'border-style': 'var(--wm-picture-thumbnail-border-style)',
-                'border-width': 'var(--wm-picture-thumbnail-border-width)',
-                'padding-top': 'var(--wm-space-2)',
-                'padding-bottom': 'var(--wm-space-2)',
-                'padding-left': 'var(--wm-space-2)',
-                'padding-right': 'var(--wm-space-2)'
-            }
-        }, {
-            className: '.rounded-image.app-picture',
-            dtStyle: {
-                'border-radius': 'var(--wm-picture-border-radius)'
-                // 'border-width':'var(--wm-picture-thumbnail-border-width)',
             }
         }])
 };

package/src/theme/components/basic/picture.styledef.js.map

@@ -1 +1 @@
-{"version":3,"file":"picture.styledef.js","sourceRoot":"","sources":["../../../../../src/theme/components/basic/picture.styledef.ts"],"names":[],"mappings":";;AAEA,kBAAe;IACX,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;YAClB,SAAS,EAAE,cAAc;YACzB,eAAe,EAAE,kBAAkB;YACnC,mBAAmB,EAAE,cAAc;YACnC,KAAK,EAAE,EAAE;YACT,OAAO,EAAC;gBACJ,UAAU,EAAC,iCAAiC;gBAC5C,OAAO,EAAC,8BAA8B;gBACtC,aAAa,EAAC,oCAAoC;aACrD;SACJ,EAAE;YACC,SAAS,EAAE,uBAAuB;YAClC,eAAe,EAAE,sBAAsB;YACvC,mBAAmB,EAAE,uBAAuB;YAC5C,KAAK,EAAE,EAAE;YACT,OAAO,EAAC;gBACJ,OAAO,EAAC,kCAAkC;gBAC1C,QAAQ,EAAC,mCAAmC;aAC/C;SACJ,EAAE;YACC,SAAS,EAAC,sBAAsB;YAChC,OAAO,EAAC;gBACJ,OAAO,EAAC,yBAAyB;gBACjC,QAAQ,EAAC,0BAA0B;aACtC;SACJ,EAAE;YACC,SAAS,EAAE,8BAA8B;YACzC,mBAAmB,EAAE,4BAA4B;YACjD,KAAK,EAAE;gBACH,kBAAkB,EAAE,sBAAsB;gBAC1C,cAAc,EAAE,0BAA0B;aAC7C,EAAC,OAAO,EAAC;gBACN,eAAe,EAAC,iCAAiC;gBACjD,kBAAkB,EAAC,uBAAuB;gBAC1C,cAAc,EAAC,0CAA0C;gBACzD,cAAc,EAAC,0CAA0C;gBACzD,cAAc,EAAC,0CAA0C;gBACzD,aAAa,EAAC,mBAAmB;gBACjC,gBAAgB,EAAC,mBAAmB;gBACpC,cAAc,EAAC,mBAAmB;gBAClC,eAAe,EAAC,mBAAmB;aACtC;SACJ,EAAE;YACC,SAAS,EAAC,4BAA4B;YACtC,OAAO,EAAC;gBACJ,eAAe,EAAC,iCAAiC;gBACjD,6DAA6D;aAChE;SACJ,CAAC,CAAC;CACY,CAAC"}
+{"version":3,"file":"picture.styledef.js","sourceRoot":"","sources":["../../../../../src/theme/components/basic/picture.styledef.ts"],"names":[],"mappings":";;AAEA,kBAAe;IACX,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;YAClB,SAAS,EAAE,cAAc;YACzB,eAAe,EAAE,kBAAkB;YACnC,mBAAmB,EAAE,cAAc;YACnC,KAAK,EAAE,EAAE;SACZ,EAAE;YACC,SAAS,EAAE,uBAAuB;YAClC,eAAe,EAAE,sBAAsB;YACvC,mBAAmB,EAAE,uBAAuB;YAC5C,KAAK,EAAE,EAAE;SACZ,EAAE;YACC,SAAS,EAAE,8BAA8B;YACzC,mBAAmB,EAAE,8BAA8B;YACnD,KAAK,EAAE;gBACH,kBAAkB,EAAE,sBAAsB;gBAC1C,cAAc,EAAE,0BAA0B;aAC7C;SACJ,CAAC,CAAC;CACY,CAAC"}

package/src/theme/components/container/accordion.styledef.js

@@ -99,6 +99,11 @@ exports.default = {
             rnStyleSelector: 'app-accordion.skeleton',
             studioStyleSelector: '.app-accordion-skeleton',
             style: {}
+        }, {
+            className: '.app-accordion-title-wrapper',
+            rnStyleSelector: 'app-accordion.titleWrapper',
+            studioStyleSelector: '.app-accordion-title-wrapper',
+            style: {}
         }, {
             className: '.app-accordion-title-icon',
             rnStyleSelector: 'app-accordion.titleIcon',