cx 25.9.0 → 25.10.1

package/src/widgets/nav/Route.d.ts

@@ -1,21 +1,21 @@
-import * as Cx from '../../core';
-
-export interface RouteProps extends Cx.PureContainerProps {
-
-   /** Url binding. Bind this to the global `url` variable. */
-   url?: Cx.StringProp,
-
-   /** Target route, e.g. `~/user/:userId`. All routes should start with `~/`. */
-   path?: string,
-
-   /** Target route, e.g. `~/user/:userId`. All routes should start with `~/`. */
-   route?: string,
-   
-   /** Name used to expose local data. Defaults to `$route`. */
-   recordName?: string,
-
-   /** Match route even if given `route` is only a prefix of the current `url`. */
-   prefix?: boolean
-}
-
-export class Route extends Cx.Widget<RouteProps> {}
+import * as Cx from '../../core';
+
+export interface RouteProps extends Cx.PureContainerProps {
+
+   /** Url binding. Bind this to the global `url` variable. */
+   url?: Cx.StringProp,
+
+   /** Target route, e.g. `~/user/:userId`. All routes should start with `~/`. */
+   path?: string,
+
+   /** Target route, e.g. `~/user/:userId`. All routes should start with `~/`. */
+   route?: string,
+   
+   /** Name used to expose local data. Defaults to `$route`. */
+   recordName?: string,
+
+   /** Match route even if given `route` is only a prefix of the current `url`. */
+   prefix?: boolean
+}
+
+export class Route extends Cx.Widget<RouteProps> {}

package/src/widgets/nav/Scroller.d.ts

@@ -1,17 +1,17 @@
-import * as Cx from '../../core';
-
-interface ScrollerProps extends Cx.StyledContainerProps {
-
-   /** Base CSS class. Default is `hscroller`. */
-   baseClass?: string,
-
-   horizontal?: boolean,
-
-   vertical?: boolean
-
-   scrollIntoViewSelector?: Cx.StringProp
-}
-
-export class Scroller extends Cx.Widget<ScrollerProps> {}
-export class HScroller extends Cx.Widget<ScrollerProps> {}
-export class VScroller extends Cx.Widget<ScrollerProps> {}
+import * as Cx from '../../core';
+
+interface ScrollerProps extends Cx.StyledContainerProps {
+
+   /** Base CSS class. Default is `hscroller`. */
+   baseClass?: string,
+
+   horizontal?: boolean,
+
+   vertical?: boolean
+
+   scrollIntoViewSelector?: Cx.StringProp
+}
+
+export class Scroller extends Cx.Widget<ScrollerProps> {}
+export class HScroller extends Cx.Widget<ScrollerProps> {}
+export class VScroller extends Cx.Widget<ScrollerProps> {}

package/src/widgets/nav/Submenu.d.ts

@@ -1,6 +1,6 @@
-import * as Cx from '../../core';
-import { MenuItemProps } from './MenuItem';
-
-interface SubmenuProps extends MenuItemProps {}
-
-export class Submenu extends Cx.Widget<SubmenuProps> {}
+import * as Cx from '../../core';
+import { MenuItemProps } from './MenuItem';
+
+interface SubmenuProps extends MenuItemProps {}
+
+export class Submenu extends Cx.Widget<SubmenuProps> {}

package/src/widgets/nav/Tab.d.ts

