cx 26.0.9 → 26.0.11

package/build/widgets/drag-drop/variables.scss

@@ -1,15 +0,0 @@
-@use "sass:map";
-
-
-$cx-default-dragclone-background-color: rgba(white, 0.9) !default;
-$cx-default-dragclone-box-shadow: 0 0 3px rgba(128, 128, 128, 0.3) !default;
-
-$cx-dragclone-style: (
-   background-color: $cx-default-dragclone-background-color,
-   box-shadow: $cx-default-dragclone-box-shadow,
-   opacity: 0.9
-) !default;
-
-$cx-dependencies: map.merge($cx-dependencies, (
-   'cx/widgets/DragSource': 'cx/widgets/DragClone'
-))

package/build/widgets/form/Calendar.scss

@@ -1,199 +0,0 @@
-@use "sass:map";
-@use "sass:color";
-
-@mixin cx-calendar(
-   $name: "calendar",
-   $state-style-map: $cx-calendar-state-style-map,
-   $width: $cx-default-input-width,
-   $icon-size: $cx-default-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}calendar {
-      display: inline-block;
-      vertical-align: middle;
-      width: 18em;
-      overflow-y: auto;
-      box-sizing: border-box;
-
-      @include cx-add-state-rules($state-style-map, "default");
-
-      &:hover {
-         @include cx-add-state-rules($state-style-map, "hover");
-      }
-
-      &:focus {
-         @include cx-add-state-rules($state-style-map, "focus");
-      }
-
-      &.#{$state}error {
-         @include cx-add-state-rules($state-style-map, "error");
-
-         &:focus {
-            @include cx-add-state-rules($state-style-map, "error-focus");
-         }
-      }
-
-      table {
-         border-spacing: 0;
-         width: 100%;
-      }
-
-      td,
-      th {
-         text-align: center;
-         width: 2em;
-         line-height: 2em;
-         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      }
-
-      th {
-         font-weight: cx-get-state-rule($state-style-map, header, font-weight);
-      }
-
-      tbody td {
-         user-select: none;
-         @include cx-add-state-rules($cx-calendar-day-state-style-map, default);
-      }
-
-      .#{$element}#{$name}-header {
-         @include cx-add-state-rules($state-style-map, header);
-      }
-
-      td.#{$state}today {
-         @include cx-add-state-rules($cx-calendar-day-state-style-map, today);
-
-         &:hover {
-            @include cx-add-state-rules($cx-calendar-day-state-style-map, hover);
-         }
-      }
-
-      td.#{$state}outside {
-         @include cx-add-state-rules($cx-calendar-day-state-style-map, outside);
-      }
-
-      td.#{$state}unselectable {
-         @include cx-add-state-rules($cx-calendar-day-state-style-map, disabled);
-      }
-
-      td.#{$state}cursor,
-      .#{$element}#{$name}-header td:hover {
-         @include cx-add-state-rules($cx-calendar-day-state-style-map, hover);
-      }
-
-      td.#{$state}selected {
-         @include cx-add-state-rules($cx-calendar-day-state-style-map, selected);
-      }
-
-      &:not(.#{$state}disabled) {
-         td {
-            cursor: pointer;
-         }
-      }
-
-      td:not(.cxe-calendar-year-option):first-child,
-      td:not(.cxe-calendar-year-option):last-child {
-         display: none;
-         pointer-events: none;
-      }
-
-      &:focus {
-         td.#{$state}cursor,
-         .#{$element}#{$name}-header td:hover {
-            @include cx-add-state-rules($cx-calendar-day-state-style-map, hover-focus);
-
-            &:active {
-               @include cx-add-state-rules($cx-calendar-day-state-style-map, active);
-            }
-         }
-
-         td.#{$state}selected {
-            @include cx-add-state-rules($cx-calendar-day-state-style-map, selected-focus);
-         }
-      }
-
-      &.#{$state}disabled {
-         background-color: transparent;
-         border-color: transparent;
-         color: color.adjust(#fff, $lightness: -18%);
-         pointer-events: none;
-         opacity: 0.9;
-      }
-   }
-
-   .#{$element}#{$name}-header td {
-      line-height: 0;
-   }
-
-   .#{$element}#{$name}-icon-next-year,
-   .#{$element}#{$name}-icon-prev-year,
-   .#{$element}#{$name}-icon-prev-month,
-   .#{$element}#{$name}-icon-next-month {
-      width: $icon-size;
-      height: $icon-size;
-      display: inline-block;
-      font-size: $icon-size;
-      line-height: $icon-size;
-      user-select: none;
-   }
-
-   .#{$element}#{$name}-year {
-      &-name {
-         cursor: pointer;
-      }
-
-      &-picker {
-         user-select: none;
-         overflow-y: scroll;
-         width: 100%;
-         max-height: 24em;
-         height: auto;
-      }
-
-      &-option {
-         cursor: pointer;
-         @include cx-add-state-rules($cx-calendar-day-state-style-map, default);
-
-         &.#{$state}active {
-            @include cx-add-state-rules($cx-calendar-day-state-style-map, today);
-         }
-
-         &:hover {
-            @include cx-add-state-rules($cx-calendar-day-state-style-map, hover);
-         }
-
-         &.#{$state}selected {
-            @include cx-add-state-rules($cx-calendar-day-state-style-map, selected);
-         }
-      }
-   }
-
-   .#{$element}#{$name}-icon-prev-year {
-      transform: rotate(180deg);
-   }
-   .#{$element}#{$name}-icon-prev-month {
-      transform: rotate(90deg);
-   }
-   .#{$element}#{$name}-icon-next-month {
-      transform: rotate(-90deg);
-   }
-
-   th.#{$element}#{$name}-display {
-      line-height: 1.5;
-      padding: 0.5em;
-   }
-
-   .#{$element}#{$name}-toolbar {
-      display: flex;
-      justify-content: center;
-      margin-top: cx-top(cx-get-state-rule($state-style-map, default, "padding", 0));
-   }
-}
-
-@if (cx-should-include("cx/widgets/Calendar")) {
-   @include cx-calendar();
-}

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

