cx 24.4.6 → 24.4.8

package/src/widgets/FlexBox.d.ts

@@ -1,69 +1,69 @@
-import * as Cx from "../core";
-
-interface FlexBoxProps extends Cx.StyledContainerProps {
-   /** Base CSS class. Default is `flexbox`. */
-   baseClass?: string;
-
-   /** Flex direction. Default is `row`.  */
-   direction?: string;
-
-   /**
-    * Add spacing between items by applying a margin to children.
-    * Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
-    * Value `true` is equivalent to `medium`.
-    */
-   spacing?: string | boolean;
-
-   /**
-    * Add horizontal spacing between items by applying a margin to children.
-    * Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
-    * Value `true` is equivalent to `medium`. \
-    */
-   hspacing?: boolean | string;
-
-   /**
-    * Add vertical spacing between items by applying a margin to children.
-    * Allowed values are xsmall, small, medium, large and xlarge.
-    * Value true is equivalent to medium.
-    */
-   vspacing?: boolean | string;
-
-   styled?: boolean;
-
-   /**
-    * Add padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
-    *  Value `true` is equivalent to `medium`.
-    */
-   pad?: boolean | string;
-   padding?: boolean | string;
-
-   /**
-    * Add horizontal padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
-    *  Value `true` is equivalent to `medium`.
-    */
-   hpad?: boolean | string;
-   hpadding?: boolean | string;
-
-   /**
-    * Add vertical padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
-    *  Value `true` is equivalent to `medium`.
-    */
-   vpad?: boolean | string;
-   vpadding?: boolean | string;
-
-   wrap?: boolean;
-   align?: "start" | "center" | "end" | "baseline" | "stretch";
-   justify?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
-   target?: string;
-
-   /**
-    * Set to true to add overflow styles required for deeply nested flexbox calculations.
-    */
-   nested?: boolean;
-}
-
-export class FlexBox extends Cx.Widget<FlexBoxProps> {}
-
-export class FlexRow extends FlexBox {}
-
-export class FlexCol extends FlexBox {}
+import * as Cx from "../core";
+
+interface FlexBoxProps extends Cx.StyledContainerProps {
+   /** Base CSS class. Default is `flexbox`. */
+   baseClass?: string;
+
+   /** Flex direction. Default is `row`.  */
+   direction?: string;
+
+   /**
+    * Add spacing between items by applying a margin to children.
+    * Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
+    * Value `true` is equivalent to `medium`.
+    */
+   spacing?: string | boolean;
+
+   /**
+    * Add horizontal spacing between items by applying a margin to children.
+    * Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
+    * Value `true` is equivalent to `medium`. \
+    */
+   hspacing?: boolean | string;
+
+   /**
+    * Add vertical spacing between items by applying a margin to children.
+    * Allowed values are xsmall, small, medium, large and xlarge.
+    * Value true is equivalent to medium.
+    */
+   vspacing?: boolean | string;
+
+   styled?: boolean;
+
+   /**
+    * Add padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
+    *  Value `true` is equivalent to `medium`.
+    */
+   pad?: boolean | string;
+   padding?: boolean | string;
+
+   /**
+    * Add horizontal padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
+    *  Value `true` is equivalent to `medium`.
+    */
+   hpad?: boolean | string;
+   hpadding?: boolean | string;
+
+   /**
+    * Add vertical padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
+    *  Value `true` is equivalent to `medium`.
+    */
+   vpad?: boolean | string;
+   vpadding?: boolean | string;
+
+   wrap?: boolean;
+   align?: "start" | "center" | "end" | "baseline" | "stretch";
+   justify?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
+   target?: string;
+
+   /**
+    * Set to true to add overflow styles required for deeply nested flexbox calculations.
+    */
+   nested?: boolean;
+}
+
+export class FlexBox extends Cx.Widget<FlexBoxProps> {}
+
+export class FlexRow extends FlexBox {}
+
+export class FlexCol extends FlexBox {}

package/src/widgets/FlexBox.js

