cx 22.12.1 → 22.12.2

package/src/widgets/form/Slider.scss

@@ -1,121 +1,121 @@
-
-@mixin cx-slider(
-   $name: 'slider',
-   $state-style-map: $cx-input-state-style-map,
-   $styles: $cx-slider-handle-styles,
-   $width: $cx-default-input-width,
-   $size: $cx-default-slider-handle-size,
-   $axis-size: $cx-default-slider-axis-size,
-   $axis-background-color: $cx-default-slider-axis-background-color,
-   $range-background-color: $cx-default-slider-range-background-color,
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   .#{$block}#{$name} {
-      @include cxb-field($besm, $state-style-map, $input: false, $box: true);
-
-      width: $width;
-
-      &.#{$state}vertical {
-         width: 28px;
-         height: $width;
-      }
-
-      &.#{$state}disabled {
-         pointer-events: none;
-         opacity: 0.5;
-      }
-
-      user-select: none;
-   }
-
-   .#{$element}#{$name}-axis {
-
-      position: absolute;
-      background-color: $axis-background-color;
-      border-radius: $size / 2;
-      box-sizing: border-box;
-
-      .#{$block}#{$name}.#{$state}horizontal & {
-         left: $size / 2;
-         right: $size / 2;
-         top: calc(50% - #{$axis-size / 2});
-         height: $axis-size;
-         padding: 0 $axis-size / 2;
-      }
-
-      .#{$block}#{$name}.#{$state}vertical & {
-         top: $size / 2;
-         bottom: $size / 2;
-         width: $axis-size;
-         left: calc(50% - #{$axis-size / 2});
-         padding: $axis-size / 2 0;
-      }
-   }
-
-   .#{$element}#{$name}-space {
-      position: relative;
-      width: 100%;
-      height: 100%;
-   }
-
-   .#{$element}#{$name}-range {
-      position: absolute;
-
-      background-color: $range-background-color;
-      border-radius: $axis-size / 2;
-
-      .#{$block}#{$name}.#{$state}horizontal & {
-         height: 100%;
-      }
-
-      .#{$block}#{$name}.#{$state}vertical & {
-         width: 100%;
-      }
-   }
-
-   .#{$element}#{$name}-handle {
-      position: absolute;
-      box-sizing: border-box;
-      width: $size;
-      height: $size;
-      margin-left: -$size / 2;
-      margin-top: -$size / 2;
-      margin-bottom: -$size / 2;
-      touch-action: none;
-
-      .#{$block}#{$name}.#{$state}horizontal & {
-         left: 0;
-         top: 50%;
-      }
-
-      .#{$block}#{$name}.#{$state}vertical & {
-         left: 50%;
-      }
-
-      @include cx-add-state-rules($styles, default);
-
-      &:hover {
-         @include cx-add-state-rules($styles, hover);
-      }
-
-      &:focus {
-         @include cx-add-state-rules($styles, focus);
-      }
-
-      &[disabled] {
-         @include cx-add-state-rules($styles, disabled);
-      }
-
-      &:active {
-         @include cx-add-state-rules($styles, active);
-      }
-   }
-}
-
-@if (cx-should-include('cx/widgets/Slider')) {
-   @include cx-slider();
-}
+
+@mixin cx-slider(
+   $name: 'slider',
+   $state-style-map: $cx-input-state-style-map,
+   $styles: $cx-slider-handle-styles,
+   $width: $cx-default-input-width,
+   $size: $cx-default-slider-handle-size,
+   $axis-size: $cx-default-slider-axis-size,
+   $axis-background-color: $cx-default-slider-axis-background-color,
+   $range-background-color: $cx-default-slider-range-background-color,
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   .#{$block}#{$name} {
+      @include cxb-field($besm, $state-style-map, $input: false, $box: true);
+
+      width: $width;
+
+      &.#{$state}vertical {
+         width: 28px;
+         height: $width;
+      }
+
+      &.#{$state}disabled {
+         pointer-events: none;
+         opacity: 0.5;
+      }
+
+      user-select: none;
+   }
+
+   .#{$element}#{$name}-axis {
+
+      position: absolute;
+      background-color: $axis-background-color;
+      border-radius: $size / 2;
+      box-sizing: border-box;
+
+      .#{$block}#{$name}.#{$state}horizontal & {
+         left: $size / 2;
+         right: $size / 2;
+         top: calc(50% - #{$axis-size / 2});
+         height: $axis-size;
+         padding: 0 $axis-size / 2;
+      }
+
+      .#{$block}#{$name}.#{$state}vertical & {
+         top: $size / 2;
+         bottom: $size / 2;
+         width: $axis-size;
+         left: calc(50% - #{$axis-size / 2});
+         padding: $axis-size / 2 0;
+      }
+   }
+
+   .#{$element}#{$name}-space {
+      position: relative;
+      width: 100%;
+      height: 100%;
+   }
+
+   .#{$element}#{$name}-range {
+      position: absolute;
+
+      background-color: $range-background-color;
+      border-radius: $axis-size / 2;
+
+      .#{$block}#{$name}.#{$state}horizontal & {
+         height: 100%;
+      }
+
+      .#{$block}#{$name}.#{$state}vertical & {
+         width: 100%;
+      }
+   }
+
+   .#{$element}#{$name}-handle {
+      position: absolute;
+      box-sizing: border-box;
+      width: $size;
+      height: $size;
+      margin-left: -$size / 2;
+      margin-top: -$size / 2;
+      margin-bottom: -$size / 2;
+      touch-action: none;
+
+      .#{$block}#{$name}.#{$state}horizontal & {
+         left: 0;
+         top: 50%;
+      }
+
+      .#{$block}#{$name}.#{$state}vertical & {
+         left: 50%;
+      }
+
+      @include cx-add-state-rules($styles, default);
+
+      &:hover {
+         @include cx-add-state-rules($styles, hover);
+      }
+
+      &:focus {
+         @include cx-add-state-rules($styles, focus);
+      }
+
+      &[disabled] {
+         @include cx-add-state-rules($styles, disabled);
+      }
+
+      &:active {
+         @include cx-add-state-rules($styles, active);
+      }
+   }
+}
+
+@if (cx-should-include('cx/widgets/Slider')) {
+   @include cx-slider();
+}

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

