cx 24.7.2 → 24.7.4

package/src/widgets/form/FieldIcon.js

@@ -1,42 +1,42 @@
-import { Widget } from "../../ui/Widget";
-import { Icon } from "../Icon";
-import { tooltipMouseLeave, tooltipMouseMove } from "../overlay/tooltip-ops";
-
-export class FieldIcon extends Widget {
-   declareData(...args) {
-      super.declareData(...args, {
-         name: undefined,
-      });
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-      if (!data.name) return null;
-
-      let onClick, onMouseMove, onMouseLeave;
-
-      if (this.onClick)
-         onClick = (e) => {
-            instance.invoke("onClick", e, instance);
-         };
-
-      if (this.tooltip) {
-         onMouseLeave = (e) => {
-            tooltipMouseLeave(e, instance, this.tooltip);
-         };
-         onMouseMove = (e) => {
-            tooltipMouseMove(e, instance, this.tooltip);
-         };
-      }
-
-      return Icon.render(data.name, {
-         className: data.classNames,
-         style: data.style,
-         onClick,
-         onMouseMove,
-         onMouseLeave,
-      });
-   }
-}
-
-FieldIcon.prototype.styled = true;
+import { Widget } from "../../ui/Widget";
+import { Icon } from "../Icon";
+import { tooltipMouseLeave, tooltipMouseMove } from "../overlay/tooltip-ops";
+
+export class FieldIcon extends Widget {
+   declareData(...args) {
+      super.declareData(...args, {
+         name: undefined,
+      });
+   }
+
+   render(context, instance, key) {
+      let { data } = instance;
+      if (!data.name) return null;
+
+      let onClick, onMouseMove, onMouseLeave;
+
+      if (this.onClick)
+         onClick = (e) => {
+            instance.invoke("onClick", e, instance);
+         };
+
+      if (this.tooltip) {
+         onMouseLeave = (e) => {
+            tooltipMouseLeave(e, instance, this.tooltip);
+         };
+         onMouseMove = (e) => {
+            tooltipMouseMove(e, instance, this.tooltip);
+         };
+      }
+
+      return Icon.render(data.name, {
+         className: data.classNames,
+         style: data.style,
+         onClick,
+         onMouseMove,
+         onMouseLeave,
+      });
+   }
+}
+
+FieldIcon.prototype.styled = true;

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

@@ -1,10 +1,10 @@
-import * as Cx from '../../core';
-import { ValidationGroupProps } from './ValidationGroup';
-
-export interface HelpTextProps extends Cx.HtmlElementProps {
-
-   /** Base CSS class to be applied to the field. Defaults to `helptext`. */
-   baseClass?: string
-}
-
-export class HelpText extends Cx.Widget<HelpTextProps> {}
+import * as Cx from '../../core';
+import { ValidationGroupProps } from './ValidationGroup';
+
+export interface HelpTextProps extends Cx.HtmlElementProps {
+
+   /** Base CSS class to be applied to the field. Defaults to `helptext`. */
+   baseClass?: string
+}
+
+export class HelpText extends Cx.Widget<HelpTextProps> {}

package/src/widgets/form/HelpText.js

@@ -1,9 +1,9 @@
-import {HtmlElement} from '../HtmlElement';
-import {Widget} from '../../ui/Widget';
-
-export class HelpText extends HtmlElement {}
-
-HelpText.prototype.tag = 'span';
-HelpText.prototype.baseClass = 'helptext';
-
-Widget.alias('help-text', HelpText);
+import {HtmlElement} from '../HtmlElement';
+import {Widget} from '../../ui/Widget';
+
+export class HelpText extends HtmlElement {}
+
+HelpText.prototype.tag = 'span';
+HelpText.prototype.baseClass = 'helptext';
+
+Widget.alias('help-text', HelpText);

package/src/widgets/form/HelpText.scss

@@ -1,23 +1,23 @@
-
-@mixin cx-helptext(
-   $name: 'helptext',
-   $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} {
-      font-size: smaller;
-      opacity: 0.8;
-
-      &.#{$mod}block {
-         display: block;
-      }
-   }
-}
-
-@if (cx-should-include('cx/widgets/HelpText')) {
-   @include cx-helptext();
-}
+
+@mixin cx-helptext(
+   $name: 'helptext',
+   $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} {
+      font-size: smaller;
+      opacity: 0.8;
+
+      &.#{$mod}block {
+         display: block;
+      }
+   }
+}
+
+@if (cx-should-include('cx/widgets/HelpText')) {
+   @include cx-helptext();
+}

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

@@ -1,23 +1,23 @@
-import * as Cx from "../../core";
-
-interface LabelProps extends Cx.HtmlElementProps {
-   /** Used in combination with `asterisk` to indicate required fields. */
-   required?: Cx.BooleanProp;
-
-   /** Set to true to disable the label. */
-   disabled?: Cx.BooleanProp;
-
-   /** Id of the field. */
-   htmlFor?: Cx.StringProp;
-
-   /** Base CSS class to be applied to the element. No class is applied by default. */
-   baseClass?: string;
-
-   /** Set to `true` to add red asterisk for required fields. */
-   asterisk?: Cx.BooleanProp;
-
-   /** Name of the HTML element to be rendered. Default is `div`. */
-   tag?: string;
-}
-
-export class Label extends Cx.Widget<LabelProps> {}
+import * as Cx from "../../core";
+
+interface LabelProps extends Cx.HtmlElementProps {
+   /** Used in combination with `asterisk` to indicate required fields. */
+   required?: Cx.BooleanProp;
+
+   /** Set to true to disable the label. */
+   disabled?: Cx.BooleanProp;
+
+   /** Id of the field. */
+   htmlFor?: Cx.StringProp;
+
+   /** Base CSS class to be applied to the element. No class is applied by default. */
+   baseClass?: string;
+
+   /** Set to `true` to add red asterisk for required fields. */
+   asterisk?: Cx.BooleanProp;
+
+   /** Name of the HTML element to be rendered. Default is `div`. */
+   tag?: string;
+}
+
+export class Label extends Cx.Widget<LabelProps> {}

