@limetech/lime-elements 36.0.0-next.9 → 36.1.0-dev.1

package/dist/collection/components/tab-panel/tab-panel.js

@@ -1,4 +1,4 @@
-import { Component, Element, h, Prop, Event, Host, Watch, } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 import { dispatchResizeEvent } from '../../util/dispatch-resize-event';
 /**
  * The `limel-tab-panel` component uses the `limel-tab-bar` component together
@@ -21,11 +21,8 @@ import { dispatchResizeEvent } from '../../util/dispatch-resize-event';
  */
 export class TabPanel {
   constructor() {
-    /**
-     * The tabs to display in the panel
-     */
-    this.tabs = [];
     this.slotElements = [];
+    this.tabs = [];
     this.handleChangeTabs = this.handleChangeTabs.bind(this);
     this.setSlotElements = this.setSlotElements.bind(this);
     this.setTabStatus = this.setTabStatus.bind(this);
@@ -54,11 +51,7 @@ export class TabPanel {
     this.tabs.forEach(this.setTabStatus);
   }
   render() {
-    return (h(Host, { onChangeTab: this.handleChangeTabs },
-      h("div", { class: "tab-panel" },
-        h("limel-tab-bar", { tabs: this.tabs }),
-        h("div", { class: "tab-content" },
-          h("slot", null)))));
+    return (h(Host, { onChangeTab: this.handleChangeTabs }, h("div", { class: "tab-panel" }, h("limel-tab-bar", { tabs: this.tabs }), h("div", { class: "tab-content" }, h("slot", null)))));
   }
   setSlotElements() {
     const slot = this.getSlot();
@@ -101,59 +94,69 @@ export class TabPanel {
   }
   static get is() { return "limel-tab-panel"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["tab-panel.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["tab-panel.css"]
-  }; }
-  static get properties() { return {
-    "tabs": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Tab[]",
-        "resolved": "Tab[]",
-        "references": {
-          "Tab": {
-            "location": "import",
-            "path": "../tab-bar/tab.types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["tab-panel.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tab-panel.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "tabs": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Tab[]",
+          "resolved": "Tab[]",
+          "references": {
+            "Tab": {
+              "location": "import",
+              "path": "../tab-bar/tab.types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The tabs to display in the panel"
-      },
-      "defaultValue": "[]"
-    }
-  }; }
-  static get events() { return [{
-      "method": "changeTab",
-      "name": "changeTab",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when a tab has been changed"
-      },
-      "complexType": {
-        "original": "Tab",
-        "resolved": "Tab",
-        "references": {
-          "Tab": {
-            "location": "import",
-            "path": "../tab-bar/tab.types"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The tabs to display in the panel"
+        },
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "changeTab",
+        "name": "changeTab",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a tab has been changed"
+        },
+        "complexType": {
+          "original": "Tab",
+          "resolved": "Tab",
+          "references": {
+            "Tab": {
+              "location": "import",
+              "path": "../tab-bar/tab.types"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "tabs",
-      "methodName": "tabsChanged"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "tabs",
+        "methodName": "tabsChanged"
+      }];
+  }
 }

package/dist/collection/components/table/columns.js

@@ -17,6 +17,7 @@ export class ColumnDefinitionFactory {
       title: column.title,
       field: column.field,
       hozAlign: column.horizontalAlign,
+      headerSort: column.headerSort,
     };
     if (column.headerComponent) {
       definition.titleFormatter = formatHeader(column);

package/dist/collection/components/table/layout.js

@@ -0,0 +1,8 @@
+export function mapLayout(layout) {
+  const layouts = {
+    stretchLastColumn: 'fitDataStretch',
+    stretchColumns: 'fitColumns',
+    lowDensity: 'fitData',
+  };
+  return layouts[layout] || 'fitDataFill';
+}

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

@@ -935,6 +935,9 @@ 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 {
   display: block;
   --table-header-background-color: var(--contrast-500);
@@ -1010,9 +1013,20 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
   background-color: rgb(var(--table-header-background-color--hover));
 }
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
+  padding-right: 0.5rem;
+}
+.tabulator .tabulator-header .tabulator-col-title-holder {
+  display: flex;
+  gap: 0.25rem;
+}
+.tabulator .tabulator-header .tabulator-col-sorter {
+  order: 1;
+}
 .tabulator .tabulator-header .tabulator-col-title {
+  order: 2;
   font-weight: 500;
-  padding-left: 0.125rem;
+  padding-right: 0 !important;
   line-height: 1.25rem;
 }
 
@@ -1034,6 +1048,7 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 .tabulator-row .tabulator-cell {
   border-right: transparent;
   padding: 0.5rem;
+  padding-left: 1rem;
   display: inline-flex;
   align-items: center;
 }
@@ -1046,7 +1061,7 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 
 .tabulator-col,
 .tabulator-cell {
-  max-width: 37.5rem;
+  max-width: var(--table-max-column-width, 40rem);
   font-size: 0.8125rem;
 }
 
@@ -1080,62 +1095,67 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
  * without being explicitly called by outside code.
  */
 .tabulator-col-sorter {
-  right: 1rem !important;
-}
-
-.tabulator-arrow {
-  position: absolute;
-  transition: border 0.2s ease;
-  top: 0.25rem;
+  transition: opacity 0.2s ease;
+  right: 0 !important;
+  position: relative !important;
+  justify-content: center;
   cursor: pointer;
 }
-[aria-sort=none] .tabulator-arrow {
-  border-bottom-color: rgb(var(--table-arrow-color)) !important;
-}
-[aria-sort=desc] .tabulator-arrow {
-  border-top-color: var(--table-arrow-color--active) !important;
-}
-[aria-sort=asc] .tabulator-arrow {
-  border-bottom-color: var(--table-arrow-color--active) !important;
+[aria-sort=none] .tabulator-col-sorter {
+  opacity: 0;
 }
-[aria-sort=desc] .tabulator-arrow:after, [aria-sort=asc] .tabulator-arrow:after {
-  background-color: var(--table-arrow-color--active);
+[aria-sort=desc] .tabulator-col-sorter, [aria-sort=asc] .tabulator-col-sorter {
+  opacity: 1;
 }
-.tabulator-arrow:before, .tabulator-arrow:after {
-  display: block;
-  content: "";
+[aria-sort=desc] .tabulator-col-sorter:before, [aria-sort=asc] .tabulator-col-sorter:before {
   position: absolute;
-  bottom: 0;
-}
-.tabulator-arrow:before {
-  background-color: rgb(var(--table-header-background-color));
-  width: 0.5rem;
-  height: 0.5rem;
-  transform: rotate(45deg);
-  left: -0.25rem;
-  top: 0.25rem;
+  content: "";
+  width: 0.125rem;
+  height: 0.4rem;
+  background-color: var(--table-arrow-color--active);
 }
-.tabulator-col.tabulator-sortable:hover .tabulator-arrow:before {
-  background-color: rgb(var(--table-header-background-color--hover));
+
+.tabulator-sortable[aria-sort=desc]:hover .tabulator-col-sorter, .tabulator-sortable[aria-sort=asc]:hover .tabulator-col-sorter {
+  opacity: 1;
+  animation: indicate-sortable-sorted-column 0.5s ease;
 }
-.tabulator-arrow:after {
-  width: 0.125rem;
-  background-color: rgb(var(--table-arrow-color));
-  height: 0.5625rem;
-  top: 0.125rem;
-  left: -0.0625rem;
+.tabulator-sortable[aria-sort=none]:hover .tabulator-col-sorter {
+  opacity: 1;
 }
-[aria-sort=desc] .tabulator-arrow {
-  top: 0.625rem;
+.tabulator-sortable[aria-sort=none]:hover .tabulator-col-sorter .tabulator-arrow {
+  animation: indicate-sortable-unsorted-column 2s ease forwards;
 }
-[aria-sort=desc] .tabulator-arrow:before {
-  top: -0.75rem;
+
+.tabulator-arrow {
+  transition: border 0.2s ease;
+  border-left: 0.25rem solid transparent !important;
+  border-right: 0.25rem solid transparent !important;
+}
+.tabulator#tabulator-table .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-arrow {
+  height: 0.75rem;
+  border-top-width: 0.25rem;
+  border-top-style: solid;
+  border-top-color: rgb(var(--table-arrow-color));
+  border-bottom-width: 0.25rem;
+  border-bottom-style: solid;
+  border-bottom-color: rgb(var(--table-arrow-color));
+}
+.tabulator#tabulator-table .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=desc] .tabulator-arrow {
+  height: 0;
+  transform: translate3d(0, 0.2rem, 0);
+  border-top-width: 0.25rem;
+  border-bottom-width: 0;
+  border-top-color: var(--table-arrow-color--active);
 }
-[aria-sort=desc] .tabulator-arrow:after {
-  top: -0.6875rem;
+.tabulator#tabulator-table .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=asc] .tabulator-arrow {
+  height: 0;
+  transform: translate3d(0, -0.2rem, 0);
+  border-top-width: 0;
+  border-bottom-width: 0.25rem;
+  border-bottom-color: var(--table-arrow-color--active);
 }
 
-@keyframes indicate-sortable-column {
+@keyframes indicate-sortable-sorted-column {
   0%, 100% {
     transform: translate3d(0, 0, 0);
   }
@@ -1146,10 +1166,27 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
     transform: translate3d(0, 0.0875rem, 0);
   }
 }
-.tabulator-col.tabulator-sortable:hover .tabulator-arrow {
-  animation: indicate-sortable-column 0.5s ease;
+@keyframes indicate-sortable-unsorted-column {
+  0%, 15%, 45%, 75% {
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+    transform: translate3d(0, 0, 0);
+  }
+  30% {
+    border-top-color: transparent;
+    border-bottom-color: var(--table-arrow-color--active);
+    transform: translate3d(0, -0.3125rem, 0);
+  }
+  60% {
+    border-top-color: var(--table-arrow-color--active);
+    border-bottom-color: transparent;
+    transform: translate3d(0, 0.3125rem, 0);
+  }
+  100% {
+    border-top-color: rgb(var(--table-arrow-color));
+    border-bottom-color: rgb(var(--table-arrow-color));
+  }
 }
-
 /*
  * This file is imported into every component!
  *
@@ -1307,9 +1344,6 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 :host(.has-low-density) .tabulator-header {
   border-radius: 0.375rem;
 }
-:host(.has-low-density) .tabulator-header .tabulator-col-content {
-  padding-left: 0.5rem;
-}
 :host(.has-low-density) .tabulator-footer {
   border-radius: 0.5rem;
 }
@@ -1327,8 +1361,6 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 }
 :host(.has-low-density) .tabulator-row:not(.tabulator-calcs-bottom) .tabulator-cell {
   height: 2.75rem !important;
-  padding-left: 0.75rem;
-  padding-right: 0.5rem;
 }
 :host(.has-low-density) .tabulator-row:not(.tabulator-calcs-bottom) .tabulator-cell:first-child {
   border-radius: 0.5rem 0 0 0.5rem;
@@ -1373,6 +1405,7 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   display: flex;
   align-items: center;
   margin-right: 1.25rem;
+  gap: 0.25rem;
 }
 
 .title-component-text {
@@ -1465,12 +1498,6 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   align-items: center;
   justify-content: center;
 }
-.select-all limel-checkbox {
-  transform: translate(-0.25rem, 0);
-}
-:host(.has-low-density) .select-all limel-checkbox {
-  transform: translate(-0.15rem, 0);
-}
 
 .limel-table--row-selector {
   position: sticky !important;
@@ -1478,6 +1505,8 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   border-width: 0;
   justify-content: center;
   z-index: 1;
+  padding-right: 0 !important;
+  padding-left: 0 !important;
 }
 .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));
@@ -1496,7 +1525,6 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   transition: opacity 0.2s ease;
   align-self: center;
   opacity: 0.3;
-  transform: translate(-0.25rem, 0);
 }
 .tabulator-row:hover .limel-table--row-selector limel-checkbox {
   opacity: 1;