@omnia/velcron 8.0.90-vnext → 8.0.92-vnext

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/internal-do-not-import-from-here/shared/models/theming/ThemeDefinitionV2.d.ts +3 -3
  2. package/internal-do-not-import-from-here/shared/models/theming/TypographyDefinition.d.ts +3 -4
  3. package/internal-do-not-import-from-here/shared/models/theming/TypographyDefinition.js +0 -1
  4. package/internal-do-not-import-from-here/shared/models/theming/UseThemeMethods.js +0 -3
  5. package/models/Enums.d.ts +6 -0
  6. package/models/Enums.js +8 -1
  7. package/models/VelcronDefinitions.d.ts +28 -9
  8. package/models/VelcronDefinitions.js +1 -1
  9. package/models/VelcronPropertyEditorDefinitions.d.ts +2 -1
  10. package/package.json +1 -1
  11. package/parser/VelcronActions.js +1 -1
  12. package/parser/VelcronConstants.d.ts +4 -1
  13. package/parser/VelcronConstants.js +6 -3
  14. package/parser/VelcronData.d.ts +1 -1
  15. package/parser/VelcronData.js +38 -42
  16. package/parser/VelcronRenderers.js +1 -2
  17. package/parser/VelcronStyles.js +24 -18
  18. package/stores/VelcronBlueprint.d.ts +9 -9
  19. package/stores/VelcronColorSchema.d.ts +9 -9
  20. package/templatebuilder/state/VelcronColorSchemaBuilder.d.ts +1 -1
  21. package/templatebuilder/state/VelcronColorSchemaBuilder.js +1 -1
  22. package/templatebuilder/state/VelcronContentStateBuilder.js +1 -1
  23. package/templatebuilder/state/VelcronImageStateBuilder.js +2 -2
package/internal-do-not-import-from-here/shared/models/theming/ThemeDefinitionV2.d.ts CHANGED
@@ -50,7 +50,7 @@ export interface ThemeDefinitionV2 {
50
50
  colors: ColorSchemas;
51
51
  blueprints: BluePrintDefinitions;
52
52
  }