package/src/widgets/form/Label.js

@@ -1,89 +1,89 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { HtmlElement } from "../HtmlElement";
-import { FocusManager } from "../../ui/FocusManager";
-import { isArray } from "../../util/isArray";
-import { coalesce } from "../../util/coalesce";
-
-export class Label extends HtmlElement {
-   declareData() {
-      super.declareData(...arguments, {
-         required: undefined,
-         disabled: undefined,
-         htmlFor: undefined,
-         asterisk: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         disabled: data.disabled,
-      };
-      data._disabled = data.disabled;
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      let { data } = instance;
-
-      if (!data.htmlFor) data.htmlFor = context.lastFieldId;
-
-      data.disabled = data.stateMods.disabled = coalesce(
-         context.parentStrict ? context.parentDisabled : null,
-         data._disabled,
-         context.parentDisabled
-      );
-
-      data.asterisk = context.parentAsterisk || data.asterisk;
-
-      if (instance.cache("disabled", data.disabled) || instance.cache("asterisk", data.asterisk)) {
-         instance.markShouldUpdate(context);
-         this.prepareCSS(context, instance);
-      }
-
-      super.explore(context, instance);
-   }
-
-   isValidHtmlAttribute(attrName) {
-      switch (attrName) {
-         case "asterisk":
-         case "required":
-            return false;
-      }
-      return super.isValidHtmlAttribute(attrName);
-   }
-
-   attachProps(context, instance, props) {
-      super.attachProps(context, instance, props);
-
-      let { data } = instance;
-
-      if (data.htmlFor) {
-         props.htmlFor = data.htmlFor;
-
-         if (!props.onClick)
-            props.onClick = () => {
-               //additional focus for LookupFields which are not input based
-               let el = document.getElementById(instance.data.htmlFor);
-               if (el) FocusManager.focusFirst(el);
-            };
-      }
-
-      if (!props.id && data.htmlFor) props.id = `${data.htmlFor}-label`;
-
-      if (data.required && data.asterisk) {
-         if (!isArray(props.children)) props.children = [props.children];
-         props.children.push(" ");
-         props.children.push(
-            <span key="asterisk" className={this.CSS.element(this.baseClass, "asterisk")}>
-               *
-            </span>
-         );
-      }
-   }
-}
-
-Label.prototype.baseClass = "label";
-Label.prototype.tag = "label";
-Label.prototype.asterisk = false;
+import { Widget, VDOM } from "../../ui/Widget";
+import { HtmlElement } from "../HtmlElement";
+import { FocusManager } from "../../ui/FocusManager";
+import { isArray } from "../../util/isArray";
+import { coalesce } from "../../util/coalesce";
+
+export class Label extends HtmlElement {
+   declareData() {
+      super.declareData(...arguments, {
+         required: undefined,
+         disabled: undefined,
+         htmlFor: undefined,
+         asterisk: undefined,
+      });
+   }
+
+   prepareData(context, instance) {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         disabled: data.disabled,
+      };
+      data._disabled = data.disabled;
+      super.prepareData(context, instance);
+   }
+
+   explore(context, instance) {
+      let { data } = instance;
+
+      if (!data.htmlFor) data.htmlFor = context.lastFieldId;
+
+      data.disabled = data.stateMods.disabled = coalesce(
+         context.parentStrict ? context.parentDisabled : null,
+         data._disabled,
+         context.parentDisabled
+      );
+
+      data.asterisk = context.parentAsterisk || data.asterisk;
+
+      if (instance.cache("disabled", data.disabled) || instance.cache("asterisk", data.asterisk)) {
+         instance.markShouldUpdate(context);
+         this.prepareCSS(context, instance);
+      }
+
+      super.explore(context, instance);
+   }
+
+   isValidHtmlAttribute(attrName) {
+      switch (attrName) {
+         case "asterisk":
+         case "required":
+            return false;
+      }
+      return super.isValidHtmlAttribute(attrName);
+   }
+
+   attachProps(context, instance, props) {
+      super.attachProps(context, instance, props);
+
+      let { data } = instance;
+
+      if (data.htmlFor) {
+         props.htmlFor = data.htmlFor;
+
+         if (!props.onClick)
+            props.onClick = () => {
+               //additional focus for LookupFields which are not input based
+               let el = document.getElementById(instance.data.htmlFor);
+               if (el) FocusManager.focusFirst(el);
+            };
+      }
+
+      if (!props.id && data.htmlFor) props.id = `${data.htmlFor}-label`;
+
+      if (data.required && data.asterisk) {
+         if (!isArray(props.children)) props.children = [props.children];
+         props.children.push(" ");
+         props.children.push(
+            <span key="asterisk" className={this.CSS.element(this.baseClass, "asterisk")}>
+               *
+            </span>
+         );
+      }
+   }
+}
+
+Label.prototype.baseClass = "label";
+Label.prototype.tag = "label";
+Label.prototype.asterisk = false;

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,9 +1,9 @@
-import * as Cx from "../../core";
-import { FieldGroupProps } from "./FieldGroup";
-
-interface LabeledContainerProps extends FieldGroupProps {
-   /** The label. */
-   label?: Cx.StringProp | Cx.Config;
-}
-
-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;
+}
+
+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);