@@ -1,64 +0,0 @@
-
-$cx-default-calendar-font-size: $cx-default-box-font-size !default;
-$cx-default-calendar-background-color: $cx-default-input-background-color !default;
-$cx-default-calendar-border-width: $cx-default-box-border-width !default;
-$cx-default-calendar-border-color: $cx-default-input-border-color !default;
-$cx-default-calendar-border-radius: $cx-default-border-radius !default;
-$cx-default-calendar-box-shadow: none !default;
-$cx-default-calendar-padding: 5px !default;
-
-//header
-$cx-default-calendar-header-font-size: $cx-default-box-font-size !default;
-$cx-default-calendar-header-font-weight: 500 !default;
-$cx-default-calendar-header-color: $cx-default-color !default;
-$cx-default-calendar-header-background-color: transparent !default;
-
-//day
-$cx-default-calendar-day-font-size: $cx-default-calendar-font-size !default;
-$cx-default-calendar-day-border-radius: $cx-default-calendar-border-radius !default;
-
-// CALENDAR
-$cx-calendar-state-style-map: cx-deep-map-merge($cx-input-state-style-map, (
-  default: (
-    font-size: $cx-default-calendar-font-size,
-    background-color: $cx-default-calendar-background-color,
-    border-style: solid,
-    border-width: $cx-default-calendar-border-width,
-    border-color: $cx-default-calendar-border-color,
-    border-radius: $cx-default-calendar-border-radius,
-    box-shadow: $cx-default-calendar-box-shadow,
-    padding: $cx-default-calendar-padding
-  ),
-  hover: (
-    
-  ),
-  header: (
-    font-size: $cx-default-calendar-header-font-size,
-    font-weight: $cx-default-calendar-header-font-weight,
-    color: $cx-default-calendar-header-color,
-    background-color: $cx-default-calendar-header-background-color, 
-  ),
-  focus: (
-    border-color: cx-get-state-rule($cx-input-state-style-map, focus, border-color),
-    box-shadow: cx-get-state-rule($cx-input-state-style-map, focus, box-shadow),
-    outline: none
-  )
-)) !default;
-
-// calendar day field styles
-$cx-calendar-day-state-style-map: cx-deep-map-merge($cx-list-item, (
-  default: (
-    font-size: $cx-default-calendar-day-font-size,
-    background-color: transparent,
-    border-radius: $cx-default-calendar-day-border-radius
-  ),
-  today: (
-    background-color: rgba(220, 250, 183, 0.5),
-  ),
-  outside: (
-    color: rgba(0, 0, 0, 0.3)
-  ), 
-  today-hover: (
-      
-  )
-));

package/build/widgets/form/Checkbox.scss

