cx 24.4.3 → 24.4.4

package/src/widgets/form/Calendar.scss

@@ -1,164 +1,164 @@
-@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 {
-      @include cx-add-state-rules($state-style-map, "default");
-
-      display: inline-block;
-      vertical-align: middle;
-      width: 18em;
-      box-sizing: border-box;
-
-      &: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 {
-         @include cx-add-state-rules($cx-calendar-day-state-style-map, default);
-         user-select: none;
-      }
-
-      .#{$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:first-child,
-      td: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}-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 {
+      @include cx-add-state-rules($state-style-map, "default");
+
+      display: inline-block;
+      vertical-align: middle;
+      width: 18em;
+      box-sizing: border-box;
+
+      &: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 {
+         @include cx-add-state-rules($cx-calendar-day-state-style-map, default);
+         user-select: none;
+      }
+
+      .#{$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:first-child,
+      td: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}-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();
+}

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> {}