@@ -1,33 +1,33 @@
-import * as Cx from '../../core';
-
-interface TabProps extends Cx.HtmlElementProps {
-
-   /** A value to be written to the `value` property if the tab is clicked. */
-   tab?: Cx.Prop<string | number>,
-
-   /** 
-    * Value of the currently selected tab. 
-    * If `value` is equal to `tab`, the tab appears active. 
-    */
-   value?: Cx.StringProp,
-
-   /** Set to `true` to disable selection. */
-   disabled?: Cx.BooleanProp,
- 
-   /** Base CSS class to be applied to the element. No class is applied by default. */
-   baseClass?: string,
-
-   /** Name of the HTML element to be rendered. Default is `div`. */
-   tag?: string,
-   
-   /** Determines if tab should receive focus on `mousedown` event. 
-    *  Default is `false`, which means that focus can be set only using the keyboard `Tab` key.
-    */
-   focusOnMouseDown?: boolean,
-
-   /** Set to true to set the default tab. */
-   default?: boolean
-   
-}
-
-export class Tab extends Cx.Widget<TabProps> {}
+import * as Cx from '../../core';
+
+interface TabProps extends Cx.HtmlElementProps {
+
+   /** A value to be written to the `value` property if the tab is clicked. */
+   tab?: Cx.Prop<string | number>,
+
+   /** 
+    * Value of the currently selected tab. 
+    * If `value` is equal to `tab`, the tab appears active. 
+    */
+   value?: Cx.StringProp,
+
+   /** Set to `true` to disable selection. */
+   disabled?: Cx.BooleanProp,
+ 
+   /** Base CSS class to be applied to the element. No class is applied by default. */
+   baseClass?: string,
+
+   /** Name of the HTML element to be rendered. Default is `div`. */
+   tag?: string,
+   
+   /** Determines if tab should receive focus on `mousedown` event. 
+    *  Default is `false`, which means that focus can be set only using the keyboard `Tab` key.
+    */
+   focusOnMouseDown?: boolean,
+
+   /** Set to true to set the default tab. */
+   default?: boolean
+   
+}
+
+export class Tab extends Cx.Widget<TabProps> {}

package/src/widgets/nav/Tab.variables.scss

@@ -1,84 +1,84 @@
-$cx-default-tab-color: inherit !default;
-$cx-default-tab-font-size: null !default;
-$cx-default-tab-font-weight: inherit !default;
-$cx-default-tab-background-color: transparent !default;
-$cx-default-tab-border-width: $cx-default-box-border-width !default;
-$cx-default-tab-border-color: transparent !default;
-$cx-default-tab-border-radius: $cx-default-border-radius !default;
-$cx-default-tab-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-tab-box-shadow: none !default;
-
-$cx-tab-state-style-map: cx-deep-map-merge(
-   $cx-list-item,
-   (
-      default: (
-         color: $cx-default-tab-color,
-         font-size: $cx-default-tab-font-size,
-         line-height: $cx-default-box-line-height,
-         font-weight: $cx-default-tab-font-weight,
-         text-decoration: none,
-         cursor: pointer,
-         text-align: center,
-         background-color: $cx-default-tab-background-color,
-         border-radius: $cx-default-tab-border-radius,
-         padding: $cx-default-tab-padding,
-         border-width: $cx-default-tab-border-width,
-         border-color: $cx-default-tab-border-color,
-         border-style: solid,
-         box-shadow: $cx-default-tab-box-shadow,
-      ),
-      hover: (
-         text-decoration: none,
-      ),
-      disabled: (
-         background-color: transparent,
-         pointer-events: none,
-      ),
-   )
-) !default;
-
-$cx-tab-mods: (
-   classic: (
-      default: (
-         position: relative,
-         border-width: 1px,
-         border-bottom-left-radius: 0,
-         border-bottom-right-radius: 0,
-      ),
-      selected: (
-         border-color: $cx-default-border-color,
-         background-color: $cx-default-cover-background-color,
-      ),
-   ),
-   line: (
-      default: (
-         background-color: transparent !important,
-         border-left-color: transparent !important,
-         border-right-color: transparent !important,
-         border-top-color: transparent !important,
-         border-left-width: 0,
-         border-right-width: 0,
-         border-bottom-width: 2px,
-         border-top-width: 0,
-         border-bottom-left-radius: 0,
-         border-bottom-right-radius: 0,
-      ),
-      hover: (
-         border-color: rgba(128, 128, 128, 0.2),
-      ),
-      cursor: (
-         border-color: rgba(123, 190, 255, 0.3),
-      ),
-      selected: (
-         border-color: rgba(128, 128, 128, 0.4),
-      ),
-      selected-cursor: (
-         border-color: rgba(123, 190, 255, 0.7),
-      ),
-      active: (),
-      disabled: (
-         border-color: transparent,
-      ),
-   ),
-) !default;
+$cx-default-tab-color: inherit !default;
+$cx-default-tab-font-size: null !default;
+$cx-default-tab-font-weight: inherit !default;
+$cx-default-tab-background-color: transparent !default;
+$cx-default-tab-border-width: $cx-default-box-border-width !default;
+$cx-default-tab-border-color: transparent !default;
+$cx-default-tab-border-radius: $cx-default-border-radius !default;
+$cx-default-tab-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-tab-box-shadow: none !default;
+
+$cx-tab-state-style-map: cx-deep-map-merge(
+   $cx-list-item,
+   (
+      default: (
+         color: $cx-default-tab-color,
+         font-size: $cx-default-tab-font-size,
+         line-height: $cx-default-box-line-height,
+         font-weight: $cx-default-tab-font-weight,
+         text-decoration: none,
+         cursor: pointer,
+         text-align: center,
+         background-color: $cx-default-tab-background-color,
+         border-radius: $cx-default-tab-border-radius,
+         padding: $cx-default-tab-padding,
+         border-width: $cx-default-tab-border-width,
+         border-color: $cx-default-tab-border-color,
+         border-style: solid,
+         box-shadow: $cx-default-tab-box-shadow,
+      ),
+      hover: (
+         text-decoration: none,
+      ),
+      disabled: (
+         background-color: transparent,
+         pointer-events: none,
+      ),
+   )
+) !default;
+
+$cx-tab-mods: (
+   classic: (
+      default: (
+         position: relative,
+         border-width: 1px,
+         border-bottom-left-radius: 0,
+         border-bottom-right-radius: 0,
+      ),
+      selected: (
+         border-color: $cx-default-border-color,
+         background-color: $cx-default-cover-background-color,
+      ),
+   ),
+   line: (
+      default: (
+         background-color: transparent !important,
+         border-left-color: transparent !important,
+         border-right-color: transparent !important,
+         border-top-color: transparent !important,
+         border-left-width: 0,
+         border-right-width: 0,
+         border-bottom-width: 2px,
+         border-top-width: 0,
+         border-bottom-left-radius: 0,
+         border-bottom-right-radius: 0,
+      ),
+      hover: (
+         border-color: rgba(128, 128, 128, 0.2),
+      ),
+      cursor: (
+         border-color: rgba(123, 190, 255, 0.3),
+      ),
+      selected: (
+         border-color: rgba(128, 128, 128, 0.4),
+      ),
+      selected-cursor: (
+         border-color: rgba(123, 190, 255, 0.7),
+      ),
+      active: (),
+      disabled: (
+         border-color: transparent,
+      ),
+   ),
+) !default;

