cx 25.11.1 → 26.0.1

package/src/locale/fr-fr.ts

@@ -0,0 +1,76 @@
+import { Localization } from "../ui/Localization";
+
+const c = "fr-fr";
+
+// Field
+Localization.localize(c, "cx/widgets/Field", {
+   requiredText: "Ce champ est requis.",
+   validatingText: "La validation est en cours ...",
+   validationExceptionText:
+      "Une erreur s'est produite lors de la validation des entrées. Consultez le journal pour plus de détails.",
+});
+
+// LookupField
+Localization.localize(c, "cx/widgets/LookupField", {
+   loadingText: "Chargement...",
+   queryErrorText: "Une erreur s'est produite lors de l'interrogation des données de recherche.",
+   noResultsText: "Aucun résultat trouvé.",
+   minQueryLengthMessageText: "Tapez au moins {0} caractère (s).",
+});
+
+// In common for Calendar and MonthPicker
+const calendarErrorMessages = {
+   maxValueErrorText: "Sélectionnez {0:d} ou avant.",
+   maxExclusiveErrorText: "Sélectionnez une date avant {0:d}.",
+   minValueErrorText: "Sélectionnez {0:d} ou plus tard.",
+   minExclusiveErrorText: "Sélectionnez une date après {0:d}.",
+};
+
+// Calendar
+Localization.localize(c, "cx/widgets/Calendar", {
+   ...calendarErrorMessages,
+   todayButtonText: "Aujourd'hui",
+   startWithMonday: true,
+});
+
+// MonthPicker
+Localization.localize(c, "cx/widgets/MonthPicker", calendarErrorMessages);
+
+// In common for DateField and MonthField
+const dateFieldErrorMessages = {
+   ...calendarErrorMessages,
+   inputErrorText: "Date invalide entrée.",
+};
+
+// MonthField
+Localization.localize(c, "cx/widgets/MonthField", dateFieldErrorMessages);
+
+// DateField
+Localization.localize(c, "cx/widgets/DateField", dateFieldErrorMessages);
+
+// NumberField
+Localization.localize(c, "cx/widgets/NumberField", {
+   maxValueErrorText: "Entrez {0} ou moins.",
+   maxExclusiveErrorText: "Entrez un nombre inférieur à {0}.",
+   minValueErrorText: "Entrez {0} ou plus.",
+   minExclusiveErrorText: "Entrez un nombre supérieur à {0}.",
+   inputErrorText: "Numéro invalide entré.",
+});
+
+// TextField
+Localization.localize(c, "cx/widgets/TextField", {
+   validationErrorText: "La valeur entrée n'est pas valide.",
+   minLengthValidationErrorText: "Entrez {[{0} - {1}]} plus de caractères.",
+   maxLengthValidationErrorText: "Utilisez {0} caractères ou moins.",
+});
+
+// UploadButton
+Localization.localize(c, "cx/widgets/UploadButton", {
+   validationErrorText: "Le téléchargement est en cours.",
+});
+
+// MsgBox
+Localization.localize(c, "cx/widgets/MsgBox", {
+   yesText: "Oui",
+   noText: "Non",
+});

package/src/locale/nl-nl.ts

