cx 26.0.5 → 26.0.8

package/build/widgets/form/Select.scss

@@ -0,0 +1,101 @@
+@use "sass:map";
+
+@import "../overlay/Dropdown";
+
+@mixin cx-select(
+   $name: "select",
+   $state-style-map: $cx-std-field-state-style-map,
+   $placeholder: $cx-input-placeholder,
+   $empty-text: $cx-empty-text,
+   $width: $cx-default-input-width,
+   $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,
+   $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} {
+      @include cxb-field($besm, $state-style-map: $state-style-map, $width: $width, $input: true);
+
+      .#{$element}#{$name}-left-icon {
+         pointer-events: none;
+         @include cxe-field-button($besm, $left-icon-state-style-map);
+      }
+   }
+
+   $padding: cx-get-state-rule($state-style-map, default, "padding");
+
+   .#{$element}#{$name}-select {
+      @include cxe-field-input(
+         $besm,
+         $state-style-map,
+         $placeholder: $placeholder,
+         $overrides: (
+            padding: cx-top($cx-default-input-padding)
+               calc(
+                  #{cx-right($cx-default-input-padding)} + #{$cx-default-clear-size} - #{cx-right(
+                        $cx-default-input-padding
+                     )}
+               )
+               cx-bottom($cx-default-input-padding) cx-left($cx-default-input-padding),
+            -webkit-appearance: none,
+            -moz-appearance: none,
+            -ms-appearance: none,
+            appearance: none
+         )
+      );
+
+      .#{$state}icon > & {
+         padding-left: cx-calc(2 * cx-left($padding), $icon-size);
+      }
+
+      .#{$state}empty > & {
+         @include cx-add-rules($placeholder);
+      }
+
+      &::-ms-expand {
+         display: none;
+         margin: 0;
+         padding: 0;
+      }
+
+      option {
+         background-color: $cx-default-dropdown-background-color;
+         color: cx-get-state-rule($state-style-map, default, color);
+      }
+   }
+
+   .#{$element}#{$name}-clear {
+      @include cxe-field-button($besm, $clear-state-style-map);
+   }
+
+   .#{$element}#{$name}-placeholder {
+      @include cx-add-rules($placeholder);
+   }
+
+   .#{$element}#{$name}-tool {
+      pointer-events: none; //cannot call open-dropdown on native element
+      @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);
+      }
+   }
+
+   .#{$element}#{$name}-icon {
+      @include cxe-field-button-icon($besm, $icon-size);
+   }
+}
+
+@if (cx-should-include("cx/widgets/Select")) {
+   @include cx-select;
+}

package/build/widgets/form/Slider.scss

@@ -0,0 +1,121 @@
+
+@use "sass:map";
+
+@mixin cx-slider(
+   $name: "slider",
+   $state-style-map: $cx-input-state-style-map,
+   $styles: $cx-slider-handle-styles,
+   $width: $cx-default-input-width,
+   $size: $cx-default-slider-handle-size,
+   $axis-size: $cx-default-slider-axis-size,
+   $axis-background-color: $cx-default-slider-axis-background-color,
+   $range-background-color: $cx-default-slider-range-background-color,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      width: $width;
+      user-select: none;
+
+      @include cxb-field($besm, $state-style-map, $input: false, $box: true);
+
+      &.#{$state}vertical {
+         width: 28px;
+         height: $width;
+      }
+
+      &.#{$state}disabled {
+         pointer-events: none;
+         opacity: 0.5;
+      }
+   }
+
+   .#{$element}#{$name}-axis {
+      position: absolute;
+      background-color: $axis-background-color;
+      border-radius: $size * 0.5;
+      box-sizing: border-box;
+
+      .#{$block}#{$name}.#{$state}horizontal & {
+         left: $size * 0.5;
+         right: $size * 0.5;
+         top: calc(50% - #{$axis-size * 0.5});
+         height: $axis-size;
+         padding: 0 $axis-size * 0.5;
+      }
+
+      .#{$block}#{$name}.#{$state}vertical & {
+         top: $size * 0.5;
+         bottom: $size * 0.5;
+         width: $axis-size;
+         left: calc(50% - #{$axis-size * 0.5});
+         padding: $axis-size * 0.5 0;
+      }
+   }
+
+   .#{$element}#{$name}-space {
+      position: relative;
+      width: 100%;
+      height: 100%;
+   }
+
+   .#{$element}#{$name}-range {
+      position: absolute;
+
+      background-color: $range-background-color;
+      border-radius: $axis-size * 0.5;
+
+      .#{$block}#{$name}.#{$state}horizontal & {
+         height: 100%;
+      }
+
+      .#{$block}#{$name}.#{$state}vertical & {
+         width: 100%;
+      }
+   }
+
+   .#{$element}#{$name}-handle {
+      position: absolute;
+      box-sizing: border-box;
+      width: $size;
+      height: $size;
+      margin-left: -$size * 0.5;
+      margin-top: -$size * 0.5;
+      margin-bottom: -$size * 0.5;
+      touch-action: none;
+
+      @include cx-add-state-rules($styles, default);
+
+      .#{$block}#{$name}.#{$state}horizontal & {
+         left: 0;
+         top: 50%;
+      }
+
+      .#{$block}#{$name}.#{$state}vertical & {
+         left: 50%;
+      }
+
+      &:hover {
+         @include cx-add-state-rules($styles, hover);
+      }
+
+      &:focus {
+         @include cx-add-state-rules($styles, focus);
+      }
+
+      &[disabled] {
+         @include cx-add-state-rules($styles, disabled);
+      }
+
+      &:active {
+         @include cx-add-state-rules($styles, active);
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/Slider")) {
+   @include cx-slider();
+}

