cx 24.9.2 → 24.9.3

package/src/widgets/overlay/Dropdown.scss

@@ -1,184 +1,184 @@
-@mixin cx-dropdown-arrows(
-   $name: "dropdown",
-   $styles: $cx-dropdown-styles,
-   $arrow-size: $cx-default-dropdown-arrow-size,
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   $border-width: map-get($styles, border-width);
-
-   .#{$element}#{$name}-arrow-border,
-   .#{$element}#{$name}-arrow-fill {
-      border-style: solid;
-      border-color: transparent;
-      content: " ";
-      height: 0;
-      width: 0;
-      position: absolute;
-      pointer-events: none;
-   }
-
-   .#{$element}#{$name}-arrow-border {
-      color: map-get($styles, border-color);
-      border-width: $border-width + $arrow-size;
-   }
-
-   .#{$element}#{$name}-arrow-fill {
-      color: map-get($styles, background-color);
-      border-width: $arrow-size;
-   }
-
-   .#{$state}place-right,
-   .#{$state}place-right-up,
-   .#{$state}place-right-down {
-      & > .#{$element}#{$name}-arrow-fill {
-         right: 100%;
-         top: 50%;
-         border-right-color: currentColor;
-         margin-top: -$arrow-size;
-      }
-
-      & > .#{$element}#{$name}-arrow-border {
-         right: 100%;
-         top: 50%;
-         border-right-color: currentColor;
-         margin-top: cx-calc(-$border-width, -$arrow-size);
-      }
-   }
-
-   .#{$state}place-left,
-   .#{$state}place-left-down,
-   .#{$state}place-left-up {
-      & > .#{$element}#{$name}-arrow-fill {
-         left: 100%;
-         top: 50%;
-         border-left-color: currentColor;
-         margin-top: -$arrow-size;
-      }
-
-      & > .#{$element}#{$name}-arrow-border {
-         left: 100%;
-         top: 50%;
-         border-left-color: currentColor;
-         margin-top: cx-calc(-$border-width, -$arrow-size);
-      }
-   }
-
-   .#{$state}place-right-down,
-   .#{$state}place-left-down {
-      & > .#{$element}#{$name}-arrow-fill {
-         top: $cx-default-dropdown-arrow-offset;
-      }
-
-      & > .#{$element}#{$name}-arrow-border {
-         top: $cx-default-dropdown-arrow-offset;
-      }
-   }
-
-   .#{$state}place-right-up,
-   .#{$state}place-left-up {
-      & > .#{$element}#{$name}-arrow-fill,
-      & > .#{$element}#{$name}-arrow-border {
-         top: cx-calc(100%, -$cx-default-dropdown-arrow-offset);
-      }
-   }
-
-   .#{$state}place-up,
-   .#{$state}place-up-left,
-   .#{$state}place-up-right {
-      & > .#{$element}#{$name}-arrow-fill {
-         left: 50%;
-         top: 100%;
-         border-top-color: currentColor;
-         margin-left: -$arrow-size;
-      }
-
-      & > .#{$element}#{$name}-arrow-border {
-         left: 50%;
-         top: 100%;
-         border-top-color: currentColor;
-         margin-left: cx-calc(-$border-width, -$arrow-size);
-      }
-   }
-
-   .#{$state}place-down,
-   .#{$state}place-down-left,
-   .#{$state}place-down-right {
-      & > .#{$element}#{$name}-arrow-fill {
-         left: 50%;
-         bottom: 100%;
-         border-bottom-color: currentColor;
-         margin-left: -$arrow-size;
-      }
-
-      & > .#{$element}#{$name}-arrow-border {
-         left: 50%;
-         bottom: 100%;
-         border-bottom-color: currentColor;
-         margin-left: cx-calc(-$border-width, -$arrow-size);
-      }
-   }
-
-   .#{$state}place-down-right,
-   .#{$state}place-up-right {
-      & > .#{$element}#{$name}-arrow-fill,
-      & > .#{$element}#{$name}-arrow-border {
-         left: $cx-default-dropdown-arrow-offset;
-      }
-   }
-
-   .#{$state}place-down-left,
-   .#{$state}place-up-left {
-      & > .#{$element}#{$name}-arrow-fill {
-         left: cx-calc(100%, -$cx-default-dropdown-arrow-offset);
-      }
-
-      & > .#{$element}#{$name}-arrow-border {
-         left: cx-calc(100%, -$cx-default-dropdown-arrow-offset);
-      }
-   }
-}
-
-@mixin cx-dropdown(
-   $name: "dropdown",
-   $styles: $cx-dropdown-styles,
-   $arrow-size: $cx-default-dropdown-arrow-size,
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   .#{$block}#{$name} {
-      @extend %cxb-overlay;
-      display: block;
-      left: -10000px;
-      top: -10000px;
-
-      @include cx-add-rules($styles);
-
-      &.#{$state}place-screen-center {
-         box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.29), 0 0 1000px 1000px rgba(128, 128, 128, 0.3);
-      }
-
-      &.#{$state}pad {
-         padding: $cx-default-container-padding;
-      }
-   }
-
-   .#{$element}#{$name}-beacon {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      visibility: hidden;
-   }
-
-   @include cx-dropdown-arrows($name, $styles, $arrow-size, $besm);
-}
-
-@if (cx-should-include("cx/widgets/Dropdown")) {
-   @include cx-dropdown();
-}
+@mixin cx-dropdown-arrows(
+   $name: "dropdown",
+   $styles: $cx-dropdown-styles,
+   $arrow-size: $cx-default-dropdown-arrow-size,
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   $border-width: map-get($styles, border-width);
+
+   .#{$element}#{$name}-arrow-border,
+   .#{$element}#{$name}-arrow-fill {
+      border-style: solid;
+      border-color: transparent;
+      content: " ";
+      height: 0;
+      width: 0;
+      position: absolute;
+      pointer-events: none;
+   }
+
+   .#{$element}#{$name}-arrow-border {
+      color: map-get($styles, border-color);
+      border-width: $border-width + $arrow-size;
+   }
+
+   .#{$element}#{$name}-arrow-fill {
+      color: map-get($styles, background-color);
+      border-width: $arrow-size;
+   }
+
+   .#{$state}place-right,
+   .#{$state}place-right-up,
+   .#{$state}place-right-down {
+      & > .#{$element}#{$name}-arrow-fill {
+         right: 100%;
+         top: 50%;
+         border-right-color: currentColor;
+         margin-top: -$arrow-size;
+      }
+
+      & > .#{$element}#{$name}-arrow-border {
+         right: 100%;
+         top: 50%;
+         border-right-color: currentColor;
+         margin-top: cx-calc(-$border-width, -$arrow-size);
+      }
+   }
+
+   .#{$state}place-left,
+   .#{$state}place-left-down,
+   .#{$state}place-left-up {
+      & > .#{$element}#{$name}-arrow-fill {
+         left: 100%;
+         top: 50%;
+         border-left-color: currentColor;
+         margin-top: -$arrow-size;
+      }
+
+      & > .#{$element}#{$name}-arrow-border {
+         left: 100%;
+         top: 50%;
+         border-left-color: currentColor;
+         margin-top: cx-calc(-$border-width, -$arrow-size);
+      }
+   }
+
+   .#{$state}place-right-down,
+   .#{$state}place-left-down {
+      & > .#{$element}#{$name}-arrow-fill {
+         top: $cx-default-dropdown-arrow-offset;
+      }
+
+      & > .#{$element}#{$name}-arrow-border {
+         top: $cx-default-dropdown-arrow-offset;
+      }
+   }
+
+   .#{$state}place-right-up,
+   .#{$state}place-left-up {
+      & > .#{$element}#{$name}-arrow-fill,
+      & > .#{$element}#{$name}-arrow-border {
+         top: cx-calc(100%, -$cx-default-dropdown-arrow-offset);
+      }
+   }
+
+   .#{$state}place-up,
+   .#{$state}place-up-left,
+   .#{$state}place-up-right {
+      & > .#{$element}#{$name}-arrow-fill {
+         left: 50%;
+         top: 100%;
+         border-top-color: currentColor;
+         margin-left: -$arrow-size;
+      }
+
+      & > .#{$element}#{$name}-arrow-border {
+         left: 50%;
+         top: 100%;
+         border-top-color: currentColor;
+         margin-left: cx-calc(-$border-width, -$arrow-size);
+      }
+   }
+
+   .#{$state}place-down,
+   .#{$state}place-down-left,
+   .#{$state}place-down-right {
+      & > .#{$element}#{$name}-arrow-fill {
+         left: 50%;
+         bottom: 100%;
+         border-bottom-color: currentColor;
+         margin-left: -$arrow-size;
+      }
+
+      & > .#{$element}#{$name}-arrow-border {
+         left: 50%;
+         bottom: 100%;
+         border-bottom-color: currentColor;
+         margin-left: cx-calc(-$border-width, -$arrow-size);
+      }
+   }
+
+   .#{$state}place-down-right,
+   .#{$state}place-up-right {
+      & > .#{$element}#{$name}-arrow-fill,
+      & > .#{$element}#{$name}-arrow-border {
+         left: $cx-default-dropdown-arrow-offset;
+      }
+   }
+
+   .#{$state}place-down-left,
+   .#{$state}place-up-left {
+      & > .#{$element}#{$name}-arrow-fill {
+         left: cx-calc(100%, -$cx-default-dropdown-arrow-offset);
+      }
+
+      & > .#{$element}#{$name}-arrow-border {
+         left: cx-calc(100%, -$cx-default-dropdown-arrow-offset);
+      }
+   }
+}
+
+@mixin cx-dropdown(
+   $name: "dropdown",
+   $styles: $cx-dropdown-styles,
+   $arrow-size: $cx-default-dropdown-arrow-size,
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   .#{$block}#{$name} {
+      @extend %cxb-overlay;
+      display: block;
+      left: -10000px;
+      top: -10000px;
+
+      @include cx-add-rules($styles);
+
+      &.#{$state}place-screen-center {
+         box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.29), 0 0 1000px 1000px rgba(128, 128, 128, 0.3);
+      }
+
+      &.#{$state}pad {
+         padding: $cx-default-container-padding;
+      }
+   }
+
+   .#{$element}#{$name}-beacon {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      visibility: hidden;
+   }
+
+   @include cx-dropdown-arrows($name, $styles, $arrow-size, $besm);
+}
+
+@if (cx-should-include("cx/widgets/Dropdown")) {
+   @include cx-dropdown();
+}

