cx 26.0.6 → 26.0.9

package/build/widgets/Icon.scss

@@ -0,0 +1,22 @@
+@use "sass:map";
+
+@mixin cx-icon($name: "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}#{$name} {
+      width: $size;
+      height: $size;
+      font-size: $size;
+      line-height: 1;
+      text-align: center;
+      vertical-align: middle;
+      display: inline-block;
+   }
+}
+
+@if (cx-should-include("cx/widgets/Icon")) {
+   @include cx-icon();
+}

package/build/widgets/List.scss

@@ -0,0 +1,93 @@
+@use "sass:map";
+
+@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;
+
+      @include cx-add-state-rules($cx-list-item, default);
+
+      &.#{$state}pad {
+         padding: $cx-default-list-item-padding;
+      }
+
+      .#{$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/build/widgets/ProgressBar.scss

@@ -0,0 +1,51 @@
+@use "sass:map";
+
+@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/build/widgets/Resizer.scss

@@ -0,0 +1,44 @@
+@use "sass:map";
+
+@mixin cx-resizer(
+   $name: 'resizer',
+   $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} {
+      position: relative;
+      flex-shrink: 0;
+
+      &.#{$state}vertical {
+         width: 5px;
+         cursor: col-resize;
+      }
+
+
+      &.#{$state}horizontal {
+         height: 5px;
+         cursor: row-resize;
+      }
+   }
+
+   .#{$element}#{$name}-handle {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+
+      &.#{$state}dragged {
+         background: rgba(gray, 0.5);
+      }
+   }
+}
+
+@if (cx-should-include('cx/widgets/Resizer')) {
+   @include cx-resizer();
+}

package/build/widgets/Section.scss

@@ -0,0 +1,56 @@
+@use "sass:map";
+
+@mixin cx-section(
+   $name: 'section',
+   $mods: $cx-section-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} {
+      flex-direction: column;
+      display: flex;
+      box-sizing: border-box;
+
+      @include cx-add-rules($cx-section-styles);
+
+      @each $modname, $config in $mods {
+        &.#{$mod}#{$modname} {
+          @include cx-add-state-rules($config, default);
+        }
+      }
+      
+   }
+
+   .#{$element}#{$name}-header {
+      margin: 0 1.5rem;
+      padding: 1rem 0;
+      box-sizing: border-box;
+      border-bottom: 1px solid rgba(128, 128, 128, 0.3);
+   }
+
+   .#{$element}#{$name}-body {
+      flex: 1 1 auto;
+      box-sizing: border-box;
+      overflow: auto;
+
+      .#{$state}pad > & {
+         padding: 1rem 1.5rem;
+      }
+   }
+
+   .#{$element}#{$name}-footer {
+      margin: 0 1.5rem;
+      padding: 1rem 0;
+      box-sizing: border-box;
+      border-top: 1px solid rgba(128, 128, 128, 0.3);
+   }
+}
+
+@if (cx-should-include('cx/widgets/Section')) {
+   @include cx-section();
+}

package/build/widgets/animations.scss

@@ -0,0 +1,11 @@
+@if cx-call-once('cx/widgets/animations') {
+   @keyframes cx-rotate {
+      from {
+         transform: rotate(0);
+      }
+
+      to {
+         transform: rotate(360deg);
+      }
+   }
+}

package/build/widgets/drag-drop/DragClone.scss

@@ -0,0 +1,36 @@
+@use "sass:map";
+
+@mixin cx-dragclone(
+   $name: 'dragclone',
+   $style: $cx-dragclone-style,
+   $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 cx-add-rules($style);
+
+      pointer-events: none;
+      background: $cx-default-dragclone-background-color;
+      min-width: 10px;
+      min-height: 10px;
+      position: fixed;
+      opacity: 0.9;
+      box-shadow: $cx-default-dragclone-box-shadow;
+      display: flex;
+
+      & > * {
+         margin: 0 !important;
+         display: block;
+         flex: auto;
+      }
+   }
+}
+
+@if (cx-should-include('cx/widgets/DragClone')) {
+   @include cx-dragclone();
+}

package/build/widgets/drag-drop/DragHandle.scss

@@ -0,0 +1,19 @@
+@use "sass:map";
+
+@mixin cx-draghandle(
+   $name: 'draghandle',
+   $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} {
+      touch-action: none;
+   }
+}
+
+@if (cx-should-include('cx/widgets/DragHandle')) {
+   @include cx-draghandle();
+}

package/build/widgets/drag-drop/DragSource.scss

@@ -0,0 +1,27 @@
+@use "sass:map";
+
+@mixin cx-dragsource(
+   $name: 'dragsource',
+   $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;
+
+      &.#{$state}dragged {
+         opacity: 0.3;
+      }
+
+      &.#{$state}draggable {
+         touch-action: none;
+      }
+   }
+}
+
+@if (cx-should-include('cx/widgets/DragSource')) {
+   @include cx-dragsource();
+}

package/build/widgets/drag-drop/DropZone.scss

@@ -0,0 +1,77 @@
+@use "sass:map";
+
+@mixin cx-dropzone(
+   $name: 'dropzone',
+   $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;
+      position: relative;
+
+      &.#{$mod}hline {
+         height: 1px;
+         margin-top: -1px;
+         align-self: stretch;
+
+         &.#{$state}over {
+            background: black;
+            box-shadow: 0 0 2px black;
+         }
+      }
+
+      &.#{$mod}vline {
+         width: 1px;
+         margin-left: -1px;
+         min-height: 1em;
+         display: inline-block;
+         vertical-align: middle;
+         align-self: stretch;
+
+         &.#{$state}over {
+            background: black;
+            box-shadow: 0 0 2px black;
+         }
+      }
+
+      &.#{$mod}block {
+         height: 1px;
+         margin-top: -1px;
+         align-self: stretch;
+
+         &.#{$state}over {
+            height: 25px;
+            border: 2px dotted lightgray;
+            margin: 5px;
+         }
+      }
+
+      &.#{$mod}inline-block {
+         width: 1px;
+         margin-left: -1px;
+         min-height: 1em;
+         position: relative;
+         display: inline-block;
+         vertical-align: top;
+         align-self: stretch;
+
+         &:after {
+            content: ' ';
+         }
+
+         &.#{$state}over {
+            width: 50px;
+            border: 2px dotted lightgray;
+            margin: 5px;
+         }
+      }
+   }
+}
+
+@if (cx-should-include('cx/widgets/DropZone')) {
+   @include cx-dropzone();
+}

package/build/widgets/drag-drop/index.scss

@@ -0,0 +1,4 @@
+@import "DragSource";
+@import "DropZone";
+@import "DragHandle";
+@import "DragClone";

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

@@ -0,0 +1,15 @@
+@use "sass:map";
+
+
+$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/build/widgets/form/Calendar.scss

@@ -0,0 +1,199 @@
+@use "sass:map";
+@use "sass:color";
+
+@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: color.adjust(#fff, $lightness: -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();
+}