cx 26.0.9 → 26.0.10

package/build/widgets/form/LookupField.scss

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

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

package/build/widgets/form/MonthPicker.scss

@@ -1,125 +0,0 @@
-@use "sass:map";
-@use "sass:color";
-
-@mixin cx-monthpicker($name: "monthpicker", $state-style-map: $cx-input-state-style-map, $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      overflow-y: scroll;
-      overflow-x: hidden;
-      min-height: 10em;
-      max-height: 30em; //100vh;
-      height: 100%;
-      position: relative;
-      width: 23em;
-      overflow-anchor: none;
-      touch-action: pan-y;
-
-      @include cxe-field-input($besm, $state-style-map, $input: false);
-
-      table {
-         border-spacing: 0;
-         width: 100%;
-         font-size: 0.9em;
-      }
-
-      $border-color: cx-get-state-rule($state-style-map, default, border-color);
-
-      th,
-      td {
-         border-top: 1px solid color.adjust($border-color, $alpha: -0.5);
-         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      }
-
-      tbody:not(:first-child) {
-         tr:first-child {
-            th,
-            td {
-               border-top: 1px solid $border-color;
-            }
-         }
-      }
-
-      th,
-      td {
-         text-align: center;
-         font-size: $cx-default-monthpicker-font-size;
-         font-weight: $cx-default-monthpicker-font-weight;
-         line-height: 2em;
-         cursor: pointer;
-         -webkit-user-select: none;
-         -ms-user-select: none;
-         -moz-user-select: none;
-         user-select: none;
-      }
-
-      th {
-         padding: 0 0.5em;
-         color: lightgray;
-      }
-
-      th.#{$state}unselectable {
-         @include cx-add-state-rules($cx-list-item, disabled);
-      }
-
-      .#{$element}#{$name}-year {
-         font-size: 120%;
-         color: gray;
-      }
-
-      td {
-         padding: 0.5em 1em;
-      }
-
-      td.#{$state}outside {
-         color: lightgray;
-      }
-
-      td.#{$state}unselectable {
-         @include cx-add-state-rules($cx-list-item, disabled);
-      }
-
-      td.#{$state}selected {
-         border-color: transparent;
-         @include cx-add-state-rules($cx-list-item, selected);
-
-         &:hover {
-            @include cx-add-state-rules($cx-list-item, selected-hover);
-         }
-      }
-
-      td.#{$state}cursor,
-      th.#{$state}cursor {
-         @include cx-add-state-rules($cx-list-item, hover);
-      }
-
-      &:focus {
-         td.#{$state}selected {
-            @include cx-add-state-rules($cx-list-item, selected);
-         }
-
-         td.#{$state}cursor,
-         th.#{$state}cursor {
-            @include cx-add-state-rules($cx-list-item, selected-cursor);
-         }
-      }
-
-      td.#{$state}handle {
-         //@include cx-add-state-rules($cx-list-item, selected-cursor);
-         touch-action: none;
-      }
-   }
-
-   .#{$block}#{$name}.#{$state}disabled {
-      background-color: transparent;
-      border-color: transparent;
-      color: color.adjust(#fff, $lightness: -18%);
-      pointer-events: none;
-   }
-}
-
-@if (cx-should-include("cx/widgets/MonthPicker")) {
-   @include cx-monthpicker();
-}

package/build/widgets/form/NumberField.scss

@@ -1,63 +0,0 @@
-@use "sass:map";
-
-@mixin cx-numberfield(
-   $name: "numberfield",
-   $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,
-   $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");
-
-   .#{$block}#{$name} {
-      @include cxb-field($besm, $state-style-map, $width: $width, $input: true);
-   }
-
-   .#{$element}#{$name}-input {
-      @include cxe-field-input($besm, $state-style-map, $placeholder: $placeholder);
-
-      &::-webkit-inner-spin-button,
-      &::-webkit-outer-spin-button {
-         -webkit-appearance: none;
-         margin: 0;
-      }
-
-      .#{$state}icon > & {
-         padding-left: cx-calc(2 * cx-left($padding), $icon-size);
-      }
-   }
-
-   .#{$element}#{$name}-tool {
-      pointer-events: none;
-      @include cxe-field-button($besm, $tool-state-style-map);
-   }
-
-   .#{$element}#{$name}-icon {
-      @include cxe-field-button-icon($besm, $icon-size);
-   }
-
-   .#{$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}-empty-text {
-      @include cxe-field-empty-text($empty-text);
-   }
-}
-
-@if (cx-should-include("cx/widgets/NumberField")) {
-   @include cx-numberfield();
-}

