cx 26.0.9 → 26.0.11

package/build/widgets/form/Select.scss

@@ -1,101 +0,0 @@
-@use "sass:map";
-
-@import "../overlay/Dropdown";
-
-@mixin cx-select(
-   $name: "select",
-   $state-style-map: $cx-std-field-state-style-map,
-   $placeholder: $cx-input-placeholder,
-   $empty-text: $cx-empty-text,
-   $width: $cx-default-input-width,
-   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
-   $clear-state-style-map: $cx-clear-state-style-map,
-   $tool-state-style-map: $cx-input-right-icon-state-style-map,
-   $icon-size: $cx-default-input-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} {
-      @include cxb-field($besm, $state-style-map: $state-style-map, $width: $width, $input: true);
-
-      .#{$element}#{$name}-left-icon {
-         pointer-events: none;
-         @include cxe-field-button($besm, $left-icon-state-style-map);
-      }
-   }
-
-   $padding: cx-get-state-rule($state-style-map, default, "padding");
-
-   .#{$element}#{$name}-select {
-      @include cxe-field-input(
-         $besm,
-         $state-style-map,
-         $placeholder: $placeholder,
-         $overrides: (
-            padding: cx-top($cx-default-input-padding)
-               calc(
-                  #{cx-right($cx-default-input-padding)} + #{$cx-default-clear-size} - #{cx-right(
-                        $cx-default-input-padding
-                     )}
-               )
-               cx-bottom($cx-default-input-padding) cx-left($cx-default-input-padding),
-            -webkit-appearance: none,
-            -moz-appearance: none,
-            -ms-appearance: none,
-            appearance: none
-         )
-      );
-
-      .#{$state}icon > & {
-         padding-left: cx-calc(2 * cx-left($padding), $icon-size);
-      }
-
-      .#{$state}empty > & {
-         @include cx-add-rules($placeholder);
-      }
-
-      &::-ms-expand {
-         display: none;
-         margin: 0;
-         padding: 0;
-      }
-
-      option {
-         background-color: $cx-default-dropdown-background-color;
-         color: cx-get-state-rule($state-style-map, default, color);
-      }
-   }
-
-   .#{$element}#{$name}-clear {
-      @include cxe-field-button($besm, $clear-state-style-map);
-   }
-
-   .#{$element}#{$name}-placeholder {
-      @include cx-add-rules($placeholder);
-   }
-
-   .#{$element}#{$name}-tool {
-      pointer-events: none; //cannot call open-dropdown on native element
-      @include cxe-field-button($besm, $tool-state-style-map);
-
-      .#{$state}disabled > & {
-         border-width: 0;
-         @include cx-add-state-rules($state-style-map, disabled);
-      }
-      .#{$state}focus > & {
-         @include cx-add-state-rules($tool-state-style-map, focus);
-      }
-   }
-
-   .#{$element}#{$name}-icon {
-      @include cxe-field-button-icon($besm, $icon-size);
-   }
-}
-
-@if (cx-should-include("cx/widgets/Select")) {
-   @include cx-select;
-}

package/build/widgets/form/Slider.scss

