cx 24.8.7 → 24.9.1

package/src/widgets/drag-drop/variables.scss

@@ -1,12 +1,12 @@
-$cx-default-dragclone-background-color: rgba(white, 0.9) !default;
-$cx-default-dragclone-box-shadow: 0 0 3px rgba(128, 128, 128, 0.3) !default;
-
-$cx-dragclone-style: (
-   background-color: $cx-default-dragclone-background-color,
-   box-shadow: $cx-default-dragclone-box-shadow,
-   opacity: 0.9
-) !default;
-
-$cx-dependencies: map-merge($cx-dependencies, (
-   'cx/widgets/DragSource': 'cx/widgets/DragClone'
+$cx-default-dragclone-background-color: rgba(white, 0.9) !default;
+$cx-default-dragclone-box-shadow: 0 0 3px rgba(128, 128, 128, 0.3) !default;
+
+$cx-dragclone-style: (
+   background-color: $cx-default-dragclone-background-color,
+   box-shadow: $cx-default-dragclone-box-shadow,
+   opacity: 0.9
+) !default;
+
+$cx-dependencies: map-merge($cx-dependencies, (
+   'cx/widgets/DragSource': 'cx/widgets/DragClone'
 ))

package/src/widgets/enableAllInternalDependencies.d.ts

@@ -1 +1 @@
-export function enableAllInternalDependencies();
+export function enableAllInternalDependencies();

package/src/widgets/enableAllInternalDependencies.js

@@ -1,11 +1,11 @@
-import {enableTooltips} from './overlay/Tooltip';
-import {enableMsgBoxAlerts} from './overlay/MsgBox';
-import {enableCultureSensitiveFormatting} from '../ui/Format';
-import {enableFatArrowExpansion} from '../data/enableFatArrowExpansion';
-
-export function enableAllInternalDependencies() {
-   enableTooltips();
-   enableMsgBoxAlerts();
-   enableCultureSensitiveFormatting();
-   enableFatArrowExpansion();
-}
+import {enableTooltips} from './overlay/Tooltip';
+import {enableMsgBoxAlerts} from './overlay/MsgBox';
+import {enableCultureSensitiveFormatting} from '../ui/Format';
+import {enableFatArrowExpansion} from '../data/enableFatArrowExpansion';
+
+export function enableAllInternalDependencies() {
+   enableTooltips();
+   enableMsgBoxAlerts();
+   enableCultureSensitiveFormatting();
+   enableFatArrowExpansion();
+}

package/src/widgets/form/Calendar.d.ts

@@ -1,86 +1,86 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface DayInfo {
-   mod?: string;
-   className?: string;
-   style?: Cx.Record;
-   unselectable?: boolean;
-   disabled?: boolean;
-}
-
-interface DayData {
-   [day: string]: DayInfo;
-}
-
-interface CalendarProps extends FieldProps {
-   /** Selected date. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
-   value?: Cx.Prop<string | Date>;
-
-   /** View reference date. If no date is selected, this date is used to determine which month to show in the calendar. */
-   refDate?: Cx.Prop<string | Date>;
-
-   /** Minimum date value. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
-   minValue?: Cx.Prop<string | Date>;
-
-   /** Set to `true` to disallow the `minValue`. Default value is `false`. */
-   minExclusive?: Cx.BooleanProp;
-
-   /** Maximum date value. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
-   maxValue?: Cx.Prop<string | Date>;
-
-   /** Set to `true` to disallow the `maxValue`. Default value is `false`. */
-   maxExclusive?: Cx.BooleanProp;
-
-   /** Base CSS class to be applied to the calendar. Defaults to `calendar`. */
-   baseClass?: string;
-
-   /** Highlight today's date. Default is true. */
-   highlightToday?: boolean;
-
-   /** Maximum value error text. */
-   maxValueErrorText?: string;
-
-   /** Maximum exclusive value error text. */
-   maxExclusiveErrorText?: string;
-
-   /** Minimum value error text. */
-   minValueErrorText?: string;
-
-   /** Minimum exclusive value error text. */
-   minExclusiveErrorText?: string;
-
-   /** The function that will be used to convert Date objects before writing data to the store.
-    * Default implementation is Date.toISOString.
-    * See also Culture.setDefaultDateEncoding.
-    */
-   encoding?: (date: Date) => any;
-
-   /** Set to true to show the button for quickly selecting today's date.  */
-   showTodayButton?: boolean;
-
-   /** Localizable text for the todayButton. Defaults to `"Today"`. */
-   todayButtonText?: string;
-
-   /**  Defines which days of week should be displayed as disabled, i.e. `[0, 6]` will make Sunday and Saturday unselectable. */
-   disabledDaysOfWeek?: number[];
-
-   /** Set to true to show weeks starting from Monday. */
-   startWithMonday?: boolean;
-
-   /** Map of days to additional day information such as style, className, mod, unselectable and disabled.
-    * Keys for the map should be created with date.toDateString().
-    * Example. {
-    *    [new Date().toDateString()]: {
-    *       style: "color: red",
-    *       className: 'test-class',
-    *       mod: 'holiday',
-    *       unselectable: false,
-    *       disabled: false
-    *    }
-    * }
-    */
-   dayData?: Cx.Prop<DayData>;
-}
-
-export class Calendar extends Cx.Widget<CalendarProps> {}
+import * as Cx from "../../core";
+import { FieldProps } from "./Field";
+
+interface DayInfo {
+   mod?: string;
+   className?: string;
+   style?: Cx.Record;
+   unselectable?: boolean;
+   disabled?: boolean;
+}
+
+interface DayData {
+   [day: string]: DayInfo;
+}
+
+interface CalendarProps extends FieldProps {
+   /** Selected date. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
+   value?: Cx.Prop<string | Date>;
+
+   /** View reference date. If no date is selected, this date is used to determine which month to show in the calendar. */
+   refDate?: Cx.Prop<string | Date>;
+
+   /** Minimum date value. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
+   minValue?: Cx.Prop<string | Date>;
+
+   /** Set to `true` to disallow the `minValue`. Default value is `false`. */
+   minExclusive?: Cx.BooleanProp;
+
+   /** Maximum date value. This should be a `Date` object or a valid date string consumable by `Date.parse` function. */
+   maxValue?: Cx.Prop<string | Date>;
+
+   /** Set to `true` to disallow the `maxValue`. Default value is `false`. */
+   maxExclusive?: Cx.BooleanProp;
+
+   /** Base CSS class to be applied to the calendar. Defaults to `calendar`. */
+   baseClass?: string;
+
+   /** Highlight today's date. Default is true. */
+   highlightToday?: boolean;
+
+   /** Maximum value error text. */
+   maxValueErrorText?: string;
+
+   /** Maximum exclusive value error text. */
+   maxExclusiveErrorText?: string;
+
+   /** Minimum value error text. */
+   minValueErrorText?: string;
+
+   /** Minimum exclusive value error text. */
+   minExclusiveErrorText?: string;
+
+   /** The function that will be used to convert Date objects before writing data to the store.
+    * Default implementation is Date.toISOString.
+    * See also Culture.setDefaultDateEncoding.
+    */
+   encoding?: (date: Date) => any;
+
+   /** Set to true to show the button for quickly selecting today's date.  */
+   showTodayButton?: boolean;
+
+   /** Localizable text for the todayButton. Defaults to `"Today"`. */
+   todayButtonText?: string;
+
+   /**  Defines which days of week should be displayed as disabled, i.e. `[0, 6]` will make Sunday and Saturday unselectable. */
+   disabledDaysOfWeek?: number[];
+
+   /** Set to true to show weeks starting from Monday. */
+   startWithMonday?: boolean;
+
+   /** Map of days to additional day information such as style, className, mod, unselectable and disabled.
+    * Keys for the map should be created with date.toDateString().
+    * Example. {
+    *    [new Date().toDateString()]: {
+    *       style: "color: red",
+    *       className: 'test-class',
+    *       mod: 'holiday',
+    *       unselectable: false,
+    *       disabled: false
+    *    }
+    * }
+    */
+   dayData?: Cx.Prop<DayData>;
+}
+
+export class Calendar extends Cx.Widget<CalendarProps> {}

package/src/widgets/form/Calendar.scss

@@ -11,14 +11,14 @@
    $mod: map-get($besm, mod);
 
    .#{$block}calendar {
-      @include cx-add-state-rules($state-style-map, "default");
-
       display: inline-block;
       vertical-align: middle;
       width: 18em;
       overflow-y: auto;
       box-sizing: border-box;
 
+      @include cx-add-state-rules($state-style-map, "default");
+
       &:hover {
          @include cx-add-state-rules($state-style-map, "hover");
       }
@@ -53,8 +53,8 @@
       }
 
       tbody td {
-         @include cx-add-state-rules($cx-calendar-day-state-style-map, default);
          user-select: none;
+         @include cx-add-state-rules($cx-calendar-day-state-style-map, default);
       }
 
       .#{$element}#{$name}-header {

package/src/widgets/form/Calendar.variables.scss

@@ -1,64 +1,64 @@
-
-$cx-default-calendar-font-size: $cx-default-box-font-size !default;
-$cx-default-calendar-background-color: $cx-default-input-background-color !default;
-$cx-default-calendar-border-width: $cx-default-box-border-width !default;
-$cx-default-calendar-border-color: $cx-default-input-border-color !default;
-$cx-default-calendar-border-radius: $cx-default-border-radius !default;
-$cx-default-calendar-box-shadow: none !default;
-$cx-default-calendar-padding: 5px !default;
-
-//header
-$cx-default-calendar-header-font-size: $cx-default-box-font-size !default;
-$cx-default-calendar-header-font-weight: 500 !default;
-$cx-default-calendar-header-color: $cx-default-color !default;
-$cx-default-calendar-header-background-color: transparent !default;
-
-//day
-$cx-default-calendar-day-font-size: $cx-default-calendar-font-size !default;
-$cx-default-calendar-day-border-radius: $cx-default-calendar-border-radius !default;
-
-// CALENDAR
-$cx-calendar-state-style-map: cx-deep-map-merge($cx-input-state-style-map, (
-  default: (
-    font-size: $cx-default-calendar-font-size,
-    background-color: $cx-default-calendar-background-color,
-    border-style: solid,
-    border-width: $cx-default-calendar-border-width,
-    border-color: $cx-default-calendar-border-color,
-    border-radius: $cx-default-calendar-border-radius,
-    box-shadow: $cx-default-calendar-box-shadow,
-    padding: $cx-default-calendar-padding
-  ),
-  hover: (
-    
-  ),
-  header: (
-    font-size: $cx-default-calendar-header-font-size,
-    font-weight: $cx-default-calendar-header-font-weight,
-    color: $cx-default-calendar-header-color,
-    background-color: $cx-default-calendar-header-background-color, 
-  ),
-  focus: (
-    border-color: cx-get-state-rule($cx-input-state-style-map, focus, border-color),
-    box-shadow: cx-get-state-rule($cx-input-state-style-map, focus, box-shadow),
-    outline: none
-  )
-)) !default;
-
-// calendar day field styles
-$cx-calendar-day-state-style-map: cx-deep-map-merge($cx-list-item, (
-  default: (
-    font-size: $cx-default-calendar-day-font-size,
-    background-color: transparent,
-    border-radius: $cx-default-calendar-day-border-radius
-  ),
-  today: (
-    background-color: rgba(220, 250, 183, 0.5),
-  ),
-  outside: (
-    color: rgba(0, 0, 0, 0.3)
-  ), 
-  today-hover: (
-      
-  )
+
+$cx-default-calendar-font-size: $cx-default-box-font-size !default;
+$cx-default-calendar-background-color: $cx-default-input-background-color !default;
+$cx-default-calendar-border-width: $cx-default-box-border-width !default;
+$cx-default-calendar-border-color: $cx-default-input-border-color !default;
+$cx-default-calendar-border-radius: $cx-default-border-radius !default;
+$cx-default-calendar-box-shadow: none !default;
+$cx-default-calendar-padding: 5px !default;
+
+//header
+$cx-default-calendar-header-font-size: $cx-default-box-font-size !default;
+$cx-default-calendar-header-font-weight: 500 !default;
+$cx-default-calendar-header-color: $cx-default-color !default;
+$cx-default-calendar-header-background-color: transparent !default;
+
+//day
+$cx-default-calendar-day-font-size: $cx-default-calendar-font-size !default;
+$cx-default-calendar-day-border-radius: $cx-default-calendar-border-radius !default;
+
+// CALENDAR
+$cx-calendar-state-style-map: cx-deep-map-merge($cx-input-state-style-map, (
+  default: (
+    font-size: $cx-default-calendar-font-size,
+    background-color: $cx-default-calendar-background-color,
+    border-style: solid,
+    border-width: $cx-default-calendar-border-width,
+    border-color: $cx-default-calendar-border-color,
+    border-radius: $cx-default-calendar-border-radius,
+    box-shadow: $cx-default-calendar-box-shadow,
+    padding: $cx-default-calendar-padding
+  ),
+  hover: (
+    
+  ),
+  header: (
+    font-size: $cx-default-calendar-header-font-size,
+    font-weight: $cx-default-calendar-header-font-weight,
+    color: $cx-default-calendar-header-color,
+    background-color: $cx-default-calendar-header-background-color, 
+  ),
+  focus: (
+    border-color: cx-get-state-rule($cx-input-state-style-map, focus, border-color),
+    box-shadow: cx-get-state-rule($cx-input-state-style-map, focus, box-shadow),
+    outline: none
+  )
+)) !default;
+
+// calendar day field styles
+$cx-calendar-day-state-style-map: cx-deep-map-merge($cx-list-item, (
+  default: (
+    font-size: $cx-default-calendar-day-font-size,
+    background-color: transparent,
+    border-radius: $cx-default-calendar-day-border-radius
+  ),
+  today: (
+    background-color: rgba(220, 250, 183, 0.5),
+  ),
+  outside: (
+    color: rgba(0, 0, 0, 0.3)
+  ), 
+  today-hover: (
+      
+  )
 ));

package/src/widgets/form/Checkbox.d.ts

@@ -1,43 +1,43 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface CheckboxProps extends FieldProps {
-   /** Value of the checkbox. `true` makes the checkbox checked. */
-   value?: Cx.BooleanProp;
-
-   /** efaults to `false`. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp;
-
-   /** Base CSS class to be applied to the field. Defaults to `checkbox`. */
-   baseClass?: string;
-
-   /**
-    * Use native checkbox HTML element (`<input type="checkbox"/>`). Default is `false`.
-    * Native checkboxes are difficult to style.
-    */
-   native?: boolean;
-
-   /**
-    * Set to true to instruct the widget to indicate indeterminate state
-    * (null or undefined value) with a square icon instead of appearing unchecked.
-    */
-   indeterminate?: boolean;
-
-   /** Value of the checkbox. `true` makes the checkbox checked. */
-   checked?: Cx.BooleanProp;
-
-   /** Text property. */
-   text?: Cx.StringProp;
-
-   /** Prevent moving focus on the checkbox. This is useful when checkboxes are found
-    inside other focusable elements, such as grids or lists. */
-   unfocusable?: boolean;
-
-   /**
-    * Text to be displayed when checkobx is in the view mode.
-    * Useful to describe state of the checkbox in `viewMode` in a form of text, i.e. `Active/Inactive`.
-    */
-   viewText?: Cx.StringProp;
-}
-
-export class Checkbox extends Cx.Widget<CheckboxProps> {}
+import * as Cx from "../../core";
+import { FieldProps } from "./Field";
+
+interface CheckboxProps extends FieldProps {
+   /** Value of the checkbox. `true` makes the checkbox checked. */
+   value?: Cx.BooleanProp;
+
+   /** efaults to `false`. Used to make the field read-only. */
+   readOnly?: Cx.BooleanProp;
+
+   /** Base CSS class to be applied to the field. Defaults to `checkbox`. */
+   baseClass?: string;
+
+   /**
+    * Use native checkbox HTML element (`<input type="checkbox"/>`). Default is `false`.
+    * Native checkboxes are difficult to style.
+    */
+   native?: boolean;
+
+   /**
+    * Set to true to instruct the widget to indicate indeterminate state
+    * (null or undefined value) with a square icon instead of appearing unchecked.
+    */
+   indeterminate?: boolean;
+
+   /** Value of the checkbox. `true` makes the checkbox checked. */
+   checked?: Cx.BooleanProp;
+
+   /** Text property. */
+   text?: Cx.StringProp;
+
+   /** Prevent moving focus on the checkbox. This is useful when checkboxes are found
+    inside other focusable elements, such as grids or lists. */
+   unfocusable?: boolean;
+
+   /**
+    * Text to be displayed when checkobx is in the view mode.
+    * Useful to describe state of the checkbox in `viewMode` in a form of text, i.e. `Active/Inactive`.
+    */
+   viewText?: Cx.StringProp;
+}
+
+export class Checkbox extends Cx.Widget<CheckboxProps> {}