@acorex/components 16.0.22 → 16.0.23

Sign up to get free protection for your applications and to get access to all the features.
Files changed (9) hide show
  1. package/esm2022/lib/data-filter/filter-panel/filter-panel.component.mjs +1 -1
  2. package/esm2022/lib/property-editor/editors/conditional-color-editor/conditional-color.editor.mjs +1 -1
  3. package/esm2022/lib/property-editor/editors/range-editor/range.editor.mjs +1 -1
  4. package/esm2022/lib/query-builder/query-builder-popup/query-builder-popup.component.mjs +1 -1
  5. package/esm2022/lib/validation/validation-rule.widget.mjs +27 -39
  6. package/fesm2022/acorex-components.mjs +29 -41
  7. package/fesm2022/acorex-components.mjs.map +1 -1
  8. package/lib/validation/validation-rule.widget.d.ts +3 -2
  9. package/package.json +1 -1
package/fesm2022/acorex-components.mjs CHANGED
@@ -36,12 +36,12 @@ class AXValidationRules {
36
36
  else {
37
37
  AXValidationRules.registredRules.push({
38
38
  name,
39
- rule,
39
+ rule
40
40
  });
41
41
  }
42
42
  }
43
43
  static get(name) {
44
- return this.registredRules.find((c) => c.name === name);
44
+ return this.registredRules.find(c => c.name === name);
45
45
  }
46
46
  }
