cx 26.2.1 → 26.2.3

package/src/widgets/Button.scss

@@ -1,4 +1,12 @@
+@use "sass:math";
 @use "sass:map";
+@use "./variables" as *;
+@use "./maps" as *;
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/calc.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "../util/scss/include.scss" as *;
 
 @mixin cx-button(
    $name: "button",
@@ -12,14 +20,25 @@
    $state: map.get($besm, state);
    $mod: map.get($besm, mod);
 
+   $line-height: cx-get-state-rule(
+      $state-style-map,
+      default,
+      "line-height",
+      1.2em
+   );
+
    .#{$block}#{$name} {
       position: relative;
       box-sizing: border-box;
       display: inline-block;
 
-      $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);
+      $border-width: cx-get-state-rule(
+         $state-style-map,
+         default,
+         "border-width",
+         1px
+      );
 
       height: cx-calc(
          $line-height,
@@ -90,8 +109,8 @@
       display: inline-block;
       position: absolute;
       top: 50%;
-      left: cx-left($padding) * 0.5;
-      margin-top: -$icon-size * 0.5;
+      left: cx-divide(cx-left($padding), 2);
+      margin-top: cx-multiply($icon-size, -0.5);
       height: $icon-size;
       width: $icon-size;
       line-height: $icon-size;
@@ -100,16 +119,21 @@
 
    .#{$element}#{$name}-baseline {
       display: inline-block;
-      width: 1px;
-      margin-left: -1px;
+      min-width: $line-height;
    }
 
    .#{$block}#{$name}.#{$state}icon {
-      padding: cx-top($padding) cx-right($padding) cx-bottom($padding) cx-calc(cx-left($padding), $icon-size);
+      padding: cx-top($padding) cx-right($padding) cx-bottom($padding)
+         cx-calc(cx-left($padding), $icon-size);
 
       &.#{$state}empty {
-         padding: cx-top($padding) cx-right($padding) * 0.5 cx-bottom($padding)
-            cx-calc(cx-left($padding) * 0.5, $icon-size);
+         padding: cx-top($padding) cx-top($padding) cx-bottom($padding)
+            cx-top($padding);
+
+         .#{$element}#{$name}-icon {
+            left: 50%;
+            margin-left: cx-multiply($icon-size, -0.5);
+         }
       }
    }
 }

package/src/widgets/Button.variables.scss

@@ -1,11 +1,17 @@
+@use "./box" as *;
+@use "../util/scss/defaults.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "../util/scss/calc.scss" as *;
 @use "sass:color";
 @use "sass:map";
 
 $cx-default-button-font-family: $cx-default-box-font-family !default;
 $cx-default-button-font-size: $cx-default-box-font-size !default;
 $cx-default-button-font-weight: normal !default;
-$cx-default-button-padding: cx-top($cx-default-box-padding) 2 * cx-right($cx-default-box-padding)
-   cx-bottom($cx-default-box-padding) 2 * cx-left($cx-default-box-padding) !default;
+$cx-default-button-padding: $cx-default-box-padding-top
+   cx-multiply($cx-default-box-padding-right, 2)
+   $cx-default-box-padding-bottom
+   cx-multiply($cx-default-box-padding-left, 2) !default;
 $cx-default-button-border-width: $cx-default-box-border-width !default;
 $cx-default-button-line-height: $cx-default-box-line-height !default;
 $cx-default-button-background-color: #eee !default;
@@ -13,105 +19,3 @@ $cx-default-button-border-color: #ccc !default;
 $cx-default-button-border-radius: $cx-default-border-radius !default;
 $cx-default-button-color: null !default;
 $cx-default-button-box-shadow: inset 0 -2px rgba(128, 128, 128, 0.1) !default;
