@limetech/lime-elements 35.0.0-next.2 → 35.0.0-next.20

package/dist/collection/components/switch/switch.js

@@ -24,9 +24,9 @@ export class Switch {
      */
     this.value = false;
     this.fieldId = createRandomString();
-    this.onChange = (event) => {
+    this.handleClick = (event) => {
       event.stopPropagation();
-      this.change.emit(event.target.checked);
+      this.change.emit(!this.value);
     };
   }
   connectedCallback() {
@@ -48,25 +48,31 @@ export class Switch {
   }
   render() {
     return [
-      h("div", { class: {
+      h("button", { id: this.fieldId, class: {
           'mdc-switch': true,
-          'mdc-switch--disabled': this.disabled || this.readonly,
           'lime-switch--readonly': this.readonly,
-        } },
+          'mdc-switch--unselected': !this.value,
+          'mdc-switch--selected': this.value,
+        }, type: "button", role: "switch", "aria-checked": this.value, disabled: this.disabled || this.readonly, onClick: this.handleClick },
         h("div", { class: "mdc-switch__track" }),
-        h("div", { class: "mdc-switch__thumb-underlay" },
-          h("div", { class: "mdc-switch__thumb" },
-            h("input", { type: "checkbox", class: "mdc-switch__native-control", id: this.fieldId, role: "switch", onChange: this.onChange, disabled: this.disabled || this.readonly, checked: this.value })))),
+        h("div", { class: "mdc-switch__handle-track" },
+          h("div", { class: "mdc-switch__handle" },
+            h("div", { class: "mdc-switch__shadow" },
+              h("div", { class: "mdc-elevation-overlay" })),
+            h("div", { class: "mdc-switch__ripple" }),
+            h("div", { class: "mdc-switch__icons" },
+              h("svg", { class: "mdc-switch__icon mdc-switch__icon--on", viewBox: "0 0 24 24" },
+                h("path", { d: "M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" })),
+              h("svg", { class: "mdc-switch__icon mdc-switch__icon--off", viewBox: "0 0 24 24" },
+                h("path", { d: "M20 13H4v-2h16v2z" })))))),
       h("label", { class: `${this.disabled || this.readonly ? 'disabled' : ''}`, htmlFor: this.fieldId }, this.label),
     ];
   }
-  valueWatcher(newValue, oldValue) {
+  valueWatcher(newValue) {
     if (!this.mdcSwitch) {
       return;
     }
-    if (newValue !== oldValue) {
-      this.mdcSwitch.checked = newValue;
-    }
+    this.mdcSwitch.selected = newValue;
   }
   static get is() { return "limel-switch"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-bar/tab-bar.css

@@ -192,17 +192,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-.mdc-tab-indicator {
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 1;
-}
 .mdc-tab-indicator .mdc-tab-indicator__content--underline {
   border-color: #26a69a;
   /* @alternate */
@@ -221,6 +210,18 @@
   font-size: 34px;
 }
 
+.mdc-tab-indicator {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
 .mdc-tab-indicator__content {
   transform-origin: left;
   opacity: 0;
@@ -282,10 +283,46 @@
   text-transform: none;
   /* @alternate */
   text-transform: var(--mdc-typography-button-text-transform, none);
+  position: relative;
+}
+.mdc-tab .mdc-tab__text-label {
+  color: rgba(0, 0, 0, 0.6);
+}
+.mdc-tab .mdc-tab__icon {
+  color: rgba(0, 0, 0, 0.54);
+  fill: currentColor;
+}
+
+.mdc-tab__content {
+  position: relative;
+}
+
+.mdc-tab__icon {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+}
+
+.mdc-tab--active .mdc-tab__text-label {
+  color: #26a69a;
+  /* @alternate */
+  color: var(--mdc-theme-primary, #26a69a);
+}
+.mdc-tab--active .mdc-tab__icon {
+  color: #26a69a;
+  /* @alternate */
+  color: var(--mdc-theme-primary, #26a69a);
+  fill: currentColor;
+}
+
+.mdc-tab {
+  background: none;
+}
+
+.mdc-tab {
+  min-width: 90px;
   padding-right: 24px;
   padding-left: 24px;
-  min-width: 90px;
-  position: relative;
   display: flex;
   flex: 1 0 auto;
   justify-content: center;
@@ -295,20 +332,12 @@
   padding-bottom: 0;
   border: none;
   outline: none;
-  background: none;
   text-align: center;
   white-space: nowrap;
   cursor: pointer;
   -webkit-appearance: none;
   z-index: 1;
 }
-.mdc-tab .mdc-tab__text-label {
-  color: rgba(0, 0, 0, 0.6);
-}
-.mdc-tab .mdc-tab__icon {
-  color: rgba(0, 0, 0, 0.54);
-  fill: currentColor;
-}
 .mdc-tab::-moz-focus-inner {
   padding: 0;
   border: 0;
@@ -319,7 +348,6 @@
 }
 
 .mdc-tab__content {
-  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -336,9 +364,6 @@
 
 .mdc-tab__icon {
   transition: 150ms color linear;
-  width: 24px;
-  height: 24px;
-  font-size: 24px;
   z-index: 2;
 }
 
@@ -352,17 +377,6 @@
   padding-bottom: 4px;
 }
 
-.mdc-tab--active .mdc-tab__text-label {
-  color: #26a69a;
-  /* @alternate */
-  color: var(--mdc-theme-primary, #26a69a);
-}
-.mdc-tab--active .mdc-tab__icon {
-  color: #26a69a;
-  /* @alternate */
-  color: var(--mdc-theme-primary, #26a69a);
-  fill: currentColor;
-}
 .mdc-tab--active .mdc-tab__text-label,
 .mdc-tab--active .mdc-tab__icon {
   transition-delay: 100ms;
@@ -370,15 +384,21 @@
 
 .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon + .mdc-tab__text-label {
   /* @noflip */
+  /*rtl:ignore*/
   padding-left: 8px;
   /* @noflip */
+  /*rtl:ignore*/
   padding-right: 0;
 }
 [dir=rtl] .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon + .mdc-tab__text-label, .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon + .mdc-tab__text-label[dir=rtl] {
+  /*rtl:begin:ignore*/
   /* @noflip */
+  /*rtl:ignore*/
   padding-left: 0;
   /* @noflip */
+  /*rtl:ignore*/
   padding-right: 8px;
+  /*rtl:end:ignore*/
 }
 
 @keyframes mdc-ripple-fg-radius-in {
@@ -442,6 +462,7 @@
 .mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after {
   top: 0;
   /* @noflip */
+  /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
@@ -449,6 +470,7 @@
 .mdc-tab.mdc-ripple-upgraded--unbounded .mdc-tab__ripple::after {
   top: var(--mdc-ripple-top, 0);
   /* @noflip */
+  /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
 .mdc-tab.mdc-ripple-upgraded--foreground-activation .mdc-tab__ripple::after {
@@ -462,6 +484,7 @@
 .mdc-tab .mdc-tab__ripple::after {
   top: calc(50% - 100%);
   /* @noflip */
+  /*rtl:ignore*/
   left: calc(50% - 100%);
   width: 200%;
   height: 200%;
@@ -587,19 +610,10 @@
   flex: 1 0 auto;
 }
 
-.mdc-tab__icon {
-  margin-right: 0.5rem;
-}
-
 .mdc-tab-indicator .mdc-tab-indicator__content {
   border: none;
 }
 
-.mdc-tab--active .mdc-ripple-upgraded--background-focused:before {
-  background-color: transparent;
-  transition: background-color 1s ease;
-}
-
 .mdc-tab__ripple {
   box-sizing: border-box;
   border-radius: 0.625rem;
@@ -615,12 +629,15 @@
 .mdc-tab {
   border-radius: 0;
   letter-spacing: normal;
-}
-
-.mdc-tab {
+  padding-right: 1.25rem;
+  padding-left: 1.25rem;
+  min-width: 2.5rem;
   background-color: transparent;
   flex: 0 0 auto;
 }
+.mdc-tab:not(.mdc-tab--active) {
+  --badge-background-color: rgb(var(--contrast-600));
+}
 .mdc-tab:not(.mdc-tab--active):after {
   content: "";
   display: block;
@@ -660,4 +677,16 @@
 }
 .mdc-tab--active:after {
   right: -0.75rem;
+}
+.mdc-tab--active .mdc-ripple-upgraded--background-focused:before {
+  background-color: transparent;
+  transition: background-color 1s ease;
+}
+
+.mdc-tab__content {
+  gap: 0.375rem;
+}
+
+.mdc-tab__text-label {
+  padding-left: 0 !important;
 }

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

@@ -134,7 +134,7 @@ export function createCustomComponent(cell, column, value, pool) {
  * @param {HTMLElement} element the custom element
  * @param {object} props object of properties and event listeners
  */
-function setElementProperties(element, props) {
+export function setElementProperties(element, props) {
   const properties = pickBy(props, negate(isEventListener));
   Object.assign(element, properties);
   const listeners = pickBy(props, isEventListener);

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

@@ -0,0 +1,111 @@
+/**
+ * Contains a set of selected data objects with methods for adding and removing
+ * items to the selection by referring to them by their index/position.
+ * Maintains a memory of the last toggled item which can be used to select or
+ * deselect a range of items between the last toggled item and a given item.
+ */
+export class Selection {
+  /**
+   * Creates an instance of the Selection class.
+   * The provided function `getDataByIndex` is used to provide data for the
+   * selected items when selection is toggled by using the item index,
+   * which can be the row position in a table.
+   *
+   * @param {Function} getDataByIndex A function that returns the data at the given index
+   */
+  constructor(getDataByIndex) {
+    this.getDataByIndex = getDataByIndex;
+    this.toggleRange = (fromIndex, toIndex) => {
+      const select = !this.selectedItems.has(this.getDataByIndex(toIndex));
+      const lowerBound = Math.min(fromIndex, toIndex);
+      const upperBound = Math.max(fromIndex, toIndex);
+      const updatedIndexes = [];
+      const updatedItems = [];
+      for (let index = lowerBound; index <= upperBound; index++) {
+        const data = this.getDataByIndex(index);
+        if (!data) {
+          continue;
+        }
+        const isSelected = this.selectedItems.has(data);
+        if (isSelected === select) {
+          continue;
+        }
+        if (select) {
+          this.selectedItems.add(data);
+        }
+        else {
+          this.selectedItems.delete(data);
+        }
+        updatedIndexes.push(index);
+        updatedItems.push(data);
+      }
+      this.lastToggledIndex = toIndex;
+      return {
+        selected: select,
+        items: updatedItems,
+        indexes: updatedIndexes,
+      };
+    };
+    this.clear();
+  }
+  /**
+   * @returns {number} The size of the selection
+   */
+  get size() {
+    return this.selectedItems.size;
+  }
+  /**
+   * @returns {any[]} The selected items
+   */
+  get items() {
+    return Array.from(this.selectedItems);
+  }
+  /**
+   * @param {any[]} items The selected items
+   */
+  set items(items) {
+    this.selectedItems = new Set(items);
+    this.lastToggledIndex = -1;
+  }
+  /**
+   * Checks whether the given item exist in the selection
+   *
+   * @param {any} data The data to look up
+   * @returns {boolean} `true` if the given data exist in the selection, otherwise `false`
+   */
+  has(data) {
+    return this.selectedItems.has(data);
+  }
+  /**
+   * Toggles the item at the given index in the selection
+   *
+   * @param {number} index The index of the item to toggle
+   * @returns {SelectionChangeSet} The changes made to the selection
+   */
+  toggleSelection(index) {
+    return this.toggleRange(index, index);
+  }
+  /**
+   * Toggles the items from the last toggled index to the given index in the selection.
+   * The toggled items will be toggled as the item at the given index no matter
+   * their current state in the selection.
+   * Initially, when no last toggled index exist, this function behaves like
+   * `toggleSelection`.
+   *
+   * @param {number} index The index of the item to toggle
+   * @returns {SelectionChangeSet} The changes made to the selection
+   */
+  toggleSelectionFromLastIndex(index) {
+    if (this.lastToggledIndex < 0) {
+      return this.toggleSelection(index);
+    }
+    return this.toggleRange(this.lastToggledIndex, index);
+  }
+  /**
+   * Clears the current selection and resets last toggled index
+   */
+  clear() {
+    this.selectedItems = new Set();
+    this.lastToggledIndex = -1;
+  }
+}

package/dist/collection/components/table/table-selection.js

@@ -0,0 +1,125 @@
+import { setElementProperties } from './columns';
+import { Selection } from './selection';
+import { isEqual } from 'lodash-es';
+const LIMEL_CHECKBOX = 'limel-checkbox';
+/**
+ * Provides row selection to Tabulator with shift-click support for range selections
+ */
+export class TableSelection {
+  /**
+   * Creates an instance of the TableSelection class
+   *
+   * @param {Function} getTable Function that returns the Tabulator instance
+   * @param {ElementPool} pool The element pool used to cache the checkbox components
+   * @param {EventEmitter<object[]>} selectEvent The event emitter to use when checkboxes are toggled
+   */
+  constructor(getTable, pool, selectEvent) {
+    this.getTable = getTable;
+    this.pool = pool;
+    this.selectEvent = selectEvent;
+    /**
+     * Tabulator cell click handler that updates the selection for the clicked
+     * row and toggles the selection from the last clicked row if the shift key
+     * is pressed down.
+     *
+     * @param {PointerEvent} ev The pointer event
+     * @param {Tabulator.CellComponent} cell The clicked cell component
+     */
+    this.rowSelectorCellClick = (ev, cell) => {
+      ev.stopPropagation();
+      ev.preventDefault();
+      const clickedRow = cell.getRow();
+      const rowPosition = clickedRow.getPosition(true);
+      if (ev.shiftKey) {
+        this.updateRowSelectors(this.selection.toggleSelectionFromLastIndex(rowPosition));
+      }
+      else {
+        this.updateRowSelectors(this.selection.toggleSelection(rowPosition));
+      }
+      this.selectEvent.emit(this.selection.items);
+    };
+    this.updateRowSelectors = (changeSet) => {
+      changeSet.indexes
+        .map(this.getRowByIndex)
+        .forEach((row) => this.updateRowSelector(row, changeSet.selected));
+    };
+    this.updateRowSelector = (row, checked) => {
+      const cell = row.getCells()[0];
+      if (cell) {
+        const checkBox = cell.getElement().querySelector(LIMEL_CHECKBOX);
+        checkBox.checked = checked;
+      }
+    };
+    this.getActiveRows = () => {
+      const table = this.getTable();
+      if (!table) {
+        return [];
+      }
+      return table.getRows('active');
+    };
+    this.getRowByIndex = (index) => {
+      return this.getTable().getRowFromPosition(index, true);
+    };
+    this.selection = new Selection((index) => this.getRowByIndex(index).getData());
+  }
+  /**
+   * @returns {boolean} Returns `true` when the selection is non-empty, otherwise `false`
+   */
+  get hasSelection() {
+    return this.selection.size > 0;
+  }
+  /**
+   * Clears the selection
+   */
+  clear() {
+    this.selection.clear();
+  }
+  /**
+   * Sets the selected items
+   *
+   * @param {any[]} data The selected items
+   */
+  setSelection(data) {
+    if (isEqual(this.selection.items, data)) {
+      return;
+    }
+    this.selection.items = data;
+    const rows = this.getActiveRows();
+    rows.forEach((row) => this.updateRowSelector(row, this.selection.has(row.getData())));
+  }
+  /**
+   * Prepends a checkbox column used for row selection to the given column definitions
+   *
+   * @param {Tabulator.ColumnDefinition[]} columnDefinitions The column definition for the table
+   * @returns {Tabulator.ColumnDefinition[]} The column definitions with the checkbox column prepended to it
+   */
+  getColumnDefinitions(columnDefinitions) {
+    return [this.getRowSelectorColumnDefinition(), ...columnDefinitions];
+  }
+  getRowSelectorColumnDefinition() {
+    return {
+      title: '',
+      formatter: this.getRowSelectorFormatter(),
+      cellClick: this.rowSelectorCellClick,
+      headerClick: this.headerClick,
+      headerSort: false,
+      cssClass: 'limel-table--row-selector',
+      resizable: false,
+      htmlOutput: false,
+      clipboard: false,
+    };
+  }
+  headerClick(ev) {
+    ev.stopPropagation();
+  }
+  getRowSelectorFormatter() {
+    return (cell) => {
+      const element = this.pool.get(LIMEL_CHECKBOX);
+      setElementProperties(element, {
+        checked: this.selection.has(cell.getData()),
+      });
+      element.style.display = 'inline-block';
+      return element;
+    };
+  }
+}