package/build/widgets/form/Switch.scss

@@ -0,0 +1,142 @@
+@use "sass:map";
+
+@mixin cx-switch(
+   $name: "switch",
+   $state-style-map: $cx-input-state-style-map,
+   $styles: $cx-switch-handle-styles,
+   $width: $cx-default-switch-width,
+   $handle-size: $cx-default-switch-handle-size,
+   $axis-size: $cx-default-switch-axis-size,
+   $axis-background-color: $cx-default-switch-axis-background-color,
+   $range-background-color: $cx-default-switch-range-background-color,
+   $empty-text: $cx-empty-text,
+   $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-width: cx-get-state-rule($state-style-map, default, border-width);
+
+   $outer-styles: cx-deep-map-merge(
+      $state-style-map,
+      (
+         default: (
+            border-width: cx-top($border-width) 0 cx-bottom($border-width) 0,
+            padding: cx-top($padding) 0 cx-bottom($padding) 0,
+         ),
+      )
+   );
+
+   .#{$block}#{$name} {
+      cursor: pointer;
+      min-width: cx-calc($width, $handle-size);
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+      @include cxb-field($besm, $outer-styles, $input: false, $box: true);
+
+      &.#{$state}disabled {
+         pointer-events: none;
+         opacity: 0.5;
+      }
+
+      &:focus {
+         outline: none;
+      }
+   }
+
+   .#{$element}#{$name}-text {
+      display: inline-block;
+      margin-left: cx-calc($width, $handle-size);
+      padding: 0 cx-right($padding) 0 cx-left($padding);
+   }
+
+   .#{$element}#{$name}-empty-text {
+      @include cxe-field-empty-text($empty-text);
+   }
+
+   .#{$element}#{$name}-axis {
+      user-select: none;
+      position: absolute;
+      background-color: $axis-background-color;
+      border-radius: $axis-size * 0.5;
+      box-sizing: border-box;
+      width: $width;
+
+      left: $handle-size * 0.5;
+      right: $handle-size * 0.5;
+      top: calc(50% - #{$axis-size * 0.5});
+      height: $axis-size;
+      padding: 0 $axis-size * 0.5;
+   }
+
+   .#{$element}#{$name}-space {
+      position: relative;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+   }
+
+   .#{$element}#{$name}-range {
+      position: absolute;
+      background-color: $range-background-color;
+      border-radius: $axis-size * 0.5;
+      height: 100%;
+      left: 0;
+      width: 0;
+      opacity: 0;
+      transform: scale(0);
+
+      transition: all 200ms;
+
+      .#{$state}on & {
+         width: 100%;
+         opacity: 1;
+         transform: none;
+      }
+   }
+
+   .#{$element}#{$name}-handle {
+      position: absolute;
+      box-sizing: border-box;
+      width: $handle-size;
+      height: $handle-size;
+      margin-left: -$handle-size * 0.5;
+      margin-top: -$handle-size * 0.5;
+      left: 0;
+      top: 50%;
+      transition: left 200ms;
+
+      @include cx-add-state-rules($styles, default);
+
+      .#{$state}on & {
+         left: 100%;
+         @include cx-add-state-rules($styles, on);
+      }
+
+      .#{$state}on:active & {
+         @include cx-add-state-rules($styles, on-active);
+      }
+
+      &:hover {
+         @include cx-add-state-rules($styles, hover);
+      }
+
+      .#{$block}#{$name}:focus & {
+         @include cx-add-state-rules($styles, focus);
+      }
+
+      .#{$block}#{$name}.#{$state}disabled & {
+         @include cx-add-state-rules($styles, disabled);
+      }
+
+      &:active {
+         @include cx-add-state-rules($styles, active);
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/Switch")) {
+   @include cx-switch();
+}