@@ -0,0 +1,76 @@
+import { Localization } from "../ui/Localization";
+
+const c = "nl-nl";
+
+// Field
+Localization.localize(c, "cx/widgets/Field", {
+   requiredText: "Dit veld is verplicht.",
+   validatingText: "Validatie is bezig ...",
+   validationExceptionText:
+      "Er is een probleem opgetreden bij het valideren van de gegevens. Controleer het logboek voor meer details ",
+});
+
+// LookupField
+Localization.localize(c, "cx/widgets/LookupField", {
+   loadingText: "Bezig met laden ...",
+   queryErrorText: "Er is een fout opgetreden bij het weergeven van gegevens.",
+   noResultsText: "Geen resultaten gevonden",
+   minQueryLengthMessageText: "Voer minimaal {0} tekens in.",
+});
+
+// In common for Calendar and MonthPicker
+const calendarErrorMessages = {
+   maxValueErrorText: "De geselecteerde datum is later dan de laatst toegestane datum {0: d}",
+   maxExclusiveErrorText: "De geselecteerde datum moet vóór {0: d}",
+   minValueErrorText: "De geselecteerde datum is eerder dan {0: d}",
+   minExclusiveErrorText: "De geselecteerde datum moet later zijn dan {0: d}",
+};
+
+// Calendar
+Localization.localize(c, "cx/widgets/Calendar", {
+   ...calendarErrorMessages,
+   todayButtonText: "Vandaag",
+   startWithMonday: true,
+});
+
+// MonthPicker
+Localization.localize(c, "cx/widgets/MonthPicker", calendarErrorMessages);
+
+// In common for DateField and MonthField
+const dateFieldErrorMessages = {
+   ...calendarErrorMessages,
+   inputErrorText: "Ongeldige datum.",
+};
+
+// MonthField
+Localization.localize(c, "cx/widgets/MonthField", dateFieldErrorMessages);
+
+// DateField
+Localization.localize(c, "cx/widgets/DateField", dateFieldErrorMessages);
+
+// NumberField
+Localization.localize(c, "cx/widgets/NumberField", {
+   maxValueErrorText: "Voer {0} of minder in.",
+   maxExclusiveErrorText: "Voer een nummer in dat kleiner is dan {0}.",
+   minValueErrorText: "Voer {0} of meer in.",
+   minExclusiveErrorText: "Voer een getal in dat groter is dan {0}.",
+   inputErrorText: "Ongeldig nummer.",
+});
+
+// TextField
+Localization.localize(c, "cx/widgets/TextField", {
+   validationErrorText: "De ingevoerde waarde is ongeldig.",
+   minLengthValidationErrorText: "Vul {[{0} - {1}]} extra karakters in.",
+   maxLengthValidationErrorText: "Gebruik {0} tekens of minder.",
+});
+
+// UploadButton
+Localization.localize(c, "cx/widgets/UploadButton", {
+   validationErrorText: "Upload is bezig.",
+});
+
+// MsgBox
+Localization.localize(c, "cx/widgets/MsgBox", {
+   yesText: "Ja",
+   noText: "Nee",
+});

package/src/locale/pt-pt.ts

@@ -0,0 +1,76 @@
+import { Localization } from "../ui/Localization";
+
+const c = "pt-pt";
+
+// Field
+Localization.localize(c, "cx/widgets/Field", {
+   requiredText: "Este campo é obrigatório.",
+   validatingText: "A validação está em andamento ...",
+   validationExceptionText:
+      "Algo deu errado durante a validação de entrada. Verifique o log para mais detalhes.",
+});
+
+// LookupField
+Localization.localize(c, "cx/widgets/LookupField", {
+   loadingText: "Carregando...",
+   queryErrorText: "Ocorreu um erro ao consultar os dados de pesquisa.",
+   noResultsText: "Nenhum resultado encontrado.",
+   minQueryLengthMessageText: "Digite pelo menos {0} caractere(s).",
+});
+
+// In common for Calendar and MonthPicker
+const calendarErrorMessages = {
+   maxValueErrorText: "Selecione {0:d} ou antes.",
+   maxExclusiveErrorText: "Selecione uma data antes de {0:d}.",
+   minValueErrorText: "Selecione {0:d} ou posterior.",
+   minExclusiveErrorText: "Selecione uma data após {0:d}.",
+};
+
+// Calendar
+Localization.localize(c, "cx/widgets/Calendar", {
+   ...calendarErrorMessages,
+   todayButtonText: "Hoje",
+   startWithMonday: false,
+});
+
+// MonthPicker
+Localization.localize(c, "cx/widgets/MonthPicker", calendarErrorMessages);
+
+// In common for DateField and MonthField
+const dateFieldErrorMessages = {
+   ...calendarErrorMessages,
+   inputErrorText: "Data inválida inserida.",
+};
+
+// MonthField
+Localization.localize(c, "cx/widgets/MonthField", dateFieldErrorMessages);
+
+// DateField
+Localization.localize(c, "cx/widgets/DateField", dateFieldErrorMessages);
+
+// NumberField
+Localization.localize(c, "cx/widgets/NumberField", {
+   maxValueErrorText: "Digite {0} ou menos.",
+   maxExclusiveErrorText: "Digite um número menor que {0}.",
+   minValueErrorText: "Digite {0} ou mais.",
+   minExclusiveErrorText: "Digite um número maior que {0}.",
+   inputErrorText: "Número inválido digitado.",
+});
+
+// TextField
+Localization.localize(c, "cx/widgets/TextField", {
+   validationErrorText: "O valor inserido não é válido.",
+   minLengthValidationErrorText: "Digite {[{0}-{1}]} mais caractere(s).",
+   maxLengthValidationErrorText: "Use {0} caracteres ou menos.",
+});
+
+// UploadButton
+Localization.localize(c, "cx/widgets/UploadButton", {
+   validationErrorText: "O upload está em andamento.",
+});
+
+// MsgBox
+Localization.localize(c, "cx/widgets/MsgBox", {
+   yesText: "Sim",
+   noText: "Não",
+});

