cx 26.0.6 → 26.0.9

package/build/widgets/overlay/Toast.scss

@@ -0,0 +1,164 @@
+@use "sass:map";
+
+@mixin cx-toast(
+   $name: 'toast',
+   $besm: $cx-besm,
+   $mods: $cx-toast-mods
+) {
+
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
+
+   .#{$block}#{$name} {
+      color: $cx-default-toast-color;
+      background-color: $cx-default-toast-background-color;
+      box-sizing: border-box;
+      position: relative;
+      pointer-events: all;
+      transition: all 0.2s ease-in-out;
+      box-shadow: $cx-default-toast-box-shadow;
+      border-style: solid;
+      border-width: $cx-default-toast-border-width;
+      border-color: $cx-default-toast-border-color;
+      border-radius: $cx-default-border-radius;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      &.#{$state}pad {
+         padding: $cx-default-toast-padding;
+      }
+
+      &.#{$state}animate {
+         animation: cx-toast-enter-animation 0.2s;
+      }
+
+      &.#{$state}animate-enter {
+         //animation-fill-mode: forwards;
+      }
+
+      &.#{$state}animate-leave {
+         animation: cx-toast-leave-animation 0.2s;
+         animation-fill-mode: forwards;
+      }
+
+      @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);
+          }
+        }
+      }
+   }
+}
+
+@keyframes cx-toast-enter-animation {
+   from {
+      transform: scale(0);
+      opacity: 0;
+   }
+
+   to {
+      transform: scale(1);
+      opacity: 1;
+   }
+}
+
+@keyframes cx-toast-leave-animation {
+   to {
+      transform: scale(0);
+      opacity: 0;
+   }
+
+   from {
+      transform: scale(1);
+      opacity: 1;
+   }
+}
+
+@mixin cx-toaster(
+   $name: 'toaster',
+   $besm: $cx-besm
+) {
+
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      position: fixed;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      overflow: hidden;
+      z-index: 1000000;
+
+      &.#{$state}placement-right {
+         justify-content: center;
+         align-items: flex-end;
+      }
+
+      &.#{$state}placement-left {
+         justify-content: center;
+         align-items: flex-start;
+      }
+
+      &.#{$state}placement-bottom {
+         flex-direction: column-reverse;
+      }
+
+      &.#{$state}placement-top-left {
+         align-items: flex-start;
+      }
+
+      &.#{$state}placement-top-right {
+         align-items: flex-end;
+      }
+
+      &.#{$state}placement-bottom-left {
+         justify-content: flex-end;
+         align-items: flex-start;
+      }
+
+      &.#{$state}placement-bottom-right {
+         justify-content: flex-end;
+         align-items: flex-end;
+      }
+   }
+
+   .#{$element}#{$name}-item {
+      margin: 0;
+      height: 0;
+      transition: all 0.2s ease-in-out;
+
+      &.#{$state}live {
+         margin: 10px;
+      }
+   }
+}
+
+@if (cx-should-include('cx/widgets/Toast')) {
+   @include cx-toast();
+   @include cx-toaster();
+}

package/build/widgets/overlay/Tooltip.scss