package/src/widgets/nav/index.d.ts

@@ -1,10 +1,10 @@
-export * from './Route';
-export * from './RedirectRoute';
-export * from './Tab';
-export * from './Link';
-export * from './LinkButton';
-export * from './Menu';
-export * from './MenuItem';
-export * from './MenuSpacer';
-export * from './Submenu';
-export * from './Scroller';
+export * from './Route';
+export * from './RedirectRoute';
+export * from './Tab';
+export * from './Link';
+export * from './LinkButton';
+export * from './Menu';
+export * from './MenuItem';
+export * from './MenuSpacer';
+export * from './Submenu';
+export * from './Scroller';

package/src/widgets/nav/index.scss

@@ -1,6 +1,6 @@
-@import 'cover';
-@import 'Tab';
-@import 'Menu';
-@import 'MenuItem';
-@import 'Link';
+@import 'cover';
+@import 'Tab';
+@import 'Menu';
+@import 'MenuItem';
+@import 'Link';
 @import 'Scroller';

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

@@ -1,10 +1,10 @@
-import * as Cx from "../../core";
-import { View } from "../../data/View";
-import { Instance } from "../../ui";
-import { DropdownProps } from "./Dropdown";
-
-export interface ContextMenuProps extends DropdownProps {}
-
-export class ContextMenu extends Cx.Widget<ContextMenuProps> {}
-
-export function openContextMenu(e: MouseEvent, contents: any, storeOrInstance?: View | Instance, options?: any);
+import * as Cx from "../../core";
+import { View } from "../../data/View";
+import { Instance } from "../../ui";
+import { DropdownProps } from "./Dropdown";
+
+export interface ContextMenuProps extends DropdownProps {}
+
+export class ContextMenu extends Cx.Widget<ContextMenuProps> {}
+
+export function openContextMenu(e: MouseEvent, contents: any, storeOrInstance?: View | Instance, options?: any);

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