@@ -1,121 +0,0 @@
-
-@use "sass:map";
-
-@mixin cx-slider(
-   $name: "slider",
-   $state-style-map: $cx-input-state-style-map,
-   $styles: $cx-slider-handle-styles,
-   $width: $cx-default-input-width,
-   $size: $cx-default-slider-handle-size,
-   $axis-size: $cx-default-slider-axis-size,
-   $axis-background-color: $cx-default-slider-axis-background-color,
-   $range-background-color: $cx-default-slider-range-background-color,
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      width: $width;
-      user-select: none;
-
-      @include cxb-field($besm, $state-style-map, $input: false, $box: true);
-
-      &.#{$state}vertical {
-         width: 28px;
-         height: $width;
-      }
-
-      &.#{$state}disabled {
-         pointer-events: none;
-         opacity: 0.5;
-      }
-   }
-
-   .#{$element}#{$name}-axis {
-      position: absolute;
-      background-color: $axis-background-color;
-      border-radius: $size * 0.5;
-      box-sizing: border-box;
-
-      .#{$block}#{$name}.#{$state}horizontal & {
-         left: $size * 0.5;
-         right: $size * 0.5;
-         top: calc(50% - #{$axis-size * 0.5});
-         height: $axis-size;
-         padding: 0 $axis-size * 0.5;
-      }
-
-      .#{$block}#{$name}.#{$state}vertical & {
-         top: $size * 0.5;
-         bottom: $size * 0.5;
-         width: $axis-size;
-         left: calc(50% - #{$axis-size * 0.5});
-         padding: $axis-size * 0.5 0;
-      }
-   }
-
-   .#{$element}#{$name}-space {
-      position: relative;
-      width: 100%;
-      height: 100%;
-   }
-
-   .#{$element}#{$name}-range {
-      position: absolute;
-
-      background-color: $range-background-color;
-      border-radius: $axis-size * 0.5;
-
-      .#{$block}#{$name}.#{$state}horizontal & {
-         height: 100%;
-      }
-
-      .#{$block}#{$name}.#{$state}vertical & {
-         width: 100%;
-      }
-   }
-
-   .#{$element}#{$name}-handle {
-      position: absolute;
-      box-sizing: border-box;
-      width: $size;
-      height: $size;
-      margin-left: -$size * 0.5;
-      margin-top: -$size * 0.5;
-      margin-bottom: -$size * 0.5;
-      touch-action: none;
-
-      @include cx-add-state-rules($styles, default);
-
-      .#{$block}#{$name}.#{$state}horizontal & {
-         left: 0;
-         top: 50%;
-      }
-
-      .#{$block}#{$name}.#{$state}vertical & {
-         left: 50%;
-      }
-
-      &:hover {
-         @include cx-add-state-rules($styles, hover);
-      }
-
-      &:focus {
-         @include cx-add-state-rules($styles, focus);
-      }
-
-      &[disabled] {
-         @include cx-add-state-rules($styles, disabled);
-      }
-
-      &:active {
-         @include cx-add-state-rules($styles, active);
-      }
-   }
-}
-
-@if (cx-should-include("cx/widgets/Slider")) {
-   @include cx-slider();
-}

package/build/widgets/form/Switch.scss

@@ -1,142 +0,0 @@
-@use "sass:map";
-
-@mixin cx-switch(
-   $name: "switch",
-   $state-style-map: $cx-input-state-style-map,
-   $styles: $cx-switch-handle-styles,
-   $width: $cx-default-switch-width,
-   $handle-size: $cx-default-switch-handle-size,
-   $axis-size: $cx-default-switch-axis-size,
-   $axis-background-color: $cx-default-switch-axis-background-color,
-   $range-background-color: $cx-default-switch-range-background-color,
-   $empty-text: $cx-empty-text,
-   $besm: $cx-besm
-) {
-   $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($border-width) 0 cx-bottom($border-width) 0,
-            padding: cx-top($padding) 0 cx-bottom($padding) 0,
-         ),
-      )
-   );
-
-   .#{$block}#{$name} {
-      cursor: pointer;
-      min-width: cx-calc($width, $handle-size);
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-      @include cxb-field($besm, $outer-styles, $input: false, $box: true);
-
-      &.#{$state}disabled {
-         pointer-events: none;
-         opacity: 0.5;
-      }
-
-      &:focus {
-         outline: none;
-      }
-   }
-
-   .#{$element}#{$name}-text {
-      display: inline-block;
-      margin-left: cx-calc($width, $handle-size);
-      padding: 0 cx-right($padding) 0 cx-left($padding);
-   }
-
-   .#{$element}#{$name}-empty-text {
-      @include cxe-field-empty-text($empty-text);
-   }
-
-   .#{$element}#{$name}-axis {
-      user-select: none;
-      position: absolute;
-      background-color: $axis-background-color;
-      border-radius: $axis-size * 0.5;
-      box-sizing: border-box;
-      width: $width;
-
-      left: $handle-size * 0.5;
-      right: $handle-size * 0.5;
-      top: calc(50% - #{$axis-size * 0.5});
-      height: $axis-size;
-      padding: 0 $axis-size * 0.5;
-   }
-
-   .#{$element}#{$name}-space {
-      position: relative;
-      box-sizing: border-box;
-      width: 100%;
-      height: 100%;
-   }
-
-   .#{$element}#{$name}-range {
-      position: absolute;
-      background-color: $range-background-color;
-      border-radius: $axis-size * 0.5;
-      height: 100%;
-      left: 0;
-      width: 0;
-      opacity: 0;
-      transform: scale(0);
-
-      transition: all 200ms;
-
-      .#{$state}on & {
-         width: 100%;
-         opacity: 1;
-         transform: none;
-      }
-   }
-
-   .#{$element}#{$name}-handle {
-      position: absolute;
-      box-sizing: border-box;
-      width: $handle-size;
-      height: $handle-size;
-      margin-left: -$handle-size * 0.5;
-      margin-top: -$handle-size * 0.5;
-      left: 0;
-      top: 50%;
-      transition: left 200ms;
-
-      @include cx-add-state-rules($styles, default);
-
-      .#{$state}on & {
-         left: 100%;
-         @include cx-add-state-rules($styles, on);
-      }
-
-      .#{$state}on:active & {
-         @include cx-add-state-rules($styles, on-active);
-      }
-
-      &:hover {
-         @include cx-add-state-rules($styles, hover);
-      }
-
-      .#{$block}#{$name}:focus & {
-         @include cx-add-state-rules($styles, focus);
-      }
-
-      .#{$block}#{$name}.#{$state}disabled & {
-         @include cx-add-state-rules($styles, disabled);
-      }
-
-      &:active {
-         @include cx-add-state-rules($styles, active);
-      }
-   }
-}
-
-@if (cx-should-include("cx/widgets/Switch")) {
-   @include cx-switch();
-}

