cx 24.6.2 → 24.6.4

package/src/widgets/List.scss

@@ -1,93 +1,93 @@
-
-@mixin cx-list(
-   $name: 'list',
-   $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} {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      overflow: auto;
-      border: 0 solid $cx-default-border-color;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-      @include cx-add-state-rules($cx-list, default);
-
-      &:hover {
-         @include cx-add-state-rules($cx-list, hover);
-      }
-
-      &.#{$state}focused {
-         @include cx-add-state-rules($cx-list, focus);
-      }
-
-      &.#{$mod}bordered {
-         border-width: 1px;
-
-         & > .#{$element}#{$name}-item:not(:first-child) {
-            border-top-width: 1px;
-         }
-      }
-   }
-
-   .#{$element}#{$name}-item {
-      margin: 0;
-      border: 0 solid $cx-default-border-color;
-
-      &.#{$state}pad {
-         padding: $cx-default-list-item-padding;
-      }
-
-      @include cx-add-state-rules($cx-list-item, default);
-
-      .#{$state}selectable > & {
-         cursor: pointer;
-      }
-
-      &:hover {
-         @include cx-add-state-rules($cx-list-item, hover);
-      }
-
-      &.#{$state}cursor {
-         @include cx-add-state-rules($cx-list-item, hover);
-
-         .#{$block}#{$name}.#{$state}focused > &, .#{$block}#{$name}:focus > & {
-            @include cx-add-state-rules($cx-list-item, cursor);
-
-            &:active {
-               @include cx-add-state-rules($cx-list-item, active);
-            }
-         }
-      }
-
-      &.#{$state}selected {
-          @include cx-add-state-rules($cx-list-item, selected);
-
-         &.#{$state}cursor {
-            @include cx-add-state-rules($cx-list-item, selected-hover);
-
-            .#{$block}#{$name}.#{$state}focused > &, .#{$block}#{$name}:focus > & {
-                @include cx-add-state-rules($cx-list-item, selected-cursor);
-            }
-         }
-      }
-
-      &.#{$state}disabled {
-         @include cx-add-state-rules($cx-list-item, disabled);
-      }
-   }
-
-   .#{$element}#{$name}-empty-text {
-      padding: $cx-default-list-item-padding;
-      color: $cx-default-empty-text-color;
-   }
-}
-
-@if (cx-should-include('cx/widgets/List')) {
-   @include cx-list();
+
+@mixin cx-list(
+   $name: 'list',
+   $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} {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      overflow: auto;
+      border: 0 solid $cx-default-border-color;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+      @include cx-add-state-rules($cx-list, default);
+
+      &:hover {
+         @include cx-add-state-rules($cx-list, hover);
+      }
+
+      &.#{$state}focused {
+         @include cx-add-state-rules($cx-list, focus);
+      }
+
+      &.#{$mod}bordered {
+         border-width: 1px;
+
+         & > .#{$element}#{$name}-item:not(:first-child) {
+            border-top-width: 1px;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-item {
+      margin: 0;
+      border: 0 solid $cx-default-border-color;
+
+      &.#{$state}pad {
+         padding: $cx-default-list-item-padding;
+      }
+
+      @include cx-add-state-rules($cx-list-item, default);
+
+      .#{$state}selectable > & {
+         cursor: pointer;
+      }
+
+      &:hover {
+         @include cx-add-state-rules($cx-list-item, hover);
+      }
+
+      &.#{$state}cursor {
+         @include cx-add-state-rules($cx-list-item, hover);
+
+         .#{$block}#{$name}.#{$state}focused > &, .#{$block}#{$name}:focus > & {
+            @include cx-add-state-rules($cx-list-item, cursor);
+
+            &:active {
+               @include cx-add-state-rules($cx-list-item, active);
+            }
+         }
+      }
+
+      &.#{$state}selected {
+          @include cx-add-state-rules($cx-list-item, selected);
+
+         &.#{$state}cursor {
+            @include cx-add-state-rules($cx-list-item, selected-hover);
+
+            .#{$block}#{$name}.#{$state}focused > &, .#{$block}#{$name}:focus > & {
+                @include cx-add-state-rules($cx-list-item, selected-cursor);
+            }
+         }
+      }
+
+      &.#{$state}disabled {
+         @include cx-add-state-rules($cx-list-item, disabled);
+      }
+   }
+
+   .#{$element}#{$name}-empty-text {
+      padding: $cx-default-list-item-padding;
+      color: $cx-default-empty-text-color;
+   }
+}
+
+@if (cx-should-include('cx/widgets/List')) {
+   @include cx-list();
 }

