cx 26.0.6 → 26.0.9

package/build/widgets/form/DateTimeField.scss

@@ -0,0 +1,92 @@
+
+@use "sass:map";
+
+@mixin cx-datetimefield(
+   $name: 'datetimefield',
+   $input-state-style-map: $cx-std-field-state-style-map,
+   $placeholder: $cx-input-placeholder,
+   $empty-text: $cx-empty-text,
+   $clear-state-style-map: $cx-clear-state-style-map,
+   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
+   $right-icon-state-style-map: $cx-input-right-icon-state-style-map,
+   $icon-size: $cx-default-input-icon-size,
+   $width: $cx-default-input-width,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      @include cxb-field($besm, $input-state-style-map, $width: $width, $input: true);
+   }
+
+   $padding: cx-get-state-rule($input-state-style-map, default, 'padding');
+
+   .#{$element}#{$name}-input {
+      @include cxe-field-input($besm, $input-state-style-map,
+         $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)
+            )
+         )
+      );
+   }
+
+   .#{$element}#{$name}-clear {
+      @include cxe-field-button($besm, $clear-state-style-map);
+
+      .#{$state}focus > & {
+        @include cx-add-state-rules($clear-state-style-map, focus);
+      }
+      .#{$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
+         )
+      )));
+
+      .#{$state}disabled > & {
+        @include cx-add-state-rules($input-state-style-map, disabled);
+        border-width: 0;
+      }
+      .#{$state}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);
+      }
+   }
+
+   .#{$element}#{$name}-right-icon {
+      @include cxe-field-button($besm, $right-icon-state-style-map);
+      .#{$state}disabled > & {
+        @include cx-add-state-rules($input-state-style-map, disabled);
+        border-width: 0;
+      }
+      .#{$state}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);
+      }
+   }
+
+   .#{$element}#{$name}-icon {
+      @include cxe-field-button-icon($besm, $icon-size);
+   }
+
+   .#{$element}#{$name}-empty-text {
+      @include cxe-field-empty-text($empty-text);
+   }
+}
+
+@if (cx-should-include('cx/widgets/DateTimeField')) {
+   @include cx-datetimefield();
+}

package/build/widgets/form/DateTimePicker.scss

@@ -0,0 +1,47 @@
+@use "sass:map";
+
+@mixin cx-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,
+   $dtp-border-radius: $cx-default-datetimepicker-border-radius,
+   $dtp-border-color: $cx-default-datetimepicker-border-color,
+   $dtp-padding: $cx-default-datetimepicker-padding,
+   $tool-size: $cx-default-input-tool-size,
+   $icon-size: $cx-default-input-icon-size,
+   $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} {
+      background: $dtp-background-color;
+      border-style: solid;
+      border-width: $dtp-border-width;
+      border-radius: $dtp-border-radius;
+      border-color: $dtp-border-color;
+      display: inline-block;
+      vertical-align: middle;
+      padding: $dtp-padding;
+      user-select: none;
+      font-size: $dtp-font-size;
+
+      &:focus {
+         outline: 0;
+      }
+   }
+
+   @include cx-wheel-elements($name+'-wheel', $tool-size, $icon-size, $besm);
+
+   .#{$element}#{$name}-spacer {
+      width: 20px;
+      display: inline-block;
+   }
+}
+
+@if (cx-should-include('cx/widgets/DateTimePicker')) {
+   @include cx-datetimepicker();
+}

package/build/widgets/form/Field.scss

@@ -0,0 +1,164 @@
+@use "sass:map";
+
+@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;
+      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;
+      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) {
+         //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: -$size * 0.5;
+   margin-left: -$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);
+}

package/build/widgets/form/HelpText.scss

@@ -0,0 +1,24 @@
+@use "sass:map";
+
+@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/build/widgets/form/Label.scss

@@ -0,0 +1,38 @@
+@use "sass:map";
+
+@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/build/widgets/form/LookupField.scss

