cx 26.0.9 → 26.0.10

package/build/util/scss/divide.scss

@@ -1,3 +0,0 @@
-@function cx-divide($a, $b) {
-   @return $a / $b;
-}

package/build/util/scss/include.scss

@@ -1,48 +0,0 @@
-@use "sass:map";
-@import "call-once";
-@import "colors";
-
-$cx-include-all: true !default;
-
-$cx-excluded: () !default;
-$cx-used: null !default;
-
-$cx-dependencies: () !default;
-
-@function cx-should-include($name, $once: true) {
-   @return (
-       (map.get($cx-excluded, $name) != true) and
-       ($cx-include-all or
-       ($cx-used != null and map.get($cx-used, $name) == true))
-   )
-   and ($once != true or cx-call-once($name));
-}
-
-@function cx-included($name) {
-   @return cx-called-once($name);
-}
-
-@function cx-widget($name) {
-   @if (map.get($cx-excluded, $name)) {
-      @return 0;
-   }
-   $cx-used: map.merge($cx-used, ($name: true)) !global;
-   $dummy: 1;
-   $deps: map.get($cx-dependencies, $name);
-   @if ($deps == null) {
-      @return 0;
-   }
-   @each $dep in $deps {
-      $dummy: cx-widget($dep);
-   }
-   @return $dummy;
-}
-
-@mixin cx-widgets($names...) {
-   $dummy: 1;
-   $cx-used: () !default !global;
-
-   @each $name in $names {
-      $dummy: cx-widget($name)
-   }
-}

package/build/util/scss/index.scss

@@ -1,9 +0,0 @@
-@import "add-rules";
-@import "calc";
-@import "call-once";
-@import "clockwise";
-@import "colors";
-@import "deep-merge";
-@import "deep-get";
-@import "include";
-@import "divide";

package/build/variables.scss

