cx 26.0.6 → 26.0.9

package/build/widgets/grid/Pagination.scss

@@ -0,0 +1,115 @@
+@use "sass:map";
+
+@mixin cx-pagination(
+   $name: "pagination",
+   $state-style-map: $cx-grid-pagination-state-style-map,
+   $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} {
+      display: inline-block;
+      white-space: nowrap;
+      margin: 0;
+      padding: 0;
+      line-height: $cx-default-box-line-height;
+      box-sizing: border-box;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      user-select: none;
+
+      @include cx-add-state-rules($cx-list, default);
+
+      &:hover {
+         @include cx-add-state-rules($cx-list, hover);
+      }
+
+      &:focus {
+         @include cx-add-state-rules($cx-list, focus);
+      }
+   }
+
+   .#{$element}#{$name}-page {
+      display: inline-block;
+      box-sizing: border-box;
+      border-style: solid;
+      margin-left: -1px;
+      text-decoration: none;
+      cursor: pointer;
+      border-width: $cx-grid-pagination-default-border-width;
+      border-color: $cx-grid-pagination-default-border-color;
+      border-radius: $cx-grid-pagination-default-border-radius;
+      padding: $cx-grid-pagination-default-padding;
+
+      @include cx-add-state-rules($state-style-map, default);
+
+      position: relative;
+
+      &:first-child {
+         border-top-left-radius: $cx-grid-pagination-default-outer-border-radius;
+         border-bottom-left-radius: $cx-grid-pagination-default-outer-border-radius;
+
+         &:after {
+            content: "<";
+            visibility: hidden;
+         }
+      }
+
+      &:last-child {
+         border-top-right-radius: $cx-grid-pagination-default-outer-border-radius;
+         border-bottom-right-radius: $cx-grid-pagination-default-outer-border-radius;
+
+         &:after {
+            content: ">";
+            visibility: hidden;
+         }
+      }
+
+      &:hover {
+         @include cx-add-state-rules($state-style-map, hover);
+
+         &:focus {
+            @include cx-add-state-rules($state-style-map, cursor);
+         }
+      }
+
+      &:active {
+         @include cx-add-state-rules($state-style-map, active);
+      }
+
+      &.#{$state}active {
+         @include cx-add-state-rules($state-style-map, selected);
+
+         .#{$block}#{$name}:focus > & {
+            @include cx-add-state-rules($state-style-map, selected-cursor);
+         }
+      }
+
+      &.#{$state}disabled {
+         @include cx-add-state-rules($state-style-map, disabled);
+      }
+   }
+
+   .#{$element}#{$name}-icon-prev-page,
+   .#{$element}#{$name}-icon-next-page {
+      width: $icon-size;
+      height: $icon-size;
+      font-size: $icon-size;
+      line-height: $icon-size;
+      position: absolute;
+      top: 50%;
+      margin-top: -$icon-size * 0.5;
+      left: 50%;
+      margin-left: -$icon-size * 0.5;
+   }
+
+   .#{$element}#{$name}-icon-prev-page {
+      transform: rotate(180deg);
+   }
+}
+
+@if (cx-should-include("cx/widgets/Pagination")) {
+   @include cx-pagination();
+}

package/build/widgets/grid/TreeNode.scss

@@ -0,0 +1,90 @@
+@use "sass:map";
+
+@mixin cx-treenode(
+   $name: "treenode",
+   $icon-size: $cx-default-icon-size,
+   $handle-size: $cx-default-input-tool-size,
+   $handle-state-style-map: $cx-input-right-icon-state-style-map,
+   $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} {
+      padding-left: $handle-size + $icon-size * 0.25;
+      position: relative;
+
+      &.#{$state}icon {
+         padding-left: $handle-size + $icon-size + $icon-size * 0.25;
+      }
+
+      @for $i from 1 through 20 {
+         &.#{$state}level-#{$i} {
+            margin-left: #{($i * 20)}px;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-handle {
+      position: absolute;
+
+      @include cx-add-state-rules($handle-state-style-map, default);
+
+      left: 0;
+      top: 50%;
+      margin-top: -$handle-size * 0.5;
+      bottom: 0;
+      width: $handle-size + $icon-size;
+      height: $handle-size;
+
+      &:hover {
+         @include cx-add-state-rules($handle-state-style-map, hover);
+      }
+
+      &:active {
+         @include cx-add-state-rules($handle-state-style-map, active);
+      }
+   }
+
+   .#{$element}#{$name}-arrow {
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      margin-top: -$icon-size * 0.5;
+      margin-left: ($handle-size - $icon-size) * 0.5;
+      height: $icon-size;
+      width: $icon-size;
+      line-height: $icon-size;
+      transform: rotate(-90deg);
+      transition: transform 0.2s;
+
+      .#{$state}expanded & {
+         transform: rotate(0);
+      }
+   }
+
+   .#{$element}#{$name}-icon {
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      margin-top: -$icon-size * 0.5;
+      margin-left: ($handle-size + $icon-size) * 0.5;
+      height: $icon-size;
+      width: $icon-size;
+      line-height: $icon-size;
+   }
+
+   .#{$block}grid.#{$mod}tree {
+      td {
+         border-top: none;
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/TreeNode")) {
+   @include cx-treenode();
+}