package/build/widgets/form/TextArea.scss

@@ -1,45 +0,0 @@
-@use "sass:map";
-
-@mixin cx-textarea(
-   $name: "textarea",
-   $state-style-map: $cx-textarea-state-style-map,
-   $placeholder: $cx-input-placeholder,
-   $empty-text: $cx-empty-text,
-   $tool-state-style-map: $cx-input-right-icon-state-style-map,
-   $icon-size: $cx-default-input-icon-size,
-   $width: $cx-default-textarea-width,
-   $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} {
-      line-height: 0;
-      width: $width;
-      @include cxb-field($besm, $state-style-map, $input: false);
-   }
-
-   .#{$element}#{$name}-input {
-      width: 100%;
-      height: 100%;
-      @include cxe-field-input($besm, $state-style-map, $placeholder: $placeholder, $input: false);
-   }
-
-   .#{$element}#{$name}-tool {
-      @include cxe-field-button($besm, $tool-state-style-map);
-   }
-
-   .#{$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/TextArea")) {
-   @include cx-textarea;
-}

package/build/widgets/form/TextField.scss

@@ -1,57 +0,0 @@
-@use "sass:map";
-
-@mixin cx-textfield(
-   $name: "textfield",
-   $state-style-map: $cx-std-field-state-style-map,
-   $placeholder: $cx-input-placeholder,
-   $empty-text: $cx-empty-text,
-   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
-   $clear-state-style-map: $cx-clear-state-style-map,
-   $icon-size: $cx-default-input-icon-size,
-   $width: $cx-default-input-width,
-   $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} {
-      @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);
-
-      .#{$state}icon > & {
-         padding-left: cx-calc(2 * cx-left($padding), $icon-size);
-      }
-
-      .#{$state}clear > & {
-         padding-right: cx-calc(cx-right($padding), $cx-default-clear-size, $cx-default-clear-spacing);
-      }
-   }
-
-   .#{$element}#{$name}-left-icon {
-      pointer-events: none;
-      @include cxe-field-button($besm, $left-icon-state-style-map);
-   }
-
-   .#{$element}#{$name}-clear {
-      @include cxe-field-button($besm, $clear-state-style-map);
-   }
-
-   .#{$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/TextField")) {
-   @include cx-textfield();
-}

package/build/widgets/form/UploadButton.scss

@@ -1,49 +0,0 @@
-
-@use "sass:map";
-
-@import "../Button";
-
-@mixin cx-uploadbutton(
-   $name: 'uploadbutton',
-   $state-style-map: $cx-button-state-style-map,
-   $mods: $cx-button-mods,
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   @include cx-button($name,
-      $mods: $mods,
-      $state-style-map: $state-style-map,
-      $besm: $besm
-   );
-
-   .#{$element}#{$name}-input {
-      position: absolute;
-      opacity: 0;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-   }
-
-   .#{$element}#{$name}-progress {
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      width: 0;
-      background: rgba(8, 176, 255, 0.5);
-      outline: 1px solid rgba(8, 176, 255, 0.5);
-      transition: opacity 0.5s ease-in-out;
-
-      &.#{$state}done {
-         opacity: 0;
-      }
-   }
-}
-
-@if (cx-should-include('cx/widgets/UploadButton')) {
-   @include cx-uploadbutton();
-}

package/build/widgets/form/ValidationError.scss

