cx 26.0.8 → 26.0.10

package/build/widgets/form/ColorPicker.scss

@@ -1,285 +0,0 @@
-//@if cx-call-once("cx/widgets/checker-background") {
-//   %cx-checker-bg {
-//      background-repeat: repeat;
-//      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAAAfSURBVChTY9i5Y89/dAwEDOh4SCjEJohN8+BXuOc/AOttNBKJWD4sAAAAAElFTkSuQmCC");
-//   }
-//}
-
-@use "sass:map";
-
-@mixin cx-checker-background($tile-size: 4px, $color: rgba(gray, 0.5)) {
-   background-image: linear-gradient(45deg, $color 25%, transparent 25%),
-      linear-gradient(-45deg, $color 25%, transparent 25%), linear-gradient(45deg, transparent 75%, $color 75%),
-      linear-gradient(-45deg, transparent 75%, $color 75%);
-   background-size: 2 * $tile-size 2 * $tile-size;
-   background-position:
-      0 0,
-      0 $tile-size,
-      $tile-size -#{$tile-size},
-      -#{$tile-size} 0px;
-}
-
-@mixin cx-colorpicker(
-   $name: "colorpicker",
-   $state-style-map: $cx-colorpicker-state-style-map,
-   $placeholder: $cx-input-placeholder,
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   $size: 220px;
-
-   .#{$block}#{$name} {
-      $styles: cx-deep-map-merge(
-         $state-style-map,
-         (
-            default: (
-               padding: 4px,
-            ),
-         )
-      );
-
-      display: inline-flex;
-      flex-direction: column;
-
-      @include cx-add-state-rules($styles, default);
-
-      @media screen and (min-width: 500px) {
-         flex-direction: row;
-      }
-
-      &:hover {
-         @include cx-add-state-rules($state-style-map, hover);
-      }
-
-      input {
-         @include cxe-field-input(
-            $besm,
-            $state-style-map,
-            $placeholder: $placeholder,
-            $input: false,
-            $overrides: (
-               default: (
-                  line-height: 14px,
-                  font-size: 11px,
-                  font-family: $cx-default-colorpicker-font-family,
-               )
-            )
-         );
-      }
-   }
-
-   .#{$element}#{$name}-picker {
-      width: $size;
-      height: $size;
-      margin: 4px;
-      //cursor: crosshair;
-      position: relative;
-      touch-action: none;
-
-      background:
-         -webkit-linear-gradient(
-            top,
-            hsl(0, 0%, 100%) 0%,
-            hsla(0, 0%, 100%, 0) 50%,
-            hsla(0, 0%, 0%, 0) 50%,
-            hsl(0, 0%, 0%) 100%
-         ),
-         -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-      background:
-         -moz-linear-gradient(
-            top,
-            hsl(0, 0%, 100%) 0%,
-            hsla(0, 0%, 100%, 0) 50%,
-            hsla(0, 0%, 0%, 0) 50%,
-            hsl(0, 0%, 0%) 100%
-         ),
-         -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-      background:
-         -ms-linear-gradient(
-            top,
-            hsl(0, 0%, 100%) 0%,
-            hsla(0, 0%, 100%, 0) 50%,
-            hsla(0, 0%, 0%, 0) 50%,
-            hsl(0, 0%, 0%) 100%
-         ),
-         -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-      background:
-         -o-linear-gradient(
-            top,
-            hsl(0, 0%, 100%) 0%,
-            hsla(0, 0%, 100%, 0) 50%,
-            hsla(0, 0%, 0%, 0) 50%,
-            hsl(0, 0%, 0%) 100%
-         ),
-         -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-   }
-
-   .#{$element}#{$name}-indicator {
-      position: absolute;
-      border: 2px solid rgba(255, 255, 255, 0.8);
-      border-radius: 50%;
-      box-sizing: border-box;
-      width: 9px;
-      height: 9px;
-      left: calc(50% - 5px);
-      top: calc(50% - 5px);
-   }
-
-   .#{$element}#{$name}-hue {
-      height: 15px;
-      position: relative;
-      background: -moz-linear-gradient(
-         left,
-         #f00 0%,
-         #ff0 16.66%,
-         #0f0 33.33%,
-         #0ff 50%,
-         #00f 66.66%,
-         #f0f 83.33%,
-         #f00 100%
-      );
-      background: -webkit-linear-gradient(
-         left,
-         #f00 0%,
-         #ff0 16.66%,
-         #0f0 33.33%,
-         #0ff 50%,
-         #00f 66.66%,
-         #f0f 83.33%,
-         #f00 100%
-      );
-      background: -ms-linear-gradient(
-         left,
-         #f00 0%,
-         #ff0 16.66%,
-         #0f0 33.33%,
-         #0ff 50%,
-         #00f 66.66%,
-         #f0f 83.33%,
-         #f00 100%
-      );
-      background: -o-linear-gradient(
-         left,
-         #f00 0%,
-         #ff0 16.66%,
-         #0f0 33.33%,
-         #0ff 50%,
-         #00f 66.66%,
-         #f0f 83.33%,
-         #f00 100%
-      );
-      touch-action: none;
-
-      .#{$element}#{$name}-indicator {
-         border-color: rgba(0, 0, 0, 0.5);
-         height: calc(100% + 4px);
-         border-radius: 2px;
-         width: 4px;
-         top: -2px;
-      }
-   }
-
-   .#{$element}#{$name}-alpha {
-      height: 16px;
-      //@extend %cx-checker-bg;
-      @include cx-checker-background();
-      position: relative;
-      touch-action: none;
-
-      & > div:first-child {
-         width: 100%;
-         height: 100%;
-      }
-
-      .#{$element}#{$name}-indicator {
-         border-color: rgba(0, 0, 0, 0.5);
-         top: -2px;
-         height: calc(100% + 4px);
-         border-radius: 2px;
-         width: 4px;
-      }
-   }
-
-   .#{$element}#{$name}-details {
-      width: $size;
-      min-height: 170px;
-      margin: 4px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-   }
-
-   .#{$element}#{$name}-inputs {
-      label {
-         width: 25%;
-         display: inline-block;
-         text-align: right;
-
-         input {
-            margin-left: 2px;
-            width: 60%;
-            text-align: center;
-         }
-      }
-   }
-
-   .#{$element}#{$name}-pixel-picker {
-      display: flex;
-      width: 20px;
-      height: 20px;
-      flex-shrink: 0;
-      align-items: center;
-      margin-top: 4px;
-
-      svg path {
-         fill: currentColor;
-      }
-
-      &:hover {
-         cursor: pointer;
-
-         svg path {
-            fill: currentColor;
-            opacity: 0.5;
-         }
-      }
-   }
-
-   .#{$element}#{$name}-preview {
-      display: flex;
-   }
-
-   .#{$element}#{$name}-color {
-      @include cx-checker-background();
-      height: 64px;
-      width: 64px;
-      border-radius: 4px;
-      align-self: flex-end;
-
-      & > div {
-         width: 100%;
-         height: 100%;
-      }
-   }
-
-   .#{$element}#{$name}-values {
-      flex-grow: 1;
-      margin: 0 8px;
-
-      input {
-         width: 100%;
-         display: block;
-      }
-
-      input:not(:last-child) {
-         margin: 0 0 4px 0;
-      }
-   }
-}
-
-@if (cx-should-include("cx/widgets/ColorPicker")) {
-   @include cx-colorpicker();
-}