package/build/widgets/grid/index.scss

@@ -0,0 +1,4 @@
+
+@import 'Pagination';
+@import 'TreeNode';
+@import 'Grid';

package/build/widgets/grid/variables.scss

@@ -0,0 +1,137 @@
+// GRID
+$cx-default-grid-font-size: $cx-default-box-font-size !default;
+$cx-default-grid-border-color: $cx-default-border-color !default;
+$cx-default-grid-border-radius: null !default;
+$cx-default-grid-box-shadow: null !default;
+
+// header
+$cx-default-grid-header-font-size: $cx-default-box-font-size !default;
+$cx-default-grid-header-font-weight: normal !default;
+$cx-default-grid-header-line-height: null !default;
+$cx-default-grid-header-color: $cx-default-color !default;
+$cx-default-grid-header-background-color: #eee !default;
+$cx-default-grid-header-border-color: $cx-default-border-color !default;
+$cx-default-grid-header-box-shadow: null !default;
+$cx-default-grid-header-padding: null !default;
+
+@use "sass:color";
+
+$cx-grid-header-state-style-map: (
+   default: (
+      font-size: $cx-default-grid-header-font-size,
+      font-weight: $cx-default-grid-header-font-weight,
+      line-height: $cx-default-grid-header-line-height,
+      color: $cx-default-grid-header-color,
+      background-color: $cx-default-grid-header-background-color,
+      border-color: $cx-default-grid-header-border-color,
+      background-clip: border-box,
+      padding: $cx-default-grid-header-padding,
+   ),
+   hover: (
+      background-color: color.adjust($cx-default-grid-header-background-color, $lightness: -2%),
+   ),
+   sorted: (
+      background-color: color.adjust($cx-default-grid-header-background-color, $lightness: -7%),
+   ),
+   sorted-hover: (
+      background-color: color.adjust($cx-default-grid-header-background-color, $lightness: -5%),
+   ),
+) !default;
+
+// data
+$cx-default-grid-data-font-size: null !default;
+$cx-default-grid-data-font-weight: null !default;
+$cx-default-grid-data-line-height: null !default;
+$cx-default-grid-data-background-color: transparent !default;
+$cx-default-grid-data-alternate-background-color: null !default;
+$cx-default-grid-data-border-color: $cx-default-grid-border-color !default;
+$cx-default-grid-data-padding: 5px !default;
+$cx-default-grid-caption-gap: 15px !default;
+
+$cx-grid-data-state-style-map: cx-deep-map-merge(
+   $cx-list-item,
+   (
+      default: (
+         font-size: $cx-default-grid-data-font-size,
+         line-height: $cx-default-grid-data-line-height,
+         font-weight: $cx-default-grid-data-font-weight,
+         background-color: $cx-default-grid-data-background-color,
+         border-color: $cx-default-grid-data-border-color,
+         padding: $cx-default-grid-data-padding,
+      ),
+      alternate: (
+         background-color: $cx-default-grid-data-alternate-background-color,
+      ),
+   )
+) !default;
+
+$cx-grid-group-caption-level-style-map: (
+   level-1: (
+      font-weight: bold,
+      font-size: 115%,
+   ),
+   level-2: (
+      font-weight: bold,
+      font-size: 130%,
+      border-bottom: 1px solid grey,
+   ),
+   level-3: (
+      font-weight: bold,
+      font-size: 145%,
+      border-bottom: 1px solid grey,
+   ),
+   level-4: (
+      font-weight: bold,
+      font-size: 160%,
+      border-bottom: 1px solid grey,
+   ),
+);
+
+$cx-grid-group-footer-level-style-map: (
+   level-1: (
+      font-weight: bold,
+      border-top: 1px solid $cx-default-grid-border-color,
+   ),
+   level-2: (
+      font-weight: bold,
+      font-size: 110%,
+      border-top: 1px solid grey,
+   ),
+   level-3: (
+      font-weight: bold,
+      font-size: 120%,
+      border-top: 1px solid grey,
+   ),
+   level-4: (
+      font-weight: bold,
+      font-size: 130%,
+      border-top: 1px solid grey,
+   ),
+);
+
+// pagination
+$cx-grid-pagination-default-border-width: $cx-default-border-width !default;
+$cx-grid-pagination-default-border-color: $cx-default-border-color !default;
+$cx-grid-pagination-default-border-radius: null !default;
+$cx-grid-pagination-default-outer-border-radius: $cx-default-border-radius !default;
+$cx-grid-pagination-default-padding: cx-top($cx-default-box-padding) 2 * cx-top($cx-default-box-padding) !default;
+
+$cx-grid-pagination-state-style-map: cx-deep-map-merge($cx-list-item, ()) !default;
+
+$cx-grid-cell-cursor-style: (
+   left: -1px,
+   top: -1px,
+   right: -1px,
+   bottom: -1px,
+   background: rgba(green, 0.1),
+   border: 2px solid rgba(green, 1),
+);
+
+@use "sass:map";
+
+$cx-dependencies: map.merge(
+   $cx-dependencies,
+   (
+      "cx/widgets/Grid": "cx/widgets/DragClone",
+   )
+);