@@ -1,217 +0,0 @@
-// FUNCTIONS
-@import "util/scss/index";
-
-// SCREEN SIZE
-$cx-screen-size-small: 400px !default;
-$cx-screen-size-medium: 800px !default;
-$cx-screen-size-large: 1300px !default;
-$cx-screen-size-extra-large: 1800px !default;
-
-//
-// BESM
-//
-// B - block - top level HTML element
-// E - element - part of the component (block)
-// S - state - indicator of the component state which affects the appearance
-// M - mod - user supplied instruction which overrides default appearance
-//
-
-$cx-besm: (
-   block: "cxb-",
-   element: "cxe-",
-   state: "cxs-",
-   mod: "cxm-"
-) !default;
-
-//
-// 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.
-//
-
-$cx-default-box-font-size: 13px !default;
-$cx-default-box-font-family: inherit !default;
-$cx-default-box-line-height: 16px !default;
-$cx-default-box-padding: 5px !default; //should not be a list
-$cx-default-box-border-width: 1px !default;
-
-// Borders
-// -------
-
-$cx-default-border-color: #bfbfbf !default;
-$cx-default-border-radius: 0 !default;
-$cx-default-border-width: 1px !default;
-
-// Padding
-// -------
-
-$cx-default-container-padding: 5px !default;
-
-// Empty Texts
-// ------------
-//
-// Displayed instead of whitespace
-
-$cx-default-empty-text-color: rgba(128, 128, 128, 0.7) !default;
-
-$cx-empty-text: (
-   color: $cx-default-empty-text-color
-) !default;
-
-//Icons
-$cx-default-icon-size: 16px !default;
-
-//Selection
-$cx-selection-background-color: rgba(135, 206, 250, 0.6);
-
-//List
-$cx-default-list-item-padding: 5px 10px !default;
-
-//Lists
-$cx-list: (
-   default: (
-      -webkit-overflow-scrolling: touch
-   ),
-   hover: (),
-   focus: (
-      outline: none
-   )
-);
-
-$cx-list-item: (
-   default: (),
-   hover: (
-      background-color: rgba(128, 128, 128, 0.1),
-      outline: none,
-      cursor: pointer
-   ),
-   cursor: (
-      background-color: rgba(123, 190, 255, 0.15),
-      outline: none
-   ),
-   selected: (
-      background-color: rgba(123, 190, 255, 0.4)
-   ),
-   selected-hover: (
-      background-color: rgba(123, 190, 255, 0.2)
-   ),
-   selected-cursor: (
-      background-color: rgba(123, 190, 255, 0.3),
-      outline: none
-   ),
-   disabled: (
-      cursor: default,
-      opacity: 0.5,
-      pointer-events: none
-   ),
-   active: (
-      //causes flickering
-         //background: rgba(123,190,255, 0.7)
-   )
-) !default;
-
-$cx-default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-   "Helvetica Neue", Arial, sans-serif !default;
-
-$cx-default-font-size: 14px !default;
-$cx-default-color: #373a3c !default;
-
-$cx-element-style-map: (
-   html: (
-      font-family: $cx-default-font-family,
-      font-size: $cx-default-font-size,
-      height: 100%,
-      background-color: #eee
-   ),
-   body: (
-      margin: 0,
-      padding: 0,
-      height: 100%,
-      color: $cx-default-color
-   ),
-   h1: (
-      font-size: 2rem,
-      line-height: 1.1,
-      margin: 0 0 0.75rem 0,
-      font-weight: 500
-   ),
-   h2: (
-      font-size: 1.75rem,
-      line-height: 1.1,
-      margin: 0 0 0.5rem 0,
-      font-weight: 500
-   ),
-   h3: (
-      font-size: 1.5rem,
-      line-height: 1.1,
-      margin: 0 0 0.5rem 0,
-      font-weight: 500
-   ),
-   h4: (
-      font-size: 1.3rem,
-      line-height: 1.1,
-      margin: 0 0 0.5rem 0,
-      font-weight: 500
-   ),
-   h5: (
-      font-size: 1.15rem,
-      line-height: 1.1,
-      margin: 0 0 0.5rem 0,
-      font-weight: 500
-   ),
-   h6: (
-      font-size: 1rem,
-      line-height: 1.1,
-      margin: 0 0 0.5rem 0,
-      font-weight: 500
-   ),
-   p: (
-      margin: 0 0 1rem 0
-   ),
-   a: (
-      text-decoration: none,
-      color: #0275d8
-   ),
-   "a:hover": (
-      text-decoration: underline
-   ),
-   ul: (
-      margin: 0 0 1rem 0
-   ),
-   ol: (
-      margin: 0 0 1rem 0
-   ),
-   th: (
-      font-weight: 500
-   ),
-   text: (
-      fill: currentColor,
-      stroke: none
-   ),
-   table: (
-      font-size: inherit
-   )
-) !default;
-
-$cx-default-cover-border-color: $cx-default-border-color !default;
-$cx-default-cover-background-color: white !default;
-
-@import "charts/variables";
-@import "ui/variables";
-@import "widgets/variables";

package/build/widgets/AccessorBindings.spec.d.ts

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

package/build/widgets/AccessorBindings.spec.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx } from "cx/jsx-runtime";
-import assert from "assert";
-import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
-import { Store } from "../data/Store";
-import { expr } from "../ui";
-import { createTestRenderer } from "../util/test/createTestRenderer";
-let { $page } = createAccessorModelProxy();
-describe("Accessors", () => {
-    it("work as regular bindings", () => {
-        let widget = (_jsx("cx", { children: _jsx("div", { text: $page.text }) }));
-        let store = new Store({
-            data: {
-                $page: {
-                    text: "Test",
-                },
-            },
-        });
-        const component = createTestRenderer(store, widget);
-        let tree = component.toJSON();
-        assert(tree && !Array.isArray(tree));
-        assert(tree.type === "div");
-        assert.deepStrictEqual(tree.children, ["Test"]);
-    });
-    it("support expressions", () => {
-        let widget = (_jsx("cx", { children: _jsx("div", { text: expr($page.a, $page.b, (a, b) => a + b) }) }));
-        let store = new Store({
-            data: {
-                $page: {
-                    a: 1,
-                    b: 3,
-                },
-            },
-        });
-        const component = createTestRenderer(store, widget);
-        let tree = component.toJSON();
-        assert(tree && !Array.isArray(tree));
-        assert(tree.type === "div");
-        assert.deepStrictEqual(tree.children, ["4"]);
-    });
-});