@@ -0,0 +1,177 @@
+@use "sass:map";
+
+@keyframes cx-tooltip-enter-animation {
+   from {
+      transform: scale(0.9);
+      opacity: 0;
+   }
+
+   to {
+      transform: scale(1);
+      opacity: 1;
+   }
+}
+
+@keyframes cx-tooltip-leave-animation {
+   from {
+      transform: scale(1);
+      opacity: 1;
+   }
+
+   to {
+      transform: scale(0.9);
+      opacity: 0;
+   }
+}
+
+@mixin cx-tooltip(
+   $name: 'tooltip',
+   $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} {
+      @extend %cxb-overlay;
+      display: block;
+      left: -10000px;
+      top: -10000px;
+      box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3);
+      background-color: $cx-tooltip-background-color;
+      border: $cx-tooltip-border-width solid $cx-tooltip-border-color;
+      color: $cx-tooltip-color;
+      padding: $cx-tooltip-padding;
+      border-radius: $cx-tooltip-border-radius;
+      font-size: smaller;
+      transition: opacity 0.2s ease-in;
+      max-width: 400px;
+      pointer-events: none;
+
+      &.#{$state}animate {
+         animation: cx-tooltip-enter-animation 0.2s;
+      }
+
+      &.#{$state}animate-leave {
+         animation: cx-tooltip-leave-animation 0.2s;
+         animation-fill-mode: forwards;
+      }
+
+      &.#{$state}mouse-trap {
+         pointer-events: auto;
+      }
+
+      &.#{$mod}error {
+         background-color: $cx-tooltip-background-color-error;
+         border-color: $cx-tooltip-border-color-error;
+         color: $cx-tooltip-color-error;
+
+         .#{$element}#{$name}-arrow-border {
+            color: $cx-tooltip-border-color-error;
+         }
+
+         .#{$element}#{$name}-arrow-fill {
+            color: $cx-tooltip-background-color-error;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-title {
+      font-weight: bold;
+      font-size: 100%;
+   }
+
+   @include cx-dropdown-arrows($name, (
+      border-width: $cx-tooltip-border-width,
+      border-color: $cx-tooltip-border-color,
+      border-style: solid,
+      background-color: $cx-tooltip-background-color
+   ), $cx-tooltip-arrow-size, $besm)
+
+   //.#{$element}#{$name}-arrow-border, .#{$element}#{$name}-arrow-fill {
+   //   border: solid transparent;
+   //   content: " ";
+   //   height: 0;
+   //   width: 0;
+   //   position: absolute;
+   //}
+   //
+   //.#{$element}#{$name}-arrow-border {
+   //   color: $cx-tooltip-border-color;
+   //   border-width: $cx-tooltip-border-width + $cx-tooltip-arrow-size;
+   //}
+   //
+   //.#{$element}#{$name}-arrow-fill {
+   //   color: $cx-tooltip-background-color;
+   //   border-width: $cx-tooltip-arrow-size;
+   //}
+   //
+   //.#{$state}place-right {
+   //   .#{$element}#{$name}-arrow-fill {
+   //      right: 100%;
+   //      top: 50%;
+   //      border-right-color: currentColor;
+   //      margin-top: -$cx-tooltip-arrow-size;
+   //   }
+   //
+   //   .#{$element}#{$name}-arrow-border {
+   //      right: 100%;
+   //      top: 50%;
+   //      border-right-color: currentColor;
+   //      margin-top: -$cx-tooltip-border-width - $cx-tooltip-arrow-size;
+   //   }
+   //}
+   //
+   //.#{$state}place-left {
+   //   .#{$element}#{$name}-arrow-fill {
+   //      left: 100%;
+   //      top: 50%;
+   //      border-left-color: currentColor;
+   //      margin-top: -$cx-tooltip-arrow-size;
+   //   }
+   //
+   //   .#{$element}#{$name}-arrow-border {
+   //      left: 100%;
+   //      top: 50%;
+   //      border-left-color: currentColor;
+   //      margin-top: -$cx-tooltip-border-width - $cx-tooltip-arrow-size;
+   //   }
+   //}
+   //
+   //.#{$state}place-up {
+   //   .#{$element}#{$name}-arrow-fill {
+   //      left: 50%;
+   //      top: 100%;
+   //      border-top-color: currentColor;
+   //      margin-left: -$cx-tooltip-arrow-size;
+   //   }
+   //
+   //   .#{$element}#{$name}-arrow-border {
+   //      left: 50%;
+   //      top: 100%;
+   //      border-top-color: currentColor;
+   //      margin-left: -$cx-tooltip-border-width - $cx-tooltip-arrow-size;
+   //   }
+   //}
+   //
+   //.#{$state}place-down {
+   //   .#{$element}#{$name}-arrow-fill {
+   //      left: 50%;
+   //      bottom: 100%;
+   //      border-bottom-color: currentColor;
+   //      margin-left: -$cx-tooltip-arrow-size;
+   //   }
+   //
+   //   .#{$element}#{$name}-arrow-border {
+   //      left: 50%;
+   //      bottom: 100%;
+   //      border-bottom-color: currentColor;
+   //      margin-left: -$cx-tooltip-border-width - $cx-tooltip-arrow-size;
+   //   }
+   //}
+}
+
+@if (cx-should-include('cx/widgets/Tooltip')) {
+   @include cx-tooltip();
+}

package/build/widgets/overlay/Window.scss