-
-$cx-button-state-style-map: (
-   default: (
-      background-color: $cx-default-button-background-color,
-      box-shadow: $cx-default-button-box-shadow,
-      border-color: $cx-default-button-border-color,
-      border-width: $cx-default-button-border-width,
-      border-radius: $cx-default-button-border-radius,
-      border-style: solid,
-      user-select: none,
-      color: $cx-default-button-color,
-      font-family: $cx-default-button-font-family,
-      font-size: $cx-default-button-font-size,
-      font-weight: $cx-default-button-font-weight,
-      line-height: $cx-default-button-line-height,
-      padding: $cx-default-button-padding,
-      cursor: pointer,
-      -webkit-appearance: none,
-      -moz-appearance: none,
-      appearance: none,
-      white-space: nowrap,
-      text-decoration: none,
-   ),
-   hover: (
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),
-      text-decoration: none,
-   ),
-   focus: (
-      outline: none,
-      box-shadow: 0 0 1px 1px rgba(77, 144, 254, 0.8),
-   ),
-   hover-focus: (),
-   disabled: (
-      color: gray,
-      box-shadow: none,
-      pointer-events: none,
-   ),
-   active: (
-      top: 1px,
-      box-shadow: none,
-   ),
-) !default;
-
-$cx-button-mods: (
-   primary: (
-      default: (
-         background-color: #1f99f8,
-         border-color: #1e88e5,
-         color: white,
-      ),
-      disabled: (
-         background-color: color.adjust(#1f99f8, $alpha: -0.5),
-         border-color: color.adjust(#1e88e5, $alpha: -0.9),
-         color: color.adjust(white, $alpha: -0.4),
-      ),
-      hover: (
-         background-color: #1f99f8,
-      ),
-   ),
-   danger: (
-      default: (
-         background-color: #d32f2f,
-         border-color: #c62828,
-         color: white,
-      ),
-      disabled: (
-         background-color: color.adjust(#d32f2f, $alpha: -0.4),
-         border-color: color.adjust(#c62828, $alpha: -0.9),
-         color: color.adjust(white, $alpha: -0.5),
-      ),
-      hover: (
-         background-color: #d32f2f,
-      ),
-   ),
-   hollow: (
-      default: (
-         background-color: transparent,
-         border-color: transparent,
-         color: inherit,
-         box-shadow: none,
-      ),
-      hover:
-         map.merge(
-            map.get($cx-list-item, hover),
-            (
-               box-shadow: none,
-               border-color: transparent,
-            )
-         ),
-      focus:
-         map.merge(
-            map.get($cx-list-item, selected-cursor),
-            (
-               box-shadow: none,
-               border-color: transparent,
-            )
-         ),
-      disabled: (
-         color: rgba(128, 128, 128, 0.5),
-      ),
-   ),
-) !default;

package/src/widgets/CxCredit.scss

@@ -1,4 +1,6 @@
 @use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
 
 @mixin cx-cxcredit($name: "cxcredit", $besm: $cx-besm) {
    $block: map.get($besm, block);

package/src/widgets/FlexBox.scss

@@ -1,25 +1,30 @@
 @use "sass:map";
+@use "sass:math";
+@use "../util/scss/screen-size.scss" as *;
+@use "../util/scss/pad-size.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/besm.scss" as *;
 
 @mixin cx-flexbox-spacing($divider, $besm: $cx-besm) {
    $state: map.get($besm, state);
    @each $pad, $size in $cx-pad-size {
       &.#{$state}#{$pad}-hspacing {
-         margin-left: cx-divide(-$size, $divider);
-         margin-right: cx-divide(-$size, $divider);
+         margin-left: -(math.div($size, $divider));
+         margin-right: -(math.div($size, $divider));
 
          & > * {
-            margin-left: cx-divide($size, $divider);
-            margin-right: cx-divide($size, $divider);
+            margin-left: math.div($size, $divider);
+            margin-right: math.div($size, $divider);
          }
       }
 
       &.#{$state}#{$pad}-vspacing {
-         margin-top: cx-divide(-$size, $divider);
-         margin-bottom: cx-divide(-$size, $divider);
+         margin-top: -(math.div($size, $divider));
+         margin-bottom: -(math.div($size, $divider));
 
          & > * {
-            margin-top: cx-divide($size, $divider);
-            margin-bottom: cx-divide($size, $divider);
+            margin-top: math.div($size, $divider);
+            margin-bottom: math.div($size, $divider);
          }
       }
    }
@@ -121,21 +126,21 @@
       }
 
       &.#{$state}target-phone {
-         @media not screen and (min-width: $cx-screen-size-small) {
+         @media not screen and (min-width: $screen-size-small) {
             display: block;
             @include cx-flexbox-spacing(1, $besm);
          }
       }
 
       &.#{$state}target-tablet {
-         @media not screen and (min-width: $cx-screen-size-medium) {
+         @media not screen and (min-width: $screen-size-medium) {
             display: block;
             @include cx-flexbox-spacing(1, $besm);
          }
       }
 
       &.#{$state}target-desktop {
-         @media not screen and (min-width: $cx-screen-size-large) {
+         @media not screen and (min-width: $screen-size-large) {
             display: block;
             @include cx-flexbox-spacing(1, $besm);
          }

package/src/widgets/Heading.scss

@@ -1,3 +1,9 @@
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "./variables.scss" as *;
+@use "./maps.scss" as *;
 @use "sass:map";
 
 @mixin cxb-heading($name: "heading", $besm: $cx-besm) {

package/src/widgets/HighlightedSearchText.scss

@@ -1,8 +1,15 @@
+@use "sass:math";
 @use "sass:map";
+@use "./variables.scss" as *;
+@use "./maps.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
 
 @mixin cxb-highlightedsearchtext(
    $name: "highlightedsearchtext",
-   $styles: $cx-highlightedsearchtext-style-map,
+   $styles: $cx-highlighedsearchtext-style-map,
    $besm: $cx-besm
 ) {
    $block: map.get($besm, block);

package/src/widgets/Icon.scss

@@ -1,3 +1,9 @@
+@use "sass:math";
+@use "./box" as *;
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "../util/scss/include.scss" as *;
 @use "sass:map";
 
 @mixin cx-icon($name: "icon", $size: $cx-default-icon-size, $besm: $cx-besm) {

package/src/widgets/List.scss

@@ -1,4 +1,11 @@
 @use "sass:map";
+@use "sass:math";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/defaults.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "./lists.scss" as *;
+@use "./variables.scss" as *;
 
 @mixin cx-list($name: "list", $besm: $cx-besm) {
    $block: map.get($besm, block);

package/src/widgets/List.tsx

@@ -335,13 +335,12 @@ export class List extends StyledContainerBase<ListConfig> {
                },
             } as GroupingConfig;
          }
-         return g;
-      });
-
-      normalized.forEach((g) => {
-         if (g.header) g.header = Widget.create(g.header);
-
-         if (g.footer) g.footer = Widget.create(g.footer);
+         // Clone to avoid mutating the original config
+         return {
+            ...g,
+            header: g.header ? Widget.create(g.header) : undefined,
+            footer: g.footer ? Widget.create(g.footer) : undefined,
+         };
       });
 
       this.adapter.groupBy(normalized);

package/src/widgets/ProgressBar.scss

@@ -1,3 +1,12 @@
+@use "sass:math";
+@use "./box.scss" as *;
+@use "./variables.scss" as *;
+@use "./maps.scss" as *;
+
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
 @use "sass:map";
 
 @mixin cx-progressbar(

package/src/widgets/Resizer.scss

@@ -1,10 +1,13 @@
+@use "sass:math";
 @use "sass:map";
 
-@mixin cx-resizer(
-   $name: 'resizer',
-   $besm: $cx-besm
-) {
+@use "./box.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
 
+@mixin cx-resizer($name: "resizer", $besm: $cx-besm) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $state: map.get($besm, state);
@@ -19,7 +22,6 @@
          cursor: col-resize;
       }
 
-
       &.#{$state}horizontal {
          height: 5px;
          cursor: row-resize;
@@ -39,6 +41,6 @@
    }
 }
 
-@if (cx-should-include('cx/widgets/Resizer')) {
+@if (cx-should-include("cx/widgets/Resizer")) {
    @include cx-resizer();
-}
+}

package/src/widgets/Section.scss

@@ -1,56 +1,53 @@
-@use "sass:map";
-
-@mixin cx-section(
-   $name: 'section',
-   $mods: $cx-section-mods,
-   $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} {
-      flex-direction: column;
-      display: flex;
-      box-sizing: border-box;
-
-      @include cx-add-rules($cx-section-styles);
-
-      @each $modname, $config in $mods {
-        &.#{$mod}#{$modname} {
-          @include cx-add-state-rules($config, default);
-        }
-      }
-      
-   }
-
-   .#{$element}#{$name}-header {
-      margin: 0 1.5rem;
-      padding: 1rem 0;
-      box-sizing: border-box;
-      border-bottom: 1px solid rgba(128, 128, 128, 0.3);
-   }
-
-   .#{$element}#{$name}-body {
-      flex: 1 1 auto;
-      box-sizing: border-box;
-      overflow: auto;
-
-      .#{$state}pad > & {
-         padding: 1rem 1.5rem;
-      }
-   }
-
-   .#{$element}#{$name}-footer {
-      margin: 0 1.5rem;
-      padding: 1rem 0;
-      box-sizing: border-box;
-      border-top: 1px solid rgba(128, 128, 128, 0.3);
-   }
-}
-
-@if (cx-should-include('cx/widgets/Section')) {
-   @include cx-section();
-}
+@use "sass:map";
+@use "sass:math";
+@use "./maps" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "./variables" as *;
+
+@mixin cx-section($name: "section", $mods: $cx-section-mods, $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} {
+      flex-direction: column;
+      display: flex;
+      box-sizing: border-box;
+
+      @include cx-add-rules($cx-section-styles);
+
+      @each $modname, $config in $mods {
+         &.#{$mod}#{$modname} {
+            @include cx-add-state-rules($config, default);
+         }
+      }
+   }
+
+   .#{$element}#{$name}-header {
+      box-sizing: border-box;
+      @include cx-add-state-rules($cx-section-header-state-style-map, default);
+   }
+
+   .#{$element}#{$name}-body {
+      flex: 1 1 auto;
+      box-sizing: border-box;
+      overflow: auto;
+
+      .#{$state}pad > & {
+         @include cx-add-state-rules($cx-section-body-state-style-map, default);
+      }
+   }
+
+   .#{$element}#{$name}-footer {
+      box-sizing: border-box;
+      @include cx-add-state-rules($cx-section-footer-state-style-map, default);
+   }
+}
+
+@if (cx-should-include("cx/widgets/Section")) {
+   @include cx-section();
+}