package/build/widgets/index.scss

@@ -0,0 +1,16 @@
+@import "animations";
+@import "Button";
+@import "List";
+@import "CxCredit";
+@import "Section";
+@import "Heading";
+@import "FlexBox";
+@import "Icon";
+@import "form/index";
+@import "nav/index";
+@import "overlay/index";
+@import "grid/index";
+@import "drag-drop/index";
+@import "ProgressBar";
+@import "Resizer";
+@import "HighlightedSearchText";

package/build/widgets/nav/Link.scss

@@ -0,0 +1,20 @@
+@use "sass:map";
+
+@mixin cx-link($name: "link", $besm: $cx-besm, $state-style-map: $cx-link-state-style-map) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      &:hover {
+         @include cx-add-state-rules($state-style-map, hover);
+      }
+      &.#{$state}active {
+         @include cx-add-state-rules($state-style-map, active);
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/Link")) {
+   @include cx-link();
+}

package/build/widgets/nav/Menu.scss

@@ -0,0 +1,76 @@
+@use "sass:map";
+
+@mixin cx-menu($name: "menu", $state-style-map: $cx-menu-state-style-map, $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} {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      @include cx-add-state-rules($state-style-map, default);
+
+      &.#{$state}horizontal {
+         white-space: nowrap;
+
+         & > .#{$element}#{$name}-item {
+            display: inline-block;
+            user-select: none;
+
+            @each $size, $value in $cx-menu-padding-options {
+               &.#{$state}size-#{$size} > .#{$mod}#{$name} {
+                  margin: 0 cx-right($value) 0 cx-left($value);
+               }
+            }
+         }
+      }
+
+      @each $size, $value in $cx-menu-padding-options {
+         &.#{$state}vertical.#{$state}#{$size}-item-padding .#{$mod}#{$name} {
+            margin: $value;
+            display: block;
+         }
+      }
+
+      .#{$element}#{$name}-item {
+         & > hr {
+            border: none;
+            border-top: 1px solid $cx-default-menu-separator-color;
+            margin: map.get($cx-menu-padding-options, medium);
+         }
+
+         &.#{$state}hidden {
+            visibility: hidden;
+            position: absolute;
+         }
+      }
+
+      &.#{$state}overflow {
+         overflow: hidden;
+         display: flex;
+
+         & > .#{$element}#{$name}-item:last-child {
+            visibility: hidden;
+            position: absolute;
+            max-height: 100%;
+         }
+
+         &.#{$state}pack > .#{$element}#{$name}-item:last-child {
+            visibility: visible;
+            position: relative;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-spacer {
+      flex: 1 1 0%;
+   }
+}
+
+@if (cx-should-include("cx/widgets/Menu")) {
+   @include cx-menu();
+}

package/build/widgets/nav/Menu.variables.scss

