cx 22.11.2 → 22.12.0

package/src/widgets/form/DateTimePicker.scss

@@ -1,45 +1,45 @@
-@mixin cx-datetimepicker(
-   $name: 'datetimepicker',
-   $dtp-font-size: $cx-default-font-size,
-   $dtp-background-color: $cx-default-datetimepicker-background-color,
-   $dtp-border-width: $cx-default-datetimepicker-border-width,
-   $dtp-border-radius: $cx-default-datetimepicker-border-radius,
-   $dtp-border-color: $cx-default-datetimepicker-border-color,
-   $dtp-padding: $cx-default-datetimepicker-padding,
-   $tool-size: $cx-default-input-tool-size,
-   $icon-size: $cx-default-input-icon-size,
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
-
-   .#{$block}#{$name} {
-      background: $dtp-background-color;
-      border-style: solid;
-      border-width: $dtp-border-width;
-      border-radius: $dtp-border-radius;
-      border-color: $dtp-border-color;
-      display: inline-block;
-      vertical-align: middle;
-      padding: $dtp-padding;
-      user-select: none;
-      font-size: $dtp-font-size;
-
-      &:focus {
-         outline: 0;
-      }
-   }
-
-   @include cx-wheel-elements($name+'-wheel', $tool-size, $icon-size, $besm);
-
-   .#{$element}#{$name}-spacer {
-      width: 20px;
-      display: inline-block;
-   }
-}
-
-@if (cx-should-include('cx/widgets/DateTimePicker')) {
-   @include cx-datetimepicker();
+@mixin cx-datetimepicker(
+   $name: 'datetimepicker',
+   $dtp-font-size: $cx-default-font-size,
+   $dtp-background-color: $cx-default-datetimepicker-background-color,
+   $dtp-border-width: $cx-default-datetimepicker-border-width,
+   $dtp-border-radius: $cx-default-datetimepicker-border-radius,
+   $dtp-border-color: $cx-default-datetimepicker-border-color,
+   $dtp-padding: $cx-default-datetimepicker-padding,
+   $tool-size: $cx-default-input-tool-size,
+   $icon-size: $cx-default-input-icon-size,
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+   $mod: map-get($besm, mod);
+
+   .#{$block}#{$name} {
+      background: $dtp-background-color;
+      border-style: solid;
+      border-width: $dtp-border-width;
+      border-radius: $dtp-border-radius;
+      border-color: $dtp-border-color;
+      display: inline-block;
+      vertical-align: middle;
+      padding: $dtp-padding;
+      user-select: none;
+      font-size: $dtp-font-size;
+
+      &:focus {
+         outline: 0;
+      }
+   }
+
+   @include cx-wheel-elements($name+'-wheel', $tool-size, $icon-size, $besm);
+
+   .#{$element}#{$name}-spacer {
+      width: 20px;
+      display: inline-block;
+   }
+}
+
+@if (cx-should-include('cx/widgets/DateTimePicker')) {
+   @include cx-datetimepicker();
 }

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

