cx 24.9.2 → 24.9.3

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

@@ -1,196 +1,196 @@
-@mixin cx-calendar(
-   $name: "calendar",
-   $state-style-map: $cx-calendar-state-style-map,
-   $width: $cx-default-input-width,
-   $icon-size: $cx-default-icon-size,
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
-
-   .#{$block}calendar {
-      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");
-      }
-
-      &:focus {
-         @include cx-add-state-rules($state-style-map, "focus");
-      }
-
-      &.#{$state}error {
-         @include cx-add-state-rules($state-style-map, "error");
-
-         &:focus {
-            @include cx-add-state-rules($state-style-map, "error-focus");
-         }
-      }
-
-      table {
-         border-spacing: 0;
-         width: 100%;
-      }
-
-      td,
-      th {
-         text-align: center;
-         width: 2em;
-         line-height: 2em;
-         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      }
-
-      th {
-         font-weight: cx-get-state-rule($state-style-map, header, font-weight);
-      }
-
-      tbody td {
-         user-select: none;
-         @include cx-add-state-rules($cx-calendar-day-state-style-map, default);
-      }
-
-      .#{$element}#{$name}-header {
-         @include cx-add-state-rules($state-style-map, header);
-      }
-
-      td.#{$state}today {
-         @include cx-add-state-rules($cx-calendar-day-state-style-map, today);
-
-         &:hover {
-            @include cx-add-state-rules($cx-calendar-day-state-style-map, hover);
-         }
-      }
-
-      td.#{$state}outside {
-         @include cx-add-state-rules($cx-calendar-day-state-style-map, outside);
-      }
-
-      td.#{$state}unselectable {
-         @include cx-add-state-rules($cx-calendar-day-state-style-map, disabled);
-      }
-
-      td.#{$state}cursor,
-      .#{$element}#{$name}-header td:hover {
-         @include cx-add-state-rules($cx-calendar-day-state-style-map, hover);
-      }
-
-      td.#{$state}selected {
-         @include cx-add-state-rules($cx-calendar-day-state-style-map, selected);
-      }
-
-      &:not(.#{$state}disabled) {
-         td {
-            cursor: pointer;
-         }
-      }
-
-      td:not(.cxe-calendar-year-option):first-child,
-      td:not(.cxe-calendar-year-option):last-child {
-         display: none;
-         pointer-events: none;
-      }
-
-      &:focus {
-         td.#{$state}cursor,
-         .#{$element}#{$name}-header td:hover {
-            @include cx-add-state-rules($cx-calendar-day-state-style-map, hover-focus);
-
-            &:active {
-               @include cx-add-state-rules($cx-calendar-day-state-style-map, active);
-            }
-         }
-
-         td.#{$state}selected {
-            @include cx-add-state-rules($cx-calendar-day-state-style-map, selected-focus);
-         }
-      }
-
-      &.#{$state}disabled {
-         background-color: transparent;
-         border-color: transparent;
-         color: darken(#fff, 18);
-         pointer-events: none;
-         opacity: 0.9;
-      }
-   }
-
-   .#{$element}#{$name}-header td {
-      line-height: 0;
-   }
-
-   .#{$element}#{$name}-icon-next-year,
-   .#{$element}#{$name}-icon-prev-year,
-   .#{$element}#{$name}-icon-prev-month,
-   .#{$element}#{$name}-icon-next-month {
-      width: $icon-size;
-      height: $icon-size;
-      display: inline-block;
-      font-size: $icon-size;
-      line-height: $icon-size;
-      user-select: none;
-   }
-
-   .#{$element}#{$name}-year {
-      &-name {
-         cursor: pointer;
-      }
-
-      &-picker {
-         user-select: none;
-         overflow-y: scroll;
-         width: 100%;
-         max-height: 24em;
-         height: auto;
-      }
-
-      &-option {
-         cursor: pointer;
-         @include cx-add-state-rules($cx-calendar-day-state-style-map, default);
-
-         &.#{$state}active {
-            @include cx-add-state-rules($cx-calendar-day-state-style-map, today);
-         }
-
-         &:hover {
-            @include cx-add-state-rules($cx-calendar-day-state-style-map, hover);
-         }
-
-         &.#{$state}selected {
-            @include cx-add-state-rules($cx-calendar-day-state-style-map, selected);
-         }
-      }
-   }
-
-   .#{$element}#{$name}-icon-prev-year {
-      transform: rotate(180deg);
-   }
-   .#{$element}#{$name}-icon-prev-month {
-      transform: rotate(90deg);
-   }
-   .#{$element}#{$name}-icon-next-month {
-      transform: rotate(-90deg);
-   }
-
-   th.#{$element}#{$name}-display {
-      line-height: 1.5;
-      padding: 0.5em;
-   }
-
-   .#{$element}#{$name}-toolbar {
-      display: flex;
-      justify-content: center;
-      margin-top: cx-top(cx-get-state-rule($state-style-map, default, "padding", 0));
-   }
-}
-
-@if (cx-should-include("cx/widgets/Calendar")) {
-   @include cx-calendar();
-}
+@mixin cx-calendar(
+   $name: "calendar",
+   $state-style-map: $cx-calendar-state-style-map,
+   $width: $cx-default-input-width,
+   $icon-size: $cx-default-icon-size,
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+   $mod: map-get($besm, mod);
+
+   .#{$block}calendar {
+      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");
+      }
+
+      &:focus {
+         @include cx-add-state-rules($state-style-map, "focus");
+      }
+
+      &.#{$state}error {
+         @include cx-add-state-rules($state-style-map, "error");
+
+         &:focus {
+            @include cx-add-state-rules($state-style-map, "error-focus");
+         }
+      }
+
+      table {
+         border-spacing: 0;
+         width: 100%;
+      }
+
+      td,
+      th {
+         text-align: center;
+         width: 2em;
+         line-height: 2em;
+         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      }
+
+      th {
+         font-weight: cx-get-state-rule($state-style-map, header, font-weight);
+      }
+
+      tbody td {
+         user-select: none;
+         @include cx-add-state-rules($cx-calendar-day-state-style-map, default);
+      }
+
+      .#{$element}#{$name}-header {
+         @include cx-add-state-rules($state-style-map, header);
+      }
+
+      td.#{$state}today {
+         @include cx-add-state-rules($cx-calendar-day-state-style-map, today);
+
+         &:hover {
+            @include cx-add-state-rules($cx-calendar-day-state-style-map, hover);
+         }
+      }
+
+      td.#{$state}outside {
+         @include cx-add-state-rules($cx-calendar-day-state-style-map, outside);
+      }
+
+      td.#{$state}unselectable {
+         @include cx-add-state-rules($cx-calendar-day-state-style-map, disabled);
+      }
+
+      td.#{$state}cursor,
+      .#{$element}#{$name}-header td:hover {
+         @include cx-add-state-rules($cx-calendar-day-state-style-map, hover);
+      }
+
+      td.#{$state}selected {
+         @include cx-add-state-rules($cx-calendar-day-state-style-map, selected);
+      }
+
+      &:not(.#{$state}disabled) {
+         td {
+            cursor: pointer;
+         }
+      }
+
+      td:not(.cxe-calendar-year-option):first-child,
+      td:not(.cxe-calendar-year-option):last-child {
+         display: none;
+         pointer-events: none;
+      }
+
+      &:focus {
+         td.#{$state}cursor,
+         .#{$element}#{$name}-header td:hover {
+            @include cx-add-state-rules($cx-calendar-day-state-style-map, hover-focus);
+
+            &:active {
+               @include cx-add-state-rules($cx-calendar-day-state-style-map, active);
+            }
+         }
+
+         td.#{$state}selected {
+            @include cx-add-state-rules($cx-calendar-day-state-style-map, selected-focus);
+         }
+      }
+
+      &.#{$state}disabled {
+         background-color: transparent;
+         border-color: transparent;
+         color: darken(#fff, 18);
+         pointer-events: none;
+         opacity: 0.9;
+      }
+   }
+
+   .#{$element}#{$name}-header td {
+      line-height: 0;
+   }
+
+   .#{$element}#{$name}-icon-next-year,
+   .#{$element}#{$name}-icon-prev-year,
+   .#{$element}#{$name}-icon-prev-month,
+   .#{$element}#{$name}-icon-next-month {
+      width: $icon-size;
+      height: $icon-size;
+      display: inline-block;
+      font-size: $icon-size;
+      line-height: $icon-size;
+      user-select: none;
+   }
+
+   .#{$element}#{$name}-year {
+      &-name {
+         cursor: pointer;
+      }
+
+      &-picker {
+         user-select: none;
+         overflow-y: scroll;
+         width: 100%;
+         max-height: 24em;
+         height: auto;
+      }
+
+      &-option {
+         cursor: pointer;
+         @include cx-add-state-rules($cx-calendar-day-state-style-map, default);
+
+         &.#{$state}active {
+            @include cx-add-state-rules($cx-calendar-day-state-style-map, today);
+         }
+
+         &:hover {
+            @include cx-add-state-rules($cx-calendar-day-state-style-map, hover);
+         }
+
+         &.#{$state}selected {
+            @include cx-add-state-rules($cx-calendar-day-state-style-map, selected);
+         }
+      }
+   }
+
+   .#{$element}#{$name}-icon-prev-year {
+      transform: rotate(180deg);
+   }
+   .#{$element}#{$name}-icon-prev-month {
+      transform: rotate(90deg);
+   }
+   .#{$element}#{$name}-icon-next-month {
+      transform: rotate(-90deg);
+   }
+
+   th.#{$element}#{$name}-display {
+      line-height: 1.5;
+      padding: 0.5em;
+   }
+
+   .#{$element}#{$name}-toolbar {
+      display: flex;
+      justify-content: center;
+      margin-top: cx-top(cx-get-state-rule($state-style-map, default, "padding", 0));
+   }
+}
+
+@if (cx-should-include("cx/widgets/Calendar")) {
+   @include cx-calendar();
+}