@@ -1,38 +1,38 @@
-import * as Cx from '../../core';
-import { FieldProps } from './Field';
-
-interface SwitchProps extends FieldProps {
-
-   /** Value indicating that switch is on. */
-   on?: Cx.BooleanProp,
-
-   /** Value indicating that switch is off. */
-   off?: Cx.BooleanProp,
-   
-   /** Value indicating that switch is on. */
-   value?: Cx.BooleanProp,
-
-   /** Defaults to `false`. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp,
-
-   /** Text description. */
-   text?: Cx.StringProp,
-
-   /** Style object to be applied on the axis range when the switch is on. */
-   rangeStyle?: Cx.StyleProp,
-   
-   /** Style object to be applied on the switch handle. */
-   handleStyle?: Cx.StyleProp,
-
-   /** Base CSS class to be applied to the field. Defaults to `switch`. */
-   baseClass?: string,
-   
-   /** 
-    * Determines if button should receive focus on mousedown event. 
-    * Default is `false`, which means that focus can be set only using the keyboard `Tab` key. 
-    */
-   focusOnMouseDown?: boolean
-   
-}
-
-export class Switch extends Cx.Widget<SwitchProps> {}
+import * as Cx from '../../core';
+import { FieldProps } from './Field';
+
+interface SwitchProps extends FieldProps {
+
+   /** Value indicating that switch is on. */
+   on?: Cx.BooleanProp,
+
+   /** Value indicating that switch is off. */
+   off?: Cx.BooleanProp,
+   
+   /** Value indicating that switch is on. */
+   value?: Cx.BooleanProp,
+
+   /** Defaults to `false`. Used to make the field read-only. */
+   readOnly?: Cx.BooleanProp,
+
+   /** Text description. */
+   text?: Cx.StringProp,
+
+   /** Style object to be applied on the axis range when the switch is on. */
+   rangeStyle?: Cx.StyleProp,
+   
+   /** Style object to be applied on the switch handle. */
+   handleStyle?: Cx.StyleProp,
+
+   /** Base CSS class to be applied to the field. Defaults to `switch`. */
+   baseClass?: string,
+   
+   /** 
+    * Determines if button should receive focus on mousedown event. 
+    * Default is `false`, which means that focus can be set only using the keyboard `Tab` key. 
+    */
+   focusOnMouseDown?: boolean
+   
+}
+
+export class Switch extends Cx.Widget<SwitchProps> {}

package/src/widgets/form/Switch.js