package/build/widgets/form/TextArea.scss

@@ -0,0 +1,45 @@
+@use "sass:map";
+
+@mixin cx-textarea(
+   $name: "textarea",
+   $state-style-map: $cx-textarea-state-style-map,
+   $placeholder: $cx-input-placeholder,
+   $empty-text: $cx-empty-text,
+   $tool-state-style-map: $cx-input-right-icon-state-style-map,
+   $icon-size: $cx-default-input-icon-size,
+   $width: $cx-default-textarea-width,
+   $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} {
+      line-height: 0;
+      width: $width;
+      @include cxb-field($besm, $state-style-map, $input: false);
+   }
+
+   .#{$element}#{$name}-input {
+      width: 100%;
+      height: 100%;
+      @include cxe-field-input($besm, $state-style-map, $placeholder: $placeholder, $input: false);
+   }
+
+   .#{$element}#{$name}-tool {
+      @include cxe-field-button($besm, $tool-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/TextArea")) {
+   @include cx-textarea;
+}

package/build/widgets/form/TextField.scss

@@ -0,0 +1,57 @@
+@use "sass:map";
+
+@mixin cx-textfield(
+   $name: "textfield",
+   $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,
+   $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);
+   $mod: map.get($besm, mod);
+
+   .#{$block}#{$name} {
+      @include cxb-field($besm, $state-style-map, $width: $width, $input: true);
+   }
+
+   $padding: cx-get-state-rule($state-style-map, default, "padding");
+
+   .#{$element}#{$name}-input {
+      @include cxe-field-input($besm, $state-style-map, $placeholder: $placeholder);
+
+      .#{$state}icon > & {
+         padding-left: cx-calc(2 * cx-left($padding), $icon-size);
+      }
+
+      .#{$state}clear > & {
+         padding-right: cx-calc(cx-right($padding), $cx-default-clear-size, $cx-default-clear-spacing);
+      }
+   }
+
+   .#{$element}#{$name}-left-icon {
+      pointer-events: none;
+      @include cxe-field-button($besm, $left-icon-state-style-map);
+   }
+
+   .#{$element}#{$name}-clear {
+      @include cxe-field-button($besm, $clear-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/TextField")) {
+   @include cx-textfield();
+}

package/build/widgets/form/UploadButton.scss

@@ -0,0 +1,49 @@
+
+@use "sass:map";
+
+@import "../Button";
+
+@mixin cx-uploadbutton(
+   $name: 'uploadbutton',
+   $state-style-map: $cx-button-state-style-map,
+   $mods: $cx-button-mods,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   @include cx-button($name,
+      $mods: $mods,
+      $state-style-map: $state-style-map,
+      $besm: $besm
+   );
+
+   .#{$element}#{$name}-input {
+      position: absolute;
+      opacity: 0;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+   }
+
+   .#{$element}#{$name}-progress {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 0;
+      background: rgba(8, 176, 255, 0.5);
+      outline: 1px solid rgba(8, 176, 255, 0.5);
+      transition: opacity 0.5s ease-in-out;
+
+      &.#{$state}done {
+         opacity: 0;
+      }
+   }
+}
+
+@if (cx-should-include('cx/widgets/UploadButton')) {
+   @include cx-uploadbutton();
+}

package/build/widgets/form/ValidationError.scss

@@ -0,0 +1,23 @@
+@use "sass:map";
+
+@mixin cx-validationerror(
+   $name: 'uploadbutton',
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $mod: map.get($besm, mod);
+
+   .#{$block}validationerror {
+      color: rgb(220, 0, 9);
+      font-size: smaller;
+
+      &.#{$mod}block {
+         display: block;
+      }
+   }
+}
+
+@if (cx-should-include('cx/widgets/ValidationError')) {
+   @include cx-validationerror();
+}