47
47
  class AXValidationRuleComponent {
@@ -50,10 +50,11 @@ class AXValidationRuleComponent {
50
50
  message;
51
51
  value;
52
52
  enabled = true;
53
+ operation = 'eq';
53
54
  constructor(ref) {
54
55
  this.ref = ref;
55
56
  if (ref)
56
- ref.nativeElement['__axContext__'] = this;
57
+ ref.nativeElement["__axContext__"] = this;
57
58
  }
58
59
  validate(value) {
59
60
  if (this.enabled === false) {
@@ -68,31 +69,15 @@ class AXValidationRuleComponent {
68
69
  }
69
70
  }
70
71
  internalValidate(type, value, message, ruleValue) {
71
- return new Promise((resolve) => {
72
+ return new Promise(resolve => {
73
+ let result;
72
74
  switch (type) {
73
75
  case 'required':
74
- if (typeof value === 'string') {
75
- resolve({
76
- message: message || AXTranslator.get('validation.messages.required'),
77
- result: value.trim() != '',
78
- });
79
- }
80
- else {
81
- resolve({
82
- message: message || AXTranslator.get('validation.messages.required'),
83
- result: value != null &&
84
- value != '' &&
85
- (!Array.isArray(value) ||
86
- (Array.isArray(value) && value.length > 0)),
87
- });
88
- }
76
+ result = value != null && value != '' && (!Array.isArray(value) || (Array.isArray(value) && value.length > 0));
89
77
  break;
90
78
  case 'regex':
91
79
  const ex = new RegExp(ruleValue);
92
- resolve({
93
- message: message || AXTranslator.get('validation.messages.regex'),
94
- result: ex.test(value),
95
- });
80
+ result = ex.test(value);
96
81
  break;
97
82
  case 'custom':
98
83
  case 'callback':
@@ -101,39 +86,40 @@ class AXValidationRuleComponent {
101
86
  res.message = message;
102
87
  const val = ruleValue({ value, message });
103
88
  if (val instanceof Promise) {
104
- val
105
- .then((c) => {
106
- res.result = c;
107
- })
108
- .catch((c) => {
109
- res.result = false;
110
- })
111
- .finally(() => {
89
+ val.then(c => {
90
+ res.result = this.operation === 'not' ? !c : c;
91
+ }).catch(c => {
92
+ res.result = this.operation === 'not' ? !false : false;
93
+ }).finally(() => {
112
94
  resolve(res);
113
95
  });
96
+ return;
114
97
  }
115
98
  else {
116
- res.result = val;
117
- resolve(res);
99
+ result = val;
118
100
  }
119
101
  }
120
102
  else {
121
- resolve({ result: true });
103
+ result = true;
122
104
  }
123
105
  break;
124
106
  default:
125
- resolve({ result: true });
107
+ result = true;
126
108
  }
109
+ resolve({
110
+ message: message || AXTranslator.get(`validation.messages.${type}`),
111
+ result: this.operation === 'not' ? !result : result
112
+ });
127
113
  });
128
114
  }
129
115
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXValidationRuleComponent, deps: [{ token: ElementRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
130
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: { type: "type", message: "message", value: "value", enabled: "enabled" }, ngImport: i0, template: '', isInline: true });
116
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: { type: "type", message: "message", value: "value", enabled: "enabled", operation: "operation" }, ngImport: i0, template: '', isInline: true });
131
117
  }
132
118
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXValidationRuleComponent, decorators: [{
133
119
  type: Component,
134
120
  args: [{
135
121
  selector: 'ax-validation-rule',
136
- template: '',
122
+ template: ''
137
123
  }]
138
124
  }], ctorParameters: function () { return [{ type: i0.ElementRef, decorators: [{
139
125
  type: Inject,
@@ -148,6 +134,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
148
134
  type: Input
149
135
  }], enabled: [{
150
136
  type: Input
137
+ }], operation: [{
138
+ type: Input
151
139
  }] } });
152
140
 
153
141
  class AXValidation {
@@ -5948,7 +5936,7 @@ class AXFilterPanelComponent {
5948
5936
  }, 50);
5949
5937
  }
5950
5938
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXFilterPanelComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXToastService }], target: i0.ɵɵFactoryTarget.Component });
5951
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AXFilterPanelComponent, selector: "ax-filter-panel", inputs: { groups: "groups", predefinedFilters: "predefinedFilters", mode: "mode" }, outputs: { filterChange: "filterChange" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, static: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "savedList", first: true, predicate: ["savedList"], descendants: true, static: true }, { propertyName: "body", first: true, predicate: ["body"], descendants: true, static: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }, { propertyName: "tbxName", first: true, predicate: ["tbxName"], descendants: true, static: true }, { propertyName: "filters", predicate: AXFilterColumnComponent, descendants: true }], ngImport: i0, template: "<div class=\"ax-filter-panel\" #panel>\n <div class=\"saved-list\" #savedList>\n <ax-panel-box #fb>\n <ng-template #header>\n <div class=\"group-header\" (click)=\"fb.toggle()\">\n <ax-toolbar>\n <ax-toolbar-title>\n <div>\n <i class=\"far fa-filter\"></i>\n <span>SAVED FILTERS</span>\n </div>\n </ax-toolbar-title>\n <ax-toolbar-menu #menu [items]=\"saveItems\" (onItemClick)=\"onMenuItemClick($event)\">\n </ax-toolbar-menu>\n </ax-toolbar>\n </div>\n </ng-template>\n\n <div class=\"list\">\n <ng-container *ngIf=\"predefinedFilters && predefinedFilters.length; else emptyList\">\n <ul>\n <ng-container *ngFor=\"let f of predefinedFilters\">\n <ng-container *ngIf=\"!f.isInEdit; else editMode\">\n <li (click)=\"setFilterByName(f.name)\">\n <div class=\"item-line\" [class.selected]=\"f.selected\">\n <span class=\"title\"><i class=\"far fa-check\"></i> {{f.title}}</span>\n <span class=\"tools\"><i class=\"far fa-pen text-primary\" title=\"Rename\"\n (click)=\"handleRenameClick(f)\"></i>&nbsp;<i\n class=\"far fa-times text-danger\" title=\"Remove\"\n (click)=\"removeFilter(f)\"></i></span>\n </div>\n </li>\n </ng-container>\n <ng-template #editMode>\n <li>\n <ax-text-box #tbxName placeholder=\"Enter filter's title here\"\n (onKey)=\"tbxNameOnKey($event)\">\n <ax-button title=\"Save\" type=\"primary\" (onClick)=\"applySaveFilter()\">\n <i class=\"far fa-check\"></i>\n </ax-button>\n <ax-button title=\"Cancel\" type=\"danger\" (onClick)=\"cancelSaveFilter()\">\n <i class=\"far fa-times\"></i>\n </ax-button>\n <ax-validation>\n <ax-validation-rule type=\"required\" message=\"this field is required\">\n </ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n </li>\n </ng-template>\n </ng-container>\n </ul>\n </ng-container>\n <ng-template #emptyList>\n <div class=\"empty-list\">\n Empty\n </div>\n </ng-template>\n </div>\n </ax-panel-box>\n </div>\n <div class=\"body\" #body>\n <ng-container *ngFor=\"let g of groups\">\n <ax-panel-box #fb>\n <ng-template #header>\n <div class=\"group-header\" *ngIf=\"g.caption\" (click)=\"fb.toggle()\">\n <i\n [ngClass]=\"{ 'far fa-minus-square' : !fb.collapsed ,'fas fa-plus-square' : fb.collapsed }\"></i>\n <span>{{g.caption}}</span>\n </div>\n </ng-template>\n <ng-container *ngFor=\"let c of g.columns\">\n <div class=\"ax-filter-item-header\" [style.margin-bottom.px]=\"c.active ? 0 : 2\">\n <ax-check-box (onValueChanged)=\"onCheckValueChange(c,$event)\" [label]=\"c.caption\"\n [(value)]=\"c.active\">\n </ax-check-box>\n </div>\n <div [hidden]=\"!c.active\">\n <ng-container [ngSwitch]=\"c.type\">\n <ng-container *ngSwitchCase=\"'selection'\">\n <ax-filter-column-selection (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n [(active)]=\"c.active\" [mode]=\"c.options.mode\" [items]=\"c.options.items\"\n [dataType]=\"c.options.dataType\">\n </ax-filter-column-selection>\n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <ax-filter-column-date (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n [(active)]=\"c.active\">\n </ax-filter-column-date>\n </ng-container>\n <ng-container *ngSwitchCase=\"'number'\">\n <ax-filter-column-number (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n [(active)]=\"c.active\">\n </ax-filter-column-number>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ax-filter-column-string (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n [(active)]=\"c.active\">\n </ax-filter-column-string>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ax-panel-box>\n </ng-container>\n </div>\n\n <div *ngIf=\"mode=='click'\" class=\"footer\" #footer>\n <div class=\"filter-panel\">\n <ax-button (onClick)=\"apply()\" type=\"success\" size=\"sm\">\n <i class=\"far fa-filter\"></i>\n Apply Filter\n </ax-button>\n <ax-button (onClick)=\"clear();\" type=\"light \" size=\"sm\">\n <i class=\"far fa-eraser\"></i>\n Clear\n </ax-button>\n </div>\n </div>\n</div>", styles: [".ax-filter-panel{padding:2px;position:relative;height:100%;font-size:var(--font-md-size)}.ax-filter-panel .empty-list{text-align:center;padding:var(--sp-sm-size);color:var(--gray)}.ax-filter-panel .saved-list{border-bottom:1px solid var(--border-color)}.ax-filter-panel .saved-list .list ul{list-style-type:none;display:flex;flex-direction:column;padding:0;margin-bottom:var(--sp-md-size)}.ax-filter-panel .saved-list .list ul li .item-line{cursor:pointer;display:flex;flex-direction:row;justify-content:space-between}.ax-filter-panel .saved-list .list ul li .item-line .title i{opacity:.1}.ax-filter-panel .saved-list .list ul li .item-line .tools{display:inline}.ax-filter-panel .saved-list .list ul li .item-line .tools i{opacity:.2;cursor:pointer}.ax-filter-panel .saved-list .list ul li .item-line .tools i:hover{opacity:1}.ax-filter-panel .saved-list .list ul li .item-line.selected{font-weight:700}.ax-filter-panel .saved-list .list ul li .item-line.selected .title i{opacity:1}.ax-filter-panel .body{overflow-y:auto;overflow-x:hidden;height:calc(100% - 150px)}.ax-filter-panel .body .form-inline{justify-content:space-between}.ax-filter-panel .group-header{background:var(--white-color);display:flex;align-items:center;padding:var(--sp-sm-size) var(--sp-md-size);border-bottom:1px solid var(--border-color);background:var(--gray-dark-color);color:var(--gray-dark)}.ax-filter-panel .group-header i{margin-right:var(--sp-sm-size)}.ax-filter-panel .ax-filter-item-header{height:var(--el-md-size);display:flex;align-items:center}.ax-filter-panel .footer{width:100%;position:absolute;background-color:var(--white-color);bottom:0;padding:var(--sp-sm-size);border-top:1px solid var(--border-color)}.ax-filter-panel .footer .filter-panel{display:flex;align-items:center}.ax-filter-panel .footer .filter-panel ax-button{margin:0 2px}.ax-filter-panel .ax-filter-section{padding:var(--sp-md-size) var(--sp-lg-size);display:flex;justify-content:space-between;align-items:center}.ax-filter-panel .ax-filter-section>div{flex:1}.ax-filter-panel .ax-filter-section-value{padding:0px var(--sp-md-size) var(--sp-md-size) var(--sp-md-size);display:flex;justify-content:space-between;align-items:center}.ax-filter-panel .ax-filter-section-value>*{margin:0 3px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXPanelBoxComponent, selector: "ax-panel-box", inputs: ["size", "type", "caption", "collapsed", "allowCollapse"], outputs: ["collapsedChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { kind: "component", type: AXToolbarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "floatPlacemnet", "selection", "items"], outputs: ["onItemClick"] }, { kind: "component", type: AXToolbarTitleComponent, selector: "ax-toolbar-title", inputs: ["text"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXFilterColumnStringComponent, selector: "ax-filter-column-string" }, { kind: "component", type: AXFilterColumnSelectionComponent, selector: "ax-filter-column-selection", inputs: ["items", "mode", "dataType"] }, { kind: "component", type: AXFilterColumnDateComponent, selector: "ax-filter-column-date" }, { kind: "component", type: AXFilterColumnNumberComponent, selector: "ax-filter-column-number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
5939
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AXFilterPanelComponent, selector: "ax-filter-panel", inputs: { groups: "groups", predefinedFilters: "predefinedFilters", mode: "mode" }, outputs: { filterChange: "filterChange" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, static: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "savedList", first: true, predicate: ["savedList"], descendants: true, static: true }, { propertyName: "body", first: true, predicate: ["body"], descendants: true, static: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }, { propertyName: "tbxName", first: true, predicate: ["tbxName"], descendants: true, static: true }, { propertyName: "filters", predicate: AXFilterColumnComponent, descendants: true }], ngImport: i0, template: "<div class=\"ax-filter-panel\" #panel>\n <div class=\"saved-list\" #savedList>\n <ax-panel-box #fb>\n <ng-template #header>\n <div class=\"group-header\" (click)=\"fb.toggle()\">\n <ax-toolbar>\n <ax-toolbar-title>\n <div>\n <i class=\"far fa-filter\"></i>\n <span>SAVED FILTERS</span>\n </div>\n </ax-toolbar-title>\n <ax-toolbar-menu #menu [items]=\"saveItems\" (onItemClick)=\"onMenuItemClick($event)\">\n </ax-toolbar-menu>\n </ax-toolbar>\n </div>\n </ng-template>\n\n <div class=\"list\">\n <ng-container *ngIf=\"predefinedFilters && predefinedFilters.length; else emptyList\">\n <ul>\n <ng-container *ngFor=\"let f of predefinedFilters\">\n <ng-container *ngIf=\"!f.isInEdit; else editMode\">\n <li (click)=\"setFilterByName(f.name)\">\n <div class=\"item-line\" [class.selected]=\"f.selected\">\n <span class=\"title\"><i class=\"far fa-check\"></i> {{f.title}}</span>\n <span class=\"tools\"><i class=\"far fa-pen text-primary\" title=\"Rename\"\n (click)=\"handleRenameClick(f)\"></i>&nbsp;<i\n class=\"far fa-times text-danger\" title=\"Remove\"\n (click)=\"removeFilter(f)\"></i></span>\n </div>\n </li>\n </ng-container>\n <ng-template #editMode>\n <li>\n <ax-text-box #tbxName placeholder=\"Enter filter's title here\"\n (onKey)=\"tbxNameOnKey($event)\">\n <ax-button title=\"Save\" type=\"primary\" (onClick)=\"applySaveFilter()\">\n <i class=\"far fa-check\"></i>\n </ax-button>\n <ax-button title=\"Cancel\" type=\"danger\" (onClick)=\"cancelSaveFilter()\">\n <i class=\"far fa-times\"></i>\n </ax-button>\n <ax-validation>\n <ax-validation-rule type=\"required\" message=\"this field is required\">\n </ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n </li>\n </ng-template>\n </ng-container>\n </ul>\n </ng-container>\n <ng-template #emptyList>\n <div class=\"empty-list\">\n Empty\n </div>\n </ng-template>\n </div>\n </ax-panel-box>\n </div>\n <div class=\"body\" #body>\n <ng-container *ngFor=\"let g of groups\">\n <ax-panel-box #fb>\n <ng-template #header>\n <div class=\"group-header\" *ngIf=\"g.caption\" (click)=\"fb.toggle()\">\n <i\n [ngClass]=\"{ 'far fa-minus-square' : !fb.collapsed ,'fas fa-plus-square' : fb.collapsed }\"></i>\n <span>{{g.caption}}</span>\n </div>\n </ng-template>\n <ng-container *ngFor=\"let c of g.columns\">\n <div class=\"ax-filter-item-header\" [style.margin-bottom.px]=\"c.active ? 0 : 2\">\n <ax-check-box (onValueChanged)=\"onCheckValueChange(c,$event)\" [label]=\"c.caption\"\n [(value)]=\"c.active\">\n </ax-check-box>\n </div>\n <div [hidden]=\"!c.active\">\n <ng-container [ngSwitch]=\"c.type\">\n <ng-container *ngSwitchCase=\"'selection'\">\n <ax-filter-column-selection (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n [(active)]=\"c.active\" [mode]=\"c.options.mode\" [items]=\"c.options.items\"\n [dataType]=\"c.options.dataType\">\n </ax-filter-column-selection>\n </ng-container>\n <ng-container *ngSwitchCase=\"'date'\">\n <ax-filter-column-date (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n [(active)]=\"c.active\">\n </ax-filter-column-date>\n </ng-container>\n <ng-container *ngSwitchCase=\"'number'\">\n <ax-filter-column-number (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n [(active)]=\"c.active\">\n </ax-filter-column-number>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <ax-filter-column-string (valueChange)=\"onValueChange($event)\" [field]=\"c.field\"\n [(active)]=\"c.active\">\n </ax-filter-column-string>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ax-panel-box>\n </ng-container>\n </div>\n\n <div *ngIf=\"mode=='click'\" class=\"footer\" #footer>\n <div class=\"filter-panel\">\n <ax-button (onClick)=\"apply()\" type=\"success\" size=\"sm\">\n <i class=\"far fa-filter\"></i>\n Apply Filter\n </ax-button>\n <ax-button (onClick)=\"clear();\" type=\"light \" size=\"sm\">\n <i class=\"far fa-eraser\"></i>\n Clear\n </ax-button>\n </div>\n </div>\n</div>", styles: [".ax-filter-panel{padding:2px;position:relative;height:100%;font-size:var(--font-md-size)}.ax-filter-panel .empty-list{text-align:center;padding:var(--sp-sm-size);color:var(--gray)}.ax-filter-panel .saved-list{border-bottom:1px solid var(--border-color)}.ax-filter-panel .saved-list .list ul{list-style-type:none;display:flex;flex-direction:column;padding:0;margin-bottom:var(--sp-md-size)}.ax-filter-panel .saved-list .list ul li .item-line{cursor:pointer;display:flex;flex-direction:row;justify-content:space-between}.ax-filter-panel .saved-list .list ul li .item-line .title i{opacity:.1}.ax-filter-panel .saved-list .list ul li .item-line .tools{display:inline}.ax-filter-panel .saved-list .list ul li .item-line .tools i{opacity:.2;cursor:pointer}.ax-filter-panel .saved-list .list ul li .item-line .tools i:hover{opacity:1}.ax-filter-panel .saved-list .list ul li .item-line.selected{font-weight:700}.ax-filter-panel .saved-list .list ul li .item-line.selected .title i{opacity:1}.ax-filter-panel .body{overflow-y:auto;overflow-x:hidden;height:calc(100% - 150px)}.ax-filter-panel .body .form-inline{justify-content:space-between}.ax-filter-panel .group-header{background:var(--white-color);display:flex;align-items:center;padding:var(--sp-sm-size) var(--sp-md-size);border-bottom:1px solid var(--border-color);background:var(--gray-dark-color);color:var(--gray-dark)}.ax-filter-panel .group-header i{margin-right:var(--sp-sm-size)}.ax-filter-panel .ax-filter-item-header{height:var(--el-md-size);display:flex;align-items:center}.ax-filter-panel .footer{width:100%;position:absolute;background-color:var(--white-color);bottom:0;padding:var(--sp-sm-size);border-top:1px solid var(--border-color)}.ax-filter-panel .footer .filter-panel{display:flex;align-items:center}.ax-filter-panel .footer .filter-panel ax-button{margin:0 2px}.ax-filter-panel .ax-filter-section{padding:var(--sp-md-size) var(--sp-lg-size);display:flex;justify-content:space-between;align-items:center}.ax-filter-panel .ax-filter-section>div{flex:1}.ax-filter-panel .ax-filter-section-value{padding:0px var(--sp-md-size) var(--sp-md-size) var(--sp-md-size);display:flex;justify-content:space-between;align-items:center}.ax-filter-panel .ax-filter-section-value>*{margin:0 3px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXPanelBoxComponent, selector: "ax-panel-box", inputs: ["size", "type", "caption", "collapsed", "allowCollapse"], outputs: ["collapsedChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["readonly", "disabled", "size", "label", "tabIndex", "indeterminate", "useTreeView", "value"], outputs: ["onValueChanged", "valueChange", "onClick"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "component", type: AXToolbarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXToolbarMenuComponent, selector: "ax-toolbar-menu", inputs: ["menuTemplate", "floatPlacemnet", "selection", "items"], outputs: ["onItemClick"] }, { kind: "component", type: AXToolbarTitleComponent, selector: "ax-toolbar-title", inputs: ["text"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXFilterColumnStringComponent, selector: "ax-filter-column-string" }, { kind: "component", type: AXFilterColumnSelectionComponent, selector: "ax-filter-column-selection", inputs: ["items", "mode", "dataType"] }, { kind: "component", type: AXFilterColumnDateComponent, selector: "ax-filter-column-date" }, { kind: "component", type: AXFilterColumnNumberComponent, selector: "ax-filter-column-number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
5952
5940
  }
5953
5941
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXFilterPanelComponent, decorators: [{
5954
5942
  type: Component,
@@ -10158,7 +10146,7 @@ class AXQueryBuilderPopupComponent extends AXBasePopupPageComponent {
10158
10146
  ];
10159
10147
  }
10160
10148
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXQueryBuilderPopupComponent, deps: [{ token: AXToastService }], target: i0.ɵɵFactoryTarget.Component });
10161
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AXQueryBuilderPopupComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div>\n <ax-validation-form #form>\n <div *ngFor=\"let rule of items\">\n\n <div *ngIf=\" rule.control\" [ngSwitch]=\"rule.control.type\" style=\"padding: 1em;\">\n <div *ngSwitchCase=\"'textBox'\">\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n </ax-form-group>\n </div>\n <div *ngSwitchCase=\"'selectBox'\">\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-select-box placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n [textField]=\"getOption('textField',rule)\" [(selectedItems)]=\"rule.valueItem\"\n [valueField]=\"getOption('valueField',rule)\" [mode]=\"getOption('mode',rule)\"\n (selectedItemsChange)=\"selectedItemsChange($event,rule)\" size=\"sm\" #selectBoxValue\n [remoteOperation]=\"getOption('remoteOperation',rule)\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n <ax-data-source [provideData]=\"getProvideData\" [params]=\"rule\"></ax-data-source>\n </ax-select-box>\n </ax-form-group>\n </div>\n <div *ngSwitchCase=\"'numberBox'\">\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-number-box (onValueChanged)=\"valueChange($event,rule)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </ax-form-group>\n </div>\n <div *ngSwitchCase=\"'datetime'\">\n <ax-date-picker label=\"From\" [(value)]=\"rule.value\" (onValueChanged)=\"valueChange($event,rule)\">\n </ax-date-picker>\n </div>\n <div *ngSwitchCase=\"'boolean'\">\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event,rule)\"\n allowNull=\"false\" [selectedValues]=\"rule.value\" size=\"sm\" mode=\"single\">\n <ax-data-source [provideData]=\"provideDataBoolean\">\n </ax-data-source>\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-select-box>\n </ax-form-group>\n </div>\n <div *ngSwitchDefault>\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n\n </ax-form-group>\n\n </div>\n </div>\n\n\n\n\n </div>\n\n </ax-validation-form>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dropdownWidth", "multiLine", "onDemandTranslate", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { kind: "component", type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { kind: "component", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: ["dayStyle", "dayMinMaxResoan", "validation", "placeholder", "min", "max", "readonly", "disabled", "allowClear", "textAlign", "showToday", "selectableHoliday", "dateType", "showTodayButton", "openByClick", "size", "type", "value"], outputs: ["typeChange", "onValueChanged", "valueChange"] }] });
10149
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AXQueryBuilderPopupComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: AXValidationFormComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div>\n <ax-validation-form #form>\n <div *ngFor=\"let rule of items\">\n\n <div *ngIf=\" rule.control\" [ngSwitch]=\"rule.control.type\" style=\"padding: 1em;\">\n <div *ngSwitchCase=\"'textBox'\">\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n </ax-form-group>\n </div>\n <div *ngSwitchCase=\"'selectBox'\">\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-select-box placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\"\n [textField]=\"getOption('textField',rule)\" [(selectedItems)]=\"rule.valueItem\"\n [valueField]=\"getOption('valueField',rule)\" [mode]=\"getOption('mode',rule)\"\n (selectedItemsChange)=\"selectedItemsChange($event,rule)\" size=\"sm\" #selectBoxValue\n [remoteOperation]=\"getOption('remoteOperation',rule)\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n <ax-data-source [provideData]=\"getProvideData\" [params]=\"rule\"></ax-data-source>\n </ax-select-box>\n </ax-form-group>\n </div>\n <div *ngSwitchCase=\"'numberBox'\">\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-number-box (onValueChanged)=\"valueChange($event,rule)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </ax-form-group>\n </div>\n <div *ngSwitchCase=\"'datetime'\">\n <ax-date-picker label=\"From\" [(value)]=\"rule.value\" (onValueChanged)=\"valueChange($event,rule)\">\n </ax-date-picker>\n </div>\n <div *ngSwitchCase=\"'boolean'\">\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-select-box #selectBoxBoolean (selectedItemsChange)=\"valueBooleanChange($event,rule)\"\n allowNull=\"false\" [selectedValues]=\"rule.value\" size=\"sm\" mode=\"single\">\n <ax-data-source [provideData]=\"provideDataBoolean\">\n </ax-data-source>\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-select-box>\n </ax-form-group>\n </div>\n <div *ngSwitchDefault>\n <ax-form-group>\n <ax-label>{{getValue(rule.onDemandLabel)}}</ax-label>\n <ax-text-box (onValueChanged)=\"textValueChange($event,rule)\"\n placeholder=\"\u0645\u0642\u062F\u0627\u0631 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0648\u0627\u0631\u062F \u06A9\u0646\u06CC\u062F\" size=\"sm\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n\n </ax-form-group>\n\n </div>\n </div>\n\n\n\n\n </div>\n\n </ax-validation-form>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dropdownWidth", "multiLine", "onDemandTranslate", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { kind: "component", type: AXDataSourceComponent, selector: "ax-data-source", inputs: ["provideData", "params"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXFormGroupComponent, selector: "ax-form-group", inputs: ["size"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "component", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: ["dayStyle", "dayMinMaxResoan", "validation", "placeholder", "min", "max", "readonly", "disabled", "allowClear", "textAlign", "showToday", "selectableHoliday", "dateType", "showTodayButton", "openByClick", "size", "type", "value"], outputs: ["typeChange", "onValueChanged", "valueChange"] }] });
10162
10150
  }
10163
10151
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXQueryBuilderPopupComponent, decorators: [{
10164
10152
  type: Component,
@@ -12740,7 +12728,7 @@ class AXConditionalColorPropertyEditorComponent extends AXProperyEditorComponent
12740
12728
  }
12741
12729
  }
12742
12730
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXConditionalColorPropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
12743
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AXConditionalColorPropertyEditorComponent, selector: "ng-component", inputs: { dataType: "dataType" }, viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\n <div>\n <div [style.background-color]=\"r.color\"></div>\n <div>{{ r.display }}</div>\n </div>\n <div [attr.title]=\"getTitle(r.operator)\">\n <div class=\"value\">{{r.value}}</div>\n <div>\n <i class=\"far {{getIcon(r.operator)}}\"></i>\n </div>\n <div class=\"value-text\">{{'common.value' | trans}}</div>\n <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\n </div>\n</div>\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans }}\n</ax-button>\n<ng-template #tplEdit>\n <ax-page>\n <ax-page-content>\n <div class=\"container\">\n <ax-validation-form (onInit)=\"onFormInit($event)\">\n\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.condition' | trans }}</ax-label>\n <ax-select-box [(selectedValues)]=\"editRow.operator\" [allowSearch]=\"false\"\n [allowNull]=\"false\" [items]=\"operators\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-select-box>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.value' | trans }}</ax-label>\n <div [ngSwitch]=\"dataType\">\n <ax-text-box *ngSwitchCase=\"'string'\" [(value)]=\"editRow.value\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n <ax-select-box *ngSwitchCase=\"'boolean'\" [(selectedValues)]=\"editRow.value\"\n [allowSearch]=\"false\" [allowNull]=\"false\" [items]=\"booleanItems\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-select-box>\n <ax-number-box *ngSwitchDefault [(value)]=\"editRow.value\"\n [showSeparator]=\"showSeparator\" [decimalNumber]=\"decimalNumber\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'conditional-color-property-editor.replaced-color' | trans }}</ax-label>\n <ax-color-picker [(value)]=\"editRow.color\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-color-picker>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'conditional-color-property-editor.replaced-title' | trans }}</ax-label>\n <ax-text-box [(value)]=\"editRow.display\">\n </ax-text-box>\n </div>\n </div>\n </ax-validation-form>\n </div>\n <div class=\"ax-mrg-md\"></div>\n </ax-page-content>\n </ax-page>\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.value-text{color:var(--ax-success-color)}.range-item div:last-child div.value{color:var(--ax-danger-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { kind: "component", type: AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: AXPageComponent, selector: "ax-page" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dropdownWidth", "multiLine", "onDemandTranslate", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
12731
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AXConditionalColorPropertyEditorComponent, selector: "ng-component", inputs: { dataType: "dataType" }, viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\n <div>\n <div [style.background-color]=\"r.color\"></div>\n <div>{{ r.display }}</div>\n </div>\n <div [attr.title]=\"getTitle(r.operator)\">\n <div class=\"value\">{{r.value}}</div>\n <div>\n <i class=\"far {{getIcon(r.operator)}}\"></i>\n </div>\n <div class=\"value-text\">{{'common.value' | trans}}</div>\n <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\n </div>\n</div>\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans }}\n</ax-button>\n<ng-template #tplEdit>\n <ax-page>\n <ax-page-content>\n <div class=\"container\">\n <ax-validation-form (onInit)=\"onFormInit($event)\">\n\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.condition' | trans }}</ax-label>\n <ax-select-box [(selectedValues)]=\"editRow.operator\" [allowSearch]=\"false\"\n [allowNull]=\"false\" [items]=\"operators\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-select-box>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.value' | trans }}</ax-label>\n <div [ngSwitch]=\"dataType\">\n <ax-text-box *ngSwitchCase=\"'string'\" [(value)]=\"editRow.value\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n <ax-select-box *ngSwitchCase=\"'boolean'\" [(selectedValues)]=\"editRow.value\"\n [allowSearch]=\"false\" [allowNull]=\"false\" [items]=\"booleanItems\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-select-box>\n <ax-number-box *ngSwitchDefault [(value)]=\"editRow.value\"\n [showSeparator]=\"showSeparator\" [decimalNumber]=\"decimalNumber\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'conditional-color-property-editor.replaced-color' | trans }}</ax-label>\n <ax-color-picker [(value)]=\"editRow.color\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-color-picker>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'conditional-color-property-editor.replaced-title' | trans }}</ax-label>\n <ax-text-box [(value)]=\"editRow.display\">\n </ax-text-box>\n </div>\n </div>\n </ax-validation-form>\n </div>\n <div class=\"ax-mrg-md\"></div>\n </ax-page-content>\n </ax-page>\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.value-text{color:var(--ax-success-color)}.range-item div:last-child div.value{color:var(--ax-danger-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { kind: "component", type: AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: AXPageComponent, selector: "ax-page" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["showDropDownButton", "rowInputTemplate", "showCheckBox", "readonly", "rtl", "disabled", "placeholder", "size", "allowNull", "textAlign", "bufferSize", "remoteOperation", "fitParent", "dropdownWidth", "multiLine", "onDemandTranslate", "dataSource", "validation", "disabledCallback", "allowSearch", "textField", "valueField", "disabledField", "mode", "items", "selectedItems", "selectedValues"], outputs: ["dropdownToggle", "itemsChange", "onBlur", "onFocus", "selectionChanged", "selectedItemsChange", "selectedValuesChange"] }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
12744
12732
  }
