cx 26.0.9 → 26.0.10

package/build/widgets/grid/Pagination.scss

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

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

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

package/build/widgets/grid/variables.scss

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

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

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

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

@@ -1,25 +0,0 @@
-@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.scss

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

package/build/widgets/nav/Route.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/build/widgets/nav/Route.spec.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "cx/jsx-runtime";
-import { Route } from "./Route";
-import { Store } from "../../data/Store";
-import { createTestRenderer } from "../../util/test/createTestRenderer";
-import assert from "assert";
-describe("Route", () => {
-    it("matching works for ~/widgets/color-pickers", () => {
-        let widget = (_jsx("cx", { children: _jsx(Route, { url: "~/widgets/color-pickers", route: "~/widgets/color-pickers", children: _jsx("div", {}) }) }));
-        let store = new Store();
-        const component = createTestRenderer(store, widget);
-        let tree = component.toJSON();
-        assert(tree && !Array.isArray(tree));
-        assert.equal(tree.type, "div");
-    });
-});