@omnia/velcron 8.0.457-dev → 8.0.458-dev

package/index.d.ts

@@ -1,7 +1,6 @@
 export * from "./models";
 export * from "./parser";
 export * from "./actions";
-export * from "./stores";
 export * from "@omnia/velcron/internal-do-not-import-from-here/shared/models";
 export * from "./rules";
 export * from "./templatebuilder";

package/index.js

@@ -4,7 +4,7 @@ const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./models"), exports);
 tslib_1.__exportStar(require("./parser"), exports);
 tslib_1.__exportStar(require("./actions"), exports);
-tslib_1.__exportStar(require("./stores"), exports);
+//export * from "./stores";
 tslib_1.__exportStar(require("@omnia/velcron/internal-do-not-import-from-here/shared/models"), exports);
 tslib_1.__exportStar(require("./rules"), exports);
 tslib_1.__exportStar(require("./templatebuilder"), exports);

package/internal-do-not-import-from-here/shared/models/theme/Blueprints.d.ts

@@ -3,6 +3,7 @@ import { SpacingDefinition, Spacing, SpacingValue } from "./Spacing";
 import { TypographyFontDefinition, TextStyleValue } from "./Typography";
 import { ThemeBase } from "./ThemeBase";
 import { VelcronRendererResolverReference } from "../velcron";
