cx 22.11.0 → 22.11.2

package/src/widgets/form/Label.scss

@@ -1,37 +1,37 @@
-
-@mixin cx-label(
-   $name: 'label',
-   $state-style-map: $cx-label-state-style-map,
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
-
-   .#{$block}label {
-      display: inline-block;
-
-      @include cx-add-state-rules($state-style-map, default);
-
-      &:hover {
-         @include cx-add-state-rules($state-style-map, hover);
-      }
-
-      &:active {
-         @include cx-add-state-rules($state-style-map, active);
-      }
-
-      &.#{$state}disabled {
-         @include cx-add-state-rules($state-style-map, disabled);
-      }
-   }
-
-   .#{$element}label-asterisk {
-      color: $cx-default-label-asterisk-color;
-   }
-}
-
-@if (cx-should-include('cx/widgets/Label')) {
-   @include cx-label();
+
+@mixin cx-label(
+   $name: 'label',
+   $state-style-map: $cx-label-state-style-map,
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+   $mod: map-get($besm, mod);
+
+   .#{$block}label {
+      display: inline-block;
+
+      @include cx-add-state-rules($state-style-map, default);
+
+      &:hover {
+         @include cx-add-state-rules($state-style-map, hover);
+      }
+
+      &:active {
+         @include cx-add-state-rules($state-style-map, active);
+      }
+
+      &.#{$state}disabled {
+         @include cx-add-state-rules($state-style-map, disabled);
+      }
+   }
+
+   .#{$element}label-asterisk {
+      color: $cx-default-label-asterisk-color;
+   }
+}
+
+@if (cx-should-include('cx/widgets/Label')) {
+   @include cx-label();
 }

package/src/widgets/form/LabeledContainer.d.ts

@@ -1,17 +1,17 @@
-import * as Cx from '../../core';
-import { FieldGroupProps } from './FieldGroup';
-
-interface LabeledContainerProps extends FieldGroupProps {
-
-   /** The label. */
-   label?: Cx.StringProp | Cx.Config,
-   
-   /** Set to true to disable all fields inside the container. */
-   disabled?: boolean,
-
-   /** Apply asterisk to the label. */
-   asterisk?: boolean
-   
-}
-
-export class LabeledContainer extends Cx.Widget<LabeledContainerProps> {}
+import * as Cx from '../../core';
+import { FieldGroupProps } from './FieldGroup';
+
+interface LabeledContainerProps extends FieldGroupProps {
+
+   /** The label. */
+   label?: Cx.StringProp | Cx.Config,
+   
+   /** Set to true to disable all fields inside the container. */
+   disabled?: boolean,
+
+   /** Apply asterisk to the label. */
+   asterisk?: boolean
+   
+}
+
+export class LabeledContainer extends Cx.Widget<LabeledContainerProps> {}

package/src/widgets/form/LabeledContainer.js

@@ -1,59 +1,59 @@
-import {Widget} from '../../ui/Widget';
-import {FieldGroup} from './FieldGroup';
-import {Label} from './Label';
-import {isSelector} from '../../data/isSelector';
-
-export class LabeledContainer extends FieldGroup
-{
-   declareData() {
-      super.declareData({
-         label: undefined
-      }, ...arguments);
-   }
-
-   init() {
-
-      if (this.label != null) {
-         let labelConfig = {
-            type: Label,
-            disabled: this.disabled,
-            mod: this.mod,
-            asterisk: this.asterisk,
-            required: true
-         };
-
-         if (this.label.isComponentType)
-            labelConfig = this.label;
-         else if (isSelector(this.label))
-            labelConfig.text = this.label;
-         else
-            Object.assign(labelConfig, this.label);
-
-         this.label = Widget.create(labelConfig);
-      }
-
-      super.init();
-   }
-
-   initComponents(context, instance) {
-      return super.initComponents(...arguments, {
-         label: this.label
-      });
-   }
-
-   renderLabel(context, instance, key) {
-      if (instance.components.label)
-         return instance.components.label.render(context, key);
-   }
-
-   render(context, instance, key) {
-      return {
-         label: this.renderLabel(context, instance),
-         content: this.renderChildren(context, instance)
-      }
-   }
-}
-
-LabeledContainer.prototype.styled = true;
-
-Widget.alias('labeled-container', LabeledContainer);
+import {Widget} from '../../ui/Widget';
+import {FieldGroup} from './FieldGroup';
+import {Label} from './Label';
+import {isSelector} from '../../data/isSelector';
+
+export class LabeledContainer extends FieldGroup
+{
+   declareData() {
+      super.declareData({
+         label: undefined
+      }, ...arguments);
+   }
+
+   init() {
+
+      if (this.label != null) {
+         let labelConfig = {
+            type: Label,
+            disabled: this.disabled,
+            mod: this.mod,
+            asterisk: this.asterisk,
+            required: true
+         };
+
+         if (this.label.isComponentType)
+            labelConfig = this.label;
+         else if (isSelector(this.label))
+            labelConfig.text = this.label;
+         else
+            Object.assign(labelConfig, this.label);
+
+         this.label = Widget.create(labelConfig);
+      }
+
+      super.init();
+   }
+
+   initComponents(context, instance) {
+      return super.initComponents(...arguments, {
+         label: this.label
+      });
+   }
+
+   renderLabel(context, instance, key) {
+      if (instance.components.label)
+         return instance.components.label.render(context, key);
+   }
+
+   render(context, instance, key) {
+      return {
+         label: this.renderLabel(context, instance),
+         content: this.renderChildren(context, instance)
+      }
+   }
+}
+
+LabeledContainer.prototype.styled = true;
+
+Widget.alias('labeled-container', LabeledContainer);