package/build/widgets/Button.scss

@@ -1,119 +0,0 @@
-@use "sass:map";
-
-@mixin cx-button(
-   $name: "button",
-   $state-style-map: $cx-button-state-style-map,
-   $mods: $cx-button-mods,
-   $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} {
-      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);
-
-      height: cx-calc(
-         $line-height,
-         cx-top($padding),
-         cx-bottom($padding),
-         cx-top($border-width),
-         cx-bottom($border-width)
-      );
-
-      @include cx-add-state-rules($state-style-map, "default");
-
-      &::-moz-focus-inner {
-         border: 0;
-         padding: 0;
-         margin: -1px;
-      }
-
-      &:hover {
-         @include cx-add-state-rules($state-style-map, "hover");
-      }
-
-      &:focus {
-         @include cx-add-state-rules($state-style-map, "focus");
-      }
-
-      &:hover:focus {
-         @include cx-add-state-rules($state-style-map, "hover-focus");
-      }
-
-      &:active,
-      &.#{$state}pressed {
-         @include cx-add-state-rules($state-style-map, "active");
-      }
-
-      &[disabled],
-      &.#{$state}disabled {
-         @include cx-add-state-rules($state-style-map, "disabled");
-      }
-
-      @each $modname, $config in $mods {
-         &.#{$mod}#{$modname} {
-            @include cx-add-state-rules($config, default);
-
-            &[disabled],
-            &.#{$state}disabled {
-               @include cx-add-state-rules($config, disabled);
-            }
-
-            &:hover {
-               @include cx-add-state-rules($config, hover);
-            }
-
-            &:focus {
-               @include cx-add-state-rules($config, focus);
-            }
-
-            &:active,
-            &.#{$state}pressed {
-               @include cx-add-state-rules($config, active);
-            }
-         }
-      }
-   }
-
-   $padding: cx-get-state-rule($state-style-map, default, padding);
-
-   .#{$element}#{$name}-icon {
-      display: inline-block;
-      position: absolute;
-      top: 50%;
-      left: cx-left($padding) * 0.5;
-      margin-top: -$icon-size * 0.5;
-      height: $icon-size;
-      width: $icon-size;
-      line-height: $icon-size;
-      text-align: center;
-   }
-
-   .#{$element}#{$name}-baseline {
-      display: inline-block;
-      width: 1px;
-      margin-left: -1px;
-   }
-
-   .#{$block}#{$name}.#{$state}icon {
-      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);
-      }
-   }
-}
-
-@if (cx-should-include("cx/widgets/Button")) {
-   @include cx-button;
-}

package/build/widgets/Button.variables.scss

@@ -1,117 +0,0 @@
-@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-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;
-$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/build/widgets/CxCredit.scss

@@ -1,39 +0,0 @@
-@use "sass:map";
-
-@mixin cx-cxcredit($name: "cxcredit", $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} {
-      width: 50px;
-      height: 50px;
-      opacity: 0.5;
-      transition: opacity 0.3s ease-in-out;
-      background: rgba(255, 255, 255, 0.1);
-      cursor: pointer;
-      position: fixed;
-      bottom: 20px;
-      right: 20px;
-
-      &:hover {
-         opacity: 1;
-      }
-
-      &.#{$mod}inline {
-         position: relative;
-         bottom: auto;
-         right: auto;
-      }
-   }
-
-   .#{$element}#{$name}-icon {
-      width: 100%;
-      height: 100%;
-   }
-}
-
-@if (cx-should-include("cx/widgets/CxCredit")) {
-   @include cx-cxcredit();
-}