cx 23.4.2 → 23.4.4

package/src/widgets/form/TextField.scss

@@ -1,55 +1,55 @@
-@mixin cx-textfield(
-   $name: "textfield",
-   $state-style-map: $cx-std-field-state-style-map,
-   $placeholder: $cx-input-placeholder,
-   $empty-text: $cx-empty-text,
-   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
-   $clear-state-style-map: $cx-clear-state-style-map,
-   $icon-size: $cx-default-input-icon-size,
-   $width: $cx-default-input-width,
-   $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} {
-      @include cxb-field($besm, $state-style-map, $width: $width, $input: true);
-   }
-
-   $padding: cx-get-state-rule($state-style-map, default, "padding");
-
-   .#{$element}#{$name}-input {
-      @include cxe-field-input($besm, $state-style-map, $placeholder: $placeholder);
-
-      .#{$state}icon > & {
-         padding-left: cx-calc(2 * cx-left($padding), $icon-size);
-      }
-
-      .#{$state}clear > & {
-         padding-right: cx-calc(cx-right($padding), $cx-default-clear-size, $cx-default-clear-spacing);
-      }
-   }
-
-   .#{$element}#{$name}-left-icon {
-      @include cxe-field-button($besm, $left-icon-state-style-map);
-      pointer-events: none;
-   }
-
-   .#{$element}#{$name}-clear {
-      @include cxe-field-button($besm, $clear-state-style-map);
-   }
-
-   .#{$element}#{$name}-icon {
-      @include cxe-field-button-icon($besm, $icon-size);
-   }
-
-   .#{$element}#{$name}-empty-text {
-      @include cxe-field-empty-text($empty-text);
-   }
-}
-
-@if (cx-should-include("cx/widgets/TextField")) {
-   @include cx-textfield();
-}
+@mixin cx-textfield(
+   $name: "textfield",
+   $state-style-map: $cx-std-field-state-style-map,
+   $placeholder: $cx-input-placeholder,
+   $empty-text: $cx-empty-text,
+   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
+   $clear-state-style-map: $cx-clear-state-style-map,
+   $icon-size: $cx-default-input-icon-size,
+   $width: $cx-default-input-width,
+   $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} {
+      @include cxb-field($besm, $state-style-map, $width: $width, $input: true);
+   }
+
+   $padding: cx-get-state-rule($state-style-map, default, "padding");
+
+   .#{$element}#{$name}-input {
+      @include cxe-field-input($besm, $state-style-map, $placeholder: $placeholder);
+
+      .#{$state}icon > & {
+         padding-left: cx-calc(2 * cx-left($padding), $icon-size);
+      }
+
+      .#{$state}clear > & {
+         padding-right: cx-calc(cx-right($padding), $cx-default-clear-size, $cx-default-clear-spacing);
+      }
+   }
+
+   .#{$element}#{$name}-left-icon {
+      @include cxe-field-button($besm, $left-icon-state-style-map);
+      pointer-events: none;
+   }
+
+   .#{$element}#{$name}-clear {
+      @include cxe-field-button($besm, $clear-state-style-map);
+   }
+
+   .#{$element}#{$name}-icon {
+      @include cxe-field-button-icon($besm, $icon-size);
+   }
+
+   .#{$element}#{$name}-empty-text {
+      @include cxe-field-empty-text($empty-text);
+   }
+}
+
+@if (cx-should-include("cx/widgets/TextField")) {
+   @include cx-textfield();
+}

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

@@ -1,6 +1,6 @@
-import * as Cx from '../../core';
-import { DateTimeFieldProps } from './DateTimeField';
-
-interface TimeFieldProps extends DateTimeFieldProps {}
-
-export class TimeField extends Cx.Widget<TimeFieldProps> {}
+import * as Cx from '../../core';
+import { DateTimeFieldProps } from './DateTimeField';
+
+interface TimeFieldProps extends DateTimeFieldProps {}
+
+export class TimeField extends Cx.Widget<TimeFieldProps> {}

package/src/widgets/form/TimeField.js

@@ -1,11 +1,11 @@
-import {Widget} from '../../ui/Widget';
-import {Localization} from '../../ui/Localization';
-import {DateTimeField} from './DateTimeField';
-
-export class TimeField extends DateTimeField {}
-
-TimeField.prototype.segment = "time";
-
-Widget.alias('timefield', TimeField);
-Localization.registerPrototype('cx/widgets/TimeField', TimeField);
-
+import {Widget} from '../../ui/Widget';
+import {Localization} from '../../ui/Localization';
+import {DateTimeField} from './DateTimeField';
+
+export class TimeField extends DateTimeField {}
+
+TimeField.prototype.segment = "time";
+
+Widget.alias('timefield', TimeField);
+Localization.registerPrototype('cx/widgets/TimeField', TimeField);
+