@@ -1,93 +1,93 @@
-import {VDOM} from '../ui/Widget';
-import {Container} from '../ui/Container';
-import {isUndefined} from '../util/isUndefined';
-
-export class FlexBox extends Container {
-
-   init() {
-      if (this.padding)
-         this.pad = this.padding;
-      
-      if (this.hpadding)
-         this.hpad = this.hpadding;
-
-      if (this.vpadding)
-         this.vpad = this.vpadding;
-
-      this.hpad = isUndefined(this.hpad) ? this.pad : this.hpad;
-      this.vpad = isUndefined(this.vpad) ? this.pad : this.hpad;
-
-      if (this.hpad === true)
-         this.hpad = 'medium';
-
-      if (this.vpad === true)
-         this.vpad = 'medium';
-      
-      this.hspacing = isUndefined(this.hspacing) ? this.spacing : this.hspacing;
-      this.vspacing = isUndefined(this.vspacing) ? this.spacing : this.vspacing;
-
-      if (this.hspacing === true)
-         this.hspacing = 'medium';
-
-      if (this.vspacing === true)
-         this.vspacing = 'medium';
-
-      super.init();
-   }
-
-   initInstance(context, instance) {
-      instance.eventHandlers = instance.getJsxEventProps();
-      super.initInstance(context, instance);
-   }
-
-   prepareCSS(context, instance) {
-      let {data} = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         [this.hpad + '-hpad']: this.hpad,
-         [this.vpad + '-vpad']: this.vpad,
-         nested: this.nested
-      };
-      super.prepareCSS(context, instance);
-   }
-
-   render(context, instance, key) {
-      let {data, eventHandlers} = instance;
-      let {CSS, baseClass} = this;
-      let flexboxMods = {
-         [this.hspacing + '-hspacing']: this.hspacing,
-         [this.vspacing + '-vspacing']: this.vspacing,
-         ['align-' + this.align]: this.align,
-         ['justify-' + this.justify]: this.justify,
-         wrap: this.wrap,
-         ['target-' + this.target]: true,
-         [this.direction]: true
-      };
-
-      return <div key={key} className={data.classNames} style={data.style} {...eventHandlers}>
-         <div className={CSS.element(baseClass, 'flexbox', flexboxMods)}>
-            {this.renderChildren(context, instance)}
-         </div>
-      </div>
-   }
-}
-
-FlexBox.prototype.baseClass = "flexbox";
-FlexBox.prototype.styled = true;
-FlexBox.prototype.direction = 'row';
-FlexBox.prototype.spacing = false;
-FlexBox.prototype.hspacing = undefined;
-FlexBox.prototype.vspacing = undefined;
-FlexBox.prototype.pad = false;
-FlexBox.prototype.hpad = undefined;
-FlexBox.prototype.vpad = undefined;
-FlexBox.prototype.wrap = false;
-FlexBox.prototype.align = false;
-FlexBox.prototype.justify = false;
-FlexBox.prototype.target = 'any';
-FlexBox.prototype.nested = false;
-
-export class FlexRow extends FlexBox {}
-
-export class FlexCol extends FlexBox {}
+import {VDOM} from '../ui/Widget';
+import {Container} from '../ui/Container';
+import {isUndefined} from '../util/isUndefined';
+
+export class FlexBox extends Container {
+
+   init() {
+      if (this.padding)
+         this.pad = this.padding;
+      
+      if (this.hpadding)
+         this.hpad = this.hpadding;
+
+      if (this.vpadding)
+         this.vpad = this.vpadding;
+
+      this.hpad = isUndefined(this.hpad) ? this.pad : this.hpad;
+      this.vpad = isUndefined(this.vpad) ? this.pad : this.hpad;
+
+      if (this.hpad === true)
+         this.hpad = 'medium';
+
+      if (this.vpad === true)
+         this.vpad = 'medium';
+      
+      this.hspacing = isUndefined(this.hspacing) ? this.spacing : this.hspacing;
+      this.vspacing = isUndefined(this.vspacing) ? this.spacing : this.vspacing;
+
+      if (this.hspacing === true)
+         this.hspacing = 'medium';
+
+      if (this.vspacing === true)
+         this.vspacing = 'medium';
+
+      super.init();
+   }
+
+   initInstance(context, instance) {
+      instance.eventHandlers = instance.getJsxEventProps();
+      super.initInstance(context, instance);
+   }
+
+   prepareCSS(context, instance) {
+      let {data} = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         [this.hpad + '-hpad']: this.hpad,
+         [this.vpad + '-vpad']: this.vpad,
+         nested: this.nested
+      };
+      super.prepareCSS(context, instance);
+   }
+
+   render(context, instance, key) {
+      let {data, eventHandlers} = instance;
+      let {CSS, baseClass} = this;
+      let flexboxMods = {
+         [this.hspacing + '-hspacing']: this.hspacing,
+         [this.vspacing + '-vspacing']: this.vspacing,
+         ['align-' + this.align]: this.align,
+         ['justify-' + this.justify]: this.justify,
+         wrap: this.wrap,
+         ['target-' + this.target]: true,
+         [this.direction]: true
+      };
+
+      return <div key={key} className={data.classNames} style={data.style} {...eventHandlers}>
+         <div className={CSS.element(baseClass, 'flexbox', flexboxMods)}>
+            {this.renderChildren(context, instance)}
+         </div>
+      </div>
+   }
+}
+
+FlexBox.prototype.baseClass = "flexbox";
+FlexBox.prototype.styled = true;
+FlexBox.prototype.direction = 'row';
+FlexBox.prototype.spacing = false;
+FlexBox.prototype.hspacing = undefined;
+FlexBox.prototype.vspacing = undefined;
+FlexBox.prototype.pad = false;
+FlexBox.prototype.hpad = undefined;
+FlexBox.prototype.vpad = undefined;
+FlexBox.prototype.wrap = false;
+FlexBox.prototype.align = false;
+FlexBox.prototype.justify = false;
+FlexBox.prototype.target = 'any';
+FlexBox.prototype.nested = false;
+
+export class FlexRow extends FlexBox {}
+
+export class FlexCol extends FlexBox {}
 FlexCol.prototype.direction = 'column';

