@skyux/ag-grid 7.0.0-beta.0 → 7.0.0-beta.10

package/fesm2020/skyux-ag-grid.mjs

@@ -1,7 +1,7 @@
 import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Component, ChangeDetectionStrategy, ContentChild, Directive, Input, ContentChildren, TemplateRef, ViewChildren, ViewChild, EventEmitter, Output, NgModule, ElementRef, ViewEncapsulation, Optional, HostBinding } from '@angular/core';
+import { Injectable, Component, ChangeDetectionStrategy, Inject, ContentChild, Directive, Input, ContentChildren, TemplateRef, ViewChildren, ViewChild, EventEmitter, Output, NgModule, ElementRef, ViewEncapsulation, Optional, HostBinding } from '@angular/core';
 import * as i1 from '@skyux/core';
 import { SkyAffixAutoFitContext, SkyNumericModule, SkyViewkeeperModule } from '@skyux/core';
 import * as i1$2 from '@skyux/data-manager';
@@ -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 { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
 import * as i1$3 from '@angular/forms';
 import { UntypedFormGroup, UntypedFormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i2$1 from '@skyux/lookup';
 import { SkyAutocompleteModule, SkyLookupModule } from '@skyux/lookup';
 import * as i3 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$2 from '@skyux/autonumeric';
 import { SkyAutonumericModule } from '@skyux/autonumeric';
@@ -82,13 +82,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1.SkyCoreAdapterService }]; } });
 
