@slickgrid-universal/composite-editor-component 3.7.0 → 4.0.0-alpha.0

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.
Files changed (18) hide show
  1. package/README.md +1 -0
  2. package/dist/{commonjs → cjs}/compositeEditor.factory.js +28 -35
  3. package/dist/cjs/compositeEditor.factory.js.map +1 -0
  4. package/dist/{commonjs → cjs}/slick-composite-editor.component.js +93 -118
  5. package/dist/cjs/slick-composite-editor.component.js.map +1 -0
  6. package/dist/esm/compositeEditor.factory.js +29 -36
  7. package/dist/esm/compositeEditor.factory.js.map +1 -1
  8. package/dist/esm/slick-composite-editor.component.js +93 -118
  9. package/dist/esm/slick-composite-editor.component.js.map +1 -1
  10. package/dist/tsconfig.tsbuildinfo +1 -1
  11. package/dist/types/compositeEditor.factory.d.ts.map +1 -1
  12. package/dist/types/slick-composite-editor.component.d.ts +4 -3
  13. package/dist/types/slick-composite-editor.component.d.ts.map +1 -1
  14. package/package.json +8 -7
  15. package/dist/commonjs/compositeEditor.factory.js.map +0 -1
  16. package/dist/commonjs/slick-composite-editor.component.js.map +0 -1
  17. /package/dist/{commonjs → cjs}/index.js +0 -0
  18. /package/dist/{commonjs → cjs}/index.js.map +0 -0
package/dist/{commonjs → cjs}/slick-composite-editor.component.js RENAMED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.SlickCompositeEditorComponent = void 0;
4
+ const binding_1 = require("@slickgrid-universal/binding");
4
5
  const utils_1 = require("@slickgrid-universal/utils");
5
6
  const common_1 = require("@slickgrid-universal/common");
6
7
  const compositeEditor_factory_1 = require("./compositeEditor.factory");
@@ -10,7 +11,7 @@ class SlickCompositeEditorComponent {
10
11
  return this._eventHandler;
11
12
  }
12
13
  get dataView() {
13
- return this.grid.getData();
14
+ return this.grid?.getData();
14
15
  }