@@ -1,118 +1,118 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { KeyCode } from "../../util/KeyCode";
-import { parseStyle } from "../../util/parseStyle";
-import { Field, getFieldTooltip } from "./Field";
-import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
-import { preventFocus } from "../../ui/FocusManager";
-import { isDefined } from "../../util/isDefined";
-
-export class Switch extends Field {
-   declareData() {
-      super.declareData(
-         {
-            on: false,
-            off: true,
-            value: undefined,
-            disabled: undefined,
-            enabled: undefined,
-            readOnly: undefined,
-            text: undefined,
-            rangeStyle: {
-               structured: true,
-            },
-            handleStyle: {
-               structured: true,
-            },
-         },
-         ...arguments
-      );
-   }
-
-   isEmpty() {
-      return false;
-   }
-
-   init() {
-      if (isDefined(this.value)) this.on = this.value;
-
-      this.rangeStyle = parseStyle(this.rangeStyle);
-      this.handleStyle = parseStyle(this.handleStyle);
-
-      super.init();
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-
-      if (isDefined(this.off)) data.on = !data.off;
-
-      data.stateMods = {
-         ...data.stateMods,
-         on: data.on,
-         disabled: data.disabled,
-      };
-      super.prepareData(context, instance);
-   }
-
-   renderInput(context, instance, key) {
-      let { data, widget } = instance;
-      let { rangeStyle, handleStyle } = data;
-      let { CSS, baseClass } = this;
-
-      let text = data.text || this.renderChildren(context, instance);
-      let renderTextElement = text?.length != 0;
-
-      return (
-         <div
-            key={key}
-            className={data.classNames}
-            style={data.style}
-            id={data.id}
-            tabIndex={data.disabled ? null : data.tabIndex || 0}
-            onMouseDown={(e) => {
-               e.stopPropagation();
-               if (!this.focusOnMouseDown) preventFocus(e);
-            }}
-            onClick={(e) => {
-               this.toggle(e, instance);
-            }}
-            onKeyDown={(e) => {
-               if (widget.handleKeyDown(e, instance) === false) return;
-               if (e.keyCode == KeyCode.space) {
-                  this.toggle(e, instance);
-               }
-            }}
-            onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
-            onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
-         >
-            {this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
-            &nbsp;
-            <div className={CSS.element(baseClass, "axis")}>
-               <div className={CSS.element(baseClass, "range")} style={parseStyle(rangeStyle)} />
-               <div className={CSS.element(baseClass, "space")}>
-                  <div className={CSS.element(baseClass, "handle")} style={parseStyle(handleStyle)} />
-               </div>
-            </div>
-            {renderTextElement && (
-               <div key="text" className={CSS.element(this.baseClass, "text")}>
-                  {text}
-               </div>
-            )}
-         </div>
-      );
-   }
-
-   toggle(e, instance) {
-      let { data } = instance;
-      if (data.readOnly || data.disabled) return;
-      instance.set("on", !data.on);
-      instance.set("off", data.on);
-      e.preventDefault();
-      e.stopPropagation();
-   }
-}
-
-Switch.prototype.baseClass = "switch";
-Switch.prototype.focusOnMouseDown = false;
-
-Widget.alias("switch", Switch);
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import { KeyCode } from "../../util/KeyCode";
+import { parseStyle } from "../../util/parseStyle";
+import { Field, getFieldTooltip } from "./Field";
+import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
+import { preventFocus } from "../../ui/FocusManager";
+import { isDefined } from "../../util/isDefined";
+
+export class Switch extends Field {
+   declareData() {
+      super.declareData(
+         {
+            on: false,
+            off: true,
+            value: undefined,
+            disabled: undefined,
+            enabled: undefined,
+            readOnly: undefined,
+            text: undefined,
+            rangeStyle: {
+               structured: true,
+            },
+            handleStyle: {
+               structured: true,
+            },
+         },
+         ...arguments
+      );
+   }
+
+   isEmpty() {
+      return false;
+   }
+
+   init() {
+      if (isDefined(this.value)) this.on = this.value;
+
+      this.rangeStyle = parseStyle(this.rangeStyle);
+      this.handleStyle = parseStyle(this.handleStyle);
+
+      super.init();
+   }
+
+   prepareData(context, instance) {
+      let { data } = instance;
+
+      if (isDefined(this.off)) data.on = !data.off;
+
+      data.stateMods = {
+         ...data.stateMods,
+         on: data.on,
+         disabled: data.disabled,
+      };
+      super.prepareData(context, instance);
+   }
+
+   renderInput(context, instance, key) {
+      let { data, widget } = instance;
+      let { rangeStyle, handleStyle } = data;
+      let { CSS, baseClass } = this;
+
+      let text = data.text || this.renderChildren(context, instance);
+      let renderTextElement = text?.length != 0;
+
+      return (
+         <div
+            key={key}
+            className={data.classNames}
+            style={data.style}
+            id={data.id}
+            tabIndex={data.disabled ? null : data.tabIndex || 0}
+            onMouseDown={(e) => {
+               e.stopPropagation();
+               if (!this.focusOnMouseDown) preventFocus(e);
+            }}
+            onClick={(e) => {
+               this.toggle(e, instance);
+            }}
+            onKeyDown={(e) => {
+               if (widget.handleKeyDown(e, instance) === false) return;
+               if (e.keyCode == KeyCode.space) {
+                  this.toggle(e, instance);
+               }
+            }}
+            onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
+            onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
+         >
+            {this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
+            &nbsp;
+            <div className={CSS.element(baseClass, "axis")}>
+               <div className={CSS.element(baseClass, "range")} style={parseStyle(rangeStyle)} />
+               <div className={CSS.element(baseClass, "space")}>
+                  <div className={CSS.element(baseClass, "handle")} style={parseStyle(handleStyle)} />
+               </div>
+            </div>
+            {renderTextElement && (
+               <div key="text" className={CSS.element(this.baseClass, "text")}>
+                  {text}
+               </div>
+            )}
+         </div>
+      );
+   }
+
+   toggle(e, instance) {
+      let { data } = instance;
+      if (data.readOnly || data.disabled) return;
+      instance.set("on", !data.on);
+      instance.set("off", data.on);
+      e.preventDefault();
+      e.stopPropagation();
+   }
+}
+
+Switch.prototype.baseClass = "switch";
+Switch.prototype.focusOnMouseDown = false;
+
+Widget.alias("switch", Switch);