cx 26.2.2 → 26.2.3

package/src/widgets/form/Field.variables.scss

@@ -0,0 +1,46 @@
+@use "../../util/scss/defaults.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../box.scss" as *;
+
+$cx-use-box-line-height-fix: true !default;
+
+// Appearance
+$cx-default-input-font-family: $cx-default-box-font-family !default;
+$cx-default-input-font-size: $cx-default-box-font-size !default;
+$cx-default-input-border-color: $cx-default-border-color !default;
+$cx-default-input-border-radius: $cx-default-border-radius !default;
+$cx-default-input-background-color: white !default;
+$cx-default-input-color: black !default;
+$cx-default-input-placeholder-color: $cx-default-empty-text-color !default;
+$cx-default-input-width: 180px !default;
+// Input padding - individual values for full control
+$cx-default-input-padding: $cx-default-box-padding !default;
+$cx-default-input-padding-top: cx-top($cx-default-input-padding) !default;
+$cx-default-input-padding-right: cx-right($cx-default-input-padding) !default;
+$cx-default-input-padding-bottom: cx-bottom($cx-default-input-padding) !default;
+$cx-default-input-padding-left: cx-left($cx-default-input-padding) !default;
+
+$cx-default-input-icon-size: $cx-default-icon-size !default;
+
+$cx-default-radio-size: 14px !default;
+
+// Tool
+$cx-default-input-tool-size: $cx-default-box-line-height !default;
+$cx-default-input-left-tool-spacing: $cx-default-box-padding-left !default;
+$cx-default-input-right-tool-spacing: 1px !default;
+$cx-default-input-left-tool-size: $cx-default-input-tool-size !default;
+$cx-default-input-left-tool-left: cx-calc(
+   $cx-default-input-padding-top,
+   $cx-default-box-border-width-left
+) !default;
+$cx-default-input-left-tool-border-radius: null !default;
+$cx-default-input-right-tool-right: cx-calc(
+   $cx-default-input-padding-top,
+   $cx-default-box-border-width-right
+) !default;
+
+// Clear Icon
+$cx-default-clear-size: $cx-default-input-tool-size !default;
+$cx-default-clear-color: #828282 !default;
+$cx-default-clear-spacing: 1px !default; //additional padding on the left of the clear box

package/src/widgets/form/HelpText.scss

@@ -1,9 +1,12 @@
 @use "sass:map";
+@use "sass:math";
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
 
-@mixin cx-helptext(
-   $name: 'helptext',
-   $besm: $cx-besm
-) {
+@mixin cx-helptext($name: "helptext", $besm: $cx-besm) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $state: map.get($besm, state);
@@ -19,6 +22,6 @@
    }
 }
 
-@if (cx-should-include('cx/widgets/HelpText')) {
+@if (cx-should-include("cx/widgets/HelpText")) {
    @include cx-helptext();
 }

package/src/widgets/form/Label.scss

@@ -1,7 +1,14 @@
 @use "sass:map";
+@use "sass:math";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/include.scss" as *;
 
 @mixin cx-label(
-   $name: 'label',
+   $name: "label",
    $state-style-map: $cx-label-state-style-map,
    $besm: $cx-besm
 ) {
@@ -33,6 +40,6 @@
    }
 }
 
-@if (cx-should-include('cx/widgets/Label')) {
+@if (cx-should-include("cx/widgets/Label")) {
    @include cx-label();
-}
+}

package/src/widgets/form/LookupField.maps.scss

@@ -0,0 +1,26 @@
+@use "../variables" as *;
+@use "./Field.maps.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+
+$cx-input-tag-state-style-map: (
+   default: (
+      font-size: $cx-default-input-tag-font-size,
+      background-color: $cx-default-input-tag-background-color,
+      padding: $cx-default-input-tag-padding,
+      padding-right: cx-calc($cx-default-clear-size, 2px),
+      border-radius: $cx-default-input-tag-border-radius,
+      border-width: $cx-default-button-border-width,
+      border-style: solid,
+      border-color: $cx-default-button-border-color,
+   ),
+) !default;
+
+$cx-input-tag-clear-state-style-map: cx-deep-map-merge(
+   $cx-clear-state-style-map,
+   (
+      default: (
+         right: cx-multiply($cx-default-input-tag-border-radius, 0.125),
+      ),
+   )
+) !default;

package/src/widgets/form/LookupField.scss

@@ -1,4 +1,13 @@
+@use "sass:math";
 @use "sass:map";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "./Field.scss" as *;
 
 @mixin cx-lookupfield(
    $name: "lookupfield",
@@ -19,7 +28,10 @@
    $state: map.get($besm, state);
 
    $padding: cx-get-state-rule($state-style-map, default, padding);
-   $border-radius-offset: round(cx-get-state-rule($tag-state-style-map, default, border-radius) * 0.25);
+   $border-radius-offset: cx-multiply(
+      cx-get-state-rule($tag-state-style-map, default, border-radius),
+      0.25
+   );
 
    .#{$block}#{$name} {
       cursor: pointer;
@@ -41,6 +53,11 @@
             padding-right: cx-right($padding);
          }
       }
