cx 24.4.0 → 24.4.2

package/src/widgets/nav/Scroller.scss

@@ -1,146 +1,146 @@
-@mixin cx-scroller(
-   $name: "scroller",
-   $icon-size: $cx-default-icon-size,
-   $button-size: $cx-default-scroller-button-size,
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   .#{$block}#{$name} {
-      position: relative;
-      user-select: none;
-      display: flex;
-      align-items: stretch;
-      justify-content: stretch;
-
-      &.#{$state}horizontal {
-         white-space: nowrap;
-
-         &.#{$state}horizontal.#{$state}scrollable {
-            padding-left: $button-size;
-            padding-right: $button-size;
-         }
-      }
-
-      &.#{$state}vertical {
-         &.#{$state}scrollable {
-            padding-top: $button-size;
-            padding-bottom: $button-size;
-         }
-      }
-   }
-
-   .#{$element}#{$name}-clip {
-      overflow: hidden;
-      box-sizing: border-box;
-      display: flex;
-      align-items: stretch;
-      justify-content: stretch;
-      flex: 1 1 0%;
-   }
-
-   .#{$element}#{$name}-scroller {
-      box-sizing: border-box;
-
-      .#{$block}#{$name}.#{$state}horizontal > .#{$element}#{$name}-clip > & {
-         overflow-x: auto;
-      }
-
-      .#{$block}#{$name}.#{$state}vertical > .#{$element}#{$name}-clip > & {
-         overflow-y: auto;
-         flex: 1 1 0%;
-      }
-
-      &::-webkit-scrollbar {
-         display: none;
-      }
-   }
-
-   .#{$element}#{$name}-left-arrow {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      width: $button-size;
-      cursor: pointer;
-      display: none;
-
-      & > .#{$element}#{$name}-icon {
-         transform: rotate(90deg);
-      }
-
-      .#{$state}scrollable > & {
-         display: block;
-      }
-   }
-
-   .#{$element}#{$name}-right-arrow {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      right: 0;
-      width: $button-size;
-      cursor: pointer;
-      display: none;
-
-      & > .#{$element}#{$name}-icon {
-         transform: rotate(-90deg);
-      }
-
-      .#{$state}scrollable > & {
-         display: block;
-      }
-   }
-
-   .#{$element}#{$name}-top-arrow {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: $button-size;
-      cursor: pointer;
-      display: none;
-
-      & > .#{$element}#{$name}-icon {
-         transform: rotate(180deg);
-      }
-
-      .#{$state}scrollable > & {
-         display: block;
-      }
-   }
-
-   .#{$element}#{$name}-bottom-arrow {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      height: $button-size;
-      cursor: pointer;
-      display: none;
-
-      & > .#{$element}#{$name}-icon {
-         //transform: rotate(-90deg);
-      }
-
-      .#{$state}scrollable > & {
-         display: block;
-      }
-   }
-
-   .#{$element}#{$name}-icon {
-      height: $icon-size;
-      width: $icon-size;
-      top: 50%;
-      left: 50%;
-      position: absolute;
-      margin-left: -$icon-size * 0.5;
-      margin-top: -$icon-size * 0.5;
-   }
-}
-
-@if (cx-should-include("cx/widgets/Scroller")) {
-   @include cx-scroller();
-}
+@mixin cx-scroller(
+   $name: "scroller",
+   $icon-size: $cx-default-icon-size,
+   $button-size: $cx-default-scroller-button-size,
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   .#{$block}#{$name} {
+      position: relative;
+      user-select: none;
+      display: flex;
+      align-items: stretch;
+      justify-content: stretch;
+
+      &.#{$state}horizontal {
+         white-space: nowrap;
+
+         &.#{$state}horizontal.#{$state}scrollable {
+            padding-left: $button-size;
+            padding-right: $button-size;
+         }
+      }
+
+      &.#{$state}vertical {
+         &.#{$state}scrollable {
+            padding-top: $button-size;
+            padding-bottom: $button-size;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-clip {
+      overflow: hidden;
+      box-sizing: border-box;
+      display: flex;
+      align-items: stretch;
+      justify-content: stretch;
+      flex: 1 1 0%;
+   }
+
+   .#{$element}#{$name}-scroller {
+      box-sizing: border-box;
+
+      .#{$block}#{$name}.#{$state}horizontal > .#{$element}#{$name}-clip > & {
+         overflow-x: auto;
+      }
+
+      .#{$block}#{$name}.#{$state}vertical > .#{$element}#{$name}-clip > & {
+         overflow-y: auto;
+         flex: 1 1 0%;
+      }
+
+      &::-webkit-scrollbar {
+         display: none;
+      }
+   }
+
+   .#{$element}#{$name}-left-arrow {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: $button-size;
+      cursor: pointer;
+      display: none;
+
+      & > .#{$element}#{$name}-icon {
+         transform: rotate(90deg);
+      }
+
+      .#{$state}scrollable > & {
+         display: block;
+      }
+   }
+
+   .#{$element}#{$name}-right-arrow {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      width: $button-size;
+      cursor: pointer;
+      display: none;
+
+      & > .#{$element}#{$name}-icon {
+         transform: rotate(-90deg);
+      }
+
+      .#{$state}scrollable > & {
+         display: block;
+      }
+   }
+
+   .#{$element}#{$name}-top-arrow {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: $button-size;
+      cursor: pointer;
+      display: none;
+
+      & > .#{$element}#{$name}-icon {
+         transform: rotate(180deg);
+      }
+
+      .#{$state}scrollable > & {
+         display: block;
+      }
+   }
+
+   .#{$element}#{$name}-bottom-arrow {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      height: $button-size;
+      cursor: pointer;
+      display: none;
+
+      & > .#{$element}#{$name}-icon {
+         //transform: rotate(-90deg);
+      }
+
+      .#{$state}scrollable > & {
+         display: block;
+      }
+   }
+
+   .#{$element}#{$name}-icon {
+      height: $icon-size;
+      width: $icon-size;
+      top: 50%;
+      left: 50%;
+      position: absolute;
+      margin-left: -$icon-size * 0.5;
+      margin-top: -$icon-size * 0.5;
+   }
+}
+
+@if (cx-should-include("cx/widgets/Scroller")) {
+   @include cx-scroller();
+}

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/Submenu.js