package/src/widgets/ProgressBar.d.ts

@@ -1,17 +1,17 @@
-import * as Cx from '../core';
-import {Instance} from '../ui/Instance';
-
-interface ProgressBarProps extends Cx.StyledContainerProps {
-
-   /** Progress value, a number between `0` and `1`. Default value is `0`. */
-   value?: Cx.NumberProp,
-    
-   /** Defaults to `false`. Set to `true` to make it look disabled. */
-   disabled?: Cx.BooleanProp,
-   
-   /** Progress bar annotation. */
-   text?: Cx.StringProp,
-   
-}
-
-export class ProgressBar extends Cx.Widget<ProgressBarProps> {}
+import * as Cx from '../core';
+import {Instance} from '../ui/Instance';
+
+interface ProgressBarProps extends Cx.StyledContainerProps {
+
+   /** Progress value, a number between `0` and `1`. Default value is `0`. */
+   value?: Cx.NumberProp,
+    
+   /** Defaults to `false`. Set to `true` to make it look disabled. */
+   disabled?: Cx.BooleanProp,
+   
+   /** Progress bar annotation. */
+   text?: Cx.StringProp,
+   
+}
+
+export class ProgressBar extends Cx.Widget<ProgressBarProps> {}

package/src/widgets/ProgressBar.js

@@ -1,46 +1,46 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {parseStyle} from '../util/parseStyle';
-import {isNumber} from '../util/isNumber';
-
-export class ProgressBar extends Widget {
-
-   declareData() {
-      return super.declareData({
-         disabled: undefined,
-         text: undefined,
-         value: undefined
-      }, ...arguments)
-   }
-
-   render(context, instance, key) {
-      let { widget, data } = instance;
-      let { text, value, disabled } = data;
-      let {CSS, baseClass} = widget;
-
-      if (!isNumber(value)) value = 0;
-
-      return (
-         <div
-            key={key}
-            className= {CSS.expand(data.classNames, CSS.state({
-               disabled               
-            }))}
-            style={data.style}
-         >           
-            <div 
-               className={CSS.element(this.baseClass, 'indicator')} 
-               style={{
-                  width: `${(value > 1 ? 1 : value < 0 ? 0 : value)*100}%`
-               }} 
-            />
-            <div className={CSS.element(this.baseClass, 'label')}>            
-               { text }
-            </div>
-         </div>
-      )
-   }
-}
-
-ProgressBar.prototype.styled = true;
-ProgressBar.prototype.disabled = false;
-ProgressBar.prototype.baseClass = 'progressbar';
+import {Widget, VDOM} from '../ui/Widget';
+import {parseStyle} from '../util/parseStyle';
+import {isNumber} from '../util/isNumber';
+
+export class ProgressBar extends Widget {
+
+   declareData() {
+      return super.declareData({
+         disabled: undefined,
+         text: undefined,
+         value: undefined
+      }, ...arguments)
+   }
+
+   render(context, instance, key) {
+      let { widget, data } = instance;
+      let { text, value, disabled } = data;
+      let {CSS, baseClass} = widget;
+
+      if (!isNumber(value)) value = 0;
+
+      return (
+         <div
+            key={key}
+            className= {CSS.expand(data.classNames, CSS.state({
+               disabled               
+            }))}
+            style={data.style}
+         >           
+            <div 
+               className={CSS.element(this.baseClass, 'indicator')} 
+               style={{
+                  width: `${(value > 1 ? 1 : value < 0 ? 0 : value)*100}%`
+               }} 
+            />
+            <div className={CSS.element(this.baseClass, 'label')}>            
+               { text }
+            </div>
+         </div>
+      )
+   }
+}
+
+ProgressBar.prototype.styled = true;
+ProgressBar.prototype.disabled = false;
+ProgressBar.prototype.baseClass = 'progressbar';

