@limetech/lime-elements 39.0.1 → 39.0.3

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

@@ -1245,30 +1245,6 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   background: #333;
 }
 
-/*
-* @prop --table-max-column-width: defines a maximum width for columns using standard size units, to prevent the table from growing too wide. Set to `auto` if you do not need this limitation. Defaults to `40rem`.
-*/
-:host(limel-table) {
-  isolation: isolate;
-  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(
-      --lime-elevated-surface-background-color
-  );
-  --table-row-background-color--active: var(--mdc-theme-primary);
-  --table-arrow-color: var(--contrast-800);
-  --table-arrow-color--active: var(
-      --lime-primary-color,
-      var(--limel-theme-primary-color)
-  );
-  --table-text-color: var(--limel-theme-text-primary-on-background-color);
-  --limel-chip-size: 1.25rem;
-}
-
 #tabulator-container,
 #tabulator-table {
   height: 100%;
@@ -1297,114 +1273,6 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   flex-shrink: 0;
 }
 
-#tabulator-container {
-  position: relative;
-}
-
-#tabulator-container,
-#tabulator-table {
-  background-color: transparent;
-  border: none;
-}
-
-.tabulator .tabulator-header {
-  color: var(--table-text-color);
-}
-.tabulator .tabulator-tableholder .tabulator-table {
-  color: var(--table-text-color);
-  background-color: transparent;
-}
-.tabulator .tabulator-header {
-  border-bottom: 0;
-  background-color: rgb(var(--table-header-background-color));
-}
-.tabulator .tabulator-header .tabulator-headers {
-  width: fit-content;
-}
-.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.tabulator-col-sorter-element:hover {
-  background-color: rgb(var(--table-header-background-color--hover));
-}
-.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
-  padding: 0 0.5rem 0 0.25rem;
-}
-.tabulator .tabulator-header .tabulator-col-title-holder {
-  height: 1.75rem;
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-.tabulator .tabulator-header .tabulator-col-sorter {
-  order: 1;
-}
-.tabulator .tabulator-header .tabulator-col-title {
-  order: 2;
-  font-weight: 500;
-  padding-right: 0 !important;
-  line-height: 1.25rem;
-}
-
-.tabulator-row {
-  height: 2.25rem;
-}
-.tabulator-row .tabulator-cell {
-  border-right: transparent;
-  padding: 0.5rem;
-  padding-left: 1rem;
-  height: inherit;
-}
-.tabulator-row .tabulator-cell[style*="text-align: right;"] {
-  justify-content: flex-end;
-}
-.tabulator-row .tabulator-cell[style*="text-align: center;"] {
-  justify-content: center;
-}
-.tabulator-row .tabulator-col-resize-handle {
-  display: none;
-}
-
-.tabulator-col,
-.tabulator-cell {
-  max-width: var(--table-max-column-width, 40rem);
-}
-
-#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;
-}
-
-limel-chip {
-  transform: translateY(-0.15rem);
-}
-
-/*
-* This file is imported into every component!
-*
-* Nothing in this file may output any CSS
-* without being explicitly called by outside code.
-*/
 .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter {
   position: relative;
   cursor: pointer;
@@ -1491,99 +1359,6 @@ limel-chip {
     border-bottom-color: rgb(var(--table-arrow-color));
   }
 }
