@sankhyalabs/ezui 4.1.0 → 4.2.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.
- package/dist/cjs/{constants-5a75e2f3.js → constants-5d588e38.js} +2 -0
- package/dist/cjs/ez-check.cjs.entry.js +12 -1
- package/dist/cjs/ez-combo-box.cjs.entry.js +1 -1
- package/dist/cjs/ez-form-view.cjs.entry.js +1 -1
- package/dist/cjs/ez-form.cjs.entry.js +64 -36
- package/dist/cjs/ez-grid.cjs.entry.js +243 -111
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ez-check/ez-check.js +14 -1
- package/dist/collection/components/ez-grid/controller/DataUnitBridge.js +16 -1
- package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js +72 -15
- package/dist/collection/components/ez-grid/controller/ag-grid/DataSource.js +9 -1
- package/dist/collection/components/ez-grid/ez-grid.js +163 -94
- package/dist/collection/components/ez-grid/subcomponents/selection-counter.js +2 -2
- package/dist/collection/utils/constants.js +1 -0
- package/dist/collection/utils/form/DataBinder.js +47 -30
- package/dist/collection/utils/form/FormMetadata.js +17 -6
- package/dist/custom-elements/index.js +321 -150
- package/dist/esm/constants-76d2e931.js +4 -0
- package/dist/esm/ez-check.entry.js +12 -1
- package/dist/esm/ez-combo-box.entry.js +1 -1
- package/dist/esm/ez-form-view.entry.js +1 -1
- package/dist/esm/ez-form.entry.js +64 -36
- package/dist/esm/ez-grid.entry.js +243 -111
- package/dist/esm/ezui.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-1f841f3c.entry.js +1 -0
- package/dist/ezui/{p-468799e1.entry.js → p-8105c967.entry.js} +2 -2
- package/dist/ezui/{p-50883460.entry.js → p-878646a0.entry.js} +1 -1
- package/dist/ezui/p-a3ce3710.entry.js +1 -0
- package/dist/ezui/p-b01e3085.js +1 -0
- package/dist/ezui/{p-e748b5d3.entry.js → p-b7ea9791.entry.js} +1 -1
- package/dist/types/components/ez-check/ez-check.d.ts +1 -0
- package/dist/types/components/ez-grid/controller/EzGridController.d.ts +10 -2
- package/dist/types/components/ez-grid/controller/ag-grid/AgGridController.d.ts +5 -2
- package/dist/types/components/ez-grid/ez-grid.d.ts +20 -15
- package/dist/types/components/ez-grid/subcomponents/selection-counter.d.ts +2 -1
- package/dist/types/utils/constants.d.ts +1 -0
- package/dist/types/utils/form/DataBinder.d.ts +3 -2
- package/package.json +1 -1
- package/dist/esm/constants-ca136201.js +0 -3
- package/dist/ezui/p-08f4a048.entry.js +0 -1
- package/dist/ezui/p-3f4ae3a3.js +0 -1
- package/dist/ezui/p-a323b415.entry.js +0 -1
|
@@ -24,6 +24,16 @@ const EzCheck = class {
|
|
|
24
24
|
if (newValue != oldValue) {
|
|
25
25
|
this._inputElem.checked = newValue;
|
|
26
26
|
}
|
|
27
|
+
if (this._inputElem.indeterminate != this.indeterminate) {
|
|
28
|
+
this._inputElem.indeterminate = this.indeterminate;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
observeIndeterminate(newValue, oldValue) {
|
|
32
|
+
if (!this._inputElem)
|
|
33
|
+
return;
|
|
34
|
+
if (newValue != oldValue) {
|
|
35
|
+
this._inputElem.indeterminate = newValue;
|
|
36
|
+
}
|
|
27
37
|
}
|
|
28
38
|
//---------------------------------------------
|
|
29
39
|
// Public methods
|
|
@@ -68,7 +78,8 @@ const EzCheck = class {
|
|
|
68
78
|
}
|
|
69
79
|
get _element() { return index.getElement(this); }
|
|
70
80
|
static get watchers() { return {
|
|
71
|
-
"value": ["observeValue"]
|
|
81
|
+
"value": ["observeValue"],
|
|
82
|
+
"indeterminate": ["observeIndeterminate"]
|
|
72
83
|
}; }
|
|
73
84
|
};
|
|
74
85
|
EzCheck.style = ezCheckCss;
|
|
@@ -8,7 +8,7 @@ const ApplicationUtils = require('./ApplicationUtils-1eef635f.js');
|
|
|
8
8
|
const CSSVarsUtils = require('./CSSVarsUtils-af809e73.js');
|
|
9
9
|
require('./DialogType-2114c337.js');
|
|
10
10
|
require('./CheckMode-ecb90b87.js');
|
|
11
|
-
const constants = require('./constants-
|
|
11
|
+
const constants = require('./constants-5d588e38.js');
|
|
12
12
|
|
|
13
13
|
const ezComboBoxCss = ":host{--ez-combo-box--height:42px;--ez-combo-box--width:100%;--ez-combo-box__icon--width:48px;--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--border-radius-small:var(--border--radius-small, 6px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box--line-height:calc(var(--text--medium, 14px) + 4px);--ez-combo-box__input--background-color:var(--background--medium, #e0e0e0);--ez-combo-box__input--border:var(--border--medium, 2px solid);--ez-combo-box__input--border-color:var(--ez-combo-box__input--background-color);--ez-combo-box__input--focus--border-color:var(--color--primary, #008561);--ez-combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__input--error--border-color:#CC2936;--ez-combo-box__btn--color:var(--title--primary, #2B3A54);--ez-combo-box__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-hover--color:var(--color--primary, #4e4e4e);--ez-combo-box__label--color:var(--title--primary, #2B3A54);--ez-combo-box__list-title--primary:var(--title--primary, #2B3A54);--ez-combo-box__list-text--primary:var(--text--primary, #626e82);--ez-combo-box__list-height:calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium) + 4px);--ez-combo-box--space--medium:var(--space--medium, 12px);--ez-combo-box--space--small:var(--space--small, 6px);--ez-combo-box__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-combo-box__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-combo-box__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-combo-box__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-combo-box__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-combo-box__scrollbar--width:var(--space--medium, 12px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-combo-box--width)}ez-icon{--ez-icon--color:inherit;font-weight:var(--text-weight--large, 600)}.suppressed-search-input{--ez-text-input__input--border-color:var(--color--strokes, #dce0e8);--ez-text-input__input--disabled--background-color:var(--background--xlight, #fff);--ez-text-input__input--disabled--color:var(--title--primary, #2B3A54)}.list-container{position:relative;width:100%}.list-wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;z-index:var(--more-visible, 2);max-height:calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small) + 9px);background-color:var(--ez-combo-box--background-color--xlight);border-radius:var(--ez-combo-box--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);padding:var(--ez-combo-box--space--small)}.list-options{box-sizing:border-box;width:100%;height:100%;display:flex;flex-direction:column;scroll-behavior:smooth;overflow:auto;scrollbar-width:thin;gap:3px;scrollbar-color:var(--ez-combo-box__scrollbar--color-clicked) var(--ez-combo-box__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--ez-combo-box__scrollbar--color-background);width:var(--ez-combo-box__scrollbar--width);max-width:var(--ez-combo-box__scrollbar--width);min-width:var(--ez-combo-box__scrollbar--width)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-combo-box__scrollbar--color-background);border-radius:var(--ez-combo-box__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-combo-box__scrollbar--color-default);border-radius:var(--ez-combo-box__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-combo-box__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-combo-box__scrollbar--color-clicked)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-combo-box--border-radius-small);padding:var(--ez-combo-box--space--small);min-height:var(--ez-combo-box__list-height);gap:var(--space--small, 6px)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size);line-height:var(--ez-combo-box--line-height)}.item__label{font-weight:var(--ez-combo-box--font-weight--medium)}.item__label--bold{font-weight:var(--ez-combo-box--font-weight--large)}.item__value{text-align:center;color:var(--ez-combo-box__list-text--primary);font-weight:var(--ez-combo-box--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;min-height:var(--ez-combo-box__list-height)}.message__no-result{color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size)}.message__loading{border-radius:50%;width:14px;height:14px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:3px solid var(--ez-combo-box__list-title--primary);border-top:3px solid transparent}li:hover{background-color:var(--ez-combo-box--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-combo-box__btn--color)}.btn:disabled{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:disabled:hover{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:hover{color:var(--ez-combo-box__btn-hover--color)}.btn__close{visibility:hidden}ez-text-input:hover .btn__close,ez-text-input:focus .btn__close{visibility:visible}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
|
|
14
14
|
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-892780f1.js');
|
|
6
6
|
const core = require('@sankhyalabs/core');
|
|
7
|
-
const constants = require('./constants-
|
|
7
|
+
const constants = require('./constants-5d588e38.js');
|
|
8
8
|
const CheckMode = require('./CheckMode-ecb90b87.js');
|
|
9
9
|
|
|
10
10
|
const buildSwitch = (field) => {
|
|
@@ -119,12 +119,23 @@ const buildFormMetadata = (config, dataUnit, includeDetails = false) => {
|
|
|
119
119
|
}
|
|
120
120
|
let defaultValue = field.defaultValue == undefined ? (_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.defaultValue : field.defaultValue;
|
|
121
121
|
if (defaultValue) {
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
122
|
+
const { type, value } = defaultValue;
|
|
123
|
+
if (type) {
|
|
124
|
+
if (type === "V") {
|
|
125
|
+
defaultValue = value;
|
|
126
|
+
}
|
|
127
|
+
else {
|
|
128
|
+
try {
|
|
129
|
+
const parsed = JSON.parse(value);
|
|
130
|
+
if (parsed && "value" in parsed) {
|
|
131
|
+
defaultValue = parsed;
|
|
132
|
+
}
|
|
133
|
+
else {
|
|
134
|
+
defaultValue = value;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
catch (_d) { }
|
|
138
|
+
}
|
|
128
139
|
}
|
|
129
140
|
defaultValues[field.name] = defaultValue;
|
|
130
141
|
}
|
|
@@ -193,9 +204,8 @@ const buildDetailSheet = (child) => {
|
|
|
193
204
|
|
|
194
205
|
class DataBinder {
|
|
195
206
|
constructor(dataUnit) {
|
|
196
|
-
this._invalidFields = new Map();
|
|
197
207
|
this.onDataUnitEvent = (action) => {
|
|
198
|
-
var _a;
|
|
208
|
+
var _a, _b;
|
|
199
209
|
switch (action.type) {
|
|
200
210
|
case core.Action.DATA_LOADED:
|
|
201
211
|
case core.Action.DATA_SAVED:
|
|
@@ -204,6 +214,7 @@ class DataBinder {
|
|
|
204
214
|
case core.Action.RECORDS_COPIED:
|
|
205
215
|
case core.Action.EDITION_CANCELED:
|
|
206
216
|
case core.Action.SELECTION_CHANGED:
|
|
217
|
+
case core.Action.SELECTION_REMOVED:
|
|
207
218
|
case core.Action.NEXT_SELECTED:
|
|
208
219
|
case core.Action.PREVIOUS_SELECTED:
|
|
209
220
|
this.clearInvalid();
|
|
@@ -215,13 +226,30 @@ class DataBinder {
|
|
|
215
226
|
this.updateValue(field.fieldName, field.field);
|
|
216
227
|
});
|
|
217
228
|
break;
|
|
229
|
+
case core.Action.FIELD_INVALIDATED:
|
|
230
|
+
(_b = this._fields) === null || _b === void 0 ? void 0 : _b.forEach(field => {
|
|
231
|
+
this.updateErrorMessage(field.fieldName, field.field);
|
|
232
|
+
});
|
|
233
|
+
break;
|
|
218
234
|
}
|
|
219
235
|
};
|
|
220
236
|
this._fields = new Map();
|
|
221
237
|
this._dataUnit = dataUnit;
|
|
238
|
+
this.applyDefaultValues();
|
|
222
239
|
this._dataUnit.subscribe(this.onDataUnitEvent);
|
|
223
240
|
this._dataUnit.addInterceptor(this);
|
|
224
241
|
}
|
|
242
|
+
applyDefaultValues() {
|
|
243
|
+
const recordIds = (this._dataUnit.getAddedRecords() || []).map(r => r.__record__id__);
|
|
244
|
+
if (recordIds.length > 0) {
|
|
245
|
+
const defaultValues = this.getDefaultValues();
|
|
246
|
+
if (defaultValues) {
|
|
247
|
+
Object.keys(defaultValues).forEach(field => {
|
|
248
|
+
this._dataUnit.setFieldValue(field, defaultValues[field], recordIds);
|
|
249
|
+
});
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
}
|
|
225
253
|
bind(fields, currentContextName, formMetadata, recordsValidator) {
|
|
226
254
|
fields.forEach(fieldElement => {
|
|
227
255
|
const { fieldName, contextName } = fieldElement.dataset;
|
|
@@ -236,17 +264,19 @@ class DataBinder {
|
|
|
236
264
|
this._dataUnit.unsubscribe(this.onDataUnitEvent);
|
|
237
265
|
this._dataUnit.removeInterceptor(this);
|
|
238
266
|
}
|
|
267
|
+
getCurrentRecordId() {
|
|
268
|
+
const record = this._dataUnit.getSelectedRecord();
|
|
269
|
+
return record === null || record === void 0 ? void 0 : record.__record__id__;
|
|
270
|
+
}
|
|
239
271
|
markInvalid(field) {
|
|
240
|
-
this.
|
|
272
|
+
this._dataUnit.setInvalidField(field.name, field.message, this.getCurrentRecordId());
|
|
241
273
|
if (this._fields.has(field.name)) {
|
|
242
274
|
const fieldElement = this._fields.get(field.name).field;
|
|
243
|
-
|
|
244
|
-
this.updateErrorMessage(field.name, fieldElement);
|
|
245
|
-
}
|
|
275
|
+
this.updateErrorMessage(field.name, fieldElement, field.message);
|
|
246
276
|
}
|
|
247
277
|
}
|
|
248
|
-
clearInvalid() {
|
|
249
|
-
this.
|
|
278
|
+
clearInvalid(recordId) {
|
|
279
|
+
this._dataUnit.clearInvalid(recordId);
|
|
250
280
|
this._fields.forEach(fieldBinder => {
|
|
251
281
|
const fieldElement = fieldBinder.field;
|
|
252
282
|
fieldElement["errorMessage"] = "";
|
|
@@ -328,16 +358,18 @@ class DataBinder {
|
|
|
328
358
|
}
|
|
329
359
|
});
|
|
330
360
|
}
|
|
331
|
-
updateErrorMessage(fieldName, field) {
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
361
|
+
updateErrorMessage(fieldName, field, message) {
|
|
362
|
+
if (message == undefined) {
|
|
363
|
+
message = this._dataUnit.getInvalidMessage(this.getCurrentRecordId(), fieldName);
|
|
364
|
+
}
|
|
365
|
+
if (!field["errorMessage"]) {
|
|
366
|
+
field["errorMessage"] = message;
|
|
335
367
|
}
|
|
336
368
|
}
|
|
337
369
|
getErrorMessage(fieldName) {
|
|
338
370
|
if (this._fields.has(fieldName)) {
|
|
339
371
|
const fieldElement = this._fields.get(fieldName).field;
|
|
340
|
-
return fieldElement["errorMessage"]
|
|
372
|
+
return fieldElement["errorMessage"];
|
|
341
373
|
}
|
|
342
374
|
return undefined;
|
|
343
375
|
}
|
|
@@ -388,7 +420,7 @@ class DataBinder {
|
|
|
388
420
|
if (this._dataUnit.records.length === 0) {
|
|
389
421
|
this._dataUnit.addRecord();
|
|
390
422
|
}
|
|
391
|
-
this.
|
|
423
|
+
this._dataUnit.clearInvalid(this.getCurrentRecordId(), fieldName);
|
|
392
424
|
this._dataUnit.setFieldValue(fieldName, newValue);
|
|
393
425
|
if (this._dataUnit.waitingForChange(fieldName)) {
|
|
394
426
|
const bind = this._fields.get(fieldName);
|
|
@@ -421,7 +453,6 @@ class DataBinder {
|
|
|
421
453
|
}
|
|
422
454
|
}
|
|
423
455
|
interceptAction(action) {
|
|
424
|
-
var _a;
|
|
425
456
|
if (action.type === core.Action.RECORDS_COPIED) {
|
|
426
457
|
const cleanFields = this._formMetadata.getCleanOnCopyFields();
|
|
427
458
|
if (cleanFields) {
|
|
@@ -441,30 +472,27 @@ class DataBinder {
|
|
|
441
472
|
});
|
|
442
473
|
}
|
|
443
474
|
if (action.type === core.Action.RECORDS_ADDED) {
|
|
444
|
-
const defaultValues =
|
|
475
|
+
const defaultValues = this.getDefaultValues();
|
|
445
476
|
if (defaultValues) {
|
|
446
477
|
const records = action.payload;
|
|
447
478
|
return new core.DataUnitAction(core.Action.RECORDS_ADDED, records.map(record => {
|
|
448
|
-
|
|
449
|
-
for (const field in defaultValues) {
|
|
450
|
-
const defaultValue = this.getFormattedValue(defaultValues[field]);
|
|
451
|
-
const recordValue = typeof defaultValue === "function" ? defaultValue() : defaultValue;
|
|
452
|
-
newRecord[field] = this._dataUnit.valueFromString(field, recordValue);
|
|
453
|
-
}
|
|
454
|
-
return newRecord;
|
|
479
|
+
return Object.assign(Object.assign({}, record), defaultValues);
|
|
455
480
|
}));
|
|
456
481
|
}
|
|
457
482
|
}
|
|
458
483
|
return action;
|
|
459
484
|
}
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
485
|
+
getDefaultValues() {
|
|
486
|
+
var _a;
|
|
487
|
+
const rawDefaultValues = (_a = this._formMetadata) === null || _a === void 0 ? void 0 : _a.getDefaultValues();
|
|
488
|
+
if (rawDefaultValues) {
|
|
489
|
+
const defaultValues = {};
|
|
490
|
+
for (const field in rawDefaultValues) {
|
|
491
|
+
defaultValues[field] = this._dataUnit.valueFromString(field, rawDefaultValues[field]);
|
|
492
|
+
}
|
|
493
|
+
return defaultValues;
|
|
466
494
|
}
|
|
467
|
-
return
|
|
495
|
+
return undefined;
|
|
468
496
|
}
|
|
469
497
|
}
|
|
470
498
|
class Bind {
|