@@ -1,112 +1,112 @@
-import * as Cx from "../../core";
-import { Instance } from "../../ui";
-
-export interface FieldProps extends Cx.StyledContainerProps {
-   /** Field label. For advanced use cases. */
-   label?: Cx.StringProp | Cx.Config;
-
-   /** Set to `material` to use custom label placement instruction. Used in Material theme to implement animated labels. */
-   labelPlacement?: "material";
-
-   /** Set to `material` to use custom help placement instruction. Used in Material theme to implement absolutely positioned validation messages. */
-   helpPlacement?: "material";
-
-   /* Deprecated */
-   labelWidth?: any;
-
-   /** Either `view` or `edit` (default). In `view` mode, the field is displayed as plain text. */
-   mode?: Cx.Prop<"view" | "edit">;
-
-   /** Set to `true` to switch to widget view mode. Same as `mode="view". Default is false. */
-   viewMode?: Cx.BooleanProp;
-
-   id?: Cx.Prop<string | number>;
-
-   /** Used for validation. If error evaluates to non-null, the field is marked in red. */
-   error?: Cx.StringProp;
-
-   /** Style object applied to the input element. Used for setting visual elements, such as borders and backgrounds. */
-   inputStyle?: Cx.StyleProp;
-
-   /** Additional CSS class applied to the input element. Used for setting visual elements, such as borders and backgrounds. */
-   inputClass?: Cx.ClassProp;
-
-   /** Additional attributes that should be rendered on the input element. E.g. inputAttrs={{ autoComplete: "off" }}. */
-   inputAttrs?: Cx.Config;
-
-   /** Text to be rendered in view mode when the field is empty. */
-   emptyText?: Cx.StringProp;
-
-   /** Set to `true` to make error indicators visible in pristine state. By default, validation errors are not shown until the user visits the field. */
-   visited?: Cx.BooleanProp;
-
-   /** Set to `true` to automatically focus the field, after it renders for the first time. */
-   autoFocus?: Cx.BooleanProp;
-
-   /** Defines how to present validation errors. Default mode is `tooltip`. Other options are `help` and `help-block`. */
-   validationMode?: "tooltip" | "help" | "help-block";
-
-   /** Defaults to `false`. Set to `true` to disable the field. */
-   disabled?: Cx.BooleanProp;
-
-   /** Defaults to `false`. Used to make the field required. */
-   required?: Cx.BooleanProp;
-
-   /** Renamed to suppressErrorsUntilVisited. Used to indicate that required fields should not be marked as invalid before the user visits them. */
-   suppressErrorTooltipsUntilVisited?: boolean;
-
-   /** Error message used to indicate that field is required. */
-   requiredText?: string;
-
-   /** Append asterisk to the label to indicate a required field. */
-   asterisk?: boolean;
-
-   /** Text displayed to the user to indicate that server-side validation is in progress. */
-   validatingText?: string;
-
-   /** Text displayed to the user to indicate that server-side validation has thrown an exception. */
-   validationExceptionText?: string;
-
-   /** Configuration of the toolitp used to indicate validation errors. */
-   errorTooltip?: Cx.Config;
-
-   /** Tooltip configuration. */
-   tooltip?: Cx.StringProp | Cx.StructuredProp;
-
-   /** Indicates that `help` should be separated from the input with a whitespace. Default is `true`. */
-   helpSpacer?: boolean;
-
-   /**
-    * If set to `true` top level element will get additional CSS class indicating that input is focused.
-    * Used for adding special effects on focus. Default is `false`.
-    */
-   trackFocus?: boolean;
-
-   /** Custom tab index */
-   tabIndex?: Cx.StringProp;
-
-   /**
-    * Additional content to be displayed next to the field.
-    * This is commonly used for presenting additional information or validation errors.
-    */
-   help?: string | Cx.Config;
-
-   /** Custom validation function. */
-   onValidate?: string | ((value, instance: Instance, validationParams) => any);
-
-   /** Validation parameters to be passed to the validation function. */
-   validationParams?: Cx.Config;
-
-   onValidationException?: string | ((error: any, instance: Instance) => void);
-
-   /** Value to be set in the store if the field is empty. Default value is null. */
-   emptyValue?: any;
-
-   /** Additional CSS style to be passed to the label object. */
-   labelStyle?: Cx.StyleProp;
-
-   /** Additional CSS class to be passed to the label object. */
-   labelClass?: Cx.ClassProp;
-}
-
-export class Field extends Cx.Widget<FieldProps> {}
+import * as Cx from "../../core";
+import { Instance } from "../../ui";
+
+export interface FieldProps extends Cx.StyledContainerProps {
+   /** Field label. For advanced use cases. */
+   label?: Cx.StringProp | Cx.Config;
+
+   /** Set to `material` to use custom label placement instruction. Used in Material theme to implement animated labels. */
+   labelPlacement?: "material";
+
+   /** Set to `material` to use custom help placement instruction. Used in Material theme to implement absolutely positioned validation messages. */
+   helpPlacement?: "material";
+
+   /* Deprecated */
+   labelWidth?: any;
+
+   /** Either `view` or `edit` (default). In `view` mode, the field is displayed as plain text. */
+   mode?: Cx.Prop<"view" | "edit">;
+
+   /** Set to `true` to switch to widget view mode. Same as `mode="view". Default is false. */
+   viewMode?: Cx.BooleanProp;
+
+   id?: Cx.Prop<string | number>;
+
+   /** Used for validation. If error evaluates to non-null, the field is marked in red. */
+   error?: Cx.StringProp;
+
+   /** Style object applied to the input element. Used for setting visual elements, such as borders and backgrounds. */
+   inputStyle?: Cx.StyleProp;
+
+   /** Additional CSS class applied to the input element. Used for setting visual elements, such as borders and backgrounds. */
+   inputClass?: Cx.ClassProp;
+
+   /** Additional attributes that should be rendered on the input element. E.g. inputAttrs={{ autoComplete: "off" }}. */
+   inputAttrs?: Cx.Config;
+
+   /** Text to be rendered in view mode when the field is empty. */
+   emptyText?: Cx.StringProp;
+
+   /** Set to `true` to make error indicators visible in pristine state. By default, validation errors are not shown until the user visits the field. */
+   visited?: Cx.BooleanProp;
+
+   /** Set to `true` to automatically focus the field, after it renders for the first time. */
+   autoFocus?: Cx.BooleanProp;
+
+   /** Defines how to present validation errors. Default mode is `tooltip`. Other options are `help` and `help-block`. */
+   validationMode?: "tooltip" | "help" | "help-block";
+
+   /** Defaults to `false`. Set to `true` to disable the field. */
+   disabled?: Cx.BooleanProp;
+
+   /** Defaults to `false`. Used to make the field required. */
+   required?: Cx.BooleanProp;
+
+   /** Renamed to suppressErrorsUntilVisited. Used to indicate that required fields should not be marked as invalid before the user visits them. */
+   suppressErrorTooltipsUntilVisited?: boolean;
+
+   /** Error message used to indicate that field is required. */
+   requiredText?: string;
+
+   /** Append asterisk to the label to indicate a required field. */
+   asterisk?: boolean;
+
+   /** Text displayed to the user to indicate that server-side validation is in progress. */
+   validatingText?: string;
+
+   /** Text displayed to the user to indicate that server-side validation has thrown an exception. */
+   validationExceptionText?: string;
+
+   /** Configuration of the toolitp used to indicate validation errors. */
+   errorTooltip?: Cx.Config;
+
+   /** Tooltip configuration. */
+   tooltip?: Cx.StringProp | Cx.StructuredProp;
+
+   /** Indicates that `help` should be separated from the input with a whitespace. Default is `true`. */
+   helpSpacer?: boolean;
+
+   /**
+    * If set to `true` top level element will get additional CSS class indicating that input is focused.
+    * Used for adding special effects on focus. Default is `false`.
+    */
+   trackFocus?: boolean;
+
+   /** Custom tab index */
+   tabIndex?: Cx.StringProp;
+
+   /**
+    * Additional content to be displayed next to the field.
+    * This is commonly used for presenting additional information or validation errors.
+    */
+   help?: string | Cx.Config;
+
+   /** Custom validation function. */
+   onValidate?: string | ((value, instance: Instance, validationParams) => any);
+
+   /** Validation parameters to be passed to the validation function. */
+   validationParams?: Cx.Config;
+
+   onValidationException?: string | ((error: any, instance: Instance) => void);
+
+   /** Value to be set in the store if the field is empty. Default value is null. */
+   emptyValue?: any;
+
+   /** Additional CSS style to be passed to the label object. */
+   labelStyle?: Cx.StyleProp;
+
+   /** Additional CSS class to be passed to the label object. */
+   labelClass?: Cx.ClassProp;
+}
+
+export class Field extends Cx.Widget<FieldProps> {}