package/src/locale/sr-latn-ba.ts

@@ -0,0 +1,76 @@
+import { Localization } from "../ui/Localization";
+
+const c = "sr-latn-ba";
+
+// Field
+Localization.localize(c, "cx/widgets/Field", {
+   requiredText: "Ovo polje je obavezno.",
+   validatingText: "Validacija je u toku...",
+   validationExceptionText:
+      "Došlo je do problema prilikom validacije podataka. Provjerite log za više detalja.",
+});
+
+// LookupField
+Localization.localize(c, "cx/widgets/LookupField", {
+   loadingText: "Učitavanje...",
+   queryErrorText: "Došlo je do greške kod pribavljanja podataka za prikaz.",
+   noResultsText: "Rezultati nisu pronađeni.",
+   minQueryLengthMessageText: "Unesite najmanje {0} karakter(a).",
+});
+
+// In common for Calendar and MonthPicker
+const calendarErrorMessages = {
+   maxValueErrorText: "Izabrani datum je kasniji od posljednjeg dozvoljenog datuma {0:d}",
+   maxExclusiveErrorText: "Izabrani datum bi trebao biti prije {0:d}",
+   minValueErrorText: "Izabrani datum je raniji od {0:d}",
+   minExclusiveErrorText: "Izabrani datum bi trebao biti kasniji od {0:d}",
+};
+
+// Calendar
+Localization.localize(c, "cx/widgets/Calendar", {
+   ...calendarErrorMessages,
+   todayButtonText: "Danas",
+   startWithMonday: true,
+});
+
+// MonthPicker
+Localization.localize(c, "cx/widgets/MonthPicker", calendarErrorMessages);
+
+// In common for DateField and MonthField
+const dateFieldErrorMessages = {
+   ...calendarErrorMessages,
+   inputErrorText: "Neispravan datum.",
+};
+
+// MonthField
+Localization.localize(c, "cx/widgets/MonthField", dateFieldErrorMessages);
+
+// DateField
+Localization.localize(c, "cx/widgets/DateField", dateFieldErrorMessages);
+
+// NumberField
+Localization.localize(c, "cx/widgets/NumberField", {
+   maxValueErrorText: "Unesite {0} ili manje.",
+   maxExclusiveErrorText: "Unesite broj manji od {0}.",
+   minValueErrorText: "Unesite {0} ili više.",
+   minExclusiveErrorText: "Unesite broj veći od {0}.",
+   inputErrorText: "Neispravan broj.",
+});
+
+// TextField
+Localization.localize(c, "cx/widgets/TextField", {
+   validationErrorText: "Unesena vrijednost nije validna.",
+   minLengthValidationErrorText: "Unesite {[{0}-{1}]} dodatnih karaktera.",
+   maxLengthValidationErrorText: "Koristite {0} karaktera ili manje.",
+});
+
+// UploadButton
+Localization.localize(c, "cx/widgets/UploadButton", {
+   validationErrorText: "Otpremanje je u toku.",
+});
+
+// MsgBox
+Localization.localize(c, "cx/widgets/MsgBox", {
+   yesText: "Da",
+   noText: "Ne",
+});

