cx 24.7.5 → 24.8.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?: Cx.BooleanProp;
-
-   /** 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?: Cx.BooleanProp;
+
+   /** 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> {}

package/src/widgets/form/Field.scss

@@ -1,162 +1,162 @@
-@mixin cxb-field($besm, $state-style-map, $input: true, $box: false, $width: null) {
-   position: relative;
-   display: inline-block;
-   box-sizing: border-box;
-
-   $line-height: cx-get-state-rule($state-style-map, default, "line-height", 1.2em);
-   $padding: cx-get-state-rule($state-style-map, default, "padding", 0);
-   $border-width: cx-get-state-rule($state-style-map, default, "border-width", 1px);
-
-   @if $input {
-      width: $width;
-      line-height: 0;
-      height: cx-calc(
-         $line-height,
-         cx-top($padding),
-         cx-bottom($padding),
-         cx-top($border-width),
-         cx-bottom($border-width)
-      );
-
-      //font: cx-get-state-rule($state-style-map, default, 'font');
-      //font-size: cx-get-state-rule($state-style-map, default, 'font-size');
-      //
-      //height: calc(#{$line-height} + #{cx-top($padding) + cx-bottom($padding)} + #{cx-top($border-width) + cx-bottom($border-width)});
-   }
-
-   @if ($box) {
-      line-height: $line-height;
-      padding: $padding;
-      border-width: $border-width;
-      border-style: solid;
-      border-color: transparent;
-
-      //other optional rules which could affect height
-      font: cx-get-state-rule($state-style-map, default, "font");
-      font-size: cx-get-state-rule($state-style-map, default, "font-size");
-      height: cx-get-state-rule($state-style-map, default, "height");
-   }
-
-   $state: map-get($besm, state);
-
-   &.#{$state}view-mode {
-      line-height: $line-height;
-      padding: $padding;
-      border-width: $border-width;
-      border-style: solid;
-      border-color: transparent;
-   }
-}
-
-@mixin cxe-field-input($besm, $state-style-map, $overrides: null, $placeholder: null, $width: 100%, $input: true) {
-   $state: map-get($besm, state);
-
-   $styles: cx-deep-map-merge($state-style-map, $overrides);
-
-   $line-height: cx-get-state-rule($styles, default, "line-height", 1.2em);
-   $padding: cx-get-state-rule($styles, default, "padding", 0);
-   $border-width: cx-get-state-rule($styles, default, "border-width", 1px);
-
-   box-sizing: border-box;
-
-   @if $input {
-      width: $width;
-      height: 100%; //cx-calc($line-height, cx-top($padding), cx-bottom($padding), cx-top($border-width), cx-bottom($border-width));
-
-      @if ($cx-use-box-line-height-fix) {
-         //100% line-height fix - inputs work better in all browser, especially in Firefox
-         $styles: cx-deep-map-merge(
-            $styles,
-            (
-               default: (
-                  line-height: cx-calc($line-height, cx-top($padding), cx-bottom($padding)),
-                  padding: 0 cx-right($padding) 0 cx-left($padding),
-               ),
-            )
-         );
-      }
-   }
-
-   @include cx-add-state-rules($styles, default);
-
-   &:hover {
-      @include cx-add-state-rules($styles, hover);
-   }
-
-   &:focus {
-      @include cx-add-state-rules($styles, focus);
-   }
-
-   @if $input {
-      &:disabled {
-         @include cx-add-state-rules($styles, disabled);
-      }
-
-      &:read-only {
-         @include cx-add-state-rules($styles, read-only);
-      }
-   } @else {
-      .#{$state}disabled > & {
-         @include cx-add-state-rules($styles, disabled);
-      }
-   }
-
-   .#{$state}error > & {
-      @include cx-add-state-rules($styles, error);
-
-      &:focus {
-         @include cx-add-state-rules($styles, error-focus);
-      }
-   }
-
-   @if $input {
-      &::-webkit-input-placeholder {
-         @include cx-add-rules($placeholder);
-      }
-
-      &::-moz-placeholder {
-         @include cx-add-rules($placeholder);
-      }
-
-      &:-ms-input-placeholder {
-         @include cx-add-rules($placeholder);
-      }
-
-      &::-ms-clear {
-         width: 0;
-         height: 0;
-      }
-   }
-}
-
-@mixin cxe-field-button($besm, $state-style-map) {
-   display: block;
-   position: absolute;
-
-   @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);
-   }
-}
-
-@mixin cxe-field-button-icon($besm, $size) {
-   display: block;
-   position: absolute;
-   left: 50%;
-   top: 50%;
-   margin-top: -$size * 0.5;
-   margin-left: -$size * 0.5;
-   height: $size;
-   width: $size;
-   line-height: $size;
-   text-align: center;
-}
-
-@mixin cxe-field-empty-text($empty-text) {
-   @include cx-add-rules($empty-text);
-}
+@mixin cxb-field($besm, $state-style-map, $input: true, $box: false, $width: null) {
+   position: relative;
+   display: inline-block;
+   box-sizing: border-box;
+
+   $line-height: cx-get-state-rule($state-style-map, default, "line-height", 1.2em);
+   $padding: cx-get-state-rule($state-style-map, default, "padding", 0);
+   $border-width: cx-get-state-rule($state-style-map, default, "border-width", 1px);
+
+   @if $input {
+      width: $width;
+      line-height: 0;
+      height: cx-calc(
+         $line-height,
+         cx-top($padding),
+         cx-bottom($padding),
+         cx-top($border-width),
+         cx-bottom($border-width)
+      );
+
+      //font: cx-get-state-rule($state-style-map, default, 'font');
+      //font-size: cx-get-state-rule($state-style-map, default, 'font-size');
+      //
+      //height: calc(#{$line-height} + #{cx-top($padding) + cx-bottom($padding)} + #{cx-top($border-width) + cx-bottom($border-width)});
+   }
+
+   @if ($box) {
+      line-height: $line-height;
+      padding: $padding;
+      border-width: $border-width;
+      border-style: solid;
+      border-color: transparent;
+
+      //other optional rules which could affect height
+      font: cx-get-state-rule($state-style-map, default, "font");
+      font-size: cx-get-state-rule($state-style-map, default, "font-size");
+      height: cx-get-state-rule($state-style-map, default, "height");
+   }
+
+   $state: map-get($besm, state);
+
+   &.#{$state}view-mode {
+      line-height: $line-height;
+      padding: $padding;
+      border-width: $border-width;
+      border-style: solid;
+      border-color: transparent;
+   }
+}
+
+@mixin cxe-field-input($besm, $state-style-map, $overrides: null, $placeholder: null, $width: 100%, $input: true) {
+   $state: map-get($besm, state);
+
+   $styles: cx-deep-map-merge($state-style-map, $overrides);
+
+   $line-height: cx-get-state-rule($styles, default, "line-height", 1.2em);
+   $padding: cx-get-state-rule($styles, default, "padding", 0);
+   $border-width: cx-get-state-rule($styles, default, "border-width", 1px);
+
+   box-sizing: border-box;
+
+   @if $input {
+      width: $width;
+      height: 100%; //cx-calc($line-height, cx-top($padding), cx-bottom($padding), cx-top($border-width), cx-bottom($border-width));
+
+      @if ($cx-use-box-line-height-fix) {
+         //100% line-height fix - inputs work better in all browser, especially in Firefox
+         $styles: cx-deep-map-merge(
+            $styles,
+            (
+               default: (
+                  line-height: cx-calc($line-height, cx-top($padding), cx-bottom($padding)),
+                  padding: 0 cx-right($padding) 0 cx-left($padding),
+               ),
+            )
+         );
+      }
+   }
+
+   @include cx-add-state-rules($styles, default);
+
+   &:hover {
+      @include cx-add-state-rules($styles, hover);
+   }
+
+   &:focus {
+      @include cx-add-state-rules($styles, focus);
+   }
+
+   @if $input {
+      &:disabled {
+         @include cx-add-state-rules($styles, disabled);
+      }
+
+      &:read-only {
+         @include cx-add-state-rules($styles, read-only);
+      }
+   } @else {
+      .#{$state}disabled > & {
+         @include cx-add-state-rules($styles, disabled);
+      }
+   }
+
+   .#{$state}error > & {
+      @include cx-add-state-rules($styles, error);
+
+      &:focus {
+         @include cx-add-state-rules($styles, error-focus);
+      }
+   }
+
+   @if $input {
+      &::-webkit-input-placeholder {
+         @include cx-add-rules($placeholder);
+      }
+
+      &::-moz-placeholder {
+         @include cx-add-rules($placeholder);
+      }
+
+      &:-ms-input-placeholder {
+         @include cx-add-rules($placeholder);
+      }
+
+      &::-ms-clear {
+         width: 0;
+         height: 0;
+      }
+   }
+}
+
+@mixin cxe-field-button($besm, $state-style-map) {
+   display: block;
+   position: absolute;
+
+   @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);
+   }
+}
+
+@mixin cxe-field-button-icon($besm, $size) {
+   display: block;
+   position: absolute;
+   left: 50%;
+   top: 50%;
+   margin-top: -$size * 0.5;
+   margin-left: -$size * 0.5;
+   height: $size;
+   width: $size;
+   line-height: $size;
+   text-align: center;
+}
+
+@mixin cxe-field-empty-text($empty-text) {
+   @include cx-add-rules($empty-text);
+}

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

@@ -1,6 +1,6 @@
-import * as Cx from '../../core';
-import { ValidationGroupProps } from './ValidationGroup';
-
-export interface FieldGroupProps extends ValidationGroupProps {}
-
-export class FieldGroup extends Cx.Widget<FieldGroupProps> {}
+import * as Cx from '../../core';
+import { ValidationGroupProps } from './ValidationGroup';
+
+export interface FieldGroupProps extends ValidationGroupProps {}
+
+export class FieldGroup extends Cx.Widget<FieldGroupProps> {}

package/src/widgets/form/FieldGroup.js

@@ -1,6 +1,6 @@
-import {Widget} from '../../ui/Widget';
-import {ValidationGroup} from './ValidationGroup';
-
-export class FieldGroup extends ValidationGroup {}
-
+import {Widget} from '../../ui/Widget';
+import {ValidationGroup} from './ValidationGroup';
+
+export class FieldGroup extends ValidationGroup {}
+
 Widget.alias('field-group', FieldGroup);