+var _SkyAgGridWrapperComponent_instances, _SkyAgGridWrapperComponent_ngUnsubscribe, _SkyAgGridWrapperComponent_moveHorizontalScroll;
 let idIndex = 0;
 class SkyAgGridWrapperComponent {
-    constructor(adapterService, changeDetector, elementRef) {
+    constructor(adapterService, changeDetector, elementRef, document) {
         this.adapterService = adapterService;
         this.changeDetector = changeDetector;
         this.elementRef = elementRef;
+        this.document = document;
+        _SkyAgGridWrapperComponent_instances.add(this);
         this._viewkeeperClasses = [];
+        _SkyAgGridWrapperComponent_ngUnsubscribe.set(this, new Subject());
         idIndex++;
         this.afterAnchorId = 'sky-ag-grid-nav-anchor-after-' + idIndex;
         this.beforeAnchorId = 'sky-ag-grid-nav-anchor-before-' + idIndex;
@@ -111,6 +115,23 @@ class SkyAgGridWrapperComponent {
                 this.viewkeeperClasses.push('.ag-header');
             }
         }
+        this.agGrid.gridReady.pipe(takeUntil(__classPrivateFieldGet(this, _SkyAgGridWrapperComponent_ngUnsubscribe, "f"))).subscribe(() => {
+            __classPrivateFieldGet(this, _SkyAgGridWrapperComponent_instances, "m", _SkyAgGridWrapperComponent_moveHorizontalScroll).call(this);
+        });
+        this.agGrid.firstDataRendered
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyAgGridWrapperComponent_ngUnsubscribe, "f")))
+            .subscribe(() => {
+            __classPrivateFieldGet(this, _SkyAgGridWrapperComponent_instances, "m", _SkyAgGridWrapperComponent_moveHorizontalScroll).call(this);
+        });
+        this.agGrid.rowDataChanged
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyAgGridWrapperComponent_ngUnsubscribe, "f")))
+            .subscribe(() => {
+            __classPrivateFieldGet(this, _SkyAgGridWrapperComponent_instances, "m", _SkyAgGridWrapperComponent_moveHorizontalScroll).call(this);
+        });
+    }
+    ngOnDestroy() {
+        __classPrivateFieldGet(this, _SkyAgGridWrapperComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyAgGridWrapperComponent_ngUnsubscribe, "f").complete();
     }
     /**
      * Prevent closing a modal when focused in AG Grid.
@@ -165,12 +186,41 @@ class SkyAgGridWrapperComponent {
         }
     }
 }
-SkyAgGridWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyAgGridWrapperComponent, deps: [{ token: SkyAgGridAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+_SkyAgGridWrapperComponent_ngUnsubscribe = new WeakMap(), _SkyAgGridWrapperComponent_instances = new WeakSet(), _SkyAgGridWrapperComponent_moveHorizontalScroll = function _SkyAgGridWrapperComponent_moveHorizontalScroll() {
+    if (this.agGrid && this.agGrid.api) {
+        const toTop = !!this.agGrid.gridOptions.context?.enableTopScroll;
+        const root = this.elementRef.nativeElement.querySelector('.ag-root');
+        const header = root.querySelector('.ag-header');
+        const floatingBottom = root.querySelector('.ag-floating-bottom');
+        const scrollbar = root.querySelector('.ag-body-horizontal-scroll');
+        if (header && floatingBottom && scrollbar) {
+            if (scrollbar.style.height !==
+                scrollbar.style.getPropertyValue('--sky-ag-body-horizontal-scroll-width')) {
+                scrollbar.style.setProperty('--sky-ag-body-horizontal-scroll-width', scrollbar.style.height);
+            }
+            const isTop = !!root.children[1].matches('.ag-body-horizontal-scroll');
+            if (toTop && !isTop) {
+                const fragment = this.document.createDocumentFragment();
+                fragment.appendChild(scrollbar);
+                header.after(fragment);
+            }
+            else if (!toTop && isTop) {
+                const fragment = this.document.createDocumentFragment();
+                fragment.appendChild(scrollbar);
+                floatingBottom.after(fragment);
+            }
+        }
+    }
+};
+SkyAgGridWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyAgGridWrapperComponent, deps: [{ token: SkyAgGridAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
 SkyAgGridWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyAgGridWrapperComponent, selector: "sky-ag-grid-wrapper", queries: [{ propertyName: "agGrid", first: true, predicate: AgGridAngular, descendants: true, static: true }], ngImport: i0, template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  class=\"sky-ag-grid\"\n  [ngClass]=\"{\n    'sky-ag-grid-top-scrollbar':\n      agGrid?.gridOptions?.context &&\n      agGrid?.gridOptions?.context['enableTopScroll']\n  }\"\n  tabindex=\"0\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <ng-content></ng-content>\n</div>\n<span\n  tabindex=\"0\"\n  class=\"nav-anchor\"\n  [id]=\"afterAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyAgGridWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  class=\"sky-ag-grid\"\n  [ngClass]=\"{\n    'sky-ag-grid-top-scrollbar':\n      agGrid?.gridOptions?.context &&\n      agGrid?.gridOptions?.context['enableTopScroll']\n  }\"\n  tabindex=\"0\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <ng-content></ng-content>\n</div>\n<span\n  tabindex=\"0\"\n  class=\"nav-anchor\"\n  [id]=\"afterAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n" }]
-        }], ctorParameters: function () { return [{ type: SkyAgGridAdapterService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { agGrid: [{
+        }], ctorParameters: function () { return [{ type: SkyAgGridAdapterService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { agGrid: [{
                 type: ContentChild,
                 args: [AgGridAngular, {
                         static: true,
@@ -689,9 +739,6 @@ const RESOURCES = {
         sky_ag_grid_cell_editor_autocomplete_aria_label: {
             message: 'Editable autocomplete {0} for row {1}',
         },
-        sky_ag_grid_cell_renderer_currency_aria_label: {
-            message: 'Editable currency {0} for row {1}',
-        },
         sky_ag_grid_cell_renderer_number_validator_message: {
             message: 'Enter a valid number.',
         },
@@ -1528,10 +1575,10 @@ class SkyAgGridCellRendererCurrencyComponent {
     }
 }
 SkyAgGridCellRendererCurrencyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyAgGridCellRendererCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellRendererCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyAgGridCellRendererCurrencyComponent, selector: "sky-ag-grid-cell-renderer-currency", inputs: { params: "params" }, ngImport: i0, template: "<span\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_renderer_currency_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n>\n  {{ value | skyNumeric: skyComponentProperties }}\n</span>\n", styles: ["input{border:none;padding-left:11px}\n"], dependencies: [{ kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: i1.SkyNumericPipe, name: "skyNumeric" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellRendererCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyAgGridCellRendererCurrencyComponent, selector: "sky-ag-grid-cell-renderer-currency", inputs: { params: "params" }, ngImport: i0, template: "<span\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n>\n  {{ value | skyNumeric: skyComponentProperties }}\n</span>\n", styles: ["input{border:none;padding-left:11px}\n"], dependencies: [{ kind: "pipe", type: i1.SkyNumericPipe, name: "skyNumeric" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyAgGridCellRendererCurrencyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-cell-renderer-currency', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  [attr.aria-label]=\"\n    'sky_ag_grid_cell_renderer_currency_aria_label'\n      | skyLibResources: columnHeader:rowNumber\n  \"\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n>\n  {{ value | skyNumeric: skyComponentProperties }}\n</span>\n", styles: ["input{border:none;padding-left:11px}\n"] }]
+            args: [{ selector: 'sky-ag-grid-cell-renderer-currency', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  [style.width.px]=\"columnWidth\"\n  [style.height.px]=\"rowHeightWithoutBorders\"\n>\n  {{ value | skyNumeric: skyComponentProperties }}\n</span>\n", styles: ["input{border:none;padding-left:11px}\n"] }]
         }], propDecorators: { params: [{
                 type: Input
             }] } });