53
- export type ColorSchemaType = "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background" | "error" | "info";
53
+ export type ColorSchemaType = keyof typeof ColorSchemaTypes;
54
54
  export declare enum ColorSchemaTypes {
55
55
  primary = "primary",
56
56
  secondary = "secondary",
@@ -62,14 +62,14 @@ export declare enum ColorSchemaTypes {
62
62
  error = "error",
63
63
  info = "info"
64
64
  }
65
- export type BlueprintType = "default" | "variant1" | "variant2" | "variant3";
65
+ export type BlueprintType = keyof typeof BlueprintTypes;
66
66
  export declare enum BlueprintTypes {
67
67
  default = "default",
68
68
  variant1 = "variant1",
69
69
  variant2 = "variant2",
70
70
  variant3 = "variant3"
71
71
  }
72
- export type ColorType = "base" | "onBase" | "container" | "onContainer";
72
+ export type ColorType = keyof typeof ColorTypes;
73
73
  export declare enum ColorTypes {
74
74
  base = "base",
75
75
  onBase = "onBase",
package/internal-do-not-import-from-here/shared/models/theming/TypographyDefinition.d.ts CHANGED
@@ -33,14 +33,13 @@ export interface TypographyTypeBreakPoint {
33
33
  size: number;
34
34
  lineHeight: number;
35
35
  }
36
- export type TypographyType = "title" | "text" | "navigation" | "link";
36
+ export type TypographyType = keyof typeof TypographyTypes;
37
37
  export declare enum TypographyTypes {
38
38
  title = "title",
39
39
  text = "text",
40
- navigation = "navigation",
41
- link = "link"
40
+ navigation = "navigation"
42
41
  }
43
- export type TypographySize = "xl" | "l" | "m" | "s" | "xs";
42
+ export type TypographySize = keyof typeof TypographySizes;
44
43
  export declare enum TypographySizes {
45
44
  xl = "xl",
46
45
  l = "l",
package/internal-do-not-import-from-here/shared/models/theming/TypographyDefinition.js CHANGED
@@ -6,7 +6,6 @@ var TypographyTypes;
6
6
  TypographyTypes["title"] = "title";
7
7
  TypographyTypes["text"] = "text";
8
8
  TypographyTypes["navigation"] = "navigation";
9
- TypographyTypes["link"] = "link";
10
9
  })(TypographyTypes = exports.TypographyTypes || (exports.TypographyTypes = {}));
11
10
  var TypographySizes;
12
11
  (function (TypographySizes) {
package/internal-do-not-import-from-here/shared/models/theming/UseThemeMethods.js CHANGED
@@ -59,9 +59,6 @@ function useThemeMethods(getThemeDefinition) {
59
59
  else if (typographyType === TypographyDefinition_1.TypographyTypes.navigation) {
60
60
  return typographyBlueprint.definition[size];
61
61
  }
62
- else if (typographyType === TypographyDefinition_1.TypographyTypes.link) {
63
- return typographyBlueprint.definition.link[TypographyDefinition_1.TypographySizes.m];
64
- }
65
62
  }
66
63
  function color(colorSchemaType, colorType) {
67
64
  const mappedColorSchema = colorSchema(colorSchemaType);
package/models/Enums.d.ts CHANGED
@@ -16,6 +16,12 @@ export declare enum VelcronActionTypes {
16
16
  export declare enum VelcronIconTypes {
17
17
  fontAwesome = "fa"
18
18
  }
19
+ export declare enum VelcronViewDirections {
20
+ row = "row",
21
+ column = "column",
22
+ rowReverse = "row-reverse",
23
+ columnRevers = "column-reverse"
24
+ }
19
25
  export declare enum VelcronHorizontalAlignments {
20
26
  left = "left",
21
27
  center = "center",
package/models/Enums.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.VelcronDataTypes = exports.VelcronVerticalAlignments = exports.VelcronHorizontalAlignments = exports.VelcronIconTypes = exports.VelcronActionTypes = exports.AssignOperators = void 0;
3
+ exports.VelcronDataTypes = exports.VelcronVerticalAlignments = exports.VelcronHorizontalAlignments = exports.VelcronViewDirections = exports.VelcronIconTypes = exports.VelcronActionTypes = exports.AssignOperators = void 0;
4
4
  var AssignOperators;
5
5
  (function (AssignOperators) {
6
6
  AssignOperators["equals"] = "=";
@@ -22,6 +22,13 @@ var VelcronIconTypes;
22
22
  (function (VelcronIconTypes) {
23
23
  VelcronIconTypes["fontAwesome"] = "fa";
24
24
  })(VelcronIconTypes = exports.VelcronIconTypes || (exports.VelcronIconTypes = {}));
25
+ var VelcronViewDirections;
26
+ (function (VelcronViewDirections) {
27
+ VelcronViewDirections["row"] = "row";
28
+ VelcronViewDirections["column"] = "column";
29
+ VelcronViewDirections["rowReverse"] = "row-reverse";
30
+ VelcronViewDirections["columnRevers"] = "column-reverse";
31
+ })(VelcronViewDirections = exports.VelcronViewDirections || (exports.VelcronViewDirections = {}));
25
32
  var VelcronHorizontalAlignments;
26
33
  (function (VelcronHorizontalAlignments) {
27
34
  VelcronHorizontalAlignments["left"] = "left";
package/models/VelcronDefinitions.d.ts CHANGED
@@ -2,12 +2,13 @@ import { VelcronEvent, VelcronOnUpdatedEvent, VelcronOnClosedEvent, VelcronOnClo
2
2
  import { VelcroncomponentArrayType, VelcronPrimitiveType } from "./VelcronTypes";
3
3
  import { AssignOperators, VelcronHorizontalAlignments, VelcronIconTypes, VelcronActionTypes, VelcronVerticalAlignments } from "./Enums";
4
4
  import { VelcronPropertyEditor, useVelcronThemingStore } from "..";
5
+ import { GuidValue, PropertyConfiguration, PropertyValue, PropertyDefinition, PropertySetupBase } from "@omnia/fx/models";
5
6
  import { useVelcronColorSchemaStore } from "../stores/VelcronColorSchema";
6
7
  import { useVelcronBlueprintStore } from "../stores/VelcronBlueprint";
7
8
  export interface ResolvedComponentRenderer {
8
9
  component: unknown;
9
10
  definition: VelcronDefinition;
10
- customComponent: boolean;
11
+ customComponent?: boolean;
11
12
  }
12
13
  export interface BuiltInComponentRenderers {
13
14
  "view": unknown;
@@ -23,6 +24,8 @@ export interface BuiltInComponentRenderers {
23
24
  "icon": unknown;
24
25
  "chip": unknown;
25
26
  "markdown": unknown;
27
+ "slot": unknown;
28
+ "property": unknown;
26
29
  }
27
30
  export interface ColorSchemaReference {
28
31
  name: string;
@@ -120,6 +123,7 @@ export interface VelcronDefinitionWithEditMode extends VelcronDefinition {
120
123
  bind?: VelcronBindableProp;
121
124
  }
122
125
  interface VelcronDimensionStyling {
126
+ margin?: VelcronSpacing;
123
127
  padding?: VelcronSpacing;
124
128
  }
125
129
  export interface VelcronColorStyling {
@@ -163,8 +167,8 @@ export interface VelcronIcon {
163
167
  }
164
168
  export interface VelcronAppDefinition<TState extends DynamicState = DynamicState> extends VelcronDefinitionBase {
165
169
  type: "velcron";
166
- version: string;
167
- name: string;
170
+ version?: string;
171
+ name?: string;
168
172
  body?: Array<VelcronDefinition>;
169
173
  events?: VelcronOnLoadEvent & VelcronOnEditModeEvent;
170
174
  actions?: {
@@ -187,10 +191,10 @@ export interface VelcronComponentDefinition extends VelcronDefinition {
187
191
  export interface VelcronViewDefinition extends VelcronDefinition, VelcronColorStyling {
188
192
  type: "view";
189
193
  events?: VelcronOnPressEvent;
190
- direction?: "row" | "column" | "row-reverse" | "column-reverse" | string;
194
+ direction?: VelcronBindableProp<"row" | "column" | "row-reverse" | "column-reverse">;
191
195
  columnStyle?: object;
192
- horizontalAlignment?: VelcronHorizontalAlignments;
193
- verticalAlignment?: VelcronVerticalAlignments;
196
+ hAlign?: VelcronHorizontalAlignments;
197
+ vAlign?: VelcronVerticalAlignments;
194
198
  grow?: number;
195
199
  absolute?: VelcronSpacing;
196
200
  border?: VelcronBorder;
@@ -215,12 +219,12 @@ export interface VelcronTextDefinition extends VelcronDefinitionWithEditMode, Ve
215
219
  }
216
220
  export declare enum VelcronImageRatios {
217
221
  square = "square",
218
- landscape = "landscapre"
222
+ landscape = "landscape"
219
223
  }
220
224
  export interface VelcronImageDefinition extends VelcronDefinition {
221
225
  type: "image";
222
226
  source: string;
223
- ratio: VelcronImageRatios | string;
227
+ ratio?: VelcronImageRatios | string;
224
228
  cover?: VelcronBindableProp<boolean>;
225
229
  borderRadius?: VelcronDimensions;
226
230
  events?: VelcronOnPressEvent;
@@ -270,7 +274,9 @@ export interface VelcronDimensions {
270
274
  left: number | string;
271
275
  }
272
276
  export interface VelcronBorder extends VelcronDimensions {
273
- color: string;
277
+ colorType?: string;
278
+ toned?: boolean;
279
+ opacity?: number;
274
280
  }
275
281
  export interface VelcronChipDefinition extends VelcronDefinition {
276
282
  type: "chip";
@@ -279,6 +285,19 @@ export interface VelcronChipDefinition extends VelcronDefinition {
279
285
  disabled?: boolean;
280
286
  events?: VelcronOnPressEvent;
281
287
  }
288
+ export interface VelcronSlotDefinition extends VelcronDefinition {
289
+ type: "slot";
290
+ bind: VelcronBindableProp<string>;
291
+ }
292
+ export interface VelcronPropertyDefinition extends VelcronDefinition {
293
+ type: "property";
294
+ bind: VelcronBindableProp<string>;
295
+ }
296
+ export interface VelcronPropertyDefinitionValue {
297
+ definitionId: GuidValue;
298
+ value: PropertyValue;
299
+ configuration: PropertyConfiguration<PropertyDefinition<any, any, any, PropertySetupBase>>;
300
+ }
282
301
  export type VelcronCustomComponentDefinition = VelcronComponentDefinition;
283
302
  export type VelcronRenderProps<TDefinition> = {
284
303
  definition: TDefinition;
package/models/VelcronDefinitions.js CHANGED
@@ -4,5 +4,5 @@ exports.VelcronImageRatios = void 0;
4
4
  var VelcronImageRatios;
5
5
  (function (VelcronImageRatios) {
6
6
  VelcronImageRatios["square"] = "square";
7
- VelcronImageRatios["landscape"] = "landscapre";
7
+ VelcronImageRatios["landscape"] = "landscape";
8
8
  })(VelcronImageRatios = exports.VelcronImageRatios || (exports.VelcronImageRatios = {}));
package/models/VelcronPropertyEditorDefinitions.d.ts CHANGED
@@ -8,7 +8,8 @@ export interface VelcronPropertyEditor<TSettings = any> {
8
8
  type: BuiltInPropertyEditorType | string;
9
9
  settings?: TSettings;
10
10
  stateMapping?: string;
11
- propertyMapping?: string;
11
+ propertyMapping?: boolean;
12
+ multiple?: boolean;
12
13
  component?: unknown;
13
14
  }
14
15
  export interface BuiltInPropertyEditors {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@omnia/velcron",
3
3
  "license": "MIT",
4
- "version": "8.0.90-vnext",
4
+ "version": "8.0.92-vnext",
5
5
  "description": "Provide Omnia Velcron Stuffs.",
6
6
  "scripts": {
7
7
  "test": "echo \"Error: no test specified\" && exit 1"
package/parser/VelcronActions.js CHANGED
@@ -331,7 +331,7 @@ class VelcronActions {
331
331
  return text;
332
332
  }
333
333
  static parseAndExecuteComputed(renderContext, template) {
334
- VelcronData_1.VelcronData.getTokens(template).forEach(token => {
334
+ VelcronData_1.VelcronData.getTokens(template, false).forEach(token => {
335
335
  const paramValues = [];
336
336
  VelcronActions.parseFunction(renderContext.computed, token, renderContext, paramValues, (acName, params) => {
337
337
  const funcContent = renderContext.computed[acName];
package/parser/VelcronConstants.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export declare const VelcronConstants: {
2
2
  components: {
3
- appDefinition: string;
3
+ velcron: string;
4
4
  view: string;
5
5
  card: string;
6
6
  text: string;
@@ -13,6 +13,8 @@ export declare const VelcronConstants: {
13
13
  icon: string;
14
14
  chip: string;
15
15
  markdown: string;
16
+ slot: string;
17
+ property: string;
16
18
  };
17
19
  events: {
18
20
  idTokenStart: string;
@@ -25,5 +27,6 @@ export declare const VelcronConstants: {
25
27
  properties: {
26
28
  tokenStart: string;
27
29
  tokenEnd: string;
30
+ propsToken: string;
28
31
  };
29
32
  };
package/parser/VelcronConstants.js CHANGED
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.VelcronConstants = void 0;
4
4
  exports.VelcronConstants = {
5
5
  components: {
6
- appDefinition: "velcron",
6
+ velcron: "velcron",
7
7
  view: "view",
8
8
  card: "card",
9
9
  text: "text",
@@ -16,6 +16,8 @@ exports.VelcronConstants = {
16
16
  icon: "icon",
17
17
  chip: "chip",
18
18
  markdown: "markdown",
19
+ slot: "slot",
20
+ property: "property"
19
21
  },
20
22
  events: {
21
23
  idTokenStart: "$ev{",
@@ -26,7 +28,8 @@ exports.VelcronConstants = {
26
28
  stateRootToken: "$state"
27
29
  },
28
30
  properties: {
29
- tokenStart: "${",
30
- tokenEnd: "}"
31
+ tokenStart: "{{",
32
+ tokenEnd: "}}",
33
+ propsToken: "$props"
31
34
  }
32
35
  };
package/parser/VelcronData.d.ts CHANGED
@@ -26,7 +26,7 @@ export declare class VelcronData {
26
26
  static extendObject(obj: any): any;
27
27
  static getOrSetObjectByPath<T>(object: Object, path: string, value?: any): T | null;
28
28
  static getOrSetObjectByPathUsingRenderContext<T>(renderContext: VelcronRenderContext, path: string, value?: any): T;
29
- static getTokens(template: any): string[];
29
+ static getTokens(template: any, removeBrackets: boolean): string[];
30
30
  static ensureEventId(event: string): string;
31
31
  static ensureKeys(ui: VelcronDefinition | VelcronAppDefinition, generateNewKeys?: boolean): void;
32
32
  static removeKeys(ui: VelcronDefinition | VelcronAppDefinition): void;
package/parser/VelcronData.js CHANGED
@@ -10,10 +10,9 @@ class VelcronData {
10
10
  if (!VelcronData.isString(text)) {
11
11
  return text;
12
12
  }
13
- const tokens = this.getTokens(text);
14
- tokens.forEach((name) => {
15
- let data = this.getOrSetObjectByPathUsingRenderContext(renderContext, name);
16
- const token = VelcronConstants_1.VelcronConstants.properties.tokenStart + name + VelcronConstants_1.VelcronConstants.properties.tokenEnd;
13
+ const tokens = this.getTokens(text, false);
14
+ tokens.forEach((token) => {
15
+ let data = this.getOrSetObjectByPathUsingRenderContext(renderContext, token.replace(/\s*{{\s*|\s*}}\s*/g, ""));
17
16
  if (data instanceof TextValue_1.TextValue) {
18
17
  data = data.value;
19
18
  }
@@ -508,52 +507,49 @@ class VelcronData {
508
507
  variables[renderContext.id].hasOwnProperty(path)) {
509
508
  result = variables[renderContext.id][path];
510
509
  }
510
+ else if (path.startsWith(VelcronConstants_1.VelcronConstants.properties.propsToken + ".")) {
511
+ //props in a custom component $props.
512
+ path = path.substring(VelcronConstants_1.VelcronConstants.properties.propsToken.length + 1);
513
+ const propObj = VelcronData.getOrSetObjectByPath(renderContext.properties, path);
514
+ if (VelcronData.isString(propObj)) {
515
+ const propString = propObj;
516
+ path = VelcronData.dataBind(renderContext, propString);
517
+ result = path;
518
+ }
519
+ result = propObj;
520
+ }
511
521
  else {
512
- let pathIsPropertyValue = false;
513
- if (renderContext.properties?.hasOwnProperty(path)) {
514
- pathIsPropertyValue = true;
515
- const propObj = renderContext.properties[path];
516
- if (VelcronData.isString(propObj)) {
517
- const propString = propObj;
518
- path = VelcronData.dataBind(renderContext, propString);
519
- }
520
- result = propObj;
522
+ const tokens = VelcronData.getTokens(path, true);
523
+ if (tokens.length > 0) {
524
+ path = tokens[0];
521
525
  }
522
- if (!result || VelcronData.isString(result)) {
523
- const tokens = VelcronData.getTokens(path);
524
- if (tokens.length > 0) {
525
- path = tokens[0];
526
- }
527
- let object = null;
528
- if (path.startsWith(`${VelcronConstants_1.VelcronConstants.state.stateRootToken}.`) || path === VelcronConstants_1.VelcronConstants.state.stateRootToken) {
529
- //Fetch from the data object
530
- object = renderContext.rootContext;
531
- path = path.substring(6);
532
- }
533
- else {
534
- //Fetch from current ctx
535
- object = renderContext.currentContext;
536
- }
537
- if (VelcronData.isObject(object)) {
538
- result = VelcronData.getOrSetObjectByPath(object, path, value);
539
- }
540
- else {
541
- //For example if you bind to Array of ["string"] the currentContext is only a string so we just return the object without mapping path
542
- result = object;
543
- }
544
- if (typeof result === "undefined" && pathIsPropertyValue) {
545
- result = path;
546
- }
526
+ let object = null;
527
+ if (path.startsWith(`${VelcronConstants_1.VelcronConstants.state.stateRootToken}.`) || path === VelcronConstants_1.VelcronConstants.state.stateRootToken) {
528
+ //Fetch from the data object
529
+ object = renderContext.rootContext;
530
+ path = path.substring(6);
531
+ }
532
+ else {
533
+ //Fetch from current ctx
534
+ object = renderContext.currentContext;
535
+ }
536
+ if (VelcronData.isObject(object)) {
537
+ result = VelcronData.getOrSetObjectByPath(object, path, value);
538
+ }
539
+ else {
540
+ //For example if you bind to Array of ["string"] the currentContext is only a string so we just return the object without mapping path
541
+ result = object;
547
542
  }
548
543
  }
549
544
  return result;
550
545
  }
551
- static getTokens(template) {
546
+ static getTokens(template, removeBrackets) {
552
547
  const tokens = [];
553
548
  if (template) {
554
- template.replace(/(\${).+?(?=\})/g, (tokenWithVar, token) => {
555
- tokens.push(tokenWithVar.substring(2));
556
- return token;
549
+ template.replace(removeBrackets ? /{{\s*(.+?)\s*}}/g : /(\{{.+?\}})/g, (foundToken, token) => {
550
+ const tokenWithVar = removeBrackets ? token : foundToken;
551
+ tokens.push(tokenWithVar);
552
+ return tokenWithVar;
557
553
  });
558
554
  }
559
555
  return tokens;
package/parser/VelcronRenderers.js CHANGED
@@ -95,7 +95,6 @@ class VelcronRenderers {
95
95
  //Fetch the custom component definition
96
96
  const customDef = rendererInfo.definition;
97
97
  if (customDef.properties) {
98
- // customDef.properties.forEach((prop) => {
99
98
  Object.keys(customDef.properties).forEach((propName) => {
100
99
  const prop = customDef.properties ? customDef.properties[propName] : null;
101
100
  if (!prop || (prop.required && !definition.hasOwnProperty(propName))) {
@@ -106,7 +105,7 @@ class VelcronRenderers {
106
105
  if (VelcronData_1.VelcronData.isString(definition[propName])) {
107
106
  //Properties can be databound so if its a string we try do databind
108
107
  //this is true for other values such as number / string also
109
- result.properties[propName] = VelcronData_1.VelcronData.dataBind(currentRenderCtx, definition[propName]);
108
+ result.properties[propName] = VelcronData_1.VelcronData.dataBind(result, definition[propName]);
110
109
  }
111
110
  else {
112
111
  result.properties[propName] = definition[propName];
package/parser/VelcronStyles.js CHANGED
@@ -58,21 +58,27 @@ class VelcronStyles {
58
58
  if (!borderSettings) {
59
59
  return;
60
60
  }
61
+ let borderColor = borderSettings.toned ?
62
+ renderCtx.colors.get[borderSettings.colorType]?.colorToned
63
+ : renderCtx.colors.get[borderSettings.colorType]?.color;
64
+ if (borderSettings.opacity) {
65
+ borderColor = renderCtx.colors.get.base.dark ? `rgba(255,255,255,${borderSettings.opacity})` : `rgba(0,0,0,${borderSettings.opacity})`;
66
+ }
61
67
  if (borderSettings.top || borderSettings.top === 0) {
62
68
  styleBase["borderTopStyle"] = "solid";
63
- styleBase["borderTopColor"] = renderCtx.colors.get[borderSettings.color];
69
+ styleBase["borderTopColor"] = borderColor;
64
70
  }
65
71
  if (borderSettings.right || borderSettings.right === 0) {
66
72
  styleBase["borderRightStyle"] = "solid";
67
- styleBase["borderRightColor"] = renderCtx.colors.get[borderSettings.color];
73
+ styleBase["borderRightColor"] = borderColor;
68
74
  }
69
75
  if (borderSettings.bottom || borderSettings.bottom === 0) {
70
76
  styleBase["borderBottomStyle"] = "solid";
71
- styleBase["borderBottomColor"] = renderCtx.colors.get[borderSettings.color];
77
+ styleBase["borderBottomColor"] = borderColor;
72
78
  }
73
79
  if (borderSettings.left || borderSettings.left === 0) {
74
80
  styleBase["borderLeftStyle"] = "solid";
75
- styleBase["borderLeftColor"] = renderCtx.colors.get[borderSettings.color];
81
+ styleBase["borderLeftColor"] = borderColor;
76
82
  }
77
83
  }
78
84
  static create(definition, renderCtx) {
@@ -81,13 +87,13 @@ class VelcronStyles {
81
87
  }
82
88
  const styleBase = { ...definition.style };
83
89
  /**Generic styling */
84
- // if(definition.styling?.margin){
85
- // const spacing = renderCtx.blueprints.get.spacing.inner;
86
- // styleBase["marginTop"] = this.unitProvider.formatDimension(getSpacingValueFromBlueprint(definition.styling.margin.top,spacing)) as any;
87
- // styleBase["marginRight"] = this.unitProvider.formatDimension(getSpacingValueFromBlueprint(definition.styling.margin.right,spacing)) as any;
88
- // styleBase["marginBottom"] = this.unitProvider.formatDimension(getSpacingValueFromBlueprint(definition.styling.margin.bottom,spacing)) as any;
89
- // styleBase["marginLeft"] = this.unitProvider.formatDimension(getSpacingValueFromBlueprint(definition.styling.margin.left,spacing)) as any;
90
- // }
90
+ if (definition.margin) {
91
+ const spacing = renderCtx.blueprints.get.spacing.inner;
92
+ styleBase["marginTop"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(definition.margin.top, spacing));
93
+ styleBase["marginRight"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(definition.margin.right, spacing));
94
+ styleBase["marginBottom"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(definition.margin.bottom, spacing));
95
+ styleBase["marginLeft"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(definition.margin.left, spacing));
96
+ }
91
97
  if (definition.padding) {
92
98
  const spacing = renderCtx.blueprints.get.spacing.inner;
93
99
  // const padding:VelcronSpacing = definition.padding instanceof Object ? definition.padding :
@@ -98,7 +104,7 @@ class VelcronStyles {
98
104
  styleBase["paddingBottom"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, definition.padding.bottom), spacing));
99
105
  styleBase["paddingLeft"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, definition.padding.left), spacing));
100
106
  }
101
- if (definition.type === VelcronConstants_1.VelcronConstants.components.appDefinition) {
107
+ if (definition.type === VelcronConstants_1.VelcronConstants.components.velcron) {
102
108
  //styleBase["backgroundColor"] = renderCtx.colors.get.base.color;
103
109
  }
104
110
  if (definition.type === VelcronConstants_1.VelcronConstants.components.image) {
@@ -187,21 +193,21 @@ class VelcronStyles {
187
193
  const minHeight = VelcronData_1.VelcronData.dataBind(renderCtx, flexViewDefinition.minHeight);
188
194
  styleBase["minHeight"] = this.unitProvider.formatDimension(minHeight);
189
195
  }
190
- if (flexViewDefinition.horizontalAlignment) {
196
+ if (flexViewDefinition.hAlign) {
191
197
  const propertyName = direction === "column" || direction === "column-reverse" ? "alignItems" : "justifyContent";
192
- if (flexViewDefinition.horizontalAlignment === models_1.VelcronHorizontalAlignments.right) {
198
+ if (flexViewDefinition.hAlign === models_1.VelcronHorizontalAlignments.right) {
193
199
  styleBase[propertyName] = "flex-end";
194
200
  }
195
- else if (flexViewDefinition.horizontalAlignment === models_1.VelcronHorizontalAlignments.center) {
201
+ else if (flexViewDefinition.hAlign === models_1.VelcronHorizontalAlignments.center) {
196
202
  styleBase[propertyName] = "center";
197
203
  }
198
204
  }
199
205
  const propertyName = direction === "column" || direction === "column-reverse" ? "justifyContent" : "alignItems";
200
- if (flexViewDefinition.verticalAlignment) {
201
- if (flexViewDefinition.verticalAlignment === models_1.VelcronVerticalAlignments.center) {
206
+ if (flexViewDefinition.vAlign) {
207
+ if (flexViewDefinition.vAlign === models_1.VelcronVerticalAlignments.center) {
202
208
  styleBase[propertyName] = "center";
203
209
  }
204
- else if (flexViewDefinition.verticalAlignment === models_1.VelcronVerticalAlignments.bottom) {
210
+ else if (flexViewDefinition.vAlign === models_1.VelcronVerticalAlignments.bottom) {
205
211
  styleBase[propertyName] = "flex-end";
206
212
  }
207
213
  }
package/stores/VelcronBlueprint.d.ts CHANGED
@@ -3,20 +3,20 @@ import { useVelcronThemingStore } from ".";
3
3
  export declare const useVelcronBlueprintStore: (newStateWithName?: string) => {
4
4
  state: {
5
5
  blueprint: BlueprintDefinition;
6
- blueprintType: BlueprintType | BlueprintTypes;
6
+ blueprintType: "default" | "variant1" | "variant2" | "variant3" | BlueprintTypes;
7
7
  themeStore: {
8
8
  state: {
9
9
  currentTheme: import("@omnia/fx-models").ThemeDefinitionV2;
10
10
  };
11
11
  get: {
12
- blueprint: (blueprintType: BlueprintType | BlueprintTypes) => BlueprintDefinition;
13
- colorSchema: (colorSchemaType: import("@omnia/fx-models").ColorSchemaTypes | import("@omnia/fx-models").ColorSchemaType) => import("@omnia/fx-models").ColorSchema;
14
- typography: (typographyType: import("@omnia/fx-models").TypographyType | import("@omnia/fx-models").TypographyTypes, size: import("@omnia/fx-models").TypographySize | import("@omnia/fx-models").TypographySizes) => import("@omnia/fx-models").TypographyTypeDefinition;
15
- color: (colorSchemaType: import("@omnia/fx-models").ColorSchemaTypes | import("@omnia/fx-models").ColorSchemaType, colorType: import("@omnia/fx-models").ColorType | import("@omnia/fx-models").ColorTypes) => string;
16
- colorDefinition: (colorSchemaType: import("@omnia/fx-models").ColorSchemaTypes | import("@omnia/fx-models").ColorSchemaType, colorType: import("@omnia/fx-models").ColorType | import("@omnia/fx-models").ColorTypes) => import("@omnia/fx-models").ColorDefinition;
17
- complementaryColorType: (colorType: import("@omnia/fx-models").ColorType | import("@omnia/fx-models").ColorTypes) => import("@omnia/fx-models").ColorTypes;
18
- complementaryColor: (colorSchemaType: import("@omnia/fx-models").ColorSchemaTypes | import("@omnia/fx-models").ColorSchemaType, colorType: import("@omnia/fx-models").ColorType | import("@omnia/fx-models").ColorTypes) => string;
19
- complementaryColorDefinition: (colorSchemaType: import("@omnia/fx-models").ColorSchemaTypes | import("@omnia/fx-models").ColorSchemaType, colorType: import("@omnia/fx-models").ColorType | import("@omnia/fx-models").ColorTypes) => import("@omnia/fx-models").ColorDefinition;
12
+ blueprint: (blueprintType: "default" | "variant1" | "variant2" | "variant3" | BlueprintTypes) => BlueprintDefinition;
13
+ colorSchema: (colorSchemaType: "info" | "error" | import("@omnia/fx-models").ColorSchemaTypes | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background") => import("@omnia/fx-models").ColorSchema;
14
+ typography: (typographyType: "title" | "text" | "navigation" | import("@omnia/fx-models").TypographyTypes, size: "xs" | "s" | "m" | "l" | "xl" | import("@omnia/fx-models").TypographySizes) => import("@omnia/fx-models").TypographyTypeDefinition;
15
+ color: (colorSchemaType: "info" | "error" | import("@omnia/fx-models").ColorSchemaTypes | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => string;
16
+ colorDefinition: (colorSchemaType: "info" | "error" | import("@omnia/fx-models").ColorSchemaTypes | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => import("@omnia/fx-models").ColorDefinition;
17
+ complementaryColorType: (colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => import("@omnia/fx-models").ColorTypes;
18
+ complementaryColor: (colorSchemaType: "info" | "error" | import("@omnia/fx-models").ColorSchemaTypes | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => string;
19
+ complementaryColorDefinition: (colorSchemaType: "info" | "error" | import("@omnia/fx-models").ColorSchemaTypes | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => import("@omnia/fx-models").ColorDefinition;
20
20
  currentTheme: () => import("@omnia/fx-models").ThemeDefinitionV2;
21
21
  };
22
22
  actions: {
package/stores/VelcronColorSchema.d.ts CHANGED
@@ -8,20 +8,20 @@ export declare const useVelcronColorSchemaStore: (newStateWithName?: string) =>
8
8
  onContainer: ColorDefinition;
9
9
  isContainer: boolean;
10
10
  name: string;
11
- colorSchemaType: ColorSchemaTypes | ColorSchemaType;
11
+ colorSchemaType: "info" | "error" | ColorSchemaTypes | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background";
12
12
  themeStore: {
13
13
  state: {
14
14
  currentTheme: import("@omnia/fx-models").ThemeDefinitionV2;
15
15
  };
16
16
  get: {
17
- blueprint: (blueprintType: import("@omnia/fx-models").BlueprintType | import("@omnia/fx-models").BlueprintTypes) => import("@omnia/fx-models").BlueprintDefinition;
18
- colorSchema: (colorSchemaType: ColorSchemaTypes | ColorSchemaType) => ColorSchema;
19
- typography: (typographyType: import("@omnia/fx-models").TypographyType | import("@omnia/fx-models").TypographyTypes, size: import("@omnia/fx-models").TypographySize | import("@omnia/fx-models").TypographySizes) => import("@omnia/fx-models").TypographyTypeDefinition;
20
- color: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: import("@omnia/fx-models").ColorType | import("@omnia/fx-models").ColorTypes) => string;
21
- colorDefinition: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: import("@omnia/fx-models").ColorType | import("@omnia/fx-models").ColorTypes) => ColorDefinition;
22
- complementaryColorType: (colorType: import("@omnia/fx-models").ColorType | import("@omnia/fx-models").ColorTypes) => import("@omnia/fx-models").ColorTypes;
23
- complementaryColor: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: import("@omnia/fx-models").ColorType | import("@omnia/fx-models").ColorTypes) => string;
24
- complementaryColorDefinition: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: import("@omnia/fx-models").ColorType | import("@omnia/fx-models").ColorTypes) => ColorDefinition;
17
+ blueprint: (blueprintType: "default" | "variant1" | "variant2" | "variant3" | import("@omnia/fx-models").BlueprintTypes) => import("@omnia/fx-models").BlueprintDefinition;
18
+ colorSchema: (colorSchemaType: "info" | "error" | ColorSchemaTypes | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background") => ColorSchema;
19
+ typography: (typographyType: "title" | "text" | "navigation" | import("@omnia/fx-models").TypographyTypes, size: "xs" | "s" | "m" | "l" | "xl" | import("@omnia/fx-models").TypographySizes) => import("@omnia/fx-models").TypographyTypeDefinition;
20
+ color: (colorSchemaType: "info" | "error" | ColorSchemaTypes | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => string;
21
+ colorDefinition: (colorSchemaType: "info" | "error" | ColorSchemaTypes | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => ColorDefinition;
22
+ complementaryColorType: (colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => import("@omnia/fx-models").ColorTypes;
23
+ complementaryColor: (colorSchemaType: "info" | "error" | ColorSchemaTypes | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => string;
24
+ complementaryColorDefinition: (colorSchemaType: "info" | "error" | ColorSchemaTypes | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => ColorDefinition;
25
25
  currentTheme: () => import("@omnia/fx-models").ThemeDefinitionV2;
26
26
  };
27
27
  actions: {
package/templatebuilder/state/VelcronColorSchemaBuilder.d.ts CHANGED
@@ -6,6 +6,6 @@ export declare class VelcronColorSchemaStateBuilder extends VelcronStateBuilderB
6
6
  add(colorSchema?: ColorSchemaType): VelcronColorSchemaStateBuilder;
7
7
  bind: string;
8
8
  protected internalBuild(): {
9
- colorSchemaType: ColorSchemaType;
9
+ colorSchemaType: "info" | "error" | "primary" | "secondary" | "accent1" | "accent2" | "accent3" | "neutral" | "background";
10
10
  };
11
11
  }
package/templatebuilder/state/VelcronColorSchemaBuilder.js CHANGED
@@ -5,7 +5,7 @@ const VelcronStateBuilderBase_1 = require("./VelcronStateBuilderBase");
5
5
  class VelcronColorSchemaStateBuilder extends VelcronStateBuilderBase_1.VelcronStateBuilderBase {
6
6
  constructor(stateBuilder) {
7
7
  super(stateBuilder);
8
- this.bind = "${colorSchemaType}";
8
+ this.bind = "{{colorSchemaType}}";
9
9
  }
10
10
  add(colorSchema) {
11
11
  this.colorSchema = colorSchema;
package/templatebuilder/state/VelcronContentStateBuilder.js CHANGED
@@ -17,7 +17,7 @@ class VelcronContentStateBuilder extends VelcronStateBuilderBase_1.VelcronStateB
17
17
  this.captionContent = value;
18
18
  return this;
19
19
  },
20
- bind: "${content.caption}"
20
+ bind: "{{content.caption}}"
21
21
  };
22
22
  }
23
23
  internalBuild() {
package/templatebuilder/state/VelcronImageStateBuilder.js CHANGED
@@ -11,14 +11,14 @@ class VelcronImageStateBuilder extends VelcronStateBuilderBase_1.VelcronStateBui
11
11
  this.mainImageUrl = url;
12
12
  return this;
13
13
  },
14
- bind: "${main-image.url}"
14
+ bind: "{{main-image.url}}"
15
15
  },
16
16
  ratio: {
17
17
  add: (ratio) => {
18
18
  this.mainImageRatio = ratio;
19
19
  return this;
20
20
  },
21
- bind: "${main-image.ratio}"
21
+ bind: "{{main-image.ratio}}"
22
22
  }
23
23
  };
24
24
  }