@@ -0,0 +1,25 @@
+@use "sass:map";
+
+// MENU
+$cx-menu-state-style-map: $cx-list !default;
+$cx-default-menu-separator-color: lightgray !default;
+
+// MENU ITEM
+$cx-menu-padding-options: (
+   xsmall: $cx-default-padding-extra-small 2 * $cx-default-padding-extra-small,
+   small: $cx-default-padding-small 2 * $cx-default-padding-small,
+   medium: $cx-default-padding-medium 2 * $cx-default-padding-medium,
+   large: $cx-default-padding-large 2 * $cx-default-padding-large,
+   xlarge: $cx-default-padding-extra-large 2 * $cx-default-padding-extra-large,
+) !default;
+
+$cx-menu-list-item: () !default;
+
+$cx-dependencies: map.merge(
+   $cx-dependencies,
+   (
+      "cx/widgets/Menu": "cx/widgets/MenuItem",
+      "cx/widgets/MenuItem": "cx/widgets/Dropdown",
+      "cx/widgets/SubMenu": "cx/widgets/MenuItem",
+   )
+);

package/build/widgets/nav/MenuItem.d.ts

@@ -30,6 +30,7 @@ export interface MenuItemConfig extends HtmlElementConfig {
     padding?: string;
     hideCursor?: boolean;
     dropdown?: any;
+    onClick?: string | ((e: React.MouseEvent | null, instance: HtmlElementInstance<MenuItem>) => void);
 }
 export declare class MenuItemInstance extends HtmlElementInstance<MenuItem> {
     horizontal?: boolean;

package/build/widgets/nav/MenuItem.scss

@@ -0,0 +1,130 @@
+@use "sass:map";
+
+@mixin cx-menuitem(
+   $name: "menuitem",
+   $state-style-map: cx-deep-map-merge($cx-list-item, $cx-menu-list-item),
+   $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}#{$name} {
+      box-sizing: border-box;
+      cursor: pointer;
+      position: relative;
+      border-radius: $cx-default-border-radius;
+
+      &:focus {
+         outline: none;
+      }
+
+      & > a:hover {
+         text-decoration: none;
+      }
+
+      .#{$state}focusable > &.#{$state}cursor {
+         @include cx-add-state-rules($state-style-map, default);
+
+         &:hover {
+            @include cx-add-state-rules($state-style-map, hover);
+         }
+      }
+
+      .#{$state}focusable.#{$state}cursor > &.#{$state}cursor {
+         @include cx-add-state-rules($state-style-map, selected-cursor);
+      }
+
+      &.#{$state}disabled {
+         @include cx-add-state-rules($state-style-map, disabled);
+      }
+
+      & > a {
+         text-decoration: none;
+         color: inherit;
+
+         &:focus {
+            outline: none;
+         }
+      }
+
+      @each $size, $value in $cx-menu-padding-options {
+         &.#{$state}#{$size}-padding {
+            & > a,
+            & > span {
+               padding: $value;
+               line-height: $cx-default-box-line-height;
+               border: $cx-default-box-border-width solid transparent;
+               display: block;
+            }
+
+            &.#{$state}arrow {
+               padding-right: cx-calc($icon-size);
+            }
+
+            &.#{$state}icon {
+               padding-left: cx-calc($icon-size);
+            }
+
+            &.#{$state}empty {
+               padding-right: cx-calc($icon-size) * 0.5;
+            }
+
+            & > .#{$element}#{$name}-arrow {
+               right: cx-right($value) * 0.5;
+            }
+
+            & > .#{$element}#{$name}-button {
+               width: cx-calc(cx-left($value), $icon-size);
+            }
+         }
+      }
+   }
+
+   .#{$element}#{$name}-arrow {
+      position: absolute;
+      width: $icon-size;
+      height: $icon-size;
+      top: 50%;
+      margin-top: -$icon-size * 0.5;
+
+      .#{$state}vertical > & {
+         transform: rotate(-90deg);
+      }
+   }
+
+   .#{$element}#{$name}-button {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+   }
+
+   .#{$element}#{$name}-baseline {
+      display: inline-block;
+      width: 1px;
+      margin-left: -1px;
+      visibility: hidden;
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+   }
+
+   .#{$element}#{$name}-icon {
+      position: absolute;
+      width: $icon-size;
+      height: $icon-size;
+      top: 50%;
+      left: 50%;
+      margin-top: -$icon-size * 0.5;
+      margin-left: -$icon-size * 0.5;
+      text-align: center;
+      line-height: 1;
+      font-size: $icon-size;
+   }
+}
+
+@if (cx-should-include("cx/widgets/MenuItem")) {
+   @include cx-menuitem();
+}