@sme.up/ketchup 5.0.0 → 5.1.1

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

@@ -2,7 +2,7 @@ import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, W
 import { FixedCellsClasses, FixedCellsCSSVarsBase, GroupLabelDisplayMode, LoadMoreMode, PaginatorPos, ShowGrid, SortMode, TotalMode, TotalLabel, KupDataTableProps, fieldColumn, iconColumn, keyColumn, SelectionMode, } from './kup-data-table-declarations';
 import { getColumnByName } from '../../utils/cell-utils';
 import { calcTotals, normalizeRows, filterRows, groupRows, paginateRows, sortRows, } from './kup-data-table-helper';
-import { numberToFormattedStringNumber, identify, deepEqual, getProps, setProps, } from '../../utils/utils';
+import { numberToFormattedStringNumber, identify, getProps, setProps, } from '../../utils/utils';
 import { ItemsDisplayMode, } from '../kup-list/kup-list-declarations';
 import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { KupDataTableState } from './kup-data-table-state';
@@ -265,6 +265,7 @@ export class KupDataTable {
     this.openedTotalMenu = null;
     this.openedCustomSettings = false;
     this.fontsize = 'medium';
+    this.initialized = false;
     this.rowsLength = 0;
     this.paginatedRowsLength = 0;
     /**
@@ -379,8 +380,6 @@ export class KupDataTable {
         this.pageSelected = state.pageSelected;
         this.sortableColumnsMutateData =
           state.sortableColumnsMutateData;
-        this.selectRow = state.selectRow;
-        this.selectRowsById = state.selectRowsById;
         this.dragEnabled = state.dragEnabled;
         this.dropEnabled = state.dropEnabled;
         this.showFooter = state.showFooter;
@@ -391,116 +390,116 @@ export class KupDataTable {
   persistState() {
     if (this.store && this.stateId) {
       let somethingChanged = false;
-      if (!deepEqual(this.state.filters, this.filters)) {
+      if (!this.kupManager.objects.deepEqual(this.state.filters, this.filters)) {
         this.state.filters = Object.assign({}, this.filters);
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.groups, this.groups)) {
+      if (!this.kupManager.objects.deepEqual(this.state.groups, this.groups)) {
         this.state.groups = [...this.groups];
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.sort, this.sort)) {
+      if (!this.kupManager.objects.deepEqual(this.state.sort, this.sort)) {
         this.state.sort = [...this.sort];
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.expandGroups, this.expandGroups)) {
+      if (!this.kupManager.objects.deepEqual(this.state.expandGroups, this.expandGroups)) {
         this.state.expandGroups = this.expandGroups;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.groupLabelDisplay, this.groupLabelDisplay)) {
+      if (!this.kupManager.objects.deepEqual(this.state.groupLabelDisplay, this.groupLabelDisplay)) {
         this.state.groupLabelDisplay = this.groupLabelDisplay;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.density, this.density)) {
+      if (!this.kupManager.objects.deepEqual(this.state.density, this.density)) {
         this.state.density = this.density;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.enableExtraColumns, this.enableExtraColumns)) {
+      if (!this.kupManager.objects.deepEqual(this.state.enableExtraColumns, this.enableExtraColumns)) {
         this.state.enableExtraColumns = this.enableExtraColumns;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.enableSortableColumns, this.enableSortableColumns)) {
+      if (!this.kupManager.objects.deepEqual(this.state.enableSortableColumns, this.enableSortableColumns)) {
         this.state.enableSortableColumns = this.enableSortableColumns;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.forceOneLine, this.forceOneLine)) {
+      if (!this.kupManager.objects.deepEqual(this.state.forceOneLine, this.forceOneLine)) {
         this.state.forceOneLine = this.forceOneLine;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.globalFilter, this.globalFilter)) {
+      if (!this.kupManager.objects.deepEqual(this.state.globalFilter, this.globalFilter)) {
         this.state.globalFilter = this.globalFilter;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
+      if (!this.kupManager.objects.deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
         this.state.globalFilterValue = this.globalFilterValue;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.headerIsPersistent, this.headerIsPersistent)) {
+      if (!this.kupManager.objects.deepEqual(this.state.headerIsPersistent, this.headerIsPersistent)) {
         this.state.headerIsPersistent = this.headerIsPersistent;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.lazyLoadRows, this.lazyLoadRows)) {
+      if (!this.kupManager.objects.deepEqual(this.state.lazyLoadRows, this.lazyLoadRows)) {
         this.state.lazyLoadRows = this.lazyLoadRows;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.loadMoreLimit, this.loadMoreLimit)) {
+      if (!this.kupManager.objects.deepEqual(this.state.loadMoreLimit, this.loadMoreLimit)) {
         this.state.loadMoreLimit = this.loadMoreLimit;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.selection, this.selection)) {
+      if (!this.kupManager.objects.deepEqual(this.state.selection, this.selection)) {
         this.state.selection = this.selection;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.rowsPerPage, this.currentRowsPerPage)) {
+      if (!this.kupManager.objects.deepEqual(this.state.rowsPerPage, this.currentRowsPerPage)) {
         this.state.rowsPerPage = this.currentRowsPerPage;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.showFilters, this.showFilters)) {
+      if (!this.kupManager.objects.deepEqual(this.state.showFilters, this.showFilters)) {
         this.state.showFilters = this.showFilters;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.showGroups, this.showGroups)) {
+      if (!this.kupManager.objects.deepEqual(this.state.showGroups, this.showGroups)) {
         this.state.showGroups = this.showGroups;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.showHeader, this.showHeader)) {
+      if (!this.kupManager.objects.deepEqual(this.state.showHeader, this.showHeader)) {
         this.state.showHeader = this.showHeader;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.showLoadMore, this.showLoadMore)) {
+      if (!this.kupManager.objects.deepEqual(this.state.showLoadMore, this.showLoadMore)) {
         this.state.showLoadMore = this.showLoadMore;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.sortEnabled, this.sortEnabled)) {
+      if (!this.kupManager.objects.deepEqual(this.state.sortEnabled, this.sortEnabled)) {
         this.state.sortEnabled = this.sortEnabled;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.sortableColumnsMutateData, this.sortableColumnsMutateData)) {
+      if (!this.kupManager.objects.deepEqual(this.state.sortableColumnsMutateData, this.sortableColumnsMutateData)) {
         this.state.sortableColumnsMutateData =
           this.sortableColumnsMutateData;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.pageSelected, this.currentPage)) {
+      if (!this.kupManager.objects.deepEqual(this.state.pageSelected, this.currentPage)) {
         this.state.pageSelected = this.currentPage;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.dragEnabled, this.dragEnabled)) {
+      if (!this.kupManager.objects.deepEqual(this.state.dragEnabled, this.dragEnabled)) {
         this.state.dragEnabled = this.dragEnabled;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.dropEnabled, this.dropEnabled)) {
+      if (!this.kupManager.objects.deepEqual(this.state.dropEnabled, this.dropEnabled)) {
         this.state.dropEnabled = this.dropEnabled;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.showFooter, this.showFooter)) {
+      if (!this.kupManager.objects.deepEqual(this.state.showFooter, this.showFooter)) {
         this.state.showFooter = this.showFooter;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.totals, this.totals)) {
+      if (!this.kupManager.objects.deepEqual(this.state.totals, this.totals)) {
         this.state.totals = Object.assign({}, this.totals);
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.selectRowsById, this.selectedRows.reduce((accumulator, row, currentIndex) => {
+      if (!this.kupManager.objects.deepEqual(this.state.selectRowsById, this.selectedRows.reduce((accumulator, row, currentIndex) => {
         const prefix = currentIndex > 0 ? ';' : '';
         return accumulator + prefix + row.id;
       }, ''))) {
@@ -566,7 +565,9 @@ export class KupDataTable {
     }
   }
   recalculateData() {
-    this.calculateData();
+    if (this.initialized) {
+      this.calculateData();
+    }
   }
   /**
    * Closes any opened column menu.
@@ -605,14 +606,18 @@ export class KupDataTable {
   async getProps(descriptions) {
     return getProps(this, KupDataTableProps, descriptions);
   }
+  /**
+   * This method will get the selected rows of the component.
+   */
+  async getSelectedRows() {
+    return this.selectedRows;
+  }
   /**
    * Hides the given column.
    * @param {KupDataColumn} column - Column to hide.
    */
   async hideColumn(column) {
-    this.kupManager.data.datasetOperations.column.hide(this.data, [
-      column.name,
-    ]);
+    this.kupManager.data.column.hide(this.data, [column.name]);
     this.kupColumnRemove.emit({
       comp: this,
       id: this.rootElement.id,
@@ -627,7 +632,7 @@ export class KupDataTable {
    * @returns {string|KupDataColumn} Returns the new column created or a string containing the error message if something went wrong.
    */
   async newColumn(type, options) {
-    const result = this.kupManager.data.datasetOperations.column.new(this.data, type, options);
+    const result = this.kupManager.data.column.new(this.data, type, options);
     const error = !!(typeof result === 'string' || result instanceof String);
     if (!error) {
       this.refresh();
@@ -729,15 +734,20 @@ export class KupDataTable {
   }
   /**
    * This method will set the selected rows of the component.
-   * @param {string} rowsById - String containing the ids separated by ";".
+   * @param {string|number[]} rowsIdentifiers - Array of ids (dataset) or indexes (rendered rows).
    * @param {boolean} emitEvent - The event will always be emitted unless emitEvent is set to false.
    */
-  async setSelectedRows(rowsById, emitEvent) {
+  async setSelectedRows(rowsIdentifiers, emitEvent) {
     this.selectedRows = [];
-    if (rowsById) {
-      this.selectedRows = this.renderedRows.filter((r) => {
-        return rowsById.split(';').indexOf(r.id) >= 0;
-      });
+    for (let index = 0; index < rowsIdentifiers.length; index++) {
+      const id = rowsIdentifiers[index];
+      if (typeof id === 'number') {
+        this.selectedRows.push(this.renderedRows[id]);
+      }
+      else {
+        const row = this.renderedRows.find((row) => row.id === id);
+        this.selectedRows.push(row);
+      }
     }
     if (emitEvent !== false) {
       this.kupRowSelected.emit({
@@ -952,7 +962,7 @@ export class KupDataTable {
     if (column) {
       this.filters = {};
     }
-    return this.kupManager.data.datasetOperations.transpose(this.data, column);
+    return this.kupManager.data.transpose(this.data, column);
   }
   updateStickyHeaderSize() {
     const navBar = document.querySelectorAll('.header')[0];
@@ -1250,9 +1260,13 @@ export class KupDataTable {
     }
     if (this.dropEnabled) {
       const dataCb = () => {
-        const receivingDetails = this.getEventDetails([
-          this.rootElement.shadowRoot.querySelector('td:hover'),
-        ]);
+        const cell = this.rootElement.shadowRoot.querySelector('td:hover');
+        if (!cell) {
+          this.kupManager.debug.logMessage(this, "Couldn't find cell hovered to retrieve dropzone informations!", KupDebugCategory.WARNING);
+          return;
+        }
+        const path = this.getEventPath(cell);
+        const receivingDetails = this.getEventDetails(path);
         return {
           cell: receivingDetails.cell,
           column: receivingDetails.column,
@@ -1386,6 +1400,7 @@ export class KupDataTable {
       CSS.supports('position', '-webkit-sticky') ||
         !!(window && window.safari);
     this.calculateData();
+    this.initialized = true;
   }
   componentWillRender() {
     this.kupManager.debug.logRender(this, false);
@@ -1425,29 +1440,14 @@ export class KupDataTable {
     this.didLoadObservers();
     this.didLoadEventHandling();
     this.didLoadInteractables();
-    if (this.selectRowsById) {
-      this.setSelectedRows(this.selectRowsById);
-    }
-    else if (this.selectRow && this.selectRow > 0) {
-      if (this.selectRow <= this.renderedRows.length) {
-        this.selectedRows = [];
-        this.selectedRows.push(this.renderedRows[this.selectRow - 1]);
-        this.kupAutoRowSelect.emit({
-          comp: this,
-          id: this.rootElement.id,
-          selectedRow: this.selectedRows[0],
-        });
-      }
-    }
     this.lazyLoadCells = true;
     this.kupDidLoad.emit({ comp: this, id: this.rootElement.id });
     this.kupManager.resize.observe(this.rootElement);
     this.kupManager.debug.logLoad(this, true);
   }
   //======== Utility methods ========
-  getEventPath(e) {
+  getEventPath(currentEl) {
     let path = [];
-    let currentEl = e.target;
     while (currentEl &&
       currentEl !== this.rootElement &&
       currentEl !== document.body) {
@@ -1737,7 +1737,7 @@ export class KupDataTable {
     };
   }
   clickHandler(e) {
-    const details = this.getEventDetails(this.getEventPath(e));
+    const details = this.getEventDetails(this.getEventPath(e.target));
     if (details.area === 'header') {
       if (details.th && details.column) {
         if (details.filterRemove) {
@@ -1776,7 +1776,7 @@ export class KupDataTable {
     return details;
   }
   contextMenuHandler(e) {
-    const details = this.getEventDetails(this.getEventPath(e));
+    const details = this.getEventDetails(this.getEventPath(e.target));
     if (details.area === 'header') {
       if (details.th && details.column) {
         this.openColumnMenu(details.column.name);
@@ -1806,7 +1806,7 @@ export class KupDataTable {
     return details;
   }
   dblClickHandler(e) {
-    const details = this.getEventDetails(this.getEventPath(e));
+    const details = this.getEventDetails(this.getEventPath(e.target));
     if (details.area === 'body') {
       if (this.selection == SelectionMode.MULTIPLE) {
         this.resetSelectedRows();
@@ -2577,7 +2577,7 @@ export class KupDataTable {
       // must do this
       // otherwise does not fire the watcher
       const totalsCopy = Object.assign({}, this.totals);
-      const value = event.detail.selected.value;
+      const value = event.detail.selected.id;
       if (value === TotalLabel.CANC) {
         if (this.totals && this.totals[column.name]) {
           delete totalsCopy[column.name];
@@ -2681,47 +2681,39 @@ export class KupDataTable {
       if (this.isOpenedTotalMenuForColumn(column.name)) {
         const listData = [
           {
-            text: translation[TotalLabel.COUNT],
-            value: TotalMode.COUNT,
-            selected: false,
+            id: TotalMode.COUNT,
+            value: translation[TotalLabel.COUNT],
           },
           {
-            text: translation[TotalLabel.DISTINCT],
-            value: TotalMode.DISTINCT,
-            selected: false,
+            id: TotalMode.DISTINCT,
+            value: translation[TotalLabel.DISTINCT],
           },
         ];
         if (this.kupManager.objects.isNumber(column.obj)) {
           // TODO Move these objects in declarations
           listData.push({
-            text: translation[TotalLabel.SUM],
-            value: TotalMode.SUM,
-            selected: false,
+            id: TotalMode.SUM,
             separator: true,
+            value: translation[TotalLabel.SUM],
           }, {
-            text: translation[TotalLabel.AVERAGE],
-            value: TotalMode.AVERAGE,
-            selected: false,
+            id: TotalMode.AVERAGE,
+            value: translation[TotalLabel.AVERAGE],
           }, {
-            text: translation[TotalLabel.MIN],
-            value: TotalMode.MIN,
-            selected: false,
+            id: TotalMode.MIN,
+            value: translation[TotalLabel.MIN],
           }, {
-            text: translation[TotalLabel.MAX],
-            value: TotalMode.MAX,
-            selected: false,
+            id: TotalMode.MAX,
+            value: translation[TotalLabel.MAX],
           });
         }
         else if (this.kupManager.objects.isDate(column.obj)) {
           listData.push({
-            text: translation[TotalLabel.MIN],
-            value: TotalMode.MIN,
-            selected: false,
+            id: TotalMode.MIN,
             separator: true,
+            value: translation[TotalLabel.MIN],
           }, {
-            text: translation[TotalLabel.MAX],
-            value: TotalMode.MAX,
-            selected: false,
+            id: TotalMode.MAX,
+            value: translation[TotalLabel.MAX],
           });
         }
         if (this.totals) {
@@ -2729,10 +2721,9 @@ export class KupDataTable {
           if (selectedItem) {
             selectedItem.selected = true;
             listData.push({
-              text: translation[TotalLabel.CANC],
-              value: TotalLabel.CANC,
-              selected: false,
+              id: TotalLabel.CANC,
               separator: true,
+              value: translation[TotalLabel.CANC],
             });
           }
         }
@@ -3196,42 +3187,42 @@ export class KupDataTable {
   createListData(codes, icons, selectedCode) {
     const listItems = [];
     for (let i = 0; i < codes.length; i++) {
-      let text = null;
+      let value = null;
       switch (codes[i]) {
         //This whole customization panel thingy must be purged, for now -- it's ugly
         case 'big':
-          text = KupLanguageFontsize.BIG;
+          value = KupLanguageFontsize.BIG;
           break;
         case 'Col':
-          text = KupLanguageGrid.COLUMN;
+          value = KupLanguageGrid.COLUMN;
           break;
         case 'Complete':
-          text = KupLanguageGrid.COMPLETE;
+          value = KupLanguageGrid.COMPLETE;
           break;
         case 'dense':
-          text = KupLanguageDensity.DENSE;
+          value = KupLanguageDensity.DENSE;
           break;
         case 'medium':
-          text = KupLanguageDensity.MEDIUM;
+          value = KupLanguageDensity.MEDIUM;
           break;
         case 'None':
-          text = KupLanguageGrid.NONE;
+          value = KupLanguageGrid.NONE;
           break;
         case 'small':
-          text = KupLanguageFontsize.SMALL;
+          value = KupLanguageFontsize.SMALL;
           break;
         case 'Row':
-          text = KupLanguageGrid.ROW;
+          value = KupLanguageGrid.ROW;
           break;
         case 'wide':
-          text = KupLanguageDensity.WIDE;
+          value = KupLanguageDensity.WIDE;
           break;
       }
       listItems[i] = {
-        text: this.kupManager.language.translate(text),
-        value: codes[i],
-        selected: selectedCode == codes[i],
         icon: icons[i],
+        id: codes[i],
+        selected: selectedCode == codes[i],
+        value: this.kupManager.language.translate(value),
       };
     }
     return listItems;
@@ -4299,40 +4290,6 @@ export class KupDataTable {
       "reflect": false,
       "defaultValue": "SelectionMode.SINGLE"
     },
-    "selectRow": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Selects the row at the specified rendered rows prosition (base 1)."
-      },
-      "attribute": "select-row",
-      "reflect": false
-    },
-    "selectRowsById": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Semicolon separated rows id to select."
-      },
-      "attribute": "select-rows-by-id",
-      "reflect": false
-    },
     "showCustomization": {
       "type": "boolean",
       "mutable": false,
@@ -4744,26 +4701,6 @@ export class KupDataTable {
           }
         }
       }
-    }, {
-      "method": "kupAutoRowSelect",
-      "name": "kup-datatable-autorowselect",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "When a row is auto selected via selectRow prop"
-      },
-      "complexType": {
-        "original": "KupDatatableAutoRowSelectEventPayload",
-        "resolved": "KupDatatableAutoRowSelectEventPayload",
-        "references": {
-          "KupDatatableAutoRowSelectEventPayload": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
-          }
-        }
-      }
     }, {
       "method": "kupRowSelected",
       "name": "kup-datatable-rowselected",
@@ -5026,6 +4963,29 @@ export class KupDataTable {
           }]
       }
     },
+    "getSelectedRows": {
+      "complexType": {
+        "signature": "() => Promise<Array<KupDataTableRow>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "KupDataTableRow": {
+            "location": "import",
+            "path": "./kup-data-table-declarations"
+          },
+          "Array": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<KupDataTableRow[]>"
+      },
+      "docs": {
+        "text": "This method will get the selected rows of the component.",
+        "tags": []
+      }
+    },
     "hideColumn": {
       "complexType": {
         "signature": "(column: KupDataColumn) => Promise<void>",
@@ -5237,13 +5197,13 @@ export class KupDataTable {
     },
     "setSelectedRows": {
       "complexType": {
-        "signature": "(rowsById: string, emitEvent?: boolean) => Promise<void>",
+        "signature": "(rowsIdentifiers: string[] | number[], emitEvent?: boolean) => Promise<void>",
         "parameters": [{
             "tags": [{
                 "name": "param",
-                "text": "rowsById - String containing the ids separated by \";\"."
+                "text": "rowsIdentifiers - Array of ids (dataset) or indexes (rendered rows)."
               }],
-            "text": "- String containing the ids separated by \";\"."
+            "text": "- Array of ids (dataset) or indexes (rendered rows)."
           }, {
             "tags": [{
                 "name": "param",
@@ -5262,7 +5222,7 @@ export class KupDataTable {
         "text": "This method will set the selected rows of the component.",
         "tags": [{
             "name": "param",
-            "text": "rowsById - String containing the ids separated by \";\"."
+            "text": "rowsIdentifiers - Array of ids (dataset) or indexes (rendered rows)."
           }, {
             "name": "param",
             "text": "emitEvent - The event will always be emitted unless emitEvent is set to false."

package/dist/collection/components/kup-drawer/kup-drawer.js

@@ -125,7 +125,10 @@ export class KupDrawer {
   render() {
     return (h(Host, { "kup-opened": this.opened },
       h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
-      h("div", { class: "backdrop", onPointerDown: () => this.close() }),
+      h("div", { class: "backdrop", onPointerDown: (e) => {
+          e.stopPropagation();
+          this.close();
+        } }),
       h("div", { id: componentWrapperId },
         h("div", { class: drawerClass }, this.content()))));
   }

package/dist/collection/components/kup-dropdown-button/kup-dropdown-button.css

@@ -39,12 +39,12 @@
 .f-button.dropdown-button__dropdown-action .button.button--disabled {
   box-shadow: none;
 }
-.f-button.dropdown-button__dropdown-action .button.button--outlined {
-  border-left: none;
-}
 .f-button.dropdown-button__dropdown-action .button.toggled .button__icon {
   transform: rotate(180deg);
 }
+.f-button.dropdown-button__dropdown-action:not(.dropdown-only) .button--outlined:not(.dropdown-only) {
+  border-left: none;
+}
 
 /*-------------------------------------------------*/
 /*        C o m p o n e n t   C l a s s e s        */