package/src/widgets/form/TimeList.js

@@ -1,84 +1,84 @@
-import { ContentResolver } from "../../ui/ContentResolver";
-import { DataProxy } from "../../ui/DataProxy";
-import { List } from "../List";
-import { KeySelection } from "../../ui/selection/KeySelection";
-import { createFunctionalComponent } from "../../ui/createFunctionalComponent";
-import { zeroTime } from "../../util/date/zeroTime";
-import { Format } from "../../util/Format";
-import { Culture } from "../../ui/Culture";
-import { isString } from "../../util/isString";
-import { isFunction } from "../../util/isFunction";
-
-export const TimeList = createFunctionalComponent(({ value, step, format, encoding, onSelect, ...props }) => {
-   return (
-      <cx>
-         <ContentResolver
-            params={{ step, format, dummy: true }}
-            onResolve={({ step, format }) => {
-               let max = 24 * 60;
-               if (!step) step = 15;
-               if (step < 1) step = 1;
-               let times = [];
-               let today = zeroTime(new Date()).valueOf();
-               for (let m = 0; m < max; m += step) {
-                  let time = m * 60 * 1000;
-                  times.push({
-                     id: m * 60 * 1000,
-                     text: Format.value(today + time, format || "datetime;HHmm"),
-                  });
-               }
-               let stepMs = step * 60 * 1000;
-               return (
-                  <cx>
-                     <DataProxy data={{ $value: value }} immutable>
-                        <DataProxy
-                           data={{
-                              $selection: {
-                                 get: ({ $value }) => {
-                                    if ($value == null) return null;
-                                    let selectionDate = new Date($value);
-                                    let selectionTime = selectionDate.valueOf() - zeroTime(selectionDate).valueOf();
-                                    return (Math.round(selectionTime / stepMs) * stepMs) % 86400000;
-                                 },
-                                 set: (value, instance) => {
-                                    let { store } = instance;
-                                    let $value = store.get("$value");
-                                    let copy = $value ? new Date($value) : new Date();
-                                    let today = zeroTime(new Date()).valueOf();
-                                    let date = new Date(today + value);
-                                    copy.setHours(date.getHours());
-                                    copy.setMinutes(date.getMinutes());
-                                    copy.setSeconds(date.getSeconds());
-                                    copy.setMilliseconds(0);
-                                    let encode = encoding || Culture.getDefaultDateEncoding();
-                                    store.set("$value", encode(copy));
-                                 },
-                              },
-                           }}
-                        >
-                           <List
-                              records={times}
-                              recordAlias="$time"
-                              selection={{
-                                 type: KeySelection,
-                                 selection: { bind: "$selection" },
-                              }}
-                              {...props}
-                              onItemClick={(e, instance) => {
-                                 if (!onSelect) return;
-                                 let date = new Date(instance.store.get('$value'));
-                                 if (isString(onSelect)) instance.invokeControllerMethod(onSelect, e, instance, date);
-                                 else if (isFunction(onSelect)) onSelect(e, instance, date);
-                              }}
-                           >
-                              <div text-bind="$time.text" />
-                           </List>
-                        </DataProxy>
-                     </DataProxy>
-                  </cx>
-               );
-            }}
-         />
-      </cx>
-   );
-});
+import { ContentResolver } from "../../ui/ContentResolver";
+import { DataProxy } from "../../ui/DataProxy";
+import { List } from "../List";
+import { KeySelection } from "../../ui/selection/KeySelection";
+import { createFunctionalComponent } from "../../ui/createFunctionalComponent";
+import { zeroTime } from "../../util/date/zeroTime";
+import { Format } from "../../util/Format";
+import { Culture } from "../../ui/Culture";
+import { isString } from "../../util/isString";
+import { isFunction } from "../../util/isFunction";
+
+export const TimeList = createFunctionalComponent(({ value, step, format, encoding, onSelect, ...props }) => {
+   return (
+      <cx>
+         <ContentResolver
+            params={{ step, format, dummy: true }}
+            onResolve={({ step, format }) => {
+               let max = 24 * 60;
+               if (!step) step = 15;
+               if (step < 1) step = 1;
+               let times = [];
+               let today = zeroTime(new Date()).valueOf();
+               for (let m = 0; m < max; m += step) {
+                  let time = m * 60 * 1000;
+                  times.push({
+                     id: m * 60 * 1000,
+                     text: Format.value(today + time, format || "datetime;HHmm"),
+                  });
+               }
+               let stepMs = step * 60 * 1000;
+               return (
+                  <cx>
+                     <DataProxy data={{ $value: value }} immutable>
+                        <DataProxy
+                           data={{
+                              $selection: {
+                                 get: ({ $value }) => {
+                                    if ($value == null) return null;
+                                    let selectionDate = new Date($value);
+                                    let selectionTime = selectionDate.valueOf() - zeroTime(selectionDate).valueOf();
+                                    return (Math.round(selectionTime / stepMs) * stepMs) % 86400000;
+                                 },
+                                 set: (value, instance) => {
+                                    let { store } = instance;
+                                    let $value = store.get("$value");
+                                    let copy = $value ? new Date($value) : new Date();
+                                    let today = zeroTime(new Date()).valueOf();
+                                    let date = new Date(today + value);
+                                    copy.setHours(date.getHours());
+                                    copy.setMinutes(date.getMinutes());
+                                    copy.setSeconds(date.getSeconds());
+                                    copy.setMilliseconds(0);
+                                    let encode = encoding || Culture.getDefaultDateEncoding();
+                                    store.set("$value", encode(copy));
+                                 },
+                              },
+                           }}
+                        >
+                           <List
+                              records={times}
+                              recordAlias="$time"
+                              selection={{
+                                 type: KeySelection,
+                                 selection: { bind: "$selection" },
+                              }}
+                              {...props}
+                              onItemClick={(e, instance) => {
+                                 if (!onSelect) return;
+                                 let date = new Date(instance.store.get('$value'));
+                                 if (isString(onSelect)) instance.invokeControllerMethod(onSelect, e, instance, date);
+                                 else if (isFunction(onSelect)) onSelect(e, instance, date);
+                              }}
+                           >
+                              <div text-bind="$time.text" />
+                           </List>
+                        </DataProxy>
+                     </DataProxy>
+                  </cx>
+               );
+            }}
+         />
+      </cx>
+   );
+});

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