@@ -0,0 +1,221 @@
+@use "sass:map";
+
+@mixin cx-lookupfield(
+   $name: "lookupfield",
+   $state-style-map: $cx-std-field-state-style-map,
+   $placeholder: $cx-input-placeholder,
+   $empty-text: $cx-empty-text,
+   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
+   $clear-state-style-map: $cx-clear-state-style-map,
+   $tool-state-style-map: $cx-input-right-icon-state-style-map,
+   $icon-size: $cx-default-input-icon-size,
+   $width: $cx-default-input-width,
+   $tag-state-style-map: $cx-input-tag-state-style-map,
+   $tag-clear-state-style-map: $cx-input-tag-clear-state-style-map,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $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);
+
+   .#{$block}#{$name} {
+      cursor: pointer;
+      width: $width;
+      font: cx-get-state-rule($state-style-map, default, "font");
+      font-size: cx-get-state-rule($state-style-map, default, "font-size");
+
+      @include cxb-field($besm, $state-style-map, $input: false);
+
+      &.#{$state}multiple {
+         min-width: $cx-default-input-width;
+         width: auto;
+      }
+
+      &.#{$state}readonly {
+         pointer-events: none;
+
+         & > .#{$element}#{$name}-input {
+            padding-right: cx-right($padding);
+         }
+      }
+   }
+
+   .#{$element}#{$name}-input {
+      @include cxe-field-input(
+         $besm,
+         $state-style-map,
+         $placeholder: $placeholder,
+         $input: false,
+         $overrides: (
+            default: (
+               height: 100%,
+               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),
+            )
+         )
+      );
+
+      .#{$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);
+      }
+   }
+
+   .#{$element}#{$name}-tag {
+      display: inline-block;
+      position: relative;
+      box-sizing: border-box;
+
+      @include cx-add-state-rules($tag-state-style-map, default);
+
+      &:hover {
+         @include cx-add-state-rules($tag-state-style-map, hover);
+      }
+
+      &.#{$state}readonly {
+         padding-right: cx-right($padding);
+         pointer-events: none;
+      }
+   }
+
+   .#{$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 {
+      padding: 0 cx-calc($cx-default-input-tag-spacing, $border-radius-offset);
+      display: inline-block;
+   }
+
+   .#{$element}#{$name}-tag-clear {
+      @include cxe-field-button($besm, $tag-clear-state-style-map);
+   }
+
+   .#{$element}#{$name}-lookup-options {
+      padding: 0;
+      margin: 0;
+      min-width: 100%;
+      width: 100%;
+   }
+
+   .#{$element}#{$name}-query {
+      @include cxe-field-input(
+         $besm,
+         $state-style-map,
+         $placeholder: $placeholder,
+         $width: calc(100% - 10px),
+         $overrides: (
+            default: (
+               margin: 5px,
+               flex: 0 0 auto,
+               height: auto,
+            )
+         )
+      );
+      //put query field down when placed up
+      .#{$state}place-up-right &,
+      .#{$state}place-up &,
+      .#{$state}place-up-left & {
+         order: 1;
+      }
+   }
+
+   .#{$element}#{$name}-dropdown {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+
+      &:focus {
+         outline: none;
+      }
+   }
+
+   .#{$element}#{$name}-message {
+      font-size: smaller;
+      padding: 10px;
+      color: gray;
+      font-style: italic;
+
+      &.#{$state}error {
+         color: #9e2f2d;
+      }
+   }
+
+   .#{$element}#{$name}-scroll-container {
+      overflow: auto;
+      flex: 1 1 auto;
+   }
+
+   .#{$element}#{$name}-clear {
+      @include cxe-field-button($besm, $clear-state-style-map);
+
+      .#{$state}focus > & {
+         @include cx-add-state-rules($clear-state-style-map, focus);
+      }
+      .#{$state}error > & {
+         @include cx-add-state-rules($clear-state-style-map, error);
+      }
+   }
+
+   .#{$element}#{$name}-tool {
+      @include cxe-field-button($besm, $tool-state-style-map);
+
+      .#{$state}disabled > & {
+         border-width: 0;
+         @include cx-add-state-rules($state-style-map, disabled);
+      }
+      .#{$state}focus > & {
+         @include cx-add-state-rules($tool-state-style-map, focus);
+      }
+      .#{$state}error > & {
+         @include cx-add-state-rules($tool-state-style-map, error);
+      }
+   }
+
+   .#{$element}#{$name}-left-icon {
+      @include cxe-field-button($besm, $left-icon-state-style-map);
+   }
+
+   .#{$element}#{$name}-icon {
+      @include cxe-field-button-icon($besm, $icon-size);
+   }
+
+   .#{$element}#{$name}-empty-text {
+      @include cxe-field-empty-text($empty-text);
+   }
+}
+
+@if (cx-should-include("cx/widgets/LookupField")) {
+   @include cx-lookupfield();
+}

package/build/widgets/form/MonthField.scss

@@ -0,0 +1,100 @@
+@use "sass:map";
+
+@mixin cx-monthfield(
+   $name: 'monthfield',
+   $state-style-map: $cx-std-field-state-style-map,
+   $placeholder: $cx-input-placeholder,
+   $empty-text: $cx-empty-text,
+   $clear-state-style-map: $cx-clear-state-style-map,
+   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
+   $right-icon-state-style-map: $cx-input-right-icon-state-style-map,
+   $icon-size: $cx-default-input-icon-size,
+   $width: $cx-default-input-width,
+   $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,
+         $width: $width
+      );
+   }
+
+   $padding: cx-get-state-rule($state-style-map, default, 'padding');
+
+   .#{$element}#{$name}-input {
+      @include cxe-field-input(
+         $besm,
+         $state-style-map,
+         $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)
+            )
+         )
+      );
+   }
+
+   .#{$element}#{$name}-clear {
+      @include cxe-field-button($besm, $clear-state-style-map);
+
+      .#{$state}focus > & {
+        @include cx-add-state-rules($clear-state-style-map, focus);
+      }
+       .#{$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
+         )
+      )));
+
+      .#{$state}disabled > & {
+        @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);
+      }
+       .#{$state}error > & {
+        @include cx-add-state-rules($left-icon-state-style-map, error);
+      }
+   }
+
+   .#{$element}#{$name}-right-icon {
+      @include cxe-field-button($besm, $right-icon-state-style-map);
+
+      .#{$state}disabled > & {
+        @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);
+      }
+      .#{$state}error > & {
+        @include cx-add-state-rules($right-icon-state-style-map, error);
+      }
+   }
+
+   .#{$element}#{$name}-icon {
+      @include cxe-field-button-icon($besm, $icon-size);
+   }
+
+   .#{$element}#{$name}-empty-text {
+      @include cxe-field-empty-text($empty-text);
+   }
+}
+
+@if (cx-should-include('cx/widgets/MonthField')) {
+   @include cx-monthfield();
+}
+