cx 26.0.5 → 26.0.8

package/build/widgets/form/Calendar.scss

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

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

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

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

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