@sme.up/ketchup 4.0.0 → 4.1.0

package/dist/collection/components/kup-data-table/kup-data-table.css

@@ -297,7 +297,6 @@
   border-width: 0;
   outline: none;
   cursor: pointer;
-  will-change: transform, opacity;
   margin: var(--kup_chip_margin);
 }
 .f-chip--wrapper .chip-set .chip .chip__icon--leading {
@@ -2798,6 +2797,7 @@
 * @prop --kup-datatable-font-family-monospace: Sets monospace font family of the component (for numbers).
 * @prop --kup-datatable-font-size: Sets font size of the component.
 * @prop --kup-datatable-th-border: Sets border of the th elements.
+* @prop --kup-datatable-th-resize-handle-width: Sets the width of the handle used to resize columns.
 */
 :host {
   --kup_datatable_background_color: var(
@@ -2825,6 +2825,10 @@
     --kup-datatable-th-border,
     1px solid var(--kup-border-color)
   );
+  --kup_datatable_th_resize_handle_width: var(
+    --kup-datatable-th-resize-handle-width,
+    3px
+  );
   display: block;
   font-family: var(--kup_datatable_font_family);
   font-size: var(--kup_datatable_font_size);
@@ -2856,10 +2860,10 @@ table.auto-width {
   min-width: auto;
   width: 0;
 }
-table > tbody > tr.focus td:first-of-type {
+table > tbody > tr.focus td:first-of-type, table > tbody > tr[kup-drag-over] td:first-of-type {
   box-shadow: inset 4px 0px 0px 0px var(--kup-secondary-color);
 }
-table > tbody > tr > td:first-of-type {
+table > tbody > tr > td:first-of-type, table > tbody > tr > td.placeholder ~ td:not(.placeholder) {
   border-left: var(--kup_datatable_border);
 }
 table > tbody > tr > td:last-of-type {
@@ -2910,7 +2914,7 @@ table tfoot td:first-of-type {
   width: 1.25em;
 }
 .kup-icon:not(.f-image--wrapper).kup-ascending-icon, .kup-icon:not(.f-image--wrapper).kup-descending-icon, .kup-icon:not(.f-image--wrapper).kup-key-icon, .kup-icon:not(.f-image--wrapper).kup-filter-remove-icon {
-  float: right;
+  height: auto;
 }
 .kup-icon:not(.f-image--wrapper).kup-collapsed-icon, .kup-icon:not(.f-image--wrapper).kup-expanded-icon {
   float: left;
@@ -2935,6 +2939,7 @@ table tfoot td:first-of-type {
 }
 
 .below-wrapper {
+  backface-visibility: hidden;
   height: auto;
   overflow: auto;
 }
@@ -2977,44 +2982,61 @@ table tfoot td:first-of-type {
   font-size: calc(var(--kup_datatable_font_size) * 1.5) !important;
 }
 
-thead th {
+th {
   background-color: var(--kup-title-background-color);
-  color: var(--kup-title-color);
   border: var(--kup_datatable_th_border);
   border-left: 0 none;
   border-bottom-width: 2px;
   box-sizing: border-box;
-  padding: 0.5em 0.3125em;
-  text-overflow: ellipsis;
   top: 0;
-  vertical-align: middle;
-  white-space: nowrap;
+  touch-action: none;
   transition: background-color 0.25s ease;
+  user-select: none;
 }
-thead th:first-of-type {
+th:first-of-type {
   border-left: var(--kup_datatable_th_border);
 }
-thead th .column-title {
-  display: inline-block;
+
+.header-cell__content {
+  color: var(--kup-title-color);
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5em 0.3125em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.header-cell--centered .header-cell__content {
+  justify-content: center;
+}
+.header-cell--is-number .header-cell__content {
+  justify-content: flex-end;
+}
+.header-cell__title {
   overflow: hidden;
   text-overflow: ellipsis;
-  vertical-align: bottom;
+  user-select: none;
 }
-thead th.icon {
-  width: 30px;
+.header-cell__icons {
+  display: flex;
 }
-thead th.number {
-  text-align: right;
+.header-cell__drag-handler {
+  background: rgba(var(--kup-title-color-rgb), 0.25);
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  touch-action: none;
+  user-select: none;
+  width: var(--kup_datatable_th_resize_handle_width);
 }
-thead th.centered {
-  text-align: center;
+.header-cell__drag-handler:hover {
+  background: rgba(var(--kup-title-color-rgb), 0.5);
 }
-thead th.header-cell--sortable {
+.header-cell--sortable {
   cursor: pointer;
 }
-thead th .column-sort {
-  float: left;
-  margin: 0 0.5em;
+.header-cell--is-icon {
+  width: 30px;
 }
 
 tbody {
@@ -3065,6 +3087,7 @@ tbody tr.group > td.total.negative-number {
 }
 tbody tr > td {
   box-sizing: border-box;
+  overflow: hidden;
   padding: 0.5em 0.3125em;
   word-break: break-all;
   word-wrap: break-word;
@@ -3266,12 +3289,14 @@ th.obj:hover span:not(.overlay-action) {
 }
 
 [kup-dialog] {
+  animation: fade-in 0.25s ease-out;
   background-color: var(--kup_datatable_background_color);
   margin: 0;
   position: fixed;
   transition: none;
-  max-height: 95vh;
-  max-width: 95vw;
+  -ms-touch-action: none;
+  touch-action: none;
+  will-change: transform;
 }
 [kup-dialog].kup-resizable {
   border: 3px outset var(--kup-title-background-color);
@@ -3392,24 +3417,10 @@ sticky-header {
 .persistent-header ~ sticky-header th-sticky {
   box-sizing: border-box;
   display: inline-flex;
-  padding: 0.5em 0.3125em;
-}
-.persistent-header ~ sticky-header th-sticky.icon {
-  width: 30px;
-}
-.persistent-header ~ sticky-header th-sticky.number {
-  text-align: right;
+  padding: 0 0.3125em;
 }
-.persistent-header ~ sticky-header th-sticky.centered {
-  text-align: center;
-}
-.persistent-header ~ sticky-header .column-title {
+.persistent-header ~ sticky-header th-sticky .header-cell__content {
   width: 100%;
-  font-weight: bold;
-  margin: auto;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .fixed-column, .fixed-row {
@@ -3467,79 +3478,64 @@ tfoot tr.hover:not(.group):not(.selected) .fixed-column {
   background-color: var(--kup_datatable_background_color);
 }
 
-[columns-dragging] [drag-over] {
-  background-color: rgba(var(--kup-success-color-rgb), 0.25);
+:host([drag-enabled]) tr {
+  touch-action: none;
 }
-[columns-dragging] [drag-over] > * {
-  pointer-events: none;
+
+th[kup-drag-over] {
+  background-color: rgba(var(--kup-success-color-rgb), 0.25);
 }
-[columns-dragging] [drag-over][drag-starter] {
-  background-color: rgba(var(--kup-danger-color-rgb), 0.25);
+
+th[kup-draggable] {
+  cursor: grabbing !important;
+  opacity: 0.5;
 }
 
-#group-column-area {
+.droparea {
+  animation: fade-in 0.25s ease-out;
   background: var(--kup_datatable_background_color);
-  border: 2px dashed var(--kup-danger-color);
+  border-radius: 8px;
   box-shadow: var(--kup-box-shadow);
   display: none;
-  height: 50px;
-  opacity: 0.5;
-  width: 50px;
-  transition: opacity 0.25s;
+  padding: 1em 0.5em;
 }
-#group-column-area.visible {
-  display: block;
-}
-#group-column-area .f-image--wrapper {
-  width: 100%;
-  position: absolute;
-}
-#group-column-area .f-image--wrapper:first-of-type {
-  opacity: 1;
-}
-#group-column-area .f-image--wrapper:last-of-type {
-  opacity: 0;
-}
-#group-column-area[drag-over] {
-  opacity: 1;
+.droparea--visible {
+  display: flex;
 }
-#group-column-area[drag-over] .f-image--wrapper:first-of-type {
-  opacity: 0;
+.droparea__groups {
+  border: 2px dashed var(--kup-text-color);
 }
-#group-column-area[drag-over] .f-image--wrapper:last-of-type {
-  opacity: 1;
+.droparea__remove {
+  border: 2px dashed var(--kup-danger-color);
 }
-
-#remove-column-area {
+.droparea__groups, .droparea__remove {
   background: var(--kup_datatable_background_color);
-  border: 2px dashed var(--kup-danger-color);
   box-shadow: var(--kup-box-shadow);
-  display: none;
+  display: block;
   height: 50px;
+  margin: 0 0.5em;
   opacity: 0.5;
-  width: 50px;
+  position: relative;
   transition: opacity 0.25s;
+  width: 50px;
 }
-#remove-column-area.visible {
-  display: block;
-}
-#remove-column-area .f-image--wrapper {
+.droparea__groups .f-image--wrapper, .droparea__remove .f-image--wrapper {
   width: 100%;
   position: absolute;
 }
-#remove-column-area .f-image--wrapper:first-of-type {
+.droparea__groups .f-image--wrapper:first-of-type, .droparea__remove .f-image--wrapper:first-of-type {
   opacity: 1;
 }
-#remove-column-area .f-image--wrapper:last-of-type {
+.droparea__groups .f-image--wrapper:last-of-type, .droparea__remove .f-image--wrapper:last-of-type {
   opacity: 0;
 }
-#remove-column-area[drag-over] {
+.droparea__groups[kup-drag-over], .droparea__remove[kup-drag-over] {
   opacity: 1;
 }
-#remove-column-area[drag-over] .f-image--wrapper:first-of-type {
+.droparea__groups[kup-drag-over] .f-image--wrapper:first-of-type, .droparea__remove[kup-drag-over] .f-image--wrapper:first-of-type {
   opacity: 0;
 }
-#remove-column-area[drag-over] .f-image--wrapper:last-of-type {
+.droparea__groups[kup-drag-over] .f-image--wrapper:last-of-type, .droparea__remove[kup-drag-over] .f-image--wrapper:last-of-type {
   opacity: 1;
 }