@skyux/ag-grid 6.8.0 → 6.11.0

package/fesm2020/skyux-ag-grid.mjs

@@ -11,13 +11,13 @@ import { SkyInlineDeleteModule } from '@skyux/layout';
 import { AgGridAngular, AgGridModule } from 'ag-grid-angular';
 import { Subject, fromEvent } from 'rxjs';
 import { takeUntil, filter, first } from 'rxjs/operators';
+import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import * as i1$4 from '@angular/forms';
 import { FormGroup, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i1$3 from '@skyux/lookup';
 import { SkyAutocompleteModule, SkyLookupModule } from '@skyux/lookup';
 import * as i3$1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
-import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import { KeyCode, PopupComponent, Events, RowNode } from 'ag-grid-community';
 import * as i2 from '@skyux/autonumeric';
 import { SkyAutonumericModule } from '@skyux/autonumeric';
@@ -172,13 +172,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                     }]
             }] } });
 
+var _SkyAgGridTopScrollService_mutationObserver, _SkyAgGridTopScrollService_mutationObserverSvc;
+// css class selectors
+const HEADER_SELECTOR = '.ag-header';
+const SCROLL_SELECTOR = '.ag-body-horizontal-scroll';
+const SCROLL_VIEWPORT_SELECTOR = '.ag-body-horizontal-scroll-viewport';
+const SCROLL_CONTAINER_SELECTOR = '.ag-body-horizontal-scroll-container';
+class SkyAgGridTopScrollService {
+    constructor(mutationObserverSvc) {
+        _SkyAgGridTopScrollService_mutationObserver.set(this, void 0);
+        _SkyAgGridTopScrollService_mutationObserverSvc.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyAgGridTopScrollService_mutationObserverSvc, mutationObserverSvc, "f");
+    }
+    ngOnDestroy() {
+        if (__classPrivateFieldGet(this, _SkyAgGridTopScrollService_mutationObserver, "f")) {
+            __classPrivateFieldGet(this, _SkyAgGridTopScrollService_mutationObserver, "f").disconnect();
+        }
+    }
+    appendTopScrollbarToGrid(elementRef) {
+        // get scrollbar elements
+        const scrollElement = elementRef.nativeElement.querySelector(SCROLL_SELECTOR);
+        const scrollViewportElement = elementRef.nativeElement.querySelector(SCROLL_VIEWPORT_SELECTOR);
+        const scrollContainerElement = elementRef.nativeElement.querySelector(SCROLL_CONTAINER_SELECTOR);
+        // create scrollbar clones
+        const cloneElement = scrollElement.cloneNode(true);
+        const cloneViewportElement = cloneElement.querySelector(SCROLL_VIEWPORT_SELECTOR);
+        const cloneContainerElement = cloneElement.querySelector(SCROLL_CONTAINER_SELECTOR);
+        // insert scrollbar clone
+        const headerElement = elementRef.nativeElement.querySelector(HEADER_SELECTOR);
+        headerElement.insertAdjacentElement('afterend', cloneElement);
+        // add event listeners to keep scroll position synchronized
+        scrollViewportElement.addEventListener('scroll', () => cloneViewportElement.scrollTo({ left: scrollViewportElement.scrollLeft }));
+        cloneViewportElement.addEventListener('scroll', () => scrollViewportElement.scrollTo({ left: cloneViewportElement.scrollLeft }));
+        __classPrivateFieldSet(this, _SkyAgGridTopScrollService_mutationObserver, __classPrivateFieldGet(this, _SkyAgGridTopScrollService_mutationObserverSvc, "f").create(() => {
+            // Maintain viewkeeper scroll position when the grid is resized, but update the scrollbar size
+            cloneElement.style.width = `${scrollElement.style.width}`;
+            cloneViewportElement.setAttribute('style', scrollViewportElement.getAttribute('style'));
+            cloneContainerElement.setAttribute('style', scrollContainerElement.getAttribute('style'));
+        }), "f");
+        // start observing the scroll elements for `style` attribute changes
+        __classPrivateFieldGet(this, _SkyAgGridTopScrollService_mutationObserver, "f").observe(scrollElement, {
+            attributeFilter: ['style'],
+            subtree: true,
+        });
+    }
+}
+_SkyAgGridTopScrollService_mutationObserver = new WeakMap(), _SkyAgGridTopScrollService_mutationObserverSvc = new WeakMap();
+SkyAgGridTopScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridTopScrollService, deps: [{ token: i1.MutationObserverService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAgGridTopScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridTopScrollService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridTopScrollService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.MutationObserverService }]; } });
+
 /**
  * @internal
  */
 class SkyAgGridDataManagerAdapterDirective {
-    constructor(changeDetector, dataManagerSvc) {
+    constructor(changeDetector, dataManagerSvc, elementRef, topScrollSvc) {
         this.changeDetector = changeDetector;
         this.dataManagerSvc = dataManagerSvc;
+        this.elementRef = elementRef;
+        this.topScrollSvc = topScrollSvc;
         this.ngUnsubscribe = new Subject();
     }
     ngAfterContentInit() {
@@ -257,6 +314,13 @@ class SkyAgGridDataManagerAdapterDirective {
                 this.currentDataState = dataState;
                 this.displayColumns(dataState);
             });
+            if (agGrid.gridOptions.context?.enableTopScroll) {
+                this.topScrollSvc.appendTopScrollbarToGrid(this.elementRef);
+                this.dataManagerSvc.setViewkeeperClasses(this.viewId, [
+                    '.ag-header',
+                    '.ag-body-horizontal-scroll',
+                ]);
+            }
             agGrid.api.sizeColumnsToFit();
         });
         agGrid.columnMoved
@@ -356,14 +420,14 @@ class SkyAgGridDataManagerAdapterDirective {
         agGrid.api.deselectAll();
     }
 }
-SkyAgGridDataManagerAdapterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Directive });
+SkyAgGridDataManagerAdapterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SkyDataManagerService }, { token: i0.ElementRef }, { token: SkyAgGridTopScrollService }], target: i0.ɵɵFactoryTarget.Directive });
 SkyAgGridDataManagerAdapterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: SkyAgGridDataManagerAdapterDirective, selector: "[skyAgGridDataManagerAdapter]", inputs: { viewId: "viewId" }, queries: [{ propertyName: "agGridList", predicate: AgGridAngular, descendants: true }, { propertyName: "skyAgGridWrapperList", predicate: SkyAgGridWrapperComponent, descendants: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyAgGridDataManagerAdapter]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.SkyDataManagerService }]; }, propDecorators: { viewId: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.SkyDataManagerService }, { type: i0.ElementRef }, { type: SkyAgGridTopScrollService }]; }, propDecorators: { viewId: [{
                 type: Input
             }], agGridList: [{
                 type: ContentChildren,