@@ -0,0 +1,129 @@
+@use "sass:map";
+
+@mixin cx-window(
+   $name: "window",
+   $state-style-map: $cx-window-state-style-map,
+   $header-state-style-map: $cx-window-header-state-style-map,
+   $body-state-style-map: $cx-window-body-state-style-map,
+   $footer-state-style-map: $cx-window-footer-state-style-map,
+   $mods: $cx-window-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} {
+      @extend %cxb-overlay;
+      display: flex;
+      flex-direction: column;
+
+      @include cx-add-state-rules($state-style-map, default);
+
+      &.#{$state}resizable {
+         &.#{$state}active {
+            @include cx-add-state-rules($state-style-map, resizable);
+         }
+      }
+
+      &.#{$mod}alert {
+         min-width: 300px;
+      }
+   }
+
+   .#{$element}#{$name}-header {
+      position: relative; //put on top of modal backdrop
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      flex: none;
+      touch-action: none;
+
+      @include cx-add-state-rules($header-state-style-map, default);
+
+      .#{$state}draggable & {
+         cursor: pointer;
+      }
+
+      .#{$state}active & {
+         @include cx-add-state-rules($header-state-style-map, active);
+      }
+   }
+
+   .#{$element}#{$name}-footer {
+      position: relative;
+      box-sizing: border-box;
+      flex: none;
+
+      @include cx-add-state-rules($footer-state-style-map, default);
+
+      //TODO: Extract common autoclear
+      &:after {
+         clear: both;
+         visibility: hidden;
+         display: block;
+         font-size: 0;
+         content: " ";
+         height: 0;
+      }
+
+      .#{$mod}alert & {
+         text-align: center;
+      }
+   }
+
+   .#{$element}#{$name}-body {
+      overflow: auto;
+      position: relative; //put on top of modal backdrop
+      box-sizing: border-box;
+      flex: auto;
+
+      $padding: cx-get-state-rule($body-state-style-map, default, "padding");
+
+      $noPad: cx-deep-map-merge(
+         $body-state-style-map,
+         (
+            default: (
+               padding: null,
+            ),
+         )
+      );
+
+      @include cx-add-state-rules($noPad, default);
+
+      &.#{$state}pad {
+         padding: $padding;
+      }
+
+      .#{$mod}alert & {
+         padding: 2.5rem;
+         text-align: center;
+      }
+   }
+
+   @each $modname, $config in $mods {
+      .#{$block}#{$name}.#{$mod}#{$modname} {
+         @include cx-add-state-rules($config, frame);
+
+         .#{$element}#{$name}-body {
+            @include cx-add-state-rules($config, body);
+         }
+         .#{$element}#{$name}-footer {
+            @include cx-add-state-rules($config, footer);
+         }
+      }
+   }
+
+   .#{$element}#{$name}-modal-backdrop {
+      @extend %cxe-overlay-modal-backdrop;
+   }
+
+   .#{$element}#{$name}-shadow {
+      @extend %cxe-overlay-shadow;
+   }
+}
+
+@if (cx-should-include("cx/widgets/Window")) {
+   @include cx-window();
+}

package/build/widgets/overlay/Window.variables.scss

@@ -0,0 +1,62 @@
+$cx-default-window-background-color: transparent !default;
+$cx-default-window-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.29) !default;
+$cx-default-window-border-radius: $cx-default-border-radius !default;
+
+//header
+$cx-default-window-header-color: null !default;
+$cx-default-window-header-background-color: rgba(246, 246, 246, 0.9) !default;
+$cx-default-window-header-padding: 10px 15px !default;
+$cx-default-window-header-font-size: 16px !default;
+
+//body
+$cx-default-window-body-padding: $cx-default-window-header-padding !default;
+$cx-default-window-body-background-color: white !default;
+
+//footer
+$cx-default-window-footer-color: null !default;
+$cx-default-window-footer-background-color: rgba(246, 246, 246, 0.9) !default;
+$cx-default-window-footer-padding: $cx-default-window-header-padding !default;
+$cx-default-window-footer-font-size: 16px !default;
+
+$cx-window-state-style-map: (
+   default: (
+      box-shadow: $cx-default-window-box-shadow,
+      background-color: $cx-default-window-background-color,
+      border-radius: $cx-default-window-border-radius,
+   ),
+   resizable: (
+      box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.29),
+   ),
+) !default;
+
+$cx-window-header-state-style-map: (
+   default: (
+      color: $cx-default-window-header-color,
+      background: $cx-default-window-header-background-color,
+      padding: $cx-default-window-header-padding,
+      font-size: $cx-default-window-header-font-size,
+   ),
+   active: (),
+) !default;
+
+$cx-window-footer-state-style-map: (
+   default: (
+      background: $cx-default-window-footer-background-color,
+      padding: $cx-default-window-footer-padding,
+   ),
+) !default;
+
+$cx-window-body-state-style-map: (
+   default: (
+      background: $cx-default-window-body-background-color,
+      padding: $cx-default-window-body-padding,
+   ),
+) !default;
+
+$cx-window-mods: (
+   alert: (
+      frame: (),
+      body: (),
+      footer: (),
+   ),
+);

