@omnia/fx 8.0.24-vnext → 8.0.26-vnext

package/internal-do-not-import-from-here/ux/velcron/core/models/VelcronDefinitions.d.ts

@@ -1,8 +1,9 @@
-import { VelcronComponentDescriptor } from "./VelcronDescriptors";
+import { VelcronComponentDescriptor } from "../../editor/models/VelcronDescriptors";
 import { VelcronEvent, VelcronOnChangedEvent, VelcronOnClosedEvent, VelcronOnCloseRequestedEvent, VelcronOnLoadEvent, VelcronOnPressEvent } from "./VelcronEvents";
 import { VelcroncomponentArrayType, VelcronPrimitiveType } from "./VelcronTypes";
-import { AssignOperators, VelcronHorizontalAlignments, VelcronIconTypes, VelcronActionTypes, VerticalAlignments } from "./Enums";
-import { ColorSchema, ColorSchemaType, ColorSchemaTypes, useVelcronThemingStore } from "..";
+import { AssignOperators, VelcronHorizontalAlignments, VelcronIconTypes, VelcronActionTypes, VelcronVerticalAlignments } from "./Enums";
+import { useVelcronThemingStore } from "..";
+import { useVelcronColorSchemaStore } from "../stores/VelcronColorSchema";
 export interface ResolvedComponentRenderer {
     component: unknown;
     definition: VelcronDefinition;
@@ -19,9 +20,9 @@ export interface BuiltInComponentRenderers {
     "WebView": unknown;
     "CustomComponent": unknown;
     "Dialog": unknown;
-    "FlexView": unknown;
     "Icon": unknown;
     "Chip": unknown;
+    "Markdown": unknown;
 }
 export interface ColorSchemaReference {
     name: string;
@@ -41,8 +42,7 @@ export interface VelcronRenderContext {
     rootContext: VelcronState;
     currentContext: VelcronState;
     theming?: ReturnType<typeof useVelcronThemingStore>;
-    colorSchemaType?: ColorSchemaTypes | ColorSchemaType;
-    colorSchema?: ColorSchema;
+    colors?: ReturnType<typeof useVelcronColorSchemaStore>;
     actions?: {
         [name: string]: [];
     };
@@ -67,6 +67,7 @@ export interface VelcronRenderContextHooks {
     dialogVisibilityChanged?: ((visible: boolean) => void);
     onItemSelected?: ((item: VelcronDefinition) => void);
     onItemRendered?: ((item: VelcronDefinition) => OnItemRenderedHookResult);
+    onItemCreatedProps?: ((item: VelcronDefinition) => object);
 }
 export interface VelcronContainerRenderer {
     definition: VelcronDefinition;
@@ -108,11 +109,6 @@ export interface VelcronDefinitionBase {
      */
     key?: string;
 }
-export interface VelcronCustomThemeSettings {
-    colorSchema?: string;
-    color?: string;
-    opacity?: number;
-}
 export interface VelcronDefinition extends VelcronDefinitionBase {
     body?: Array<VelcronDefinition>;
     style?: VelcronStyling;
@@ -120,6 +116,13 @@ export interface VelcronDefinition extends VelcronDefinitionBase {
     if?: string;
     events?: VelcronEvent;
 }
+export interface VelcronColorStyling {
+    colorSchemaType?: string;
+    color?: string;
+    filled?: boolean;
+    container?: boolean;
+    toned?: boolean;
+}
 export interface VelcronStyling {
     margin?: number;
     marginTop?: number;
@@ -149,6 +152,8 @@ export interface VelcronIcon {
 }
 export interface VelcronAppDefinition extends VelcronDefinitionBase {
     type: "Velcron";
+    version: string;
+    name: string;
     body?: Array<VelcronDefinition>;
     events?: VelcronOnLoadEvent & VelcronOnPressEvent;
     actions?: {
@@ -167,11 +172,20 @@ export interface VelcronComponentDefinition extends VelcronDefinition {
 /*** Built-in Components *********************************************************************/
 export interface VelcronViewDefinition extends VelcronDefinition {
     type: "View";
-    style?: VelcronStyling;
+    color?: VelcronColorStyling;
     events?: VelcronOnPressEvent;
+    column?: boolean;
+    columnStyle?: object;
+    horizontalAlignment?: VelcronHorizontalAlignments;
+    verticalAlignment?: VelcronVerticalAlignments;
+    grow?: number;
+    border?: VelcronBorder;
+    borderRadius?: VelcronDimensions;
+    width?: string;
 }
-export interface VelcronCardDefinition extends VelcronDefinition, VelcronCustomThemeSettings {
+export interface VelcronCardDefinition extends VelcronDefinition {
     type: "Card";
+    color?: VelcronColorStyling;
     style?: VelcronCardStyling;
     footer?: Array<VelcronDefinition>;
     events?: VelcronOnPressEvent;
@@ -180,8 +194,8 @@ export interface VelcronTextDefinition extends VelcronDefinition {
     type: "Text";
     text: string;
     color?: string;
-    lineClamp: number;
-    noWrap: boolean;
+    lineClamp?: number;
+    noWrap?: boolean;
     typography?: string;
     events?: VelcronOnPressEvent;
 }
@@ -199,7 +213,6 @@ export interface VelcronImageDefinition extends VelcronDefinition {
 export interface VelcronButtonDefinition extends VelcronDefinition {
     type: "Button";
     text: string;
-    color: string;
     icon?: VelcronIcon;
     disabled?: boolean;
     events?: VelcronOnPressEvent;
@@ -225,24 +238,20 @@ export interface VelcronDialogDefinition extends VelcronDefinition {
     visible: string;
     events?: VelcronOnCloseRequestedEvent & VelcronOnClosedEvent;
 }
-export interface VelcronIconDefinition extends VelcronDefinition, VelcronCustomThemeSettings {
+export interface VelcronIconDefinition extends VelcronDefinition {
     type: "Icon";
     icon: string;
-    background?: boolean;
+    color: VelcronColorStyling;
     size?: number;
     events?: VelcronOnPressEvent;
 }
-export interface VelcronFlexViewDefinition extends VelcronDefinition, VelcronCustomThemeSettings {
-    type: "FlexView";
-    column?: boolean;
-    body: Array<VelcronDefinition>;
-    columnStyle?: object;
-    horizontalAlignment?: VelcronHorizontalAlignments;
-    verticalAlignment?: VerticalAlignments;
-    grow?: number;
-    border?: VelcronBorder;
-    borderRadius?: VelcronDimensions;
-    width: string;
+export interface VelcronMarkdownDefinition extends VelcronDefinition {
+    type: "Markdown";
+    text: string;
+    initialValue: string;
+    bind: string;
+    edit?: boolean | string;
+    events: VelcronOnChangedEvent;
 }
 export interface VelcronDimensions {
     top: number;
@@ -253,7 +262,7 @@ export interface VelcronDimensions {
 export interface VelcronBorder extends VelcronDimensions {
     color: string;
 }
-export interface VelcronChipDefinition extends VelcronDefinition, VelcronCustomThemeSettings {
+export interface VelcronChipDefinition extends VelcronDefinition {
     type: "Chip";
     text: string;
     icon?: VelcronIcon;

package/internal-do-not-import-from-here/ux/velcron/core/models/index.d.ts

@@ -1,6 +1,5 @@
 export * from "./VelcronDefinitions";
 export * from "./ViewModelAndContext";
-export * from "./VelcronDescriptors";
 export * from "./VelcronEvents";
 export * from "./VelcronTypes";
 export * from "./Enums";

package/internal-do-not-import-from-here/ux/velcron/core/parser/VelcronConstants.d.ts

@@ -7,12 +7,12 @@ export declare const VelcronConstants: {
         image: string;
         button: string;
         textInput: string;
-        progressCircle: string;
+        progress: string;
         webView: string;
         dialog: string;
-        flexView: string;
         icon: string;
         chip: string;
+        markdown: string;
     };
     events: {
         idTokenStart: string;

package/internal-do-not-import-from-here/ux/velcron/core/parser/VelcronRenderers.d.ts

@@ -1,5 +1,5 @@
 import { BuiltInComponentRenderers, VelcronState, ResolvedComponentRenderer, VelcronCustomComponentDefinition, VelcronDefinition, VelcronRenderContext } from "../models";
-import { ColorSchemaType } from "..";
+import { ColorSchemaTypes } from "..";
 export declare class VelcronRenderers {
     private static components;
     static registerComponent(type: string, component: any): void;
@@ -15,13 +15,13 @@ export declare class VelcronRenderers {
                 currentTheme: import("..").ThemeDefinitionV2;
             };
             get: {
-                colorSchema: (colorSchemaType: ColorSchemaType | import("..").ColorSchemaTypes) => import("..").ColorSchema;
+                colorSchema: (colorSchemaType: ColorSchemaTypes | import("..").ColorSchemaType) => import("..").ColorSchema;
                 typography: (typographyType: import("..").TypographyType | import("..").TypographyTypes) => import("..").TypographyTypeDefinition;
-                color: (colorSchemaType: ColorSchemaType | import("..").ColorSchemaTypes, colorType: import("..").ColorType | import("..").ColorTypes) => string;
-                colorDefinition: (colorSchemaType: ColorSchemaType | import("..").ColorSchemaTypes, colorType: import("..").ColorType | import("..").ColorTypes) => import("..").ColorDefinition;
+                color: (colorSchemaType: ColorSchemaTypes | import("..").ColorSchemaType, colorType: import("..").ColorType | import("..").ColorTypes) => string;
+                colorDefinition: (colorSchemaType: ColorSchemaTypes | import("..").ColorSchemaType, colorType: import("..").ColorType | import("..").ColorTypes) => import("..").ColorDefinition;
                 complementaryColorType: (colorType: import("..").ColorType | import("..").ColorTypes) => import("..").ColorTypes;
-                complementaryColor: (colorSchemaType: ColorSchemaType | import("..").ColorSchemaTypes, colorType: import("..").ColorType | import("..").ColorTypes) => string;
-                complementaryColorDefinition: (colorSchemaType: ColorSchemaType | import("..").ColorSchemaTypes, colorType: import("..").ColorType | import("..").ColorTypes) => import("..").ColorDefinition;
+                complementaryColor: (colorSchemaType: ColorSchemaTypes | import("..").ColorSchemaType, colorType: import("..").ColorType | import("..").ColorTypes) => string;
+                complementaryColorDefinition: (colorSchemaType: ColorSchemaTypes | import("..").ColorSchemaType, colorType: import("..").ColorType | import("..").ColorTypes) => import("..").ColorDefinition;
                 currentTheme: () => import("..").ThemeDefinitionV2;
             };
             actions: {
@@ -37,6 +37,64 @@ export declare class VelcronRenderers {
         computed: {
             [name: string]: [];
         };
+        colors: {
+            state: {
+                base: import("..").ColorDefinition;
+                onBase: import("..").ColorDefinition;
+                container: import("..").ColorDefinition;
+                onContainer: import("..").ColorDefinition;
+                isContainer: boolean;
+                name: string;
+                colorSchemaType: ColorSchemaTypes | import("..").ColorSchemaType;
+                themeStore: {
+                    state: {
+                        currentTheme: import("..").ThemeDefinitionV2;
+                    };
+                    get: {
+                        colorSchema: (colorSchemaType: ColorSchemaTypes | import("..").ColorSchemaType) => import("..").ColorSchema;
+                        typography: (typographyType: import("..").TypographyType | import("..").TypographyTypes) => import("..").TypographyTypeDefinition;
+                        color: (colorSchemaType: ColorSchemaTypes | import("..").ColorSchemaType, colorType: import("..").ColorType | import("..").ColorTypes) => string;
+                        colorDefinition: (colorSchemaType: ColorSchemaTypes | import("..").ColorSchemaType, colorType: import("..").ColorType | import("..").ColorTypes) => import("..").ColorDefinition;
+                        complementaryColorType: (colorType: import("..").ColorType | import("..").ColorTypes) => import("..").ColorTypes;
+                        complementaryColor: (colorSchemaType: ColorSchemaTypes | import("..").ColorSchemaType, colorType: import("..").ColorType | import("..").ColorTypes) => string;
+                        complementaryColorDefinition: (colorSchemaType: ColorSchemaTypes | import("..").ColorSchemaType, colorType: import("..").ColorType | import("..").ColorTypes) => import("..").ColorDefinition;
+                        currentTheme: () => import("..").ThemeDefinitionV2;
+                    };
+                    actions: {
+                        setTheme(newTheme: import("..").ThemeDefinitionV2): void;
+                    };
+                };
+                id: import("..").GuidValue;
+            };
+            get: {
+                readonly colorSchema: import("..").ColorSchema;
+                readonly base: import("..").ColorDefinition;
+                readonly onBase: import("..").ColorDefinition;
+                readonly container: import("..").ColorDefinition;
+                readonly onContainer: import("..").ColorDefinition;
+            };
+            actions: {
+                setThemeStore: (themeStoreInstance: {
+                    state: {
+                        currentTheme: import("..").ThemeDefinitionV2;
+                    };
+                    get: {
+                        colorSchema: (colorSchemaType: ColorSchemaTypes | import("..").ColorSchemaType) => import("..").ColorSchema;
+                        typography: (typographyType: import("..").TypographyType | import("..").TypographyTypes) => import("..").TypographyTypeDefinition;
+                        color: (colorSchemaType: ColorSchemaTypes | import("..").ColorSchemaType, colorType: import("..").ColorType | import("..").ColorTypes) => string;
+                        colorDefinition: (colorSchemaType: ColorSchemaTypes | import("..").ColorSchemaType, colorType: import("..").ColorType | import("..").ColorTypes) => import("..").ColorDefinition;
+                        complementaryColorType: (colorType: import("..").ColorType | import("..").ColorTypes) => import("..").ColorTypes;
+                        complementaryColor: (colorSchemaType: ColorSchemaTypes | import("..").ColorSchemaType, colorType: import("..").ColorType | import("..").ColorTypes) => string;
+                        complementaryColorDefinition: (colorSchemaType: ColorSchemaTypes | import("..").ColorSchemaType, colorType: import("..").ColorType | import("..").ColorTypes) => import("..").ColorDefinition;
+                        currentTheme: () => import("..").ThemeDefinitionV2;
+                    };
+                    actions: {
+                        setTheme(newTheme: import("..").ThemeDefinitionV2): void;
+                    };
+                }, colorSchemaType?: ColorSchemaTypes | import("..").ColorSchemaType, container?: boolean) => void;
+                setColorSchema: (colorSchemaType: import("..").ColorSchemaType, container?: boolean) => void;
+            };
+        };
     };
     static ensureRenderContext(rendererInfo: ResolvedComponentRenderer, definition: VelcronDefinition, currentRenderCtx: VelcronRenderContext, newViewModel?: VelcronState): VelcronRenderContext;
 }

package/internal-do-not-import-from-here/ux/velcron/core/parser/VelcronStyles.d.ts

@@ -1,10 +1,10 @@
-import { VelcronBorder, VelcronCustomThemeSettings, VelcronDefinition, VelcronDimensions, VelcronRenderContext } from "../models";
+import { VelcronBorder, VelcronColorStyling, VelcronDefinition, VelcronDimensions, VelcronRenderContext } from "../models";
 import { VelcronUnitProvider } from "../models/VelcronUnitProvider";
 export declare class VelcronStyles {
     static styleProvider: (baseStyles: object, definition: VelcronDefinition, renderCtx: VelcronRenderContext) => any;
     static unitProvider: VelcronUnitProvider;
     static registerStyleProvider(fn: (styleBase: object, definition: VelcronDefinition, renderCtx: VelcronRenderContext) => object | string, unitProvider: VelcronUnitProvider): void;
-    static insertBackgroundColor(styleBase: any, definition: VelcronCustomThemeSettings, renderCtx: VelcronRenderContext): void;
+    static insertBackgroundColor(styleBase: any, color: VelcronColorStyling, renderCtx: VelcronRenderContext): void;
     static insertBorderRadiusStyles(styleBase: any, settings: VelcronDimensions): void;
     static insertBorderStyles(styleBase: any, borderSettings: VelcronBorder, renderCtx: VelcronRenderContext): void;
     static create(definition: VelcronDefinition, renderCtx: VelcronRenderContext): object | string;

package/internal-do-not-import-from-here/ux/velcron/core/stores/VelcronColorSchema.d.ts

@@ -0,0 +1,43 @@
+import { ColorDefinition, ColorSchema, ColorSchemaType, ColorSchemaTypes } from "@omnia/fx-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;
+        themeStore: {
+            state: {
+                currentTheme: import("@omnia/fx-models").ThemeDefinitionV2;
+            };
+            get: {
+                colorSchema: (colorSchemaType: ColorSchemaTypes | ColorSchemaType) => ColorSchema;
+                typography: (typographyType: import("@omnia/fx-models").TypographyType | import("@omnia/fx-models").TypographyTypes) => import("@omnia/fx-models").TypographyTypeDefinition;
+                color: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: import("@omnia/fx-models").ColorType | import("@omnia/fx-models").ColorTypes) => string;
+                colorDefinition: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: import("@omnia/fx-models").ColorType | import("@omnia/fx-models").ColorTypes) => ColorDefinition;
+                complementaryColorType: (colorType: import("@omnia/fx-models").ColorType | import("@omnia/fx-models").ColorTypes) => import("@omnia/fx-models").ColorTypes;
+                complementaryColor: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: import("@omnia/fx-models").ColorType | import("@omnia/fx-models").ColorTypes) => string;
+                complementaryColorDefinition: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: import("@omnia/fx-models").ColorType | import("@omnia/fx-models").ColorTypes) => ColorDefinition;
+                currentTheme: () => import("@omnia/fx-models").ThemeDefinitionV2;
+            };
+            actions: {
+                setTheme(newTheme: import("@omnia/fx-models").ThemeDefinitionV2): void;
+            };
+        };
+        id: import("@omnia/fx-models").GuidValue;
+    };
+    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/internal-do-not-import-from-here/ux/velcron/core/stores/index.d.ts

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

package/internal-do-not-import-from-here/ux/velcron/editor/VelcronEditor.css.d.ts

@@ -1,6 +1,7 @@
 export declare const VelcronEditorStyles: {
     contentContainer: string;
     leftCompontentContainer: string;
+    leftCompontentContainerCode: string;
     leftNavContainer: string;
     panesWrapper: (splitterColor: any) => string;
 };