package/src/svg/BoundedObject.ts

@@ -0,0 +1,101 @@
+import { Instance } from "./../ui/Instance";
+import { StyledContainerConfig, ContainerBase } from "../ui/Container";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Prop } from "../ui/Prop";
+import { IRect, Rect } from "./util/Rect";
+
+/** Typed context interface for SVG/layout-related context properties */
+export interface SvgRenderingContext extends RenderingContext {
+   parentRect?: Rect;
+   inSvg?: boolean;
+   addClipRect?: (rect: Rect) => string;
+}
+
+export interface BoundedObjectConfig extends StyledContainerConfig {
+   /**
+    * Anchor defines how child bounds are tied to the parent. Zero aligns with the top/left edge.
+    * One aligns with the bottom/right edge. See Svg for more information.
+    */
+   anchors?: Prop<string | number | IRect>;
+
+   /** Move boundaries specified by the offset. See Svg for more information. */
+   offset?: Prop<string | number | IRect>;
+
+   /** Apply margin to the given boundaries. See Svg for more information. */
+   margin?: Prop<string | number | IRect>;
+
+   /** Padding to be applied to the boundaries rectangle before passing to the children. */
+   padding?: Prop<string | number | IRect>;
+}
+
+export interface BoundedObjectInstance extends Instance {
+   parentRect?: any;
+}
+
+export class BoundedObject<
+   Config extends BoundedObjectConfig = BoundedObjectConfig,
+   InstanceType extends BoundedObjectInstance = BoundedObjectInstance,
+> extends ContainerBase<Config, InstanceType> {
+   declare anchors: any;
+   declare margin: any;
+   declare offset: any;
+   declare padding: any;
+
+   declareData(...args: any[]) {
+      return super.declareData(
+         {
+            anchors: undefined,
+            offset: undefined,
+            margin: undefined,
+            padding: undefined,
+         },
+         ...args,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: InstanceType) {
+      super.prepareData(context, instance);
+      var { data } = instance;
+      data.anchors = Rect.convert(data.anchors);
+      data.offset = Rect.convert(data.offset);
+      data.margin = Rect.convertMargin(data.margin);
+      data.padding = Rect.convertMargin(data.padding);
+   }
+
+   calculateBounds(context: SvgRenderingContext, instance: InstanceType) {
+      var { data } = instance;
+      return Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
+   }
+
+   prepareBounds(context: SvgRenderingContext, instance: InstanceType) {
+      var { data } = instance;
+      if (
+         instance.shouldUpdate ||
+         !instance.cached.parentRect ||
+         !instance.cached.parentRect.isEqual(context.parentRect) ||
+         !data.bounds
+      ) {
+         if (!context.parentRect) throw new Error("Parent bounds were not provided through the context.");
+         instance.parentRect = context.parentRect;
+         instance.cache("parentRect", context.parentRect);
+         instance.markShouldUpdate(context);
+         data.bounds = this.calculateBounds(context, instance);
+         data.childrenBounds = Rect.add(data.bounds, data.padding);
+      }
+   }
+
+   prepare(context: SvgRenderingContext, instance: InstanceType) {
+      this.prepareBounds(context, instance);
+      context.push("parentRect", instance.data.childrenBounds);
+   }
+
+   prepareCleanup(context: SvgRenderingContext, instance: InstanceType) {
+      context.pop("parentRect");
+   }
+}
+
+BoundedObject.prototype.anchors = 0;
+BoundedObject.prototype.margin = 0;
+BoundedObject.prototype.offset = 0;
+BoundedObject.prototype.padding = 0;
+BoundedObject.prototype.styled = true;

package/src/svg/ClipRect.tsx

@@ -0,0 +1,29 @@
+/** @jsxImportSource react */
+import { BoundedObject, BoundedObjectConfig } from "./BoundedObject";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+
+export interface ClipRectConfig extends BoundedObjectConfig {}
+
+export class ClipRect extends BoundedObject {
+   constructor(config?: ClipRectConfig) {
+      super(config);
+   }
+
+   prepareBounds(context: RenderingContext, instance: Instance) {
+      super.prepareBounds(context, instance);
+      const { data } = instance;
+      data.clipId = context.addClipRect(data.bounds);
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      const { data } = instance;
+      return (
+         <g key={key} clipPath={`url(#${data.clipId})`}>
+            {this.renderChildren(context, instance)}
+         </g>
+      );
+   }
+}
+
+ClipRect.prototype.anchors = "0 1 1 0";

package/src/svg/Ellipse.tsx

@@ -0,0 +1,69 @@
+/**@jsxImportSource react */
+import { Instance } from '../ui/Instance';
+import { RenderingContext } from '../ui/RenderingContext';
+import { Widget } from '../ui/Widget';
+import { NumberProp, StringProp } from '../ui/Prop';
+import { TextualBoundedObject, TextualBoundedObjectConfig } from './TextualBoundedObject';
+
+export interface EllipseConfig extends TextualBoundedObjectConfig {
+   /**
+    * Index of the color in the default color palette. Setting this property will set
+    * both fill and stroke on the object. Use `style` or a CSS class to remove stroke or fill
+    * if they are not necessary.
+    */
+   colorIndex?: NumberProp;
+
+   /** A color used to paint the box. */
+   fill?: StringProp;
+
+   /** A color used to paint the outline of the box. */
+   stroke?: StringProp;
+
+   /** Base CSS class to be applied to the element. Defaults to `ellipse`. */
+   baseClass?: string;
+}
+
+export class Ellipse extends TextualBoundedObject {
+   declare baseClass: string;
+   declare colorIndex?: NumberProp;
+   declare fill?: StringProp;
+   declare stroke?: StringProp;
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         colorIndex: undefined,
+         fill: undefined,
+         stroke: undefined,
+      });
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      const { data } = instance;
+      const { bounds, colorIndex } = data;
+      if (!bounds.valid()) return false;
+      return (
+         <g key={key} className={data.classNames}>
+            <ellipse
+               className={this.CSS.element(
+                  this.baseClass,
+                  'rect',
+                  colorIndex != null && 'color-' + colorIndex
+               )}
+               cx={(bounds.l + bounds.r) / 2}
+               cy={(bounds.t + bounds.b) / 2}
+               rx={bounds.width() / 2}
+               ry={bounds.height() / 2}
+               style={data.style}
+               fill={data.fill}
+               stroke={data.stroke}
+            />
+            {this.renderChildren(context, instance)}
+         </g>
+      );
+   }
+}
+
+Ellipse.prototype.baseClass = 'ellipse';
+Ellipse.prototype.anchors = '0 1 1 0';
+
+Widget.alias('ellipse', Ellipse);