package/build/widgets/overlay/captureMouse.scss

@@ -0,0 +1,13 @@
+
+@if cx-call-once("cx/widgets/captureMouse") {
+
+   .cxb-mousecapture {
+      position: fixed;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      z-index: 1000000;
+   }
+
+}

package/build/widgets/overlay/index.scss

@@ -0,0 +1,15 @@
+
+@import 'captureMouse';
+@import 'Overlay';
+@import 'Dropdown';
+@import 'Window';
+@import 'Tooltip';
+@import 'Toast';
+
+
+
+
+
+
+
+

package/build/widgets/overlay/variables.scss

@@ -0,0 +1,85 @@
+@use "sass:map";
+
+// TOOLTIP
+$cx-tooltip-background-color: white !default;
+$cx-tooltip-border-color: #d5d5d5 !default;
+$cx-tooltip-border-width: 1px !default;
+$cx-tooltip-border-radius: 5px !default;
+$cx-tooltip-arrow-size: 5px !default;
+$cx-tooltip-color: null !default;
+$cx-tooltip-padding: 10px !default;
+
+$cx-tooltip-background-color-error: white !default;
+$cx-tooltip-border-color-error: #e63001 !default;
+$cx-tooltip-color-error: null !default;
+
+// DROPDOWN
+$cx-default-dropdown-color: $cx-default-color !default;
+$cx-default-dropdown-background-color: white !default;
+$cx-default-dropdown-arrow-size: 6px !default;
+$cx-default-dropdown-arrow-offset: 16px !default;
+
+$cx-dropdown-styles: (
+   color: $cx-default-dropdown-color,
+   background-color: $cx-default-dropdown-background-color,
+   border-radius: $cx-default-border-radius,
+   border-color: $cx-default-border-color,
+   border-width: 0,
+   box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.29),
+   white-space: normal,
+   font-weight: normal,
+   font-size: $cx-default-font-size,
+   text-align: left,
+   line-height: normal,
+) !default;
+
+// TOAST
+$cx-default-toast-color: $cx-default-color !default;
+$cx-default-toast-background-color: rgb(255, 255, 255) !default;
+$cx-default-toast-border-width: 0 !default;
+$cx-default-toast-border-color: rgba(255, 255, 255, 0) !default;
+$cx-default-toast-box-shadow: 0 0 5px 1px rgba(128, 128, 128, 0.3) !default;
+$cx-default-toast-padding: 10px !default;
+
+$cx-toast-mods: (
+   warning: (
+      default: (
+         color: #fff,
+         background-color: #f09037,
+      ),
+   ),
+   primary: (
+      default: (
+         color: #fff,
+         background-color: #1f99f8,
+      ),
+   ),
+   success: (
+      default: (
+         color: #fff,
+         background-color: #5cb85c,
+      ),
+   ),
+   error: (
+      default: (
+         color: #fff,
+         background-color: #d9534f,
+      ),
+   ),
+) !default;
+
+// WINDOW
+@import "Window.variables";
+
+$cx-dependencies: map.merge(
+   $cx-dependencies,
+   (
+      "cx/widgets/Overlay": "cx/widgets/captureMouse",
+      "cx/widgets/Dropdown": "cx/widgets/Overlay",
+      "cx/widgets/Window": "cx/widgets/Overlay",
+      "cx/widgets/Tooltip": "cx/widgets/Dropdown",
+      "cx/widgets/enableMsgBoxAlerts": "cx/widgets/MsgBox",
+      "cx/widgets/MsgBox": "cx/widgets/Window" "cx/widgets/FlexRow",
+      "cx/widgets/Toast": "cx/widgets/Overlay",
+   )
+);