+import { TextAlignment } from "@omnia/fx-models";
 export interface BlueprintStrategy {
     buttons: {
         primary: ButtonBlueprint;
@@ -30,12 +31,24 @@ export interface VariantBlueprints<T> extends Blueprints {
     variant7?: T;
     variant8?: T;
 }
+export interface HeaderIconSettings {
+    blueprint?: IconBlueprint;
+    background?: BackgroundDefinition;
+    spacing?: Spacing;
+}
 export interface HeaderBlueprint extends Blueprint {
+    /**velcron */
     renderer?: VelcronRendererResolverReference;
     state?: any;
+    /**Settings */
+    background?: BackgroundDefinition;
+    textAlign?: TextAlignment;
+    padding?: SpacingValue;
+    text?: TextBlueprint;
+    iconSettings?: HeaderIconSettings;
 }
 export interface HeaderBlueprints extends Blueprints, VariantBlueprints<HeaderBlueprint>, BlueprintsReference {
-    primary?: TabsBlueprint;
+    primary?: HeaderBlueprint;
 }
 export interface TextFillBlueprints extends VariantBlueprints<TextFillBlueprint>, Blueprints, BlueprintsReference {
 }
@@ -156,7 +169,7 @@ export interface TabsBlueprint extends Blueprint {
     text?: TextBlueprint;
     icon?: IconBlueprint;
     active?: {
-        viewTemplate?: VelcronRendererResolverReference;
+        renderer?: VelcronRendererResolverReference;
         padding?: Spacing;
         iconPadding?: SpacingValue;
         background?: BackgroundDefinition;
@@ -165,7 +178,7 @@ export interface TabsBlueprint extends Blueprint {
     };
     inactive?: {
         background?: BackgroundDefinition;
-        viewTemplate?: VelcronRendererResolverReference;
+        renderer?: VelcronRendererResolverReference;
     };
 }
 export interface TextBlueprint extends Blueprint {

package/models/VelcronDefinitions.d.ts

@@ -1,11 +1,11 @@
 import { VelcronOnUpdatedEvent, VelcronOnClosedEvent, VelcronOnCloseRequestedEvent, VelcronOnPressEvent, VelcronSpacing, VelcronStyling, VelcronCustomComponentDefinition, VelcronAppDefinition, VelcronRendererResolverReference, EventHook, Future, TextBlueprint, VelcronBindableProp, VelcronEditor, ContainerFillBlueprint, BackgroundDefinition, BlueprintVariant, IconBlueprint, ButtonBlueprint, VelcronOnPressOutsideEvent, VelcronOnPointerEnterEvent, VelcronOnPointerLeaveEvent, VelcronColorStyling, VelcronOverflowValues, VelcronImageRatios } from "@omnia/velcron/internal-do-not-import-from-here/shared/models";
 import { VelcronComponentArrayType, VelcronPrimitiveType } from "./VelcronTypes";
 import { AssignOperators, VelcronHorizontalAlignments, VelcronIconTypes, VelcronActionTypes, VelcronVerticalAlignments } from "./Enums";
-import { DynamicState, VelcronDefinition, VelcronEffects, useVelcronThemingStore } from "..";
+import { DynamicState, VelcronDefinition, VelcronEffects } from "..";
 import { guid, PropertyConfiguration, PropertyValue, PropertyDefinition, PropertySetupBase } from "@omnia/velcron/internal-do-not-import-from-here/shared/models";
-import { useVelcronColorSchemaStore } from "../stores/VelcronColorSchema";
 import { Properties } from "csstype";
 import type { AnimationOptionsWithOverrides, InViewOptions, VariantDefinition, Variants } from "motion";
+import { useColorSchemaStore, useThemeStore } from "internal/fx/ux/mobile";
 export interface ResolvedComponentRenderer {
     component: unknown;
     definition: VelcronDefinition;
@@ -83,8 +83,8 @@ export interface VelcronRenderContext {
     id?: string;
     rootContext: DynamicState;
     currentContext: DynamicState;
-    theming?: ReturnType<typeof useVelcronThemingStore>;
-    colors?: ReturnType<typeof useVelcronColorSchemaStore>;
+    theming?: ReturnType<typeof useThemeStore>;
+    colors?: ReturnType<typeof useColorSchemaStore>;
     actions?: {
         [name: string]: Array<string>;
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@omnia/velcron",
   "license": "MIT",
-  "version": "8.0.457-dev",
+  "version": "8.0.458-dev",
   "description": "Provide Omnia Velcron Stuffs.",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/parser/VelcronRenderers.js

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VelcronRenderers = void 0;
 const __1 = require("..");
+//import { ColorSchemaType, InternalColorSchemaStoreType, ServiceContainerContext, useColorSchemaStore, useInject, useThemeStore } from "internal/fx/ux/mobile";
+// import { InternalColorSchemaStoreType, useColorSchemaStore, useThemeStore } from "internal/fx/ux/aurora/shared-mobile";
+const stores_1 = require("internal/fx/shared/aurora/stores");
 class VelcronRenderers {
     static { this.components = {}; }
     static { this.referenceResolvers = {}; }
@@ -82,13 +85,13 @@ class VelcronRenderers {
     static createNewRendererContext(currentRenderCtx, definition, newViewModel) {
         const result = {
             rootContext: currentRenderCtx.rootContext,
-            theming: currentRenderCtx.theming,
             currentContext: newViewModel ? newViewModel : currentRenderCtx.currentContext,
             actions: currentRenderCtx.actions,
             components: currentRenderCtx.components,
             hooks: currentRenderCtx.hooks,
             computed: currentRenderCtx.computed,
             colors: currentRenderCtx.colors,
+            theming: currentRenderCtx.theming,
             $editmode: currentRenderCtx.$editmode,
             $display: currentRenderCtx.$display,
             $active: currentRenderCtx.$active,
@@ -100,10 +103,19 @@ class VelcronRenderers {
         };
         if (VelcronRenderers.definitionContainsCustomColorSchema(definition)) {
             const colorSchemaType = __1.VelcronDataBinder.bind(currentRenderCtx, definition.colorSchemaType);
-            if (colorSchemaType && colorSchemaType !== "" && result.colors.state.colorSchemaType !== colorSchemaType) {
-                const colorSchemaStore = (0, __1.useVelcronColorSchemaStore)(definition.key.toString());
-                colorSchemaStore.actions.setThemeStore(currentRenderCtx.theming, colorSchemaType);
-                result.colors = colorSchemaStore;
+            if (colorSchemaType && result.colors.state.colorSchemaType !== colorSchemaType) {
+                const themeStore = (0, stores_1.useThemeStore)();
+                //     const { value, setValue } = themeStore.get.getOrSetColorSchema(colorSchemaType);
+                //     let colorSchemaStoreRef: InternalColorSchemaStoreType;
+                //     if (value) {
+                //         colorSchemaStoreRef = value as InternalColorSchemaStoreType;
+                //     } else {
+                //         colorSchemaStoreRef = useInject(ServiceContainerContext).createInstance(useColorSchemaStore, null, true);
+                //         (colorSchemaStoreRef as InternalColorSchemaStoreType).actions.disableAutoDispose();
+                //         colorSchemaStoreRef.actions.setColorSchema(colorSchemaType);
+                //         setValue(colorSchemaStoreRef);
+                //     }
+                //     result.colors = colorSchemaStoreRef;
             }
         }
         return result;

package/stores/VelcronColorSchema.d.ts

@@ -1,25 +0,0 @@
-import { ColorDefinition, ColorSchema, ColorSchemaType, ColorSchemaTypes, guid } from "@omnia/velcron/internal-do-not-import-from-here/shared/models";
-import { useVelcronThemingStore } from ".";
-export declare const useVelcronColorSchemaStore: (newStateWithName?: string) => {
-    state: {
-        base: ColorDefinition;
-        onBase: ColorDefinition;
-        container: ColorDefinition;
-        onContainer: ColorDefinition;
-        isContainer: boolean;
-        name: string;
-        colorSchemaType: ColorSchemaTypes | ColorSchemaType;
-        id: guid;
-    };
-    get: {
-        readonly colorSchema: ColorSchema;
-        readonly base: ColorDefinition;
-        readonly onBase: ColorDefinition;
-        readonly container: ColorDefinition;
-        readonly onContainer: ColorDefinition;
-    };
-    actions: {
-        setThemeStore: (themeStoreInstance: ReturnType<typeof useVelcronThemingStore>, colorSchemaType?: ColorSchemaTypes | ColorSchemaType, container?: boolean) => void;
-        setColorSchema: (colorSchemaType: ColorSchemaType, container?: boolean) => void;
-    };
-};

package/stores/VelcronColorSchema.js

@@ -1,83 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useVelcronColorSchemaStore = void 0;
-const models_1 = require("@omnia/velcron/internal-do-not-import-from-here/shared/models");
-const _1 = require(".");
-exports.useVelcronColorSchemaStore = (0, _1.defineVelcronStore)("ColorSchemaStore", {
-    setup() {
-        return {
-            state: {
-                base: {},
-                onBase: {},
-                container: {},
-                onContainer: {},
-                isContainer: false,
-                name: (0, models_1.valueOf)(""),
-                colorSchemaType: models_1.ColorSchemaTypes.background,
-                id: (0, models_1.guid)(),
-            },
-            //The private state is not reactive that means it will not trigger re-rendering of the component
-            privateState: {
-                themeStore: (0, models_1.valueOf)(null)
-            }
-        };
-    },
-    getters(state) {
-        function colorSchema() {
-            return {
-                base: state.base,
-                onBase: state.onBase,
-                name: state.name,
-            };
-        }
-        function base() {
-            return state.base;
-        }
-        function onBase() {
-            return state.onBase;
-        }
-        function container() {
-            return state.container;
-        }
-        function onContainer() {
-            return state.onContainer;
-        }
-        return {
-            get colorSchema() {
-                return colorSchema();
-            },
-            get base() {
-                return base();
-            },
-            get onBase() {
-                return onBase();
-            },
-            get container() {
-                return container();
-            },
-            get onContainer() {
-                return onContainer();
-            }
-        };
-    },
-    actions(state, privateState) {
-        function setThemeStore(themeStoreInstance, colorSchemaType, container) {
-            privateState.themeStore = themeStoreInstance;
-            setColorSchema(colorSchemaType ? colorSchemaType : state.colorSchemaType, container);
-        }
-        function setColorSchema(colorSchemaType, container) {
-            const colorSchema = privateState.themeStore.get.colorSchema(colorSchemaType);
-            state.colorSchemaType = colorSchemaType;
-            state.name = colorSchema.name;
-            state.isContainer = container ? true : false;
-            state.base = container ? colorSchema["container"] : colorSchema["base"];
-            state.onBase = container ? colorSchema["onContainer"] : colorSchema["onBase"];
-            state.container = container ? colorSchema["base"] : colorSchema["container"];
-            state.onContainer = container ? colorSchema["onBase"] : colorSchema["onContainer"];
-        }
-        return {
-            setThemeStore,
-            setColorSchema
-        };
-    }
-});

package/stores/VelcronStore.d.ts

@@ -1,12 +0,0 @@
-export declare function defineVelcronStore<TSetup extends {
-    state: object;
-    privateState?: object;
-}, TGetters, TActions>(name: string, definition: {
-    setup: () => TSetup;
-    getters?: (state: TSetup["state"], privateState?: TSetup["privateState"]) => TGetters;
-    actions?: (state: TSetup["state"], privateState?: TSetup["privateState"]) => TActions;
-}): (newStateWithName?: string) => {
-    state: TSetup["state"];
-    get: TGetters;
-    actions: TActions;
-};

package/stores/VelcronStore.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defineVelcronStore = defineVelcronStore;
-const providers_1 = require("../providers");
-const stateMap = new Map();
-function defineVelcronStore(name, definition) {
-    function result(newStateWithName) {
-        if (newStateWithName && newStateWithName !== "" && newStateWithName !== name) {
-            name = newStateWithName;
-        }
-        if (!stateMap.has(name)) {
-            //NOTE: At the moment the privateState is not reactive this is because we dont have a way to declare non reactive stuff
-            //we needed it in useVelcronColorSchemaStore. If we need privateState to be reactive and support non reactive stuff
-            // we need to rewrite defineVelcronStore to the new defineStore pattern that supports setup in a better way
-            const setup = definition.setup();
-            const reactive = providers_1.ReactivityProvider.makeReactive(setup.state);
-            setup.state = reactive;
-            stateMap.set(name, setup);
-        }
-        const reactiveState = stateMap.get(name);
-        return {
-            state: reactiveState.state,
-            get: definition.getters?.(reactiveState.state, reactiveState.privateState),
-            actions: definition.actions?.(reactiveState.state, reactiveState.privateState)
-        };
-    }
-    return result;
-}

package/stores/VelcronTheming.d.ts

@@ -1,19 +0,0 @@
-import { ColorSchemaType, ColorSchemaTypes, ColorType, ColorTypes, ContainerFillBlueprint, BlueprintVariant, ResolvedThemeDefinition, TextStyleSize, TextStyleSizes, TextStyleType, TextStyleTypes } from "..";
-export declare const useVelcronThemingStore: (newStateWithName?: string) => {
-    state: {
-        currentTheme: ResolvedThemeDefinition;
-    };
-    get: {
-        componentBlueprints: () => void;
-        containerBlueprint: (type: BlueprintVariant | ContainerFillBlueprint | string) => any;
-        colorSchema: (colorSchemaType: ColorSchemaTypes | ColorSchemaType) => import("..").ColorSchema;
-        spacing: () => import("..").SpacingBlueprint;
-        typography: (typographyType: TextStyleTypes | TextStyleType, size: TextStyleSizes | TextStyleSize) => any;
-        color: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: ColorTypes | ColorType) => string;
-        colorDefinition: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: ColorTypes | ColorType) => import("..").ColorDefinition;
-        currentTheme: () => ResolvedThemeDefinition;
-    };
-    actions: {
-        setTheme(newTheme: ResolvedThemeDefinition): void;
-    };
-};

package/stores/VelcronTheming.js

@@ -1,64 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useVelcronThemingStore = void 0;
-const __1 = require("..");
-const VelcronStore_1 = require("./VelcronStore");
-exports.useVelcronThemingStore = (0, VelcronStore_1.defineVelcronStore)("VelcronTheming", {
-    setup() {
-        return {
-            state: {
-                currentTheme: {},
-            }
-        };
-    },
-    getters(state) {
-        return {
-            componentBlueprints: () => {
-                state.currentTheme.components;
-            },
-            containerBlueprint: (type) => {
-                return (0, __1.useThemeMethods)(() => state.currentTheme).containerBlueprint(type);
-            },
-            colorSchema: (colorSchemaType) => {
-                return (0, __1.useThemeMethods)(() => state.currentTheme).colorSchema(colorSchemaType);
-            },
-            spacing: () => {
-                return state.currentTheme.spacing;
-            },
-            typography: (typographyType, size) => {
-                const typography = state.currentTheme.typography;
-                if (typographyType === __1.TextStyleTypes.text) {
-                    return typography.text[size];
-                }
-                else if (typographyType === __1.TextStyleTypes.title) {
-                    return typography.title[size];
-                }
-                else if (typographyType === __1.TextStyleTypes.display) {
-                    return typography.display[size];
-                }
-                else if (typographyType === __1.TextStyleTypes.headline) {
-                    return typography.headline[size];
-                }
-                else if (typographyType === __1.TextStyleTypes.label) {
-                    return typography.label[size];
-                }
-            },
-            color: (colorSchemaType, colorType) => {
-                return (0, __1.useThemeMethods)(() => state.currentTheme).color(colorSchemaType, colorType);
-            },
-            colorDefinition: (colorSchemaType, colorType) => {
-                return (0, __1.useThemeMethods)(() => state.currentTheme).colorDefinition(colorSchemaType, colorType);
-            },
-            currentTheme: () => {
-                return this.currentTheme.state;
-            }
-        };
-    },
-    actions(state) {
-        return {
-            setTheme(newTheme) {
-                state.currentTheme = newTheme;
-            }
-        };
-    }
-});

package/stores/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./VelcronStore";
-export * from "./VelcronTheming";
-export * from "./VelcronColorSchema";

package/stores/index.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./VelcronStore"), exports);
-tslib_1.__exportStar(require("./VelcronTheming"), exports);
-tslib_1.__exportStar(require("./VelcronColorSchema"), exports);
-//export * from "./VelcronBlueprint";