@skyux/ag-grid 8.7.2 → 9.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +207 -207
- package/{esm2020 → esm2022}/lib/modules/ag-grid/ag-grid-adapter.service.mjs +8 -11
- package/esm2022/lib/modules/ag-grid/ag-grid-data-manager-adapter.directive.mjs +240 -0
- package/{esm2020 → esm2022}/lib/modules/ag-grid/ag-grid-row-delete.component.mjs +6 -6
- package/esm2022/lib/modules/ag-grid/ag-grid-row-delete.directive.mjs +268 -0
- package/esm2022/lib/modules/ag-grid/ag-grid-wrapper.component.mjs +259 -0
- package/{esm2020 → esm2022}/lib/modules/ag-grid/ag-grid.module.mjs +51 -51
- package/esm2022/lib/modules/ag-grid/ag-grid.service.mjs +457 -0
- package/esm2022/lib/modules/ag-grid/cell-editors/cell-editor-autocomplete/cell-editor-autocomplete.component.mjs +72 -0
- package/{esm2020 → esm2022}/lib/modules/ag-grid/cell-editors/cell-editor-autocomplete/cell-editor-autocomplete.module.mjs +9 -9
- package/esm2022/lib/modules/ag-grid/cell-editors/cell-editor-currency/cell-editor-currency.component.mjs +95 -0
- package/{esm2020 → esm2022}/lib/modules/ag-grid/cell-editors/cell-editor-currency/cell-editor-currency.module.mjs +9 -9
- package/esm2022/lib/modules/ag-grid/cell-editors/cell-editor-datepicker/cell-editor-datepicker.component.mjs +119 -0
- package/{esm2020 → esm2022}/lib/modules/ag-grid/cell-editors/cell-editor-datepicker/cell-editor-datepicker.module.mjs +5 -5
- package/esm2022/lib/modules/ag-grid/cell-editors/cell-editor-lookup/cell-editor-lookup.component.mjs +109 -0
- package/{esm2020 → esm2022}/lib/modules/ag-grid/cell-editors/cell-editor-lookup/cell-editor-lookup.module.mjs +13 -13
- package/esm2022/lib/modules/ag-grid/cell-editors/cell-editor-number/cell-editor-number.component.mjs +77 -0
- package/{esm2020 → esm2022}/lib/modules/ag-grid/cell-editors/cell-editor-number/cell-editor-number.module.mjs +5 -5
- package/esm2022/lib/modules/ag-grid/cell-editors/cell-editor-text/cell-editor-text.component.mjs +75 -0
- package/{esm2020 → esm2022}/lib/modules/ag-grid/cell-editors/cell-editor-text/cell-editor-text.module.mjs +5 -5
- package/esm2022/lib/modules/ag-grid/cell-renderers/cell-renderer-currency/cell-renderer-currency-validator.component.mjs +42 -0
- package/esm2022/lib/modules/ag-grid/cell-renderers/cell-renderer-currency/cell-renderer-currency.component.mjs +49 -0
- package/{esm2020 → esm2022}/lib/modules/ag-grid/cell-renderers/cell-renderer-currency/cell-renderer-currency.module.mjs +15 -15
- package/esm2022/lib/modules/ag-grid/cell-renderers/cell-renderer-lookup/cell-renderer-lookup.component.mjs +31 -0
- package/{esm2020 → esm2022}/lib/modules/ag-grid/cell-renderers/cell-renderer-lookup/cell-renderer-lookup.module.mjs +5 -5
- package/esm2022/lib/modules/ag-grid/cell-renderers/cell-renderer-row-selector/cell-renderer-row-selector.component.mjs +78 -0
- package/{esm2020 → esm2022}/lib/modules/ag-grid/cell-renderers/cell-renderer-row-selector/cell-renderer-row-selector.module.mjs +5 -5
- package/esm2022/lib/modules/ag-grid/cell-renderers/cell-renderer-validator-tooltip/cell-renderer-validator-tooltip.component.mjs +38 -0
- package/{esm2020 → esm2022}/lib/modules/ag-grid/cell-renderers/cell-renderer-validator-tooltip/cell-renderer-validator-tooltip.module.mjs +5 -5
- package/esm2022/lib/modules/ag-grid/cell-validator/ag-grid-cell-validator-tooltip.component.mjs +88 -0
- package/{esm2020 → esm2022}/lib/modules/ag-grid/cell-validator/ag-grid-cell-validator.module.mjs +5 -5
- package/esm2022/lib/modules/ag-grid/header/header-group.component.mjs +97 -0
- package/esm2022/lib/modules/ag-grid/header/header.component.mjs +144 -0
- package/{esm2020 → esm2022}/lib/modules/ag-grid/types/header-group-info.mjs +4 -4
- package/{esm2020 → esm2022}/lib/modules/ag-grid/types/header-info.mjs +4 -4
- package/esm2022/lib/modules/shared/sky-ag-grid-resources.module.mjs +74 -0
- package/fesm2022/skyux-ag-grid.mjs +3025 -0
- package/fesm2022/skyux-ag-grid.mjs.map +1 -0
- package/lib/modules/ag-grid/ag-grid-data-manager-adapter.directive.d.ts +1 -1
- package/lib/modules/ag-grid/ag-grid-row-delete.directive.d.ts +1 -1
- package/lib/modules/ag-grid/cell-renderers/cell-renderer-currency/cell-renderer-currency-validator.component.d.ts +1 -1
- package/lib/modules/ag-grid/cell-renderers/cell-renderer-currency/cell-renderer-currency.component.d.ts +1 -1
- package/lib/modules/ag-grid/cell-renderers/cell-renderer-validator-tooltip/cell-renderer-validator-tooltip.component.d.ts +1 -1
- package/lib/modules/ag-grid/cell-validator/ag-grid-cell-validator-tooltip.component.d.ts +1 -1
- package/package.json +19 -25
- package/esm2020/lib/modules/ag-grid/ag-grid-data-manager-adapter.directive.mjs +0 -233
- package/esm2020/lib/modules/ag-grid/ag-grid-row-delete.directive.mjs +0 -264
- package/esm2020/lib/modules/ag-grid/ag-grid-wrapper.component.mjs +0 -247
- package/esm2020/lib/modules/ag-grid/ag-grid.service.mjs +0 -453
- package/esm2020/lib/modules/ag-grid/cell-editors/cell-editor-autocomplete/cell-editor-autocomplete.component.mjs +0 -75
- package/esm2020/lib/modules/ag-grid/cell-editors/cell-editor-currency/cell-editor-currency.component.mjs +0 -98
- package/esm2020/lib/modules/ag-grid/cell-editors/cell-editor-datepicker/cell-editor-datepicker.component.mjs +0 -122
- package/esm2020/lib/modules/ag-grid/cell-editors/cell-editor-lookup/cell-editor-lookup.component.mjs +0 -112
- package/esm2020/lib/modules/ag-grid/cell-editors/cell-editor-number/cell-editor-number.component.mjs +0 -80
- package/esm2020/lib/modules/ag-grid/cell-editors/cell-editor-text/cell-editor-text.component.mjs +0 -78
- package/esm2020/lib/modules/ag-grid/cell-renderers/cell-renderer-currency/cell-renderer-currency-validator.component.mjs +0 -45
- package/esm2020/lib/modules/ag-grid/cell-renderers/cell-renderer-currency/cell-renderer-currency.component.mjs +0 -52
- package/esm2020/lib/modules/ag-grid/cell-renderers/cell-renderer-lookup/cell-renderer-lookup.component.mjs +0 -34
- package/esm2020/lib/modules/ag-grid/cell-renderers/cell-renderer-row-selector/cell-renderer-row-selector.component.mjs +0 -80
- package/esm2020/lib/modules/ag-grid/cell-renderers/cell-renderer-validator-tooltip/cell-renderer-validator-tooltip.component.mjs +0 -41
- package/esm2020/lib/modules/ag-grid/cell-validator/ag-grid-cell-validator-tooltip.component.mjs +0 -90
- package/esm2020/lib/modules/ag-grid/header/header-group.component.mjs +0 -95
- package/esm2020/lib/modules/ag-grid/header/header.component.mjs +0 -141
- package/esm2020/lib/modules/shared/sky-ag-grid-resources.module.mjs +0 -74
- package/fesm2015/skyux-ag-grid.mjs +0 -2996
- package/fesm2015/skyux-ag-grid.mjs.map +0 -1
- package/fesm2020/skyux-ag-grid.mjs +0 -3012
- package/fesm2020/skyux-ag-grid.mjs.map +0 -1
- /package/{esm2020 → esm2022}/index.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/apply-lookup-properties-defaults.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/icons/icon-map.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/ag-grid-row-delete-cancel-args.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/ag-grid-row-delete-config.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/ag-grid-row-delete-confirm-args.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/ag-grid-row-delete-contents.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/autocomplete-properties.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/cell-class.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/cell-editor-autocomplete-params.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/cell-editor-currency-params.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/cell-editor-datepicker-params.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/cell-editor-initial-action.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/cell-editor-lookup-params.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/cell-editor-number-params.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/cell-editor-text-params.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/cell-editor-utils.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/cell-renderer-currency-params.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/cell-renderer-lookup-params.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/cell-renderer-validator-params.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/cell-type.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/currency-properties.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/datepicker-properties.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/header-class.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/header-group-params.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/header-params.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/lookup-properties.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/number-properties.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/sky-grid-options.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/text-properties.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/modules/ag-grid/types/validator-properties.mjs +0 -0
- /package/{esm2020 → esm2022}/skyux-ag-grid.mjs +0 -0
|
@@ -0,0 +1,3025 @@
|
|
|
1
|
+
import * as i1$3 from '@angular/common';
|
|
2
|
+
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
3
|
+
import * as i0 from '@angular/core';
|
|
4
|
+
import { Injectable, ElementRef, Component, ChangeDetectionStrategy, ViewChild, ViewEncapsulation, Optional, HostBinding, Input, inject, ChangeDetectorRef, ContentChild, Directive, ContentChildren, TemplateRef, ViewChildren, EventEmitter, Inject, Output, NgModule } from '@angular/core';
|
|
5
|
+
import * as i1 from '@skyux/core';
|
|
6
|
+
import { SkyDynamicComponentLocation, SkyMutationObserverService, SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyNumericModule, SkyViewkeeperModule } from '@skyux/core';
|
|
7
|
+
import * as i1$5 from '@skyux/data-manager';
|
|
8
|
+
import { SkyDataManagerModule } from '@skyux/data-manager';
|
|
9
|
+
import * as i3 from '@skyux/i18n';
|
|
10
|
+
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
11
|
+
import * as i3$2 from '@skyux/indicators';
|
|
12
|
+
import { SkyStatusIndicatorModule, SkyIconModule } from '@skyux/indicators';
|
|
13
|
+
import * as i2$3 from '@skyux/layout';
|
|
14
|
+
import { SkyInlineDeleteModule } from '@skyux/layout';
|
|
15
|
+
import * as i1$2 from '@skyux/theme';
|
|
16
|
+
import { SkyThemeService, SkyThemeModule } from '@skyux/theme';
|
|
17
|
+
import { AgGridAngular, AgGridModule } from 'ag-grid-angular';
|
|
18
|
+
import { fromEvent, Subject, BehaviorSubject, Subscription, fromEventPattern } from 'rxjs';
|
|
19
|
+
import { first, takeUntil, take, filter } from 'rxjs/operators';
|
|
20
|
+
import * as i1$1 from '@angular/forms';
|
|
21
|
+
import { UntypedFormGroup, UntypedFormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
22
|
+
import { KeyCode, PopupComponent, Events, Column, RowNode } from 'ag-grid-community';
|
|
23
|
+
import * as i2 from '@skyux/lookup';
|
|
24
|
+
import { SkyAutocompleteModule, SkyLookupModule } from '@skyux/lookup';
|
|
25
|
+
import * as i2$1 from '@skyux/autonumeric';
|
|
26
|
+
import { SkyAutonumericModule } from '@skyux/autonumeric';
|
|
27
|
+
import * as i2$2 from '@skyux/datetime';
|
|
28
|
+
import { SkyDatepickerModule } from '@skyux/datetime';
|
|
29
|
+
import * as i3$1 from '@skyux/forms';
|
|
30
|
+
import { SkyInputBoxModule, SkyCheckboxModule } from '@skyux/forms';
|
|
31
|
+
import * as i1$4 from '@skyux/popovers';
|
|
32
|
+
import { SkyPopoverMessageType, SkyPopoverModule } from '@skyux/popovers';
|
|
33
|
+
|
|
34
|
+
class SkyAgGridAdapterService {
|
|
35
|
+
#skyAdapterService;
|
|
36
|
+
constructor(skyAdapterService) {
|
|
37
|
+
this.#skyAdapterService = skyAdapterService;
|
|
38
|
+
}
|
|
39
|
+
getElementOrParentWithClass(element, className) {
|
|
40
|
+
if (element && element.classList.contains(className)) {
|
|
41
|
+
return element;
|
|
42
|
+
}
|
|
43
|
+
else if (element.parentElement) {
|
|
44
|
+
return this.getElementOrParentWithClass(element.parentElement, className);
|
|
45
|
+
}
|
|
46
|
+
return undefined;
|
|
47
|
+
}
|
|
48
|
+
setFocusedElementById(parentEl, selector) {
|
|
49
|
+
const element = parentEl.querySelector(`#${selector}`);
|
|
50
|
+
/* istanbul ignore else */
|
|
51
|
+
if (element) {
|
|
52
|
+
element.focus();
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
getFocusedElement() {
|
|
56
|
+
return document.activeElement;
|
|
57
|
+
}
|
|
58
|
+
getNextFocusableElement(currentEl, parentEl, moveFocusLeft) {
|
|
59
|
+
if (parentEl) {
|
|
60
|
+
const focusableChildren = this.#skyAdapterService.getFocusableChildren(parentEl);
|
|
61
|
+
const currentElementIndex = focusableChildren.indexOf(currentEl);
|
|
62
|
+
const nextIndex = moveFocusLeft
|
|
63
|
+
? currentElementIndex - 1
|
|
64
|
+
: currentElementIndex + 1;
|
|
65
|
+
if ((!moveFocusLeft && focusableChildren.length >= nextIndex) ||
|
|
66
|
+
(moveFocusLeft && nextIndex >= 0)) {
|
|
67
|
+
return focusableChildren[nextIndex];
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
return undefined;
|
|
71
|
+
}
|
|
72
|
+
focusOnFocusableChildren(element) {
|
|
73
|
+
const focusableChildren = this.#skyAdapterService.getFocusableChildren(element);
|
|
74
|
+
if (focusableChildren.length) {
|
|
75
|
+
focusableChildren[0].focus();
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
focusOnColumnHeader(parentEl, colId) {
|
|
79
|
+
const columnHeader = parentEl.querySelector(`.ag-header-cell[col-id="${colId}"]`);
|
|
80
|
+
columnHeader?.focus();
|
|
81
|
+
}
|
|
82
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridAdapterService, deps: [{ token: i1.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
83
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridAdapterService, providedIn: 'root' }); }
|
|
84
|
+
}
|
|
85
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridAdapterService, decorators: [{
|
|
86
|
+
type: Injectable,
|
|
87
|
+
args: [{
|
|
88
|
+
providedIn: 'root',
|
|
89
|
+
}]
|
|
90
|
+
}], ctorParameters: function () { return [{ type: i1.SkyCoreAdapterService }]; } });
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* @internal
|
|
94
|
+
*/
|
|
95
|
+
function applySkyLookupPropertiesDefaults(skyLookupProperties) {
|
|
96
|
+
/* istanbul ignore if */
|
|
97
|
+
if (!skyLookupProperties) {
|
|
98
|
+
return {};
|
|
99
|
+
}
|
|
100
|
+
return {
|
|
101
|
+
addClick: skyLookupProperties.addClick,
|
|
102
|
+
ariaLabel: skyLookupProperties.ariaLabel || '',
|
|
103
|
+
autocompleteAttribute: skyLookupProperties.autocompleteAttribute || 'off',
|
|
104
|
+
data: skyLookupProperties.data || [],
|
|
105
|
+
debounceTime: skyLookupProperties.debounceTime || 0,
|
|
106
|
+
descriptorProperty: skyLookupProperties.descriptorProperty || 'name',
|
|
107
|
+
disabled: skyLookupProperties.disabled || false,
|
|
108
|
+
enableShowMore: skyLookupProperties.enableShowMore || false,
|
|
109
|
+
idProperty: skyLookupProperties.idProperty,
|
|
110
|
+
placeholderText: skyLookupProperties.placeholderText || '',
|
|
111
|
+
propertiesToSearch: skyLookupProperties.propertiesToSearch,
|
|
112
|
+
search: skyLookupProperties.search,
|
|
113
|
+
searchAsync: skyLookupProperties.searchAsync,
|
|
114
|
+
searchFilters: skyLookupProperties.searchFilters || [],
|
|
115
|
+
searchResultsLimit: skyLookupProperties.searchResultsLimit,
|
|
116
|
+
searchResultTemplate: skyLookupProperties.searchResultTemplate,
|
|
117
|
+
searchTextMinimumCharacters: skyLookupProperties.searchTextMinimumCharacters || 1,
|
|
118
|
+
selectMode: skyLookupProperties.selectMode,
|
|
119
|
+
showAddButton: skyLookupProperties.showAddButton || false,
|
|
120
|
+
showMoreConfig: skyLookupProperties.showMoreConfig || {},
|
|
121
|
+
wrapperClass: 'ag-custom-component-popup',
|
|
122
|
+
};
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/** The initial action that a cell editor should take when initialized. */
|
|
126
|
+
var SkyAgGridCellEditorInitialAction;
|
|
127
|
+
(function (SkyAgGridCellEditorInitialAction) {
|
|
128
|
+
/** The cell should be cleared. */
|
|
129
|
+
SkyAgGridCellEditorInitialAction[SkyAgGridCellEditorInitialAction["Delete"] = 0] = "Delete";
|
|
130
|
+
/** The cell value should be highlighted. */
|
|
131
|
+
SkyAgGridCellEditorInitialAction[SkyAgGridCellEditorInitialAction["Highlighted"] = 1] = "Highlighted";
|
|
132
|
+
/** The cell value should be replaced with the initializing value. */
|
|
133
|
+
SkyAgGridCellEditorInitialAction[SkyAgGridCellEditorInitialAction["Replace"] = 2] = "Replace";
|
|
134
|
+
/** The cell should not be modified and the cursor is placed at the end of the value. */
|
|
135
|
+
SkyAgGridCellEditorInitialAction[SkyAgGridCellEditorInitialAction["Untouched"] = 3] = "Untouched";
|
|
136
|
+
})(SkyAgGridCellEditorInitialAction || (SkyAgGridCellEditorInitialAction = {}));
|
|
137
|
+
|
|
138
|
+
class SkyAgGridCellEditorUtils {
|
|
139
|
+
/**
|
|
140
|
+
* Gets the initial action that a cell editor should take when initialized.
|
|
141
|
+
* @param params The editor's initializing parameters.
|
|
142
|
+
*/
|
|
143
|
+
static getEditorInitialAction(params) {
|
|
144
|
+
if (params?.cellStartedEdit) {
|
|
145
|
+
if (params.eventKey === KeyCode.BACKSPACE ||
|
|
146
|
+
params.eventKey === KeyCode.DELETE) {
|
|
147
|
+
return SkyAgGridCellEditorInitialAction.Delete;
|
|
148
|
+
}
|
|
149
|
+
else if (params.charPress) {
|
|
150
|
+
return SkyAgGridCellEditorInitialAction.Replace;
|
|
151
|
+
}
|
|
152
|
+
else {
|
|
153
|
+
if (params.eventKey !== KeyCode.F2) {
|
|
154
|
+
return SkyAgGridCellEditorInitialAction.Highlighted;
|
|
155
|
+
}
|
|
156
|
+
else {
|
|
157
|
+
return SkyAgGridCellEditorInitialAction.Untouched;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
else {
|
|
162
|
+
return SkyAgGridCellEditorInitialAction.Untouched;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
static subtractOrZero(minuend, subtrahend) {
|
|
166
|
+
// Swapping minuend with subtrahend when minuend is null or undefined results in
|
|
167
|
+
// the subtrahend being subtracted from itself, which will always be 0.
|
|
168
|
+
return (minuend ?? subtrahend) - subtrahend;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/**
|
|
173
|
+
* @internal
|
|
174
|
+
*/
|
|
175
|
+
class SkyAgGridCellEditorAutocompleteComponent {
|
|
176
|
+
constructor() {
|
|
177
|
+
this.editorForm = new UntypedFormGroup({
|
|
178
|
+
selection: new UntypedFormControl(),
|
|
179
|
+
});
|
|
180
|
+
this.skyComponentProperties = {};
|
|
181
|
+
}
|
|
182
|
+
#triggerType;
|
|
183
|
+
#params;
|
|
184
|
+
agInit(params) {
|
|
185
|
+
this.#params = params;
|
|
186
|
+
this.#triggerType = SkyAgGridCellEditorUtils.getEditorInitialAction(params);
|
|
187
|
+
const control = this.editorForm.get('selection');
|
|
188
|
+
if (control) {
|
|
189
|
+
switch (this.#triggerType) {
|
|
190
|
+
case SkyAgGridCellEditorInitialAction.Delete:
|
|
191
|
+
control.setValue(undefined);
|
|
192
|
+
break;
|
|
193
|
+
case SkyAgGridCellEditorInitialAction.Replace:
|
|
194
|
+
case SkyAgGridCellEditorInitialAction.Highlighted:
|
|
195
|
+
case SkyAgGridCellEditorInitialAction.Untouched:
|
|
196
|
+
default:
|
|
197
|
+
control.setValue(params.value);
|
|
198
|
+
break;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
this.columnHeader = this.#params.colDef && this.#params.colDef.headerName;
|
|
202
|
+
this.rowNumber = this.#params.rowIndex + 1;
|
|
203
|
+
this.skyComponentProperties = this.#params.skyComponentProperties || {};
|
|
204
|
+
}
|
|
205
|
+
afterGuiAttached() {
|
|
206
|
+
if (this.input) {
|
|
207
|
+
this.input.nativeElement.focus();
|
|
208
|
+
if (this.#triggerType === SkyAgGridCellEditorInitialAction.Replace) {
|
|
209
|
+
const charPress = this.#params?.charPress;
|
|
210
|
+
this.input.nativeElement.select();
|
|
211
|
+
this.input.nativeElement.setRangeText(charPress);
|
|
212
|
+
// Ensure the cursor is at the end of the text.
|
|
213
|
+
this.input.nativeElement.setSelectionRange(charPress.length, charPress.length);
|
|
214
|
+
this.input.nativeElement.dispatchEvent(new Event('input'));
|
|
215
|
+
}
|
|
216
|
+
if (this.#triggerType === SkyAgGridCellEditorInitialAction.Highlighted) {
|
|
217
|
+
this.input.nativeElement.select();
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
getValue() {
|
|
222
|
+
const val = this.editorForm.get('selection')?.value;
|
|
223
|
+
return val !== undefined && val !== null ? val : undefined;
|
|
224
|
+
}
|
|
225
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
226
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyAgGridCellEditorAutocompleteComponent, selector: "sky-ag-grid-cell-editor-autocomplete", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorAutocomplete"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"sky-ag-grid-cell-editor-autocomplete\" [formGroup]=\"editorForm\">\n <sky-autocomplete\n [data]=\"skyComponentProperties.data\"\n [debounceTime]=\"skyComponentProperties.debounceTime\"\n [descriptorProperty]=\"skyComponentProperties.descriptorProperty\"\n [propertiesToSearch]=\"skyComponentProperties.propertiesToSearch\"\n [search]=\"skyComponentProperties.search\"\n [searchFilters]=\"skyComponentProperties.searchFilters\"\n [searchResultsLimit]=\"skyComponentProperties.searchResultsLimit\"\n [searchResultTemplate]=\"skyComponentProperties.searchResultTemplate\"\n [searchTextMinimumCharacters]=\"\n skyComponentProperties.searchTextMinimumCharacters\n \"\n (selectionChange)=\"\n skyComponentProperties.selectionChange &&\n skyComponentProperties.selectionChange($event)\n \"\n >\n <input\n formControlName=\"selection\"\n skyAutocomplete\n #skyCellEditorAutocomplete\n type=\"text\"\n [attr.aria-label]=\"\n 'sky_ag_grid_cell_editor_autocomplete_aria_label'\n | skyLibResources : columnHeader : rowNumber\n \"\n />\n </sky-autocomplete>\n</div>\n", styles: ["sky-autocomplete input{border:none;box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.λ2, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync"] }, { kind: "directive", type: i2.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
227
|
+
}
|
|
228
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorAutocompleteComponent, decorators: [{
|
|
229
|
+
type: Component,
|
|
230
|
+
args: [{ selector: 'sky-ag-grid-cell-editor-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-ag-grid-cell-editor-autocomplete\" [formGroup]=\"editorForm\">\n <sky-autocomplete\n [data]=\"skyComponentProperties.data\"\n [debounceTime]=\"skyComponentProperties.debounceTime\"\n [descriptorProperty]=\"skyComponentProperties.descriptorProperty\"\n [propertiesToSearch]=\"skyComponentProperties.propertiesToSearch\"\n [search]=\"skyComponentProperties.search\"\n [searchFilters]=\"skyComponentProperties.searchFilters\"\n [searchResultsLimit]=\"skyComponentProperties.searchResultsLimit\"\n [searchResultTemplate]=\"skyComponentProperties.searchResultTemplate\"\n [searchTextMinimumCharacters]=\"\n skyComponentProperties.searchTextMinimumCharacters\n \"\n (selectionChange)=\"\n skyComponentProperties.selectionChange &&\n skyComponentProperties.selectionChange($event)\n \"\n >\n <input\n formControlName=\"selection\"\n skyAutocomplete\n #skyCellEditorAutocomplete\n type=\"text\"\n [attr.aria-label]=\"\n 'sky_ag_grid_cell_editor_autocomplete_aria_label'\n | skyLibResources : columnHeader : rowNumber\n \"\n />\n </sky-autocomplete>\n</div>\n", styles: ["sky-autocomplete input{border:none;box-shadow:none}\n"] }]
|
|
231
|
+
}], propDecorators: { input: [{
|
|
232
|
+
type: ViewChild,
|
|
233
|
+
args: ['skyCellEditorAutocomplete', { read: ElementRef }]
|
|
234
|
+
}] } });
|
|
235
|
+
|
|
236
|
+
/**
|
|
237
|
+
* @internal
|
|
238
|
+
*/
|
|
239
|
+
class SkyAgGridCellEditorCurrencyComponent {
|
|
240
|
+
#triggerType;
|
|
241
|
+
#changeDetector;
|
|
242
|
+
constructor(changeDetector) {
|
|
243
|
+
this.skyComponentProperties = {};
|
|
244
|
+
this.editorForm = new UntypedFormGroup({
|
|
245
|
+
currency: new UntypedFormControl(),
|
|
246
|
+
});
|
|
247
|
+
this.#changeDetector = changeDetector;
|
|
248
|
+
}
|
|
249
|
+
/**
|
|
250
|
+
* agInit is called by agGrid once after the editor is created and provides the editor with the information it needs.
|
|
251
|
+
* @param params The cell editor params that include data about the cell, column, row, and grid.
|
|
252
|
+
*/
|
|
253
|
+
agInit(params) {
|
|
254
|
+
this.params = params;
|
|
255
|
+
this.columnHeader = this.params.colDef.headerName;
|
|
256
|
+
this.rowNumber = this.params.rowIndex + 1;
|
|
257
|
+
this.columnWidth = this.params.column.getActualWidth();
|
|
258
|
+
this.rowHeightWithoutBorders = SkyAgGridCellEditorUtils.subtractOrZero(this.params.node?.rowHeight, 4);
|
|
259
|
+
this.skyComponentProperties = this.params.skyComponentProperties || {
|
|
260
|
+
decimalPlaces: 2,
|
|
261
|
+
currencySymbol: '$',
|
|
262
|
+
};
|
|
263
|
+
}
|
|
264
|
+
/**
|
|
265
|
+
* afterGuiAttached is called by agGrid after the editor is rendered in the DOM. Once it is attached the editor is ready to be focused on.
|
|
266
|
+
*/
|
|
267
|
+
afterGuiAttached() {
|
|
268
|
+
this.input?.nativeElement.focus();
|
|
269
|
+
// This setup is in `afterGuiAttached` due to the lifecycle of autonumeric which will highlight the initial value if it is in place when it renders.
|
|
270
|
+
// Since we don't want that, we set the initial value after autonumeric initializes.
|
|
271
|
+
this.#triggerType = SkyAgGridCellEditorUtils.getEditorInitialAction(this.params);
|
|
272
|
+
const control = this.editorForm.get('currency');
|
|
273
|
+
if (control) {
|
|
274
|
+
switch (this.#triggerType) {
|
|
275
|
+
case SkyAgGridCellEditorInitialAction.Delete:
|
|
276
|
+
control.setValue(undefined);
|
|
277
|
+
break;
|
|
278
|
+
case SkyAgGridCellEditorInitialAction.Replace:
|
|
279
|
+
control.setValue(parseFloat(String(this.params?.charPress)) || undefined);
|
|
280
|
+
break;
|
|
281
|
+
case SkyAgGridCellEditorInitialAction.Highlighted:
|
|
282
|
+
case SkyAgGridCellEditorInitialAction.Untouched:
|
|
283
|
+
default:
|
|
284
|
+
control.setValue(parseFloat(String(this.params?.value)));
|
|
285
|
+
break;
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
this.#changeDetector.markForCheck();
|
|
289
|
+
// Without the `setTimeout` there is inconsistent behavior with the highlighting when no initial value is present.
|
|
290
|
+
setTimeout(() => {
|
|
291
|
+
if (this.#triggerType === SkyAgGridCellEditorInitialAction.Highlighted) {
|
|
292
|
+
this.input?.nativeElement.select();
|
|
293
|
+
}
|
|
294
|
+
}, 100);
|
|
295
|
+
}
|
|
296
|
+
/**
|
|
297
|
+
* getValue is called by agGrid when editing is stopped to get the new value of the cell.
|
|
298
|
+
*/
|
|
299
|
+
getValue() {
|
|
300
|
+
const val = this.editorForm.get('currency')?.value;
|
|
301
|
+
return val !== undefined && val !== null ? val : undefined;
|
|
302
|
+
}
|
|
303
|
+
/**
|
|
304
|
+
* The autoNumeric library's event handler suppresses the escape key event. This additional handler re-enables AG Grid's default functionality.
|
|
305
|
+
*/
|
|
306
|
+
onPressEscape() {
|
|
307
|
+
if (this.params) {
|
|
308
|
+
this.params.api.stopEditing(true);
|
|
309
|
+
this.params.api.setFocusedCell(this.params.rowIndex, this.params.column);
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
313
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyAgGridCellEditorCurrencyComponent, selector: "sky-ag-grid-cell-editor-currency", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorCurrency"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n <input\n formControlName=\"currency\"\n type=\"text\"\n [attr.aria-label]=\"\n 'sky_ag_grid_cell_editor_currency_aria_label'\n | skyLibResources : columnHeader : rowNumber\n \"\n [style.width.px]=\"columnWidth\"\n [style.height.px]=\"rowHeightWithoutBorders\"\n [skyAutonumeric]=\"skyComponentProperties\"\n [skyAutonumericFormChangesUnformatted]=\"!!params?.charPress\"\n (keyup.escape)=\"onPressEscape()\"\n #skyCellEditorCurrency\n />\n</ng-container>\n", styles: ["input{border:none;padding-left:11px}\n"], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric", "skyAutonumericFormChangesUnformatted"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
314
|
+
}
|
|
315
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, decorators: [{
|
|
316
|
+
type: Component,
|
|
317
|
+
args: [{ selector: 'sky-ag-grid-cell-editor-currency', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [formGroup]=\"editorForm\">\n <input\n formControlName=\"currency\"\n type=\"text\"\n [attr.aria-label]=\"\n 'sky_ag_grid_cell_editor_currency_aria_label'\n | skyLibResources : columnHeader : rowNumber\n \"\n [style.width.px]=\"columnWidth\"\n [style.height.px]=\"rowHeightWithoutBorders\"\n [skyAutonumeric]=\"skyComponentProperties\"\n [skyAutonumericFormChangesUnformatted]=\"!!params?.charPress\"\n (keyup.escape)=\"onPressEscape()\"\n #skyCellEditorCurrency\n />\n</ng-container>\n", styles: ["input{border:none;padding-left:11px}\n"] }]
|
|
318
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { input: [{
|
|
319
|
+
type: ViewChild,
|
|
320
|
+
args: ['skyCellEditorCurrency', { read: ElementRef }]
|
|
321
|
+
}] } });
|
|
322
|
+
|
|
323
|
+
/**
|
|
324
|
+
* @internal
|
|
325
|
+
*/
|
|
326
|
+
class SkyAgGridCellEditorDatepickerComponent extends PopupComponent {
|
|
327
|
+
#params;
|
|
328
|
+
#triggerType;
|
|
329
|
+
#changeDetector;
|
|
330
|
+
#themeSvc;
|
|
331
|
+
constructor(changeDetector, themeSvc) {
|
|
332
|
+
super();
|
|
333
|
+
this.editorForm = new UntypedFormGroup({
|
|
334
|
+
date: new UntypedFormControl(),
|
|
335
|
+
});
|
|
336
|
+
this.skyComponentProperties = {};
|
|
337
|
+
this.#changeDetector = changeDetector;
|
|
338
|
+
this.#themeSvc = themeSvc;
|
|
339
|
+
}
|
|
340
|
+
/**
|
|
341
|
+
* agInit is called by agGrid once after the editor is created and provides the editor with the information it needs.
|
|
342
|
+
* @param params The cell editor params that include data about the cell, column, row, and grid.
|
|
343
|
+
*/
|
|
344
|
+
agInit(params) {
|
|
345
|
+
this.#params = params;
|
|
346
|
+
this.#triggerType = SkyAgGridCellEditorUtils.getEditorInitialAction(params);
|
|
347
|
+
const control = this.editorForm.get('date');
|
|
348
|
+
if (control) {
|
|
349
|
+
switch (this.#triggerType) {
|
|
350
|
+
case SkyAgGridCellEditorInitialAction.Delete:
|
|
351
|
+
control.setValue(undefined);
|
|
352
|
+
break;
|
|
353
|
+
case SkyAgGridCellEditorInitialAction.Replace:
|
|
354
|
+
control.setValue(params.charPress);
|
|
355
|
+
break;
|
|
356
|
+
case SkyAgGridCellEditorInitialAction.Highlighted:
|
|
357
|
+
case SkyAgGridCellEditorInitialAction.Untouched:
|
|
358
|
+
default:
|
|
359
|
+
control.setValue(params.value);
|
|
360
|
+
break;
|
|
361
|
+
}
|
|
362
|
+
if (this.#params.skyComponentProperties?.disabled) {
|
|
363
|
+
control.disable();
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
this.#changeDetector.markForCheck();
|
|
367
|
+
this.skyComponentProperties = this.#params.skyComponentProperties || {};
|
|
368
|
+
this.columnWidth = this.#params.column.getActualWidth();
|
|
369
|
+
this.columnWidthWithoutBorders = this.columnWidth - 2;
|
|
370
|
+
this.rowHeightWithoutBorders = this.#params.node.rowHeight - 3;
|
|
371
|
+
this.#themeSvc?.settingsChange.subscribe((themeSettings) => {
|
|
372
|
+
if (themeSettings.currentSettings.theme.name === 'modern') {
|
|
373
|
+
this.columnWidthWithoutBorders = this.columnWidth;
|
|
374
|
+
this.rowHeightWithoutBorders = this.#params?.node?.rowHeight;
|
|
375
|
+
}
|
|
376
|
+
else {
|
|
377
|
+
this.columnWidthWithoutBorders =
|
|
378
|
+
this.columnWidth === undefined ? undefined : this.columnWidth - 2;
|
|
379
|
+
this.rowHeightWithoutBorders = SkyAgGridCellEditorUtils.subtractOrZero(this.#params?.node.rowHeight, 3);
|
|
380
|
+
}
|
|
381
|
+
});
|
|
382
|
+
}
|
|
383
|
+
/**
|
|
384
|
+
* afterGuiAttached is called by agGrid after the editor is rendered in the DOM. Once it is attached the editor is ready to be focused on.
|
|
385
|
+
*/
|
|
386
|
+
afterGuiAttached() {
|
|
387
|
+
const datepickerInputEl = this.datepickerInput?.nativeElement;
|
|
388
|
+
if (datepickerInputEl) {
|
|
389
|
+
datepickerInputEl.focus();
|
|
390
|
+
// programmatically set the value of in the input; however, do not do this via the form control so that the value is not formatted when editing starts.
|
|
391
|
+
// Watch for the first blur and fire a 'change' event as programmatic changes won't queue a change event, but we need to do this so that formatting happens if the user tabs to the calendar button.
|
|
392
|
+
if (this.#triggerType === SkyAgGridCellEditorInitialAction.Replace) {
|
|
393
|
+
fromEvent(datepickerInputEl, 'blur')
|
|
394
|
+
.pipe(first())
|
|
395
|
+
.subscribe(() => {
|
|
396
|
+
datepickerInputEl.dispatchEvent(new Event('change'));
|
|
397
|
+
});
|
|
398
|
+
datepickerInputEl.select();
|
|
399
|
+
const charPress = this.#params?.charPress;
|
|
400
|
+
if (charPress) {
|
|
401
|
+
datepickerInputEl.setRangeText(charPress);
|
|
402
|
+
// Ensure the cursor is at the end of the text.
|
|
403
|
+
datepickerInputEl.setSelectionRange(charPress.length, charPress.length);
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
if (this.#triggerType === SkyAgGridCellEditorInitialAction.Highlighted) {
|
|
407
|
+
datepickerInputEl.select();
|
|
408
|
+
}
|
|
409
|
+
}
|
|
410
|
+
}
|
|
411
|
+
/**
|
|
412
|
+
* getValue is called by agGrid when editing is stopped to get the new value of the cell.
|
|
413
|
+
*/
|
|
414
|
+
getValue() {
|
|
415
|
+
this.datepickerInput?.nativeElement.blur();
|
|
416
|
+
return this.editorForm.get('date')?.value;
|
|
417
|
+
}
|
|
418
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
419
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyAgGridCellEditorDatepickerComponent, selector: "sky-ag-grid-cell-editor-datepicker", viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["skyCellEditorDatepickerInput"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"sky-ag-grid-cell-editor-datepicker\"\n [formGroup]=\"editorForm\"\n [style.width.px]=\"columnWidthWithoutBorders\"\n>\n <sky-datepicker\n data-sky-id=\"cell-datepicker\"\n pickerClass=\"ag-custom-component-popup\"\n >\n <input\n formControlName=\"date\"\n skyDatepickerInput\n [minDate]=\"skyComponentProperties.minDate\"\n [maxDate]=\"skyComponentProperties.maxDate\"\n [dateFormat]=\"skyComponentProperties.dateFormat\"\n [startingDay]=\"skyComponentProperties.startingDay\"\n [skyDatepickerNoValidate]=\"skyComponentProperties.skyDatepickerNoValidate\"\n [style.height.px]=\"rowHeightWithoutBorders\"\n #skyCellEditorDatepickerInput\n />\n </sky-datepicker>\n</div>\n", styles: [".sky-ag-grid-cell-editor-datepicker{position:relative;top:1px;left:1px}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{box-shadow:none;border-width:1px;border-style:solid;border-color:transparent #cdcfd2 transparent transparent}.sky-ag-grid-cell-editor-datepicker sky-datepicker .sky-input-group-datepicker-btn{border-radius:0}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker{position:static;top:initial;left:initial}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{border-radius:0;border:1px solid #1870B8}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:2px!important}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker{position:static;top:initial;left:initial}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{border-radius:0;border:1px solid #1870B8}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:2px!important}\n"], dependencies: [{ kind: "component", type: i2$2.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange"] }, { kind: "directive", type: i2$2.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
420
|
+
}
|
|
421
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, decorators: [{
|
|
422
|
+
type: Component,
|
|
423
|
+
args: [{ selector: 'sky-ag-grid-cell-editor-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"sky-ag-grid-cell-editor-datepicker\"\n [formGroup]=\"editorForm\"\n [style.width.px]=\"columnWidthWithoutBorders\"\n>\n <sky-datepicker\n data-sky-id=\"cell-datepicker\"\n pickerClass=\"ag-custom-component-popup\"\n >\n <input\n formControlName=\"date\"\n skyDatepickerInput\n [minDate]=\"skyComponentProperties.minDate\"\n [maxDate]=\"skyComponentProperties.maxDate\"\n [dateFormat]=\"skyComponentProperties.dateFormat\"\n [startingDay]=\"skyComponentProperties.startingDay\"\n [skyDatepickerNoValidate]=\"skyComponentProperties.skyDatepickerNoValidate\"\n [style.height.px]=\"rowHeightWithoutBorders\"\n #skyCellEditorDatepickerInput\n />\n </sky-datepicker>\n</div>\n", styles: [".sky-ag-grid-cell-editor-datepicker{position:relative;top:1px;left:1px}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{box-shadow:none;border-width:1px;border-style:solid;border-color:transparent #cdcfd2 transparent transparent}.sky-ag-grid-cell-editor-datepicker sky-datepicker .sky-input-group-datepicker-btn{border-radius:0}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker{position:static;top:initial;left:initial}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{border-radius:0;border:1px solid #1870B8}:host-context(.sky-theme-modern) .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:2px!important}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker{position:static;top:initial;left:initial}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{border-radius:0;border:1px solid #1870B8}.sky-theme-modern .sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:2px!important}\n"] }]
|
|
424
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$2.SkyThemeService, decorators: [{
|
|
425
|
+
type: Optional
|
|
426
|
+
}] }]; }, propDecorators: { datepickerInput: [{
|
|
427
|
+
type: ViewChild,
|
|
428
|
+
args: ['skyCellEditorDatepickerInput', { read: ElementRef }]
|
|
429
|
+
}] } });
|
|
430
|
+
|
|
431
|
+
/**
|
|
432
|
+
* @internal
|
|
433
|
+
*/
|
|
434
|
+
class SkyAgGridCellEditorLookupComponent {
|
|
435
|
+
#params;
|
|
436
|
+
#triggerType;
|
|
437
|
+
#changeDetector;
|
|
438
|
+
#elementRef;
|
|
439
|
+
constructor(changeDetector, elementRef) {
|
|
440
|
+
this.isAlive = false;
|
|
441
|
+
this.editorForm = new UntypedFormGroup({
|
|
442
|
+
selection: new UntypedFormControl({
|
|
443
|
+
value: [],
|
|
444
|
+
disabled: false,
|
|
445
|
+
}),
|
|
446
|
+
});
|
|
447
|
+
this.useAsyncSearch = false;
|
|
448
|
+
this.#changeDetector = changeDetector;
|
|
449
|
+
this.#elementRef = elementRef;
|
|
450
|
+
}
|
|
451
|
+
agInit(params) {
|
|
452
|
+
this.#params = params;
|
|
453
|
+
if (!Array.isArray(this.#params.value)) {
|
|
454
|
+
throw new Error(`Lookup value must be an array`);
|
|
455
|
+
}
|
|
456
|
+
this.#triggerType = SkyAgGridCellEditorUtils.getEditorInitialAction(params);
|
|
457
|
+
const control = this.editorForm.get('selection');
|
|
458
|
+
if (control) {
|
|
459
|
+
switch (this.#triggerType) {
|
|
460
|
+
case SkyAgGridCellEditorInitialAction.Delete:
|
|
461
|
+
control.setValue([]);
|
|
462
|
+
break;
|
|
463
|
+
case SkyAgGridCellEditorInitialAction.Replace:
|
|
464
|
+
case SkyAgGridCellEditorInitialAction.Highlighted:
|
|
465
|
+
case SkyAgGridCellEditorInitialAction.Untouched:
|
|
466
|
+
default:
|
|
467
|
+
control.setValue(params.value);
|
|
468
|
+
break;
|
|
469
|
+
}
|
|
470
|
+
if (this.#params.skyComponentProperties?.disabled) {
|
|
471
|
+
control.disable();
|
|
472
|
+
}
|
|
473
|
+
}
|
|
474
|
+
this.skyComponentProperties = this.#updateComponentProperties(this.#params);
|
|
475
|
+
this.useAsyncSearch =
|
|
476
|
+
typeof this.skyComponentProperties.searchAsync === 'function';
|
|
477
|
+
this.isAlive = true;
|
|
478
|
+
this.width = this.#params.column.getActualWidth();
|
|
479
|
+
this.#params.column.addEventListener('uiColumnResized', (event) => {
|
|
480
|
+
this.width = event.column?.getActualWidth();
|
|
481
|
+
this.#changeDetector.markForCheck();
|
|
482
|
+
});
|
|
483
|
+
this.#changeDetector.markForCheck();
|
|
484
|
+
}
|
|
485
|
+
isCancelAfterEnd() {
|
|
486
|
+
// Shut down components to commit values before final value syncs to grid.
|
|
487
|
+
this.isAlive = false;
|
|
488
|
+
this.#changeDetector.detectChanges();
|
|
489
|
+
return false;
|
|
490
|
+
}
|
|
491
|
+
getGui() {
|
|
492
|
+
return this.#elementRef.nativeElement;
|
|
493
|
+
}
|
|
494
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
495
|
+
getValue() {
|
|
496
|
+
return this.editorForm.get('selection')?.value;
|
|
497
|
+
}
|
|
498
|
+
isPopup() {
|
|
499
|
+
return true;
|
|
500
|
+
}
|
|
501
|
+
afterGuiAttached() {
|
|
502
|
+
const lookupInput = this.#elementRef.nativeElement.querySelector('.sky-lookup-input');
|
|
503
|
+
lookupInput.focus();
|
|
504
|
+
if (this.#triggerType === SkyAgGridCellEditorInitialAction.Replace) {
|
|
505
|
+
lookupInput.select();
|
|
506
|
+
lookupInput.setRangeText(this.#params?.charPress);
|
|
507
|
+
// Ensure the cursor is at the end of the text.
|
|
508
|
+
lookupInput.setSelectionRange(lookupInput.value.length, lookupInput.value.length);
|
|
509
|
+
lookupInput.dispatchEvent(new Event('input'));
|
|
510
|
+
}
|
|
511
|
+
if (this.#triggerType === SkyAgGridCellEditorInitialAction.Highlighted) {
|
|
512
|
+
lookupInput.select();
|
|
513
|
+
}
|
|
514
|
+
}
|
|
515
|
+
#updateComponentProperties(params) {
|
|
516
|
+
const skyLookupProperties = params.skyComponentProperties;
|
|
517
|
+
return applySkyLookupPropertiesDefaults(skyLookupProperties);
|
|
518
|
+
}
|
|
519
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
520
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyAgGridCellEditorLookupComponent, selector: "sky-ag-grid-cell-editor-lookup", host: { properties: { "style.width.px": "this.width" } }, ngImport: i0, template: "<sky-input-box\n *ngIf=\"isAlive && useAsyncSearch\"\n [disabled]=\"skyComponentProperties?.disabled\"\n [formGroup]=\"editorForm\"\n>\n <sky-lookup\n [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n [ariaLabelledBy]=\"skyComponentProperties?.ariaLabelledBy\"\n [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n [data]=\"skyComponentProperties?.data\"\n [debounceTime]=\"skyComponentProperties?.debounceTime\"\n [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n [disabled]=\"skyComponentProperties?.disabled || false\"\n [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n formControlName=\"selection\"\n [idProperty]=\"skyComponentProperties?.idProperty\"\n [placeholderText]=\"skyComponentProperties?.placeholderText\"\n [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n [search]=\"skyComponentProperties?.search\"\n [searchFilters]=\"skyComponentProperties?.searchFilters\"\n [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n [searchTextMinimumCharacters]=\"\n skyComponentProperties?.searchTextMinimumCharacters\n \"\n (searchAsync)=\"skyComponentProperties?.searchAsync($event)\"\n [selectMode]=\"skyComponentProperties?.selectMode\"\n [showAddButton]=\"skyComponentProperties?.showAddButton\"\n [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n (addClick)=\"skyComponentProperties?.addClick($event)\"\n >\n </sky-lookup>\n</sky-input-box>\n<sky-input-box\n *ngIf=\"isAlive && !useAsyncSearch\"\n [disabled]=\"skyComponentProperties?.disabled\"\n [formGroup]=\"editorForm\"\n>\n <sky-lookup\n [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n [ariaLabelledBy]=\"skyComponentProperties?.ariaLabelledBy\"\n [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n [data]=\"skyComponentProperties?.data\"\n [debounceTime]=\"skyComponentProperties?.debounceTime\"\n [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n [disabled]=\"skyComponentProperties?.disabled || false\"\n [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n formControlName=\"selection\"\n [idProperty]=\"skyComponentProperties?.idProperty\"\n [placeholderText]=\"skyComponentProperties?.placeholderText\"\n [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n [search]=\"skyComponentProperties?.search\"\n [searchFilters]=\"skyComponentProperties?.searchFilters\"\n [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n [searchTextMinimumCharacters]=\"\n skyComponentProperties?.searchTextMinimumCharacters\n \"\n [selectMode]=\"skyComponentProperties?.selectMode\"\n [showAddButton]=\"skyComponentProperties?.showAddButton\"\n [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n (addClick)=\"skyComponentProperties?.addClick($event)\"\n >\n </sky-lookup>\n</sky-input-box>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent"] }, { kind: "component", type: i2.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
521
|
+
}
|
|
522
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, decorators: [{
|
|
523
|
+
type: Component,
|
|
524
|
+
args: [{ selector: 'sky-ag-grid-cell-editor-lookup', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-input-box\n *ngIf=\"isAlive && useAsyncSearch\"\n [disabled]=\"skyComponentProperties?.disabled\"\n [formGroup]=\"editorForm\"\n>\n <sky-lookup\n [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n [ariaLabelledBy]=\"skyComponentProperties?.ariaLabelledBy\"\n [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n [data]=\"skyComponentProperties?.data\"\n [debounceTime]=\"skyComponentProperties?.debounceTime\"\n [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n [disabled]=\"skyComponentProperties?.disabled || false\"\n [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n formControlName=\"selection\"\n [idProperty]=\"skyComponentProperties?.idProperty\"\n [placeholderText]=\"skyComponentProperties?.placeholderText\"\n [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n [search]=\"skyComponentProperties?.search\"\n [searchFilters]=\"skyComponentProperties?.searchFilters\"\n [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n [searchTextMinimumCharacters]=\"\n skyComponentProperties?.searchTextMinimumCharacters\n \"\n (searchAsync)=\"skyComponentProperties?.searchAsync($event)\"\n [selectMode]=\"skyComponentProperties?.selectMode\"\n [showAddButton]=\"skyComponentProperties?.showAddButton\"\n [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n (addClick)=\"skyComponentProperties?.addClick($event)\"\n >\n </sky-lookup>\n</sky-input-box>\n<sky-input-box\n *ngIf=\"isAlive && !useAsyncSearch\"\n [disabled]=\"skyComponentProperties?.disabled\"\n [formGroup]=\"editorForm\"\n>\n <sky-lookup\n [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n [ariaLabelledBy]=\"skyComponentProperties?.ariaLabelledBy\"\n [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n [data]=\"skyComponentProperties?.data\"\n [debounceTime]=\"skyComponentProperties?.debounceTime\"\n [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n [disabled]=\"skyComponentProperties?.disabled || false\"\n [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n formControlName=\"selection\"\n [idProperty]=\"skyComponentProperties?.idProperty\"\n [placeholderText]=\"skyComponentProperties?.placeholderText\"\n [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n [search]=\"skyComponentProperties?.search\"\n [searchFilters]=\"skyComponentProperties?.searchFilters\"\n [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n [searchTextMinimumCharacters]=\"\n skyComponentProperties?.searchTextMinimumCharacters\n \"\n [selectMode]=\"skyComponentProperties?.selectMode\"\n [showAddButton]=\"skyComponentProperties?.showAddButton\"\n [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n (addClick)=\"skyComponentProperties?.addClick($event)\"\n >\n </sky-lookup>\n</sky-input-box>\n", styles: [":host{display:block}\n"] }]
|
|
525
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { width: [{
|
|
526
|
+
type: HostBinding,
|
|
527
|
+
args: ['style.width.px']
|
|
528
|
+
}] } });
|
|
529
|
+
|
|
530
|
+
/**
|
|
531
|
+
* @internal
|
|
532
|
+
*/
|
|
533
|
+
class SkyAgGridCellEditorNumberComponent {
|
|
534
|
+
constructor() {
|
|
535
|
+
this.editorForm = new UntypedFormGroup({
|
|
536
|
+
number: new UntypedFormControl(),
|
|
537
|
+
});
|
|
538
|
+
}
|
|
539
|
+
#params;
|
|
540
|
+
#triggerType;
|
|
541
|
+
/**
|
|
542
|
+
* agInit is called by agGrid once after the editor is created and provides the editor with the information it needs.
|
|
543
|
+
* @param params The cell editor params that include data about the cell, column, row, and grid.
|
|
544
|
+
*/
|
|
545
|
+
agInit(params) {
|
|
546
|
+
this.#params = params;
|
|
547
|
+
this.#triggerType = SkyAgGridCellEditorUtils.getEditorInitialAction(params);
|
|
548
|
+
const control = this.editorForm.get('number');
|
|
549
|
+
if (control) {
|
|
550
|
+
switch (this.#triggerType) {
|
|
551
|
+
case SkyAgGridCellEditorInitialAction.Delete:
|
|
552
|
+
control.setValue(undefined);
|
|
553
|
+
break;
|
|
554
|
+
case SkyAgGridCellEditorInitialAction.Replace:
|
|
555
|
+
control.setValue(parseFloat(this.#params?.charPress) || undefined);
|
|
556
|
+
break;
|
|
557
|
+
case SkyAgGridCellEditorInitialAction.Highlighted:
|
|
558
|
+
case SkyAgGridCellEditorInitialAction.Untouched:
|
|
559
|
+
default:
|
|
560
|
+
control.setValue(params.value);
|
|
561
|
+
break;
|
|
562
|
+
}
|
|
563
|
+
}
|
|
564
|
+
this.max = params.skyComponentProperties?.max;
|
|
565
|
+
this.min = params.skyComponentProperties?.min;
|
|
566
|
+
this.columnHeader = this.#params.colDef.headerName;
|
|
567
|
+
this.rowNumber = this.#params.rowIndex + 1;
|
|
568
|
+
this.columnWidth = this.#params.column.getActualWidth();
|
|
569
|
+
this.rowHeightWithoutBorders = this.#params.node.rowHeight - 4;
|
|
570
|
+
}
|
|
571
|
+
/**
|
|
572
|
+
* afterGuiAttached is called by agGrid after the editor is rendered in the DOM. Once it is attached the editor is ready to be focused on.
|
|
573
|
+
*/
|
|
574
|
+
afterGuiAttached() {
|
|
575
|
+
if (this.input) {
|
|
576
|
+
this.input.nativeElement.focus();
|
|
577
|
+
if (this.#triggerType === SkyAgGridCellEditorInitialAction.Highlighted) {
|
|
578
|
+
this.input.nativeElement.select();
|
|
579
|
+
}
|
|
580
|
+
}
|
|
581
|
+
}
|
|
582
|
+
/**
|
|
583
|
+
* getValue is called by agGrid when editing is stopped to get the new value of the cell.
|
|
584
|
+
*/
|
|
585
|
+
getValue() {
|
|
586
|
+
const val = this.editorForm.get('number')?.value;
|
|
587
|
+
return val !== undefined && val !== null ? val : undefined;
|
|
588
|
+
}
|
|
589
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
590
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyAgGridCellEditorNumberComponent, selector: "sky-ag-grid-cell-editor-number", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorNumber"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n <input\n formControlName=\"number\"\n type=\"number\"\n [attr.aria-label]=\"\n 'sky_ag_grid_cell_editor_number_aria_label'\n | skyLibResources : columnHeader : rowNumber\n \"\n [style.width.px]=\"columnWidth\"\n [style.height.px]=\"rowHeightWithoutBorders\"\n [max]=\"max ?? null\"\n [min]=\"min ?? null\"\n #skyCellEditorNumber\n />\n</ng-container>\n", styles: ["input{border:none;text-align:right}\n"], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
591
|
+
}
|
|
592
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorNumberComponent, decorators: [{
|
|
593
|
+
type: Component,
|
|
594
|
+
args: [{ selector: 'sky-ag-grid-cell-editor-number', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [formGroup]=\"editorForm\">\n <input\n formControlName=\"number\"\n type=\"number\"\n [attr.aria-label]=\"\n 'sky_ag_grid_cell_editor_number_aria_label'\n | skyLibResources : columnHeader : rowNumber\n \"\n [style.width.px]=\"columnWidth\"\n [style.height.px]=\"rowHeightWithoutBorders\"\n [max]=\"max ?? null\"\n [min]=\"min ?? null\"\n #skyCellEditorNumber\n />\n</ng-container>\n", styles: ["input{border:none;text-align:right}\n"] }]
|
|
595
|
+
}], propDecorators: { input: [{
|
|
596
|
+
type: ViewChild,
|
|
597
|
+
args: ['skyCellEditorNumber', { read: ElementRef }]
|
|
598
|
+
}] } });
|
|
599
|
+
|
|
600
|
+
/**
|
|
601
|
+
* @internal
|
|
602
|
+
*/
|
|
603
|
+
class SkyAgGridCellEditorTextComponent {
|
|
604
|
+
constructor() {
|
|
605
|
+
this.editorForm = new UntypedFormGroup({
|
|
606
|
+
text: new UntypedFormControl(),
|
|
607
|
+
});
|
|
608
|
+
}
|
|
609
|
+
#params;
|
|
610
|
+
#triggerType;
|
|
611
|
+
/**
|
|
612
|
+
* agInit is called by agGrid once after the editor is created and provides the editor with the information it needs.
|
|
613
|
+
* @param params The cell editor params that include data about the cell, column, row, and grid.
|
|
614
|
+
*/
|
|
615
|
+
agInit(params) {
|
|
616
|
+
this.#params = params;
|
|
617
|
+
this.#triggerType = SkyAgGridCellEditorUtils.getEditorInitialAction(params);
|
|
618
|
+
const control = this.editorForm.get('text');
|
|
619
|
+
if (control) {
|
|
620
|
+
switch (this.#triggerType) {
|
|
621
|
+
case SkyAgGridCellEditorInitialAction.Delete:
|
|
622
|
+
control.setValue(undefined);
|
|
623
|
+
break;
|
|
624
|
+
case SkyAgGridCellEditorInitialAction.Replace:
|
|
625
|
+
control.setValue(params.charPress);
|
|
626
|
+
break;
|
|
627
|
+
case SkyAgGridCellEditorInitialAction.Highlighted:
|
|
628
|
+
case SkyAgGridCellEditorInitialAction.Untouched:
|
|
629
|
+
default:
|
|
630
|
+
control.setValue(params.value);
|
|
631
|
+
break;
|
|
632
|
+
}
|
|
633
|
+
}
|
|
634
|
+
this.maxlength = params.skyComponentProperties?.maxlength;
|
|
635
|
+
this.columnHeader = this.#params.colDef.headerName;
|
|
636
|
+
this.rowNumber = this.#params.rowIndex + 1;
|
|
637
|
+
this.columnWidth = this.#params.column.getActualWidth();
|
|
638
|
+
this.rowHeightWithoutBorders = this.#params.node.rowHeight - 4;
|
|
639
|
+
}
|
|
640
|
+
/**
|
|
641
|
+
* afterGuiAttached is called by agGrid after the editor is rendered in the DOM. Once it is attached the editor is ready to be focused on.
|
|
642
|
+
*/
|
|
643
|
+
afterGuiAttached() {
|
|
644
|
+
if (this.input) {
|
|
645
|
+
this.input.nativeElement.focus();
|
|
646
|
+
if (this.#triggerType === SkyAgGridCellEditorInitialAction.Highlighted) {
|
|
647
|
+
this.input.nativeElement.select();
|
|
648
|
+
}
|
|
649
|
+
}
|
|
650
|
+
}
|
|
651
|
+
/**
|
|
652
|
+
* getValue is called by agGrid when editing is stopped to get the new value of the cell.
|
|
653
|
+
*/
|
|
654
|
+
getValue() {
|
|
655
|
+
return this.editorForm.get('text')?.value || undefined;
|
|
656
|
+
}
|
|
657
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
658
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyAgGridCellEditorTextComponent, selector: "sky-ag-grid-cell-editor-text", viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorText"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n <input\n formControlName=\"text\"\n type=\"text\"\n [attr.aria-label]=\"\n 'sky_ag_grid_cell_editor_text_aria_label'\n | skyLibResources : columnHeader : rowNumber\n \"\n [style.width.px]=\"columnWidth\"\n [style.height.px]=\"rowHeightWithoutBorders\"\n [maxlength]=\"maxlength ?? null\"\n #skyCellEditorText\n />\n</ng-container>\n", styles: ["input{border:none;padding-left:11px}\n"], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
659
|
+
}
|
|
660
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorTextComponent, decorators: [{
|
|
661
|
+
type: Component,
|
|
662
|
+
args: [{ selector: 'sky-ag-grid-cell-editor-text', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [formGroup]=\"editorForm\">\n <input\n formControlName=\"text\"\n type=\"text\"\n [attr.aria-label]=\"\n 'sky_ag_grid_cell_editor_text_aria_label'\n | skyLibResources : columnHeader : rowNumber\n \"\n [style.width.px]=\"columnWidth\"\n [style.height.px]=\"rowHeightWithoutBorders\"\n [maxlength]=\"maxlength ?? null\"\n #skyCellEditorText\n />\n</ng-container>\n", styles: ["input{border:none;padding-left:11px}\n"] }]
|
|
663
|
+
}], propDecorators: { input: [{
|
|
664
|
+
type: ViewChild,
|
|
665
|
+
args: ['skyCellEditorText', { read: ElementRef }]
|
|
666
|
+
}] } });
|
|
667
|
+
|
|
668
|
+
/**
|
|
669
|
+
* @internal
|
|
670
|
+
*/
|
|
671
|
+
class SkyAgGridCellValidatorTooltipComponent {
|
|
672
|
+
set params(value) {
|
|
673
|
+
this.cellRendererParams = value;
|
|
674
|
+
/*istanbul ignore next*/
|
|
675
|
+
this.cellRendererParams?.api?.addEventListener(Events.EVENT_CELL_FOCUSED, (eventParams) => {
|
|
676
|
+
// We want to close any popovers that are opened when other cells are focused, but open a popover if the current cell is focused.
|
|
677
|
+
if (!(eventParams.column instanceof Column) ||
|
|
678
|
+
eventParams.column.getColId() !==
|
|
679
|
+
this.cellRendererParams?.column?.getColId() ||
|
|
680
|
+
eventParams.rowIndex !== this.cellRendererParams.rowIndex) {
|
|
681
|
+
this.hidePopover();
|
|
682
|
+
}
|
|
683
|
+
});
|
|
684
|
+
/*istanbul ignore next*/
|
|
685
|
+
this.cellRendererParams?.eGridCell?.addEventListener('keyup', (event) => {
|
|
686
|
+
if (['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp'].includes(event.key)) {
|
|
687
|
+
this.showPopover();
|
|
688
|
+
}
|
|
689
|
+
});
|
|
690
|
+
this.cellRendererParams?.eGridCell?.addEventListener('mouseenter', () => {
|
|
691
|
+
this.#scheduleDelayedPopover();
|
|
692
|
+
});
|
|
693
|
+
this.cellRendererParams?.eGridCell?.addEventListener('mouseleave', () => {
|
|
694
|
+
this.hidePopover();
|
|
695
|
+
});
|
|
696
|
+
/*istanbul ignore next*/
|
|
697
|
+
this.cellRendererParams?.api?.addEventListener(Events.EVENT_CELL_EDITING_STARTED, () => {
|
|
698
|
+
this.hidePopover();
|
|
699
|
+
});
|
|
700
|
+
if (typeof this.cellRendererParams?.skyComponentProperties
|
|
701
|
+
?.validatorMessage === 'function') {
|
|
702
|
+
this.validatorMessage =
|
|
703
|
+
this.cellRendererParams.skyComponentProperties.validatorMessage(this.cellRendererParams.value, this.cellRendererParams.data, this.cellRendererParams.rowIndex);
|
|
704
|
+
}
|
|
705
|
+
else {
|
|
706
|
+
this.validatorMessage =
|
|
707
|
+
this.cellRendererParams?.skyComponentProperties?.validatorMessage;
|
|
708
|
+
}
|
|
709
|
+
this.#changeDetector.markForCheck();
|
|
710
|
+
}
|
|
711
|
+
#hoverTimeout;
|
|
712
|
+
#changeDetector;
|
|
713
|
+
constructor(changeDetector) {
|
|
714
|
+
this.popoverMessageStream = new Subject();
|
|
715
|
+
this.#changeDetector = changeDetector;
|
|
716
|
+
}
|
|
717
|
+
hidePopover() {
|
|
718
|
+
this.#cancelDelayedPopover();
|
|
719
|
+
this.popoverMessageStream.next({ type: SkyPopoverMessageType.Close });
|
|
720
|
+
}
|
|
721
|
+
showPopover() {
|
|
722
|
+
this.#cancelDelayedPopover();
|
|
723
|
+
this.popoverMessageStream.next({ type: SkyPopoverMessageType.Open });
|
|
724
|
+
}
|
|
725
|
+
#scheduleDelayedPopover() {
|
|
726
|
+
/* istanbul ignore else */
|
|
727
|
+
if (!this.#hoverTimeout) {
|
|
728
|
+
this.#hoverTimeout = window.setTimeout(() => {
|
|
729
|
+
this.showPopover();
|
|
730
|
+
}, 300);
|
|
731
|
+
}
|
|
732
|
+
}
|
|
733
|
+
#cancelDelayedPopover() {
|
|
734
|
+
if (this.#hoverTimeout) {
|
|
735
|
+
window.clearTimeout(this.#hoverTimeout);
|
|
736
|
+
this.#hoverTimeout = undefined;
|
|
737
|
+
}
|
|
738
|
+
}
|
|
739
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
740
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: { params: "params" }, ngImport: i0, template: "<div\n [skyPopover]=\"validatorPopover\"\n [skyPopoverMessageStream]=\"popoverMessageStream\"\n class=\"sky-validator-cell\"\n>\n <ng-content></ng-content>\n <sky-status-indicator\n descriptionType=\"none\"\n indicatorType=\"danger\"\n class=\"sky-pull-right\"\n ></sky-status-indicator>\n</div>\n<sky-popover #validatorPopover popoverType=\"danger\">\n {{ validatorMessage }}\n</sky-popover>\n", styles: [":host div.sky-validator-cell{height:100%;width:100%}:host div.sky-validator-cell:focus{outline:none}\n"], dependencies: [{ kind: "component", type: i1$4.λ6, selector: "sky-popover", inputs: ["alignment", "dismissOnBlur", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i1$4.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { kind: "component", type: i3$2.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
741
|
+
}
|
|
742
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, decorators: [{
|
|
743
|
+
type: Component,
|
|
744
|
+
args: [{ selector: 'sky-ag-grid-cell-validator-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [skyPopover]=\"validatorPopover\"\n [skyPopoverMessageStream]=\"popoverMessageStream\"\n class=\"sky-validator-cell\"\n>\n <ng-content></ng-content>\n <sky-status-indicator\n descriptionType=\"none\"\n indicatorType=\"danger\"\n class=\"sky-pull-right\"\n ></sky-status-indicator>\n</div>\n<sky-popover #validatorPopover popoverType=\"danger\">\n {{ validatorMessage }}\n</sky-popover>\n", styles: [":host div.sky-validator-cell{height:100%;width:100%}:host div.sky-validator-cell:focus{outline:none}\n"] }]
|
|
745
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { params: [{
|
|
746
|
+
type: Input
|
|
747
|
+
}] } });
|
|
748
|
+
|
|
749
|
+
/**
|
|
750
|
+
* @internal
|
|
751
|
+
*/
|
|
752
|
+
class SkyAgGridCellRendererCurrencyComponent {
|
|
753
|
+
constructor() {
|
|
754
|
+
this.skyComponentProperties = {};
|
|
755
|
+
this.numericOptions = {};
|
|
756
|
+
}
|
|
757
|
+
set params(value) {
|
|
758
|
+
this.agInit(value);
|
|
759
|
+
}
|
|
760
|
+
/**
|
|
761
|
+
* agInit is called by agGrid once after the renderer is created and provides the renderer with the information it needs.
|
|
762
|
+
* @param params The cell renderer params that include data about the cell, column, row, and grid.
|
|
763
|
+
*/
|
|
764
|
+
agInit(params) {
|
|
765
|
+
this.#updateProperties(params);
|
|
766
|
+
}
|
|
767
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
768
|
+
refresh(params) {
|
|
769
|
+
return false;
|
|
770
|
+
}
|
|
771
|
+
#updateProperties(params) {
|
|
772
|
+
this.value = params.value;
|
|
773
|
+
this.columnHeader = params.colDef?.headerName;
|
|
774
|
+
this.rowNumber = params.rowIndex + 1;
|
|
775
|
+
this.columnWidth = params.column?.getActualWidth();
|
|
776
|
+
this.rowHeightWithoutBorders =
|
|
777
|
+
typeof params.node?.rowHeight === 'number'
|
|
778
|
+
? params.node?.rowHeight - 4
|
|
779
|
+
: undefined;
|
|
780
|
+
this.skyComponentProperties = params.skyComponentProperties || {};
|
|
781
|
+
this.skyComponentProperties.format = 'currency';
|
|
782
|
+
this.skyComponentProperties.minDigits = 2;
|
|
783
|
+
this.skyComponentProperties.truncate = false;
|
|
784
|
+
}
|
|
785
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
786
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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 {{\n value === undefined\n ? undefined\n : (value | skyNumeric : skyComponentProperties)\n }}\n</span>\n", styles: ["input{border:none;padding-left:11px}\n"], dependencies: [{ kind: "pipe", type: i1.SkyNumericPipe, name: "skyNumeric" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
787
|
+
}
|
|
788
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererCurrencyComponent, decorators: [{
|
|
789
|
+
type: Component,
|
|
790
|
+
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 {{\n value === undefined\n ? undefined\n : (value | skyNumeric : skyComponentProperties)\n }}\n</span>\n", styles: ["input{border:none;padding-left:11px}\n"] }]
|
|
791
|
+
}], propDecorators: { params: [{
|
|
792
|
+
type: Input
|
|
793
|
+
}] } });
|
|
794
|
+
|
|
795
|
+
/**
|
|
796
|
+
* @internal
|
|
797
|
+
*/
|
|
798
|
+
class SkyAgGridCellRendererCurrencyValidatorComponent {
|
|
799
|
+
set parameters(value) {
|
|
800
|
+
this.agInit(value);
|
|
801
|
+
}
|
|
802
|
+
#changeDetector;
|
|
803
|
+
constructor(changeDetector) {
|
|
804
|
+
this.#changeDetector = changeDetector;
|
|
805
|
+
}
|
|
806
|
+
/**
|
|
807
|
+
* agInit is called by agGrid once after the renderer is created and provides the renderer with the information it needs.
|
|
808
|
+
* @param params The cell renderer params that include data about the cell, column, row, and grid.
|
|
809
|
+
*/
|
|
810
|
+
agInit(params) {
|
|
811
|
+
this.cellRendererParams = params;
|
|
812
|
+
this.#changeDetector.markForCheck();
|
|
813
|
+
}
|
|
814
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
815
|
+
isNumeric(value) {
|
|
816
|
+
return !isNaN(parseFloat(value));
|
|
817
|
+
}
|
|
818
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
819
|
+
refresh(params) {
|
|
820
|
+
return false;
|
|
821
|
+
}
|
|
822
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererCurrencyValidatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
823
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyAgGridCellRendererCurrencyValidatorComponent, selector: "sky-ag-grid-cell-renderer-currency-validator", inputs: { parameters: "parameters" }, ngImport: i0, template: "<sky-ag-grid-cell-validator-tooltip\n *ngIf=\"cellRendererParams\"\n [params]=\"cellRendererParams\"\n>\n <sky-ag-grid-cell-renderer-currency\n *ngIf=\"isNumeric(cellRendererParams.value); else rawValue\"\n [params]=\"cellRendererParams\"\n ></sky-ag-grid-cell-renderer-currency>\n <ng-template #rawValue>{{ cellRendererParams.value }}</ng-template>\n</sky-ag-grid-cell-validator-tooltip>\n", dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: ["params"] }, { kind: "component", type: SkyAgGridCellRendererCurrencyComponent, selector: "sky-ag-grid-cell-renderer-currency", inputs: ["params"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
824
|
+
}
|
|
825
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererCurrencyValidatorComponent, decorators: [{
|
|
826
|
+
type: Component,
|
|
827
|
+
args: [{ selector: 'sky-ag-grid-cell-renderer-currency-validator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-ag-grid-cell-validator-tooltip\n *ngIf=\"cellRendererParams\"\n [params]=\"cellRendererParams\"\n>\n <sky-ag-grid-cell-renderer-currency\n *ngIf=\"isNumeric(cellRendererParams.value); else rawValue\"\n [params]=\"cellRendererParams\"\n ></sky-ag-grid-cell-renderer-currency>\n <ng-template #rawValue>{{ cellRendererParams.value }}</ng-template>\n</sky-ag-grid-cell-validator-tooltip>\n" }]
|
|
828
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { parameters: [{
|
|
829
|
+
type: Input
|
|
830
|
+
}] } });
|
|
831
|
+
|
|
832
|
+
/**
|
|
833
|
+
* @internal
|
|
834
|
+
*/
|
|
835
|
+
class SkyAgGridCellRendererLookupComponent {
|
|
836
|
+
#changeDetector;
|
|
837
|
+
constructor(changeDetector) {
|
|
838
|
+
this.value = '';
|
|
839
|
+
this.summaryCount = 0;
|
|
840
|
+
this.#changeDetector = changeDetector;
|
|
841
|
+
}
|
|
842
|
+
agInit(params) {
|
|
843
|
+
this.summaryCount = params.value?.length || 0;
|
|
844
|
+
this.value = `${params.valueFormatted}`;
|
|
845
|
+
this.#changeDetector.markForCheck();
|
|
846
|
+
}
|
|
847
|
+
refresh(params) {
|
|
848
|
+
this.agInit(params);
|
|
849
|
+
return true;
|
|
850
|
+
}
|
|
851
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererLookupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
852
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyAgGridCellRendererLookupComponent, selector: "sky-cell-renderer-lookup", ngImport: i0, template: "<ng-container *ngIf=\"summaryCount > 5; else showValue\">\n {{ 'skyux_lookup_tokens_summary' | skyLibResources : summaryCount }}\n</ng-container>\n<ng-template #showValue>{{ value }}</ng-template>\n", styles: [":host{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
853
|
+
}
|
|
854
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererLookupComponent, decorators: [{
|
|
855
|
+
type: Component,
|
|
856
|
+
args: [{ selector: 'sky-cell-renderer-lookup', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"summaryCount > 5; else showValue\">\n {{ 'skyux_lookup_tokens_summary' | skyLibResources : summaryCount }}\n</ng-container>\n<ng-template #showValue>{{ value }}</ng-template>\n", styles: [":host{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
|
|
857
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
|
|
858
|
+
|
|
859
|
+
/**
|
|
860
|
+
* @internal
|
|
861
|
+
*/
|
|
862
|
+
class SkyAgGridCellRendererRowSelectorComponent {
|
|
863
|
+
#params;
|
|
864
|
+
#changeDetector;
|
|
865
|
+
constructor(changeDetector) {
|
|
866
|
+
this.#changeDetector = changeDetector;
|
|
867
|
+
}
|
|
868
|
+
/**
|
|
869
|
+
* agInit is called by agGrid once after the cell is created and provides the renderer with the information it needs.
|
|
870
|
+
* @param params The cell renderer params that include data about the cell, column, row, and grid.
|
|
871
|
+
*/
|
|
872
|
+
agInit(params) {
|
|
873
|
+
this.#setParameters(params);
|
|
874
|
+
this.rowNode?.addEventListener(RowNode.EVENT_ROW_SELECTED, (event) => {
|
|
875
|
+
this.#rowSelectedListener(event);
|
|
876
|
+
});
|
|
877
|
+
}
|
|
878
|
+
/**
|
|
879
|
+
* Used by agGrid to update cell value after a user triggers a refresh.
|
|
880
|
+
* Returning true tells agGrid that the refresh was successful.
|
|
881
|
+
*/
|
|
882
|
+
refresh(params) {
|
|
883
|
+
this.#setParameters(params);
|
|
884
|
+
return true;
|
|
885
|
+
}
|
|
886
|
+
updateRow() {
|
|
887
|
+
if (this.rowNode) {
|
|
888
|
+
const rowSelected = this.rowNode.isSelected();
|
|
889
|
+
const rowChecked = !!this.checked;
|
|
890
|
+
if (rowSelected !== rowChecked) {
|
|
891
|
+
this.rowNode.setSelected(rowChecked);
|
|
892
|
+
}
|
|
893
|
+
if (this.dataField) {
|
|
894
|
+
this.rowNode.data[this.dataField] = this.checked;
|
|
895
|
+
}
|
|
896
|
+
this.#changeDetector.markForCheck();
|
|
897
|
+
}
|
|
898
|
+
}
|
|
899
|
+
#setParameters(params) {
|
|
900
|
+
this.#params = params;
|
|
901
|
+
this.dataField = this.#params.colDef?.field;
|
|
902
|
+
this.rowNode = this.#params.node;
|
|
903
|
+
this.rowNumber = this.#params.rowIndex + 1;
|
|
904
|
+
const rowSelected = this.#params.node.isSelected();
|
|
905
|
+
if (this.dataField) {
|
|
906
|
+
this.checked = !!this.#params.value;
|
|
907
|
+
if (rowSelected !== this.checked) {
|
|
908
|
+
this.rowNode.setSelected(this.checked);
|
|
909
|
+
}
|
|
910
|
+
}
|
|
911
|
+
else {
|
|
912
|
+
this.checked = rowSelected;
|
|
913
|
+
}
|
|
914
|
+
this.#changeDetector.markForCheck();
|
|
915
|
+
}
|
|
916
|
+
#rowSelectedListener(event) {
|
|
917
|
+
this.checked = event.node.isSelected();
|
|
918
|
+
if (this.rowNode && this.dataField) {
|
|
919
|
+
this.rowNode.data[this.dataField] = this.checked;
|
|
920
|
+
}
|
|
921
|
+
this.#changeDetector.markForCheck();
|
|
922
|
+
}
|
|
923
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererRowSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
924
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyAgGridCellRendererRowSelectorComponent, selector: "sky-ag-grid-cell-renderer-row-selector", ngImport: i0, template: "<sky-checkbox\n data-sky-id=\"row-checkbox\"\n [tabindex]=\"-1\"\n [label]=\"'sky_ag_grid_row_selector_aria_label' | skyLibResources : rowNumber\"\n [attr.aria-label]=\"\n 'sky_ag_grid_row_selector_aria_label' | skyLibResources : rowNumber\n \"\n [(ngModel)]=\"checked\"\n (change)=\"updateRow()\"\n>\n</sky-checkbox>\n", styles: [".sky-ag-grid-cell-row-selector .sky-switch-control{top:-6px}\n"], dependencies: [{ kind: "component", type: i3$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
925
|
+
}
|
|
926
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererRowSelectorComponent, decorators: [{
|
|
927
|
+
type: Component,
|
|
928
|
+
args: [{ selector: 'sky-ag-grid-cell-renderer-row-selector', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<sky-checkbox\n data-sky-id=\"row-checkbox\"\n [tabindex]=\"-1\"\n [label]=\"'sky_ag_grid_row_selector_aria_label' | skyLibResources : rowNumber\"\n [attr.aria-label]=\"\n 'sky_ag_grid_row_selector_aria_label' | skyLibResources : rowNumber\n \"\n [(ngModel)]=\"checked\"\n (change)=\"updateRow()\"\n>\n</sky-checkbox>\n", styles: [".sky-ag-grid-cell-row-selector .sky-switch-control{top:-6px}\n"] }]
|
|
929
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
|
|
930
|
+
|
|
931
|
+
/**
|
|
932
|
+
* @internal
|
|
933
|
+
*/
|
|
934
|
+
class SkyAgGridCellRendererValidatorTooltipComponent {
|
|
935
|
+
set params(value) {
|
|
936
|
+
this.agInit(value);
|
|
937
|
+
}
|
|
938
|
+
#changeDetector;
|
|
939
|
+
constructor(changeDetector) {
|
|
940
|
+
this.#changeDetector = changeDetector;
|
|
941
|
+
}
|
|
942
|
+
agInit(params) {
|
|
943
|
+
this.cellRendererParams = params;
|
|
944
|
+
if (typeof params.colDef?.valueFormatter === 'function') {
|
|
945
|
+
this.value = params.colDef.valueFormatter(params);
|
|
946
|
+
}
|
|
947
|
+
else {
|
|
948
|
+
this.value = params.value;
|
|
949
|
+
}
|
|
950
|
+
this.#changeDetector.markForCheck();
|
|
951
|
+
}
|
|
952
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
953
|
+
refresh(params) {
|
|
954
|
+
return false;
|
|
955
|
+
}
|
|
956
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererValidatorTooltipComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
957
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyAgGridCellRendererValidatorTooltipComponent, selector: "sky-ag-grid-cell-renderer-validator-tooltip", inputs: { params: "params" }, ngImport: i0, template: "<sky-ag-grid-cell-validator-tooltip [params]=\"cellRendererParams\">\n {{ value }}\n</sky-ag-grid-cell-validator-tooltip>\n", dependencies: [{ kind: "component", type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: ["params"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
958
|
+
}
|
|
959
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererValidatorTooltipComponent, decorators: [{
|
|
960
|
+
type: Component,
|
|
961
|
+
args: [{ selector: 'sky-ag-grid-cell-renderer-validator-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-ag-grid-cell-validator-tooltip [params]=\"cellRendererParams\">\n {{ value }}\n</sky-ag-grid-cell-validator-tooltip>\n" }]
|
|
962
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { params: [{
|
|
963
|
+
type: Input
|
|
964
|
+
}] } });
|
|
965
|
+
|
|
966
|
+
/**
|
|
967
|
+
* To display a help button beside the column group header, create a component that includes the help button element,
|
|
968
|
+
* such as `sky-help-inline`, include a `SkyAgGridHeaderGroupInfo` parameter in the constructor to access the column
|
|
969
|
+
* group information, such as display name, and add the component to the `headerComponentParams.inlineHelpComponent`
|
|
970
|
+
* property of the column definition.
|
|
971
|
+
*/
|
|
972
|
+
class SkyAgGridHeaderGroupInfo {
|
|
973
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridHeaderGroupInfo, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
974
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridHeaderGroupInfo }); }
|
|
975
|
+
}
|
|
976
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridHeaderGroupInfo, decorators: [{
|
|
977
|
+
type: Injectable
|
|
978
|
+
}] });
|
|
979
|
+
|
|
980
|
+
/**
|
|
981
|
+
* @internal
|
|
982
|
+
*/
|
|
983
|
+
class SkyAgGridHeaderGroupComponent {
|
|
984
|
+
#columnGroup;
|
|
985
|
+
#isExpandedSubject;
|
|
986
|
+
#subscriptions;
|
|
987
|
+
#changeDetector;
|
|
988
|
+
#dynamicComponentService;
|
|
989
|
+
#viewInitialized;
|
|
990
|
+
#agInitialized;
|
|
991
|
+
constructor(changeDetector, dynamicComponentService) {
|
|
992
|
+
this.params = undefined;
|
|
993
|
+
this.#columnGroup = undefined;
|
|
994
|
+
this.#isExpandedSubject = new BehaviorSubject(false);
|
|
995
|
+
this.#subscriptions = new Subscription();
|
|
996
|
+
this.#viewInitialized = false;
|
|
997
|
+
this.#agInitialized = false;
|
|
998
|
+
this.#changeDetector = changeDetector;
|
|
999
|
+
this.#dynamicComponentService = dynamicComponentService;
|
|
1000
|
+
this.isExpanded$ = this.#isExpandedSubject.asObservable();
|
|
1001
|
+
}
|
|
1002
|
+
ngAfterViewInit() {
|
|
1003
|
+
this.#viewInitialized = true;
|
|
1004
|
+
this.#updateInlineHelp();
|
|
1005
|
+
this.#changeDetector.markForCheck();
|
|
1006
|
+
}
|
|
1007
|
+
ngOnDestroy() {
|
|
1008
|
+
this.#subscriptions.unsubscribe();
|
|
1009
|
+
}
|
|
1010
|
+
agInit(params) {
|
|
1011
|
+
this.#agInitialized = true;
|
|
1012
|
+
this.params = params;
|
|
1013
|
+
this.#subscriptions.unsubscribe();
|
|
1014
|
+
if (!params) {
|
|
1015
|
+
return;
|
|
1016
|
+
}
|
|
1017
|
+
this.#subscriptions = new Subscription();
|
|
1018
|
+
this.#columnGroup = params.columnGroup.getProvidedColumnGroup();
|
|
1019
|
+
if (this.#columnGroup.isExpandable()) {
|
|
1020
|
+
this.#subscriptions.add(fromEventPattern((handler) => params.api.addEventListener(Events.EVENT_COLUMN_GROUP_OPENED, handler), (handler) => params.api.removeEventListener(Events.EVENT_COLUMN_GROUP_OPENED, handler)).subscribe((event) => {
|
|
1021
|
+
if (event.columnGroup === this.#columnGroup) {
|
|
1022
|
+
this.#isExpandedSubject.next(this.#columnGroup.isExpanded());
|
|
1023
|
+
}
|
|
1024
|
+
}));
|
|
1025
|
+
}
|
|
1026
|
+
this.#updateInlineHelp();
|
|
1027
|
+
this.#changeDetector.markForCheck();
|
|
1028
|
+
}
|
|
1029
|
+
setExpanded($event) {
|
|
1030
|
+
this.params?.setExpanded($event);
|
|
1031
|
+
}
|
|
1032
|
+
#updateInlineHelp() {
|
|
1033
|
+
if (!this.#viewInitialized || !this.#agInitialized) {
|
|
1034
|
+
return;
|
|
1035
|
+
}
|
|
1036
|
+
const colGroupDef = this.params?.columnGroup?.getColGroupDef();
|
|
1037
|
+
const inlineHelpComponent = colGroupDef?.headerGroupComponentParams?.inlineHelpComponent;
|
|
1038
|
+
if (inlineHelpComponent) {
|
|
1039
|
+
const headerGroupInfo = new SkyAgGridHeaderGroupInfo();
|
|
1040
|
+
headerGroupInfo.columnGroup = this.params?.columnGroup;
|
|
1041
|
+
headerGroupInfo.context = this.params?.context;
|
|
1042
|
+
headerGroupInfo.displayName = this.params?.displayName;
|
|
1043
|
+
this.#dynamicComponentService.createComponent(inlineHelpComponent, {
|
|
1044
|
+
providers: [
|
|
1045
|
+
{
|
|
1046
|
+
provide: SkyAgGridHeaderGroupInfo,
|
|
1047
|
+
useValue: headerGroupInfo,
|
|
1048
|
+
},
|
|
1049
|
+
],
|
|
1050
|
+
referenceEl: this.inlineHelpContainer?.nativeElement,
|
|
1051
|
+
location: SkyDynamicComponentLocation.ElementBottom,
|
|
1052
|
+
});
|
|
1053
|
+
}
|
|
1054
|
+
}
|
|
1055
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridHeaderGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1056
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyAgGridHeaderGroupComponent, selector: "sky-header-group", viewQueries: [{ propertyName: "inlineHelpContainer", first: true, predicate: ["inlineHelpContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<span class=\"header-group-text\" role=\"presentation\">{{\n params?.displayName\n}}</span>\n<button\n *ngIf=\"isExpanded$ | async; else openIcons\"\n class=\"sky-btn sky-btn-icon-borderless\"\n (click)=\"setExpanded(false)\"\n [attr.aria-label]=\"\n 'sky_ag_grid_column_group_header_collapse_aria_label'\n | skyLibResources : params?.displayName\n \"\n>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"angle-double-left\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"double-chevron-left\"\n iconType=\"skyux\"\n ></sky-icon>\n</button>\n<ng-template #openIcons>\n <button\n class=\"sky-btn sky-btn-icon-borderless\"\n (click)=\"setExpanded(true)\"\n [attr.aria-label]=\"\n 'sky_ag_grid_column_group_header_expand_aria_label'\n | skyLibResources : params?.displayName\n \"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"angle-double-right\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"double-chevron-right\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n</ng-template>\n<span class=\"sky-control-help-container\" #inlineHelpContainer></span>\n", styles: [":host{display:flex;max-width:100%;align-items:center;align-content:center}.header-group-text{flex-grow:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}button{cursor:pointer;margin-left:var(--sky-margin-inline-sm);flex-grow:0;flex-shrink:1}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1057
|
+
}
|
|
1058
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridHeaderGroupComponent, decorators: [{
|
|
1059
|
+
type: Component,
|
|
1060
|
+
args: [{ selector: 'sky-header-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"header-group-text\" role=\"presentation\">{{\n params?.displayName\n}}</span>\n<button\n *ngIf=\"isExpanded$ | async; else openIcons\"\n class=\"sky-btn sky-btn-icon-borderless\"\n (click)=\"setExpanded(false)\"\n [attr.aria-label]=\"\n 'sky_ag_grid_column_group_header_collapse_aria_label'\n | skyLibResources : params?.displayName\n \"\n>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"angle-double-left\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"double-chevron-left\"\n iconType=\"skyux\"\n ></sky-icon>\n</button>\n<ng-template #openIcons>\n <button\n class=\"sky-btn sky-btn-icon-borderless\"\n (click)=\"setExpanded(true)\"\n [attr.aria-label]=\"\n 'sky_ag_grid_column_group_header_expand_aria_label'\n | skyLibResources : params?.displayName\n \"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"angle-double-right\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"double-chevron-right\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n</ng-template>\n<span class=\"sky-control-help-container\" #inlineHelpContainer></span>\n", styles: [":host{display:flex;max-width:100%;align-items:center;align-content:center}.header-group-text{flex-grow:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}button{cursor:pointer;margin-left:var(--sky-margin-inline-sm);flex-grow:0;flex-shrink:1}\n"] }]
|
|
1061
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyDynamicComponentService }]; }, propDecorators: { inlineHelpContainer: [{
|
|
1062
|
+
type: ViewChild,
|
|
1063
|
+
args: ['inlineHelpContainer', { read: ElementRef, static: true }]
|
|
1064
|
+
}] } });
|
|
1065
|
+
|
|
1066
|
+
/**
|
|
1067
|
+
* To display a help button beside the column header, create a component that includes the help button element,
|
|
1068
|
+
* such as `sky-help-inline`, include a `SkyAgGridHeaderInfo` parameter in the constructor to access the column
|
|
1069
|
+
* information, such as display name, and add the component to the `headerComponentParams.inlineHelpComponent` property
|
|
1070
|
+
* of the column definition.
|
|
1071
|
+
*/
|
|
1072
|
+
class SkyAgGridHeaderInfo {
|
|
1073
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridHeaderInfo, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1074
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridHeaderInfo }); }
|
|
1075
|
+
}
|
|
1076
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridHeaderInfo, decorators: [{
|
|
1077
|
+
type: Injectable
|
|
1078
|
+
}] });
|
|
1079
|
+
|
|
1080
|
+
/**
|
|
1081
|
+
* @internal
|
|
1082
|
+
*/
|
|
1083
|
+
class SkyAgGridHeaderComponent {
|
|
1084
|
+
#subscriptions;
|
|
1085
|
+
#changeDetector;
|
|
1086
|
+
#dynamicComponentService;
|
|
1087
|
+
#inlineHelpComponentRef;
|
|
1088
|
+
#viewInitialized;
|
|
1089
|
+
#agInitialized;
|
|
1090
|
+
constructor(changeDetector, dynamicComponentService) {
|
|
1091
|
+
this.params = undefined;
|
|
1092
|
+
this.sorted = '';
|
|
1093
|
+
this.filterEnabled$ = new BehaviorSubject(false);
|
|
1094
|
+
this.sortOrder$ = new BehaviorSubject(undefined);
|
|
1095
|
+
this.sortIndexDisplay$ = new BehaviorSubject('');
|
|
1096
|
+
this.#subscriptions = new Subscription();
|
|
1097
|
+
this.#viewInitialized = false;
|
|
1098
|
+
this.#agInitialized = false;
|
|
1099
|
+
this.#changeDetector = changeDetector;
|
|
1100
|
+
this.#dynamicComponentService = dynamicComponentService;
|
|
1101
|
+
}
|
|
1102
|
+
ngAfterViewInit() {
|
|
1103
|
+
this.#viewInitialized = true;
|
|
1104
|
+
this.#updateInlineHelp();
|
|
1105
|
+
}
|
|
1106
|
+
ngOnDestroy() {
|
|
1107
|
+
this.#subscriptions.unsubscribe();
|
|
1108
|
+
}
|
|
1109
|
+
agInit(params) {
|
|
1110
|
+
this.#agInitialized = true;
|
|
1111
|
+
this.params = params;
|
|
1112
|
+
this.#subscriptions.unsubscribe();
|
|
1113
|
+
if (!params) {
|
|
1114
|
+
return;
|
|
1115
|
+
}
|
|
1116
|
+
this.columnLabel = params.displayName
|
|
1117
|
+
? undefined
|
|
1118
|
+
: params.column.getColDef().field;
|
|
1119
|
+
this.#subscriptions = new Subscription();
|
|
1120
|
+
if (params.column.isFilterAllowed()) {
|
|
1121
|
+
this.#subscriptions.add(fromEventPattern((handler) => params.column.addEventListener(Events.EVENT_FILTER_CHANGED, handler), (handler) => params.column.removeEventListener(Events.EVENT_FILTER_CHANGED, handler)).subscribe(() => {
|
|
1122
|
+
const isFilterActive = params.column.isFilterActive();
|
|
1123
|
+
if (isFilterActive !== this.filterEnabled$.getValue()) {
|
|
1124
|
+
this.filterEnabled$.next(isFilterActive);
|
|
1125
|
+
}
|
|
1126
|
+
}));
|
|
1127
|
+
}
|
|
1128
|
+
if (params.enableSorting) {
|
|
1129
|
+
// Column sort state changes
|
|
1130
|
+
this.#subscriptions.add(fromEventPattern((handler) => params.column.addEventListener(Events.EVENT_SORT_CHANGED, handler), (handler) => params.column.removeEventListener(Events.EVENT_SORT_CHANGED, handler)).subscribe(() => {
|
|
1131
|
+
this.#updateSort();
|
|
1132
|
+
}));
|
|
1133
|
+
// Other column sort state changes, for multi-column sorting
|
|
1134
|
+
this.#subscriptions.add(fromEventPattern((handler) => params.api.addEventListener(Events.EVENT_SORT_CHANGED, handler), (handler) => params.api.removeEventListener(Events.EVENT_SORT_CHANGED, handler)).subscribe(() => {
|
|
1135
|
+
this.#updateSortIndex();
|
|
1136
|
+
}));
|
|
1137
|
+
this.#updateSort();
|
|
1138
|
+
this.#updateSortIndex();
|
|
1139
|
+
}
|
|
1140
|
+
this.#updateInlineHelp();
|
|
1141
|
+
this.#changeDetector.markForCheck();
|
|
1142
|
+
}
|
|
1143
|
+
onMenuClick($event) {
|
|
1144
|
+
this.params?.showColumnMenu($event.target);
|
|
1145
|
+
}
|
|
1146
|
+
onSortRequested(event) {
|
|
1147
|
+
if (this.params?.enableSorting) {
|
|
1148
|
+
this.params?.progressSort(event.shiftKey);
|
|
1149
|
+
}
|
|
1150
|
+
}
|
|
1151
|
+
refresh(params) {
|
|
1152
|
+
this.agInit(params);
|
|
1153
|
+
return false;
|
|
1154
|
+
}
|
|
1155
|
+
#updateInlineHelp() {
|
|
1156
|
+
if (!this.#viewInitialized || !this.#agInitialized) {
|
|
1157
|
+
return;
|
|
1158
|
+
}
|
|
1159
|
+
const inlineHelpComponent = this.params?.inlineHelpComponent;
|
|
1160
|
+
if (inlineHelpComponent &&
|
|
1161
|
+
(!this.#inlineHelpComponentRef ||
|
|
1162
|
+
this.#inlineHelpComponentRef.componentType !== inlineHelpComponent)) {
|
|
1163
|
+
this.#dynamicComponentService.removeComponent(this.#inlineHelpComponentRef);
|
|
1164
|
+
const headerInfo = new SkyAgGridHeaderInfo();
|
|
1165
|
+
headerInfo.column = this.params?.column;
|
|
1166
|
+
headerInfo.context = this.params?.context;
|
|
1167
|
+
headerInfo.displayName = this.params?.displayName;
|
|
1168
|
+
this.#inlineHelpComponentRef =
|
|
1169
|
+
this.#dynamicComponentService.createComponent(inlineHelpComponent, {
|
|
1170
|
+
providers: [
|
|
1171
|
+
{
|
|
1172
|
+
provide: SkyAgGridHeaderInfo,
|
|
1173
|
+
useValue: headerInfo,
|
|
1174
|
+
},
|
|
1175
|
+
],
|
|
1176
|
+
referenceEl: this.inlineHelpContainer?.nativeElement,
|
|
1177
|
+
location: SkyDynamicComponentLocation.ElementBottom,
|
|
1178
|
+
});
|
|
1179
|
+
}
|
|
1180
|
+
else if (!inlineHelpComponent) {
|
|
1181
|
+
this.#dynamicComponentService.removeComponent(this.#inlineHelpComponentRef);
|
|
1182
|
+
}
|
|
1183
|
+
}
|
|
1184
|
+
#updateSort() {
|
|
1185
|
+
this.sortOrder$.next(this.params?.column.getSort() || undefined);
|
|
1186
|
+
}
|
|
1187
|
+
#updateSortIndex() {
|
|
1188
|
+
const sortIndex = this.params?.column.getSortIndex();
|
|
1189
|
+
const otherSortColumns = this.params?.columnApi
|
|
1190
|
+
?.getColumns()
|
|
1191
|
+
?.some((column) => column.getColId() !== this.params?.column.getColId() &&
|
|
1192
|
+
!!column.getSort());
|
|
1193
|
+
if (sortIndex !== undefined && sortIndex !== null && otherSortColumns) {
|
|
1194
|
+
this.sortIndexDisplay$.next(`${sortIndex + 1}`);
|
|
1195
|
+
}
|
|
1196
|
+
else {
|
|
1197
|
+
this.sortIndexDisplay$.next('');
|
|
1198
|
+
}
|
|
1199
|
+
}
|
|
1200
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1201
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyAgGridHeaderComponent, selector: "sky-ag-grid-header", host: { properties: { "attr.title": "this.columnLabel" } }, viewQueries: [{ propertyName: "inlineHelpContainer", first: true, predicate: ["inlineHelpContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"ag-cell-label-container\" role=\"presentation\">\n <span\n *ngIf=\"params?.enableMenu\"\n class=\"ag-header-icon ag-header-cell-menu-button\"\n aria-hidden=\"true\"\n (click)=\"onMenuClick($event)\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"ellipsis-h\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"ellipsis\"\n iconType=\"skyux\"\n ></sky-icon>\n </span>\n <ng-template #notSortingHeader>\n <span class=\"ag-header-cell-text\">{{ params?.displayName }}</span>\n </ng-template>\n <div class=\"ag-header-cell-label\" role=\"presentation\">\n <span class=\"ag-header-cell-label-and-icons\">\n <button\n *ngIf=\"params?.enableSorting; else notSortingHeader\"\n class=\"ag-header-cell-text ag-header-cell-label-sortable sky-btn-link-inline\"\n type=\"button\"\n [innerText]=\"params?.displayName\"\n (click)=\"onSortRequested($event)\"\n ></button>\n <span\n *ngIf=\"filterEnabled$ | async\"\n class=\"ag-header-icon ag-header-label-icon ag-filter-icon\"\n aria-hidden=\"true\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"filter\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"filter\"\n iconType=\"skyux\"\n ></sky-icon>\n </span>\n <span *ngIf=\"params?.enableSorting\" class=\"ag-sort-indicator-container\">\n <ng-container *skyThemeIf=\"'default'\">\n <sky-icon\n *ngIf=\"(sortOrder$ | async) === 'desc'\"\n icon=\"caret-down\"\n class=\"ag-header-label-icon\"\n ></sky-icon>\n <sky-icon\n *ngIf=\"(sortOrder$ | async) === 'asc'\"\n icon=\"caret-up\"\n class=\"ag-header-label-icon\"\n ></sky-icon>\n </ng-container>\n <ng-container *skyThemeIf=\"'modern'\">\n <sky-icon\n *ngIf=\"(sortOrder$ | async) === 'desc'\"\n icon=\"chevron-down\"\n iconType=\"skyux\"\n class=\"ag-header-label-icon\"\n ></sky-icon>\n <sky-icon\n *ngIf=\"(sortOrder$ | async) === 'asc'\"\n icon=\"chevron-up\"\n iconType=\"skyux\"\n class=\"ag-header-label-icon\"\n ></sky-icon>\n </ng-container>\n <span\n *ngIf=\"sortIndexDisplay$ | async as sortIndexDisplay\"\n class=\"ag-sort-indicator-icon ag-sort-order\"\n aria-hidden=\"true\"\n >{{ sortIndexDisplay }}</span\n >\n </span>\n </span>\n <span class=\"sky-control-help-container\" #inlineHelpContainer></span>\n </div>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;max-width:100%;height:100%;align-items:center;align-content:center}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned){flex-direction:row-reverse}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .sky-control-help-container{order:0}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .ag-header-cell-label-and-icons{order:1}button.ag-header-cell-label{text-transform:inherit;max-width:100%}.ag-cell-label-container{padding:0;gap:var(--sky-margin-inline-xs)}.ag-header-cell-label{padding-right:0;padding-left:0}.ag-header-cell-label .ag-header-cell-label-and-icons{display:flex;flex-wrap:nowrap;flex-direction:row;overflow:hidden;gap:var(--sky-margin-inline-xs)}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-cell-text{flex-grow:0;flex-shrink:1}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container:empty{display:none}button{cursor:pointer;flex-grow:0;flex-shrink:1;text-transform:inherit}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1202
|
+
}
|
|
1203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridHeaderComponent, decorators: [{
|
|
1204
|
+
type: Component,
|
|
1205
|
+
args: [{ selector: 'sky-ag-grid-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ag-cell-label-container\" role=\"presentation\">\n <span\n *ngIf=\"params?.enableMenu\"\n class=\"ag-header-icon ag-header-cell-menu-button\"\n aria-hidden=\"true\"\n (click)=\"onMenuClick($event)\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"ellipsis-h\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"ellipsis\"\n iconType=\"skyux\"\n ></sky-icon>\n </span>\n <ng-template #notSortingHeader>\n <span class=\"ag-header-cell-text\">{{ params?.displayName }}</span>\n </ng-template>\n <div class=\"ag-header-cell-label\" role=\"presentation\">\n <span class=\"ag-header-cell-label-and-icons\">\n <button\n *ngIf=\"params?.enableSorting; else notSortingHeader\"\n class=\"ag-header-cell-text ag-header-cell-label-sortable sky-btn-link-inline\"\n type=\"button\"\n [innerText]=\"params?.displayName\"\n (click)=\"onSortRequested($event)\"\n ></button>\n <span\n *ngIf=\"filterEnabled$ | async\"\n class=\"ag-header-icon ag-header-label-icon ag-filter-icon\"\n aria-hidden=\"true\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"filter\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"filter\"\n iconType=\"skyux\"\n ></sky-icon>\n </span>\n <span *ngIf=\"params?.enableSorting\" class=\"ag-sort-indicator-container\">\n <ng-container *skyThemeIf=\"'default'\">\n <sky-icon\n *ngIf=\"(sortOrder$ | async) === 'desc'\"\n icon=\"caret-down\"\n class=\"ag-header-label-icon\"\n ></sky-icon>\n <sky-icon\n *ngIf=\"(sortOrder$ | async) === 'asc'\"\n icon=\"caret-up\"\n class=\"ag-header-label-icon\"\n ></sky-icon>\n </ng-container>\n <ng-container *skyThemeIf=\"'modern'\">\n <sky-icon\n *ngIf=\"(sortOrder$ | async) === 'desc'\"\n icon=\"chevron-down\"\n iconType=\"skyux\"\n class=\"ag-header-label-icon\"\n ></sky-icon>\n <sky-icon\n *ngIf=\"(sortOrder$ | async) === 'asc'\"\n icon=\"chevron-up\"\n iconType=\"skyux\"\n class=\"ag-header-label-icon\"\n ></sky-icon>\n </ng-container>\n <span\n *ngIf=\"sortIndexDisplay$ | async as sortIndexDisplay\"\n class=\"ag-sort-indicator-icon ag-sort-order\"\n aria-hidden=\"true\"\n >{{ sortIndexDisplay }}</span\n >\n </span>\n </span>\n <span class=\"sky-control-help-container\" #inlineHelpContainer></span>\n </div>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;max-width:100%;height:100%;align-items:center;align-content:center}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned){flex-direction:row-reverse}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .sky-control-help-container{order:0}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .ag-header-cell-label-and-icons{order:1}button.ag-header-cell-label{text-transform:inherit;max-width:100%}.ag-cell-label-container{padding:0;gap:var(--sky-margin-inline-xs)}.ag-header-cell-label{padding-right:0;padding-left:0}.ag-header-cell-label .ag-header-cell-label-and-icons{display:flex;flex-wrap:nowrap;flex-direction:row;overflow:hidden;gap:var(--sky-margin-inline-xs)}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-cell-text{flex-grow:0;flex-shrink:1}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container:empty{display:none}button{cursor:pointer;flex-grow:0;flex-shrink:1;text-transform:inherit}\n"] }]
|
|
1206
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyDynamicComponentService }]; }, propDecorators: { columnLabel: [{
|
|
1207
|
+
type: HostBinding,
|
|
1208
|
+
args: ['attr.title']
|
|
1209
|
+
}], inlineHelpContainer: [{
|
|
1210
|
+
type: ViewChild,
|
|
1211
|
+
args: ['inlineHelpContainer', { read: ElementRef, static: true }]
|
|
1212
|
+
}] } });
|
|
1213
|
+
|
|
1214
|
+
const iconMap = {
|
|
1215
|
+
sortDescending: {
|
|
1216
|
+
faIcon: 'caret-down',
|
|
1217
|
+
skyIcon: 'chevron-down',
|
|
1218
|
+
},
|
|
1219
|
+
sortAscending: {
|
|
1220
|
+
faIcon: 'caret-up',
|
|
1221
|
+
skyIcon: 'chevron-up',
|
|
1222
|
+
},
|
|
1223
|
+
columnMoveMove: {
|
|
1224
|
+
faIcon: 'arrows',
|
|
1225
|
+
},
|
|
1226
|
+
columnMoveHide: {
|
|
1227
|
+
faIcon: 'eye-slash',
|
|
1228
|
+
skyIcon: 'hide',
|
|
1229
|
+
},
|
|
1230
|
+
columnMoveLeft: {
|
|
1231
|
+
faIcon: 'arrows',
|
|
1232
|
+
},
|
|
1233
|
+
columnMoveRight: {
|
|
1234
|
+
faIcon: 'arrows',
|
|
1235
|
+
},
|
|
1236
|
+
columnMoveGroup: {
|
|
1237
|
+
faIcon: 'arrows',
|
|
1238
|
+
},
|
|
1239
|
+
columnMovePin: {
|
|
1240
|
+
faIcon: 'arrows',
|
|
1241
|
+
},
|
|
1242
|
+
columnGroupOpened: {
|
|
1243
|
+
faIcon: 'caret-right',
|
|
1244
|
+
skyIcon: 'double-chevron-right',
|
|
1245
|
+
},
|
|
1246
|
+
columnGroupClosed: {
|
|
1247
|
+
faIcon: 'caret-left',
|
|
1248
|
+
skyIcon: 'double-chevron-left',
|
|
1249
|
+
},
|
|
1250
|
+
dropNotAllowed: {
|
|
1251
|
+
faIcon: 'ban',
|
|
1252
|
+
skyIcon: 'ban',
|
|
1253
|
+
},
|
|
1254
|
+
menu: {
|
|
1255
|
+
faIcon: 'menu',
|
|
1256
|
+
skyIcon: 'bars-2',
|
|
1257
|
+
},
|
|
1258
|
+
filter: {
|
|
1259
|
+
faIcon: 'filter',
|
|
1260
|
+
skyIcon: 'filter',
|
|
1261
|
+
},
|
|
1262
|
+
columns: {
|
|
1263
|
+
faIcon: 'columns',
|
|
1264
|
+
skyIcon: 'columns',
|
|
1265
|
+
},
|
|
1266
|
+
last: {
|
|
1267
|
+
faIcon: 'step-forward',
|
|
1268
|
+
skyIcon: 'double-chevron-right',
|
|
1269
|
+
},
|
|
1270
|
+
next: {
|
|
1271
|
+
faIcon: 'caret-right',
|
|
1272
|
+
skyIcon: 'chevron-right',
|
|
1273
|
+
},
|
|
1274
|
+
previous: {
|
|
1275
|
+
faIcon: 'caret-left',
|
|
1276
|
+
skyIcon: 'chevron-left',
|
|
1277
|
+
},
|
|
1278
|
+
first: {
|
|
1279
|
+
faIcon: 'step-backward',
|
|
1280
|
+
skyIcon: 'double-chevron-left',
|
|
1281
|
+
},
|
|
1282
|
+
};
|
|
1283
|
+
|
|
1284
|
+
/**
|
|
1285
|
+
* @internal
|
|
1286
|
+
*/
|
|
1287
|
+
var SkyCellClass;
|
|
1288
|
+
(function (SkyCellClass) {
|
|
1289
|
+
SkyCellClass["Autocomplete"] = "sky-ag-grid-cell-autocomplete";
|
|
1290
|
+
SkyCellClass["Currency"] = "sky-ag-grid-cell-currency";
|
|
1291
|
+
SkyCellClass["Date"] = "sky-ag-grid-cell-date";
|
|
1292
|
+
SkyCellClass["Editable"] = "sky-ag-grid-cell-editable";
|
|
1293
|
+
SkyCellClass["Invalid"] = "sky-ag-grid-cell-invalid";
|
|
1294
|
+
SkyCellClass["Lookup"] = "sky-ag-grid-cell-lookup";
|
|
1295
|
+
SkyCellClass["Number"] = "sky-ag-grid-cell-number";
|
|
1296
|
+
SkyCellClass["RowSelector"] = "sky-ag-grid-cell-row-selector";
|
|
1297
|
+
SkyCellClass["Text"] = "sky-ag-grid-cell-text";
|
|
1298
|
+
SkyCellClass["Uneditable"] = "sky-ag-grid-cell-uneditable";
|
|
1299
|
+
})(SkyCellClass || (SkyCellClass = {}));
|
|
1300
|
+
|
|
1301
|
+
/**
|
|
1302
|
+
* These column types can be used by setting the AG Grid [column definition `type`](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing) to one of the following values.
|
|
1303
|
+
* <br/>
|
|
1304
|
+
* Any [SKY UX component](https://developer.blackbaud.com/skyux/components) can be made into a [cell editor](https://www.ag-grid.com/javascript-grid-cell-editor/) or [cell renderer](https://www.ag-grid.com/javascript-grid-cell-rendering-components/) component. If you would like to use a component that does not have a column definition yet, please consider [contributing it](https://developer.blackbaud.com/skyux/contribute/contribution-process) to the SKY UX data entry grid module, or [file an issue](https://developer.blackbaud.com/skyux/contribute/contribution-process/file-issue) in the [`@skyux/ag-grid` repo](https://github.com/blackbaud/skyux-ag-grid).
|
|
1305
|
+
*/
|
|
1306
|
+
var SkyCellType;
|
|
1307
|
+
(function (SkyCellType) {
|
|
1308
|
+
/**
|
|
1309
|
+
* **Edit mode**
|
|
1310
|
+
* <br/>
|
|
1311
|
+
* Cells in the column will be edited as [SKY UX autocomplete components](https://developer.blackbaud.com/skyux/components/autocomplete). You can set any of the autocomplete component's properties by passing `SkyCellEditorAutocompleteParams` in the [column definition's `cellEditorParams` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing). These params can be updated as other cell edits are made or [provided dynamically](https://www.ag-grid.com/javascript-grid-cell-editing/#dynamic-parameters) based on other cell values. See the demo for an example. Text can be entered and a value selected from the provided list.
|
|
1312
|
+
* <br/><br/>
|
|
1313
|
+
* **Read-only mode**
|
|
1314
|
+
* <br/>
|
|
1315
|
+
* Cells the column will display the currently selected value's name property by default. If the autocomplete needs to show a different property or needs to be formatted in any way, you can [define a `valueFormatter`](https://www.ag-grid.com/javascript-grid-value-formatters/) on the column definition.
|
|
1316
|
+
*/
|
|
1317
|
+
SkyCellType["Autocomplete"] = "skyCellAutocomplete";
|
|
1318
|
+
/**
|
|
1319
|
+
* **Edit mode**
|
|
1320
|
+
* <br/>
|
|
1321
|
+
* Cells in the column will be edited as a currency amount.
|
|
1322
|
+
* <br/><br/>
|
|
1323
|
+
* **Read-only mode**
|
|
1324
|
+
* <br/>
|
|
1325
|
+
* Formats the display as currency using [SKY UX numeric components](https://developer.blackbaud.com/skyux/components/numeric).
|
|
1326
|
+
*/
|
|
1327
|
+
SkyCellType["Currency"] = "skyCellCurrency";
|
|
1328
|
+
/**
|
|
1329
|
+
* **Edit and read-only modes**
|
|
1330
|
+
* <br/>
|
|
1331
|
+
* Combines SkyCellType.Currency and SkyCellType.Validator, where the value is displayed as a currency and passed to a validator function.
|
|
1332
|
+
*/
|
|
1333
|
+
SkyCellType["CurrencyValidator"] = "skyCellCurrencyValidator";
|
|
1334
|
+
/**
|
|
1335
|
+
* **Edit mode**
|
|
1336
|
+
* <br/>
|
|
1337
|
+
* Cells in the column will be edited as [SKY UX datepicker components](https://developer.blackbaud.com/skyux/components/datepicker). You can set any of the datepicker component's properties by passing `SkyCellEditorDatepickerParams` in the [column definition's `cellEditorParams` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing). These params can be updated as other cell edits are made or [provided dynamically](https://www.ag-grid.com/javascript-grid-cell-editing/#dynamic-parameters) based on other cell values. See the demo for an example. Date values can be entered.
|
|
1338
|
+
* <br/><br/>
|
|
1339
|
+
* **Read-only mode**
|
|
1340
|
+
* <br/>
|
|
1341
|
+
* Cells in the column will display the currently selected date formatted as `MM-DD-YYYY`, or the date format of the locale passed to `getGridOptions()`. If you would like to overwrite this format, you can [define a `valueFormatter`](https://www.ag-grid.com/javascript-grid-value-formatters/) on the column definition. See the demo for an example.
|
|
1342
|
+
*/
|
|
1343
|
+
SkyCellType["Date"] = "skyCellDate";
|
|
1344
|
+
/**
|
|
1345
|
+
* **Edit mode**
|
|
1346
|
+
* <br/>
|
|
1347
|
+
* Cells in the column will be edited as [SKY UX lookup components](https://developer.blackbaud.com/skyux-v5/components/lookup). You can set any of the lookup component's properties by passing `SkyCellEditorLookupParams` in the [column definition's `cellEditorParams` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing). These params can be updated as other cell edits are made or [provided dynamically](https://www.ag-grid.com/javascript-grid-cell-editing/#dynamic-parameters) based on other cell values. See the demo for an example. Text can be entered and a value selected from the provided list.
|
|
1348
|
+
* <br/><br/>
|
|
1349
|
+
* **Read-only mode**
|
|
1350
|
+
* <br/>
|
|
1351
|
+
* Cells the column will display, by default, either: the name(s) of the selected value(s) if there are less than 6, or a summary count of the values if there are more than 5. If the lookup needs to show a different property or needs to be formatted in any way, you can [define a `valueFormatter`](https://www.ag-grid.com/javascript-grid-value-formatters/) on the column definition.
|
|
1352
|
+
*/
|
|
1353
|
+
SkyCellType["Lookup"] = "skyCellLookup";
|
|
1354
|
+
/**
|
|
1355
|
+
* **Edit mode**
|
|
1356
|
+
* <br/>
|
|
1357
|
+
* Cells in the column will be edited as HTML number `inputs`. Only numbers can be entered.
|
|
1358
|
+
* <br/><br/>
|
|
1359
|
+
* **Read-only mode**
|
|
1360
|
+
* <br/>
|
|
1361
|
+
* Cells in the column will render as the number value.
|
|
1362
|
+
*/
|
|
1363
|
+
SkyCellType["Number"] = "skyCellNumber";
|
|
1364
|
+
/**
|
|
1365
|
+
* **Edit and read-only modes**
|
|
1366
|
+
* <br/>
|
|
1367
|
+
* Combines SkyCellType.Number and SkyCellType.Validator, where the value is displayed as a number and passed to a validator function.
|
|
1368
|
+
*/
|
|
1369
|
+
SkyCellType["NumberValidator"] = "skyCellNumberValidator";
|
|
1370
|
+
/**
|
|
1371
|
+
* **Edit and read-only modes**
|
|
1372
|
+
* <br/>
|
|
1373
|
+
* Cells in the column will render as [SKY UX checkbox components](https://developer.blackbaud.com/skyux/components/checkbox). It allows the user to select multiple rows, and adds a highlight to selected rows. The [Ag Grid `rowNode`](https://www.ag-grid.com/javascript-grid-row-node/) will be updated to reflect the selected state.
|
|
1374
|
+
*/
|
|
1375
|
+
SkyCellType["RowSelector"] = "skyCellRowSelector";
|
|
1376
|
+
/**
|
|
1377
|
+
* **Edit mode**
|
|
1378
|
+
* <br/>
|
|
1379
|
+
* Cells in the column will be edited as HTML text `inputs`. Any characters can be entered.
|
|
1380
|
+
* <br/><br/>
|
|
1381
|
+
* **Read-only mode**
|
|
1382
|
+
* <br/>
|
|
1383
|
+
* Cells in the column will render as their string value.
|
|
1384
|
+
*/
|
|
1385
|
+
SkyCellType["Text"] = "skyCellText";
|
|
1386
|
+
/**
|
|
1387
|
+
* **Edit and read-only modes**
|
|
1388
|
+
* <br/>
|
|
1389
|
+
* Cells in the column will be passed to a validator function that flags erroneous entries. You can set the validator function and message by passing them to [column definition's `cellRendererParams` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing) as `skyComponentProperties.validator` and `skyComponentProperties.validatorMessage`. SkyCellType.Validator can be combined with other cell types, such as SkyCellType.Autocomplete or SkyCellType.Date, by using the array syntax for the [column definition's `type` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing).
|
|
1390
|
+
*/
|
|
1391
|
+
SkyCellType["Validator"] = "skyCellValidator";
|
|
1392
|
+
})(SkyCellType || (SkyCellType = {}));
|
|
1393
|
+
|
|
1394
|
+
/**
|
|
1395
|
+
* @internal
|
|
1396
|
+
*/
|
|
1397
|
+
var SkyHeaderClass;
|
|
1398
|
+
(function (SkyHeaderClass) {
|
|
1399
|
+
SkyHeaderClass["RightAligned"] = "sky-ag-grid-header-right-aligned";
|
|
1400
|
+
})(SkyHeaderClass || (SkyHeaderClass = {}));
|
|
1401
|
+
|
|
1402
|
+
function autocompleteComparator(value1, value2) {
|
|
1403
|
+
if (value1 && value2) {
|
|
1404
|
+
if (value1.name > value2.name) {
|
|
1405
|
+
return 1;
|
|
1406
|
+
}
|
|
1407
|
+
if (value1.name < value2.name) {
|
|
1408
|
+
return -1;
|
|
1409
|
+
}
|
|
1410
|
+
return 0;
|
|
1411
|
+
}
|
|
1412
|
+
return value1 ? 1 : -1;
|
|
1413
|
+
}
|
|
1414
|
+
function autocompleteFormatter(params) {
|
|
1415
|
+
return params.value && params.value.name;
|
|
1416
|
+
}
|
|
1417
|
+
function dateComparator(date1, date2) {
|
|
1418
|
+
let date1value = date1;
|
|
1419
|
+
let date2value = date2;
|
|
1420
|
+
if (typeof date1value === 'string') {
|
|
1421
|
+
date1value = new Date(date1);
|
|
1422
|
+
}
|
|
1423
|
+
if (typeof date2value === 'string') {
|
|
1424
|
+
date2value = new Date(date2);
|
|
1425
|
+
}
|
|
1426
|
+
if (date1value && date2value) {
|
|
1427
|
+
if (date1value > date2value) {
|
|
1428
|
+
return 1;
|
|
1429
|
+
}
|
|
1430
|
+
if (date1value < date2value) {
|
|
1431
|
+
return -1;
|
|
1432
|
+
}
|
|
1433
|
+
return 0;
|
|
1434
|
+
}
|
|
1435
|
+
return date1value ? 1 : -1;
|
|
1436
|
+
}
|
|
1437
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1438
|
+
function getValidatorCellRendererSelector(component, fallback) {
|
|
1439
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1440
|
+
return (params) => {
|
|
1441
|
+
if (params.colDef &&
|
|
1442
|
+
typeof params.colDef.cellRendererParams?.skyComponentProperties
|
|
1443
|
+
?.validator === 'function') {
|
|
1444
|
+
if (!params.colDef.cellRendererParams.skyComponentProperties.validator(params.value, params.data, params.rowIndex)) {
|
|
1445
|
+
return {
|
|
1446
|
+
component,
|
|
1447
|
+
params: {
|
|
1448
|
+
...params.colDef.cellRendererParams,
|
|
1449
|
+
},
|
|
1450
|
+
};
|
|
1451
|
+
}
|
|
1452
|
+
}
|
|
1453
|
+
return fallback;
|
|
1454
|
+
};
|
|
1455
|
+
}
|
|
1456
|
+
let rowNodeId = -1;
|
|
1457
|
+
/**
|
|
1458
|
+
* `SkyAgGridService` provides methods to get AG Grid `gridOptions` to ensure grids match SKY UX functionality. The `gridOptions` can be overridden, and include registered SKY UX column types.
|
|
1459
|
+
*/
|
|
1460
|
+
class SkyAgGridService {
|
|
1461
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1462
|
+
#keyMap = new WeakMap();
|
|
1463
|
+
#ngUnsubscribe = new Subject();
|
|
1464
|
+
#currentTheme = undefined;
|
|
1465
|
+
#agGridAdapterService;
|
|
1466
|
+
#resources;
|
|
1467
|
+
constructor(agGridAdapterService, themeSvc, resources) {
|
|
1468
|
+
this.#agGridAdapterService = agGridAdapterService;
|
|
1469
|
+
this.#resources = resources;
|
|
1470
|
+
/*istanbul ignore else*/
|
|
1471
|
+
if (themeSvc) {
|
|
1472
|
+
themeSvc.settingsChange
|
|
1473
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
1474
|
+
.subscribe((settingsChange) => {
|
|
1475
|
+
this.#currentTheme = settingsChange.currentSettings;
|
|
1476
|
+
});
|
|
1477
|
+
}
|
|
1478
|
+
}
|
|
1479
|
+
ngOnDestroy() {
|
|
1480
|
+
this.#ngUnsubscribe.next();
|
|
1481
|
+
this.#ngUnsubscribe.complete();
|
|
1482
|
+
}
|
|
1483
|
+
/**
|
|
1484
|
+
* Returns [AG Grid `gridOptions`](https://www.ag-grid.com/javascript-grid-properties/) with default SKY UX options, styling, and cell renderers registered for read-only grids.
|
|
1485
|
+
* @param args
|
|
1486
|
+
* @returns
|
|
1487
|
+
*/
|
|
1488
|
+
getGridOptions(args) {
|
|
1489
|
+
const defaultGridOptions = this.#getDefaultGridOptions(args);
|
|
1490
|
+
const mergedGridOptions = this.#mergeGridOptions(defaultGridOptions, args.gridOptions);
|
|
1491
|
+
return mergedGridOptions;
|
|
1492
|
+
}
|
|
1493
|
+
/**
|
|
1494
|
+
* Returns [AG Grid `gridOptions`](https://www.ag-grid.com/javascript-grid-properties/) with default SKY UX options, styling, and cell editors registered for editable grids.
|
|
1495
|
+
* @param args
|
|
1496
|
+
* @returns
|
|
1497
|
+
*/
|
|
1498
|
+
getEditableGridOptions(args) {
|
|
1499
|
+
const defaultGridOptions = this.#getDefaultEditableGridOptions(args);
|
|
1500
|
+
const mergedGridOptions = this.#mergeGridOptions(defaultGridOptions, args.gridOptions);
|
|
1501
|
+
return mergedGridOptions;
|
|
1502
|
+
}
|
|
1503
|
+
getHeaderHeight() {
|
|
1504
|
+
return this.#currentTheme?.theme?.name === 'modern' ? 60 : 37;
|
|
1505
|
+
}
|
|
1506
|
+
#mergeGridOptions(defaultGridOptions, providedGridOptions) {
|
|
1507
|
+
const mergedGridOptions = {
|
|
1508
|
+
...defaultGridOptions,
|
|
1509
|
+
...providedGridOptions,
|
|
1510
|
+
components: {
|
|
1511
|
+
...providedGridOptions.components,
|
|
1512
|
+
// Apply default components last to prevent consumers from overwriting our component types.
|
|
1513
|
+
...defaultGridOptions.components,
|
|
1514
|
+
},
|
|
1515
|
+
columnTypes: {
|
|
1516
|
+
...providedGridOptions.columnTypes,
|
|
1517
|
+
// apply default second to prevent consumers from overwriting our default column types
|
|
1518
|
+
...defaultGridOptions.columnTypes,
|
|
1519
|
+
},
|
|
1520
|
+
defaultColDef: {
|
|
1521
|
+
...defaultGridOptions.defaultColDef,
|
|
1522
|
+
...providedGridOptions.defaultColDef,
|
|
1523
|
+
// allow consumers to override all defaultColDef properties except cellClassRules, which we reserve for styling
|
|
1524
|
+
cellClassRules: defaultGridOptions.defaultColDef?.cellClassRules,
|
|
1525
|
+
},
|
|
1526
|
+
defaultColGroupDef: {
|
|
1527
|
+
...defaultGridOptions.defaultColGroupDef,
|
|
1528
|
+
...providedGridOptions.defaultColGroupDef,
|
|
1529
|
+
},
|
|
1530
|
+
icons: {
|
|
1531
|
+
...defaultGridOptions.icons,
|
|
1532
|
+
...providedGridOptions.icons,
|
|
1533
|
+
},
|
|
1534
|
+
};
|
|
1535
|
+
// Prefer `getRowNodeId` over `getNodeId` if set by the consumer, for backward compatibility.
|
|
1536
|
+
if (mergedGridOptions.getRowNodeId) {
|
|
1537
|
+
delete mergedGridOptions.getRowId;
|
|
1538
|
+
}
|
|
1539
|
+
return mergedGridOptions;
|
|
1540
|
+
}
|
|
1541
|
+
#getDefaultGridOptions(args) {
|
|
1542
|
+
// cellClassRules can be functions or string expressions
|
|
1543
|
+
const cellClassRuleTrueExpression = () => true;
|
|
1544
|
+
function getEditableFn(isUneditable) {
|
|
1545
|
+
return function (params) {
|
|
1546
|
+
let isEditable = params.colDef.editable;
|
|
1547
|
+
if (typeof isEditable === 'function') {
|
|
1548
|
+
const column = params.columnApi.getColumn(params.colDef.field);
|
|
1549
|
+
isEditable = isEditable({
|
|
1550
|
+
...params,
|
|
1551
|
+
column,
|
|
1552
|
+
});
|
|
1553
|
+
}
|
|
1554
|
+
return isUneditable ? !isEditable : !!isEditable;
|
|
1555
|
+
};
|
|
1556
|
+
}
|
|
1557
|
+
const editableCellClassRules = {
|
|
1558
|
+
[SkyCellClass.Editable]: getEditableFn(),
|
|
1559
|
+
[SkyCellClass.Uneditable]: getEditableFn(true),
|
|
1560
|
+
};
|
|
1561
|
+
function getValidatorFn() {
|
|
1562
|
+
return function (param) {
|
|
1563
|
+
if (param.colDef &&
|
|
1564
|
+
typeof param.colDef.cellRendererParams?.skyComponentProperties
|
|
1565
|
+
?.validator === 'function') {
|
|
1566
|
+
return !param.colDef.cellRendererParams.skyComponentProperties.validator(param.value, param.data, param.rowIndex);
|
|
1567
|
+
}
|
|
1568
|
+
return false;
|
|
1569
|
+
};
|
|
1570
|
+
}
|
|
1571
|
+
const validatorCellClassRules = {
|
|
1572
|
+
[SkyCellClass.Invalid]: getValidatorFn(),
|
|
1573
|
+
};
|
|
1574
|
+
const defaultSkyGridOptions = {
|
|
1575
|
+
columnTypes: {
|
|
1576
|
+
[SkyCellType.Autocomplete]: {
|
|
1577
|
+
cellClassRules: {
|
|
1578
|
+
[SkyCellClass.Autocomplete]: cellClassRuleTrueExpression,
|
|
1579
|
+
...editableCellClassRules,
|
|
1580
|
+
},
|
|
1581
|
+
cellEditor: SkyAgGridCellEditorAutocompleteComponent,
|
|
1582
|
+
valueFormatter: autocompleteFormatter,
|
|
1583
|
+
comparator: autocompleteComparator,
|
|
1584
|
+
minWidth: 185,
|
|
1585
|
+
},
|
|
1586
|
+
[SkyCellType.Currency]: {
|
|
1587
|
+
cellClassRules: {
|
|
1588
|
+
[SkyCellClass.Currency]: cellClassRuleTrueExpression,
|
|
1589
|
+
...validatorCellClassRules,
|
|
1590
|
+
...editableCellClassRules,
|
|
1591
|
+
},
|
|
1592
|
+
cellRendererSelector: getValidatorCellRendererSelector('sky-ag-grid-cell-renderer-currency-validator', { component: 'sky-ag-grid-cell-renderer-currency' }),
|
|
1593
|
+
cellEditor: SkyAgGridCellEditorCurrencyComponent,
|
|
1594
|
+
headerClass: SkyHeaderClass.RightAligned,
|
|
1595
|
+
minWidth: 185,
|
|
1596
|
+
},
|
|
1597
|
+
[SkyCellType.Date]: {
|
|
1598
|
+
cellClassRules: {
|
|
1599
|
+
[SkyCellClass.Date]: cellClassRuleTrueExpression,
|
|
1600
|
+
...editableCellClassRules,
|
|
1601
|
+
},
|
|
1602
|
+
cellEditor: SkyAgGridCellEditorDatepickerComponent,
|
|
1603
|
+
comparator: dateComparator,
|
|
1604
|
+
minWidth: this.#currentTheme?.theme?.name === 'modern' ? 180 : 160,
|
|
1605
|
+
valueFormatter: (params) => this.#dateFormatter(params, args.locale),
|
|
1606
|
+
},
|
|
1607
|
+
[SkyCellType.Lookup]: {
|
|
1608
|
+
cellClassRules: {
|
|
1609
|
+
[SkyCellClass.Lookup]: cellClassRuleTrueExpression,
|
|
1610
|
+
...editableCellClassRules,
|
|
1611
|
+
},
|
|
1612
|
+
cellEditor: SkyAgGridCellEditorLookupComponent,
|
|
1613
|
+
cellRenderer: SkyAgGridCellRendererLookupComponent,
|
|
1614
|
+
valueFormatter: (params) => {
|
|
1615
|
+
const lookupProperties = applySkyLookupPropertiesDefaults(params);
|
|
1616
|
+
return (params.value || [])
|
|
1617
|
+
.map((value) => {
|
|
1618
|
+
return value[lookupProperties.descriptorProperty];
|
|
1619
|
+
})
|
|
1620
|
+
.filter((value) => value !== '' && value !== undefined)
|
|
1621
|
+
.join('; ');
|
|
1622
|
+
},
|
|
1623
|
+
minWidth: 185,
|
|
1624
|
+
},
|
|
1625
|
+
[SkyCellType.Number]: {
|
|
1626
|
+
cellClassRules: {
|
|
1627
|
+
[SkyCellClass.Number]: cellClassRuleTrueExpression,
|
|
1628
|
+
...validatorCellClassRules,
|
|
1629
|
+
...editableCellClassRules,
|
|
1630
|
+
},
|
|
1631
|
+
cellRendererSelector: getValidatorCellRendererSelector('sky-ag-grid-cell-renderer-validator-tooltip'),
|
|
1632
|
+
cellEditor: SkyAgGridCellEditorNumberComponent,
|
|
1633
|
+
headerClass: SkyHeaderClass.RightAligned,
|
|
1634
|
+
},
|
|
1635
|
+
[SkyCellType.RowSelector]: {
|
|
1636
|
+
cellClassRules: {
|
|
1637
|
+
[SkyCellClass.RowSelector]: cellClassRuleTrueExpression,
|
|
1638
|
+
[SkyCellClass.Uneditable]: cellClassRuleTrueExpression,
|
|
1639
|
+
},
|
|
1640
|
+
cellRenderer: SkyAgGridCellRendererRowSelectorComponent,
|
|
1641
|
+
headerName: '',
|
|
1642
|
+
minWidth: 55,
|
|
1643
|
+
maxWidth: 55,
|
|
1644
|
+
sortable: false,
|
|
1645
|
+
width: 55,
|
|
1646
|
+
},
|
|
1647
|
+
[SkyCellType.Text]: {
|
|
1648
|
+
cellClassRules: {
|
|
1649
|
+
[SkyCellClass.Text]: cellClassRuleTrueExpression,
|
|
1650
|
+
...validatorCellClassRules,
|
|
1651
|
+
...editableCellClassRules,
|
|
1652
|
+
},
|
|
1653
|
+
cellEditor: SkyAgGridCellEditorTextComponent,
|
|
1654
|
+
cellRendererSelector: getValidatorCellRendererSelector('sky-ag-grid-cell-renderer-validator-tooltip'),
|
|
1655
|
+
},
|
|
1656
|
+
[SkyCellType.Validator]: {
|
|
1657
|
+
cellClassRules: {
|
|
1658
|
+
...validatorCellClassRules,
|
|
1659
|
+
...editableCellClassRules,
|
|
1660
|
+
},
|
|
1661
|
+
cellRendererSelector: getValidatorCellRendererSelector('sky-ag-grid-cell-renderer-validator-tooltip'),
|
|
1662
|
+
},
|
|
1663
|
+
},
|
|
1664
|
+
defaultColDef: {
|
|
1665
|
+
cellClassRules: editableCellClassRules,
|
|
1666
|
+
headerComponent: SkyAgGridHeaderComponent,
|
|
1667
|
+
minWidth: 100,
|
|
1668
|
+
resizable: true,
|
|
1669
|
+
sortable: true,
|
|
1670
|
+
suppressHeaderKeyboardEvent: (keypress) => keypress.event.code === 'Tab',
|
|
1671
|
+
suppressKeyboardEvent: (keypress) => this.#suppressTab(keypress),
|
|
1672
|
+
},
|
|
1673
|
+
defaultColGroupDef: {
|
|
1674
|
+
headerGroupComponent: SkyAgGridHeaderGroupComponent,
|
|
1675
|
+
},
|
|
1676
|
+
domLayout: 'autoHeight',
|
|
1677
|
+
ensureDomOrder: true,
|
|
1678
|
+
enterMovesDownAfterEdit: true,
|
|
1679
|
+
components: {
|
|
1680
|
+
'sky-ag-grid-cell-renderer-currency': SkyAgGridCellRendererCurrencyComponent,
|
|
1681
|
+
'sky-ag-grid-cell-renderer-currency-validator': SkyAgGridCellRendererCurrencyValidatorComponent,
|
|
1682
|
+
'sky-ag-grid-cell-renderer-validator-tooltip': SkyAgGridCellRendererValidatorTooltipComponent,
|
|
1683
|
+
},
|
|
1684
|
+
getRowId: (params) => {
|
|
1685
|
+
const dataId = params.data.id;
|
|
1686
|
+
if (dataId !== undefined) {
|
|
1687
|
+
return `${params.data.id}`;
|
|
1688
|
+
}
|
|
1689
|
+
if (!this.#keyMap.has(params.data)) {
|
|
1690
|
+
this.#keyMap.set(params.data, `${rowNodeId--}`);
|
|
1691
|
+
}
|
|
1692
|
+
return this.#keyMap.get(params.data);
|
|
1693
|
+
},
|
|
1694
|
+
getRowClass: (params) => {
|
|
1695
|
+
if (params.node.id) {
|
|
1696
|
+
return `sky-ag-grid-row-${params.node.id}`;
|
|
1697
|
+
}
|
|
1698
|
+
else {
|
|
1699
|
+
return undefined;
|
|
1700
|
+
}
|
|
1701
|
+
},
|
|
1702
|
+
headerHeight: this.getHeaderHeight(),
|
|
1703
|
+
icons: {
|
|
1704
|
+
sortDescending: this.#getIconTemplate('sortDescending'),
|
|
1705
|
+
sortAscending: this.#getIconTemplate('sortAscending'),
|
|
1706
|
+
columnMoveMove: this.#getIconTemplate('columnMoveMove'),
|
|
1707
|
+
columnMoveHide: this.#getIconTemplate('columnMoveHide'),
|
|
1708
|
+
columnMoveLeft: this.#getIconTemplate('columnMoveLeft'),
|
|
1709
|
+
columnMoveRight: this.#getIconTemplate('columnMoveRight'),
|
|
1710
|
+
columnMovePin: this.#getIconTemplate('columnMovePin'),
|
|
1711
|
+
},
|
|
1712
|
+
onCellFocused: () => this.#onCellFocused(),
|
|
1713
|
+
rowHeight: this.#getRowHeight(),
|
|
1714
|
+
getRowHeight: () => this.#getRowHeight(),
|
|
1715
|
+
rowMultiSelectWithClick: true,
|
|
1716
|
+
rowSelection: 'multiple',
|
|
1717
|
+
singleClickEdit: true,
|
|
1718
|
+
sortingOrder: ['desc', 'asc', null],
|
|
1719
|
+
suppressRowClickSelection: true,
|
|
1720
|
+
suppressDragLeaveHidesColumns: true,
|
|
1721
|
+
};
|
|
1722
|
+
const columnTypes = defaultSkyGridOptions.columnTypes;
|
|
1723
|
+
columnTypes[SkyCellType.CurrencyValidator] = {
|
|
1724
|
+
...columnTypes[SkyCellType.Currency],
|
|
1725
|
+
cellRendererParams: {
|
|
1726
|
+
skyComponentProperties: {
|
|
1727
|
+
validator: (value) => {
|
|
1728
|
+
return !!`${value || ''}`.match(/^[^0-9]*(\d+[,.]?)+\d*[^0-9]*$/);
|
|
1729
|
+
},
|
|
1730
|
+
validatorMessage: 'Please enter a valid currency',
|
|
1731
|
+
},
|
|
1732
|
+
},
|
|
1733
|
+
};
|
|
1734
|
+
/*istanbul ignore else*/
|
|
1735
|
+
if (this.#resources) {
|
|
1736
|
+
this.#resources
|
|
1737
|
+
.getString('sky_ag_grid_cell_renderer_currency_validator_message')
|
|
1738
|
+
.subscribe((value) => {
|
|
1739
|
+
columnTypes[SkyCellType.CurrencyValidator].cellRendererParams.skyComponentProperties.validatorMessage = value;
|
|
1740
|
+
});
|
|
1741
|
+
}
|
|
1742
|
+
columnTypes[SkyCellType.NumberValidator] = {
|
|
1743
|
+
...columnTypes[SkyCellType.Validator],
|
|
1744
|
+
...columnTypes[SkyCellType.Number],
|
|
1745
|
+
cellClassRules: {
|
|
1746
|
+
...columnTypes[SkyCellType.Validator].cellClassRules,
|
|
1747
|
+
...columnTypes[SkyCellType.Number].cellClassRules,
|
|
1748
|
+
},
|
|
1749
|
+
cellRendererParams: {
|
|
1750
|
+
skyComponentProperties: {
|
|
1751
|
+
validator: (value) => {
|
|
1752
|
+
return !!value && !isNaN(parseFloat(value));
|
|
1753
|
+
},
|
|
1754
|
+
validatorMessage: 'Please enter a valid number',
|
|
1755
|
+
},
|
|
1756
|
+
},
|
|
1757
|
+
};
|
|
1758
|
+
/*istanbul ignore else*/
|
|
1759
|
+
if (this.#resources) {
|
|
1760
|
+
this.#resources
|
|
1761
|
+
.getString('sky_ag_grid_cell_renderer_number_validator_message')
|
|
1762
|
+
.subscribe((value) => {
|
|
1763
|
+
columnTypes[SkyCellType.NumberValidator].cellRendererParams.skyComponentProperties.validatorMessage = value;
|
|
1764
|
+
});
|
|
1765
|
+
}
|
|
1766
|
+
return defaultSkyGridOptions;
|
|
1767
|
+
}
|
|
1768
|
+
#onCellFocused() {
|
|
1769
|
+
const currentElement = this.#agGridAdapterService.getFocusedElement();
|
|
1770
|
+
this.#agGridAdapterService.focusOnFocusableChildren(currentElement);
|
|
1771
|
+
}
|
|
1772
|
+
#getDefaultEditableGridOptions(args) {
|
|
1773
|
+
const defaultGridOptions = this.#getDefaultGridOptions(args);
|
|
1774
|
+
defaultGridOptions.rowSelection = undefined;
|
|
1775
|
+
return defaultGridOptions;
|
|
1776
|
+
}
|
|
1777
|
+
#dateFormatter(params, locale = 'en-us') {
|
|
1778
|
+
const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };
|
|
1779
|
+
let date = params.value;
|
|
1780
|
+
if (date && typeof date === 'string') {
|
|
1781
|
+
date = new Date(params.value);
|
|
1782
|
+
}
|
|
1783
|
+
const formattedDate = date &&
|
|
1784
|
+
date.toLocaleDateString &&
|
|
1785
|
+
date.toLocaleDateString(locale, dateConfig);
|
|
1786
|
+
if (date && date.getTime && !isNaN(date.getTime())) {
|
|
1787
|
+
return formattedDate;
|
|
1788
|
+
}
|
|
1789
|
+
return '';
|
|
1790
|
+
}
|
|
1791
|
+
#getIconTemplate(iconName) {
|
|
1792
|
+
return () => {
|
|
1793
|
+
const icon = iconMap[iconName];
|
|
1794
|
+
if (this.#currentTheme?.theme.name === 'modern' && icon.skyIcon) {
|
|
1795
|
+
return `<i aria-hidden="true" class="sky-i-${icon.skyIcon}"></i>`;
|
|
1796
|
+
}
|
|
1797
|
+
else {
|
|
1798
|
+
return `<i aria-hidden="true" class="fa fa-${icon.faIcon}"></i>`;
|
|
1799
|
+
}
|
|
1800
|
+
};
|
|
1801
|
+
}
|
|
1802
|
+
#suppressTab(params) {
|
|
1803
|
+
if (params.event.code === 'Tab') {
|
|
1804
|
+
if (params.editing) {
|
|
1805
|
+
const currentlyFocusedEl = this.#agGridAdapterService.getFocusedElement();
|
|
1806
|
+
// inline cell editors have the 'ag-cell' class, while popup editors have the 'ag-popup-editor' class
|
|
1807
|
+
const cellEl = this.#agGridAdapterService.getElementOrParentWithClass(currentlyFocusedEl, 'ag-cell');
|
|
1808
|
+
const popupEl = this.#agGridAdapterService.getElementOrParentWithClass(currentlyFocusedEl, 'ag-popup-editor');
|
|
1809
|
+
const parentEl = cellEl || popupEl;
|
|
1810
|
+
const nextFocusableElementInCell = this.#agGridAdapterService.getNextFocusableElement(currentlyFocusedEl, parentEl, params.event.shiftKey);
|
|
1811
|
+
return !!nextFocusableElementInCell;
|
|
1812
|
+
}
|
|
1813
|
+
return true;
|
|
1814
|
+
}
|
|
1815
|
+
return false;
|
|
1816
|
+
}
|
|
1817
|
+
#getRowHeight() {
|
|
1818
|
+
return this.#currentTheme?.theme?.name === 'modern' ? 60 : 38;
|
|
1819
|
+
}
|
|
1820
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridService, deps: [{ token: SkyAgGridAdapterService }, { token: i1$2.SkyThemeService, optional: true }, { token: i3.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1821
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridService, providedIn: 'any' }); }
|
|
1822
|
+
}
|
|
1823
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridService, decorators: [{
|
|
1824
|
+
type: Injectable,
|
|
1825
|
+
args: [{
|
|
1826
|
+
providedIn: 'any',
|
|
1827
|
+
}]
|
|
1828
|
+
}], ctorParameters: function () { return [{ type: SkyAgGridAdapterService }, { type: i1$2.SkyThemeService, decorators: [{
|
|
1829
|
+
type: Optional
|
|
1830
|
+
}] }, { type: i3.SkyLibResourcesService, decorators: [{
|
|
1831
|
+
type: Optional
|
|
1832
|
+
}] }]; } });
|
|
1833
|
+
|
|
1834
|
+
let idIndex = 0;
|
|
1835
|
+
class SkyAgGridWrapperComponent {
|
|
1836
|
+
get viewkeeperClasses() {
|
|
1837
|
+
return this.#_viewkeeperClasses;
|
|
1838
|
+
}
|
|
1839
|
+
set viewkeeperClasses(value) {
|
|
1840
|
+
this.#_viewkeeperClasses = value;
|
|
1841
|
+
this.#changeDetector.markForCheck();
|
|
1842
|
+
}
|
|
1843
|
+
get #isInEditMode() {
|
|
1844
|
+
/* istanbul ignore else */
|
|
1845
|
+
if (this.agGrid && this.agGrid.api) {
|
|
1846
|
+
const primaryGridEditing = this.agGrid.api.getEditingCells().length > 0;
|
|
1847
|
+
if (primaryGridEditing) {
|
|
1848
|
+
return true;
|
|
1849
|
+
}
|
|
1850
|
+
else {
|
|
1851
|
+
let innerEditing = false;
|
|
1852
|
+
this.agGrid.api.forEachDetailGridInfo((detailGrid) => {
|
|
1853
|
+
if (detailGrid?.api && detailGrid.api.getEditingCells().length > 0) {
|
|
1854
|
+
innerEditing = true;
|
|
1855
|
+
}
|
|
1856
|
+
});
|
|
1857
|
+
return innerEditing;
|
|
1858
|
+
}
|
|
1859
|
+
}
|
|
1860
|
+
else {
|
|
1861
|
+
return false;
|
|
1862
|
+
}
|
|
1863
|
+
}
|
|
1864
|
+
#_viewkeeperClasses;
|
|
1865
|
+
#agGridService;
|
|
1866
|
+
#ngUnsubscribe;
|
|
1867
|
+
#themeSvc;
|
|
1868
|
+
#wrapperClasses;
|
|
1869
|
+
#currentTheme;
|
|
1870
|
+
#adapterService;
|
|
1871
|
+
#changeDetector;
|
|
1872
|
+
#parentChangeDetector;
|
|
1873
|
+
#elementRef;
|
|
1874
|
+
#document;
|
|
1875
|
+
#mutationObserverService;
|
|
1876
|
+
#hasEditableClass;
|
|
1877
|
+
constructor() {
|
|
1878
|
+
this.isNormalLayout = false;
|
|
1879
|
+
this.#_viewkeeperClasses = [];
|
|
1880
|
+
this.#agGridService = inject(SkyAgGridService);
|
|
1881
|
+
this.#ngUnsubscribe = new Subject();
|
|
1882
|
+
this.#themeSvc = inject(SkyThemeService, {
|
|
1883
|
+
optional: true,
|
|
1884
|
+
});
|
|
1885
|
+
this.#wrapperClasses = new BehaviorSubject([
|
|
1886
|
+
`ag-theme-sky-data-grid-default`,
|
|
1887
|
+
]);
|
|
1888
|
+
this.#currentTheme = undefined;
|
|
1889
|
+
this.#adapterService = inject(SkyAgGridAdapterService);
|
|
1890
|
+
this.#changeDetector = inject(ChangeDetectorRef);
|
|
1891
|
+
this.#parentChangeDetector = inject(ChangeDetectorRef, {
|
|
1892
|
+
optional: true,
|
|
1893
|
+
skipSelf: true,
|
|
1894
|
+
});
|
|
1895
|
+
this.#elementRef = inject(ElementRef);
|
|
1896
|
+
this.#document = inject(DOCUMENT);
|
|
1897
|
+
this.#mutationObserverService = inject(SkyMutationObserverService);
|
|
1898
|
+
this.#hasEditableClass = false;
|
|
1899
|
+
idIndex++;
|
|
1900
|
+
this.afterAnchorId = 'sky-ag-grid-nav-anchor-after-' + idIndex;
|
|
1901
|
+
this.beforeAnchorId = 'sky-ag-grid-nav-anchor-before-' + idIndex;
|
|
1902
|
+
this.gridId = 'sky-ag-grid-' + idIndex;
|
|
1903
|
+
this.wrapperClasses$ = this.#wrapperClasses.asObservable();
|
|
1904
|
+
}
|
|
1905
|
+
ngAfterContentInit() {
|
|
1906
|
+
if (this.agGrid) {
|
|
1907
|
+
const domLayout = this.agGrid.gridOptions?.domLayout;
|
|
1908
|
+
if (domLayout === 'autoHeight') {
|
|
1909
|
+
if (this.agGrid.gridOptions.context?.enableTopScroll) {
|
|
1910
|
+
this.viewkeeperClasses.push('.ag-header', '.ag-body-horizontal-scroll');
|
|
1911
|
+
}
|
|
1912
|
+
else {
|
|
1913
|
+
this.viewkeeperClasses.push('.ag-header');
|
|
1914
|
+
}
|
|
1915
|
+
}
|
|
1916
|
+
else if (domLayout === 'normal') {
|
|
1917
|
+
this.isNormalLayout = true;
|
|
1918
|
+
this.#parentChangeDetector?.detectChanges();
|
|
1919
|
+
}
|
|
1920
|
+
this.agGrid.gridReady
|
|
1921
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
1922
|
+
.subscribe(() => {
|
|
1923
|
+
this.#moveHorizontalScroll();
|
|
1924
|
+
});
|
|
1925
|
+
this.agGrid.firstDataRendered
|
|
1926
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
1927
|
+
.subscribe(() => {
|
|
1928
|
+
this.#moveHorizontalScroll();
|
|
1929
|
+
});
|
|
1930
|
+
this.agGrid.rowDataUpdated
|
|
1931
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
1932
|
+
.subscribe(() => {
|
|
1933
|
+
this.#moveHorizontalScroll();
|
|
1934
|
+
});
|
|
1935
|
+
this.agGrid.cellEditingStarted
|
|
1936
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
1937
|
+
.subscribe((params) => {
|
|
1938
|
+
if (params.colDef.type) {
|
|
1939
|
+
const types = Array.isArray(params.colDef.type)
|
|
1940
|
+
? params.colDef.type
|
|
1941
|
+
: [params.colDef.type];
|
|
1942
|
+
const addClasses = types.map((t) => `sky-ag-grid-cell-editing-${t}`);
|
|
1943
|
+
this.#wrapperClasses.next([
|
|
1944
|
+
...this.#wrapperClasses.getValue(),
|
|
1945
|
+
...addClasses,
|
|
1946
|
+
]);
|
|
1947
|
+
}
|
|
1948
|
+
});
|
|
1949
|
+
this.agGrid.cellEditingStopped
|
|
1950
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
1951
|
+
.subscribe(() => {
|
|
1952
|
+
this.#wrapperClasses.next(this.#wrapperClasses
|
|
1953
|
+
.getValue()
|
|
1954
|
+
.filter((c) => c.startsWith('ag-theme-')));
|
|
1955
|
+
});
|
|
1956
|
+
}
|
|
1957
|
+
}
|
|
1958
|
+
ngOnDestroy() {
|
|
1959
|
+
this.#ngUnsubscribe.next();
|
|
1960
|
+
this.#ngUnsubscribe.complete();
|
|
1961
|
+
}
|
|
1962
|
+
ngOnInit() {
|
|
1963
|
+
this.#themeSvc?.settingsChange
|
|
1964
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
1965
|
+
.subscribe((settings) => {
|
|
1966
|
+
this.#updateGridTheme(settings.currentSettings);
|
|
1967
|
+
if (!this.#currentTheme) {
|
|
1968
|
+
// Initial theme settings.
|
|
1969
|
+
this.#currentTheme = settings.currentSettings;
|
|
1970
|
+
}
|
|
1971
|
+
else if (this.agGrid?.api) {
|
|
1972
|
+
// On subsequent theme changes, we need to call the api to re-render the grid.
|
|
1973
|
+
this.#currentTheme = settings.currentSettings;
|
|
1974
|
+
this.agGrid.api.setHeaderHeight(this.#agGridService.getHeaderHeight());
|
|
1975
|
+
this.agGrid.api.resetRowHeights();
|
|
1976
|
+
this.agGrid.api.refreshCells();
|
|
1977
|
+
}
|
|
1978
|
+
});
|
|
1979
|
+
}
|
|
1980
|
+
ngAfterViewInit() {
|
|
1981
|
+
const agGridElement = this.#elementRef.nativeElement.querySelector('ag-grid-angular');
|
|
1982
|
+
const callback = () => {
|
|
1983
|
+
this.#hasEditableClass = !!agGridElement?.classList.contains('sky-ag-grid-editable');
|
|
1984
|
+
this.#updateGridTheme(this.#currentTheme);
|
|
1985
|
+
};
|
|
1986
|
+
if (agGridElement) {
|
|
1987
|
+
const agGridClassObserver = this.#mutationObserverService.create(callback);
|
|
1988
|
+
agGridClassObserver.observe(agGridElement, {
|
|
1989
|
+
attributes: true,
|
|
1990
|
+
});
|
|
1991
|
+
this.#ngUnsubscribe.pipe(take(1)).subscribe(() => {
|
|
1992
|
+
agGridClassObserver.disconnect();
|
|
1993
|
+
});
|
|
1994
|
+
}
|
|
1995
|
+
setTimeout(callback);
|
|
1996
|
+
}
|
|
1997
|
+
/**
|
|
1998
|
+
* Prevent closing a modal when focused in AG Grid.
|
|
1999
|
+
*/
|
|
2000
|
+
onKeyUpEscape($event) {
|
|
2001
|
+
$event.stopPropagation();
|
|
2002
|
+
this.agGrid?.api.stopEditing(true);
|
|
2003
|
+
}
|
|
2004
|
+
onGridKeydown(event) {
|
|
2005
|
+
if (this.agGrid && !this.#isInEditMode && event.key === 'Tab') {
|
|
2006
|
+
const idToFocus = event.shiftKey
|
|
2007
|
+
? this.beforeAnchorId
|
|
2008
|
+
: this.afterAnchorId;
|
|
2009
|
+
this.#adapterService.setFocusedElementById(this.#elementRef.nativeElement, idToFocus);
|
|
2010
|
+
}
|
|
2011
|
+
}
|
|
2012
|
+
onAnchorFocus(event) {
|
|
2013
|
+
const relatedTarget = event.relatedTarget;
|
|
2014
|
+
const previousWasGrid = relatedTarget && !!this.#elementRef.nativeElement.contains(relatedTarget);
|
|
2015
|
+
if (this.agGrid && !previousWasGrid) {
|
|
2016
|
+
const firstColumn = this.agGrid.columnApi.getAllDisplayedColumns()[0];
|
|
2017
|
+
if (firstColumn) {
|
|
2018
|
+
this.agGrid.api.ensureColumnVisible(firstColumn);
|
|
2019
|
+
this.#adapterService.focusOnColumnHeader(this.#elementRef.nativeElement, firstColumn.getColId());
|
|
2020
|
+
}
|
|
2021
|
+
}
|
|
2022
|
+
}
|
|
2023
|
+
#moveHorizontalScroll() {
|
|
2024
|
+
if (this.agGrid && this.agGrid.api) {
|
|
2025
|
+
const toTop = !!this.agGrid.gridOptions.context?.enableTopScroll;
|
|
2026
|
+
const root = this.#elementRef.nativeElement.querySelector('.ag-root');
|
|
2027
|
+
const header = root.querySelector('.ag-header');
|
|
2028
|
+
const floatingBottom = root.querySelector('.ag-floating-bottom');
|
|
2029
|
+
const scrollbar = root.querySelector('.ag-body-horizontal-scroll');
|
|
2030
|
+
if (header && floatingBottom && scrollbar) {
|
|
2031
|
+
if (scrollbar.style.height !==
|
|
2032
|
+
scrollbar.style.getPropertyValue('--sky-ag-body-horizontal-scroll-width')) {
|
|
2033
|
+
scrollbar.style.setProperty('--sky-ag-body-horizontal-scroll-width', scrollbar.style.height);
|
|
2034
|
+
}
|
|
2035
|
+
const isTop = !!root.children[1].matches('.ag-body-horizontal-scroll');
|
|
2036
|
+
if (toTop && !isTop) {
|
|
2037
|
+
const fragment = this.#document.createDocumentFragment();
|
|
2038
|
+
fragment.appendChild(scrollbar);
|
|
2039
|
+
header.after(fragment);
|
|
2040
|
+
}
|
|
2041
|
+
else if (!toTop && isTop) {
|
|
2042
|
+
const fragment = this.#document.createDocumentFragment();
|
|
2043
|
+
fragment.appendChild(scrollbar);
|
|
2044
|
+
floatingBottom.after(fragment);
|
|
2045
|
+
}
|
|
2046
|
+
}
|
|
2047
|
+
}
|
|
2048
|
+
}
|
|
2049
|
+
#updateGridTheme(themeSettings) {
|
|
2050
|
+
let agTheme;
|
|
2051
|
+
if (themeSettings?.theme.name === 'modern') {
|
|
2052
|
+
agTheme = `modern-${themeSettings.mode.name}`;
|
|
2053
|
+
}
|
|
2054
|
+
else {
|
|
2055
|
+
agTheme = `default`;
|
|
2056
|
+
}
|
|
2057
|
+
const variation = this.#hasEditableClass ? 'data-entry-grid' : 'data-grid';
|
|
2058
|
+
this.#wrapperClasses.next([
|
|
2059
|
+
...this.#wrapperClasses
|
|
2060
|
+
.getValue()
|
|
2061
|
+
.filter((c) => !c.startsWith('ag-theme-')),
|
|
2062
|
+
`ag-theme-sky-${variation}-${agTheme}`,
|
|
2063
|
+
]);
|
|
2064
|
+
}
|
|
2065
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2066
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyAgGridWrapperComponent, selector: "sky-ag-grid-wrapper", host: { properties: { "class.sky-ag-grid-layout-normal": "this.isNormalLayout" } }, 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 [class.sky-ag-grid-top-scrollbar]=\"\n agGrid?.gridOptions?.context &&\n agGrid?.gridOptions?.context['enableTopScroll']\n \"\n [ngClass]=\"wrapperClasses$ | async\"\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$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2067
|
+
}
|
|
2068
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridWrapperComponent, decorators: [{
|
|
2069
|
+
type: Component,
|
|
2070
|
+
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 [class.sky-ag-grid-top-scrollbar]=\"\n agGrid?.gridOptions?.context &&\n agGrid?.gridOptions?.context['enableTopScroll']\n \"\n [ngClass]=\"wrapperClasses$ | async\"\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" }]
|
|
2071
|
+
}], ctorParameters: function () { return []; }, propDecorators: { agGrid: [{
|
|
2072
|
+
type: ContentChild,
|
|
2073
|
+
args: [AgGridAngular, {
|
|
2074
|
+
static: true,
|
|
2075
|
+
}]
|
|
2076
|
+
}], isNormalLayout: [{
|
|
2077
|
+
type: HostBinding,
|
|
2078
|
+
args: ['class.sky-ag-grid-layout-normal']
|
|
2079
|
+
}] } });
|
|
2080
|
+
|
|
2081
|
+
/**
|
|
2082
|
+
* @internal
|
|
2083
|
+
*/
|
|
2084
|
+
class SkyAgGridDataManagerAdapterDirective {
|
|
2085
|
+
#currentAgGrid;
|
|
2086
|
+
#currentDataState;
|
|
2087
|
+
#currentSkyAgGridWrapper;
|
|
2088
|
+
#dataStateSub;
|
|
2089
|
+
#viewConfig;
|
|
2090
|
+
#ngUnsubscribe = new Subject();
|
|
2091
|
+
#changeDetector;
|
|
2092
|
+
#dataManagerSvc;
|
|
2093
|
+
constructor(changeDetector, dataManagerSvc) {
|
|
2094
|
+
this.#changeDetector = changeDetector;
|
|
2095
|
+
this.#dataManagerSvc = dataManagerSvc;
|
|
2096
|
+
}
|
|
2097
|
+
ngAfterContentInit() {
|
|
2098
|
+
if (this.viewId) {
|
|
2099
|
+
this.#dataManagerSvc.setViewkeeperClasses(this.viewId, ['.ag-header']);
|
|
2100
|
+
this.#viewConfig = this.#dataManagerSvc.getViewById(this.viewId);
|
|
2101
|
+
this.#checkForAgGrid();
|
|
2102
|
+
this.#checkForSkyAgGridWrapper();
|
|
2103
|
+
this.agGridList?.changes
|
|
2104
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2105
|
+
.subscribe(() => this.#checkForAgGrid());
|
|
2106
|
+
this.skyAgGridWrapperList?.changes
|
|
2107
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2108
|
+
.subscribe(() => this.#checkForSkyAgGridWrapper());
|
|
2109
|
+
}
|
|
2110
|
+
}
|
|
2111
|
+
ngOnDestroy() {
|
|
2112
|
+
this.#ngUnsubscribe.next();
|
|
2113
|
+
this.#ngUnsubscribe.complete();
|
|
2114
|
+
}
|
|
2115
|
+
#checkForAgGrid() {
|
|
2116
|
+
if (this.agGridList) {
|
|
2117
|
+
const agGridCount = this.agGridList.length;
|
|
2118
|
+
/* istanbul ignore else */
|
|
2119
|
+
if (agGridCount === 0) {
|
|
2120
|
+
this.#unregisterAgGrid();
|
|
2121
|
+
}
|
|
2122
|
+
else if (this.agGridList.first !== this.#currentAgGrid) {
|
|
2123
|
+
this.#registerAgGrid();
|
|
2124
|
+
}
|
|
2125
|
+
if (agGridCount > 1) {
|
|
2126
|
+
console.warn('More than one ag-grid child component was found. Using the first ag-Grid.');
|
|
2127
|
+
}
|
|
2128
|
+
}
|
|
2129
|
+
}
|
|
2130
|
+
#checkForSkyAgGridWrapper() {
|
|
2131
|
+
if (this.skyAgGridWrapperList) {
|
|
2132
|
+
const skyAgGridWrapperCount = this.skyAgGridWrapperList.length;
|
|
2133
|
+
/* istanbul ignore else */
|
|
2134
|
+
if (skyAgGridWrapperCount === 0) {
|
|
2135
|
+
this.#unregisterSkyAgGridWrapper();
|
|
2136
|
+
}
|
|
2137
|
+
else if (this.skyAgGridWrapperList.first !== this.#currentSkyAgGridWrapper) {
|
|
2138
|
+
this.#registerSkyAgGridWrapper();
|
|
2139
|
+
}
|
|
2140
|
+
if (skyAgGridWrapperCount > 1) {
|
|
2141
|
+
console.warn('More than one ag-grid child component was found. Using the first ag-Grid.');
|
|
2142
|
+
}
|
|
2143
|
+
}
|
|
2144
|
+
}
|
|
2145
|
+
#unregisterAgGrid() {
|
|
2146
|
+
this.#currentAgGrid = undefined;
|
|
2147
|
+
/* istanbul ignore if */
|
|
2148
|
+
if (this.#dataStateSub) {
|
|
2149
|
+
this.#dataStateSub.unsubscribe();
|
|
2150
|
+
}
|
|
2151
|
+
}
|
|
2152
|
+
#unregisterSkyAgGridWrapper() {
|
|
2153
|
+
this.#currentSkyAgGridWrapper = undefined;
|
|
2154
|
+
}
|
|
2155
|
+
#registerSkyAgGridWrapper() {
|
|
2156
|
+
this.#unregisterSkyAgGridWrapper();
|
|
2157
|
+
this.#currentSkyAgGridWrapper = this.skyAgGridWrapperList?.first;
|
|
2158
|
+
setTimeout(() => {
|
|
2159
|
+
if (this.#currentSkyAgGridWrapper) {
|
|
2160
|
+
this.#currentSkyAgGridWrapper.viewkeeperClasses = [];
|
|
2161
|
+
}
|
|
2162
|
+
});
|
|
2163
|
+
}
|
|
2164
|
+
#registerAgGrid() {
|
|
2165
|
+
this.#unregisterAgGrid();
|
|
2166
|
+
const agGrid = this.agGridList?.first;
|
|
2167
|
+
this.#currentAgGrid = agGrid;
|
|
2168
|
+
if (agGrid) {
|
|
2169
|
+
agGrid.gridReady.pipe(takeUntil(this.#ngUnsubscribe)).subscribe(() => {
|
|
2170
|
+
if (this.#viewConfig && this.viewId) {
|
|
2171
|
+
this.#viewConfig.onSelectAllClick = this.#selectAll.bind(this);
|
|
2172
|
+
this.#viewConfig.onClearAllClick = this.#clearAll.bind(this);
|
|
2173
|
+
this.#dataManagerSvc.updateViewConfig(this.#viewConfig);
|
|
2174
|
+
this.#dataStateSub = this.#dataManagerSvc
|
|
2175
|
+
.getDataStateUpdates(this.#viewConfig.id)
|
|
2176
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2177
|
+
.subscribe((dataState) => {
|
|
2178
|
+
this.#currentDataState = dataState;
|
|
2179
|
+
this.#displayColumns(dataState);
|
|
2180
|
+
});
|
|
2181
|
+
if (agGrid.gridOptions.context?.enableTopScroll) {
|
|
2182
|
+
this.#dataManagerSvc.setViewkeeperClasses(this.viewId, [
|
|
2183
|
+
'.ag-header',
|
|
2184
|
+
'.ag-body-horizontal-scroll',
|
|
2185
|
+
]);
|
|
2186
|
+
}
|
|
2187
|
+
agGrid.api.sizeColumnsToFit();
|
|
2188
|
+
}
|
|
2189
|
+
});
|
|
2190
|
+
agGrid.columnMoved
|
|
2191
|
+
.pipe(takeUntil(this.#ngUnsubscribe), filter((event) => ![
|
|
2192
|
+
'gridInitializing',
|
|
2193
|
+
'uiColumnResized',
|
|
2194
|
+
'uiColumnDragged',
|
|
2195
|
+
'api',
|
|
2196
|
+
].includes(event.source)))
|
|
2197
|
+
.subscribe((value) => {
|
|
2198
|
+
this.#updateColumnsInCurrentDataState(value.columnApi);
|
|
2199
|
+
});
|
|
2200
|
+
agGrid.dragStopped
|
|
2201
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2202
|
+
.subscribe((value) => {
|
|
2203
|
+
this.#updateColumnsInCurrentDataState(value.columnApi);
|
|
2204
|
+
});
|
|
2205
|
+
agGrid.rowSelected
|
|
2206
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2207
|
+
.subscribe((event) => {
|
|
2208
|
+
if (this.#viewConfig && this.#currentDataState) {
|
|
2209
|
+
const row = event.node;
|
|
2210
|
+
const selectedIds = this.#currentDataState.selectedIds || [];
|
|
2211
|
+
const rowIndex = selectedIds.indexOf(row.data.id);
|
|
2212
|
+
if (row.isSelected() && rowIndex === -1) {
|
|
2213
|
+
selectedIds.push(row.data.id);
|
|
2214
|
+
}
|
|
2215
|
+
else if (!row.isSelected() && rowIndex !== -1) {
|
|
2216
|
+
selectedIds.splice(rowIndex, 1);
|
|
2217
|
+
}
|
|
2218
|
+
this.#currentDataState.selectedIds = selectedIds;
|
|
2219
|
+
this.#dataManagerSvc.updateDataState(this.#currentDataState, this.#viewConfig.id);
|
|
2220
|
+
this.#changeDetector.markForCheck();
|
|
2221
|
+
}
|
|
2222
|
+
});
|
|
2223
|
+
agGrid.sortChanged.pipe(takeUntil(this.#ngUnsubscribe)).subscribe(() => {
|
|
2224
|
+
const gridColumnStates = agGrid.columnApi.getColumnState();
|
|
2225
|
+
let sortOption;
|
|
2226
|
+
/* istanbul ignore else */
|
|
2227
|
+
if (gridColumnStates.length) {
|
|
2228
|
+
const activeSortColumnState = gridColumnStates.find((aGridColumnState) => aGridColumnState.sortIndex === 0);
|
|
2229
|
+
const dataManagerConfig = this.#dataManagerSvc.getCurrentDataManagerConfig();
|
|
2230
|
+
/* istanbul ignore else */
|
|
2231
|
+
if (dataManagerConfig.sortOptions && activeSortColumnState) {
|
|
2232
|
+
sortOption = dataManagerConfig.sortOptions.find((option) => {
|
|
2233
|
+
return (option.propertyName === activeSortColumnState.colId &&
|
|
2234
|
+
option.descending === (activeSortColumnState.sort === 'desc'));
|
|
2235
|
+
});
|
|
2236
|
+
}
|
|
2237
|
+
else {
|
|
2238
|
+
sortOption = undefined;
|
|
2239
|
+
}
|
|
2240
|
+
}
|
|
2241
|
+
if (this.#viewConfig && this.#currentDataState) {
|
|
2242
|
+
this.#currentDataState.activeSortOption = sortOption;
|
|
2243
|
+
this.#dataManagerSvc.updateDataState(this.#currentDataState, this.#viewConfig.id);
|
|
2244
|
+
}
|
|
2245
|
+
});
|
|
2246
|
+
}
|
|
2247
|
+
}
|
|
2248
|
+
#updateColumnsInCurrentDataState(columnApi) {
|
|
2249
|
+
if (this.#viewConfig && this.#currentDataState) {
|
|
2250
|
+
const columnOrder = this.#getColumnOrder(columnApi);
|
|
2251
|
+
const viewState = this.#currentDataState.getViewStateById(this.#viewConfig.id);
|
|
2252
|
+
if (viewState &&
|
|
2253
|
+
(viewState.displayedColumnIds.length !== columnOrder.length ||
|
|
2254
|
+
viewState.displayedColumnIds.some((col, i) => col !== columnOrder[i]))) {
|
|
2255
|
+
viewState.displayedColumnIds = columnOrder;
|
|
2256
|
+
this.#dataManagerSvc.updateDataState(this.#currentDataState.addOrUpdateView(this.#viewConfig.id, viewState), this.#viewConfig.id);
|
|
2257
|
+
}
|
|
2258
|
+
}
|
|
2259
|
+
}
|
|
2260
|
+
#getColumnOrder(columnApi) {
|
|
2261
|
+
return columnApi
|
|
2262
|
+
.getColumnState()
|
|
2263
|
+
.filter((state) => !state.hide)
|
|
2264
|
+
.map((state) => state.colId);
|
|
2265
|
+
}
|
|
2266
|
+
#displayColumns(dataState) {
|
|
2267
|
+
const agGrid = this.#currentAgGrid;
|
|
2268
|
+
if (agGrid && this.#viewConfig) {
|
|
2269
|
+
const viewState = dataState.getViewStateById(this.#viewConfig.id);
|
|
2270
|
+
let displayedColumnIds = [];
|
|
2271
|
+
/*istanbul ignore else*/
|
|
2272
|
+
if (viewState?.displayedColumnIds) {
|
|
2273
|
+
displayedColumnIds = viewState.displayedColumnIds;
|
|
2274
|
+
}
|
|
2275
|
+
const columnOrder = this.#getColumnOrder(agGrid.columnApi);
|
|
2276
|
+
if (displayedColumnIds.length !== columnOrder.length ||
|
|
2277
|
+
displayedColumnIds.some((col, i) => col !== columnOrder[i])) {
|
|
2278
|
+
const hideColumns = agGrid.columnApi
|
|
2279
|
+
.getColumnState()
|
|
2280
|
+
.map((col) => col.colId)
|
|
2281
|
+
.filter((colId) => !displayedColumnIds.includes(colId));
|
|
2282
|
+
agGrid.columnApi.setColumnsVisible(hideColumns, false);
|
|
2283
|
+
agGrid.columnApi.setColumnsVisible(displayedColumnIds, true);
|
|
2284
|
+
agGrid.columnApi.moveColumns(displayedColumnIds, 0);
|
|
2285
|
+
}
|
|
2286
|
+
}
|
|
2287
|
+
}
|
|
2288
|
+
#selectAll() {
|
|
2289
|
+
const agGrid = this.agGridList?.first;
|
|
2290
|
+
agGrid?.api.selectAll();
|
|
2291
|
+
}
|
|
2292
|
+
#clearAll() {
|
|
2293
|
+
const agGrid = this.agGridList?.first;
|
|
2294
|
+
agGrid?.api.deselectAll();
|
|
2295
|
+
}
|
|
2296
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$5.SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2297
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: SkyAgGridDataManagerAdapterDirective, selector: "[skyAgGridDataManagerAdapter]", inputs: { viewId: "viewId" }, queries: [{ propertyName: "agGridList", predicate: AgGridAngular, descendants: true }, { propertyName: "skyAgGridWrapperList", predicate: SkyAgGridWrapperComponent, descendants: true }], ngImport: i0 }); }
|
|
2298
|
+
}
|
|
2299
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, decorators: [{
|
|
2300
|
+
type: Directive,
|
|
2301
|
+
args: [{
|
|
2302
|
+
selector: '[skyAgGridDataManagerAdapter]',
|
|
2303
|
+
}]
|
|
2304
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$5.SkyDataManagerService }]; }, propDecorators: { viewId: [{
|
|
2305
|
+
type: Input
|
|
2306
|
+
}], agGridList: [{
|
|
2307
|
+
type: ContentChildren,
|
|
2308
|
+
args: [AgGridAngular, { descendants: true }]
|
|
2309
|
+
}], skyAgGridWrapperList: [{
|
|
2310
|
+
type: ContentChildren,
|
|
2311
|
+
args: [SkyAgGridWrapperComponent, { descendants: true }]
|
|
2312
|
+
}] } });
|
|
2313
|
+
|
|
2314
|
+
/**
|
|
2315
|
+
* Component for rendering the inline delete template in the overlay.
|
|
2316
|
+
* @internal
|
|
2317
|
+
*/
|
|
2318
|
+
class SkyAgGridRowDeleteComponent {
|
|
2319
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridRowDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2320
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyAgGridRowDeleteComponent, selector: "ng-component", viewQueries: [{ propertyName: "inlineDeleteTemplateRef", first: true, predicate: ["inlineDeleteTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "inlineDeleteRefs", predicate: ["inlineDeleteRef"], descendants: true }], ngImport: i0, template: `
|
|
2321
|
+
<ng-template
|
|
2322
|
+
let-row
|
|
2323
|
+
let-tableWidth="tableWidth()"
|
|
2324
|
+
let-getRowDeleteItem="getRowDeleteItem"
|
|
2325
|
+
let-cancelRowDelete="cancelRowDelete"
|
|
2326
|
+
let-confirmRowDelete="confirmRowDelete"
|
|
2327
|
+
#inlineDeleteTemplateRef
|
|
2328
|
+
>
|
|
2329
|
+
<div
|
|
2330
|
+
class="sky-ag-grid-row-delete"
|
|
2331
|
+
[id]="'row-delete-ref-' + row.id"
|
|
2332
|
+
[ngStyle]="{
|
|
2333
|
+
height: row.rowHeight + 'px',
|
|
2334
|
+
position: 'fixed',
|
|
2335
|
+
width: tableWidth + 'px'
|
|
2336
|
+
}"
|
|
2337
|
+
#inlineDeleteRef
|
|
2338
|
+
>
|
|
2339
|
+
<sky-inline-delete
|
|
2340
|
+
[pending]="getRowDeleteItem(row).pending"
|
|
2341
|
+
(cancelTriggered)="cancelRowDelete(row)"
|
|
2342
|
+
(deleteTriggered)="confirmRowDelete(row)"
|
|
2343
|
+
></sky-inline-delete>
|
|
2344
|
+
</div>
|
|
2345
|
+
</ng-template>
|
|
2346
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }] }); }
|
|
2347
|
+
}
|
|
2348
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridRowDeleteComponent, decorators: [{
|
|
2349
|
+
type: Component,
|
|
2350
|
+
args: [{
|
|
2351
|
+
template: `
|
|
2352
|
+
<ng-template
|
|
2353
|
+
let-row
|
|
2354
|
+
let-tableWidth="tableWidth()"
|
|
2355
|
+
let-getRowDeleteItem="getRowDeleteItem"
|
|
2356
|
+
let-cancelRowDelete="cancelRowDelete"
|
|
2357
|
+
let-confirmRowDelete="confirmRowDelete"
|
|
2358
|
+
#inlineDeleteTemplateRef
|
|
2359
|
+
>
|
|
2360
|
+
<div
|
|
2361
|
+
class="sky-ag-grid-row-delete"
|
|
2362
|
+
[id]="'row-delete-ref-' + row.id"
|
|
2363
|
+
[ngStyle]="{
|
|
2364
|
+
height: row.rowHeight + 'px',
|
|
2365
|
+
position: 'fixed',
|
|
2366
|
+
width: tableWidth + 'px'
|
|
2367
|
+
}"
|
|
2368
|
+
#inlineDeleteRef
|
|
2369
|
+
>
|
|
2370
|
+
<sky-inline-delete
|
|
2371
|
+
[pending]="getRowDeleteItem(row).pending"
|
|
2372
|
+
(cancelTriggered)="cancelRowDelete(row)"
|
|
2373
|
+
(deleteTriggered)="confirmRowDelete(row)"
|
|
2374
|
+
></sky-inline-delete>
|
|
2375
|
+
</div>
|
|
2376
|
+
</ng-template>
|
|
2377
|
+
`,
|
|
2378
|
+
}]
|
|
2379
|
+
}], propDecorators: { inlineDeleteRefs: [{
|
|
2380
|
+
type: ViewChildren,
|
|
2381
|
+
args: ['inlineDeleteRef']
|
|
2382
|
+
}], inlineDeleteTemplateRef: [{
|
|
2383
|
+
type: ViewChild,
|
|
2384
|
+
args: ['inlineDeleteTemplateRef', { read: TemplateRef }]
|
|
2385
|
+
}] } });
|
|
2386
|
+
|
|
2387
|
+
class SkyAgGridRowDeleteDirective {
|
|
2388
|
+
/**
|
|
2389
|
+
* The IDs of the data in the rows where the inline delete appears.
|
|
2390
|
+
*/
|
|
2391
|
+
set rowDeleteIds(value) {
|
|
2392
|
+
this.#rowDeleteIdsInternal = value;
|
|
2393
|
+
if (!value) {
|
|
2394
|
+
for (const config of this.#rowDeleteConfigs) {
|
|
2395
|
+
this.#destroyRowDelete(config.id);
|
|
2396
|
+
}
|
|
2397
|
+
this.#changeDetector.markForCheck();
|
|
2398
|
+
return;
|
|
2399
|
+
}
|
|
2400
|
+
for (const id of value) {
|
|
2401
|
+
const existingConfig = this.#rowDeleteConfigs.find((config) => config.id === id);
|
|
2402
|
+
if (existingConfig) {
|
|
2403
|
+
existingConfig.pending = false;
|
|
2404
|
+
}
|
|
2405
|
+
else if (this.#rowDeleteComponent && this.agGrid) {
|
|
2406
|
+
this.#rowDeleteConfigs.push({
|
|
2407
|
+
id: id,
|
|
2408
|
+
pending: false,
|
|
2409
|
+
});
|
|
2410
|
+
const overlay = this.#overlayService.create({
|
|
2411
|
+
enableScroll: true,
|
|
2412
|
+
showBackdrop: false,
|
|
2413
|
+
closeOnNavigation: true,
|
|
2414
|
+
enableClose: false,
|
|
2415
|
+
enablePointerEvents: true,
|
|
2416
|
+
});
|
|
2417
|
+
if (this.#rowDeleteComponent.inlineDeleteTemplateRef) {
|
|
2418
|
+
overlay.attachTemplate(this.#rowDeleteComponent.inlineDeleteTemplateRef, {
|
|
2419
|
+
$implicit: this.agGrid.api.getRowNode(id),
|
|
2420
|
+
tableWidth: () => this.#elementRef.nativeElement.querySelector('.sky-ag-grid')
|
|
2421
|
+
.offsetWidth,
|
|
2422
|
+
getRowDeleteItem: (row) => this.getRowDeleteItem(row),
|
|
2423
|
+
cancelRowDelete: (row) => this.cancelRowDelete(row),
|
|
2424
|
+
confirmRowDelete: (row) => this.confirmRowDelete(row),
|
|
2425
|
+
});
|
|
2426
|
+
}
|
|
2427
|
+
/**
|
|
2428
|
+
* We are manually setting the z-index here because overlays will always be on top of
|
|
2429
|
+
* the omnibar. The default manual setting is 2 less than the omnibar's z-index of 1000 and one less than
|
|
2430
|
+
* the header row's viewkeeper which is 999. We discussed changing the overlay service to allow for this
|
|
2431
|
+
* but decided against that change at this time due to its niche nature.
|
|
2432
|
+
*/
|
|
2433
|
+
this.#zIndex
|
|
2434
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2435
|
+
.subscribe((zIndex) => {
|
|
2436
|
+
overlay.componentRef.instance.zIndex = zIndex.toString(10);
|
|
2437
|
+
});
|
|
2438
|
+
this.#clipPath
|
|
2439
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2440
|
+
.subscribe((clipPath) => {
|
|
2441
|
+
overlay.componentRef.instance.updateClipPath(clipPath);
|
|
2442
|
+
});
|
|
2443
|
+
setTimeout(() => {
|
|
2444
|
+
const inlineDeleteRef = this.#rowDeleteComponent?.inlineDeleteRefs
|
|
2445
|
+
?.toArray()
|
|
2446
|
+
.find((elRef) => elRef.nativeElement.id === 'row-delete-ref-' + id);
|
|
2447
|
+
const affixer = this.#affixService.createAffixer(inlineDeleteRef);
|
|
2448
|
+
this.#affixToRow(affixer, id);
|
|
2449
|
+
this.#rowDeleteContents[id] = {
|
|
2450
|
+
affixer: affixer,
|
|
2451
|
+
overlay: overlay,
|
|
2452
|
+
};
|
|
2453
|
+
});
|
|
2454
|
+
}
|
|
2455
|
+
}
|
|
2456
|
+
for (const config of this.#rowDeleteConfigs) {
|
|
2457
|
+
if (value.indexOf(config.id) < 0) {
|
|
2458
|
+
this.#destroyRowDelete(config.id);
|
|
2459
|
+
}
|
|
2460
|
+
}
|
|
2461
|
+
this.#changeDetector.markForCheck();
|
|
2462
|
+
}
|
|
2463
|
+
get rowDeleteIds() {
|
|
2464
|
+
return this.#rowDeleteIdsInternal;
|
|
2465
|
+
}
|
|
2466
|
+
#rowDeleteConfigs;
|
|
2467
|
+
#ngUnsubscribe;
|
|
2468
|
+
#rowDeleteComponent;
|
|
2469
|
+
#rowDeleteContents;
|
|
2470
|
+
#rowDeleteIdsInternal;
|
|
2471
|
+
#affixService;
|
|
2472
|
+
#changeDetector;
|
|
2473
|
+
#elementRef;
|
|
2474
|
+
#overlayService;
|
|
2475
|
+
#viewContainerRef;
|
|
2476
|
+
#scrollableHostService;
|
|
2477
|
+
#clipPath;
|
|
2478
|
+
#zIndex;
|
|
2479
|
+
#hasStackingContext;
|
|
2480
|
+
constructor(affixService, changeDetector, elementRef, overlayService, viewContainerRef, scrollableHostService, stackingContext) {
|
|
2481
|
+
/**
|
|
2482
|
+
* Emits a `SkyAgGridRowDeleteCancelArgs` object when a row's inline delete is cancelled.
|
|
2483
|
+
*/
|
|
2484
|
+
this.rowDeleteCancel = new EventEmitter();
|
|
2485
|
+
/**
|
|
2486
|
+
* Emits a `SkyAgGridRowDeleteConfirmArgs` object when a row's inline delete is confirmed.
|
|
2487
|
+
*/
|
|
2488
|
+
this.rowDeleteConfirm = new EventEmitter();
|
|
2489
|
+
/**
|
|
2490
|
+
* Emits when the list of ids of the data in the rows where inline deletes are shown changes.
|
|
2491
|
+
*/
|
|
2492
|
+
this.rowDeleteIdsChange = new EventEmitter();
|
|
2493
|
+
this.#rowDeleteConfigs = [];
|
|
2494
|
+
this.#ngUnsubscribe = new Subject();
|
|
2495
|
+
this.#rowDeleteContents = {};
|
|
2496
|
+
this.#clipPath = new BehaviorSubject(undefined);
|
|
2497
|
+
this.#zIndex = new BehaviorSubject(998);
|
|
2498
|
+
this.#affixService = affixService;
|
|
2499
|
+
this.#changeDetector = changeDetector;
|
|
2500
|
+
this.#elementRef = elementRef;
|
|
2501
|
+
this.#overlayService = overlayService;
|
|
2502
|
+
this.#viewContainerRef = viewContainerRef;
|
|
2503
|
+
this.#scrollableHostService = scrollableHostService;
|
|
2504
|
+
this.#hasStackingContext = !!stackingContext;
|
|
2505
|
+
if (stackingContext) {
|
|
2506
|
+
stackingContext.zIndex
|
|
2507
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2508
|
+
.subscribe((zIndex) => {
|
|
2509
|
+
this.#zIndex.next(zIndex);
|
|
2510
|
+
});
|
|
2511
|
+
}
|
|
2512
|
+
}
|
|
2513
|
+
ngAfterContentInit() {
|
|
2514
|
+
this.#rowDeleteComponent = this.#viewContainerRef.createComponent(SkyAgGridRowDeleteComponent).instance;
|
|
2515
|
+
if (this.agGrid) {
|
|
2516
|
+
this.agGrid.rowDataUpdated
|
|
2517
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2518
|
+
.subscribe(() => {
|
|
2519
|
+
this.#updateRowDeleteStates();
|
|
2520
|
+
});
|
|
2521
|
+
this.agGrid.sortChanged
|
|
2522
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2523
|
+
.subscribe(() => {
|
|
2524
|
+
this.#updateRowDeleteStates();
|
|
2525
|
+
});
|
|
2526
|
+
this.agGrid.filterChanged
|
|
2527
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2528
|
+
.subscribe(() => {
|
|
2529
|
+
this.#updateRowDeleteStates();
|
|
2530
|
+
});
|
|
2531
|
+
}
|
|
2532
|
+
}
|
|
2533
|
+
ngAfterViewInit() {
|
|
2534
|
+
if (this.#hasStackingContext) {
|
|
2535
|
+
this.#scrollableHostService
|
|
2536
|
+
.watchScrollableHostClipPathChanges(this.#elementRef)
|
|
2537
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2538
|
+
.subscribe((clipPath) => {
|
|
2539
|
+
this.#clipPath.next(clipPath);
|
|
2540
|
+
});
|
|
2541
|
+
}
|
|
2542
|
+
}
|
|
2543
|
+
ngOnDestroy() {
|
|
2544
|
+
this.#ngUnsubscribe.next();
|
|
2545
|
+
this.#ngUnsubscribe.complete();
|
|
2546
|
+
Object.keys(this.#rowDeleteContents).forEach((id) => {
|
|
2547
|
+
this.#destroyRowDelete(id);
|
|
2548
|
+
});
|
|
2549
|
+
}
|
|
2550
|
+
cancelRowDelete(row) {
|
|
2551
|
+
if (row.id) {
|
|
2552
|
+
this.#rowDeleteConfigs = this.#rowDeleteConfigs.filter((config) => config.id !== row.id);
|
|
2553
|
+
this.rowDeleteCancel.emit({ id: row.id });
|
|
2554
|
+
this.#destroyRowDelete(row.id);
|
|
2555
|
+
}
|
|
2556
|
+
}
|
|
2557
|
+
confirmRowDelete(row) {
|
|
2558
|
+
if (row.id) {
|
|
2559
|
+
const rowConfig = this.#rowDeleteConfigs.find((config) => config.id === row.id);
|
|
2560
|
+
if (rowConfig) {
|
|
2561
|
+
rowConfig.pending = true;
|
|
2562
|
+
this.rowDeleteConfirm.emit({ id: row.id });
|
|
2563
|
+
}
|
|
2564
|
+
}
|
|
2565
|
+
}
|
|
2566
|
+
getRowDeleteItem(row) {
|
|
2567
|
+
return this.#rowDeleteConfigs.find((rowDelete) => rowDelete.id === row.id);
|
|
2568
|
+
}
|
|
2569
|
+
#affixToRow(affixer, id) {
|
|
2570
|
+
let rowElement = this.#elementRef.nativeElement.querySelector(`
|
|
2571
|
+
[row-id="${id}"] div[aria-colindex="1"],
|
|
2572
|
+
.ag-row.sky-ag-grid-row-${id} div[aria-colindex="1"]
|
|
2573
|
+
`);
|
|
2574
|
+
// This covers cases where AG Grid places the column index on an inner element (such as with the `enableCellTextSelection` option)
|
|
2575
|
+
// This appears to have been fixed by AG Grid in version 24 and so it is not testable after that version.
|
|
2576
|
+
/* istanbul ignore if */
|
|
2577
|
+
if (!rowElement) {
|
|
2578
|
+
const columns = this.#elementRef.nativeElement.querySelectorAll('[row-id="' + id + '"] > div');
|
|
2579
|
+
for (let i = 0; i < columns.length; i++) {
|
|
2580
|
+
if (columns[i].querySelector('[aria-colindex="1"]')) {
|
|
2581
|
+
rowElement = columns[i];
|
|
2582
|
+
break;
|
|
2583
|
+
}
|
|
2584
|
+
}
|
|
2585
|
+
}
|
|
2586
|
+
affixer.affixTo(rowElement, {
|
|
2587
|
+
autoFitContext: SkyAffixAutoFitContext.Viewport,
|
|
2588
|
+
isSticky: true,
|
|
2589
|
+
placement: 'above',
|
|
2590
|
+
verticalAlignment: 'top',
|
|
2591
|
+
horizontalAlignment: 'left',
|
|
2592
|
+
enableAutoFit: false,
|
|
2593
|
+
});
|
|
2594
|
+
}
|
|
2595
|
+
#destroyRowDelete(id) {
|
|
2596
|
+
const rowDeleteContents = this.#rowDeleteContents[id];
|
|
2597
|
+
/* sanity check */
|
|
2598
|
+
/* istanbul ignore else */
|
|
2599
|
+
if (rowDeleteContents) {
|
|
2600
|
+
rowDeleteContents.affixer.destroy();
|
|
2601
|
+
this.#overlayService.close(rowDeleteContents.overlay);
|
|
2602
|
+
delete this.#rowDeleteContents[id];
|
|
2603
|
+
this.#rowDeleteConfigs = this.#rowDeleteConfigs.filter((config) => config.id !== id);
|
|
2604
|
+
this.#rowDeleteIdsInternal = this.rowDeleteIds?.filter((arrayId) => arrayId !== id);
|
|
2605
|
+
this.rowDeleteIdsChange.emit(this.#rowDeleteIdsInternal);
|
|
2606
|
+
}
|
|
2607
|
+
}
|
|
2608
|
+
#updateRowDeleteStates() {
|
|
2609
|
+
this.#rowDeleteConfigs.forEach((config) => {
|
|
2610
|
+
if (!this.agGrid?.api.getRowNode(config.id)) {
|
|
2611
|
+
this.#destroyRowDelete(config.id);
|
|
2612
|
+
}
|
|
2613
|
+
else {
|
|
2614
|
+
// We must reaffix things when the data changes because the rows rerender and the previous element that the delete was affixed
|
|
2615
|
+
// to is destroyed.
|
|
2616
|
+
this.#affixToRow(this.#rowDeleteContents[config.id].affixer, config.id);
|
|
2617
|
+
}
|
|
2618
|
+
});
|
|
2619
|
+
this.#changeDetector.markForCheck();
|
|
2620
|
+
}
|
|
2621
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridRowDeleteDirective, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyOverlayService }, { token: i0.ViewContainerRef }, { token: i1.SkyScrollableHostService }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2622
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: SkyAgGridRowDeleteDirective, selector: "[skyAgGridRowDelete]", inputs: { rowDeleteIds: "rowDeleteIds" }, outputs: { rowDeleteCancel: "rowDeleteCancel", rowDeleteConfirm: "rowDeleteConfirm", rowDeleteIdsChange: "rowDeleteIdsChange" }, queries: [{ propertyName: "agGrid", first: true, predicate: AgGridAngular, descendants: true }], ngImport: i0 }); }
|
|
2623
|
+
}
|
|
2624
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridRowDeleteDirective, decorators: [{
|
|
2625
|
+
type: Directive,
|
|
2626
|
+
args: [{
|
|
2627
|
+
selector: '[skyAgGridRowDelete]',
|
|
2628
|
+
}]
|
|
2629
|
+
}], ctorParameters: function () { return [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyOverlayService }, { type: i0.ViewContainerRef }, { type: i1.SkyScrollableHostService }, { type: undefined, decorators: [{
|
|
2630
|
+
type: Optional
|
|
2631
|
+
}, {
|
|
2632
|
+
type: Inject,
|
|
2633
|
+
args: [SKY_STACKING_CONTEXT]
|
|
2634
|
+
}] }]; }, propDecorators: { rowDeleteIds: [{
|
|
2635
|
+
type: Input
|
|
2636
|
+
}], rowDeleteCancel: [{
|
|
2637
|
+
type: Output
|
|
2638
|
+
}], rowDeleteConfirm: [{
|
|
2639
|
+
type: Output
|
|
2640
|
+
}], rowDeleteIdsChange: [{
|
|
2641
|
+
type: Output
|
|
2642
|
+
}], agGrid: [{
|
|
2643
|
+
type: ContentChild,
|
|
2644
|
+
args: [AgGridAngular]
|
|
2645
|
+
}] } });
|
|
2646
|
+
|
|
2647
|
+
/**
|
|
2648
|
+
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
2649
|
+
* The contents of this file were automatically generated by
|
|
2650
|
+
* the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-ag-grid' schematic.
|
|
2651
|
+
* To update this file, simply rerun the command.
|
|
2652
|
+
*/
|
|
2653
|
+
const RESOURCES = {
|
|
2654
|
+
'EN-US': {
|
|
2655
|
+
sky_ag_grid_row_selector_aria_label: {
|
|
2656
|
+
message: 'Row selector for row {0}',
|
|
2657
|
+
},
|
|
2658
|
+
sky_ag_grid_cell_editor_number_aria_label: {
|
|
2659
|
+
message: 'Editable number {0} for row {1}',
|
|
2660
|
+
},
|
|
2661
|
+
sky_ag_grid_cell_editor_text_aria_label: {
|
|
2662
|
+
message: 'Editable text {0} for row {1}',
|
|
2663
|
+
},
|
|
2664
|
+
sky_ag_grid_cell_editor_autocomplete_aria_label: {
|
|
2665
|
+
message: 'Editable autocomplete {0} for row {1}',
|
|
2666
|
+
},
|
|
2667
|
+
sky_ag_grid_cell_renderer_number_validator_message: {
|
|
2668
|
+
message: 'Enter a valid number.',
|
|
2669
|
+
},
|
|
2670
|
+
sky_ag_grid_cell_renderer_currency_validator_message: {
|
|
2671
|
+
message: 'Enter a valid currency.',
|
|
2672
|
+
},
|
|
2673
|
+
skyux_lookup_tokens_summary: { message: '{0} items selected' },
|
|
2674
|
+
sky_ag_grid_cell_editor_currency_aria_label: {
|
|
2675
|
+
message: 'Editable currency {0} for row {1}',
|
|
2676
|
+
},
|
|
2677
|
+
sky_ag_grid_column_group_header_expand_aria_label: {
|
|
2678
|
+
message: 'Expand column group {0}',
|
|
2679
|
+
},
|
|
2680
|
+
sky_ag_grid_column_group_header_collapse_aria_label: {
|
|
2681
|
+
message: 'Collapse column group {0}',
|
|
2682
|
+
},
|
|
2683
|
+
},
|
|
2684
|
+
};
|
|
2685
|
+
class SkyAgGridResourcesProvider {
|
|
2686
|
+
getString(localeInfo, name) {
|
|
2687
|
+
return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
|
|
2688
|
+
}
|
|
2689
|
+
}
|
|
2690
|
+
/**
|
|
2691
|
+
* Import into any component library module that needs to use resource strings.
|
|
2692
|
+
*/
|
|
2693
|
+
class SkyAgGridResourcesModule {
|
|
2694
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2695
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridResourcesModule, exports: [SkyI18nModule] }); }
|
|
2696
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridResourcesModule, providers: [
|
|
2697
|
+
{
|
|
2698
|
+
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
2699
|
+
useClass: SkyAgGridResourcesProvider,
|
|
2700
|
+
multi: true,
|
|
2701
|
+
},
|
|
2702
|
+
], imports: [SkyI18nModule] }); }
|
|
2703
|
+
}
|
|
2704
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridResourcesModule, decorators: [{
|
|
2705
|
+
type: NgModule,
|
|
2706
|
+
args: [{
|
|
2707
|
+
exports: [SkyI18nModule],
|
|
2708
|
+
providers: [
|
|
2709
|
+
{
|
|
2710
|
+
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
2711
|
+
useClass: SkyAgGridResourcesProvider,
|
|
2712
|
+
multi: true,
|
|
2713
|
+
},
|
|
2714
|
+
],
|
|
2715
|
+
}]
|
|
2716
|
+
}] });
|
|
2717
|
+
|
|
2718
|
+
class SkyAgGridCellEditorAutocompleteModule {
|
|
2719
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2720
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorAutocompleteModule, declarations: [SkyAgGridCellEditorAutocompleteComponent], imports: [ReactiveFormsModule,
|
|
2721
|
+
SkyAgGridResourcesModule,
|
|
2722
|
+
SkyAutocompleteModule], exports: [SkyAgGridCellEditorAutocompleteComponent] }); }
|
|
2723
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorAutocompleteModule, imports: [ReactiveFormsModule,
|
|
2724
|
+
SkyAgGridResourcesModule,
|
|
2725
|
+
SkyAutocompleteModule] }); }
|
|
2726
|
+
}
|
|
2727
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorAutocompleteModule, decorators: [{
|
|
2728
|
+
type: NgModule,
|
|
2729
|
+
args: [{
|
|
2730
|
+
imports: [
|
|
2731
|
+
ReactiveFormsModule,
|
|
2732
|
+
SkyAgGridResourcesModule,
|
|
2733
|
+
SkyAutocompleteModule,
|
|
2734
|
+
],
|
|
2735
|
+
declarations: [SkyAgGridCellEditorAutocompleteComponent],
|
|
2736
|
+
exports: [SkyAgGridCellEditorAutocompleteComponent],
|
|
2737
|
+
}]
|
|
2738
|
+
}] });
|
|
2739
|
+
|
|
2740
|
+
class SkyAgGridCellEditorCurrencyModule {
|
|
2741
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorCurrencyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2742
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorCurrencyModule, declarations: [SkyAgGridCellEditorCurrencyComponent], imports: [SkyAgGridResourcesModule,
|
|
2743
|
+
ReactiveFormsModule,
|
|
2744
|
+
SkyAutonumericModule], exports: [SkyAgGridCellEditorCurrencyComponent] }); }
|
|
2745
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorCurrencyModule, imports: [SkyAgGridResourcesModule,
|
|
2746
|
+
ReactiveFormsModule,
|
|
2747
|
+
SkyAutonumericModule] }); }
|
|
2748
|
+
}
|
|
2749
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorCurrencyModule, decorators: [{
|
|
2750
|
+
type: NgModule,
|
|
2751
|
+
args: [{
|
|
2752
|
+
imports: [
|
|
2753
|
+
SkyAgGridResourcesModule,
|
|
2754
|
+
ReactiveFormsModule,
|
|
2755
|
+
SkyAutonumericModule,
|
|
2756
|
+
],
|
|
2757
|
+
declarations: [SkyAgGridCellEditorCurrencyComponent],
|
|
2758
|
+
exports: [SkyAgGridCellEditorCurrencyComponent],
|
|
2759
|
+
}]
|
|
2760
|
+
}] });
|
|
2761
|
+
|
|
2762
|
+
class SkyAgGridCellEditorDatepickerModule {
|
|
2763
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2764
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorDatepickerModule, declarations: [SkyAgGridCellEditorDatepickerComponent], imports: [SkyDatepickerModule, ReactiveFormsModule], exports: [SkyAgGridCellEditorDatepickerComponent] }); }
|
|
2765
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorDatepickerModule, imports: [SkyDatepickerModule, ReactiveFormsModule] }); }
|
|
2766
|
+
}
|
|
2767
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorDatepickerModule, decorators: [{
|
|
2768
|
+
type: NgModule,
|
|
2769
|
+
args: [{
|
|
2770
|
+
imports: [SkyDatepickerModule, ReactiveFormsModule],
|
|
2771
|
+
declarations: [SkyAgGridCellEditorDatepickerComponent],
|
|
2772
|
+
exports: [SkyAgGridCellEditorDatepickerComponent],
|
|
2773
|
+
}]
|
|
2774
|
+
}] });
|
|
2775
|
+
|
|
2776
|
+
class SkyAgGridCellEditorLookupModule {
|
|
2777
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorLookupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2778
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorLookupModule, declarations: [SkyAgGridCellEditorLookupComponent], imports: [CommonModule,
|
|
2779
|
+
ReactiveFormsModule,
|
|
2780
|
+
SkyI18nModule,
|
|
2781
|
+
SkyInputBoxModule,
|
|
2782
|
+
SkyLookupModule], exports: [SkyAgGridCellEditorLookupComponent] }); }
|
|
2783
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorLookupModule, imports: [CommonModule,
|
|
2784
|
+
ReactiveFormsModule,
|
|
2785
|
+
SkyI18nModule,
|
|
2786
|
+
SkyInputBoxModule,
|
|
2787
|
+
SkyLookupModule] }); }
|
|
2788
|
+
}
|
|
2789
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorLookupModule, decorators: [{
|
|
2790
|
+
type: NgModule,
|
|
2791
|
+
args: [{
|
|
2792
|
+
declarations: [SkyAgGridCellEditorLookupComponent],
|
|
2793
|
+
exports: [SkyAgGridCellEditorLookupComponent],
|
|
2794
|
+
imports: [
|
|
2795
|
+
CommonModule,
|
|
2796
|
+
ReactiveFormsModule,
|
|
2797
|
+
SkyI18nModule,
|
|
2798
|
+
SkyInputBoxModule,
|
|
2799
|
+
SkyLookupModule,
|
|
2800
|
+
],
|
|
2801
|
+
}]
|
|
2802
|
+
}] });
|
|
2803
|
+
|
|
2804
|
+
class SkyAgGridCellEditorNumberModule {
|
|
2805
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2806
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorNumberModule, declarations: [SkyAgGridCellEditorNumberComponent], imports: [SkyAgGridResourcesModule, ReactiveFormsModule], exports: [SkyAgGridCellEditorNumberComponent] }); }
|
|
2807
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorNumberModule, imports: [SkyAgGridResourcesModule, ReactiveFormsModule] }); }
|
|
2808
|
+
}
|
|
2809
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorNumberModule, decorators: [{
|
|
2810
|
+
type: NgModule,
|
|
2811
|
+
args: [{
|
|
2812
|
+
imports: [SkyAgGridResourcesModule, ReactiveFormsModule],
|
|
2813
|
+
declarations: [SkyAgGridCellEditorNumberComponent],
|
|
2814
|
+
exports: [SkyAgGridCellEditorNumberComponent],
|
|
2815
|
+
}]
|
|
2816
|
+
}] });
|
|
2817
|
+
|
|
2818
|
+
class SkyAgGridCellEditorTextModule {
|
|
2819
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2820
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorTextModule, declarations: [SkyAgGridCellEditorTextComponent], imports: [SkyAgGridResourcesModule, ReactiveFormsModule], exports: [SkyAgGridCellEditorTextComponent] }); }
|
|
2821
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorTextModule, imports: [SkyAgGridResourcesModule, ReactiveFormsModule] }); }
|
|
2822
|
+
}
|
|
2823
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellEditorTextModule, decorators: [{
|
|
2824
|
+
type: NgModule,
|
|
2825
|
+
args: [{
|
|
2826
|
+
imports: [SkyAgGridResourcesModule, ReactiveFormsModule],
|
|
2827
|
+
declarations: [SkyAgGridCellEditorTextComponent],
|
|
2828
|
+
exports: [SkyAgGridCellEditorTextComponent],
|
|
2829
|
+
}]
|
|
2830
|
+
}] });
|
|
2831
|
+
|
|
2832
|
+
class SkyAgGridCellValidatorModule {
|
|
2833
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellValidatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2834
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellValidatorModule, declarations: [SkyAgGridCellValidatorTooltipComponent], imports: [CommonModule, SkyPopoverModule, SkyStatusIndicatorModule], exports: [SkyAgGridCellValidatorTooltipComponent] }); }
|
|
2835
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellValidatorModule, imports: [CommonModule, SkyPopoverModule, SkyStatusIndicatorModule] }); }
|
|
2836
|
+
}
|
|
2837
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellValidatorModule, decorators: [{
|
|
2838
|
+
type: NgModule,
|
|
2839
|
+
args: [{
|
|
2840
|
+
declarations: [SkyAgGridCellValidatorTooltipComponent],
|
|
2841
|
+
exports: [SkyAgGridCellValidatorTooltipComponent],
|
|
2842
|
+
imports: [CommonModule, SkyPopoverModule, SkyStatusIndicatorModule],
|
|
2843
|
+
}]
|
|
2844
|
+
}] });
|
|
2845
|
+
|
|
2846
|
+
class SkyAgGridCellRendererCurrencyModule {
|
|
2847
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererCurrencyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2848
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererCurrencyModule, declarations: [SkyAgGridCellRendererCurrencyComponent,
|
|
2849
|
+
SkyAgGridCellRendererCurrencyValidatorComponent], imports: [CommonModule,
|
|
2850
|
+
SkyAgGridResourcesModule,
|
|
2851
|
+
SkyAgGridCellValidatorModule,
|
|
2852
|
+
FormsModule,
|
|
2853
|
+
SkyNumericModule], exports: [SkyAgGridCellRendererCurrencyComponent,
|
|
2854
|
+
SkyAgGridCellRendererCurrencyValidatorComponent] }); }
|
|
2855
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererCurrencyModule, imports: [CommonModule,
|
|
2856
|
+
SkyAgGridResourcesModule,
|
|
2857
|
+
SkyAgGridCellValidatorModule,
|
|
2858
|
+
FormsModule,
|
|
2859
|
+
SkyNumericModule] }); }
|
|
2860
|
+
}
|
|
2861
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererCurrencyModule, decorators: [{
|
|
2862
|
+
type: NgModule,
|
|
2863
|
+
args: [{
|
|
2864
|
+
imports: [
|
|
2865
|
+
CommonModule,
|
|
2866
|
+
SkyAgGridResourcesModule,
|
|
2867
|
+
SkyAgGridCellValidatorModule,
|
|
2868
|
+
FormsModule,
|
|
2869
|
+
SkyNumericModule,
|
|
2870
|
+
],
|
|
2871
|
+
declarations: [
|
|
2872
|
+
SkyAgGridCellRendererCurrencyComponent,
|
|
2873
|
+
SkyAgGridCellRendererCurrencyValidatorComponent,
|
|
2874
|
+
],
|
|
2875
|
+
exports: [
|
|
2876
|
+
SkyAgGridCellRendererCurrencyComponent,
|
|
2877
|
+
SkyAgGridCellRendererCurrencyValidatorComponent,
|
|
2878
|
+
],
|
|
2879
|
+
}]
|
|
2880
|
+
}] });
|
|
2881
|
+
|
|
2882
|
+
class SkyAgGridCellRendererLookupModule {
|
|
2883
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererLookupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2884
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererLookupModule, declarations: [SkyAgGridCellRendererLookupComponent], imports: [CommonModule, SkyAgGridResourcesModule], exports: [SkyAgGridCellRendererLookupComponent] }); }
|
|
2885
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererLookupModule, imports: [CommonModule, SkyAgGridResourcesModule] }); }
|
|
2886
|
+
}
|
|
2887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererLookupModule, decorators: [{
|
|
2888
|
+
type: NgModule,
|
|
2889
|
+
args: [{
|
|
2890
|
+
declarations: [SkyAgGridCellRendererLookupComponent],
|
|
2891
|
+
exports: [SkyAgGridCellRendererLookupComponent],
|
|
2892
|
+
imports: [CommonModule, SkyAgGridResourcesModule],
|
|
2893
|
+
}]
|
|
2894
|
+
}] });
|
|
2895
|
+
|
|
2896
|
+
class SkyAgGridCellRendererRowSelectorModule {
|
|
2897
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererRowSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2898
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererRowSelectorModule, declarations: [SkyAgGridCellRendererRowSelectorComponent], imports: [SkyAgGridResourcesModule, SkyCheckboxModule, FormsModule], exports: [SkyAgGridCellRendererRowSelectorComponent] }); }
|
|
2899
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererRowSelectorModule, imports: [SkyAgGridResourcesModule, SkyCheckboxModule, FormsModule] }); }
|
|
2900
|
+
}
|
|
2901
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererRowSelectorModule, decorators: [{
|
|
2902
|
+
type: NgModule,
|
|
2903
|
+
args: [{
|
|
2904
|
+
imports: [SkyAgGridResourcesModule, SkyCheckboxModule, FormsModule],
|
|
2905
|
+
declarations: [SkyAgGridCellRendererRowSelectorComponent],
|
|
2906
|
+
exports: [SkyAgGridCellRendererRowSelectorComponent],
|
|
2907
|
+
}]
|
|
2908
|
+
}] });
|
|
2909
|
+
|
|
2910
|
+
class SkyAgGridCellRendererValidatorTooltipModule {
|
|
2911
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererValidatorTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2912
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererValidatorTooltipModule, declarations: [SkyAgGridCellRendererValidatorTooltipComponent], imports: [SkyAgGridCellValidatorModule], exports: [SkyAgGridCellRendererValidatorTooltipComponent] }); }
|
|
2913
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererValidatorTooltipModule, imports: [SkyAgGridCellValidatorModule] }); }
|
|
2914
|
+
}
|
|
2915
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridCellRendererValidatorTooltipModule, decorators: [{
|
|
2916
|
+
type: NgModule,
|
|
2917
|
+
args: [{
|
|
2918
|
+
declarations: [SkyAgGridCellRendererValidatorTooltipComponent],
|
|
2919
|
+
exports: [SkyAgGridCellRendererValidatorTooltipComponent],
|
|
2920
|
+
imports: [SkyAgGridCellValidatorModule],
|
|
2921
|
+
}]
|
|
2922
|
+
}] });
|
|
2923
|
+
|
|
2924
|
+
class SkyAgGridModule {
|
|
2925
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2926
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridModule, declarations: [SkyAgGridDataManagerAdapterDirective,
|
|
2927
|
+
SkyAgGridHeaderComponent,
|
|
2928
|
+
SkyAgGridHeaderGroupComponent,
|
|
2929
|
+
SkyAgGridRowDeleteComponent,
|
|
2930
|
+
SkyAgGridRowDeleteDirective,
|
|
2931
|
+
SkyAgGridWrapperComponent], imports: [AgGridModule,
|
|
2932
|
+
CommonModule,
|
|
2933
|
+
SkyAgGridCellEditorAutocompleteModule,
|
|
2934
|
+
SkyAgGridCellEditorDatepickerModule,
|
|
2935
|
+
SkyAgGridCellEditorLookupModule,
|
|
2936
|
+
SkyAgGridCellEditorNumberModule,
|
|
2937
|
+
SkyAgGridCellEditorCurrencyModule,
|
|
2938
|
+
SkyAgGridCellRendererCurrencyModule,
|
|
2939
|
+
SkyAgGridCellRendererLookupModule,
|
|
2940
|
+
SkyAgGridCellRendererRowSelectorModule,
|
|
2941
|
+
SkyAgGridCellRendererValidatorTooltipModule,
|
|
2942
|
+
SkyAgGridCellValidatorModule,
|
|
2943
|
+
SkyAgGridCellEditorTextModule,
|
|
2944
|
+
SkyDataManagerModule,
|
|
2945
|
+
SkyI18nModule,
|
|
2946
|
+
SkyIconModule,
|
|
2947
|
+
SkyInlineDeleteModule,
|
|
2948
|
+
SkyViewkeeperModule,
|
|
2949
|
+
SkyThemeModule], exports: [SkyAgGridDataManagerAdapterDirective,
|
|
2950
|
+
SkyAgGridRowDeleteComponent,
|
|
2951
|
+
SkyAgGridRowDeleteDirective,
|
|
2952
|
+
SkyAgGridWrapperComponent,
|
|
2953
|
+
SkyAgGridHeaderComponent,
|
|
2954
|
+
SkyAgGridHeaderGroupComponent] }); }
|
|
2955
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridModule, imports: [AgGridModule,
|
|
2956
|
+
CommonModule,
|
|
2957
|
+
SkyAgGridCellEditorAutocompleteModule,
|
|
2958
|
+
SkyAgGridCellEditorDatepickerModule,
|
|
2959
|
+
SkyAgGridCellEditorLookupModule,
|
|
2960
|
+
SkyAgGridCellEditorNumberModule,
|
|
2961
|
+
SkyAgGridCellEditorCurrencyModule,
|
|
2962
|
+
SkyAgGridCellRendererCurrencyModule,
|
|
2963
|
+
SkyAgGridCellRendererLookupModule,
|
|
2964
|
+
SkyAgGridCellRendererRowSelectorModule,
|
|
2965
|
+
SkyAgGridCellRendererValidatorTooltipModule,
|
|
2966
|
+
SkyAgGridCellValidatorModule,
|
|
2967
|
+
SkyAgGridCellEditorTextModule,
|
|
2968
|
+
SkyDataManagerModule,
|
|
2969
|
+
SkyI18nModule,
|
|
2970
|
+
SkyIconModule,
|
|
2971
|
+
SkyInlineDeleteModule,
|
|
2972
|
+
SkyViewkeeperModule,
|
|
2973
|
+
SkyThemeModule] }); }
|
|
2974
|
+
}
|
|
2975
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAgGridModule, decorators: [{
|
|
2976
|
+
type: NgModule,
|
|
2977
|
+
args: [{
|
|
2978
|
+
declarations: [
|
|
2979
|
+
SkyAgGridDataManagerAdapterDirective,
|
|
2980
|
+
SkyAgGridHeaderComponent,
|
|
2981
|
+
SkyAgGridHeaderGroupComponent,
|
|
2982
|
+
SkyAgGridRowDeleteComponent,
|
|
2983
|
+
SkyAgGridRowDeleteDirective,
|
|
2984
|
+
SkyAgGridWrapperComponent,
|
|
2985
|
+
],
|
|
2986
|
+
imports: [
|
|
2987
|
+
AgGridModule,
|
|
2988
|
+
CommonModule,
|
|
2989
|
+
SkyAgGridCellEditorAutocompleteModule,
|
|
2990
|
+
SkyAgGridCellEditorDatepickerModule,
|
|
2991
|
+
SkyAgGridCellEditorLookupModule,
|
|
2992
|
+
SkyAgGridCellEditorNumberModule,
|
|
2993
|
+
SkyAgGridCellEditorCurrencyModule,
|
|
2994
|
+
SkyAgGridCellRendererCurrencyModule,
|
|
2995
|
+
SkyAgGridCellRendererLookupModule,
|
|
2996
|
+
SkyAgGridCellRendererRowSelectorModule,
|
|
2997
|
+
SkyAgGridCellRendererValidatorTooltipModule,
|
|
2998
|
+
SkyAgGridCellValidatorModule,
|
|
2999
|
+
SkyAgGridCellEditorTextModule,
|
|
3000
|
+
SkyDataManagerModule,
|
|
3001
|
+
SkyI18nModule,
|
|
3002
|
+
SkyIconModule,
|
|
3003
|
+
SkyInlineDeleteModule,
|
|
3004
|
+
SkyViewkeeperModule,
|
|
3005
|
+
SkyThemeModule,
|
|
3006
|
+
],
|
|
3007
|
+
exports: [
|
|
3008
|
+
SkyAgGridDataManagerAdapterDirective,
|
|
3009
|
+
SkyAgGridRowDeleteComponent,
|
|
3010
|
+
SkyAgGridRowDeleteDirective,
|
|
3011
|
+
SkyAgGridWrapperComponent,
|
|
3012
|
+
SkyAgGridHeaderComponent,
|
|
3013
|
+
SkyAgGridHeaderGroupComponent,
|
|
3014
|
+
],
|
|
3015
|
+
}]
|
|
3016
|
+
}] });
|
|
3017
|
+
|
|
3018
|
+
// Export any types that should be included in the root.
|
|
3019
|
+
|
|
3020
|
+
/**
|
|
3021
|
+
* Generated bundle index. Do not edit.
|
|
3022
|
+
*/
|
|
3023
|
+
|
|
3024
|
+
export { SkyAgGridCellEditorInitialAction, SkyAgGridCellEditorUtils, SkyAgGridHeaderGroupInfo, SkyAgGridHeaderInfo, SkyAgGridModule, SkyAgGridService, SkyCellClass, SkyCellType, SkyHeaderClass, SkyAgGridCellEditorAutocompleteComponent as λ1, SkyAgGridCellRendererValidatorTooltipComponent as λ10, SkyAgGridCellValidatorTooltipComponent as λ11, SkyAgGridWrapperComponent as λ12, SkyAgGridRowDeleteDirective as λ13, SkyAgGridDataManagerAdapterDirective as λ14, SkyAgGridCellEditorLookupComponent as λ15, SkyAgGridCellRendererLookupComponent as λ16, SkyAgGridHeaderComponent as λ17, SkyAgGridHeaderGroupComponent as λ18, SkyAgGridCellEditorTextComponent as λ2, SkyAgGridCellEditorCurrencyComponent as λ3, SkyAgGridCellEditorNumberComponent as λ4, SkyAgGridCellEditorDatepickerComponent as λ5, SkyAgGridRowDeleteComponent as λ6, SkyAgGridCellRendererRowSelectorComponent as λ7, SkyAgGridCellRendererCurrencyValidatorComponent as λ8, SkyAgGridCellRendererCurrencyComponent as λ9 };
|
|
3025
|
+
//# sourceMappingURL=skyux-ag-grid.mjs.map
|