+
+      // &::before {
+      //    content: "\200B";
+      //    pointer-events: none;
+      // }
    }
 
    .#{$element}#{$name}-input {
@@ -51,37 +68,60 @@
          $input: false,
          $overrides: (
             default: (
-               height: 100%,
+               width: 100%,
+               display: inline-flex,
                text-overflow: null,
                padding: cx-top($padding)
-                  cx-calc(cx-right($padding), $cx-default-clear-size, $cx-default-input-tag-spacing) cx-bottom($padding)
-                  cx-left($padding),
+                  cx-calc(
+                     cx-right($padding),
+                     $cx-default-clear-size,
+                     $cx-default-input-tag-spacing
+                  )
+                  cx-bottom($padding) cx-left($padding),
             )
          )
       );
 
-      .#{$state}multiple > & {
-         padding: 0 cx-calc(cx-right($padding), $cx-default-clear-size, $cx-default-input-tag-spacing)
-            $cx-default-input-tag-spacing 0;
-         align-items: center;
-         flex-wrap: wrap;
-         display: flex;
-      }
-
       .#{$state}single > & {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
-         display: block;
          flex-basis: 0%;
          flex-grow: 1;
       }
 
       .#{$state}icon > & {
-         padding-left: cx-calc(2 * cx-left($padding), $icon-size);
+         padding-left: cx-calc(
+            cx-left($padding),
+            $cx-default-input-left-tool-size,
+            $cx-default-input-left-tool-spacing
+         );
       }
    }
 
+   .#{$element}#{$name}-tags {
+      display: flex;
+      margin: cx-calc(
+            $cx-default-input-tag-spacing,
+            cx-multiply(cx-top($padding), -1)
+         )
+         cx-calc(
+            $cx-default-input-tag-spacing,
+            cx-multiply(cx-right($padding), -1)
+         )
+         cx-calc(
+            $cx-default-input-tag-spacing,
+            cx-multiply(cx-bottom($padding), -1)
+         )
+         cx-calc(
+            $cx-default-input-tag-spacing,
+            cx-multiply(cx-left($padding), -1)
+         );
+      align-items: center;
+      flex-wrap: wrap;
+      gap: $cx-default-input-tag-spacing;
+   }
+
    .#{$element}#{$name}-tag {
       display: inline-block;
       position: relative;
@@ -101,16 +141,6 @@
 
    .#{$element}#{$name}-placeholder {
       color: $cx-default-input-placeholder-color;
-
-      .#{$block}#{$name}.#{$state}multiple & {
-         display: inline-block;
-         margin: $cx-default-input-tag-spacing 0 0 $cx-default-input-tag-spacing;
-         box-sizing: border-box;
-         padding: cx-calc(cx-top($cx-default-input-padding), -$cx-default-input-tag-spacing)
-            cx-calc(cx-right($cx-default-input-padding), -$cx-default-input-tag-spacing)
-            cx-calc(cx-bottom($cx-default-input-padding), -$cx-default-input-tag-spacing)
-            cx-calc(cx-left($cx-default-input-padding), -$cx-default-input-tag-spacing);
-      }
    }
 
    .#{$element}#{$name}-tag-value {

package/src/widgets/form/LookupField.tsx

@@ -231,7 +231,7 @@ interface LookupFieldSingleProps {
   /** Single selection (default). */
   multiple?: false;
   /** Selected value. */
-  value?: Prop<number | string>;
+  value?: Prop<number | string | null>;
   /** Text associated with the selection. */
   text?: StringProp;
 }
@@ -1067,30 +1067,34 @@ class LookupComponent extends VDOM.Component<
           widget.onGetRecordDisplayText ??
           ((record: Record<string, any>) =>
             record[widget.valueTextField] as string);
-        text = data.records.map((v, i) => (
-          <div
-            key={i}
-            className={CSS.element(baseClass, "tag", {
-              readonly: readOnly,
-            })}
-          >
-            <span className={CSS.element(baseClass, "tag-value")}>
-              {valueTextFormatter(v, instance)}
-            </span>
-            {!readOnly && (
+        text = (
+          <div className={CSS.element(baseClass, "tags")}>
+            {data.records.map((v, i) => (
               <div
-                className={CSS.element(baseClass, "tag-clear")}
-                onMouseDown={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                }}
-                onClick={(e) => this.onClearClick(e, v)}
+                key={i}
+                className={CSS.element(baseClass, "tag", {
+                  readonly: readOnly,
+                })}
               >
-                <ClearIcon className={CSS.element(baseClass, "icon")} />
+                <span className={CSS.element(baseClass, "tag-value")}>
+                  {valueTextFormatter(v, instance)}
+                </span>
+                {!readOnly && (
+                  <div
+                    className={CSS.element(baseClass, "tag-clear")}
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                    }}
+                    onClick={(e) => this.onClearClick(e, v)}
+                  >
+                    <ClearIcon className={CSS.element(baseClass, "icon")} />
+                  </div>
+                )}
               </div>
-            )}
+            ))}
           </div>