package/src/widgets/form/LookupField.d.ts

@@ -1,165 +1,171 @@
-import { Instance } from "./../../ui/Instance";
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface LookupFieldProps extends FieldProps {
-   /** Defaults to `false`. Set to `true` to enable multiple selection. */
-   multiple?: Cx.BooleanProp;
-
-   /** Selected value. Used only if `multiple` is set to `false`. */
-   value?: Cx.Prop<number | string>;
-
-   /** A list of selected ids. Used only if `multiple` is set to `true`. */
-   values?: Cx.Prop<any[]>;
-
-   /** A list of selected records. Used only if `multiple` is set to `true`. */
-   records?: Cx.RecordsProp;
-
-   /** Text associated with the selection. Used only if `multiple` is set to `false`. */
-   text?: Cx.StringProp;
-
-   /** The opposite of `disabled`. */
-   enabled?: Cx.BooleanProp;
-
-   /** Default text displayed when the field is empty. */
-   placeholder?: Cx.StringProp;
-
-   /** A list of available options. */
-   options?: Cx.RecordsProp;
-
-   /**
-    * Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property.
-    * No effect if `multiple` is used. Default value is `false`.
-    */
-   hideClear?: boolean;
-
-   /**
-    * Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property.
-    * No effect if `multiple` is used. Default value is `true`.
-    */
-   showClear?: boolean;
-
-   /**
-    * Set to `true` to display the clear button even if `required` is set. Default is `false`.
-    */
-   alwaysShowClear?: boolean;
-
-   /** Base CSS class to be applied to the field. Defaults to `lookupfield`. */
-   baseClass?: string;
-
-   /* TODO: Check type */
-
-   /** Additional config to be applied to all items */
-   itemsConfig?: any;
-
-   /**
-    * An array of objects describing the mapping of option data to store data.
-    * Each entry must define `local`, `remote` bindings. `key: true` is used to indicate fields that are used in the primary key.
-    */
-   bindings?: any;
-
-   /** A delay in milliseconds between the moment the user stops typing and when tha query is made. Default value is `150`. */
-   queryDelay?: number;
-
-   /** Minimal number of characters required before query is made. */
-   minQueryLength?: number;
-
-   /** Set to `true` to hide the search field. */
-   hideSearchField?: boolean;
-
-   /**
-    * Number of options required to show the search field.
-    * If there are only a few options, there is no need for search. Defaults to `7`.
-    */
-   minOptionsForSearchField?: number;
-
-   /** Text to display while data is being loaded. */
-   loadingText?: string;
-
-   /** Error message displayed to the user if server query throws an exception. */
-   queryErrorText?: string;
-
-   /** Message to be displayed if no entries match the user query. */
-   noResultsText?: string;
-
-   /** Name of the field which holds the id of the option. Default value is `id`. */
-   optionIdField?: string;
-
-   /** Name of the field which holds the display text of the option. Default value is `text`. */
-   optionTextField?: string;
-
-   /**
-    * Available only in `multiple` selection mode and without custom `bindings`.
-    * Name of the field to store id of the selected value. Default value is `id`.
-    */
-   valueIdField?: string;
-
-   /**
-    * Available only in `multiple` selection mode.
-    * Name of the field to store display text of the selected value. Default value is `text`.
-    */
-   valueTextField?: string;
-
-   /**
-    * If `true` `onQuery` will be called only once to fetch all options.
-    * After that options are filtered client-side.
-    */
-   fetchAll?: boolean;
-
-   /**
-    * If this flag is set along with `fetchAll`, fetched options are cached for the lifetime of the widget.
-    * Otherwise, data is fetched whenever the dropdown is shown.
-    */
-   cacheAll?: boolean;
-
-   /** Close the dropdown after selection. Default is `true`. */
-   closeOnSelect?: boolean;
-
-   /** Mesasge to be displayed to the user if the entered search query is too short. */
-   minQueryLengthMessageText?: string;
-
-   /** Name of the icon to be put on the left side of the input. */
-   icon?: string;
-
-   /** Query function. */
-   onQuery?: (
-      query: string | { query: string; page: number; pageSize: number },
-      instance: Instance
-   ) => Cx.Record[] | Promise<Cx.Record>;
-
-   /** Set to true to sort dropdown options. */
-   sort?: boolean;
-
-   /** Additional list options, such as grouping configuration, custom sorting, etc. */
-   listOptions?: Cx.Config;
-
-   /** Set to true to show the dropdown immediately after the component has mounted.
-    * This is commonly used for cell editing in grids. */
-   autoOpen?: Cx.BooleanProp;
-
-   /** Set to true to allow enter key events to be propagated. This is useful for submitting forms or closing grid cell editors. */
-   submitOnEnterKey?: Cx.BooleanProp;
-
-   /** Set to true to allow dropdown enter key events to be propagated. This is useful for submitting forms on dropdown enter key selection. */
-   submitOnDropdownEnterKey?: Cx.BooleanProp;
-
-   /** Defaults to `false`. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp;
-
-   /** Set to `true` to enable loading of additional lookup options when the scroll is reaching the end. */
-   infinite?: boolean;
-
-   /** Number of additional items to be loaded in `infinite` mode. Default is 100. */
-   pageSize?: number;
-
-   /** Set to `true` to allow quick selection of all displayed lookup items on `ctrl + a` keys combination.  */
-   quickSelectAll?: boolean;
-
-   /** Parameters that affect filtering. */
-   filterParams?: StructuredProp;
-
-   /** Callback to create a filter function for given filter params. */
-   onCreateVisibleOptionsFilter?: (filterParams: any, instance?: Instance) => (record: Record) => boolean;
-}
-
-export class LookupField extends Cx.Widget<LookupFieldProps> {}
+import { Instance } from "./../../ui/Instance";
+import * as Cx from "../../core";
+import { FieldProps } from "./Field";
+
+export interface LookupBinding {
+   local: string;
+   remote: string;
+   key?: boolean;
+}
+
+interface LookupFieldProps extends FieldProps {
+   /** Defaults to `false`. Set to `true` to enable multiple selection. */
+   multiple?: Cx.BooleanProp;
+
+   /** Selected value. Used only if `multiple` is set to `false`. */
+   value?: Cx.Prop<number | string>;
+
+   /** A list of selected ids. Used only if `multiple` is set to `true`. */
+   values?: Cx.Prop<any[]>;
+
+   /** A list of selected records. Used only if `multiple` is set to `true`. */
+   records?: Cx.RecordsProp;
+
+   /** Text associated with the selection. Used only if `multiple` is set to `false`. */
+   text?: Cx.StringProp;
+
+   /** The opposite of `disabled`. */
+   enabled?: Cx.BooleanProp;
+
+   /** Default text displayed when the field is empty. */
+   placeholder?: Cx.StringProp;
+
+   /** A list of available options. */
+   options?: Cx.RecordsProp;
+
+   /**
+    * Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property.
+    * No effect if `multiple` is used. Default value is `false`.
+    */
+   hideClear?: boolean;
+
+   /**
+    * Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property.
+    * No effect if `multiple` is used. Default value is `true`.
+    */
+   showClear?: boolean;
+
+   /**
+    * Set to `true` to display the clear button even if `required` is set. Default is `false`.
+    */
+   alwaysShowClear?: boolean;
+
+   /** Base CSS class to be applied to the field. Defaults to `lookupfield`. */
+   baseClass?: string;
+
+   /* TODO: Check type */
+
+   /** Additional config to be applied to all items */
+   itemsConfig?: any;
+
+   /**
+    * An array of objects describing the mapping of option data to store data.
+    * Each entry must define `local`, `remote` bindings. `key: true` is used to indicate fields that are used in the primary key.
+    */
+   bindings?: LookupBinding[];
+
+   /** A delay in milliseconds between the moment the user stops typing and when tha query is made. Default value is `150`. */
+   queryDelay?: number;
+
+   /** Minimal number of characters required before query is made. */
+   minQueryLength?: number;
+
+   /** Set to `true` to hide the search field. */
+   hideSearchField?: boolean;
+
+   /**
+    * Number of options required to show the search field.
+    * If there are only a few options, there is no need for search. Defaults to `7`.
+    */
+   minOptionsForSearchField?: number;
+
+   /** Text to display while data is being loaded. */
+   loadingText?: string;
+
+   /** Error message displayed to the user if server query throws an exception. */
+   queryErrorText?: string;
+
+   /** Message to be displayed if no entries match the user query. */
+   noResultsText?: string;
+
+   /** Name of the field which holds the id of the option. Default value is `id`. */
+   optionIdField?: string;
+
+   /** Name of the field which holds the display text of the option. Default value is `text`. */
+   optionTextField?: string;
+
+   /**
+    * Available only in `multiple` selection mode and without custom `bindings`.
+    * Name of the field to store id of the selected value. Default value is `id`.
+    */
+   valueIdField?: string;
+
+   /**
+    * Available only in `multiple` selection mode.
+    * Name of the field to store display text of the selected value. Default value is `text`.
+    */
+   valueTextField?: string;
+
+   /**
+    * If `true` `onQuery` will be called only once to fetch all options.
+    * After that options are filtered client-side.
+    */
+   fetchAll?: boolean;
+
+   /**
+    * If this flag is set along with `fetchAll`, fetched options are cached for the lifetime of the widget.
+    * Otherwise, data is fetched whenever the dropdown is shown.
+    */
+   cacheAll?: boolean;
+
+   /** Close the dropdown after selection. Default is `true`. */
+   closeOnSelect?: boolean;
+
+   /** Mesasge to be displayed to the user if the entered search query is too short. */
+   minQueryLengthMessageText?: string;
+
+   /** Name of the icon to be put on the left side of the input. */
+   icon?: string;
+
+   /** Query function. */
+   onQuery?: (
+      query: string | { query: string; page: number; pageSize: number },
+      instance: Instance
+   ) => Cx.Record[] | Promise<Cx.Record>;
+
+   /** Set to true to sort dropdown options. */
+   sort?: boolean;
+
+   /** Additional list options, such as grouping configuration, custom sorting, etc. */
+   listOptions?: Cx.Config;
+
+   /** Set to true to show the dropdown immediately after the component has mounted.
+    * This is commonly used for cell editing in grids. */
+   autoOpen?: Cx.BooleanProp;
+
+   /** Set to true to allow enter key events to be propagated. This is useful for submitting forms or closing grid cell editors. */
+   submitOnEnterKey?: Cx.BooleanProp;
+
+   /** Set to true to allow dropdown enter key events to be propagated. This is useful for submitting forms on dropdown enter key selection. */
+   submitOnDropdownEnterKey?: Cx.BooleanProp;
+
+   /** Defaults to `false`. Used to make the field read-only. */
+   readOnly?: Cx.BooleanProp;
+
+   /** Set to `true` to enable loading of additional lookup options when the scroll is reaching the end. */
+   infinite?: boolean;
+
+   /** Number of additional items to be loaded in `infinite` mode. Default is 100. */
+   pageSize?: number;
+
+   /** Set to `true` to allow quick selection of all displayed lookup items on `ctrl + a` keys combination.  */
+   quickSelectAll?: boolean;
+
+   /** Parameters that affect filtering. */
+   filterParams?: StructuredProp;
+
+   /** Callback to create a filter function for given filter params. */
+   onCreateVisibleOptionsFilter?: (filterParams: any, instance?: Instance) => (record: Record) => boolean;
+}
+
+export class LookupField extends Cx.Widget<LookupFieldProps> {}