package/src/widgets/ProgressBar.scss

@@ -1,50 +1,50 @@
-
-@mixin cx-progressbar(
-   $name: 'progressbar',
-   $state-style-map: $cx-progressbar-state-style-map,
-   $mods: $cx-progressbar-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} {
-      box-sizing: border-box;
-
-      @include cx-add-state-rules($state-style-map, default);
-        
-      &[disabled], &.#{$state}disabled {
-         @include cx-add-state-rules($state-style-map, disabled);
-      }
-
-      @each $modname, $config in $mods {
-        &.#{$mod}#{$modname} {
-          @include cx-add-state-rules($config, default);
-        }
-      }      
-   }
-
-   .#{$element}#{$name}-indicator {
-      background-color: $cx-default-progressbar-indicator-background-color;
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 100%;
-   }
-
-   .#{$element}#{$name}-label {
-      position: absolute;
-      top: 0;
-      left: 0;
-      line-height: $cx-default-progressbar-height - cx-top($cx-default-progressbar-border-width) - cx-bottom($cx-default-progressbar-border-width);
-      width: 100%;
-      text-align: center;
-   }
-}
-
-@if (cx-should-include('cx/widgets/ProgressBar')) {
-   @include cx-progressbar();
+
+@mixin cx-progressbar(
+   $name: 'progressbar',
+   $state-style-map: $cx-progressbar-state-style-map,
+   $mods: $cx-progressbar-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} {
+      box-sizing: border-box;
+
+      @include cx-add-state-rules($state-style-map, default);
+        
+      &[disabled], &.#{$state}disabled {
+         @include cx-add-state-rules($state-style-map, disabled);
+      }
+
+      @each $modname, $config in $mods {
+        &.#{$mod}#{$modname} {
+          @include cx-add-state-rules($config, default);
+        }
+      }      
+   }
+
+   .#{$element}#{$name}-indicator {
+      background-color: $cx-default-progressbar-indicator-background-color;
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+   }
+
+   .#{$element}#{$name}-label {
+      position: absolute;
+      top: 0;
+      left: 0;
+      line-height: $cx-default-progressbar-height - cx-top($cx-default-progressbar-border-width) - cx-bottom($cx-default-progressbar-border-width);
+      width: 100%;
+      text-align: center;
+   }
+}
+
+@if (cx-should-include('cx/widgets/ProgressBar')) {
+   @include cx-progressbar();
 }

package/src/widgets/Resizer.d.ts

@@ -1,27 +1,27 @@
-import {
-   Widget,
-   StyledContainerProps
-} from 'cx/src/core';
-
-interface ResizerProps extends StyledContainerProps {
-
-   /** Make resizer horizontal. */
-   horizontal?: boolean;
-
-   /** Use the element after the the resizer for size measurements. */
-   forNextElement?: boolean,
-
-   /** A binding for the new size. */
-   size?: Cx.NumberProp,
-
-   /** Default value that will be set when the user double click on the resizer. */
-   defaultSize?: Cx.NumberProp,
-
-   /** Minimum size of the element. */
-   minSize?: Cx.NumberProp,
-
-   /** Maximum size of the element. */
-   maxSize?: Cx.NumberProp,
-}
-
-export class Resizer extends Widget<ResizerProps> {}
+import {
+   Widget,
+   StyledContainerProps
+} from 'cx/src/core';
+
+interface ResizerProps extends StyledContainerProps {
+
+   /** Make resizer horizontal. */
+   horizontal?: boolean;
+
+   /** Use the element after the the resizer for size measurements. */
+   forNextElement?: boolean,
+
+   /** A binding for the new size. */
+   size?: Cx.NumberProp,
+
+   /** Default value that will be set when the user double click on the resizer. */
+   defaultSize?: Cx.NumberProp,
+
+   /** Minimum size of the element. */
+   minSize?: Cx.NumberProp,
+
+   /** Maximum size of the element. */
+   maxSize?: Cx.NumberProp,
+}
+
+export class Resizer extends Widget<ResizerProps> {}