-/**
-* Note! This file is exported to `dist/scss/` in the published
-* node module, for consumer projects to import.
-* That means this file cannot import from any file that isn't
-* also exported, keeping the same relative path.
-*
-* Or, just don't import anything, that works too.
-*/
-/**
-* This can be used on a trigger element that opens a dropdown menu or a popover.
-*/
-/**
- * This mixin will mask out the content that is close to
- * the edges of a scrollable area.
- * - If the scrollable content has `overflow-y`, use `vertically`
- * as an argument for `$direction`.
- - If the scrollable content has `overflow-x`, use `horizontally`
- * as an argument for `$direction`.
- *
- * For the visual effect to work smoothly, we need to make sure that
- * the size of the fade-out edge effect is the same as the
- * internal paddings of the scrollable area. Otherwise, content of a
- * scrollable area that does not have a padding will fade out before
- * any scrolling has been done.
- * This is why this mixin already adds paddings, which automatically
- * default to the size of the fade-out effect.
- * This size defaults to `1rem`, but to override the size use
- * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
- * when `vertically` argument is set, and use
- * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
- * when `horizontally` argument is set.
- * Of course you can also programmatically increase and decrease the
- * size of these variables for each edge, based on the amount of
- * scrolling that has been done by the user. In this case, make sure
- * to add a custom padding where the mixin is used, to override
- * the paddings that are automatically added by the mixin in the
- * compiled CSS code.
- */
-/**
-* This mixin will add an animated underline to the bottom of an `a` elements.
-* Note that you may need to add `all: unset;` –depending on your use case–
-* before using this mixin.
-*/
-/**
-* This mixin creates a cross-browser font stack.
-* - `sans-serif` can be used for the UI of the components.
-* - `monospace` can be used for code.
-*
-* ⚠️ If we change the font stacks, we need to update
-* 1. the consumer documentation in `README.md`, and
-* 2. the CSS variables of `--kompendium-example-font-family`
-* in the `<style>` tag of `index.html`.
-*/
-/**
-* This mixin is a hack, using old CSS syntax
-* to enable you to truncate a piece of text,
-* after a certain number of lines.
-*/
-/**
-* This mixin will add a chessboard background pattern,
-* typically used to visualize transparency.
-*/
-/**
-* Make a container resizable by the user.
-* This is used in the documentations and examples
-* of some components, to demonstrate how the component
-* behaves in a resizable container.
-*/
-/**
- * Drag to reorder mixins
- */
-/**
- * The breakpoints below are used to create responsive designs
- * in Lime's products. Therefore, they are here to get distributed
- * to all components in other private repos, which rely on this `mixins`
- * file, to create consistent styles.
- *
- * :::important
- * In very rare cases you should used media queries!
- * Nowadays, there are many better ways of achieving responsive design
- * without media queries. For example, using CSS Grid, Flexbox, and their features.
- * :::
- */
-/**
-  * Media query mixins for responsive design based on screen width.
-  * Note that these mixins do not detect the device type!
-  */
-/*
-* This file is imported into every component!
-*
-* Nothing in this file may output any CSS
-* without being explicitly called by outside code.
-*/
 #tabulator-container:not(.has-pagination) .tabulator-paginator {
   display: var(--limel-table-single-page-paginator-display, grid);
 }
@@ -1697,137 +1472,38 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
   transform: translate3d(-0.09375rem, 0, 0) rotateZ(180deg);
 }
 