@@ -1,32 +1,32 @@
-import * as Cx from "../../core";
-import { OverlayProps } from "./Overlay";
-
-export interface DropdownProps extends OverlayProps {
-   // TODO: check if string literals should be used instead
-   placement?: Cx.StringProp | Cx.Prop<null>;
-
-   offset?: number;
-   matchWidth?: boolean;
-   matchMaxWidth?: boolean;
-   placementOrder?: string;
-   constrain?: boolean;
-   positioning?: string;
-   touchFriendly?: boolean;
-   arrow?: boolean;
-   pad?: boolean;
-   elementExplode?: number;
-   screenPadding?: number;
-   firstChildDefinesHeight?: boolean;
-   firstChildDefinesWidth?: boolean;
-
-   /** The dropdown will be automatically closed if the page is scrolled a certain distance.  */
-   closeOnScrollDistance?: number;
-
-   relatedElement?: Element;
-
-   onResolveRelatedElement?: string | ((beaconEl: Element, instance: any) => Element);
-
-   onMeasureNaturalContentSize?: string | ((el: Element, instance: any) => { width?: number; height?: number });
-}
-
-export class Dropdown extends Cx.Widget<DropdownProps> {}
+import * as Cx from "../../core";
+import { OverlayProps } from "./Overlay";
+
+export interface DropdownProps extends OverlayProps {
+   // TODO: check if string literals should be used instead
+   placement?: Cx.StringProp | Cx.Prop<null>;
+
+   offset?: number;
+   matchWidth?: boolean;
+   matchMaxWidth?: boolean;
+   placementOrder?: string;
+   constrain?: boolean;
+   positioning?: string;
+   touchFriendly?: boolean;
+   arrow?: boolean;
+   pad?: boolean;
+   elementExplode?: number;
+   screenPadding?: number;
+   firstChildDefinesHeight?: boolean;
+   firstChildDefinesWidth?: boolean;
+
+   /** The dropdown will be automatically closed if the page is scrolled a certain distance.  */
+   closeOnScrollDistance?: number;
+
+   relatedElement?: Element;
+
+   onResolveRelatedElement?: string | ((beaconEl: Element, instance: any) => Element);
+
+   onMeasureNaturalContentSize?: string | ((el: Element, instance: any) => { width?: number; height?: number });
+}
+
+export class Dropdown extends Cx.Widget<DropdownProps> {}

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/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();

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

