@omnia/velcron 7.0.524-dev → 7.0.526-dev

package/internal-do-not-import-from-here/shared/models/theming/BlueprintDefinition.d.ts

@@ -0,0 +1,27 @@
+import { Guid } from "../Guid";
+export interface BoxDimensions {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface BoxBorder extends BoxDimensions {
+    color: string;
+}
+export interface BlueprintDefinition {
+    id: Guid;
+    card?: {
+        border?: BoxBorder;
+        borderRadius?: BoxDimensions;
+    };
+    image?: {
+        borderRadius?: BoxDimensions;
+    };
+    chip?: {
+        borderRadius?: BoxDimensions;
+    };
+    icon?: {
+        borderRadius?: BoxDimensions;
+        round?: boolean;
+    };
+}

package/internal-do-not-import-from-here/shared/models/theming/BlueprintDefinition.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/internal-do-not-import-from-here/shared/models/theming/ThemeDefinitionV2.d.ts

@@ -1,4 +1,5 @@
 import { Guid } from "../Guid";
+import { BlueprintDefinition } from "./BlueprintDefinition";
 import { TypographyDefinition } from "./TypographyDefinition";
 export interface ColorDefinition {
     dark: boolean;
@@ -8,9 +9,9 @@ export interface ColorDefinition {
     colorTonedStyles: ColorStyles;
 }
 export interface ColorStyles {
-    background: object;
-    color: object;
-    all: object;
+    background: object | string;
+    color: object | string;
+    all: object | string;
 }
 export interface ColorSchema {
     name: string;
@@ -25,6 +26,7 @@ export interface ColorGroup {
 }
 export interface ThemeDefinitionV2 {
     id: Guid;
+    name: string;
     dark: boolean;
     primary: ColorSchema;
     secondary: ColorSchema;
@@ -36,6 +38,7 @@ export interface ThemeDefinitionV2 {
     error: ColorSchema;
     info: ColorSchema;
     typography: TypographyDefinition;
+    blueprint: BlueprintDefinition;
 }
 export declare const ColorSchemaTypes: {
     primary: string;

package/internal-do-not-import-from-here/shared/models/theming/TypographyDefinition.d.ts

@@ -13,6 +13,7 @@ export interface TypographyType {
     large: TypographyTypeBreakPoint;
     medium?: TypographyTypeBreakPoint;
     small?: TypographyTypeBreakPoint;
+    style: object | string;
 }
 export interface TypographyTypeBreakPoint {
     weight: number;

package/models/Enums.d.ts

@@ -38,7 +38,8 @@ export declare enum VelcronComponentPropertyEditors {
     slider = 2,
     colorPicker = 3,
     typographyPicker = 4,
-    ratioPicker = 5
+    ratioPicker = 5,
+    booleanPicker = 6
 }
 export declare enum VelcronDataTypes {
     unknown = "unknown",

package/models/Enums.js

@@ -49,6 +49,7 @@ var VelcronComponentPropertyEditors;
     VelcronComponentPropertyEditors[VelcronComponentPropertyEditors["colorPicker"] = 3] = "colorPicker";
     VelcronComponentPropertyEditors[VelcronComponentPropertyEditors["typographyPicker"] = 4] = "typographyPicker";
     VelcronComponentPropertyEditors[VelcronComponentPropertyEditors["ratioPicker"] = 5] = "ratioPicker";
+    VelcronComponentPropertyEditors[VelcronComponentPropertyEditors["booleanPicker"] = 6] = "booleanPicker";
 })(VelcronComponentPropertyEditors = exports.VelcronComponentPropertyEditors || (exports.VelcronComponentPropertyEditors = {}));
 var VelcronDataTypes;
 (function (VelcronDataTypes) {

package/models/VelcronDefinitions.d.ts

@@ -23,15 +23,23 @@ export interface BuiltInComponentRenderers {
     "Icon": unknown;
     "Chip": unknown;
 }
-export type DynamicViewModel = object;
+export interface ColorSchemaReference {
+    name: string;
+    schema: string;
+}
+export interface VelcronState {
+    colorSchemas?: {
+        [key: string]: ColorSchemaReference;
+    };
+}
 export interface OnItemRenderedHookResult {
     cssClass: string;
     containerRenderer?: VelcronContainerRenderer;
 }
 export interface VelcronRenderContext {
     id?: string;
-    rootContext: DynamicViewModel;
-    currentContext: DynamicViewModel;
+    rootContext: VelcronState;
+    currentContext: VelcronState;
     theming?: ReturnType<typeof useVelcronThemingStore>;
     colorSchemaName?: string;
     colorSchema?: ColorSchema;
@@ -102,6 +110,8 @@ export interface VelcronDefinitionBase {
 }
 export interface VelcronCustomThemeSettings {
     colorSchema?: string;
+    color?: string;
+    opacity?: number;
 }
 export interface VelcronDefinition extends VelcronDefinitionBase {
     body?: Array<VelcronDefinition>;
@@ -145,7 +155,7 @@ export interface VelcronAppDefinition extends VelcronDefinitionBase {
         [name: string]: [];
     };
     components?: Array<VelcronCustomComponentDefinition>;
-    state?: DynamicViewModel;
+    state?: VelcronState;
     computed?: {
         [name: string]: [];
     };
@@ -160,7 +170,7 @@ export interface VelcronViewDefinition extends VelcronDefinition {
     style?: VelcronStyling;
     events?: VelcronOnPressEvent;
 }
-export interface VelcronCardDefinition extends VelcronDefinition {
+export interface VelcronCardDefinition extends VelcronDefinition, VelcronCustomThemeSettings {
     type: "Card";
     style?: VelcronCardStyling;
     footer?: Array<VelcronDefinition>;
@@ -215,10 +225,10 @@ export interface VelcronDialogDefinition extends VelcronDefinition {
     visible: string;
     events?: VelcronOnCloseRequestedEvent & VelcronOnClosedEvent;
 }
-export interface VelcronIconDefinition extends VelcronDefinition {
+export interface VelcronIconDefinition extends VelcronDefinition, VelcronCustomThemeSettings {
     type: "Icon";
     icon: string;
-    color: string;
+    background?: boolean;
     size?: number;
     events?: VelcronOnPressEvent;
 }
@@ -232,7 +242,6 @@ export interface VelcronFlexViewDefinition extends VelcronDefinition, VelcronCus
     grow?: number;
     border?: VelcronBorder;
     borderRadius?: VelcronDimensions;
-    opacity: number;
     width: string;
 }
 export interface VelcronDimensions {
@@ -244,10 +253,9 @@ export interface VelcronDimensions {
 export interface VelcronBorder extends VelcronDimensions {
     color: string;
 }
-export interface VelcronChipDefinition extends VelcronDefinition {
+export interface VelcronChipDefinition extends VelcronDefinition, VelcronCustomThemeSettings {
     type: "Chip";
     text: string;
-    colorSchema: string;
     icon?: VelcronIcon;
     disabled?: boolean;
     events?: VelcronOnPressEvent;

package/package.json

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

package/parser/VelcronRenderers.d.ts

@@ -1,4 +1,4 @@
-import { BuiltInComponentRenderers, DynamicViewModel, ResolvedComponentRenderer, VelcronCustomComponentDefinition, VelcronDefinition, VelcronRenderContext } from "../models";
+import { BuiltInComponentRenderers, VelcronState, ResolvedComponentRenderer, VelcronCustomComponentDefinition, VelcronDefinition, VelcronRenderContext } from "../models";
 export declare class VelcronRenderers {
     private static components;
     static registerComponent(type: string, component: any): void;
@@ -7,8 +7,8 @@ export declare class VelcronRenderers {
     static registerComponents(components: BuiltInComponentRenderers): void;
     static getComponent(definition: VelcronDefinition, renderContext: VelcronRenderContext): ResolvedComponentRenderer;
     static definitionContainsCustomColorSchema(definition: VelcronDefinition): boolean;
-    static createNewRendererContext(currentRenderCtx: VelcronRenderContext, definition: VelcronDefinition, newViewModel?: DynamicViewModel): {
-        rootContext: object;
+    static createNewRendererContext(currentRenderCtx: VelcronRenderContext, definition: VelcronDefinition, newViewModel?: VelcronState): {
+        rootContext: VelcronState;
         theming: {
             state: {
                 currentTheme: import("@omnia/fx-models").ThemeDefinitionV2;
@@ -17,12 +17,13 @@ export declare class VelcronRenderers {
                 colorSchema: (schema: string) => import("@omnia/fx-models").ColorSchema;
                 typography: (name: string) => import("@omnia/fx-models").TypographyType;
                 color: (schemaName: string, colorType: string) => string;
+                complementaryColor: (colorType: string) => string;
             };
             actions: {
                 setTheme(newTheme: import("@omnia/fx-models").ThemeDefinitionV2): void;
             };
         };
-        currentContext: object;
+        currentContext: VelcronState;
         actions: {
             [name: string]: [];
         };
@@ -32,5 +33,5 @@ export declare class VelcronRenderers {
             [name: string]: [];
         };
     };
-    static ensureRenderContext(rendererInfo: ResolvedComponentRenderer, definition: VelcronDefinition, currentRenderCtx: VelcronRenderContext, newViewModel?: DynamicViewModel): VelcronRenderContext;
+    static ensureRenderContext(rendererInfo: ResolvedComponentRenderer, definition: VelcronDefinition, currentRenderCtx: VelcronRenderContext, newViewModel?: VelcronState): VelcronRenderContext;
 }

package/parser/VelcronStyles.d.ts

@@ -1,9 +1,12 @@
-import { VelcronDefinition, VelcronRenderContext } from "../models";
+import { VelcronBorder, VelcronCustomThemeSettings, 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 insertBorderRadiusStyles(styleBase: any, settings: VelcronDimensions): void;
+    static insertBorderStyles(styleBase: any, borderSettings: VelcronBorder, renderCtx: VelcronRenderContext): void;
     static create(definition: VelcronDefinition, renderCtx: VelcronRenderContext): object | string;
     static dataBindStyles(styles: object, renderCtx: VelcronRenderContext): object;
 }

package/parser/VelcronStyles.js

@@ -10,18 +10,66 @@ class VelcronStyles {
         VelcronStyles.styleProvider = fn;
         VelcronStyles.unitProvider = unitProvider;
     }
+    static insertBackgroundColor(styleBase, definition, renderCtx) {
+        if (definition.colorSchema && definition.colorSchema != "") {
+            //styleBase["backgroundColor"] = renderCtx.theming.get.activeColorSchema().base.color;
+            styleBase["backgroundColor"] = renderCtx.colorSchema.base.color;
+        }
+        if (definition.opacity || definition.opacity === 0) {
+            if (definition.opacity === 0) {
+                styleBase["backgroundColor"] = undefined;
+            }
+            else {
+                styleBase["backgroundColor"] = (0, utilities_1.useOpacityOnColor)(styleBase["backgroundColor"], definition.opacity / 100);
+            }
+        }
+    }
+    static insertBorderRadiusStyles(styleBase, settings) {
+        if (!settings) {
+            return;
+        }
+        if (settings.top || settings.top === 0) {
+            styleBase["borderTopLeftRadius"] = this.unitProvider.formatDimension(settings.top);
+        }
+        if (settings.right || settings.right === 0) {
+            styleBase["borderTopRightRadius"] = this.unitProvider.formatDimension(settings.right);
+        }
+        if (settings.bottom || settings.bottom === 0) {
+            styleBase["borderBottomRightRadius"] = this.unitProvider.formatDimension(settings.bottom);
+        }
+        if (settings.left || settings.left === 0) {
+            styleBase["borderBottomLeftRadius"] = this.unitProvider.formatDimension(settings.left);
+        }
+    }
+    static insertBorderStyles(styleBase, borderSettings, renderCtx) {
+        if (!borderSettings) {
+            return;
+        }
+        if (borderSettings.top || borderSettings.top === 0) {
+            styleBase["borderTopStyle"] = "solid";
+            styleBase["borderTopColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, borderSettings.color);
+        }
+        if (borderSettings.right || borderSettings.right === 0) {
+            styleBase["borderRightStyle"] = "solid";
+            styleBase["borderRightColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, borderSettings.color);
+        }
+        if (borderSettings.bottom || borderSettings.bottom === 0) {
+            styleBase["borderBottomStyle"] = "solid";
+            styleBase["borderBottomColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, borderSettings.color);
+        }
+        if (borderSettings.left || borderSettings.left === 0) {
+            styleBase["borderLeftStyle"] = "solid";
+            styleBase["borderLeftColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, borderSettings.color);
+        }
+    }
     static create(definition, renderCtx) {
         const styleBase = { ...definition.style };
-        if (definition.borderRadius) {
+        if (definition.type === VelcronConstants_1.VelcronConstants.components.image) {
             const imageDefinition = definition;
-            if (imageDefinition.borderRadius) {
-                styleBase["borderTopLeftRadius"] = this.unitProvider.formatDimension(imageDefinition.borderRadius.top);
-                styleBase["borderTopRightRadius"] = this.unitProvider.formatDimension(imageDefinition.borderRadius.right);
-                styleBase["borderBottomRightRadius"] = this.unitProvider.formatDimension(imageDefinition.borderRadius.bottom);
-                styleBase["borderBottomLeftRadius"] = this.unitProvider.formatDimension(imageDefinition.borderRadius.left);
+            if (renderCtx.theming.state.currentTheme.blueprint?.image?.borderRadius) {
+                const settings = renderCtx.theming.state.currentTheme.blueprint.image.borderRadius;
+                this.insertBorderRadiusStyles(styleBase, settings);
             }
-        }
-        if (definition.type === VelcronConstants_1.VelcronConstants.components.image) {
             //  if (styleBase.width) {
             //      styleBase.width = this.unitProvider.formatDimension(200);
             //  }
@@ -29,6 +77,18 @@ class VelcronStyles {
             //     styleBase.height = this.unitProvider.formatDimension(400);
             // }
         }
+        if (definition.type === VelcronConstants_1.VelcronConstants.components.card) {
+            const cardDefinition = definition;
+            if (renderCtx.theming.state.currentTheme.blueprint?.card?.borderRadius) {
+                const settings = renderCtx.theming.state.currentTheme.blueprint.card.borderRadius;
+                this.insertBorderRadiusStyles(styleBase, settings);
+            }
+            if (renderCtx.theming.state.currentTheme.blueprint?.card?.border) {
+                const settings = renderCtx.theming.state.currentTheme.blueprint.card.border;
+                this.insertBorderStyles(styleBase, settings, renderCtx);
+            }
+            this.insertBackgroundColor(styleBase, cardDefinition, renderCtx);
+        }
         else if (definition.type === VelcronConstants_1.VelcronConstants.components.text) {
             const textDefinition = definition;
             if (textDefinition.color) {
@@ -67,27 +127,21 @@ class VelcronStyles {
             else {
                 styleBase[propertyName] = "flex-start";
             }
-            if (flexViewDefinition.colorSchema && flexViewDefinition.colorSchema != "") {
-                //styleBase["backgroundColor"] = renderCtx.theming.get.activeColorSchema().base.color;
-                styleBase["backgroundColor"] = renderCtx.colorSchema.base.color;
-            }
-            if (flexViewDefinition.opacity || flexViewDefinition.opacity === 0) {
-                if (flexViewDefinition.opacity === 0) {
-                    styleBase["backgroundColor"] = undefined;
-                }
-                else {
-                    styleBase["backgroundColor"] = (0, utilities_1.useOpacityOnColor)(styleBase["backgroundColor"], flexViewDefinition.opacity / 100);
-                }
-            }
-            if (flexViewDefinition.border) {
-                styleBase["borderTopStyle"] = "solid";
-                styleBase["borderRightStyle"] = "solid";
-                styleBase["borderBottomStyle"] = "solid";
-                styleBase["borderLeftStyle"] = "solid";
-                styleBase["borderTopColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, flexViewDefinition.border.color);
-                styleBase["borderRightColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, flexViewDefinition.border.color);
-                styleBase["borderBottomColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, flexViewDefinition.border.color);
-                styleBase["borderLeftColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, flexViewDefinition.border.color);
+            this.insertBackgroundColor(styleBase, flexViewDefinition, renderCtx);
+        }
+        /**
+         *
+         * Generic styles for all components
+         *
+         */
+        if (definition.border) {
+            const typedDefinition = definition;
+            this.insertBorderStyles(styleBase, typedDefinition.border, renderCtx);
+        }
+        if (definition.borderRadius) {
+            const typedDefinition = definition;
+            if (typedDefinition.borderRadius) {
+                this.insertBorderRadiusStyles(styleBase, typedDefinition.borderRadius);
             }
         }
         return VelcronStyles.styleProvider(styleBase, definition, renderCtx);

package/stores/VelcronTheming.d.ts

@@ -7,6 +7,7 @@ export declare const useVelcronThemingStore: (newStateWithName?: string) => {
         colorSchema: (schema: string) => import("..").ColorSchema;
         typography: (name: string) => TypographyType;
         color: (schemaName: string, colorType: string) => string;
+        complementaryColor: (colorType: string) => string;
     };
     actions: {
         setTheme(newTheme: ThemeDefinitionV2): void;

package/stores/VelcronTheming.js

@@ -60,6 +60,25 @@ exports.useVelcronThemingStore = (0, VelcronStore_1.defineVelcronStore)("Velcron
             }
             return state.currentTheme.typography.text;
         };
+        const complementaryColor = (colorType) => {
+            if (colorType === __1.ColorTypes.base
+                || colorType === __1.ColorTypes.baseTone) {
+                return __1.ColorTypes.onBase;
+            }
+            else if (colorType === __1.ColorTypes.onBase
+                || colorType === __1.ColorTypes.onBaseTone) {
+                return __1.ColorTypes.base;
+            }
+            else if (colorType === __1.ColorTypes.container
+                || colorType === __1.ColorTypes.containerTone) {
+                return __1.ColorTypes.onContainer;
+            }
+            else if (colorType === __1.ColorTypes.onContainer
+                || colorType === __1.ColorTypes.onContainerTone) {
+                return __1.ColorTypes.container;
+            }
+            return colorType;
+        };
         const color = (schemaName, colorType) => {
             const mappedColorSchema = colorSchema(schemaName);
             if (colorType === __1.ColorTypes.base) {
@@ -91,7 +110,8 @@ exports.useVelcronThemingStore = (0, VelcronStore_1.defineVelcronStore)("Velcron
         return {
             colorSchema,
             typography,
-            color
+            color,
+            complementaryColor
         };
     },
     actions(state) {