@energycap/components 0.39.30 → 0.39.32-ECAP-26866-table-multi-sort-improvements.20241022-1702

package/fesm2020/energycap-components.mjs

@@ -5193,11 +5193,15 @@ class ConfirmComponent {
         /** Form Group to hold any form controls needed */
         this.formGroup = new UntypedFormGroup({});
         this.status = new Overlay('hasData');
+        this.showTextBox = true;
+        this.destroyed = new Subject();
         this.onDialogSave = new EventEmitter();
         this.onDialogCancel = new EventEmitter();
     }
     ngOnInit() {
         this.addFormControls();
+        this.setValidations();
+        this.listenCheckBox();
     }
     onSave(source) {
         this.formGroup.markAllAsTouched();
@@ -5206,6 +5210,9 @@ class ConfirmComponent {
             if (formValues.textbox) {
                 this.context.textboxValue = formValues.textbox;
             }
+            if (this.context.checkConfirm) {
+                this.context.checkboxValue = formValues.checkbox ? formValues.checkbox : false;
+            }
             this.context.saveSource = source;
             if (this.context.inlineConfirmAction) {
                 this.doInlineConfirmAction();
@@ -5221,6 +5228,24 @@ class ConfirmComponent {
     onCancel() {
         this.onDialogCancel.emit();
     }
+    ngOnDestroy() {
+        this.destroyed.next();
+        this.destroyed.complete();
+    }
+    listenCheckBox() {
+        this.formGroup.get('checkbox')?.valueChanges.pipe(takeUntil(this.destroyed)).subscribe(value => {
+            this.showTextBox = value;
+            this.setValidations();
+        });
+    }
+    setValidations() {
+        if (this.showTextBox) {
+            this.formGroup.controls['textbox']?.enable();
+        }
+        else {
+            this.formGroup.controls['textbox']?.disable();
+        }
+    }
     /**
      * Adds the textbox form control to our form group if its configured to be visible
      * Will also add the required validator if requested
@@ -5236,6 +5261,11 @@ class ConfirmComponent {
             }
             this.formGroup.addControl('textbox', new UntypedFormControl('', validators));
         }
+        if (this.context.checkConfirm) {
+            this.showTextBox = false;
+            const checkboxControl = new UntypedFormControl('');
+            this.formGroup.addControl('checkbox', checkboxControl);
+        }
     }
     async doInlineConfirmAction() {
         this.status.setStatus('pending', this.context.inlineConfirmPendingMessage);
@@ -5250,10 +5280,10 @@ class ConfirmComponent {
     }
 }
 ConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ConfirmComponent, selector: "ec-confirm", inputs: { context: "context" }, outputs: { onDialogSave: "onDialogSave", onDialogCancel: "onDialogCancel" }, ngImport: i0, template: "<section ecOverlay\r\n         [status]=\"status?.status\"\r\n         [message]=\"status?.message\"\r\n         [action]=\"status?.action\"\r\n         [noDataTemplate]=\"inlineConfirmResult\"\r\n         overlayClassList=\"p-0\"\r\n         class=\"bg-body flex-grow d-flex\">\r\n  <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\r\n    <section class=\"flex-grow\">\r\n      <h2 class=\"font-weight-bold mb-3\" *ngIf=\"context?.title\">{{context?.title}}</h2>\r\n      <ec-banner *ngIf=\"error\" [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\r\n      <div *ngIf=\"context?.message\" [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\r\n      <ec-textbox id=\"confirmTextbox\"\r\n                  *ngIf=\"context?.textboxType\"\r\n                  [autofocus]=\"true\"\r\n                  [formModel]=\"formGroup.get('textbox')\"\r\n                  [required]=\"context?.textboxRequired\"\r\n                  [label]=\"context?.textboxLabel\"\r\n                  [type]=\"context?.textboxType\"\r\n                  [rows]=\"context?.textareaRows\"\r\n                  [placeholder]=\"context?.textboxPlaceholder\"\r\n                  [upperCase]=\"context?.textboxUppercase\">\r\n      </ec-textbox>\r\n    </section>\r\n    <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\r\n      <ec-button id=\"saveConfirmButton\"\r\n                  class=\"ml-2\"\r\n                  [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\r\n                  [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\r\n                  [autofocus]=\"!context?.textboxType\"\r\n                  [isSubmit]=\"context?.saveOnEnter\"\r\n                  (clicked)=\"onSave('primary')\">\r\n      </ec-button>\r\n      <ec-button id=\"alternateSaveConfirmButton\"\r\n                  *ngIf=\"context?.alternateSaveLabel\"\r\n                  class=\"ml-2\"\r\n                  [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\r\n                  [label]=\"context?.alternateSaveLabel\"\r\n                  (clicked)=\"onSave('alternate')\">\r\n      </ec-button>\r\n      <ec-button  *ngIf=\"!context?.hideCancel\"\r\n                  id=\"cancelConfirmButton\"\r\n                  class=\"ml-auto\"\r\n                  type=\"secondary\"\r\n                  [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\r\n                  (clicked)=\"onCancel()\">\r\n      </ec-button>\r\n    </footer>\r\n  </form>\r\n</section>\r\n\r\n<ng-template #inlineConfirmResult>\r\n  <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\r\n    <div class=\"d-flex\">\r\n      <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\"></i>\r\n      <div [innerHTML]=\"status?.message | translate\"></div>\r\n    </div>\r\n    <div class=\"d-flex pt-2 mt-auto\">\r\n      <ec-button id=\"inlineConfirmClose\"\r\n                 label=\"Close\"\r\n                 type=\"secondary\"\r\n                 class=\"ml-auto\"\r\n                 (clicked)=\"status?.action?.onClick!()\"\r\n                 [autofocus]=\"true\">\r\n      </ec-button>\r\n    </div>\r\n  </section>\r\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+ConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ConfirmComponent, selector: "ec-confirm", inputs: { context: "context" }, outputs: { onDialogSave: "onDialogSave", onDialogCancel: "onDialogCancel" }, ngImport: i0, template: "<section ecOverlay\r\n         [status]=\"status?.status\"\r\n         [message]=\"status?.message\"\r\n         [action]=\"status?.action\"\r\n         [noDataTemplate]=\"inlineConfirmResult\"\r\n         overlayClassList=\"p-0\"\r\n         class=\"bg-body flex-grow d-flex\">\r\n  <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\r\n    <section class=\"flex-grow\">\r\n      <h2 class=\"font-weight-bold mb-3\" *ngIf=\"context?.title\">{{context?.title}}</h2>\r\n      <ec-banner *ngIf=\"error\" [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\r\n      <div *ngIf=\"context?.message\" [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\r\n      \r\n      <ec-checkbox *ngIf=\"context?.checkConfirm\"\r\n                    [formModel]=\"formGroup.get('checkbox')\"\r\n                    name=\"confirmCheckbox\"\r\n                    [label]=\"context?.checkboxText\"\r\n                    [autofocus]=\"true\"\r\n                    ></ec-checkbox>\r\n      <div *ngIf=\"showTextBox\" [innerHtml]=\"context.confirmLabel\" class=\"mb-3\"></div>\r\n      <ec-textbox id=\"confirmTextbox\"\r\n                  *ngIf=\"(context?.textboxType && !context?.checkConfirm) || showTextBox\"\r\n                  [autofocus]=\"true\"\r\n                  [formModel]=\"formGroup.get('textbox')\"\r\n                  [required]=\"context?.textboxRequired\"\r\n                  [label]=\"context?.textboxLabel\"\r\n                  [type]=\"context?.textboxType\"\r\n                  [rows]=\"context?.textareaRows\"\r\n                  [placeholder]=\"context?.textboxPlaceholder\"\r\n                  [upperCase]=\"context?.textboxUppercase\">\r\n      </ec-textbox>\r\n    </section>\r\n    <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\r\n      <ec-button id=\"saveConfirmButton\"\r\n                  class=\"ml-2\"\r\n                  [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\r\n                  [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\r\n                  [autofocus]=\"!context?.textboxType\"\r\n                  [isSubmit]=\"context?.saveOnEnter\"\r\n                  (clicked)=\"onSave('primary')\">\r\n      </ec-button>\r\n      <ec-button id=\"alternateSaveConfirmButton\"\r\n                  *ngIf=\"context?.alternateSaveLabel\"\r\n                  class=\"ml-2\"\r\n                  [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\r\n                  [label]=\"context?.alternateSaveLabel\"\r\n                  (clicked)=\"onSave('alternate')\">\r\n      </ec-button>\r\n      <ec-button  *ngIf=\"!context?.hideCancel\"\r\n                  id=\"cancelConfirmButton\"\r\n                  class=\"ml-auto\"\r\n                  type=\"secondary\"\r\n                  [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\r\n                  (clicked)=\"onCancel()\">\r\n      </ec-button>\r\n    </footer>\r\n  </form>\r\n</section>\r\n\r\n<ng-template #inlineConfirmResult>\r\n  <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\r\n    <div class=\"d-flex\">\r\n      <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\"></i>\r\n      <div [innerHTML]=\"status?.message | translate\"></div>\r\n    </div>\r\n    <div class=\"d-flex pt-2 mt-auto\">\r\n      <ec-button id=\"inlineConfirmClose\"\r\n                 label=\"Close\"\r\n                 type=\"secondary\"\r\n                 class=\"ml-auto\"\r\n                 (clicked)=\"status?.action?.onClick!()\"\r\n                 [autofocus]=\"true\">\r\n      </ec-button>\r\n    </div>\r\n  </section>\r\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ConfirmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-confirm', template: "<section ecOverlay\r\n         [status]=\"status?.status\"\r\n         [message]=\"status?.message\"\r\n         [action]=\"status?.action\"\r\n         [noDataTemplate]=\"inlineConfirmResult\"\r\n         overlayClassList=\"p-0\"\r\n         class=\"bg-body flex-grow d-flex\">\r\n  <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\r\n    <section class=\"flex-grow\">\r\n      <h2 class=\"font-weight-bold mb-3\" *ngIf=\"context?.title\">{{context?.title}}</h2>\r\n      <ec-banner *ngIf=\"error\" [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\r\n      <div *ngIf=\"context?.message\" [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\r\n      <ec-textbox id=\"confirmTextbox\"\r\n                  *ngIf=\"context?.textboxType\"\r\n                  [autofocus]=\"true\"\r\n                  [formModel]=\"formGroup.get('textbox')\"\r\n                  [required]=\"context?.textboxRequired\"\r\n                  [label]=\"context?.textboxLabel\"\r\n                  [type]=\"context?.textboxType\"\r\n                  [rows]=\"context?.textareaRows\"\r\n                  [placeholder]=\"context?.textboxPlaceholder\"\r\n                  [upperCase]=\"context?.textboxUppercase\">\r\n      </ec-textbox>\r\n    </section>\r\n    <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\r\n      <ec-button id=\"saveConfirmButton\"\r\n                  class=\"ml-2\"\r\n                  [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\r\n                  [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\r\n                  [autofocus]=\"!context?.textboxType\"\r\n                  [isSubmit]=\"context?.saveOnEnter\"\r\n                  (clicked)=\"onSave('primary')\">\r\n      </ec-button>\r\n      <ec-button id=\"alternateSaveConfirmButton\"\r\n                  *ngIf=\"context?.alternateSaveLabel\"\r\n                  class=\"ml-2\"\r\n                  [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\r\n                  [label]=\"context?.alternateSaveLabel\"\r\n                  (clicked)=\"onSave('alternate')\">\r\n      </ec-button>\r\n      <ec-button  *ngIf=\"!context?.hideCancel\"\r\n                  id=\"cancelConfirmButton\"\r\n                  class=\"ml-auto\"\r\n                  type=\"secondary\"\r\n                  [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\r\n                  (clicked)=\"onCancel()\">\r\n      </ec-button>\r\n    </footer>\r\n  </form>\r\n</section>\r\n\r\n<ng-template #inlineConfirmResult>\r\n  <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\r\n    <div class=\"d-flex\">\r\n      <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\"></i>\r\n      <div [innerHTML]=\"status?.message | translate\"></div>\r\n    </div>\r\n    <div class=\"d-flex pt-2 mt-auto\">\r\n      <ec-button id=\"inlineConfirmClose\"\r\n                 label=\"Close\"\r\n                 type=\"secondary\"\r\n                 class=\"ml-auto\"\r\n                 (clicked)=\"status?.action?.onClick!()\"\r\n                 [autofocus]=\"true\">\r\n      </ec-button>\r\n    </div>\r\n  </section>\r\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}\n"] }]
+            args: [{ selector: 'ec-confirm', template: "<section ecOverlay\r\n         [status]=\"status?.status\"\r\n         [message]=\"status?.message\"\r\n         [action]=\"status?.action\"\r\n         [noDataTemplate]=\"inlineConfirmResult\"\r\n         overlayClassList=\"p-0\"\r\n         class=\"bg-body flex-grow d-flex\">\r\n  <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\r\n    <section class=\"flex-grow\">\r\n      <h2 class=\"font-weight-bold mb-3\" *ngIf=\"context?.title\">{{context?.title}}</h2>\r\n      <ec-banner *ngIf=\"error\" [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\r\n      <div *ngIf=\"context?.message\" [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\r\n      \r\n      <ec-checkbox *ngIf=\"context?.checkConfirm\"\r\n                    [formModel]=\"formGroup.get('checkbox')\"\r\n                    name=\"confirmCheckbox\"\r\n                    [label]=\"context?.checkboxText\"\r\n                    [autofocus]=\"true\"\r\n                    ></ec-checkbox>\r\n      <div *ngIf=\"showTextBox\" [innerHtml]=\"context.confirmLabel\" class=\"mb-3\"></div>\r\n      <ec-textbox id=\"confirmTextbox\"\r\n                  *ngIf=\"(context?.textboxType && !context?.checkConfirm) || showTextBox\"\r\n                  [autofocus]=\"true\"\r\n                  [formModel]=\"formGroup.get('textbox')\"\r\n                  [required]=\"context?.textboxRequired\"\r\n                  [label]=\"context?.textboxLabel\"\r\n                  [type]=\"context?.textboxType\"\r\n                  [rows]=\"context?.textareaRows\"\r\n                  [placeholder]=\"context?.textboxPlaceholder\"\r\n                  [upperCase]=\"context?.textboxUppercase\">\r\n      </ec-textbox>\r\n    </section>\r\n    <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\r\n      <ec-button id=\"saveConfirmButton\"\r\n                  class=\"ml-2\"\r\n                  [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\r\n                  [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\r\n                  [autofocus]=\"!context?.textboxType\"\r\n                  [isSubmit]=\"context?.saveOnEnter\"\r\n                  (clicked)=\"onSave('primary')\">\r\n      </ec-button>\r\n      <ec-button id=\"alternateSaveConfirmButton\"\r\n                  *ngIf=\"context?.alternateSaveLabel\"\r\n                  class=\"ml-2\"\r\n                  [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\r\n                  [label]=\"context?.alternateSaveLabel\"\r\n                  (clicked)=\"onSave('alternate')\">\r\n      </ec-button>\r\n      <ec-button  *ngIf=\"!context?.hideCancel\"\r\n                  id=\"cancelConfirmButton\"\r\n                  class=\"ml-auto\"\r\n                  type=\"secondary\"\r\n                  [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\r\n                  (clicked)=\"onCancel()\">\r\n      </ec-button>\r\n    </footer>\r\n  </form>\r\n</section>\r\n\r\n<ng-template #inlineConfirmResult>\r\n  <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\r\n    <div class=\"d-flex\">\r\n      <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\"></i>\r\n      <div [innerHTML]=\"status?.message | translate\"></div>\r\n    </div>\r\n    <div class=\"d-flex pt-2 mt-auto\">\r\n      <ec-button id=\"inlineConfirmClose\"\r\n                 label=\"Close\"\r\n                 type=\"secondary\"\r\n                 class=\"ml-auto\"\r\n                 (clicked)=\"status?.action?.onClick!()\"\r\n                 [autofocus]=\"true\">\r\n      </ec-button>\r\n    </div>\r\n  </section>\r\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { context: [{
                 type: Input
             }], onDialogSave: [{
@@ -7052,7 +7082,7 @@ class TableComponent {
         if (this.sortable && changes.sort && changes.sort.currentValue && !changes.sort.firstChange) {
             const newValue = changes.sort.currentValue;
             if (!this.currentSort || !isEqual(newValue, this.currentSort)) {
-                this.onSort(newValue.field, newValue.direction);
+                this.onSort(newValue);
             }
         }
     }
@@ -7101,7 +7131,14 @@ class TableComponent {
                         if (th.classList.contains('is-resizable') && event.target && event.target.classList.contains('handle')) {
                             return;
                         }
-                        this.onSort(field);
+                        let direction;
+                        if (th.classList.contains('is-sorted-desc')) {
+                            direction = 'asc';
+                        }
+                        else {
+                            direction = 'desc';
+                        }
+                        this.onSort({ field, direction });
                     });
                     // Store unlisten function to remove listener when component is destroyed
                     this.unlisteners.push(unlisten);
@@ -7113,7 +7150,7 @@ class TableComponent {
         });
         // Set the initial sort
         if (this.sort) {
-            this.onSort(this.sort.field, this.sort.direction);
+            this.onSort(this.sort);
         }
     }
     /**
@@ -7122,32 +7159,29 @@ class TableComponent {
      * Emit the current field and direction of the sorted column
      * @param field
      */
-    onSort(field, direction) {
-        const th = this.sortableCols[field];
-        if (!th) {
-            return;
-        }
-        if (this.currentSort && this.currentSort.field !== field) {
-            this.renderer.removeClass(this.sortableCols[this.currentSort.field], `is-sorted-${this.currentSort.direction}`);
-        }
-        if (th.classList.contains('is-sorted-desc')) {
-            this.renderer.removeClass(th, 'is-sorted-desc');
-            if (!direction) {
-                direction = 'asc';
-            }
+    onSort(sort) {
+        this.clearSort();
+        if (Array.isArray(sort)) {
+            sort.forEach(s => this.applySort(s));
         }
         else {
-            if (th.classList.contains('is-sorted-asc')) {
-                this.renderer.removeClass(th, 'is-sorted-asc');
-            }
-            if (!direction) {
-                direction = 'desc';
-            }
+            this.applySort(sort);
+        }
+        this.currentSort = cloneDeep(sort);
+        this.sortChange.emit(this.currentSort);
+    }
+    clearSort() {
+        Object.values(this.sortableCols).forEach(th => {
+            this.renderer.removeClass(th, `is-sorted-asc`);
+            this.renderer.removeClass(th, `is-sorted-desc`);
+        });
+    }
+    applySort(sort) {
+        const th = this.sortableCols[sort.field];
+        if (!th) {
+            return;
         }
-        this.renderer.addClass(th, `is-sorted-${direction}`);
-        const sortEvent = { field: field, direction: direction };
-        this.currentSort = sortEvent;
-        this.sortChange.emit(sortEvent);
+        this.renderer.addClass(th, `is-sorted-${sort.direction}`);
     }
     initSelectable() {
         this.selectionContext.rowCheckboxes.valueChanges.pipe(takeUntil(this.destroyed)).subscribe((value) => {