@limetech/lime-elements 35.0.0-next.3 → 35.0.0-next.32

package/dist/collection/components/table/table.css

@@ -693,7 +693,7 @@
 .tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu::after {
   display: inline-block;
   position: absolute;
-  top: calc(5px + .4em);
+  top: calc(5px + 0.4em);
   right: 10px;
   height: 7px;
   width: 7px;
@@ -935,6 +935,141 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   background: #333;
 }
 
+:host {
+  display: block;
+  --table-header-background-color: var(--contrast-500);
+  --table-header-background-color--hover: var(--contrast-400);
+  --table-header-background-color-when-being-dragged: var(--contrast-100);
+  --table-row-background-color--odd: var(--contrast-200);
+  --table-row-background-color--even: var(--contrast-100);
+  --table-row-background-color--hover: var(--contrast-100);
+  --table-row-background-color--active: var(--color-teal-lighter);
+  --table-arrow-color: var(--contrast-800);
+  --table-arrow-color--active: var(--mdc-theme-primary);
+}
+
+#tabulator-container,
+#tabulator-table {
+  height: 100%;
+  width: 100%;
+}
+
+.tabulator {
+  display: flex;
+  flex-direction: column;
+}
+.tabulator * {
+  box-sizing: border-box;
+}
+.tabulator .tabulator-header {
+  flex-shrink: 0;
+}
+.tabulator .tabulator-tableHolder {
+  isolation: isolate;
+  flex-grow: 1;
+  height: unset !important;
+  max-height: unset !important;
+  min-height: unset !important;
+}
+.tabulator .tabulator-footer {
+  flex-shrink: 0;
+}
+
+#tabulator-container:not(.has-pagination) .tabulator-paginator {
+  visibility: hidden;
+  display: none !important;
+}
+
+#tabulator-container {
+  position: relative;
+}
+
+#tabulator-container,
+#tabulator-table {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: Roboto, sans-serif;
+  /* @alternate */
+  font-family: var(--mdc-typography-font-family, Roboto, sans-serif);
+  background-color: transparent;
+  border: none;
+}
+
+.tabulator .tabulator-header {
+  border-bottom: 0;
+  background-color: rgb(var(--table-header-background-color));
+}
+.tabulator .tabulator-header .tabulator-col {
+  transition: background-color 0.2s ease;
+  background-color: rgb(var(--table-header-background-color));
+  border-right-color: rgb(var(--contrast-200));
+}
+.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
+  background-color: rgb(var(--table-header-background-color--hover));
+}
+.tabulator .tabulator-header .tabulator-col-title {
+  font-weight: 500;
+  padding-left: 0.125rem;
+  line-height: 1.25rem;
+}
+
+.tabulator-row.tabulator-selectable {
+  transition: background-color 0.2s ease;
+}
+.tabulator-row.tabulator-selectable:not(.active):hover {
+  background-color: rgb(var(--table-header-background-color));
+}
+.tabulator-row.tabulator-row-odd {
+  background-color: rgb(var(--table-row-background-color--odd));
+}
+.tabulator-row.tabulator-row-even {
+  background-color: rgb(var(--table-row-background-color--even));
+}
+.tabulator-row.active, .tabulator-row.active:hover {
+  background-color: rgb(var(--table-row-background-color--active));
+}
+.tabulator-row .tabulator-cell {
+  border-right: transparent;
+  padding: 0.5rem;
+  display: inline-flex;
+  align-items: center;
+}
+.tabulator-row .tabulator-cell[style*="text-align: right;"] {
+  justify-content: flex-end;
+}
+.tabulator-row .tabulator-cell[style*="text-align: center;"] {
+  justify-content: center;
+}
+
+.tabulator-col,
+.tabulator-cell {
+  max-width: 37.5rem;
+  font-size: 0.8125rem;
+}
+
+#tabulator-loader,
+#tabulator-empty-text {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#tabulator-loader {
+  background-color: rgba(var(--contrast-100), 0.6);
+  cursor: wait;
+}
+
+#tabulator-empty-text {
+  color: rgb(var(--contrast-800));
+  font-weight: bold;
+  font-size: 1.25rem;
+  pointer-events: none;
+}
+
 /*
  * This file is imported into every component!
  *
@@ -952,13 +1087,16 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   cursor: pointer;
 }
 [aria-sort=none] .tabulator-arrow {
-  border-bottom-color: rgb(var(--contrast-800)) !important;
+  border-bottom-color: rgb(var(--table-arrow-color)) !important;
 }
 [aria-sort=desc] .tabulator-arrow {
-  border-top-color: rgb(var(--color-teal-light)) !important;
+  border-top-color: var(--table-arrow-color--active) !important;
 }
 [aria-sort=asc] .tabulator-arrow {
-  border-bottom-color: rgb(var(--color-teal-light)) !important;
+  border-bottom-color: var(--table-arrow-color--active) !important;
+}
+[aria-sort=desc] .tabulator-arrow:after, [aria-sort=asc] .tabulator-arrow:after {
+  background-color: var(--table-arrow-color--active);
 }
 .tabulator-arrow:before, .tabulator-arrow:after {
   display: block;
@@ -967,16 +1105,19 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   bottom: 0;
 }
 .tabulator-arrow:before {
-  background-color: rgb(var(--contrast-500));
+  background-color: rgb(var(--table-header-background-color));
   width: 0.5rem;
   height: 0.5rem;
   transform: rotate(45deg);
   left: -0.25rem;
   top: 0.25rem;
 }
+.tabulator-col.tabulator-sortable:hover .tabulator-arrow:before {
+  background-color: rgb(var(--table-header-background-color--hover));
+}
 .tabulator-arrow:after {
   width: 0.125rem;
-  background-color: rgb(var(--contrast-800));
+  background-color: rgb(var(--table-arrow-color));
   height: 0.5625rem;
   top: 0.125rem;
   left: -0.0625rem;
@@ -990,9 +1131,6 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 [aria-sort=desc] .tabulator-arrow:after {
   top: -0.6875rem;
 }
-[aria-sort=desc] .tabulator-arrow:after, [aria-sort=asc] .tabulator-arrow:after {
-  background-color: rgb(var(--color-teal-light));
-}
 
 @keyframes indicate-sortable-column {
   0%, 100% {
@@ -1015,13 +1153,13 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
  * Nothing in this file may output any CSS
  * without being explicitly called by outside code.
  */