package/src/widgets/FlexBox.scss

@@ -1,146 +1,146 @@
-@mixin cx-flexbox-spacing($divider, $besm: $cx-besm) {
-   $state: map-get($besm, state);
-   @each $pad, $size in $cx-pad-size {
-      &.#{$state}#{$pad}-hspacing {
-         margin-left: cx-divide(-$size, $divider);
-         margin-right: cx-divide(-$size, $divider);
-
-         & > * {
-            margin-left: cx-divide($size, $divider);
-            margin-right: cx-divide($size, $divider);
-         }
-      }
-
-      &.#{$state}#{$pad}-vspacing {
-         margin-top: cx-divide(-$size, $divider);
-         margin-bottom: cx-divide(-$size, $divider);
-
-         & > * {
-            margin-top: cx-divide($size, $divider);
-            margin-bottom: cx-divide($size, $divider);
-         }
-      }
-   }
-}
-
-@mixin cx-flexbox($name: "flexbox", $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} {
-      box-sizing: border-box;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-
-      &.#{$state}nested {
-         overflow: hidden;
-
-         & > div {
-            overflow: auto;
-         }
-      }
-
-      @each $pad, $size in $cx-pad-size {
-         &.#{$state}#{$pad}-hpad {
-            padding-left: $size;
-            padding-right: $size;
-         }
-
-         &.#{$state}#{$pad}-vpad {
-            padding-top: $size;
-            padding-bottom: $size;
-         }
-      }
-   }
-
-   .#{$element}#{$name}-flexbox {
-      display: flex;
-      flex: 1 1 auto;
-
-      &.#{$state}column {
-         flex-direction: column;
-      }
-
-      &.#{$state}row {
-         flex-direction: row;
-      }
-
-      &.#{$state}row-reverse {
-         flex-direction: row-reverse;
-      }
-
-      @include cx-flexbox-spacing(2, $besm);
-
-      &.#{$state}align-center {
-         align-items: center;
-      }
-
-      &.#{$state}align-start {
-         align-items: flex-start;
-      }
-
-      &.#{$state}align-end {
-         align-items: flex-end;
-      }
-
-      &.#{$state}align-baseline {
-         align-items: baseline;
-      }
-
-      &.#{$state}wrap {
-         flex-wrap: wrap;
-      }
-
-      &.#{$state}justify-center {
-         justify-content: center;
-      }
-
-      &.#{$state}justify-start {
-         justify-content: flex-start;
-      }
-
-      &.#{$state}justify-end {
-         justify-content: flex-end;
-      }
-
-      &.#{$state}justify-space-between {
-         justify-content: space-between;
-      }
-
-      &.#{$state}justify-space-around {
-         justify-content: space-around;
-      }
-
-      &.#{$state}justify-space-evenly {
-         justify-content: space-evenly;
-      }
-
-      &.#{$state}target-phone {
-         @media not screen and (min-width: $cx-screen-size-small) {
-            display: block;
-            @include cx-flexbox-spacing(1, $besm);
-         }
-      }
-
-      &.#{$state}target-tablet {
-         @media not screen and (min-width: $cx-screen-size-medium) {
-            display: block;
-            @include cx-flexbox-spacing(1, $besm);
-         }
-      }
-
-      &.#{$state}target-desktop {
-         @media not screen and (min-width: $cx-screen-size-large) {
-            display: block;
-            @include cx-flexbox-spacing(1, $besm);
-         }
-      }
-   }
-}
-
-@if (cx-should-include("cx/widgets/FlexBox")) {
-   @include cx-flexbox();
-}
+@mixin cx-flexbox-spacing($divider, $besm: $cx-besm) {
+   $state: map-get($besm, state);
+   @each $pad, $size in $cx-pad-size {
+      &.#{$state}#{$pad}-hspacing {
+         margin-left: cx-divide(-$size, $divider);
+         margin-right: cx-divide(-$size, $divider);
+
+         & > * {
+            margin-left: cx-divide($size, $divider);
+            margin-right: cx-divide($size, $divider);
+         }
+      }
+
+      &.#{$state}#{$pad}-vspacing {
+         margin-top: cx-divide(-$size, $divider);
+         margin-bottom: cx-divide(-$size, $divider);
+
+         & > * {
+            margin-top: cx-divide($size, $divider);
+            margin-bottom: cx-divide($size, $divider);
+         }
+      }
+   }
+}
+
+@mixin cx-flexbox($name: "flexbox", $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} {
+      box-sizing: border-box;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+
+      &.#{$state}nested {
+         overflow: hidden;
+
+         & > div {
+            overflow: auto;
+         }
+      }
+
+      @each $pad, $size in $cx-pad-size {
+         &.#{$state}#{$pad}-hpad {
+            padding-left: $size;
+            padding-right: $size;
+         }
+
+         &.#{$state}#{$pad}-vpad {
+            padding-top: $size;
+            padding-bottom: $size;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-flexbox {
+      display: flex;
+      flex: 1 1 auto;
+
+      &.#{$state}column {
+         flex-direction: column;
+      }
+
+      &.#{$state}row {
+         flex-direction: row;
+      }
+
+      &.#{$state}row-reverse {
+         flex-direction: row-reverse;
+      }
+
+      @include cx-flexbox-spacing(2, $besm);
+
+      &.#{$state}align-center {
+         align-items: center;
+      }
+
+      &.#{$state}align-start {
+         align-items: flex-start;
+      }
+
+      &.#{$state}align-end {
+         align-items: flex-end;
+      }
+
+      &.#{$state}align-baseline {
+         align-items: baseline;
+      }
+
+      &.#{$state}wrap {
+         flex-wrap: wrap;
+      }
+
+      &.#{$state}justify-center {
+         justify-content: center;
+      }
+
+      &.#{$state}justify-start {
+         justify-content: flex-start;
+      }
+
+      &.#{$state}justify-end {
+         justify-content: flex-end;
+      }
+
+      &.#{$state}justify-space-between {
+         justify-content: space-between;
+      }
+
+      &.#{$state}justify-space-around {
+         justify-content: space-around;
+      }
+
+      &.#{$state}justify-space-evenly {
+         justify-content: space-evenly;
+      }
+
+      &.#{$state}target-phone {
+         @media not screen and (min-width: $cx-screen-size-small) {
+            display: block;
+            @include cx-flexbox-spacing(1, $besm);
+         }
+      }
+
+      &.#{$state}target-tablet {
+         @media not screen and (min-width: $cx-screen-size-medium) {
+            display: block;
+            @include cx-flexbox-spacing(1, $besm);
+         }
+      }
+
+      &.#{$state}target-desktop {
+         @media not screen and (min-width: $cx-screen-size-large) {
+            display: block;
+            @include cx-flexbox-spacing(1, $besm);
+         }
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/FlexBox")) {
+   @include cx-flexbox();
+}

package/src/widgets/Heading.d.ts

@@ -1,16 +1,16 @@
-import * as Cx from '../core';
-
-interface HeadingProps extends Cx.HtmlElementProps {
-   
-   /** Name of the HTML element to be rendered. Default is `div`. */
-   tag?: string,
-
-   /** Heading level. Allowed values go from 1 to 6. Default is 3. */
-   level?: number | string,
-
-    /** Base CSS class. Default is `heading`. */
-    baseClass?: string
-
-}
-
-export class Heading extends Cx.Widget<HeadingProps> {}
+import * as Cx from '../core';
+
+interface HeadingProps extends Cx.HtmlElementProps {
+   
+   /** Name of the HTML element to be rendered. Default is `div`. */
+   tag?: string,
+
+   /** Heading level. Allowed values go from 1 to 6. Default is 3. */
+   level?: number | string,
+
+    /** Base CSS class. Default is `heading`. */
+    baseClass?: string
+
+}
+
+export class Heading extends Cx.Widget<HeadingProps> {}