@@ -1,73 +1,73 @@
-import * as Cx from "../../core";
-import { View } from "../../data";
-import { Instance } from "../../ui/Instance";
-
-export interface OverlayProps extends Cx.StyledContainerProps {
-   /** Set to `true` to enable resizing. */
-   resizable?: Cx.BooleanProp;
-
-   /** Set to `true` to enable dragging the overlay. */
-   draggable?: Cx.BooleanProp;
-
-   /** Base CSS class to be applied to the field. Defaults to `overlay`. */
-   baseClass?: string;
-
-   resizeWidth?: number;
-
-   /** Set to `true` to initially place the overlay in the center of the page. */
-   center?: boolean;
-
-   /** Set to `true` to initially place the overlay in the center of the page horizontally. */
-   centerX?: boolean;
-
-   /** Set to `true` to initially place the overlay in the center of the page vertically. */
-   centerY?: boolean;
-
-   /** Set to `true` to add a modal backdrop which masks mouse events for the rest of the page. */
-   modal?: boolean;
-
-   /** Set to `true` to add a modal backdrop which will dismiss the window when clicked. */
-   backdrop?: boolean;
-
-   /** Set to `true` to force the element to be rendered inline, instead of being appended to the body element.
-    * Inline overlays have z-index set to a very high value, to ensure they are displayed on top of the other content. */
-   inline?: boolean;
-
-   /** Set to `true` to automatically focus the top level overlay element. */
-   autoFocus?: boolean;
-
-   /** Set to `true` to automatically focus the first focusable child in the overlay. */
-   autoFocusFirstChild?: boolean;
-
-   /** Set to `true` to append the set animate state after the initial render. Appended CSS class may be used to add show/hide animations. */
-   animate?: boolean;
-
-   /** Number of milliseconds to wait, before removing the element from the DOM. Used in combination with the animate property. */
-   destroyDelay?: number;
-
-   /** Automatically dismiss overlay if it loses focus. */
-   dismissOnFocusOut?: boolean;
-
-   /** Set to true to make the top level overlay element focusable. */
-   focusable?: boolean;
-
-   /** Set to `true` to dismiss the window if the user presses the back button in the browser. */
-   dismissOnPopState?: boolean;
-
-   /** A callback function which fires while the overlay is being moved around. */
-   onMove?(e: Event, instance: Instance, component: any);
-
-   /** A callback function which fires while the overlay is being resized. */
-   onResize?(e: Event, instance: Instance, component: any);
-
-   /** zIndex */
-   zIndex?: Cx.NumberProp;
-
-   /** Set to `true` to make the window automatically close if Esc is pressed on the keyboard. Default value is false.*/
-   closeOnEscape?: boolean;
-}
-
-export class Overlay extends Cx.Widget<OverlayProps> {
-   /** Opens the overlay. Returns a dismiss function. */
-   open(store: View | Instance): () => void;
-}
+import * as Cx from "../../core";
+import { View } from "../../data";
+import { Instance } from "../../ui/Instance";
+
+export interface OverlayProps extends Cx.StyledContainerProps {
+   /** Set to `true` to enable resizing. */
+   resizable?: Cx.BooleanProp;
+
+   /** Set to `true` to enable dragging the overlay. */
+   draggable?: Cx.BooleanProp;
+
+   /** Base CSS class to be applied to the field. Defaults to `overlay`. */
+   baseClass?: string;
+
+   resizeWidth?: number;
+
+   /** Set to `true` to initially place the overlay in the center of the page. */
+   center?: boolean;
+
+   /** Set to `true` to initially place the overlay in the center of the page horizontally. */
+   centerX?: boolean;
+
+   /** Set to `true` to initially place the overlay in the center of the page vertically. */
+   centerY?: boolean;
+
+   /** Set to `true` to add a modal backdrop which masks mouse events for the rest of the page. */
+   modal?: boolean;
+
+   /** Set to `true` to add a modal backdrop which will dismiss the window when clicked. */
+   backdrop?: boolean;
+
+   /** Set to `true` to force the element to be rendered inline, instead of being appended to the body element.
+    * Inline overlays have z-index set to a very high value, to ensure they are displayed on top of the other content. */
+   inline?: boolean;
+
+   /** Set to `true` to automatically focus the top level overlay element. */
+   autoFocus?: boolean;
+
+   /** Set to `true` to automatically focus the first focusable child in the overlay. */
+   autoFocusFirstChild?: boolean;
+
+   /** Set to `true` to append the set animate state after the initial render. Appended CSS class may be used to add show/hide animations. */
+   animate?: boolean;
+
+   /** Number of milliseconds to wait, before removing the element from the DOM. Used in combination with the animate property. */
+   destroyDelay?: number;
+
+   /** Automatically dismiss overlay if it loses focus. */
+   dismissOnFocusOut?: boolean;
+
+   /** Set to true to make the top level overlay element focusable. */
+   focusable?: boolean;
+
+   /** Set to `true` to dismiss the window if the user presses the back button in the browser. */
+   dismissOnPopState?: boolean;
+
+   /** A callback function which fires while the overlay is being moved around. */
+   onMove?(e: Event, instance: Instance, component: any);
+
+   /** A callback function which fires while the overlay is being resized. */
+   onResize?(e: Event, instance: Instance, component: any);
+
+   /** zIndex */
+   zIndex?: Cx.NumberProp;
+
+   /** Set to `true` to make the window automatically close if Esc is pressed on the keyboard. Default value is false.*/
+   closeOnEscape?: boolean;
+}
+
+export class Overlay extends Cx.Widget<OverlayProps> {
+   /** Opens the overlay. Returns a dismiss function. */
+   open(store: View | Instance): () => void;
+}