-.tabulator .tabulator-footer {
-  transition: transform 0.5s ease-out, opacity 0.35s ease;
-}
 .tabulator .tabulator-footer .tabulator-paginator {
+  box-sizing: border-box;
   display: grid;
   grid-auto-flow: column;
   justify-content: end;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
 }
 .tabulator .tabulator-footer .tabulator-paginator .tabulator-pages {
   margin: 0 0.5rem;
@@ -1037,7 +1175,7 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   margin: 0;
   border: none;
   border-radius: 2.5rem;
-  color: #303042;
+  color: rgb(var(--contrast-1200)) !important;
   background-color: transparent;
 }
 .tabulator .tabulator-footer .tabulator-paginator .tabulator-page:not([disabled]) {
@@ -1051,12 +1189,11 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   transform: translate3d(0, 0.08rem, 0);
 }
 .tabulator .tabulator-footer .tabulator-paginator .tabulator-page:hover {
-  color: #303042;
-  background-color: rgb(var(--contrast-200));
+  background-color: rgb(var(--contrast-100));
 }
 .tabulator .tabulator-footer .tabulator-paginator .tabulator-page.active {
+  background-color: rgb(var(--contrast-100));
   box-shadow: var(--button-shadow-inset);
-  background-color: #fff;
 }
 .tabulator .tabulator-footer .tabulator-paginator .tabulator-page:disabled {
   cursor: not-allowed;
@@ -1065,23 +1202,6 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   background-color: transparent;
 }
 