@@ -1,6 +1,6 @@
-import {MenuItem} from './MenuItem';
-
-export class Submenu extends MenuItem {}
-
-
-
+import {MenuItem} from './MenuItem';
+
+export class Submenu extends MenuItem {}
+
+
+

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.js

@@ -1,82 +1,82 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { HtmlElement } from "../HtmlElement";
-import { preventFocusOnTouch } from "../../ui/FocusManager";
-import { isUndefined } from "../../util/isUndefined";
-
-export class Tab extends HtmlElement {
-   declareData() {
-      super.declareData(
-         {
-            tab: undefined,
-            value: undefined,
-            disabled: undefined,
-            text: undefined,
-         },
-         ...arguments
-      );
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = {
-         active: data.tab == data.value,
-         disabled: data.disabled,
-         shape: this.shape,
-      };
-      if (this.default && isUndefined(data.value)) instance.set("value", data.tab);
-      super.prepareData(context, instance);
-   }
-
-   isValidHtmlAttribute(attrName) {
-      switch (attrName) {
-         case "value":
-         case "tab":
-         case "text":
-         case "disabled":
-         case "default":
-            return false;
-
-         default:
-            return super.isValidHtmlAttribute(attrName);
-      }
-   }
-
-   attachProps(context, instance, props) {
-      super.attachProps(context, instance, props);
-
-      let { data } = instance;
-      if (!data.disabled) {
-         props.href = "#";
-         delete props.value;
-
-         props.onMouseDown = (e) => {
-            if (this.onMouseDown) instance.invoke("onMouseDown", e, instance);
-            preventFocusOnTouch(e);
-         };
-
-         props.onClick = (e) => this.handleClick(e, instance);
-      }
-   }
-
-   handleClick(e, instance) {
-      if (this.onClick && instance.invoke("onClick", e, instance) === false) {
-         return;
-      }
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      let { data } = instance;
-
-      if (data.disabled) return;
-
-      instance.set("value", data.tab);
-   }
-}
-
-Tab.prototype.baseClass = "tab";
-Tab.prototype.tag = "a";
-Tab.prototype.focusOnMouseDown = false;
-Tab.prototype.default = false;
-
-Widget.alias("tab", Tab);
+import { Widget, VDOM } from "../../ui/Widget";
+import { HtmlElement } from "../HtmlElement";
+import { preventFocusOnTouch } from "../../ui/FocusManager";
+import { isUndefined } from "../../util/isUndefined";
+
+export class Tab extends HtmlElement {
+   declareData() {
+      super.declareData(
+         {
+            tab: undefined,
+            value: undefined,
+            disabled: undefined,
+            text: undefined,
+         },
+         ...arguments
+      );
+   }
+
+   prepareData(context, instance) {
+      let { data } = instance;
+      data.stateMods = {
+         active: data.tab == data.value,
+         disabled: data.disabled,
+         shape: this.shape,
+      };
+      if (this.default && isUndefined(data.value)) instance.set("value", data.tab);
+      super.prepareData(context, instance);
+   }
+
+   isValidHtmlAttribute(attrName) {
+      switch (attrName) {
+         case "value":
+         case "tab":
+         case "text":
+         case "disabled":
+         case "default":
+            return false;
+
+         default:
+            return super.isValidHtmlAttribute(attrName);
+      }
+   }
+
+   attachProps(context, instance, props) {
+      super.attachProps(context, instance, props);
+
+      let { data } = instance;
+      if (!data.disabled) {
+         props.href = "#";
+         delete props.value;
+
+         props.onMouseDown = (e) => {
+            if (this.onMouseDown) instance.invoke("onMouseDown", e, instance);
+            preventFocusOnTouch(e);
+         };
+
+         props.onClick = (e) => this.handleClick(e, instance);
+      }
+   }
+
+   handleClick(e, instance) {
+      if (this.onClick && instance.invoke("onClick", e, instance) === false) {
+         return;
+      }
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      let { data } = instance;
+
+      if (data.disabled) return;
+
+      instance.set("value", data.tab);
+   }
+}
+
+Tab.prototype.baseClass = "tab";
+Tab.prototype.tag = "a";
+Tab.prototype.focusOnMouseDown = false;
+Tab.prototype.default = false;
+
+Widget.alias("tab", Tab);