package/src/widgets/animations.scss

@@ -1,4 +1,6 @@
-@if cx-call-once('cx/widgets/animations') {
+@use "../util/scss/call-once" as *;
+
+@if cx-call-once("cx/widgets/animations") {
    @keyframes cx-rotate {
       from {
          transform: rotate(0);
@@ -8,4 +10,4 @@
          transform: rotate(360deg);
       }
    }
-}
+}

package/src/widgets/box.scss

@@ -0,0 +1,47 @@
+//
+// Boxes
+// -----
+//
+// Boxes are inline-block elements which are likely to appear in the same row, such as buttons and form elements.
+// These elements should have the same height in order to avoid problems when put together in a toolbar
+// or a complex form.
+//
+// To ensure the height consistency, all box models should use the same line-height, top/bottom padding and border-width;
+//
+// For elements which do not have a natural border, such as checkboxes, radios and buttons,
+// border-color should be set to transparent.
+//
+//  box height = line-height + padding-top + padding-bottom + border-width-top + border-width-bottom
+//
+// Some browsers do not respect the line-height being set and therefore explicit height value is
+// calculated and set on all box elements.
+//
+// Hint: Use em units to make the box height grow with the font-size, but note that the elements
+//       will not be aligned in case of pixel boundaries and icons may appear blurry in some desktop browsers.
+//
+
+@use "../util/scss/clockwise.scss" as *;
+
+$cx-default-box-font-size: 13px !default;
+$cx-default-box-font-family: inherit !default;
+$cx-default-box-line-height: 16px !default;
+
+// Box padding - individual values for full control
+$cx-default-box-padding: 5px !default;
+$cx-default-box-padding-top: cx-top($cx-default-box-padding) !default;
+$cx-default-box-padding-right: cx-right($cx-default-box-padding) !default;
+$cx-default-box-padding-bottom: cx-bottom($cx-default-box-padding) !default;
+$cx-default-box-padding-left: cx-left($cx-default-box-padding) !default;
+
+// Box border width - individual values for full control
+$cx-default-box-border-width: 1px !default;
+$cx-default-box-border-width-top: cx-top($cx-default-box-border-width) !default;
+$cx-default-box-border-width-right: cx-right($cx-default-box-border-width) !default;
+$cx-default-box-border-width-bottom: cx-bottom($cx-default-box-border-width) !default;
+$cx-default-box-border-width-left: cx-left($cx-default-box-border-width) !default;
+
+//Icons
+$cx-default-icon-size: 16px !default;
+
+// Empty Texts
+$cx-default-empty-text-color: rgba(128, 128, 128, 0.7) !default;