12745
12733
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXConditionalColorPropertyEditorComponent, decorators: [{
12746
12734
  type: Component,
@@ -13112,7 +13100,7 @@ class AXRangePropertyEditorComponent extends AXProperyEditorComponent {
13112
13100
  super.handleValueChange(this.ranges);
13113
13101
  }
13114
13102
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXRangePropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AXPopupService }], target: i0.ɵɵFactoryTarget.Component });
13115
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AXRangePropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\n <div>\n <div [style.background-color]=\"r.color\"></div>\n <div>{{r.title}}</div>\n </div>\n <div>\n <div class=\"min\" title=\"minimum {{r.minValue}}\">{{r.minValue}}</div>\n <div>\n <i class=\"far fa-long-arrow-left\"></i>\n </div>\n <div class=\"max\" title=\"maxmimum {{r.maxValue}}\">{{r.maxValue}}</div>\n <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\n </div>\n</div>\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans }}\n</ax-button>\n<ng-template #tplEdit>\n <ax-page>\n <ax-page-content>\n <div class=\"container\">\n <ax-validation-form (onInit)=\"onFormInit($event)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.title' | trans }}</ax-label>\n <ax-text-box [(value)]=\"editRow.title\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-6\">\n <ax-label>{{ 'common.min-value' | trans }}</ax-label>\n <ax-number-box [(value)]=\"editRow.minValue\" [showSeparator]=\"showSeparator\"\n [decimalNumber]=\"decimalNumber\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </div>\n <div class=\"col-6\">\n <ax-label>{{ 'common.max-value' | trans }}</ax-label>\n <ax-number-box [(value)]=\"editRow.maxValue\" [showSeparator]=\"showSeparator\"\n [decimalNumber]=\"decimalNumber\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.color' | trans }}</ax-label>\n <ax-color-picker [(value)]=\"editRow.color\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-color-picker>\n </div>\n </div>\n </ax-validation-form>\n </div>\n <div class=\"ax-mrg-md\"></div>\n </ax-page-content>\n </ax-page>\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.min{color:var(--ax-danger-color)}.range-item div:last-child div.max{color:var(--ax-success-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { kind: "component", type: AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: AXPageComponent, selector: "ax-page" }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
13103
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AXRangePropertyEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "tplEdit", first: true, predicate: ["tplEdit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngFor=\"let r of ranges\" [style.border-color]=\"r.color\" class=\"range-item\" (click)=\"handleEditClick(r)\">\n <div>\n <div [style.background-color]=\"r.color\"></div>\n <div>{{r.title}}</div>\n </div>\n <div>\n <div class=\"min\" title=\"minimum {{r.minValue}}\">{{r.minValue}}</div>\n <div>\n <i class=\"far fa-long-arrow-left\"></i>\n </div>\n <div class=\"max\" title=\"maxmimum {{r.maxValue}}\">{{r.maxValue}}</div>\n <div class=\"remove-button\" (click)=\"handleRemoveClick(r)\"><i class=\"far fa-trash-alt\"></i></div>\n </div>\n</div>\n<ax-button icon=\"far fa-plus\" type=\"success outline\" (click)=\"handleAddClick()\">{{ 'common.add-item' | trans }}\n</ax-button>\n<ng-template #tplEdit>\n <ax-page>\n <ax-page-content>\n <div class=\"container\">\n <ax-validation-form (onInit)=\"onFormInit($event)\">\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.title' | trans }}</ax-label>\n <ax-text-box [(value)]=\"editRow.title\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-text-box>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-6\">\n <ax-label>{{ 'common.min-value' | trans }}</ax-label>\n <ax-number-box [(value)]=\"editRow.minValue\" [showSeparator]=\"showSeparator\"\n [decimalNumber]=\"decimalNumber\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </div>\n <div class=\"col-6\">\n <ax-label>{{ 'common.max-value' | trans }}</ax-label>\n <ax-number-box [(value)]=\"editRow.maxValue\" [showSeparator]=\"showSeparator\"\n [decimalNumber]=\"decimalNumber\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-number-box>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12\">\n <ax-label>{{ 'common.color' | trans }}</ax-label>\n <ax-color-picker [(value)]=\"editRow.color\">\n <ax-validation>\n <ax-validation-rule type=\"required\"></ax-validation-rule>\n </ax-validation>\n </ax-color-picker>\n </div>\n </div>\n </ax-validation-form>\n </div>\n <div class=\"ax-mrg-md\"></div>\n </ax-page-content>\n </ax-page>\n</ng-template>", styles: [".range-item{border:1px solid var(--ax-gray-color);margin-bottom:5px;display:flex;padding:5px;border-radius:5px;justify-content:space-between;align-items:center;cursor:pointer}.range-item .remove-button{color:var(--ax-danger-color);padding:var(--ax-size-sm);display:flex;justify-content:center;cursor:pointer}.range-item .remove-button:hover{background-color:var(--ax-danger-trans-light-color)}.range-item div:first-child{display:flex;align-items:center}.range-item div:first-child div:first-child{width:25px;height:25px;border-radius:3px}.range-item div:first-child div:last-child{margin-inline-start:10px}.range-item div:last-child{display:flex;align-items:center}.range-item div:last-child button{background-color:transparent;border:none;cursor:pointer}.range-item div:last-child button i{color:var(--ax-danger-color)}.range-item div:last-child div{min-width:40px}.range-item div:last-child div.min{color:var(--ax-danger-color)}.range-item div:last-child div.max{color:var(--ax-success-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["mask", "showMask", "type", "maxLength", "maskGuid", "maskPlaceholder", "maskKeepCharPositions"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["min", "max", "showSeparator", "showCurrency", "showCounter", "scrollWeel", "showDoubleCounter", "maxLength", "intStep", "decimalNumber", "customStep"] }, { kind: "component", type: AXColorPickerComponent, selector: "ax-color-picker", inputs: ["placeholder", "showClear", "label", "readonly", "disabled", "size", "rtl", "validation"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["size"] }, { kind: "component", type: AXPageContentComponent, selector: "ax-page-content" }, { kind: "component", type: AXPageComponent, selector: "ax-page" }, { kind: "component", type: AXValidationFormComponent, selector: "ax-validation-form", inputs: ["validateOn"], outputs: ["onInit"] }, { kind: "component", type: AXValidationComponent, selector: "ax-validation", inputs: ["rules", "validateOn"], outputs: ["rulesChange", "showMessage"] }, { kind: "component", type: AXValidationRuleComponent, selector: "ax-validation-rule", inputs: ["type", "message", "value", "enabled", "operation"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["type", "icon", "submitBehavior", "cancelBehavior", "block", "loading", "selected"] }, { kind: "pipe", type: i1$2.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
13116
13104
  }
13117
13105
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AXRangePropertyEditorComponent, decorators: [{
13118
13106
  type: Component,