package/src/svg/Line.tsx

@@ -0,0 +1,58 @@
+/** @jsxImportSource react */
+import { Instance } from "../ui/Instance";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Widget } from "../ui/Widget";
+import { NumberProp, StringProp } from "../ui/Prop";
+import { TextualBoundedObject, TextualBoundedObjectConfig } from "./TextualBoundedObject";
+
+export interface LineConfig extends TextualBoundedObjectConfig {
+   /**
+    * Index of the color in the default color palette. Setting this property will set
+    * both fill and stroke on the object. Use `style` or a CSS class to remove stroke or fill
+    * if they are not necessary.
+    */
+   colorIndex?: NumberProp;
+
+   /** A color used to paint the outline of the box. */
+   stroke?: StringProp;
+
+   /** Base CSS class to be applied to the element. Defaults to `line`. */
+   baseClass?: string;
+}
+
+export class Line extends TextualBoundedObject {
+   declare baseClass: string;
+   declare colorIndex?: NumberProp;
+   declare stroke?: StringProp;
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         colorIndex: undefined,
+         stroke: undefined,
+      });
+   }
+
+   render(context: RenderingContext, instance: Instance & { colorIndex: number }, key: string) {
+      const { data, colorIndex } = instance;
+      const { bounds } = data;
+      return (
+         <g key={key} className={data.classNames}>
+            <line
+               className={this.CSS.element(this.baseClass, "line", colorIndex != null && "color-" + colorIndex)}
+               x1={bounds.l}
+               y1={bounds.t}
+               x2={bounds.r}
+               y2={bounds.b}
+               style={data.style}
+               stroke={data.stroke}
+            />
+            {this.renderChildren(context, instance)}
+         </g>
+      );
+   }
+}
+
+Line.prototype.anchors = "0 1 1 0";
+Line.prototype.baseClass = "line";
+
+Widget.alias("line", Line);