package/build/widgets/form/Wheel.scss

@@ -0,0 +1,152 @@
+@use "sass:map";
+
+@mixin cx-wheel-elements(
+   $name: "wheel",
+   $tool-size: $cx-default-input-tool-size,
+   $icon-size: $cx-default-input-icon-size,
+   $besm: $cx-besm
+) {
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
+
+   .#{$element}#{$name}-container {
+      position: relative;
+      display: inline-block;
+      padding: 30px 5px;
+      vertical-align: middle;
+      background: inherit;
+      text-align: center;
+   }
+
+   .#{$element}#{$name}-clip {
+      position: relative;
+      overflow: hidden;
+      background: inherit;
+      user-select: none;
+      background-color: $cx-default-wheel-clip-background-color;
+      border-style: solid;
+      border-width: $cx-default-wheel-clip-border-width;
+      border-radius: $cx-default-wheel-clip-border-radius;
+      border-color: $cx-default-wheel-clip-border-color;
+   }
+
+   .#{$element}#{$name}-mask {
+      position: absolute;
+      left: 0;
+      right: 0;
+      pointer-events: none;
+      background: inherit;
+      opacity: 0.6;
+   }
+
+   .#{$element}#{$name}-vscroll {
+      width: calc(100% + 20px);
+      display: flex;
+      overflow-y: auto;
+      overflow-x: hidden;
+      touch-action: pan-y;
+
+      &::-webkit-scrollbar {
+         display: none;
+      }
+   }
+
+   .#{$element}#{$name}-wheel {
+   }
+
+   .#{$element}#{$name}-option {
+      padding: 5px 15px;
+      flex: 0 0 auto;
+
+      &.cxs-dummy {
+         visibility: hidden;
+      }
+   }
+
+   .#{$element}#{$name}-selection {
+      position: absolute;
+      left: 0;
+      right: 0;
+      margin-top: -2px;
+      box-sizing: content-box;
+      pointer-events: none;
+      @include cx-add-state-rules($cx-wheel-selection-state-style-map, default);
+   }
+
+   .#{$element}#{$name}-container.#{$state}active .#{$element}#{$name}-selection {
+      @include cx-add-state-rules($cx-wheel-selection-state-style-map, active);
+   }
+
+   .#{$element}#{$name}-arrow-up,
+   .#{$element}#{$name}-arrow-down {
+      position: absolute;
+      left: 50%;
+      margin-left: -($tool-size * 0.5);
+      width: $tool-size;
+      height: $tool-size;
+      opacity: 0.5;
+      cursor: pointer;
+
+      &:hover {
+         opacity: 1;
+      }
+   }
+
+   .#{$element}#{$name}-arrow-down {
+      bottom: 5px;
+   }
+
+   .#{$element}#{$name}-arrow-up {
+      transform: rotate(180deg);
+      top: 5px;
+   }
+
+   .#{$element}#{$name}-arrow-icon {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin-left: -$icon-size * 0.5;
+      margin-top: -$icon-size * 0.5;
+      width: $icon-size;
+      height: $icon-size;
+   }
+}
+
+@mixin cx-wheel(
+   $name: "wheel",
+   $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} {
+      display: inline-block;
+      text-align: center;
+      padding: 30px 5px;
+      vertical-align: middle;
+      background: inherit;
+      position: relative;
+      font-size: 14px;
+      user-select: none;
+
+      &:focus {
+         outline: 0;
+
+         .#{$element}#{$name}-selection {
+            border-color: #3c7eff;
+            background: rgba(#3c7eff, 0.1);
+         }
+      }
+   }
+
+   @include cx-wheel-elements($name, $tool-size, $icon-size, $besm);
+}
+
+@if (cx-should-include("cx/widgets/Wheel")) {
+   @include cx-wheel();
+}

package/build/widgets/form/index.scss

@@ -0,0 +1,24 @@
+
+@import "Field";
+@import "Label";
+@import "TextField";
+@import "NumberField";
+@import "Calendar";
+@import "LookupField";
+@import "Select";
+@import "TextArea";
+@import "Checkbox";
+@import "Radio";
+@import "ColorPicker";
+@import "ColorField";
+@import "MonthPicker";
+@import "MonthField";
+@import "UploadButton";
+@import "Slider";
+@import "ValidationError";
+@import "Switch";
+@import "HelpText";
+@import "Wheel";
+@import "DateTimePicker";
+@import "DateTimeField";
+