-        ));
+        );
       } else {
         text = this.getPlaceholder(data.placeholder);
       }

package/src/widgets/form/MonthField.scss

@@ -1,7 +1,17 @@
+@use "sass:math";
 @use "sass:map";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "./Field.scss" as *;
 
 @mixin cx-monthfield(
-   $name: 'monthfield',
+   $name: "monthfield",
    $state-style-map: $cx-std-field-state-style-map,
    $placeholder: $cx-input-placeholder,
    $empty-text: $cx-empty-text,
@@ -17,14 +27,10 @@
    $state: map.get($besm, state);
 
    .#{$block}#{$name} {
-      @include cxb-field(
-         $besm,
-         $state-style-map,
-         $width: $width
-      );
+      @include cxb-field($besm, $state-style-map, $width: $width);
    }
 
-   $padding: cx-get-state-rule($state-style-map, default, 'padding');
+   $padding: cx-get-state-rule($state-style-map, default, "padding");
 
    .#{$element}#{$name}-input {
       @include cxe-field-input(
@@ -33,7 +39,18 @@
          $placeholder: $placeholder,
          $overrides: (
             default: (
-               padding: cx-top($padding) cx-calc(cx-right($padding), $cx-default-clear-size) cx-bottom($padding) cx-calc(2 * cx-left($padding), $icon-size)
+               padding: cx-top($padding)
+                  cx-calc(
+                     cx-right($padding),
+                     $cx-default-clear-size,
+                     $cx-default-clear-spacing
+                  )
+                  cx-bottom($padding)
+                  cx-calc(
+                     cx-left($padding),
+                     $cx-default-input-left-tool-size,
+                     $cx-default-input-left-tool-spacing
+                  ),
             )
          )
       );
@@ -43,30 +60,36 @@
       @include cxe-field-button($besm, $clear-state-style-map);
 
       .#{$state}focus > & {
-        @include cx-add-state-rules($clear-state-style-map, focus);
+         @include cx-add-state-rules($clear-state-style-map, focus);
       }
-       .#{$state}error > & {
-        @include cx-add-state-rules($clear-state-style-map, error);
+      .#{$state}error > & {
+         @include cx-add-state-rules($clear-state-style-map, error);
       }
    }
 
    .#{$element}#{$name}-left-icon {
-      @include cxe-field-button($besm, cx-deep-map-merge($left-icon-state-style-map, (
-         default: (
-            cursor: pointer
+      @include cxe-field-button(
+         $besm,
+         cx-deep-map-merge(
+            $left-icon-state-style-map,
+            (
+               default: (
+                  cursor: pointer,
+               ),
+            )
          )
-      )));
+      );
 
       .#{$state}disabled > & {
-        @include cx-add-state-rules($state-style-map, disabled);
-        border-width: 0;
+         @include cx-add-state-rules($state-style-map, disabled);
+         border-width: 0;
       }
 
       .#{$state}focus > & {
-        @include cx-add-state-rules($left-icon-state-style-map, focus);
+         @include cx-add-state-rules($left-icon-state-style-map, focus);
       }
-       .#{$state}error > & {
-        @include cx-add-state-rules($left-icon-state-style-map, error);
+      .#{$state}error > & {
+         @include cx-add-state-rules($left-icon-state-style-map, error);
       }
    }
 
@@ -74,14 +97,14 @@
       @include cxe-field-button($besm, $right-icon-state-style-map);
 
       .#{$state}disabled > & {
-        @include cx-add-state-rules($state-style-map, disabled);
-        border-width: 0;
+         @include cx-add-state-rules($state-style-map, disabled);
+         border-width: 0;
       }
       .#{$state}focus > & {
-        @include cx-add-state-rules($right-icon-state-style-map, focus);
+         @include cx-add-state-rules($right-icon-state-style-map, focus);
       }
       .#{$state}error > & {
-        @include cx-add-state-rules($right-icon-state-style-map, error);
+         @include cx-add-state-rules($right-icon-state-style-map, error);
       }
    }
 
@@ -94,7 +117,6 @@
    }
 }
 
-@if (cx-should-include('cx/widgets/MonthField')) {
+@if (cx-should-include("cx/widgets/MonthField")) {
    @include cx-monthfield();
 }
-