package/src/svg/NonOverlappingRect.ts

@@ -0,0 +1,26 @@
+import { BoundedObject, BoundedObjectInstance, BoundedObjectConfig } from "./BoundedObject";
+import { RenderingContext } from "../ui/RenderingContext";
+
+export interface NonOverlappingRectConfig extends BoundedObjectConfig {}
+
+export interface NonOverlappingRectInstance extends BoundedObjectInstance {
+   overlapping?: boolean;
+}
+
+export class NonOverlappingRect extends BoundedObject<NonOverlappingRectConfig, NonOverlappingRectInstance> {
+   constructor(config?: NonOverlappingRectConfig) {
+      super(config);
+   }
+
+   prepare(context: RenderingContext, instance: NonOverlappingRectInstance) {
+      super.prepare(context, instance); //calculate bounds
+      if (!context.addNonOverlappingBoundingObject)
+         throw new Error("Components of type NonOverlappingRect can appear only within a NonOverlappingRectGroup.");
+      context.addNonOverlappingBoundingObject(instance);
+   }
+
+   render(context: RenderingContext, instance: NonOverlappingRectInstance, key: string) {
+      if (instance.overlapping) return null;
+      return super.render(context, instance, key);
+   }
+}

package/src/svg/NonOverlappingRectGroup.ts

@@ -0,0 +1,49 @@
+import { PureContainerBase, PureContainerConfig } from "../ui/PureContainer";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { NonOverlappingRectInstance } from "./NonOverlappingRect";
+
+export interface NonOverlappingRectGroupConfig extends PureContainerConfig {}
+
+interface NonOverlappingRectGroupInstance extends Instance {
+   nonOverlappingObjects: NonOverlappingRectInstance[];
+}
+
+export class NonOverlappingRectGroup extends PureContainerBase<NonOverlappingRectGroupConfig, NonOverlappingRectGroupInstance> {
+   constructor(config?: NonOverlappingRectGroupConfig) {
+      super(config);
+   }
+
+   prepare(context: RenderingContext, instance: NonOverlappingRectGroupInstance) {
+      instance.nonOverlappingObjects = [];
+      context.push("addNonOverlappingBoundingObject", (objectInstance: NonOverlappingRectInstance) => {
+         instance.nonOverlappingObjects.push(objectInstance);
+      });
+   }
+
+   prepareCleanup(context: RenderingContext, instance: NonOverlappingRectGroupInstance) {
+      context.pop("addNonOverlappingBoundingObject");
+      instance.nonOverlappingObjects.sort((a, b) => a.data.bounds.r - b.data.bounds.r);
+      let visibleObjects = [];
+      for (let item of instance.nonOverlappingObjects) {
+         let overlapping = false;
+         let at = visibleObjects.length - 1;
+         while (at >= 0 && visibleObjects[at].data.bounds.r > item.data.bounds.l) {
+            let r1 = visibleObjects[at].data.bounds;
+            let r2 = item.data.bounds;
+            let width = Math.min(r1.r, r2.r) - Math.max(r1.l, r2.l);
+            let height = Math.min(r1.b, r2.b) - Math.max(r1.t, r2.t);
+            if (width > 0 && height > 0) {
+               overlapping = true;
+               break;
+            }
+            at--;
+         }
+         if (item.overlapping !== overlapping) {
+            item.overlapping = overlapping;
+            item.markShouldUpdate(context);
+         }
+         if (!overlapping) visibleObjects.push(item);
+      }
+   }
+}