15
16
  get dataViewLength() {
16
17
  return this.dataView.getLength();
@@ -25,16 +26,15 @@ class SlickCompositeEditorComponent {
25
26
  this._editors = editors;
26
27
  }
27
28
  get gridOptions() {
28
- var _a;
29
- return (_a = this.grid) === null || _a === void 0 ? void 0 : _a.getOptions();
29
+ return this.grid?.getOptions();
30
30
  }
31
31
  constructor() {
32
32
  this._columnDefinitions = [];
33
33
  this._lastActiveRowNumber = -1;
34
34
  this._formValues = null;
35
35
  this.gridService = null;
36
- this._eventHandler = new Slick.EventHandler();
37
- this._bindEventService = new common_1.BindingEventService();
36
+ this._eventHandler = new common_1.SlickEventHandler();
37
+ this._bindEventService = new binding_1.BindingEventService();
38
38
  }
39
39
  /**
40
40
  * initialize the Composite Editor by passing the SlickGrid object and the container service
@@ -43,7 +43,6 @@ class SlickCompositeEditorComponent {
43
43
  * we are simply using this init() function with a very basic container service to do the job
44
44
  */
45
45
  init(grid, containerService) {
46
- var _a, _b;
47
46
  this.grid = grid;
48
47
  this.gridService = containerService.get('GridService');
49
48
  this.translaterService = containerService.get('TranslaterService');
@@ -54,7 +53,7 @@ class SlickCompositeEditorComponent {
54
53
  throw new Error('[Slickgrid-Universal] requires a Translate Service to be installed and configured when the grid option "enableTranslate" is enabled.');
55
54
  }
56
55
  // get locales provided by user in forRoot or else use default English locales via the Constants
57
- this._locales = (_b = (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.locales) !== null && _b !== void 0 ? _b : common_1.Constants.locales;
56
+ this._locales = this.gridOptions?.locales ?? common_1.Constants.locales;
58
57
  }
59
58
  /** Dispose of the Component & unsubscribe all events */
60
59
  dispose() {
@@ -65,11 +64,10 @@ class SlickCompositeEditorComponent {
65
64
  }
66
65
  /** Dispose of the Component without unsubscribing any events */
67
66
  disposeComponent() {
68
- var _a, _b, _c;
69
67
  // protected _editorContainers!: Array<HTMLElement | null>;
70
- (_a = this._modalBodyTopValidationElm) === null || _a === void 0 ? void 0 : _a.remove();
71
- (_b = this._modalSaveButtonElm) === null || _b === void 0 ? void 0 : _b.remove();
72
- if (typeof ((_c = this._modalElm) === null || _c === void 0 ? void 0 : _c.remove) === 'function') {
68
+ this._modalBodyTopValidationElm?.remove();
69
+ this._modalSaveButtonElm?.remove();
70
+ if (typeof this._modalElm?.remove === 'function') {
73
71
  this._modalElm.remove();
74
72
  // remove the body backdrop click listener, every other listeners will be dropped automatically since we destroy the component
75
73
  document.body.classList.remove('slick-modal-open');
@@ -88,24 +86,23 @@ class SlickCompositeEditorComponent {
88
86
  * @param {Boolean} triggerOnCompositeEditorChange - defaults to True, will this change trigger a onCompositeEditorChange event?
89
87
  */
90
88
  changeFormInputValue(columnIdOrDef, newValue, skipMissingEditorError = false, triggerOnCompositeEditorChange = true) {
91
- var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o;
92
89
  const columnDef = this.getColumnByObjectOrId(columnIdOrDef);
93
- const columnId = typeof columnIdOrDef === 'string' ? columnIdOrDef : (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.id) !== null && _a !== void 0 ? _a : '';
94
- const editor = (_b = this._editors) === null || _b === void 0 ? void 0 : _b[columnId];
90
+ const columnId = typeof columnIdOrDef === 'string' ? columnIdOrDef : columnDef?.id ?? '';
91
+ const editor = this._editors?.[columnId];
95
92
  let outputValue = newValue;
96
93
  if (!editor && !skipMissingEditorError) {
97
94
  throw new Error(`Composite Editor with column id "${columnId}" not found.`);
98
95
  }
99
- if (typeof (editor === null || editor === void 0 ? void 0 : editor.setValue) === 'function' && Array.isArray(this._editorContainers)) {
96
+ if (typeof editor?.setValue === 'function' && Array.isArray(this._editorContainers)) {
100
97
  editor.setValue(newValue, true, triggerOnCompositeEditorChange);
101
98
  const editorContainerElm = this._editorContainers.find(editorElm => editorElm.dataset.editorid === columnId);
102
- const excludeDisabledFieldFormValues = (_f = (_d = (_c = this.gridOptions) === null || _c === void 0 ? void 0 : _c.compositeEditorOptions) === null || _d === void 0 ? void 0 : _d.excludeDisabledFieldFormValues) !== null && _f !== void 0 ? _f : false;
99
+ const excludeDisabledFieldFormValues = this.gridOptions?.compositeEditorOptions?.excludeDisabledFieldFormValues ?? false;
103
100
  if (!editor.disabled || (editor.disabled && !excludeDisabledFieldFormValues)) {
104
- (_g = editorContainerElm === null || editorContainerElm === void 0 ? void 0 : editorContainerElm.classList) === null || _g === void 0 ? void 0 : _g.add('modified');
101
+ editorContainerElm?.classList?.add('modified');
105
102
  }
106
103
  else {
107
104
  outputValue = '';
108
- (_h = editorContainerElm === null || editorContainerElm === void 0 ? void 0 : editorContainerElm.classList) === null || _h === void 0 ? void 0 : _h.remove('modified');
105
+ editorContainerElm?.classList?.remove('modified');
109
106
  }
110
107
  // when the field is disabled, we will only allow a blank value anything else will be disregarded
111
108
  if (editor.disabled && (outputValue !== '' || outputValue !== null || outputValue !== undefined || outputValue !== 0)) {
@@ -114,12 +111,12 @@ class SlickCompositeEditorComponent {
114
111
  }
115
112
  // is the field a complex object, like "address.streetNumber"
116
113
  // we'll set assign the value as a complex object following the `field` dot notation
117
- const fieldName = (_j = columnDef === null || columnDef === void 0 ? void 0 : columnDef.field) !== null && _j !== void 0 ? _j : '';
118
- if (columnDef && (fieldName === null || fieldName === void 0 ? void 0 : fieldName.includes('.'))) {
114
+ const fieldName = columnDef?.field ?? '';
115
+ if (columnDef && fieldName?.includes('.')) {
119
116
  // when it's a complex object, user could override the object path (where the editable object is located)
120
117
  // else we use the path provided in the Field Column Definition
121
- const objectPath = (_m = (_l = (_k = columnDef.internalColumnEditor) === null || _k === void 0 ? void 0 : _k.complexObjectPath) !== null && _l !== void 0 ? _l : fieldName) !== null && _m !== void 0 ? _m : '';
122
- (0, utils_1.setDeepValue)((_o = this._formValues) !== null && _o !== void 0 ? _o : {}, objectPath, newValue);
118
+ const objectPath = columnDef.internalColumnEditor?.complexObjectPath ?? fieldName ?? '';
119
+ (0, utils_1.setDeepValue)(this._formValues ?? {}, objectPath, newValue);
123
120
  }
124
121
  else {
125
122
  this._formValues = { ...this._formValues, [columnId]: outputValue };
@@ -132,16 +129,15 @@ class SlickCompositeEditorComponent {
132
129
  * @param {*} newValue - the new value
133
130
  */
134
131
  changeFormValue(columnIdOrDef, newValue) {
135
- var _a, _b, _c, _d, _f;
136
132
  const columnDef = this.getColumnByObjectOrId(columnIdOrDef);
137
- const columnId = typeof columnIdOrDef === 'string' ? columnIdOrDef : (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.id) !== null && _a !== void 0 ? _a : '';
133
+ const columnId = typeof columnIdOrDef === 'string' ? columnIdOrDef : columnDef?.id ?? '';
138
134
  // is the field a complex object, like "address.streetNumber"
139
135
  // we'll set assign the value as a complex object following the `field` dot notation
140
- const fieldName = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.field) !== null && _b !== void 0 ? _b : columnIdOrDef;
141
- if (fieldName === null || fieldName === void 0 ? void 0 : fieldName.includes('.')) {
136
+ const fieldName = columnDef?.field ?? columnIdOrDef;
137
+ if (fieldName?.includes('.')) {
142
138
  // when it's a complex object, user could override the object path (where the editable object is located)
143
139
  // else we use the path provided in the Field Column Definition
144
- const objectPath = (_f = (_d = (_c = columnDef === null || columnDef === void 0 ? void 0 : columnDef.internalColumnEditor) === null || _c === void 0 ? void 0 : _c.complexObjectPath) !== null && _d !== void 0 ? _d : fieldName) !== null && _f !== void 0 ? _f : '';
140
+ const objectPath = columnDef?.internalColumnEditor?.complexObjectPath ?? fieldName ?? '';
145
141
  (0, utils_1.setDeepValue)(this._formValues, objectPath, newValue);
146
142
  }
147
143
  else {
@@ -156,10 +152,9 @@ class SlickCompositeEditorComponent {
156
152
  * @param {*} newValue - the new value
157
153
  */
158
154
  changeFormEditorOption(columnId, optionName, newOptionValue) {
159
- var _a;
160
- const editor = (_a = this._editors) === null || _a === void 0 ? void 0 : _a[columnId];
155
+ const editor = this._editors?.[columnId];
161
156
  // change an Editor option (not all Editors have that method, so make sure it exists before trying to call it)
162
- if (editor === null || editor === void 0 ? void 0 : editor.changeEditorOption) {
157
+ if (editor?.changeEditorOption) {
163
158
  editor.changeEditorOption(optionName, newOptionValue);
164
159
  }
165
160
  else {
@@ -172,16 +167,14 @@ class SlickCompositeEditorComponent {
172
167
  * @param isDisabled - defaults to True, are we disabling the associated form input
173
168
  */
174
169
  disableFormInput(columnId, isDisabled = true) {
175
- var _a;
176
- const editor = (_a = this._editors) === null || _a === void 0 ? void 0 : _a[columnId];
177
- if ((editor === null || editor === void 0 ? void 0 : editor.disable) && Array.isArray(this._editorContainers)) {
170
+ const editor = this._editors?.[columnId];
171
+ if (editor?.disable && Array.isArray(this._editorContainers)) {
178
172
  editor.disable(isDisabled);
179
173
  }
180
174
  }
181
175
  /** Entry point to initialize and open the Composite Editor modal window */
182
176
  openDetails(options) {
183
- var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
184
- const onError = (_a = options.onError) !== null && _a !== void 0 ? _a : DEFAULT_ON_ERROR;
177
+ const onError = options.onError ?? DEFAULT_ON_ERROR;
185
178
  const defaultOptions = {
186
179
  backdrop: 'static',
187
180
  showCloseButtonOutside: true,
@@ -194,12 +187,12 @@ class SlickCompositeEditorComponent {
194
187
  return null;
195
188
  }
196
189
  this._formValues = null; // make sure there's no leftover from previous change
197
- this._options = { ...defaultOptions, ...this.gridOptions.compositeEditorOptions, ...options, labels: { ...(_b = this.gridOptions.compositeEditorOptions) === null || _b === void 0 ? void 0 : _b.labels, ...options === null || options === void 0 ? void 0 : options.labels } }; // merge default options with user options
190
+ this._options = { ...defaultOptions, ...this.gridOptions.compositeEditorOptions, ...options, labels: { ...this.gridOptions.compositeEditorOptions?.labels, ...options?.labels } }; // merge default options with user options
198
191
  this._options.backdrop = options.backdrop !== undefined ? options.backdrop : 'static';
199
192
  const viewColumnLayout = this._options.viewColumnLayout || 1;
200
193
  const activeCell = this.grid.getActiveCell();
201
- const activeColIndex = (_c = activeCell === null || activeCell === void 0 ? void 0 : activeCell.cell) !== null && _c !== void 0 ? _c : 0;
202
- const activeRow = (_d = activeCell === null || activeCell === void 0 ? void 0 : activeCell.row) !== null && _d !== void 0 ? _d : 0;
194
+ const activeColIndex = activeCell?.cell ?? 0;
195
+ const activeRow = activeCell?.row ?? 0;
203
196
  const gridUid = this.grid.getUID() || '';
204
197
  let headerTitle = options.headerTitle || '';
205
198
  // execute callback before creating the modal window (that is in short the first event in the lifecycle)
@@ -210,14 +203,14 @@ class SlickCompositeEditorComponent {
210
203
  const selectedRowsIndexes = this.grid.getSelectedRows() || [];
211
204
  if (selectedRowsIndexes.length > 0) {
212
205
  this._options.modalType = 'mass-selection';
213
- if (options === null || options === void 0 ? void 0 : options.headerTitleMassSelection) {
214
- headerTitle = options === null || options === void 0 ? void 0 : options.headerTitleMassSelection;
206
+ if (options?.headerTitleMassSelection) {
207
+ headerTitle = options?.headerTitleMassSelection;
215
208
  }
216
209
  }
217
210
  else {
218
211
  this._options.modalType = 'mass-update';
219
- if (options === null || options === void 0 ? void 0 : options.headerTitleMassUpdate) {
220
- headerTitle = options === null || options === void 0 ? void 0 : options.headerTitleMassUpdate;
212
+ if (options?.headerTitleMassUpdate) {
213
+ headerTitle = options?.headerTitleMassUpdate;
221
214
  }
222
215
  }
223
216
  }
@@ -244,7 +237,7 @@ class SlickCompositeEditorComponent {
244
237
  this._originalDataContext = (0, utils_1.deepCopy)(dataContext);
245
238
  this._columnDefinitions = this.grid.getColumns();
246
239
  const selectedRowsIndexes = this.hasRowSelectionEnabled() ? this.grid.getSelectedRows() : [];
247
- const fullDatasetLength = (_g = (_f = this.dataView) === null || _f === void 0 ? void 0 : _f.getItemCount()) !== null && _g !== void 0 ? _g : 0;
240
+ const fullDatasetLength = this.dataView?.getItemCount() ?? 0;
248
241
  this._lastActiveRowNumber = activeRow;
249
242
  const dataContextIds = this.dataView.getAllSelectedIds();
250
243
  // focus on a first cell with an Editor (unless current cell already has an Editor then do nothing)
@@ -267,17 +260,16 @@ class SlickCompositeEditorComponent {
267
260
  let modalColumns = [];
268
261
  if (isWithMassChange) {
269
262
  // when using Mass Update, we only care about the columns that have the "massUpdate: true", we disregard anything else
270
- modalColumns = this._columnDefinitions.filter(col => { var _a; return col.editor && ((_a = col.internalColumnEditor) === null || _a === void 0 ? void 0 : _a.massUpdate) === true; });
263
+ modalColumns = this._columnDefinitions.filter(col => col.editor && col.internalColumnEditor?.massUpdate === true);
271
264
  }
272
265
  else {
273
266
  modalColumns = this._columnDefinitions.filter(col => col.editor);
274
267
  }
275
268
  // user could optionally show the form inputs in a specific order instead of using default column definitions order
276
- if (modalColumns.some(col => { var _a; return ((_a = col.internalColumnEditor) === null || _a === void 0 ? void 0 : _a.compositeEditorFormOrder) !== undefined; })) {
269
+ if (modalColumns.some(col => col.internalColumnEditor?.compositeEditorFormOrder !== undefined)) {
277
270
  modalColumns.sort((col1, col2) => {
278
- var _a, _b, _c, _d;
279
- const val1 = (_b = (_a = col1 === null || col1 === void 0 ? void 0 : col1.internalColumnEditor) === null || _a === void 0 ? void 0 : _a.compositeEditorFormOrder) !== null && _b !== void 0 ? _b : Infinity;
280
- const val2 = (_d = (_c = col2 === null || col2 === void 0 ? void 0 : col2.internalColumnEditor) === null || _c === void 0 ? void 0 : _c.compositeEditorFormOrder) !== null && _d !== void 0 ? _d : Infinity;
271
+ const val1 = col1?.internalColumnEditor?.compositeEditorFormOrder ?? Infinity;
272
+ const val2 = col2?.internalColumnEditor?.compositeEditorFormOrder ?? Infinity;
281
273
  return (0, common_1.numericSortComparer)(val1, val2, common_1.SortDirectionNumber.asc);
282
274
  });
283
275
  }
@@ -292,11 +284,11 @@ class SlickCompositeEditorComponent {
292
284
  modalContentElm.classList.add(splitClassName);
293
285
  }
294
286
  const modalHeaderTitleElm = (0, common_1.createDomElement)('div', { className: 'slick-editor-modal-title' });
295
- modalHeaderTitleElm.innerHTML = (0, common_1.sanitizeTextByAvailableSanitizer)(this.gridOptions, parsedHeaderTitle);
287
+ this.grid.applyHtmlCode(modalHeaderTitleElm, parsedHeaderTitle);
296
288
  const modalCloseButtonElm = (0, common_1.createDomElement)('button', { type: 'button', ariaLabel: 'Close', textContent: '×', className: 'close', dataset: { action: 'close' } });
297
289
  if (this._options.showCloseButtonOutside) {
298
- (_h = modalHeaderTitleElm === null || modalHeaderTitleElm === void 0 ? void 0 : modalHeaderTitleElm.classList) === null || _h === void 0 ? void 0 : _h.add('outside');
299
- (_j = modalCloseButtonElm === null || modalCloseButtonElm === void 0 ? void 0 : modalCloseButtonElm.classList) === null || _j === void 0 ? void 0 : _j.add('outside');
290
+ modalHeaderTitleElm?.classList?.add('outside');
291
+ modalCloseButtonElm?.classList?.add('outside');
300
292
  }
301
293
  const modalHeaderElm = (0, common_1.createDomElement)('div', { ariaLabel: 'Close', className: 'slick-editor-modal-header' });
302
294
  modalHeaderElm.appendChild(modalHeaderTitleElm);
@@ -361,14 +353,14 @@ class SlickCompositeEditorComponent {
361
353
  itemContainer.classList.add('slick-col-medium-6', `slick-col-xlarge-${12 / layoutColCount}`);
362
354
  }
363
355
  const templateItemLabelElm = (0, common_1.createDomElement)('div', { className: `item-details-label editor-${columnDef.id}` });
364
- templateItemLabelElm.innerHTML = (0, common_1.sanitizeTextByAvailableSanitizer)(this.gridOptions, this.getColumnLabel(columnDef) || 'n/a');
356
+ this.grid.applyHtmlCode(templateItemLabelElm, this.getColumnLabel(columnDef) || 'n/a');
365
357
  const templateItemEditorElm = (0, common_1.createDomElement)('div', {
366
358
  className: 'item-details-editor-container slick-cell',
367
359
  dataset: { editorid: `${columnDef.id}` },
368
360
  });
369
361
  const templateItemValidationElm = (0, common_1.createDomElement)('div', { className: `item-details-validation editor-${columnDef.id}` });
370
362
  // optionally add a reset button beside each editor
371
- if ((_k = this._options) === null || _k === void 0 ? void 0 : _k.showResetButtonOnEachEditor) {
363
+ if (this._options?.showResetButtonOnEachEditor) {
372
364
  const editorResetButtonElm = this.createEditorResetButtonElement(`${columnDef.id}`);
373
365
  this._bindEventService.bind(editorResetButtonElm, 'click', this.handleResetInputValue.bind(this));
374
366
  templateItemLabelElm.appendChild(editorResetButtonElm);
@@ -380,7 +372,7 @@ class SlickCompositeEditorComponent {
380
372
  }
381
373
  }
382
374
  // optionally add a form reset button
383
- if ((_l = this._options) === null || _l === void 0 ? void 0 : _l.showFormResetButton) {
375
+ if (this._options?.showFormResetButton) {
384
376
  const resetButtonContainerElm = this.createFormResetButtonElement();
385
377
  this._bindEventService.bind(resetButtonContainerElm, 'click', this.handleResetFormClicked.bind(this));
386
378
  modalBodyElm.appendChild(resetButtonContainerElm);
@@ -415,24 +407,23 @@ class SlickCompositeEditorComponent {
415
407
  }
416
408
  catch (error) {
417
409
  this.dispose();
418
- const errorMsg = (typeof error === 'string') ? error : ((_p = (_m = error === null || error === void 0 ? void 0 : error.message) !== null && _m !== void 0 ? _m : (_o = error === null || error === void 0 ? void 0 : error.body) === null || _o === void 0 ? void 0 : _o.message) !== null && _p !== void 0 ? _p : '');
419
- const errorCode = (typeof error === 'string') ? error : (_s = (_q = error === null || error === void 0 ? void 0 : error.status) !== null && _q !== void 0 ? _q : (_r = error === null || error === void 0 ? void 0 : error.body) === null || _r === void 0 ? void 0 : _r.status) !== null && _s !== void 0 ? _s : errorMsg;
410
+ const errorMsg = (typeof error === 'string') ? error : (error?.message ?? error?.body?.message ?? '');
411
+ const errorCode = (typeof error === 'string') ? error : error?.status ?? error?.body?.status ?? errorMsg;
420
412
  onError({ type: 'error', code: errorCode, message: errorMsg });
421
413
  return null;
422
414
  }
423
415
  }
424
416
  /** Cancel the Editing which will also close the modal window */
425
417
  async cancelEditing() {
426
- var _a, _b;
427
418
  let confirmed = true;
428
419
  if (this.formValues && Object.keys(this.formValues).length > 0 && typeof this._options.onClose === 'function') {
429
420
  confirmed = await this._options.onClose();
430
421
  }
431
422
  if (confirmed) {
432
- this.grid.getEditController().cancelCurrentEdit();
423
+ this.grid.getEditController()?.cancelCurrentEdit();
433
424
  // cancel current edit is not enough when editing/cloning,
434
425
  // we also need to reset with the original item data context to undo/reset the entire row
435
- if (((_a = this._options) === null || _a === void 0 ? void 0 : _a.modalType) === 'edit' || ((_b = this._options) === null || _b === void 0 ? void 0 : _b.modalType) === 'clone') {
426
+ if (this._options?.modalType === 'edit' || this._options?.modalType === 'clone') {
436
427
  this.resetCurrentRowDataContext();
437
428
  }
438
429
  this.grid.setActiveRow(this._lastActiveRowNumber);
@@ -441,11 +432,10 @@ class SlickCompositeEditorComponent {
441
432
  }
442
433
  /** Show a Validation Summary text (as a <div>) when a validation fails or simply hide it when there's no error */
443
434
  showValidationSummaryText(isShowing, errorMsg = '') {
444
- var _a, _b;
445
435
  if (isShowing && errorMsg !== '') {
446
436
  this._modalBodyTopValidationElm.textContent = errorMsg;
447
437
  this._modalBodyTopValidationElm.style.display = 'block';
448
- (_b = (_a = this._modalBodyTopValidationElm).scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a);
438
+ this._modalBodyTopValidationElm.scrollIntoView?.();
449
439
  this._modalSaveButtonElm.disabled = false;
450
440
  this._modalSaveButtonElm.classList.remove('saving');
451
441
  }
@@ -466,8 +456,7 @@ class SlickCompositeEditorComponent {
466
456
  for (const itemProp in formValues) {
467
457
  if (itemProp in formValues) {
468
458
  data.forEach((dataContext) => {
469
- var _a;
470
- if (itemProp in formValues && (((_a = this._options) === null || _a === void 0 ? void 0 : _a.validateMassUpdateChange) === undefined || this._options.validateMassUpdateChange(itemProp, dataContext, formValues) !== false)) {
459
+ if (itemProp in formValues && (this._options?.validateMassUpdateChange === undefined || this._options.validateMassUpdateChange(itemProp, dataContext, formValues) !== false)) {
471
460
  dataContext[itemProp] = formValues[itemProp];
472
461
  }
473
462
  });
@@ -482,8 +471,7 @@ class SlickCompositeEditorComponent {
482
471
  }
483
472
  /** Apply Mass Changes to the Selected rows in the grid (form values) */
484
473
  applySaveMassSelectionChanges(formValues, selection, applyToDataview = true) {
485
- var _a, _b;
486
- const selectedItemIds = (_a = selection === null || selection === void 0 ? void 0 : selection.dataContextIds) !== null && _a !== void 0 ? _a : [];
474
+ const selectedItemIds = selection?.dataContextIds ?? [];
487
475
  const selectedTmpItems = selectedItemIds.map(itemId => this.dataView.getItemById(itemId));
488
476
  // not applying to dataView means that we're doing a preview of dataset and we should use a deep copy of it instead of applying changes directly to it
489
477
  const selectedItems = applyToDataview ? selectedTmpItems : (0, utils_1.deepCopy)(selectedTmpItems);
@@ -492,8 +480,7 @@ class SlickCompositeEditorComponent {
492
480
  for (const itemProp in formValues) {
493
481
  if (itemProp in formValues) {
494
482
  selectedItems.forEach((dataContext) => {
495
- var _a;
496
- if (itemProp in formValues && (((_a = this._options) === null || _a === void 0 ? void 0 : _a.validateMassUpdateChange) === undefined || this._options.validateMassUpdateChange(itemProp, dataContext, formValues) !== false)) {
483
+ if (itemProp in formValues && (this._options?.validateMassUpdateChange === undefined || this._options.validateMassUpdateChange(itemProp, dataContext, formValues) !== false)) {
497
484
  dataContext[itemProp] = formValues[itemProp];
498
485
  }
499
486
  });
@@ -501,7 +488,7 @@ class SlickCompositeEditorComponent {
501
488
  }
502
489
  // update all items in the grid with the grid service
503
490
  if (applyToDataview) {
504
- (_b = this.gridService) === null || _b === void 0 ? void 0 : _b.updateItems(selectedItems);
491
+ this.gridService?.updateItems(selectedItems);
505
492
  }
506
493
  return selectedItems;
507
494
  }
@@ -526,15 +513,14 @@ class SlickCompositeEditorComponent {
526
513
  * @returns {Object} - html button
527
514
  */
528
515
  createEditorResetButtonElement(columnId) {
529
- var _a, _b, _c, _d, _f;
530
516
  const resetButtonElm = (0, common_1.createDomElement)('button', {
531
517
  type: 'button', name: columnId,
532
518
  ariaLabel: 'Reset',
533
- title: (_c = (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.labels) === null || _b === void 0 ? void 0 : _b.resetFormButton) !== null && _c !== void 0 ? _c : 'Reset Form Input',
519
+ title: this._options?.labels?.resetFormButton ?? 'Reset Form Input',
534
520
  className: 'btn btn-xs btn-editor-reset'
535
521
  });
536
- if ((_d = this._options) === null || _d === void 0 ? void 0 : _d.resetEditorButtonCssClass) {
537
- const resetBtnClasses = (_f = this._options) === null || _f === void 0 ? void 0 : _f.resetEditorButtonCssClass.split(' ');
522
+ if (this._options?.resetEditorButtonCssClass) {
523
+ const resetBtnClasses = this._options?.resetEditorButtonCssClass.split(' ');
538
524
  for (const cssClass of resetBtnClasses) {
539
525
  resetButtonElm.classList.add(cssClass);
540
526
  }
@@ -547,10 +533,9 @@ class SlickCompositeEditorComponent {
547
533
  * @returns {Object} - html button
548
534
  */
549
535
  createFormResetButtonElement() {
550
- var _a, _b;
551
536
  const resetButtonContainerElm = (0, common_1.createDomElement)('div', { className: 'reset-container' });
552
537
  const resetButtonElm = (0, common_1.createDomElement)('button', { type: 'button', className: 'btn btn-sm reset-form' }, resetButtonContainerElm);
553
- (0, common_1.createDomElement)('span', { className: (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.resetFormButtonIconCssClass) !== null && _b !== void 0 ? _b : '' }, resetButtonElm);
538
+ (0, common_1.createDomElement)('span', { className: this._options?.resetFormButtonIconCssClass ?? '' }, resetButtonElm);
554
539
  resetButtonElm.appendChild(document.createTextNode(' Reset Form'));
555
540
  return resetButtonContainerElm;
556
541
  }
@@ -559,8 +544,7 @@ class SlickCompositeEditorComponent {
559
544
  * or use the default onError callback which is to simply display the error in the console
560
545
  */
561
546
  executeOnError(error) {
562
- var _a, _b;
563
- const onError = (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.onError) !== null && _b !== void 0 ? _b : DEFAULT_ON_ERROR;
547
+ const onError = this._options?.onError ?? DEFAULT_ON_ERROR;
564
548
  onError(error);
565
549
  }
566
550
  /**
@@ -572,23 +556,22 @@ class SlickCompositeEditorComponent {
572
556
  * @param {Object} itemDataContext - item data context when modal type is (create/clone/edit)
573
557
  */
574
558
  async executeOnSave(applyChangesCallback, executePostCallback, beforeClosingCallback, itemDataContext) {
575
- var _a, _b, _c, _d, _f, _g;
576
559
  try {
577
560
  this.showValidationSummaryText(false, '');
578
561
  const validationResults = this.validateCompositeEditors();
579
562
  if (validationResults.valid) {
580
563
  this._modalSaveButtonElm.classList.add('saving');
581
564
  this._modalSaveButtonElm.disabled = true;
582
- if (typeof ((_a = this._options) === null || _a === void 0 ? void 0 : _a.onSave) === 'function') {
565
+ if (typeof this._options?.onSave === 'function') {
583
566
  const isMassChange = (this._options.modalType === 'mass-update' || this._options.modalType === 'mass-selection');
584
567
  // apply the changes in the grid early when that option is enabled (that is before the await of `onSave`)
585
568
  let updatedDataset;
586
- if (isMassChange && ((_b = this._options) === null || _b === void 0 ? void 0 : _b.shouldPreviewMassChangeDataset)) {
569
+ if (isMassChange && this._options?.shouldPreviewMassChangeDataset) {
587
570
  updatedDataset = applyChangesCallback(this.formValues, this.getCurrentRowSelections(), false);
588
571
  }
589
572
  // call the custon onSave callback when defined and note that the item data context will only be filled for create/clone/edit
590
573
  const dataContextOrUpdatedDatasetPreview = isMassChange ? updatedDataset : itemDataContext;
591
- const successful = await ((_c = this._options) === null || _c === void 0 ? void 0 : _c.onSave(this.formValues, this.getCurrentRowSelections(), dataContextOrUpdatedDatasetPreview));
574
+ const successful = await this._options?.onSave(this.formValues, this.getCurrentRowSelections(), dataContextOrUpdatedDatasetPreview);
592
575
  if (successful) {
593
576
  // apply the changes in the grid (if it's not yet applied)
594
577
  applyChangesCallback(this.formValues, this.getCurrentRowSelections());
@@ -610,7 +593,7 @@ class SlickCompositeEditorComponent {
610
593
  }
611
594
  }
612
595
  catch (error) {
613
- const errorMsg = (typeof error === 'string') ? error : ((_g = (_d = error === null || error === void 0 ? void 0 : error.message) !== null && _d !== void 0 ? _d : (_f = error === null || error === void 0 ? void 0 : error.body) === null || _f === void 0 ? void 0 : _f.message) !== null && _g !== void 0 ? _g : '');
596
+ const errorMsg = (typeof error === 'string') ? error : (error?.message ?? error?.body?.message ?? '');
614
597
  this.showValidationSummaryText(true, errorMsg);
615
598
  }
616
599
  }
@@ -642,11 +625,10 @@ class SlickCompositeEditorComponent {
642
625
  return !!activeEditorCellNode;
643
626
  }
644
627
  findNextAvailableEditorColumnIndex(columns, dataContext, rowIndex, isWithMassUpdate) {
645
- var _a;
646
628
  let columnIndexWithEditor = -1;
647
629
  for (let colIndex = 0; colIndex < columns.length; colIndex++) {
648
630
  const col = columns[colIndex];
649
- if (col.editor && (!isWithMassUpdate || (isWithMassUpdate && ((_a = col.internalColumnEditor) === null || _a === void 0 ? void 0 : _a.massUpdate)))) {
631
+ if (col.editor && (!isWithMassUpdate || (isWithMassUpdate && col.internalColumnEditor?.massUpdate))) {
650
632
  // we can check that the cell is really editable by checking the onBeforeEditCell event not returning false (returning undefined, null also mean it is editable)
651
633
  const isCellEditable = this.grid.onBeforeEditCell.notify({ row: rowIndex, cell: colIndex, item: dataContext, column: col, grid: this.grid, target: 'composite', compositeEditorOptions: this._compositeOptions }).getReturnValue();
652
634
  this.grid.setActiveCell(rowIndex, colIndex, false);
@@ -682,7 +664,6 @@ class SlickCompositeEditorComponent {
682
664
  * @returns {string} label - column label
683
665
  */
684
666
  getColumnLabel(columnDef) {
685
- var _a;
686
667
  const columnGroupSeparator = this.gridOptions.columnGroupSeparator || ' - ';
687
668
  let columnName = columnDef.nameCompositeEditor || columnDef.name || '';
688
669
  let columnGroup = columnDef.columnGroup || '';
@@ -691,22 +672,21 @@ class SlickCompositeEditorComponent {
691
672
  if (translationKey) {
692
673
  columnName = this.translaterService.translate(translationKey);
693
674
  }
694
- if (columnDef.columnGroupKey && ((_a = this.translaterService) === null || _a === void 0 ? void 0 : _a.translate)) {
675
+ if (columnDef.columnGroupKey && this.translaterService?.translate) {
695
676
  columnGroup = this.translaterService.translate(columnDef.columnGroupKey);
696
677
  }
697
678
  }
698
679
  const columnLabel = columnGroup ? `${columnGroup}${columnGroupSeparator}${columnName}` : columnName;
699
- return columnLabel || '';
680
+ return columnLabel instanceof HTMLElement ? columnLabel.innerHTML : columnLabel || '';
700
681
  }
701
682
  /** Get the correct label text depending, if we use a Translater Service then translate the text when possible else use default text */
702
683
  getLabelText(labelProperty, localeText, defaultText) {
703
- var _a, _b, _c, _d, _f, _g, _h;
704
- const textLabels = { ...(_a = this.gridOptions.compositeEditorOptions) === null || _a === void 0 ? void 0 : _a.labels, ...(_b = this._options) === null || _b === void 0 ? void 0 : _b.labels };
705
- if (((_c = this.gridOptions) === null || _c === void 0 ? void 0 : _c.enableTranslate) && ((_d = this.translaterService) === null || _d === void 0 ? void 0 : _d.translate) && textLabels.hasOwnProperty(`${labelProperty}Key`)) {
684
+ const textLabels = { ...this.gridOptions.compositeEditorOptions?.labels, ...this._options?.labels };
685
+ if (this.gridOptions?.enableTranslate && this.translaterService?.translate && textLabels.hasOwnProperty(`${labelProperty}Key`)) {
706
686
  const translationKey = textLabels[`${labelProperty}Key`];
707
687
  return this.translaterService.translate(translationKey || '');
708
688
  }
709
- return (_h = (_f = textLabels === null || textLabels === void 0 ? void 0 : textLabels[labelProperty]) !== null && _f !== void 0 ? _f : (_g = this._locales) === null || _g === void 0 ? void 0 : _g[localeText]) !== null && _h !== void 0 ? _h : defaultText;
689
+ return textLabels?.[labelProperty] ?? this._locales?.[localeText] ?? defaultText;
710
690
  }
711
691
  /** Retrieve the current selection of row indexes & data context Ids */
712
692
  getCurrentRowSelections() {
@@ -715,9 +695,8 @@ class SlickCompositeEditorComponent {
715
695
  return { gridRowIndexes, dataContextIds };
716
696
  }
717
697
  handleBodyClicked(event) {
718
- var _a, _b, _c;
719
- if ((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('slick-editor-modal')) {
720
- if (((_c = this._options) === null || _c === void 0 ? void 0 : _c.backdrop) !== 'static') {
698
+ if (event.target?.classList?.contains('slick-editor-modal')) {
699
+ if (this._options?.backdrop !== 'static') {
721
700
  this.dispose();
722
701
  }
723
702
  }
@@ -733,13 +712,12 @@ class SlickCompositeEditorComponent {
733
712
  }
734
713
  }
735
714
  handleResetInputValue(event) {
736
- var _a, _b;
737
715
  const columnId = event.target.name;
738
- const editor = (_a = this._editors) === null || _a === void 0 ? void 0 : _a[columnId];
739
- if (editor === null || editor === void 0 ? void 0 : editor.reset) {
716
+ const editor = this._editors?.[columnId];
717
+ if (editor?.reset) {
740
718
  editor.reset();
741
719
  }
742
- (_b = this._formValues) === null || _b === void 0 ? true : delete _b[columnId];
720
+ delete this._formValues?.[columnId];
743
721
  }
744
722
  /** Callback which processes a Mass Update or Mass Selection Changes */
745
723
  async handleMassSaving(modalType, executePostCallback) {
@@ -753,15 +731,14 @@ class SlickCompositeEditorComponent {
753
731
  }
754
732
  /** Anytime an input of the Composite Editor form changes, we'll add/remove a "modified" CSS className for styling purposes */
755
733
  handleOnCompositeEditorChange(_e, args) {
756
- var _a, _b, _c, _d, _f, _g, _h, _j;
757
- const columnId = (_b = (_a = args.column) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '';
734
+ const columnId = args.column?.id ?? '';
758
735
  this._formValues = { ...this._formValues, ...args.formValues };
759
- const editor = (_c = this._editors) === null || _c === void 0 ? void 0 : _c[columnId];
760
- const isEditorValueTouched = (_h = (_f = (_d = editor === null || editor === void 0 ? void 0 : editor.isValueTouched) === null || _d === void 0 ? void 0 : _d.call(editor)) !== null && _f !== void 0 ? _f : (_g = editor === null || editor === void 0 ? void 0 : editor.isValueChanged) === null || _g === void 0 ? void 0 : _g.call(editor)) !== null && _h !== void 0 ? _h : false;
761
- this._itemDataContext = (_j = editor === null || editor === void 0 ? void 0 : editor.dataContext) !== null && _j !== void 0 ? _j : {}; // keep reference of the item data context
736
+ const editor = this._editors?.[columnId];
737
+ const isEditorValueTouched = editor?.isValueTouched?.() ?? editor?.isValueChanged?.() ?? false;
738
+ this._itemDataContext = editor?.dataContext ?? {}; // keep reference of the item data context
762
739
  // add extra css styling to the composite editor input(s) that got modified
763
740
  const editorElm = this._modalElm.querySelector(`[data-editorid=${columnId}]`);
764
- if (editorElm === null || editorElm === void 0 ? void 0 : editorElm.classList) {
741
+ if (editorElm?.classList) {
765
742
  if (isEditorValueTouched) {
766
743
  editorElm.classList.add('modified');
767
744
  }
@@ -776,13 +753,13 @@ class SlickCompositeEditorComponent {
776
753
  hasRowSelectionEnabled() {
777
754
  const selectionModel = this.grid.getSelectionModel();
778
755
  const isRowSelectionEnabled = this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector;
779
- return (isRowSelectionEnabled && selectionModel);
756
+ return !!(isRowSelectionEnabled && selectionModel);
780
757
  }
781
758
  /** Reset Form button handler */
782
759
  handleResetFormClicked() {
783
760
  for (const columnId of Object.keys(this._editors)) {
784
761
  const editor = this._editors[columnId];
785
- if (editor === null || editor === void 0 ? void 0 : editor.reset) {
762
+ if (editor?.reset) {
786
763
  editor.reset();
787
764
  }
788
765
  }
@@ -790,12 +767,11 @@ class SlickCompositeEditorComponent {
790
767
  }
791
768
  /** switch case handler to determine which code to execute depending on the modal type */
792
769
  handleSaveClicked() {
793
- var _a, _b, _c;
794
- const modalType = (_a = this._options) === null || _a === void 0 ? void 0 : _a.modalType;
770
+ const modalType = this._options?.modalType;
795
771
  switch (modalType) {
796
772
  case 'mass-update':
797
773
  this.handleMassSaving(modalType, () => {
798
- this.grid.getEditController().cancelCurrentEdit();
774
+ this.grid.getEditController()?.cancelCurrentEdit();
799
775
  this.grid.setActiveCell(0, 0, false);
800
776
  if (this._options.shouldClearRowSelectionAfterMassAction) {
801
777
  this.grid.setSelectedRows([]);
@@ -804,7 +780,7 @@ class SlickCompositeEditorComponent {
804
780
  break;
805
781
  case 'mass-selection':
806
782
  this.handleMassSaving(modalType, () => {
807
- this.grid.getEditController().cancelCurrentEdit();
783
+ this.grid.getEditController()?.cancelCurrentEdit();
808
784
  this.grid.setActiveRow(this._lastActiveRowNumber);
809
785
  if (this._options.shouldClearRowSelectionAfterMassAction) {
810
786
  this.grid.setSelectedRows([]);
@@ -816,7 +792,7 @@ class SlickCompositeEditorComponent {
816
792
  const clonedItemDataContext = { ...this._originalDataContext, ...this.formValues };
817
793
  // post save callback (before closing modal)
818
794
  const postSaveCloneCallback = () => {
819
- this.grid.getEditController().cancelCurrentEdit();
795
+ this.grid.getEditController()?.cancelCurrentEdit();
820
796
  this.grid.setActiveCell(0, 0, false);
821
797
  };
822
798
  // call the onSave execution and provide the item data context so that it's available to the user
@@ -828,23 +804,22 @@ class SlickCompositeEditorComponent {
828
804
  // commit the changes into the grid
829
805
  // if it's a "create" then it will triggered the "onAddNewRow" event which will in term push it to the grid
830
806
  // while an "edit" will simply applies the changes directly on the same row
831
- this.grid.getEditController().commitCurrentEdit();
807
+ this.grid.getEditController()?.commitCurrentEdit();
832
808
  // if the user provided the "onSave" callback, let's execute it with the item data context
833
- if (typeof ((_b = this._options) === null || _b === void 0 ? void 0 : _b.onSave) === 'function') {
809
+ if (typeof this._options?.onSave === 'function') {
834
810
  const itemDataContext = this.grid.getDataItem(this._lastActiveRowNumber); // we can get item data context directly from DataView
835
- (_c = this._options) === null || _c === void 0 ? void 0 : _c.onSave(this.formValues, this.getCurrentRowSelections(), itemDataContext);
811
+ this._options?.onSave(this.formValues, this.getCurrentRowSelections(), itemDataContext);
836
812
  }
837
813
  break;
838
814
  }
839
815
  }
840
816
  /** Insert an item into the DataView or throw an error when finding duplicate id in the dataset */
841
817
  insertNewItemInDataView(item) {
842
- var _a, _b, _c, _d;
843
- const fullDatasetLength = (_b = (_a = this.dataView) === null || _a === void 0 ? void 0 : _a.getItemCount()) !== null && _b !== void 0 ? _b : 0;
844
- const newId = (_c = this._options.insertNewId) !== null && _c !== void 0 ? _c : fullDatasetLength + 1;
818
+ const fullDatasetLength = this.dataView?.getItemCount() ?? 0;
819
+ const newId = this._options.insertNewId ?? fullDatasetLength + 1;
845
820
  item[this.gridOptions.datasetIdPropertyName || 'id'] = newId;
846
821
  if (!this.dataView.getItemById(newId)) {
847
- (_d = this.gridService) === null || _d === void 0 ? void 0 : _d.addItem(item, this._options.insertOptions);
822
+ this.gridService?.addItem(item, this._options.insertOptions);
848
823
  }
849
824
  else {
850
825
  this.executeOnError({ type: 'error', code: 'ITEM_ALREADY_EXIST', message: `The item object which you are trying to add already exist with the same Id:: ${newId}` });
@@ -873,7 +848,7 @@ class SlickCompositeEditorComponent {
873
848
  /** Validate the current cell editor */
874
849
  validateCurrentEditor() {
875
850
  const currentEditor = this.grid.getCellEditor();
876
- if (currentEditor === null || currentEditor === void 0 ? void 0 : currentEditor.validate) {
851
+ if (currentEditor?.validate) {
877
852
  currentEditor.validate();
878
853
  }
879
854
  }