cx 26.2.2 → 26.2.3

package/src/widgets/form/DateTimePicker.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/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 *;
+@use "./Wheel.scss" as *;
 
 @mixin cx-datetimepicker(
-   $name: '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,
@@ -34,7 +44,7 @@
       }
    }
 
-   @include cx-wheel-elements($name+'-wheel', $tool-size, $icon-size, $besm);
+   @include cx-wheel-elements($name + "-wheel", $tool-size, $icon-size, $besm);
 
    .#{$element}#{$name}-spacer {
       width: 20px;
@@ -42,6 +52,6 @@
    }
 }
 
-@if (cx-should-include('cx/widgets/DateTimePicker')) {
+@if (cx-should-include("cx/widgets/DateTimePicker")) {
    @include cx-datetimepicker();
-}
+}

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

@@ -0,0 +1,122 @@
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../variables" as *;
+
+$cx-input-placeholder: (
+   color: $cx-default-input-placeholder-color,
+   opacity: 1,
+) !default;
+
+$cx-input-state-style-map: (
+   default: (
+      line-height: $cx-default-box-line-height,
+      padding: $cx-default-input-padding,
+      border-width: $cx-default-box-border-width,
+      font-size: $cx-default-input-font-size,
+      font-family: $cx-default-input-font-family,
+      border-color: $cx-default-input-border-color,
+      border-style: solid,
+      border-radius: $cx-default-input-border-radius,
+      background-color: $cx-default-input-background-color,
+      color: $cx-default-input-color,
+      outline-offset: 0,
+      box-shadow: none,
+      -ms-appearance: none,
+      -moz-appearance: none,
+      -webkit-appearance: none,
+   ),
+   hover: (),
+   focus: (
+      border-color: rgba(77, 144, 254, 0.8),
+      outline: none,
+      box-shadow: 0 0 2px rgba(77, 144, 254, 0.8),
+   ),
+   disabled: (
+      background: rgb(235, 235, 228),
+      color: rgb(84, 84, 84),
+      pointer-events: none,
+   ),
+   error: (
+      border-color: rgba(220, 0, 9, 0.8),
+   ),
+   error-focus: (
+      box-shadow: 0 0 2px rgba(220, 0, 9, 0.8),
+   ),
+) !default;
+
+// Left Icon
+$cx-input-left-icon-state-style-map: (
+   default: (
+      font-size: $cx-default-icon-size,
+      left: $cx-default-input-left-tool-left,
+      top: 50%,
+      margin-top: cx-multiply($cx-default-input-left-tool-size, -0.5),
+      height: $cx-default-input-left-tool-size,
+      width: $cx-default-input-left-tool-size,
+      line-height: $cx-default-input-left-tool-size,
+      border-radius: $cx-default-input-left-tool-border-radius,
+      opacity: 0.6,
+      text-align: center,
+   ),
+   hover: (
+      opacity: 1,
+   ),
+   active: (),
+   focus: (),
+   error: (),
+) !default;
+
+//Right Icon
+$cx-input-right-icon-state-style-map: (
+   default: (
+      font-size: $cx-default-icon-size,
+      right: $cx-default-input-right-tool-right,
+      top: 50%,
+      margin-top: cx-multiply($cx-default-input-tool-size, -0.5),
+      height: $cx-default-input-tool-size,
+      width: $cx-default-input-tool-size,
+      line-height: $cx-default-input-tool-size,
+      opacity: 0.6,
+      text-align: center,
+      cursor: pointer,
+   ),
+   hover: (
+      opacity: 1,
+   ),
+   active: (),
+   focus: (),
+   error: (),
+) !default;
+
+$cx-clear-state-style-map: (
+   default: (
+      font-size: $cx-default-icon-size,
+      right: $cx-default-input-right-tool-right,
+      top: 50%,
+      margin-top: cx-multiply($cx-default-clear-size, -0.5),
+      height: $cx-default-clear-size,
+      width: $cx-default-clear-size,
+      line-height: $cx-default-clear-size,
+      color: $cx-default-clear-color,
+      border-radius: $cx-default-border-radius,
+      text-align: center,
+   ),
+   hover: (
+      background-color: rgba(128, 128, 128, 0.2),
+   ),
+   active: (),
+   focus: (),
+   error: (),
+) !default;
+
+// STANDARD FORM FIELD (textfield, numberfield, lookupfield, select,...)
+$cx-std-field-state-style-map: cx-deep-map-merge($cx-input-state-style-map, ()) !default;
+
+$cx-textarea-state-style-map: cx-deep-map-merge(
+   $cx-input-state-style-map,
+   (
+      default: (
+         line-height: normal,
+      ),
+   )
+);

package/src/widgets/form/Field.scss

@@ -1,24 +1,49 @@
+@use "sass:math";
 @use "sass:map";
-
-@mixin cxb-field($besm, $state-style-map, $input: true, $box: false, $width: null) {
+@use "../variables" as *;
+@use "../../util/scss/besm.scss" 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 *;
+
+@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);
+   $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);
+   $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)
-      );
+      @if ($cx-use-box-line-height-fix) {
+         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');
@@ -50,7 +75,14 @@
    }
 }
 
-@mixin cxe-field-input($besm, $state-style-map, $overrides: null, $placeholder: null, $width: 100%, $input: true) {
+@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);
@@ -63,17 +95,21 @@
 
    @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) {
+         height: 100%;
          //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),
-               ),
+                     line-height: cx-calc(
+                           $line-height,
+                           cx-top($padding),
+                           cx-bottom($padding)
+                        ),
+                     padding: 0 cx-right($padding) 0 cx-left($padding),
+                  ),
             )
          );
       }
@@ -151,8 +187,8 @@
    position: absolute;
    left: 50%;
    top: 50%;
-   margin-top: -$size * 0.5;
-   margin-left: -$size * 0.5;
+   margin-top: cx-multiply($size, -0.5);
+   margin-left: cx-multiply($size, -0.5);
    height: $size;
    width: $size;
    line-height: $size;