-/*
-* This file is imported into every component!
-*
-* Nothing in this file may output any CSS
-* without being explicitly called by outside code.
-*/
-@keyframes fade-in-tabulator-loader {
-  0% {
-    background: transparent;
-  }
-  100% {
-    background: rgba(var(--contrast-1400), 0.4);
-  }
-}
-@keyframes spin-tabulator-loader {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.tabulator .tabulator-loader {
-  animation: fade-in-tabulator-loader 0.5s ease 0.5s forwards;
-  animation-iteration-count: 1;
-  cursor: progress;
-  background: transparent;
-}
-.tabulator .tabulator-loader .tabulator-loader-msg {
-  animation: spin-tabulator-loader 0.4s linear infinite;
-  color: transparent;
-  font-size: 0;
-  border-radius: 50%;
-  border: 0.1875rem solid rgb(var(--lime-brand-color-flexible-turquoise)) !important;
-  border-top-color: transparent !important;
-  width: 1.25rem;
-  height: 1.25rem;
-  background-color: transparent !important;
-  padding: 0;
-}
-
-/**
-* Note! This file is exported to `dist/scss/` in the published
-* node module, for consumer projects to import.
-* That means this file cannot import from any file that isn't
-* also exported, keeping the same relative path.
-*
-* Or, just don't import anything, that works too.
-*/
-/**
-* This can be used on a trigger element that opens a dropdown menu or a popover.
-*/
-/**
- * This mixin will mask out the content that is close to
- * the edges of a scrollable area.
- * - If the scrollable content has `overflow-y`, use `vertically`
- * as an argument for `$direction`.
- - If the scrollable content has `overflow-x`, use `horizontally`
- * as an argument for `$direction`.
- *
- * For the visual effect to work smoothly, we need to make sure that
- * the size of the fade-out edge effect is the same as the
- * internal paddings of the scrollable area. Otherwise, content of a
- * scrollable area that does not have a padding will fade out before
- * any scrolling has been done.
- * This is why this mixin already adds paddings, which automatically
- * default to the size of the fade-out effect.
- * This size defaults to `1rem`, but to override the size use
- * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
- * when `vertically` argument is set, and use
- * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
- * when `horizontally` argument is set.
- * Of course you can also programmatically increase and decrease the
- * size of these variables for each edge, based on the amount of
- * scrolling that has been done by the user. In this case, make sure
- * to add a custom padding where the mixin is used, to override
- * the paddings that are automatically added by the mixin in the
- * compiled CSS code.
- */
-/**
-* This mixin will add an animated underline to the bottom of an `a` elements.
-* Note that you may need to add `all: unset;` –depending on your use case–
-* before using this mixin.
-*/
-/**
-* This mixin creates a cross-browser font stack.
-* - `sans-serif` can be used for the UI of the components.
-* - `monospace` can be used for code.
-*
-* ⚠️ If we change the font stacks, we need to update
-* 1. the consumer documentation in `README.md`, and
-* 2. the CSS variables of `--kompendium-example-font-family`
-* in the `<style>` tag of `index.html`.
-*/
-/**
-* This mixin is a hack, using old CSS syntax
-* to enable you to truncate a piece of text,
-* after a certain number of lines.
-*/
-/**
-* This mixin will add a chessboard background pattern,
-* typically used to visualize transparency.
-*/
-/**
-* Make a container resizable by the user.
-* This is used in the documentations and examples
-* of some components, to demonstrate how the component
-* behaves in a resizable container.
-*/
-/**
- * Drag to reorder mixins
- */
-/**
- * The breakpoints below are used to create responsive designs
- * in Lime's products. Therefore, they are here to get distributed
- * to all components in other private repos, which rely on this `mixins`
- * file, to create consistent styles.
- *
- * :::important
- * In very rare cases you should used media queries!
- * Nowadays, there are many better ways of achieving responsive design
- * without media queries. For example, using CSS Grid, Flexbox, and their features.
- * :::
- */
-/**
-  * Media query mixins for responsive design based on screen width.
-  * Note that these mixins do not detect the device type!
-  */
-/*
-* This file is imported into every component!
-*
-* Nothing in this file may output any CSS
-* without being explicitly called by outside code.
-*/
+@keyframes fade-in-tabulator-loader {
+  0% {
+    background: transparent;
+  }
+  100% {
+    background: rgba(var(--contrast-1400), 0.4);
+  }
+}
+@keyframes spin-tabulator-loader {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.tabulator .tabulator-loader {
+  animation: fade-in-tabulator-loader 0.5s ease 0.5s forwards;
+  animation-iteration-count: 1;
+  cursor: progress;
+  background: transparent;
+}
+.tabulator .tabulator-loader .tabulator-loader-msg {
+  animation: spin-tabulator-loader 0.4s linear infinite;
+  color: transparent;
+  font-size: 0;
+  border-radius: 50%;
+  border: 0.1875rem solid rgb(var(--lime-brand-color-flexible-turquoise)) !important;
+  border-top-color: transparent !important;
+  width: 1.25rem;
+  height: 1.25rem;
+  background-color: transparent !important;
+  padding: 0;
+}
+
 .interactive-feedback {
   position: absolute;
   inset: 0;
@@ -1869,14 +1545,14 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
 }
 .tabulator-row:not(.tabulator-calcs).tabulator-selectable:hover {
   background-color: var(--table-row-background-color--hover);
-  z-index: 2;
+  z-index: var(--limel-table-interactive-selectable-row-z-index-hover);
 }
 .tabulator-row:not(.tabulator-calcs).tabulator-selectable.active:before {
   content: "";
   display: inline-block;
   box-sizing: border-box;
   position: sticky;
-  z-index: 3;
+  z-index: calc(var(--limel-table-interactive-selectable-row-z-index-hover) + 1);
   inset: 0 0 auto 0;
   border: 0.2rem solid var(--lime-primary-color, var(--limel-theme-primary-color));
   border-radius: 1rem;
@@ -1958,105 +1634,12 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
   bottom: 0;
 }
 :host(.has-pagination-on-top):has(.tabulator-calcs-holder) .tabulator-tableholder {
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--limel-table-height-of-aggregations-row);
 }
 :host(.has-pagination-on-top) .select-all {
   top: 2.5rem;
 }
 
-/**
-* Note! This file is exported to `dist/scss/` in the published
-* node module, for consumer projects to import.
-* That means this file cannot import from any file that isn't
-* also exported, keeping the same relative path.
-*
-* Or, just don't import anything, that works too.
-*/
-/**
-* This can be used on a trigger element that opens a dropdown menu or a popover.
-*/
-/**
- * This mixin will mask out the content that is close to
- * the edges of a scrollable area.
- * - If the scrollable content has `overflow-y`, use `vertically`
- * as an argument for `$direction`.
- - If the scrollable content has `overflow-x`, use `horizontally`
- * as an argument for `$direction`.
- *
- * For the visual effect to work smoothly, we need to make sure that
- * the size of the fade-out edge effect is the same as the
- * internal paddings of the scrollable area. Otherwise, content of a
- * scrollable area that does not have a padding will fade out before
- * any scrolling has been done.
- * This is why this mixin already adds paddings, which automatically
- * default to the size of the fade-out effect.
- * This size defaults to `1rem`, but to override the size use
- * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
- * when `vertically` argument is set, and use
- * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
- * when `horizontally` argument is set.
- * Of course you can also programmatically increase and decrease the
- * size of these variables for each edge, based on the amount of
- * scrolling that has been done by the user. In this case, make sure
- * to add a custom padding where the mixin is used, to override
- * the paddings that are automatically added by the mixin in the
- * compiled CSS code.
- */
-/**
-* This mixin will add an animated underline to the bottom of an `a` elements.
-* Note that you may need to add `all: unset;` –depending on your use case–
-* before using this mixin.
-*/
-/**
-* This mixin creates a cross-browser font stack.
-* - `sans-serif` can be used for the UI of the components.
-* - `monospace` can be used for code.
-*
-* ⚠️ If we change the font stacks, we need to update
-* 1. the consumer documentation in `README.md`, and
-* 2. the CSS variables of `--kompendium-example-font-family`
-* in the `<style>` tag of `index.html`.
-*/
-/**
-* This mixin is a hack, using old CSS syntax
-* to enable you to truncate a piece of text,
-* after a certain number of lines.
-*/
-/**
-* This mixin will add a chessboard background pattern,
-* typically used to visualize transparency.
-*/
-/**
-* Make a container resizable by the user.
-* This is used in the documentations and examples
-* of some components, to demonstrate how the component
-* behaves in a resizable container.
-*/
-/**
- * Drag to reorder mixins
- */
-/**
- * The breakpoints below are used to create responsive designs
- * in Lime's products. Therefore, they are here to get distributed
- * to all components in other private repos, which rely on this `mixins`
- * file, to create consistent styles.
- *
- * :::important
- * In very rare cases you should used media queries!
- * Nowadays, there are many better ways of achieving responsive design
- * without media queries. For example, using CSS Grid, Flexbox, and their features.
- * :::
- */
-/**
-  * Media query mixins for responsive design based on screen width.
-  * Note that these mixins do not detect the device type!
-  */
-/*
-* This file is imported into every component!
-*
-* Nothing in this file may output any CSS
-* without being explicitly called by outside code.
-*/
 .lime-col-title__custom-component {
   width: 100%;
   display: flex;
@@ -2078,12 +1661,6 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
   flex-shrink: 0;
 }
 
-/*
-* This file is imported into every component!
-*
-* Nothing in this file may output any CSS
-* without being explicitly called by outside code.
-*/
 @keyframes detach-a-column-header {
   0% {
     transform: rotate(0deg);
@@ -2130,14 +1707,14 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
   margin-bottom: 0;
 }
 .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {
-  height: 1.5rem;
+  height: var(--limel-table-height-of-aggregations-row);
   background: transparent !important;
 }
 .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-calcs {
   cursor: default;
 }
 .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-cell {
-  height: 1.5rem !important;
+  height: var(--limel-table-height-of-aggregations-row) !important;
   padding-top: 0.25rem;
   padding-bottom: 0;
 }
@@ -2154,7 +1731,7 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
 
 .select-all {
   position: absolute;
-  z-index: 1;
+  z-index: var(--limel-table-row-selector-z-index);
   left: 0.375rem;
   top: 0.1875rem;
 }
@@ -2163,7 +1740,7 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
   position: sticky !important;
   left: 0;
   border-width: 0;
-  z-index: 1;
+  z-index: var(--limel-table-row-selector-z-index);
 }
 .limel-table--row-selector:before {
   content: "";
@@ -2199,4 +1776,135 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
 
 .has-selection .tabulator-calcs .tabulator-cell {
   color: var(--table-arrow-color--active);
+}
+
+/*
+* @prop --table-max-column-width: defines a maximum width for columns using standard size units, to prevent the table from growing too wide. Set to `auto` if you do not need this limitation. Defaults to `40rem`.
+*/
+:host(limel-table) {
+  --limel-table-interactive-selectable-row-z-index-hover: 2;
+  --limel-table-sorter-arrow-width: 0.5rem;
+  --limel-table-table-cell-padding: 0.5rem;
+  --limel-table-row-selector-z-index: 1;
+  --limel-table-height-of-aggregations-row: 1.5rem;
+  isolation: isolate;
+  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(
+      --lime-elevated-surface-background-color
+  );
+  --table-row-background-color--active: var(--mdc-theme-primary);
+  --table-arrow-color: var(--contrast-800);
+  --table-arrow-color--active: var(
+      --lime-primary-color,
+      var(--limel-theme-primary-color)
+  );
+  --table-text-color: var(--limel-theme-text-primary-on-background-color);
+  --limel-chip-size: 1.25rem;
+}
+
+#tabulator-container {
+  position: relative;
+}
+
+#tabulator-container,
+#tabulator-table {
+  background-color: transparent;
+  border: none;
+}
+
+.tabulator .tabulator-header {
+  color: var(--table-text-color);
+}
+.tabulator .tabulator-tableholder .tabulator-table {
+  color: var(--table-text-color);
+  background-color: transparent;
+}
+.tabulator .tabulator-header {
+  border-bottom: 0;
+  background-color: rgb(var(--table-header-background-color));
+}
+.tabulator .tabulator-header .tabulator-headers {
+  width: fit-content;
+}
+.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.tabulator-col-sorter-element:hover {
+  background-color: rgb(var(--table-header-background-color--hover));
+}
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
+  padding: 0 var(--limel-table-sorter-arrow-width) 0 0.25rem;
+}
+.tabulator .tabulator-header .tabulator-col-title-holder {
+  height: 1.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.tabulator .tabulator-header .tabulator-col-sorter {
+  order: 1;
+}
+.tabulator .tabulator-header .tabulator-col-title {
+  order: 2;
+  font-weight: 500;
+  padding-right: 0 !important;
+  line-height: 1.25rem;
+}
+
+.tabulator-row {
+  height: 2.25rem;
+}
+.tabulator-row .tabulator-cell {
+  border-right: transparent;
+  padding: var(--limel-table-table-cell-padding);
+  padding-left: calc(var(--limel-table-table-cell-padding) + var(--limel-table-sorter-arrow-width));
+  height: inherit;
+}
+.tabulator-row .tabulator-cell[style*="text-align: right;"] {
+  justify-content: flex-end;
+}
+.tabulator-row .tabulator-cell[style*="text-align: center;"] {
+  justify-content: center;
+}
+.tabulator-row .tabulator-col-resize-handle {
+  display: none;
+}
+
+.tabulator-col,
+.tabulator-cell {
+  max-width: var(--table-max-column-width, 40rem);
+}
+
+#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;
+}
+
+limel-chip {
+  transform: translateY(-0.15rem);
 }