@@ -1,129 +0,0 @@
-@use "sass:map";
-
-@mixin cx-checkbox(
-   $name: "checkbox",
-   $state-style-map: $cx-checkbox-state-style-map,
-   $width: $cx-default-input-width,
-   $empty-text: $cx-empty-text,
-   $besm: $cx-besm,
-   $size: $cx-default-checkbox-size
-) {
-   $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($cx-default-box-border-width) 0 cx-bottom($cx-default-box-border-width) 0,
-         ),
-      )
-   );
-
-   .#{$block}#{$name} {
-      min-width: $size;
-      @include cxb-field($besm, $outer-styles, $input: false, $box: true);
-   }
-
-   .#{$element}#{$name}-checkbox {
-      padding: 0;
-      margin: 0 !important;
-      width: $size;
-      height: $size;
-      top: calc(50% - #{$size * 0.5});
-      left: 0;
-      display: inline-block;
-      position: absolute;
-      //-webkit-appearance: none;
-
-      &::-moz-focus-inner {
-         border: 0;
-         padding: 0;
-         margin: -1px;
-      }
-
-      &:focus {
-         box-shadow:
-            inset 0 0 1px 1px rgba(77, 144, 254, 0.8),
-            0 0 2px 2px rgba(77, 144, 254, 0.8);
-         background: rgba(77, 144, 254, 0.8);
-         outline: 0;
-      }
-   }
-
-   .#{$element}#{$name}-text {
-      display: inline-block;
-      margin-left: $size;
-      user-select: none;
-
-      .#{$state}disabled > & {
-         opacity: 0.5;
-      }
-   }
-
-   .#{$element}#{$name}-baseline {
-      user-select: none;
-   }
-
-   .#{$element}#{$name}-empty-text {
-      @include cxe-field-empty-text($empty-text);
-   }
-
-   //non-native implementation
-   .#{$element}#{$name}-input {
-      width: $size;
-      height: $size;
-      top: calc(50% - #{$size * 0.5});
-      left: 0;
-      display: inline-block;
-      position: absolute;
-
-      @include cxe-field-input(
-         $besm,
-         $state-style-map,
-         $input: false,
-         $overrides: (
-            default: (
-               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);
-         }
-
-         .#{$state}disabled > & {
-            @include cx-add-state-rules($state-style-map, disabled-checked);
-         }
-      }
-   }
-
-   .#{$element}#{$name}-input-check {
-      width: 100%;
-      height: 100%;
-      visibility: hidden;
-      position: absolute;
-      display: block;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-
-      .#{$state}checked > & {
-         visibility: visible;
-      }
-   }
-}
-
-@if (cx-should-include("cx/widgets/Checkbox")) {
-   @include cx-checkbox();
-}

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

@@ -1,40 +0,0 @@
-
-$cx-default-checkbox-color: $cx-default-input-color !default;
-$cx-default-checkbox-background-color: $cx-default-input-background-color !default;
-$cx-default-checkbox-border-width: cx-get-state-rule($cx-input-state-style-map, default, border-width) !default;
-$cx-default-checkbox-border-color: $cx-default-input-border-color !default;
-
-$cx-checkbox-state-style-map: cx-deep-map-merge($cx-input-state-style-map, (
-  default: (
-    color: $cx-default-checkbox-color,
-    background-color: $cx-default-checkbox-background-color,
-    border-width: $cx-default-checkbox-border-width,
-    border-color: $cx-default-checkbox-border-color
-  ),
-  checked: (
-
-  ),
-  checked-focus: (
-    
-  ),
-  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;

package/build/widgets/form/ColorField.scss

@@ -1,98 +0,0 @@
-@use "sass:map";
-
-@mixin cx-colorfield(
-   $name: "colorfield",
-   $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,
-   $width: $cx-default-input-width,
-   $icon-size: $cx-default-icon-size,
-   $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, $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,
-         $overrides: (
-            default: (
-               font-family: $cx-default-colorfield-font-family,
-               font-size: 11px,
-               padding: cx-top($padding) cx-calc(cx-right($padding), $cx-default-clear-size) cx-bottom($padding)
-                  cx-calc(cx-left($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing),
-            )
-         )
-      );
-   }
-
-   .#{$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}-right-icon {
-      @include cxe-field-button($besm, $right-icon-state-style-map);
-
-      .#{$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}-left-icon {
-      box-sizing: border-box;
-
-      @include cx-checker-background();
-
-      @include cxe-field-button(
-         $besm,
-         cx-deep-map-merge(
-            $left-icon-state-style-map,
-            (
-               default: (
-                  opacity: 1,
-                  cursor: pointer,
-               ),
-            )
-         )
-      );
-
-      div {
-         width: 100%;
-         height: 100%;
-      }
-   }
-
-   .#{$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/ColorField")) {
-   @include cx-colorfield();
-}