package/src/widgets/drag-drop/DragClone.scss

@@ -1,7 +1,16 @@
 @use "sass:map";
+@use "sass:math";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
 
 @mixin cx-dragclone(
-   $name: 'dragclone',
+   $name: "dragclone",
    $style: $cx-dragclone-style,
    $besm: $cx-besm
 ) {
@@ -11,7 +20,6 @@
    $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
-
       @include cx-add-rules($style);
 
       pointer-events: none;
@@ -31,6 +39,6 @@
    }
 }
 
-@if (cx-should-include('cx/widgets/DragClone')) {
+@if (cx-should-include("cx/widgets/DragClone")) {
    @include cx-dragclone();
-}
+}

package/src/widgets/drag-drop/DragHandle.scss

@@ -1,9 +1,15 @@
 @use "sass:map";
+@use "sass:math";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
 
-@mixin cx-draghandle(
-   $name: 'draghandle',
-   $besm: $cx-besm
-) {
+@mixin cx-draghandle($name: "draghandle", $besm: $cx-besm) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $state: map.get($besm, state);
@@ -14,6 +20,6 @@
    }
 }
 
-@if (cx-should-include('cx/widgets/DragHandle')) {
+@if (cx-should-include("cx/widgets/DragHandle")) {
    @include cx-draghandle();
-}
+}

package/src/widgets/drag-drop/DragSource.scss

@@ -1,9 +1,15 @@
 @use "sass:map";
+@use "sass:math";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
 
-@mixin cx-dragsource(
-   $name: 'dragsource',
-   $besm: $cx-besm
-) {
+@mixin cx-dragsource($name: "dragsource", $besm: $cx-besm) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $state: map.get($besm, state);
@@ -22,6 +28,6 @@
    }
 }
 
-@if (cx-should-include('cx/widgets/DragSource')) {
+@if (cx-should-include("cx/widgets/DragSource")) {
    @include cx-dragsource();
-}
+}