@@ -1,23 +0,0 @@
-@use "sass:map";
-
-@mixin cx-validationerror(
-   $name: 'uploadbutton',
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $mod: map.get($besm, mod);
-
-   .#{$block}validationerror {
-      color: rgb(220, 0, 9);
-      font-size: smaller;
-
-      &.#{$mod}block {
-         display: block;
-      }
-   }
-}
-
-@if (cx-should-include('cx/widgets/ValidationError')) {
-   @include cx-validationerror();
-}

package/build/widgets/form/ValidationGroup.spec.d.ts

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

package/build/widgets/form/ValidationGroup.spec.js

@@ -1,62 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "cx/jsx-runtime";
-import { Store } from "../../data/Store";
-import { ValidationGroup } from "./ValidationGroup";
-import { Validator } from "./Validator";
-import { bind } from "../../ui/bind";
-import { createTestRenderer } from "../../util/test/createTestRenderer";
-import assert from "assert";
-describe("ValidationGroup", () => {
-    it("performs validation and sets the flags", () => {
-        let widget = (_jsx("cx", { children: _jsxs(ValidationGroup, { invalid: bind("invalid"), valid: bind("valid"), children: [_jsx(Validator, { onValidate: () => "Something is wrong..." }), _jsx("div", { visible: bind("invalid"), children: "Invalid" })] }) }));
-        let store = new Store();
-        const component = createTestRenderer(store, widget);
-        let tree = component.toJSON();
-        assert(tree && !Array.isArray(tree));
-        assert.equal(tree.type, "div");
-        assert.equal(store.get("invalid"), true);
-        assert.equal(store.get("valid"), false);
-    });
-    it("nested validation works", () => {
-        let widget = (_jsx("cx", { children: _jsx("div", { children: _jsxs(ValidationGroup, { invalid: bind("invalid"), children: [_jsx(ValidationGroup, { invalid: bind("invalid1"), children: _jsx(Validator, { onValidate: () => "Something is wrong..." }) }), _jsx(ValidationGroup, { invalid: bind("invalid2"), children: _jsx(Validator, { onValidate: () => false }) })] }) }) }));
-        let store = new Store();
-        const component = createTestRenderer(store, widget);
-        let tree = component.toJSON();
-        assert.equal(store.get("invalid"), true);
-        assert.equal(store.get("invalid1"), true);
-        assert.equal(store.get("invalid2"), false);
-    });
-    it("isolated validation group does not affect the parent", () => {
-        let widget = (_jsx("cx", { children: _jsx("div", { children: _jsxs(ValidationGroup, { invalid: bind("invalid"), children: [_jsx(ValidationGroup, { invalid: bind("invalid1"), isolated: true, children: _jsx(Validator, { onValidate: () => "Something is wrong..." }) }), _jsx(ValidationGroup, { invalid: bind("invalid2"), children: _jsx(Validator, { onValidate: () => false }) })] }) }) }));
-        let store = new Store();
-        const component = createTestRenderer(store, widget);
-        let tree = component.toJSON();
-        assert.equal(store.get("invalid"), false);
-        assert.equal(store.get("invalid1"), true);
-        assert.equal(store.get("invalid2"), false);
-    });
-    it("visited flag is propagated into nested validation groups", () => {
-        let visited = false;
-        let widget = (_jsx("cx", { children: _jsx("div", { children: _jsx(ValidationGroup, { visited: true, children: _jsx(ValidationGroup, { children: _jsx("div", { onExplore: (context, instance) => {
-                                if (context.parentVisited)
-                                    visited = true;
-                            } }) }) }) }) }));
-        let store = new Store();
-        const component = createTestRenderer(store, widget);
-        let tree = component.toJSON();
-        assert(visited);
-    });
-    it("disabled flag can be overruled by the field props", () => {
-        let widget = (_jsx("cx", { children: _jsx("div", { children: _jsx(ValidationGroup, { invalid: bind("invalid"), disabled: true, children: _jsx(Validator, { onValidate: () => "Something is wrong...", disabled: false }) }) }) }));
-        let store = new Store();
-        const component = createTestRenderer(store, widget);
-        let tree = component.toJSON();
-        assert.equal(store.get("invalid"), true);
-    });
-    it("strict flag is used to enforce disabled flag", () => {
-        let widget = (_jsx("cx", { children: _jsx("div", { children: _jsx(ValidationGroup, { invalid: bind("invalid"), disabled: true, strict: true, children: _jsx(Validator, { onValidate: () => "Something is wrong...", disabled: false }) }) }) }));
-        let store = new Store();
-        const component = createTestRenderer(store, widget);
-        let tree = component.toJSON();
-        assert.equal(store.get("invalid"), false);
-    });
-});