package/build/widgets/form/Radio.scss

@@ -1,123 +0,0 @@
-@use "sass:map";
-
-@mixin cx-radio(
-   $name: "radio",
-   $state-style-map: $cx-radio-state-style-map,
-   $size: $cx-default-radio-size,
-   $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,
-         ),
-      )
-   );
-
-   .#{$block}#{$name} {
-      min-width: $size;
-      @include cxb-field($besm, $outer-styles, $input: false, $box: true);
-   }
-
-   .#{$element}#{$name}-radio {
-      padding: 0;
-      margin: 0 !important;
-      width: $size;
-      height: $size;
-      top: calc(50% - #{$size * 0.5});
-      left: 0;
-      display: inline-block;
-      position: absolute;
-      -webkit-backface-visibility: hidden;
-      outline: none;
-
-      &::-moz-focus-outer {
-         border: 0;
-      }
-
-      &:focus {
-         box-shadow: 0 0 2px 2px rgba(77, 144, 254, 0.8);
-         background: transparent;
-         border-radius: 50%;
-         outline: none;
-      }
-   }
-
-   .#{$element}#{$name}-text {
-      display: inline-block;
-      margin-left: $size;
-      user-select: none;
-
-      .#{$state}disabled > & {
-         opacity: 0.5;
-      }
-   }
-
-   //non-native implementation
-   .#{$element}#{$name}-input {
-      width: $size;
-      height: $size;
-      top: calc(50% - #{$size * 0.5});
-      left: 0;
-      display: inline-block;
-      position: absolute;
-      //overflow: hidden;
-      opacity: 1;
-
-      @include cxe-field-input(
-         $besm,
-         $state-style-map,
-         $input: false,
-         $overrides: (
-            default: (
-               border-radius: 50%,
-               padding: 0,
-               margin: 0 !important,
-            )
-         )
-      );
-
-      &.#{$state}checked {
-         @include cx-add-state-rules($state-style-map, checked);
-
-         &:focus {
-            @include cx-add-state-rules($state-style-map, checked-focus);
-         }
-         &:hover {
-            @include cx-add-state-rules($state-style-map, checked-hover);
-         }
-
-         .#{$state}disabled > & {
-            @include cx-add-state-rules($state-style-map, disabled-checked);
-         }
-      }
-
-      &:before {
-         content: " ";
-         width: calc(100% - 6px);
-         height: calc(100% - 6px);
-         visibility: hidden;
-         position: absolute;
-         margin: 3px;
-         box-sizing: border-box;
-         background-color: currentColor;
-         border-radius: 50%;
-      }
-
-      &.#{$state}checked:before {
-         visibility: visible;
-      }
-   }
-}
-
-@if (cx-should-include("cx/widgets/Radio")) {
-   @include cx-radio();
-}

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

@@ -1,46 +0,0 @@
-
-$cx-default-radio-color: currentColor !default;
-$cx-default-radio-background-color: $cx-default-input-background-color !default;
-$cx-default-radio-border-width: cx-get-state-rule($cx-input-state-style-map, default, border-width) !default;
-$cx-default-radio-border-color: $cx-default-input-border-color !default;
-
-$cx-radio-state-style-map: cx-deep-map-merge($cx-input-state-style-map, (
-  default: (
-    color: $cx-default-radio-color,
-    background-color: $cx-default-radio-background-color,
-    border-width: $cx-default-radio-border-width,
-    border-color: $cx-default-radio-border-color    
-  ),
-  hover: (
-
-  ),
-  checked: (
-
-  ),
-  checked-focus: (
-   
-  ),
-  checked-hover: (
-  
-  ),
-  focus: (
-    border-color: cx-get-state-rule($cx-input-state-style-map, focus, border-color),
-    outline: cx-get-state-rule($cx-input-state-style-map, focus, outline),
-    box-shadow: cx-get-state-rule($cx-input-state-style-map, focus, box-shadow)
-  ),
-
-  disabled: (
-    background: rgb(235, 235, 228),
-    color: rgb(84, 84, 84)
-  ),
-  disabled-checked: (
-  
-  ),
-  error: (
-    border-color: rgba(220, 0, 9, 0.8)
-  ),
-
-  error-focus: (
-    box-shadow: 0 0 2px rgba(220, 0, 9, 0.8)
-  )
-)) !default;