@@ -1,34 +1,34 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface UploadButtonProps extends FieldProps {
-   /** Text description. */
-   text?: Cx.StringProp;
-
-   url?: Cx.StringProp;
-
-   /** Base CSS class to be applied to the element. Default is 'uploadbutton'. */
-   baseClass?: string;
-
-   /** Defaults to `false`. Set to `true` to enable multiple selection. */
-   multiple?: boolean;
-
-   method?: string;
-   uploadInProgressText?: string;
-
-   /** Defaults to `false`. Set to `true` to abort uploads if the button is destroyed (unmounted). */
-   abortOnDestroy: boolean;
-
-   /** Defines file types that are accepted for upload. */
-   accept?: Cx.StringProp;
-
-   /** Name of the icon to be put on the left side of the button. */
-   icon?: Cx.StringProp;
-
-   onUploadStarting?: ((xhr: XMLHttpRequest, instance: any, file: File, formData: FormData) => boolean) | string;
-   onUploadComplete?: ((xhr: XMLHttpRequest, instance: any, file: File, formData: FormData) => void) | string;
-   onUploadProgress?: ((event: ProgressEvent, instance: any, file: File, formData: FormData) => void) | string;
-   onUploadError?: ((event: ProgressEvent, instance: any, file: File, formData: FormData) => void) | string;
-}
-
-export class UploadButton extends Cx.Widget<UploadButtonProps> {}
+import * as Cx from "../../core";
+import { FieldProps } from "./Field";
+
+interface UploadButtonProps extends FieldProps {
+   /** Text description. */
+   text?: Cx.StringProp;
+
+   url?: Cx.StringProp;
+
+   /** Base CSS class to be applied to the element. Default is 'uploadbutton'. */
+   baseClass?: string;
+
+   /** Defaults to `false`. Set to `true` to enable multiple selection. */
+   multiple?: boolean;
+
+   method?: string;
+   uploadInProgressText?: string;
+
+   /** Defaults to `false`. Set to `true` to abort uploads if the button is destroyed (unmounted). */
+   abortOnDestroy: boolean;
+
+   /** Defines file types that are accepted for upload. */
+   accept?: Cx.StringProp;
+
+   /** Name of the icon to be put on the left side of the button. */
+   icon?: Cx.StringProp;
+
+   onUploadStarting?: ((xhr: XMLHttpRequest, instance: any, file: File, formData: FormData) => boolean) | string;
+   onUploadComplete?: ((xhr: XMLHttpRequest, instance: any, file: File, formData: FormData) => void) | string;
+   onUploadProgress?: ((event: ProgressEvent, instance: any, file: File, formData: FormData) => void) | string;
+   onUploadError?: ((event: ProgressEvent, instance: any, file: File, formData: FormData) => void) | string;
+}
+
+export class UploadButton extends Cx.Widget<UploadButtonProps> {}