package/build/widgets/form/ColorPicker.variables.scss

@@ -1,22 +0,0 @@
-$cx-default-colorpicker-font-family: "Consolas", monospace !default;
-$cx-default-colorpicker-font-size: 11px !default;
-$cx-default-colorpicker-background-color: $cx-default-input-background-color !default;
-$cx-default-colorpicker-border-width: $cx-default-box-border-width !default;
-$cx-default-colorpicker-border-color: $cx-default-input-border-color !default;
-$cx-default-colorpicker-box-shadow: none !default;
-
-$cx-colorpicker-state-style-map: cx-deep-map-merge(
-   $cx-input-state-style-map,
-   (
-      default: (
-         font-family: $cx-default-colorpicker-font-family,
-         font-size: $cx-default-colorpicker-font-size,
-         background-color: $cx-default-colorpicker-background-color,
-         border-width: $cx-default-colorpicker-border-width,
-         border-color: $cx-default-colorpicker-border-color,
-         box-shadow: $cx-default-colorpicker-box-shadow,
-         padding: 2px,
-      ),
-      hover: (),
-   )
-) !default;

package/build/widgets/form/DateTimeField.scss

@@ -1,92 +0,0 @@
-
-@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

@@ -1,47 +0,0 @@
-@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

@@ -1,164 +0,0 @@
-@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

@@ -1,24 +0,0 @@
-@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

@@ -1,38 +0,0 @@
-@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();
-}