-.tabulator:not(.has-pagination):not(.has-aggregation) .tabulator-tableHolder {
-  height: calc(100% - 2.125rem) !important;
-  max-height: calc(100% - 2.125rem) !important;
-}
-.tabulator:not(.has-pagination).has-aggregation .tabulator-tableHolder {
-  height: calc( 100% - ( 2.125rem + 2.25rem ) ) !important;
-  max-height: calc( 100% - ( 2.125rem + 2.25rem ) ) !important;
-}
-.tabulator:not(.has-pagination) .tabulator-footer {
-  pointer-events: none;
-}
-.tabulator:not(.has-pagination) .tabulator-footer .tabulator-paginator {
-  visibility: hidden;
-  opacity: 0;
-  transform: translateY(2.5rem);
-}
-
 .tabulator-page[data-page=first], .tabulator-page[data-page=prev], .tabulator-page[data-page=next], .tabulator-page[data-page=last] {
   font-size: 0;
   color: transparent !important;
@@ -1156,24 +1276,24 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
  * Nothing in this file may output any CSS
  * without being explicitly called by outside code.
  */
-:host(.has-interactive-rows) .tabulator-row.tabulator-selectable {
+:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable {
   transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
 }
-:host(.has-interactive-rows) .tabulator-row.tabulator-selectable:hover {
+:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable:hover {
   box-shadow: var(--button-shadow-hovered);
 }
-:host(.has-interactive-rows) .tabulator-row.tabulator-selectable:active {
+:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable:active {
   box-shadow: var(--button-shadow-pressed);
   transform: translate3d(0, 0.08rem, 0);
 }
-:host(.has-interactive-rows) .tabulator-row.tabulator-selectable:hover {
-  z-index: 1;
+:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable:hover {
+  z-index: 2;
 }
-:host(.has-interactive-rows) .tabulator-row.tabulator-selectable:not(.active):hover {
-  background-color: rgb(var(--contrast-100));
+:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable:not(.active):hover {
+  background-color: rgb(var(--table-row-background-color--hover));
 }
 
-:host(.has-low-density) #tabulator-table {
+:host(.has-low-density) #tabulator-container {
   width: max-content;
   max-width: 100%;
   margin: auto;
@@ -1181,25 +1301,19 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 :host(.has-low-density) .tabulator-table {
   background-color: transparent;
 }
-:host(.has-low-density) .tabulator-headers {
-  padding: 0 0.5rem;
-}
 :host(.has-low-density) .tabulator-header {
-  background-color: transparent;
+  border-radius: 0.375rem;
 }
 :host(.has-low-density) .tabulator-header .tabulator-col-content {
   padding-left: 0.5rem;
 }
-:host(.has-low-density) .tabulator-col:first-child {
-  border-radius: 0.375rem 0 0 0.375rem;
+:host(.has-low-density) .tabulator-footer {
+  border-radius: 0.5rem;
 }
-:host(.has-low-density) .tabulator-col:last-child {
-  border-radius: 0 0.375rem 0.375rem 0;
+:host(.has-low-density) .tabulator-calcs-holder {
+  border-radius: 0.5rem 0.5rem 0 0;
 }
 :host(.has-low-density) .tabulator-row {
-  width: calc( 100% - 1rem );
-  margin-right: auto;
-  margin-left: auto;
   border-radius: 0.5rem;
 }
 :host(.has-low-density) .tabulator-row:not(.tabulator-calcs-bottom) {
@@ -1220,6 +1334,31 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   border-radius: 0 0.5rem 0.5rem 0;
 }
 
+:host(.has-pagination-on-top) .tabulator .tabulator-header {
+  order: 2;
+}
+:host(.has-pagination-on-top) .tabulator .tabulator-tableHolder {
+  order: 3;
+}
+:host(.has-pagination-on-top) .tabulator .tabulator-footer {
+  order: 1;
+  background-color: transparent;
+}
+:host(.has-pagination-on-top) .tabulator .tabulator-calcs-holder {
+  position: absolute;
+  bottom: 0;
+}
+:host(.has-pagination-on-top) .has-aggregation .tabulator-tableHolder {
+  padding-bottom: 1.75rem;
+}
+:host(.has-pagination-on-top) .select-all {
+  top: 2.625rem;
+}
+:host(.has-pagination-on-top) #tabulator-container:not(.has-pagination) .tabulator-paginator {
+  display: grid !important;
+  opacity: 0;
+}
+
 /*
  * This file is imported into every component!
  *
@@ -1260,129 +1399,124 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
     transform: rotate(-2deg);
   }
 }
-.tabulator.has-movable-columns .tabulator-header {
+.has-movable-columns .tabulator-header {
   overflow-y: visible;
 }
-.tabulator.has-movable-columns .tabulator-header .tabulator-col {
+.has-movable-columns .tabulator-header .tabulator-col:not(.tabulator-frozen) {
   cursor: move !important;
 }
-.tabulator.has-movable-columns .tabulator-header .tabulator-col.tabulator-sortable.tabulator-moving {
+.has-movable-columns .tabulator-header .tabulator-col:not(.tabulator-frozen).tabulator-sortable.tabulator-moving {
   animation: detach-a-column-header 0.2s ease forwards;
   opacity: 0.9;
   border: none;
   border-radius: 0.25rem;
-  background-color: rgb(var(--contrast-100));
+  background-color: rgb(var(---table-header-background-color-when-being-dragged));
   box-shadow: var(--shadow-depth-16);
 }
-.tabulator.has-movable-columns .tabulator-header .tabulator-col.tabulator-sortable.tabulator-moving:hover {
-  background-color: rgb(var(--contrast-100));
-}
-.tabulator.has-movable-columns .tabulator-header .tabulator-col.tabulator-sortable.tabulator-moving .tabulator-arrow:before {
-  background-color: rgb(var(--contrast-100));
+.has-movable-columns .tabulator-header .tabulator-col:not(.tabulator-frozen).tabulator-sortable.tabulator-moving:hover {
+  background-color: rgb(var(---table-header-background-color-when-being-dragged));
 }
-
-:host {
-  display: block;
+.has-movable-columns .tabulator-header .tabulator-col:not(.tabulator-frozen).tabulator-sortable.tabulator-moving .tabulator-arrow:before {
+  background-color: rgb(var(---table-header-background-color-when-being-dragged));
 }
 
-#tabulator-container {
-  position: relative;
-}
-
-#tabulator-container,
-#tabulator-table {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: Roboto, sans-serif;
-  /* @alternate */
-  font-family: var(--mdc-typography-font-family, Roboto, sans-serif);
-  height: 100%;
-  width: 100%;
-  background-color: transparent;
+.tabulator .tabulator-footer {
+  transition: transform 0.5s ease-out, opacity 0.35s ease;
+  padding-top: 0;
+  padding-bottom: 0;
+  background-color: rgb(var(--table-header-background-color--hover));
   border: none;
+  user-select: auto;
 }
-
-.tabulator .tabulator-header {
-  border-bottom: 0;
-  background-color: rgb(var(--contrast-500));
+.tabulator .tabulator-footer .tabulator-calcs-holder {
+  border-color: rgb(var(--contrast-600));
+  margin-top: 0;
+  margin-bottom: 0;
 }
-.tabulator .tabulator-header .tabulator-col {
-  transition: background-color 0.2s ease;
-  background-color: rgb(var(--contrast-500));
-  border-right-color: rgb(var(--contrast-200));
+.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-calcs {
+  cursor: default;
 }
-.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-cell {
+  padding-top: 0.1875rem;
+  padding-bottom: 0.1875rem;
 }
-.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
-  background-color: rgb(var(--contrast-400));
+
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
+.select-all,
+.limel-table--row-selector {
+  --mdc-checkbox-touch-target-size: 1rem;
 }
-.tabulator .tabulator-header .tabulator-col-title {
-  font-weight: 500;
-  padding-left: 0.125rem;
+
+.select-all {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0.375rem;
+  width: 2.5625rem;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
 }
-.tabulator .tabulator-footer {
-  background-color: rgb(var(--contrast-500));
-  border: none;
+.select-all limel-checkbox {
+  transform: translate(-0.25rem, 0);
 }
-.tabulator .tabulator-footer .tabulator-calcs-holder {
-  border-color: rgb(var(--contrast-600));
+:host(.has-low-density) .select-all limel-checkbox {
+  transform: translate(-0.15rem, 0);
 }
 
-.tabulator-row.tabulator-selectable {
-  transition: background-color 0.2s ease;
+.limel-table--row-selector {
+  position: sticky !important;
+  left: 0;
+  border-width: 0;
+  justify-content: center;
+  z-index: 1;
 }
-.tabulator-row.tabulator-selectable:not(.active):hover {
-  background-color: rgb(var(--contrast-500));
+.tabulator-row-odd .limel-table--row-selector {
+  background-image: linear-gradient(to right, rgb(var(--table-row-background-color--odd)) 70%, rgb(var(--table-row-background-color--odd), 0));
 }
-.tabulator-row.tabulator-row-odd {
-  background-color: rgb(var(--contrast-200));
+.tabulator-row-even .limel-table--row-selector {
+  background-image: linear-gradient(to right, rgb(var(--table-row-background-color--even)) 70%, rgb(var(--table-row-background-color--even), 0));
 }
-.tabulator-row.tabulator-row-even {
-  background-color: rgb(var(--contrast-100));
+.tabulator-row:not(.tabulator-calcs):hover .limel-table--row-selector {
+  will-change: background-image;
+  background-image: linear-gradient(to right, rgb(var(--table-row-background-color--hover)) 70%, rgb(var(--table-row-background-color--hover), 0));
 }
-.tabulator-row.active, .tabulator-row.active:hover {
-  background-color: rgba(var(--color-teal-light), 0.16);
+.tabulator-row.active .limel-table--row-selector, .tabulator-row.active:hover .limel-table--row-selector {
+  background-image: linear-gradient(to right, rgb(var(--table-row-background-color--active)) 70%, rgb(var(--table-row-background-color--active), 0));
 }
-.tabulator-row .tabulator-cell {
-  border-right: transparent;
-  padding: 0.5rem;
-  display: inline-flex;
-  align-items: center;
+.limel-table--row-selector limel-checkbox {
+  transition: opacity 0.2s ease;
+  align-self: center;
+  opacity: 0.3;
+  transform: translate(-0.25rem, 0);
 }
-.tabulator-row .tabulator-cell[style*="text-align: right;"] {
-  justify-content: flex-end;
+.tabulator-row:hover .limel-table--row-selector limel-checkbox {
+  opacity: 1;
 }
-.tabulator-row .tabulator-cell[style*="text-align: center;"] {
-  justify-content: center;
+.has-selection .limel-table--row-selector limel-checkbox {
+  opacity: 1;
 }
-
-.tabulator-col,
-.tabulator-cell {
-  max-width: 37.5rem;
-  font-size: 0.8125rem;
+.limel-table--row-selector .tabulator-col-resize-handle {
+  display: none;
 }
-
-#tabulator-loader,
-#tabulator-empty-text {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.limel-table--row-selector + .tabulator-col .tabulator-col-resize-handle.prev, .limel-table--row-selector + .tabulator-cell .tabulator-col-resize-handle.prev {
+  display: none;
 }
 
-#tabulator-loader {
-  background-color: rgba(var(--contrast-100), 0.6);
-  cursor: wait;
+.has-movable-columns .tabulator-header .tabulator-col.limel-table--row-selector {
+  border: none;
+  cursor: default !important;
+  pointer-events: none;
+  background-color: transparent;
+  background-image: linear-gradient(to right, rgb(var(--table-header-background-color--hover)) 70%, rgb(var(--table-header-background-color--hover), 0));
+  left: 0;
 }
 
-#tabulator-empty-text {
-  color: rgb(var(--contrast-800));
-  font-weight: bold;
-  font-size: 1.25rem;
-  pointer-events: none;
+.has-selection .tabulator-calcs .tabulator-cell {
+  color: var(--table-arrow-color--active);
 }