cx 26.3.9 → 26.4.0

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

@@ -1,122 +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,
-      ),
-   )
-);
+@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,200 +1,200 @@
-@use "sass:math";
-@use "sass:map";
-@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
-   );
-   $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;
-      @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');
-      //
-      //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;
-
-      @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),
-                  ),
-            )
-         );
-      }
-   }
-
-   @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: cx-multiply($size, -0.5);
-   margin-left: cx-multiply($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);
-}
+@use "sass:math";
+@use "sass:map";
+@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
+   );
+   $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;
+      @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');
+      //
+      //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;
+
+      @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),
+                  ),
+            )
+         );
+      }
+   }
+
+   @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: cx-multiply($size, -0.5);
+   margin-left: cx-multiply($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);
+}