package/src/widgets/overlay/FlyweightTooltipTracker.d.ts

@@ -1,8 +1,8 @@
-import * as Cx from "../../core";
-import { Instance } from "../../ui/Instance";
-
-export interface FlyweightTooltipTrackerProps extends Cx.WidgetProps {
-   onGetTooltip(element: Element, instance: Instance): Cx.Config;
-}
-
-export class FlyweightTooltipTracker extends Cx.Widget<FlyweightTooltipTrackerProps> {}
+import * as Cx from "../../core";
+import { Instance } from "../../ui/Instance";
+
+export interface FlyweightTooltipTrackerProps extends Cx.WidgetProps {
+   onGetTooltip(element: Element, instance: Instance): Cx.Config;
+}
+
+export class FlyweightTooltipTracker extends Cx.Widget<FlyweightTooltipTrackerProps> {}

package/src/widgets/overlay/FlyweightTooltipTracker.js

@@ -1,39 +1,39 @@
-import { Widget } from "../../ui/Widget";
-import { VDOM } from "../../ui/VDOM";
-import { tooltipMouseMove, tooltipMouseLeave } from "./tooltip-ops";
-import { closest, isObject } from "../../util";
-
-export class FlyweightTooltipTracker extends Widget {
-   initInstance(context, instance) {
-      let handler = (e) => this.handleMouseMove(e, instance);
-      document.addEventListener("mousemove", handler);
-      instance.subscribeOnDestroy(() => {
-         document.removeEventListener("mousemove", handler);
-      });
-   }
-
-   render(context, instance, key) {
-      return null;
-   }
-
-   handleMouseMove(e, instance) {
-      if (!this.onGetTooltip) return;
-      let parentEl, tooltip;
-      if (instance.lastTarget == e.target) return;
-
-      instance.lastTarget = e.target;
-      parentEl = closest(e.target, (element) => {
-         tooltip = instance.invoke("onGetTooltip", element, instance);
-         if (tooltip) return true;
-      });
-
-      if (!parentEl) tooltipMouseLeave(e, instance, instance.tooltip, { target: instance.parentEl });
-      else {
-         instance.tooltip = tooltip;
-         instance.parentEl = parentEl;
-         tooltipMouseMove(e, instance, instance.tooltip, {
-            target: parentEl,
-         });
-      }
-   }
-}
+import { Widget } from "../../ui/Widget";
+import { VDOM } from "../../ui/VDOM";
+import { tooltipMouseMove, tooltipMouseLeave } from "./tooltip-ops";
+import { closest, isObject } from "../../util";
+
+export class FlyweightTooltipTracker extends Widget {
+   initInstance(context, instance) {
+      let handler = (e) => this.handleMouseMove(e, instance);
+      document.addEventListener("mousemove", handler);
+      instance.subscribeOnDestroy(() => {
+         document.removeEventListener("mousemove", handler);
+      });
+   }
+
+   render(context, instance, key) {
+      return null;
+   }
+
+   handleMouseMove(e, instance) {
+      if (!this.onGetTooltip) return;
+      let parentEl, tooltip;
+      if (instance.lastTarget == e.target) return;
+
+      instance.lastTarget = e.target;
+      parentEl = closest(e.target, (element) => {
+         tooltip = instance.invoke("onGetTooltip", element, instance);
+         if (tooltip) return true;
+      });
+
+      if (!parentEl) tooltipMouseLeave(e, instance, instance.tooltip, { target: instance.parentEl });
+      else {
+         instance.tooltip = tooltip;
+         instance.parentEl = parentEl;
+         tooltipMouseMove(e, instance, instance.tooltip, {
+            target: parentEl,
+         });
+      }
+   }
+}

package/src/widgets/overlay/MsgBox.d.ts

@@ -1,17 +1,17 @@
-import * as Cx from '../../core';
-
-interface MsgBoxProps {
-
-   buttonMod?: null,
-   footerDirection?: string,
-   footerJustify?: string
-   
-}
-
-export class MsgBox {
-   static alert(options: string | Cx.Config): Promise<void>;
-
-   static yesNo(options: string | Cx.Config): Promise<string>;
-}
-
+import * as Cx from '../../core';
+
+interface MsgBoxProps {
+
+   buttonMod?: null,
+   footerDirection?: string,
+   footerJustify?: string
+   
+}
+
+export class MsgBox {
+   static alert(options: string | Cx.Config): Promise<void>;
+
+   static yesNo(options: string | Cx.Config): Promise<string>;
+}
+
 export function enableMsgBoxAlerts();