@super-green/query-builder 0.7.2 → 0.8.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/query-builder/fesm2022/query-builder.mjs +72 -45
- package/dist/query-builder/fesm2022/query-builder.mjs.map +1 -1
- package/dist/query-builder/types/query-builder.d.ts +342 -0
- package/package.json +56 -56
- package/dist/query-builder/esm2022/lib/query-builder/query-arrow-icon.directive.mjs +0 -15
- package/dist/query-builder/esm2022/lib/query-builder/query-builder.component.mjs +0 -769
- package/dist/query-builder/esm2022/lib/query-builder/query-builder.interfaces.mjs +0 -2
- package/dist/query-builder/esm2022/lib/query-builder/query-button-group.directive.mjs +0 -15
- package/dist/query-builder/esm2022/lib/query-builder/query-empty-warning.directive.mjs +0 -15
- package/dist/query-builder/esm2022/lib/query-builder/query-entity.directive.mjs +0 -15
- package/dist/query-builder/esm2022/lib/query-builder/query-field.directive.mjs +0 -15
- package/dist/query-builder/esm2022/lib/query-builder/query-input.directive.mjs +0 -28
- package/dist/query-builder/esm2022/lib/query-builder/query-operator.directive.mjs +0 -15
- package/dist/query-builder/esm2022/lib/query-builder/query-remove-button.directive.mjs +0 -15
- package/dist/query-builder/esm2022/lib/query-builder/query-switch-group.directive.mjs +0 -15
- package/dist/query-builder/esm2022/lib/query-builder.module.mjs +0 -73
- package/dist/query-builder/esm2022/public-api.mjs +0 -16
- package/dist/query-builder/esm2022/query-builder.mjs +0 -5
- package/dist/query-builder/index.d.ts +0 -5
- package/dist/query-builder/lib/query-builder/query-arrow-icon.directive.d.ts +0 -8
- package/dist/query-builder/lib/query-builder/query-builder.component.d.ts +0 -129
- package/dist/query-builder/lib/query-builder/query-builder.interfaces.d.ts +0 -143
- package/dist/query-builder/lib/query-builder/query-button-group.directive.d.ts +0 -8
- package/dist/query-builder/lib/query-builder/query-empty-warning.directive.d.ts +0 -8
- package/dist/query-builder/lib/query-builder/query-entity.directive.d.ts +0 -8
- package/dist/query-builder/lib/query-builder/query-field.directive.d.ts +0 -8
- package/dist/query-builder/lib/query-builder/query-input.directive.d.ts +0 -12
- package/dist/query-builder/lib/query-builder/query-operator.directive.d.ts +0 -8
- package/dist/query-builder/lib/query-builder/query-remove-button.directive.d.ts +0 -8
- package/dist/query-builder/lib/query-builder/query-switch-group.directive.d.ts +0 -8
- package/dist/query-builder/lib/query-builder.module.d.ts +0 -18
- package/dist/query-builder/public-api.d.ts +0 -12
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i2 from '@angular/forms';
|
|
2
2
|
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Directive, Input, forwardRef,
|
|
4
|
+
import { Directive, Input, forwardRef, ContentChild, ContentChildren, ViewChild, Component, NgModule } from '@angular/core';
|
|
5
5
|
import * as i1 from '@angular/common';
|
|
6
6
|
import { CommonModule } from '@angular/common';
|
|
7
7
|
|
|
@@ -10,12 +10,15 @@ class QueryOperatorDirective {
|
|
|
10
10
|
constructor(template) {
|
|
11
11
|
this.template = template;
|
|
12
12
|
}
|
|
13
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
14
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
13
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryOperatorDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
14
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: QueryOperatorDirective, isStandalone: false, selector: "[queryOperator]", ngImport: i0 });
|
|
15
15
|
}
|
|
16
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
16
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryOperatorDirective, decorators: [{
|
|
17
17
|
type: Directive,
|
|
18
|
-
args: [{
|
|
18
|
+
args: [{
|
|
19
|
+
selector: '[queryOperator]',
|
|
20
|
+
standalone: false
|
|
21
|
+
}]
|
|
19
22
|
}], ctorParameters: () => [{ type: i0.TemplateRef }] });
|
|
20
23
|
|
|
21
24
|
class QueryFieldDirective {
|
|
@@ -23,12 +26,15 @@ class QueryFieldDirective {
|
|
|
23
26
|
constructor(template) {
|
|
24
27
|
this.template = template;
|
|
25
28
|
}
|
|
26
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
27
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
29
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryFieldDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
30
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: QueryFieldDirective, isStandalone: false, selector: "[queryField]", ngImport: i0 });
|
|
28
31
|
}
|
|
29
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
32
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryFieldDirective, decorators: [{
|
|
30
33
|
type: Directive,
|
|
31
|
-
args: [{
|
|
34
|
+
args: [{
|
|
35
|
+
selector: '[queryField]',
|
|
36
|
+
standalone: false
|
|
37
|
+
}]
|
|
32
38
|
}], ctorParameters: () => [{ type: i0.TemplateRef }] });
|
|
33
39
|
|
|
34
40
|
class QueryEntityDirective {
|
|
@@ -36,12 +42,15 @@ class QueryEntityDirective {
|
|
|
36
42
|
constructor(template) {
|
|
37
43
|
this.template = template;
|
|
38
44
|
}
|
|
39
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
40
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
45
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryEntityDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
46
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: QueryEntityDirective, isStandalone: false, selector: "[queryEntity]", ngImport: i0 });
|
|
41
47
|
}
|
|
42
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
48
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryEntityDirective, decorators: [{
|
|
43
49
|
type: Directive,
|
|
44
|
-
args: [{
|
|
50
|
+
args: [{
|
|
51
|
+
selector: '[queryEntity]',
|
|
52
|
+
standalone: false
|
|
53
|
+
}]
|
|
45
54
|
}], ctorParameters: () => [{ type: i0.TemplateRef }] });
|
|
46
55
|
|
|
47
56
|
class QuerySwitchGroupDirective {
|
|
@@ -49,12 +58,15 @@ class QuerySwitchGroupDirective {
|
|
|
49
58
|
constructor(template) {
|
|
50
59
|
this.template = template;
|
|
51
60
|
}
|
|
52
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
53
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
61
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QuerySwitchGroupDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
62
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: QuerySwitchGroupDirective, isStandalone: false, selector: "[querySwitchGroup]", ngImport: i0 });
|
|
54
63
|
}
|
|
55
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
64
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QuerySwitchGroupDirective, decorators: [{
|
|
56
65
|
type: Directive,
|
|
57
|
-
args: [{
|
|
66
|
+
args: [{
|
|
67
|
+
selector: '[querySwitchGroup]',
|
|
68
|
+
standalone: false
|
|
69
|
+
}]
|
|
58
70
|
}], ctorParameters: () => [{ type: i0.TemplateRef }] });
|
|
59
71
|
|
|
60
72
|
class QueryButtonGroupDirective {
|
|
@@ -62,12 +74,15 @@ class QueryButtonGroupDirective {
|
|
|
62
74
|
constructor(template) {
|
|
63
75
|
this.template = template;
|
|
64
76
|
}
|
|
65
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
66
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
77
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryButtonGroupDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
78
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: QueryButtonGroupDirective, isStandalone: false, selector: "[queryButtonGroup]", ngImport: i0 });
|
|
67
79
|
}
|
|
68
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
80
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryButtonGroupDirective, decorators: [{
|
|
69
81
|
type: Directive,
|
|
70
|
-
args: [{
|
|
82
|
+
args: [{
|
|
83
|
+
selector: '[queryButtonGroup]',
|
|
84
|
+
standalone: false
|
|
85
|
+
}]
|
|
71
86
|
}], ctorParameters: () => [{ type: i0.TemplateRef }] });
|
|
72
87
|
|
|
73
88
|
class QueryInputDirective {
|
|
@@ -86,12 +101,15 @@ class QueryInputDirective {
|
|
|
86
101
|
constructor(template) {
|
|
87
102
|
this.template = template;
|
|
88
103
|
}
|
|
89
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
90
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
104
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryInputDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
105
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: QueryInputDirective, isStandalone: false, selector: "[queryInput]", inputs: { queryInputType: "queryInputType" }, ngImport: i0 });
|
|
91
106
|
}
|
|
92
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
107
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryInputDirective, decorators: [{
|
|
93
108
|
type: Directive,
|
|
94
|
-
args: [{
|
|
109
|
+
args: [{
|
|
110
|
+
selector: '[queryInput]',
|
|
111
|
+
standalone: false
|
|
112
|
+
}]
|
|
95
113
|
}], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { queryInputType: [{
|
|
96
114
|
type: Input
|
|
97
115
|
}] } });
|
|
@@ -101,12 +119,15 @@ class QueryRemoveButtonDirective {
|
|
|
101
119
|
constructor(template) {
|
|
102
120
|
this.template = template;
|
|
103
121
|
}
|
|
104
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
105
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
122
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryRemoveButtonDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
123
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: QueryRemoveButtonDirective, isStandalone: false, selector: "[queryRemoveButton]", ngImport: i0 });
|
|
106
124
|
}
|
|
107
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
125
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryRemoveButtonDirective, decorators: [{
|
|
108
126
|
type: Directive,
|
|
109
|
-
args: [{
|
|
127
|
+
args: [{
|
|
128
|
+
selector: '[queryRemoveButton]',
|
|
129
|
+
standalone: false
|
|
130
|
+
}]
|
|
110
131
|
}], ctorParameters: () => [{ type: i0.TemplateRef }] });
|
|
111
132
|
|
|
112
133
|
class QueryEmptyWarningDirective {
|
|
@@ -114,12 +135,15 @@ class QueryEmptyWarningDirective {
|
|
|
114
135
|
constructor(template) {
|
|
115
136
|
this.template = template;
|
|
116
137
|
}
|
|
117
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
118
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
138
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryEmptyWarningDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
139
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: QueryEmptyWarningDirective, isStandalone: false, selector: "[queryEmptyWarning]", ngImport: i0 });
|
|
119
140
|
}
|
|
120
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
141
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryEmptyWarningDirective, decorators: [{
|
|
121
142
|
type: Directive,
|
|
122
|
-
args: [{
|
|
143
|
+
args: [{
|
|
144
|
+
selector: '[queryEmptyWarning]',
|
|
145
|
+
standalone: false
|
|
146
|
+
}]
|
|
123
147
|
}], ctorParameters: () => [{ type: i0.TemplateRef }] });
|
|
124
148
|
|
|
125
149
|
class QueryArrowIconDirective {
|
|
@@ -127,12 +151,15 @@ class QueryArrowIconDirective {
|
|
|
127
151
|
constructor(template) {
|
|
128
152
|
this.template = template;
|
|
129
153
|
}
|
|
130
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
131
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
154
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryArrowIconDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
155
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: QueryArrowIconDirective, isStandalone: false, selector: "[queryArrowIcon]", ngImport: i0 });
|
|
132
156
|
}
|
|
133
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
157
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryArrowIconDirective, decorators: [{
|
|
134
158
|
type: Directive,
|
|
135
|
-
args: [{
|
|
159
|
+
args: [{
|
|
160
|
+
selector: '[queryArrowIcon]',
|
|
161
|
+
standalone: false
|
|
162
|
+
}]
|
|
136
163
|
}], ctorParameters: () => [{ type: i0.TemplateRef }] });
|
|
137
164
|
|
|
138
165
|
const CONTROL_VALUE_ACCESSOR = {
|
|
@@ -808,12 +835,12 @@ class QueryBuilderComponent {
|
|
|
808
835
|
this.parentTouchedCallback();
|
|
809
836
|
}
|
|
810
837
|
}
|
|
811
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
812
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: QueryBuilderComponent, selector: "query-builder", inputs: { disabled: "disabled", data: "data", allowRuleset: "allowRuleset", allowCollapse: "allowCollapse", emptyMessage: "emptyMessage", classNames: "classNames", operatorMap: "operatorMap", parentValue: "parentValue", config: "config", parentArrowIconTemplate: "parentArrowIconTemplate", parentInputTemplates: "parentInputTemplates", parentOperatorTemplate: "parentOperatorTemplate", parentFieldTemplate: "parentFieldTemplate", parentEntityTemplate: "parentEntityTemplate", parentSwitchGroupTemplate: "parentSwitchGroupTemplate", parentButtonGroupTemplate: "parentButtonGroupTemplate", parentRemoveButtonTemplate: "parentRemoveButtonTemplate", parentEmptyWarningTemplate: "parentEmptyWarningTemplate", parentChangeCallback: "parentChangeCallback", parentTouchedCallback: "parentTouchedCallback", persistValueOnFieldChange: "persistValueOnFieldChange", value: "value" }, providers: [CONTROL_VALUE_ACCESSOR, VALIDATOR], queries: [{ propertyName: "buttonGroupTemplate", first: true, predicate: QueryButtonGroupDirective, descendants: true }, { propertyName: "switchGroupTemplate", first: true, predicate: QuerySwitchGroupDirective, descendants: true }, { propertyName: "fieldTemplate", first: true, predicate: QueryFieldDirective, descendants: true }, { propertyName: "entityTemplate", first: true, predicate: QueryEntityDirective, descendants: true }, { propertyName: "operatorTemplate", first: true, predicate: QueryOperatorDirective, descendants: true }, { propertyName: "removeButtonTemplate", first: true, predicate: QueryRemoveButtonDirective, descendants: true }, { propertyName: "emptyWarningTemplate", first: true, predicate: QueryEmptyWarningDirective, descendants: true }, { propertyName: "arrowIconTemplate", first: true, predicate: QueryArrowIconDirective, descendants: true }, { propertyName: "inputTemplates", predicate: QueryInputDirective }], viewQueries: [{ propertyName: "treeContainer", first: true, predicate: ["treeContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"getClassNames('switchRow')\">\r\n <ng-template #defaultArrowIcon>\r\n <i [ngClass]=\"getClassNames('arrowIcon')\"></i>\r\n </ng-template>\r\n\r\n <a *ngIf=\"allowCollapse\" (click)=\"toggleCollapse()\" [ngClass]=\"getClassNames('arrowIconButton', data.collapsed ? 'collapsed' : null)\">\r\n <ng-container *ngIf=\"getArrowIconTemplate() as template; else defaultArrowIcon\">\r\n <ng-container *ngTemplateOutlet=\"template; context: getArrowIconContext()\"></ng-container>\r\n </ng-container>\r\n </a>\r\n\r\n <ng-container *ngIf=\"getButtonGroupTemplate() as template; else defaultButtonGroup\">\r\n <div [ngClass]=\"getClassNames('buttonGroup', 'rightAlign')\">\r\n <ng-container *ngTemplateOutlet=\"template; context: getButtonGroupContext()\"></ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #defaultButtonGroup>\r\n <div [ngClass]=\"getClassNames('buttonGroup', 'rightAlign')\">\r\n <button type=\"button\" (click)=\"addRule()\" [ngClass]=\"getClassNames('button')\" [disabled]=disabled>\r\n <i [ngClass]=\"getClassNames('addIcon')\"></i> Rule\r\n </button>\r\n <button type=\"button\" (click)=\"addRuleSet()\" [ngClass]=\"getClassNames('button')\" *ngIf=\"allowRuleset\" [disabled]=disabled>\r\n <i [ngClass]=\"getClassNames('addIcon')\"></i> Ruleset\r\n </button>\r\n <ng-container *ngIf=\"!!parentValue && allowRuleset\">\r\n <button type=\"button\" (click)=\"removeRuleSet()\" [ngClass]=\"getClassNames('button', 'removeButton')\" [disabled]=disabled>\r\n <i [ngClass]=\"getClassNames('removeIcon')\"></i>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"getSwitchGroupTemplate() as template; else defaultSwitchGroup\">\r\n <ng-container *ngTemplateOutlet=\"template; context: getSwitchGroupContext()\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-template #defaultSwitchGroup>\r\n <div [ngClass]=\"getClassNames('switchGroup', 'transition')\" *ngIf=\"data\">\r\n <div [ngClass]=\"getClassNames('switchControl')\">\r\n <input type=\"radio\" [ngClass]=\"getClassNames('switchRadio')\" [(ngModel)]=\"data.condition\" [disabled]=disabled\r\n value=\"and\" #andOption />\r\n <label (click)=\"changeCondition(andOption.value)\" [ngClass]=\"getClassNames('switchLabel')\">AND</label>\r\n </div>\r\n <div [ngClass]=\"getClassNames('switchControl')\">\r\n <input type=\"radio\" [ngClass]=\"getClassNames('switchRadio')\" [(ngModel)]=\"data.condition\" [disabled]=disabled\r\n value=\"or\" #orOption />\r\n <label (click)=\"changeCondition(orOption.value)\" [ngClass]=\"getClassNames('switchLabel')\">OR</label>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</div>\r\n\r\n<div #treeContainer (transitionend)=\"transitionEnd($event)\" [ngClass]=\"getClassNames('treeContainer', data.collapsed ? 'collapsed' : null)\">\r\n <ul [ngClass]=\"getClassNames('tree')\" *ngIf=\"data && data.rules\">\r\n <ng-container *ngFor=\"let rule of data.rules;let i=index\">\r\n\r\n <ng-container *ngIf=\"{ruleset: !!rule.rules, invalid: !config.allowEmptyRulesets && rule.rules && rule.rules.length === 0} as local\">\r\n <li [ngClass]=\"getQueryItemClassName(local)\">\r\n <ng-container *ngIf=\"!local.ruleset\">\r\n\r\n <ng-container *ngIf=\"getRemoveButtonTemplate() as template; else defaultRemoveButton\">\r\n <div [ngClass]=\"getClassNames('buttonGroup', 'rightAlign')\">\r\n <ng-container *ngTemplateOutlet=\"template; context: getRemoveButtonContext(rule)\"></ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #defaultRemoveButton>\r\n <div [ngClass]=\"getClassNames('removeButtonSize', 'rightAlign')\">\r\n <button type=\"button\" [ngClass]=\"getClassNames('button', 'removeButton')\" (click)=\"removeRule(rule, data)\" [disabled]=disabled>\r\n <i [ngClass]=\"getClassNames('removeIcon')\"></i>\r\n </button>\r\n </div>\r\n </ng-template>\r\n\r\n <div *ngIf=\"entities?.length > 0\" class=\"q-inline-block-display\">\r\n <ng-container *ngIf=\"getEntityTemplate() as template; else defaultEntity\">\r\n <ng-container *ngTemplateOutlet=\"template; context: getEntityContext(rule)\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-template #defaultEntity>\r\n <div [ngClass]=\"getClassNames('entityControlSize')\">\r\n <select [ngClass]=\"getClassNames('entityControl')\" [(ngModel)]=\"rule.entity\" (ngModelChange)=\"changeEntity($event, rule,i,data)\"\r\n [disabled]=\"disabled\">\r\n <option *ngFor=\"let entity of entities\" [ngValue]=\"entity.value\">\r\n {{entity.name}}\r\n </option>\r\n </select>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"getFieldTemplate() as template; else defaultField\">\r\n <ng-container *ngTemplateOutlet=\"template; context: getFieldContext(rule)\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-template #defaultField>\r\n <div [ngClass]=\"getClassNames('fieldControlSize')\">\r\n <select [ngClass]=\"getClassNames('fieldControl')\" [(ngModel)]=\"rule.field\" (ngModelChange)=\"changeField($event, rule)\"\r\n [disabled]=\"disabled\">\r\n <option *ngFor=\"let field of getFields(rule.entity)\" [ngValue]=\"field.value\">\r\n {{field.name}}\r\n </option>\r\n </select>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"getOperatorTemplate() as template; else defaultOperator\">\r\n <ng-container *ngTemplateOutlet=\"template; context: getOperatorContext(rule)\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-template #defaultOperator>\r\n <div [ngClass]=\"getClassNames('operatorControlSize')\">\r\n <select [ngClass]=\"getClassNames('operatorControl')\" [(ngModel)]=\"rule.operator\" (ngModelChange)=\"changeOperator(rule)\"\r\n [disabled]=\"disabled\">\r\n <option *ngFor=\"let operator of getOperators(rule.field)\" [ngValue]=\"operator\">\r\n {{operator}}\r\n </option>\r\n </select>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"findTemplateForRule(rule) as template; else defaultInput\">\r\n <ng-container *ngTemplateOutlet=\"template; context: getInputContext(rule)\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-template #defaultInput>\r\n <div [ngClass]=\"getClassNames('inputControlSize')\" [ngSwitch]=\"getInputType(rule.field, rule.operator)\">\r\n <input [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\r\n [disabled]=\"disabled\" *ngSwitchCase=\"'string'\" type=\"text\">\r\n <input [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\r\n [disabled]=\"disabled\" *ngSwitchCase=\"'number'\" type=\"number\">\r\n <input [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\r\n [disabled]=\"disabled\" *ngSwitchCase=\"'date'\" type=\"date\">\r\n <input [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\r\n [disabled]=\"disabled\" *ngSwitchCase=\"'time'\" type=\"time\">\r\n <select [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\r\n [disabled]=\"disabled\" *ngSwitchCase=\"'category'\">\r\n <option *ngFor=\"let opt of getOptions(rule.field)\" [ngValue]=\"opt.value\">\r\n {{opt.name}}\r\n </option>\r\n </select>\r\n <ng-container *ngSwitchCase=\"'multiselect'\">\r\n <select [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\r\n [disabled]=\"disabled\" multiple>\r\n <option *ngFor=\"let opt of getOptions(rule.field)\" [ngValue]=\"opt.value\">\r\n {{opt.name}}\r\n </option>\r\n </select>\r\n </ng-container>\r\n <input [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\r\n [disabled]=\"disabled\" *ngSwitchCase=\"'boolean'\" type=\"checkbox\">\r\n </div>\r\n </ng-template>\r\n\r\n </ng-container>\r\n <query-builder *ngIf=\"local.ruleset\" [data]=\"rule\" [disabled]=\"disabled\" [parentTouchedCallback]=\"parentTouchedCallback || onTouchedCallback\"\r\n [parentChangeCallback]=\"parentChangeCallback || onChangeCallback\" [parentInputTemplates]=\"parentInputTemplates || inputTemplates\"\r\n [parentOperatorTemplate]=\"parentOperatorTemplate || operatorTemplate\" [parentFieldTemplate]=\"parentFieldTemplate || fieldTemplate\"\r\n [parentEntityTemplate]=\"parentEntityTemplate || entityTemplate\" [parentSwitchGroupTemplate]=\"parentSwitchGroupTemplate || switchGroupTemplate\"\r\n [parentButtonGroupTemplate]=\"parentButtonGroupTemplate || buttonGroupTemplate\" [parentRemoveButtonTemplate]=\"parentRemoveButtonTemplate || removeButtonTemplate\"\r\n [parentEmptyWarningTemplate]=\"parentEmptyWarningTemplate || emptyWarningTemplate\" [parentArrowIconTemplate]=\"parentArrowIconTemplate || arrowIconTemplate\"\r\n [parentValue]=\"data\" [classNames]=\"classNames\" [config]=\"config\" [allowRuleset]=\"allowRuleset\"\r\n [allowCollapse]=\"allowCollapse\" [emptyMessage]=\"emptyMessage\" [operatorMap]=\"operatorMap\">\r\n </query-builder>\r\n\r\n <ng-container *ngIf=\"getEmptyWarningTemplate() as template; else defaultEmptyWarning\">\r\n <ng-container *ngIf=\"local.invalid\">\r\n <ng-container *ngTemplateOutlet=\"template; context: getEmptyWarningContext()\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #defaultEmptyWarning>\r\n <p [ngClass]=\"getClassNames('emptyWarning')\" *ngIf=\"local.invalid\">\r\n {{emptyMessage}}\r\n </p>\r\n </ng-template>\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host .q-icon{font-style:normal;font-size:12px}:host .q-remove-icon:before{content:\"\\274c\"}:host .q-arrow-icon-button{float:left;margin:4px 6px 4px 0;transform:rotate(90deg);transition:linear .25s transform;cursor:pointer}:host .q-arrow-icon-button.q-collapsed{transform:rotate(0)}:host .q-arrow-icon:before{content:\"\\25b6\"}:host .q-add-icon{color:#555}:host .q-add-icon:before{content:\"\\2795\"}:host .q-remove-button{color:#b3415d;width:31px}:host .q-switch-group,:host .q-button-group{font-family:Lucida Grande,Tahoma,Verdana,sans-serif;overflow:hidden}:host .q-right-align{float:right}:host .q-button{margin-left:8px;padding:0 8px;background-color:#fff}:host .q-button:disabled{display:none}:host .q-control-size{display:inline-block;vertical-align:top;padding-right:10px}:host .q-input-control,:host .q-operator-control,:host .q-field-control,:host .q-entity-control{display:inline-block;padding:5px 8px;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;width:auto}:host .q-input-control:disabled,:host .q-operator-control:disabled,:host .q-field-control:disabled,:host .q-entity-control:disabled{border-color:transparent}:host .q-operator-control,:host .q-field-control,:host .q-entity-control,:host .q-input-control:not([type=checkbox]){min-height:32px;-webkit-appearance:none}:host .q-switch-label,:host .q-button{float:left;margin-bottom:0;font-size:14px;line-height:30px;font-weight:400;text-align:center;text-shadow:none;border:1px solid rgba(0,0,0,.2);box-sizing:border-box}:host .q-switch-label:hover,:host .q-button:hover{cursor:pointer;background-color:#f0f0f0}:host .q-switch-label{background-color:#e4e4e4;padding:0 8px}:host .q-switch-radio{position:absolute;clip:rect(0,0,0,0);height:1px;width:1px;border:0;overflow:hidden}:host .q-switch-radio:checked+.q-switch-label{border:1px solid rgb(97,158,215);background:#fff;color:#3176b3}:host .q-switch-radio:disabled+.q-switch-label{display:none}:host .q-switch-radio:checked:disabled+.q-switch-label{display:initial;color:initial;cursor:default;border-color:transparent}:host .q-invalid-ruleset{border:1px solid rgba(179,65,93,.5)!important;background:#b3415d1a!important}:host .q-empty-warning{color:#8d252e;text-align:center}:host .q-ruleset{border:1px solid #CCC}:host .q-rule{border:1px solid #CCC;background:#fff}:host .q-transition{-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}:host .q-tree-container{width:100%;overflow:hidden;transition:ease-in .25s max-height}:host .q-tree-container.q-collapsed{max-height:0!important}:host .q-tree{list-style:none;margin:4px 0 2px}:host .q-row{padding:6px 8px;margin-top:6px}:host .q-connector{position:relative}:host .q-connector:before{top:-5px;border-width:0 0 2px 2px}:host .q-connector:after{border-width:0 0 0 2px;top:50%}:host .q-connector:before,:host .q-connector:after{content:\"\";left:-12px;border-color:#ccc;border-style:solid;width:9px;height:calc(50% + 6px);position:absolute}:host .q-connector:last-child:after{content:none}:host .q-inline-block-display{display:inline-block;vertical-align:top}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: QueryBuilderComponent, selector: "query-builder", inputs: ["disabled", "data", "allowRuleset", "allowCollapse", "emptyMessage", "classNames", "operatorMap", "parentValue", "config", "parentArrowIconTemplate", "parentInputTemplates", "parentOperatorTemplate", "parentFieldTemplate", "parentEntityTemplate", "parentSwitchGroupTemplate", "parentButtonGroupTemplate", "parentRemoveButtonTemplate", "parentEmptyWarningTemplate", "parentChangeCallback", "parentTouchedCallback", "persistValueOnFieldChange", "value"] }] });
|
|
838
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryBuilderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
839
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: QueryBuilderComponent, isStandalone: false, selector: "query-builder", inputs: { disabled: "disabled", data: "data", allowRuleset: "allowRuleset", allowCollapse: "allowCollapse", emptyMessage: "emptyMessage", classNames: "classNames", operatorMap: "operatorMap", parentValue: "parentValue", config: "config", parentArrowIconTemplate: "parentArrowIconTemplate", parentInputTemplates: "parentInputTemplates", parentOperatorTemplate: "parentOperatorTemplate", parentFieldTemplate: "parentFieldTemplate", parentEntityTemplate: "parentEntityTemplate", parentSwitchGroupTemplate: "parentSwitchGroupTemplate", parentButtonGroupTemplate: "parentButtonGroupTemplate", parentRemoveButtonTemplate: "parentRemoveButtonTemplate", parentEmptyWarningTemplate: "parentEmptyWarningTemplate", parentChangeCallback: "parentChangeCallback", parentTouchedCallback: "parentTouchedCallback", persistValueOnFieldChange: "persistValueOnFieldChange", value: "value" }, providers: [CONTROL_VALUE_ACCESSOR, VALIDATOR], queries: [{ propertyName: "buttonGroupTemplate", first: true, predicate: QueryButtonGroupDirective, descendants: true }, { propertyName: "switchGroupTemplate", first: true, predicate: QuerySwitchGroupDirective, descendants: true }, { propertyName: "fieldTemplate", first: true, predicate: QueryFieldDirective, descendants: true }, { propertyName: "entityTemplate", first: true, predicate: QueryEntityDirective, descendants: true }, { propertyName: "operatorTemplate", first: true, predicate: QueryOperatorDirective, descendants: true }, { propertyName: "removeButtonTemplate", first: true, predicate: QueryRemoveButtonDirective, descendants: true }, { propertyName: "emptyWarningTemplate", first: true, predicate: QueryEmptyWarningDirective, descendants: true }, { propertyName: "arrowIconTemplate", first: true, predicate: QueryArrowIconDirective, descendants: true }, { propertyName: "inputTemplates", predicate: QueryInputDirective }], viewQueries: [{ propertyName: "treeContainer", first: true, predicate: ["treeContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"getClassNames('switchRow')\">\n\n @if (allowCollapse) {\n <a (click)=\"toggleCollapse()\" [ngClass]=\"getClassNames('arrowIconButton', data.collapsed ? 'collapsed' : null)\">\n @if (getArrowIconTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: getArrowIconContext()\"></ng-container>\n } @else {\n <i [ngClass]=\"getClassNames('arrowIcon')\"></i>\n }\n </a>\n }\n\n @if (getButtonGroupTemplate(); as template) {\n <div [ngClass]=\"getClassNames('buttonGroup', 'rightAlign')\">\n <ng-container *ngTemplateOutlet=\"template; context: getButtonGroupContext()\"></ng-container>\n </div>\n } @else {\n <div [ngClass]=\"getClassNames('buttonGroup', 'rightAlign')\">\n <button type=\"button\" (click)=\"addRule()\" [ngClass]=\"getClassNames('button')\" [disabled]=disabled>\n <i [ngClass]=\"getClassNames('addIcon')\"></i> Rule\n </button>\n @if (allowRuleset) {\n <button type=\"button\" (click)=\"addRuleSet()\" [ngClass]=\"getClassNames('button')\" [disabled]=disabled>\n <i [ngClass]=\"getClassNames('addIcon')\"></i> Ruleset\n </button>\n }\n @if (!!parentValue && allowRuleset) {\n <button type=\"button\" (click)=\"removeRuleSet()\" [ngClass]=\"getClassNames('button', 'removeButton')\" [disabled]=disabled>\n <i [ngClass]=\"getClassNames('removeIcon')\"></i>\n </button>\n }\n </div>\n }\n\n\n @if (getSwitchGroupTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: getSwitchGroupContext()\"></ng-container>\n } @else {\n @if (data) {\n <div [ngClass]=\"getClassNames('switchGroup', 'transition')\">\n <div [ngClass]=\"getClassNames('switchControl')\">\n <input type=\"radio\" [ngClass]=\"getClassNames('switchRadio')\" [(ngModel)]=\"data.condition\" [disabled]=disabled\n value=\"and\" #andOption />\n <label (click)=\"changeCondition(andOption.value)\" [ngClass]=\"getClassNames('switchLabel')\">AND</label>\n </div>\n <div [ngClass]=\"getClassNames('switchControl')\">\n <input type=\"radio\" [ngClass]=\"getClassNames('switchRadio')\" [(ngModel)]=\"data.condition\" [disabled]=disabled\n value=\"or\" #orOption />\n <label (click)=\"changeCondition(orOption.value)\" [ngClass]=\"getClassNames('switchLabel')\">OR</label>\n </div>\n </div>\n }\n }\n\n </div>\n\n <div #treeContainer (transitionend)=\"transitionEnd($event)\" [ngClass]=\"getClassNames('treeContainer', data.collapsed ? 'collapsed' : null)\">\n @if (data && data.rules) {\n <ul [ngClass]=\"getClassNames('tree')\">\n @for (rule of data.rules; track rule; let i = $index) {\n @if ({ruleset: !!rule.rules, invalid: !config.allowEmptyRulesets && rule.rules && rule.rules.length === 0}; as local) {\n <li [ngClass]=\"getQueryItemClassName(local)\">\n @if (!local.ruleset) {\n @if (getRemoveButtonTemplate(); as template) {\n <div [ngClass]=\"getClassNames('buttonGroup', 'rightAlign')\">\n <ng-container *ngTemplateOutlet=\"template; context: getRemoveButtonContext(rule)\"></ng-container>\n </div>\n } @else {\n <div [ngClass]=\"getClassNames('removeButtonSize', 'rightAlign')\">\n <button type=\"button\" [ngClass]=\"getClassNames('button', 'removeButton')\" (click)=\"removeRule(rule, data)\" [disabled]=disabled>\n <i [ngClass]=\"getClassNames('removeIcon')\"></i>\n </button>\n </div>\n }\n @if (entities?.length > 0) {\n <div class=\"q-inline-block-display\">\n @if (getEntityTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: getEntityContext(rule)\"></ng-container>\n } @else {\n <div [ngClass]=\"getClassNames('entityControlSize')\">\n <select [ngClass]=\"getClassNames('entityControl')\" [(ngModel)]=\"rule.entity\" (ngModelChange)=\"changeEntity($event, rule,i,data)\"\n [disabled]=\"disabled\">\n @for (entity of entities; track entity) {\n <option [ngValue]=\"entity.value\">\n {{entity.name}}\n </option>\n }\n </select>\n </div>\n }\n </div>\n }\n @if (getFieldTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: getFieldContext(rule)\"></ng-container>\n } @else {\n <div [ngClass]=\"getClassNames('fieldControlSize')\">\n <select [ngClass]=\"getClassNames('fieldControl')\" [(ngModel)]=\"rule.field\" (ngModelChange)=\"changeField($event, rule)\"\n [disabled]=\"disabled\">\n @for (field of getFields(rule.entity); track field) {\n <option [ngValue]=\"field.value\">\n {{field.name}}\n </option>\n }\n </select>\n </div>\n }\n @if (getOperatorTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: getOperatorContext(rule)\"></ng-container>\n } @else {\n <div [ngClass]=\"getClassNames('operatorControlSize')\">\n <select [ngClass]=\"getClassNames('operatorControl')\" [(ngModel)]=\"rule.operator\" (ngModelChange)=\"changeOperator(rule)\"\n [disabled]=\"disabled\">\n @for (operator of getOperators(rule.field); track operator) {\n <option [ngValue]=\"operator\">\n {{operator}}\n </option>\n }\n </select>\n </div>\n }\n @if (findTemplateForRule(rule); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: getInputContext(rule)\"></ng-container>\n } @else {\n <div [ngClass]=\"getClassNames('inputControlSize')\">\n @switch (getInputType(rule.field, rule.operator)) {\n @case ('string') {\n <input [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\n [disabled]=\"disabled\" type=\"text\">\n }\n @case ('number') {\n <input [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\n [disabled]=\"disabled\" type=\"number\">\n }\n @case ('date') {\n <input [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\n [disabled]=\"disabled\" type=\"date\">\n }\n @case ('time') {\n <input [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\n [disabled]=\"disabled\" type=\"time\">\n }\n @case ('category') {\n <select [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\n [disabled]=\"disabled\">\n @for (opt of getOptions(rule.field); track opt) {\n <option [ngValue]=\"opt.value\">\n {{opt.name}}\n </option>\n }\n </select>\n }\n @case ('multiselect') {\n <select [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\n [disabled]=\"disabled\" multiple>\n @for (opt of getOptions(rule.field); track opt) {\n <option [ngValue]=\"opt.value\">\n {{opt.name}}\n </option>\n }\n </select>\n }\n @case ('boolean') {\n <input [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\n [disabled]=\"disabled\" type=\"checkbox\">\n }\n }\n </div>\n }\n }\n @if (local.ruleset) {\n <query-builder [data]=\"rule\" [disabled]=\"disabled\" [parentTouchedCallback]=\"parentTouchedCallback || onTouchedCallback\"\n [parentChangeCallback]=\"parentChangeCallback || onChangeCallback\" [parentInputTemplates]=\"parentInputTemplates || inputTemplates\"\n [parentOperatorTemplate]=\"parentOperatorTemplate || operatorTemplate\" [parentFieldTemplate]=\"parentFieldTemplate || fieldTemplate\"\n [parentEntityTemplate]=\"parentEntityTemplate || entityTemplate\" [parentSwitchGroupTemplate]=\"parentSwitchGroupTemplate || switchGroupTemplate\"\n [parentButtonGroupTemplate]=\"parentButtonGroupTemplate || buttonGroupTemplate\" [parentRemoveButtonTemplate]=\"parentRemoveButtonTemplate || removeButtonTemplate\"\n [parentEmptyWarningTemplate]=\"parentEmptyWarningTemplate || emptyWarningTemplate\" [parentArrowIconTemplate]=\"parentArrowIconTemplate || arrowIconTemplate\"\n [parentValue]=\"data\" [classNames]=\"classNames\" [config]=\"config\" [allowRuleset]=\"allowRuleset\"\n [allowCollapse]=\"allowCollapse\" [emptyMessage]=\"emptyMessage\" [operatorMap]=\"operatorMap\">\n </query-builder>\n }\n @if (getEmptyWarningTemplate(); as template) {\n @if (local.invalid) {\n <ng-container *ngTemplateOutlet=\"template; context: getEmptyWarningContext()\"></ng-container>\n }\n } @else {\n @if (local.invalid) {\n <p [ngClass]=\"getClassNames('emptyWarning')\">\n {{emptyMessage}}\n </p>\n }\n }\n </li>\n }\n }\n </ul>\n }\n </div>", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host .q-icon{font-style:normal;font-size:12px}:host .q-remove-icon:before{content:\"\\274c\"}:host .q-arrow-icon-button{float:left;margin:4px 6px 4px 0;transform:rotate(90deg);transition:linear .25s transform;cursor:pointer}:host .q-arrow-icon-button.q-collapsed{transform:rotate(0)}:host .q-arrow-icon:before{content:\"\\25b6\"}:host .q-add-icon{color:#555}:host .q-add-icon:before{content:\"\\2795\"}:host .q-remove-button{color:#b3415d;width:31px}:host .q-switch-group,:host .q-button-group{font-family:Lucida Grande,Tahoma,Verdana,sans-serif;overflow:hidden}:host .q-right-align{float:right}:host .q-button{margin-left:8px;padding:0 8px;background-color:#fff}:host .q-button:disabled{display:none}:host .q-control-size{display:inline-block;vertical-align:top;padding-right:10px}:host .q-input-control,:host .q-operator-control,:host .q-field-control,:host .q-entity-control{display:inline-block;padding:5px 8px;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;width:auto}:host .q-input-control:disabled,:host .q-operator-control:disabled,:host .q-field-control:disabled,:host .q-entity-control:disabled{border-color:transparent}:host .q-operator-control,:host .q-field-control,:host .q-entity-control,:host .q-input-control:not([type=checkbox]){min-height:32px;-webkit-appearance:none}:host .q-switch-label,:host .q-button{float:left;margin-bottom:0;font-size:14px;line-height:30px;font-weight:400;text-align:center;text-shadow:none;border:1px solid rgba(0,0,0,.2);box-sizing:border-box}:host .q-switch-label:hover,:host .q-button:hover{cursor:pointer;background-color:#f0f0f0}:host .q-switch-label{background-color:#e4e4e4;padding:0 8px}:host .q-switch-radio{position:absolute;clip:rect(0,0,0,0);height:1px;width:1px;border:0;overflow:hidden}:host .q-switch-radio:checked+.q-switch-label{border:1px solid rgb(97,158,215);background:#fff;color:#3176b3}:host .q-switch-radio:disabled+.q-switch-label{display:none}:host .q-switch-radio:checked:disabled+.q-switch-label{display:initial;color:initial;cursor:default;border-color:transparent}:host .q-invalid-ruleset{border:1px solid rgba(179,65,93,.5)!important;background:#b3415d1a!important}:host .q-empty-warning{color:#8d252e;text-align:center}:host .q-ruleset{border:1px solid #CCC}:host .q-rule{border:1px solid #CCC;background:#fff}:host .q-transition{-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}:host .q-tree-container{width:100%;overflow:hidden;transition:ease-in .25s max-height}:host .q-tree-container.q-collapsed{max-height:0!important}:host .q-tree{list-style:none;margin:4px 0 2px}:host .q-row{padding:6px 8px;margin-top:6px}:host .q-connector{position:relative}:host .q-connector:before{top:-5px;border-width:0 0 2px 2px}:host .q-connector:after{border-width:0 0 0 2px;top:50%}:host .q-connector:before,:host .q-connector:after{content:\"\";left:-12px;border-color:#ccc;border-style:solid;width:9px;height:calc(50% + 6px);position:absolute}:host .q-connector:last-child:after{content:none}:host .q-inline-block-display{display:inline-block;vertical-align:top}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: QueryBuilderComponent, selector: "query-builder", inputs: ["disabled", "data", "allowRuleset", "allowCollapse", "emptyMessage", "classNames", "operatorMap", "parentValue", "config", "parentArrowIconTemplate", "parentInputTemplates", "parentOperatorTemplate", "parentFieldTemplate", "parentEntityTemplate", "parentSwitchGroupTemplate", "parentButtonGroupTemplate", "parentRemoveButtonTemplate", "parentEmptyWarningTemplate", "parentChangeCallback", "parentTouchedCallback", "persistValueOnFieldChange", "value"] }] });
|
|
813
840
|
}
|
|
814
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
841
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryBuilderComponent, decorators: [{
|
|
815
842
|
type: Component,
|
|
816
|
-
args: [{ selector: 'query-builder', providers: [CONTROL_VALUE_ACCESSOR, VALIDATOR], template: "<div [ngClass]=\"getClassNames('switchRow')\">\r\n <ng-template #defaultArrowIcon>\r\n <i [ngClass]=\"getClassNames('arrowIcon')\"></i>\r\n </ng-template>\r\n\r\n <a *ngIf=\"allowCollapse\" (click)=\"toggleCollapse()\" [ngClass]=\"getClassNames('arrowIconButton', data.collapsed ? 'collapsed' : null)\">\r\n <ng-container *ngIf=\"getArrowIconTemplate() as template; else defaultArrowIcon\">\r\n <ng-container *ngTemplateOutlet=\"template; context: getArrowIconContext()\"></ng-container>\r\n </ng-container>\r\n </a>\r\n\r\n <ng-container *ngIf=\"getButtonGroupTemplate() as template; else defaultButtonGroup\">\r\n <div [ngClass]=\"getClassNames('buttonGroup', 'rightAlign')\">\r\n <ng-container *ngTemplateOutlet=\"template; context: getButtonGroupContext()\"></ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #defaultButtonGroup>\r\n <div [ngClass]=\"getClassNames('buttonGroup', 'rightAlign')\">\r\n <button type=\"button\" (click)=\"addRule()\" [ngClass]=\"getClassNames('button')\" [disabled]=disabled>\r\n <i [ngClass]=\"getClassNames('addIcon')\"></i> Rule\r\n </button>\r\n <button type=\"button\" (click)=\"addRuleSet()\" [ngClass]=\"getClassNames('button')\" *ngIf=\"allowRuleset\" [disabled]=disabled>\r\n <i [ngClass]=\"getClassNames('addIcon')\"></i> Ruleset\r\n </button>\r\n <ng-container *ngIf=\"!!parentValue && allowRuleset\">\r\n <button type=\"button\" (click)=\"removeRuleSet()\" [ngClass]=\"getClassNames('button', 'removeButton')\" [disabled]=disabled>\r\n <i [ngClass]=\"getClassNames('removeIcon')\"></i>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"getSwitchGroupTemplate() as template; else defaultSwitchGroup\">\r\n <ng-container *ngTemplateOutlet=\"template; context: getSwitchGroupContext()\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-template #defaultSwitchGroup>\r\n <div [ngClass]=\"getClassNames('switchGroup', 'transition')\" *ngIf=\"data\">\r\n <div [ngClass]=\"getClassNames('switchControl')\">\r\n <input type=\"radio\" [ngClass]=\"getClassNames('switchRadio')\" [(ngModel)]=\"data.condition\" [disabled]=disabled\r\n value=\"and\" #andOption />\r\n <label (click)=\"changeCondition(andOption.value)\" [ngClass]=\"getClassNames('switchLabel')\">AND</label>\r\n </div>\r\n <div [ngClass]=\"getClassNames('switchControl')\">\r\n <input type=\"radio\" [ngClass]=\"getClassNames('switchRadio')\" [(ngModel)]=\"data.condition\" [disabled]=disabled\r\n value=\"or\" #orOption />\r\n <label (click)=\"changeCondition(orOption.value)\" [ngClass]=\"getClassNames('switchLabel')\">OR</label>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</div>\r\n\r\n<div #treeContainer (transitionend)=\"transitionEnd($event)\" [ngClass]=\"getClassNames('treeContainer', data.collapsed ? 'collapsed' : null)\">\r\n <ul [ngClass]=\"getClassNames('tree')\" *ngIf=\"data && data.rules\">\r\n <ng-container *ngFor=\"let rule of data.rules;let i=index\">\r\n\r\n <ng-container *ngIf=\"{ruleset: !!rule.rules, invalid: !config.allowEmptyRulesets && rule.rules && rule.rules.length === 0} as local\">\r\n <li [ngClass]=\"getQueryItemClassName(local)\">\r\n <ng-container *ngIf=\"!local.ruleset\">\r\n\r\n <ng-container *ngIf=\"getRemoveButtonTemplate() as template; else defaultRemoveButton\">\r\n <div [ngClass]=\"getClassNames('buttonGroup', 'rightAlign')\">\r\n <ng-container *ngTemplateOutlet=\"template; context: getRemoveButtonContext(rule)\"></ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #defaultRemoveButton>\r\n <div [ngClass]=\"getClassNames('removeButtonSize', 'rightAlign')\">\r\n <button type=\"button\" [ngClass]=\"getClassNames('button', 'removeButton')\" (click)=\"removeRule(rule, data)\" [disabled]=disabled>\r\n <i [ngClass]=\"getClassNames('removeIcon')\"></i>\r\n </button>\r\n </div>\r\n </ng-template>\r\n\r\n <div *ngIf=\"entities?.length > 0\" class=\"q-inline-block-display\">\r\n <ng-container *ngIf=\"getEntityTemplate() as template; else defaultEntity\">\r\n <ng-container *ngTemplateOutlet=\"template; context: getEntityContext(rule)\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-template #defaultEntity>\r\n <div [ngClass]=\"getClassNames('entityControlSize')\">\r\n <select [ngClass]=\"getClassNames('entityControl')\" [(ngModel)]=\"rule.entity\" (ngModelChange)=\"changeEntity($event, rule,i,data)\"\r\n [disabled]=\"disabled\">\r\n <option *ngFor=\"let entity of entities\" [ngValue]=\"entity.value\">\r\n {{entity.name}}\r\n </option>\r\n </select>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"getFieldTemplate() as template; else defaultField\">\r\n <ng-container *ngTemplateOutlet=\"template; context: getFieldContext(rule)\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-template #defaultField>\r\n <div [ngClass]=\"getClassNames('fieldControlSize')\">\r\n <select [ngClass]=\"getClassNames('fieldControl')\" [(ngModel)]=\"rule.field\" (ngModelChange)=\"changeField($event, rule)\"\r\n [disabled]=\"disabled\">\r\n <option *ngFor=\"let field of getFields(rule.entity)\" [ngValue]=\"field.value\">\r\n {{field.name}}\r\n </option>\r\n </select>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"getOperatorTemplate() as template; else defaultOperator\">\r\n <ng-container *ngTemplateOutlet=\"template; context: getOperatorContext(rule)\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-template #defaultOperator>\r\n <div [ngClass]=\"getClassNames('operatorControlSize')\">\r\n <select [ngClass]=\"getClassNames('operatorControl')\" [(ngModel)]=\"rule.operator\" (ngModelChange)=\"changeOperator(rule)\"\r\n [disabled]=\"disabled\">\r\n <option *ngFor=\"let operator of getOperators(rule.field)\" [ngValue]=\"operator\">\r\n {{operator}}\r\n </option>\r\n </select>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"findTemplateForRule(rule) as template; else defaultInput\">\r\n <ng-container *ngTemplateOutlet=\"template; context: getInputContext(rule)\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-template #defaultInput>\r\n <div [ngClass]=\"getClassNames('inputControlSize')\" [ngSwitch]=\"getInputType(rule.field, rule.operator)\">\r\n <input [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\r\n [disabled]=\"disabled\" *ngSwitchCase=\"'string'\" type=\"text\">\r\n <input [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\r\n [disabled]=\"disabled\" *ngSwitchCase=\"'number'\" type=\"number\">\r\n <input [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\r\n [disabled]=\"disabled\" *ngSwitchCase=\"'date'\" type=\"date\">\r\n <input [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\r\n [disabled]=\"disabled\" *ngSwitchCase=\"'time'\" type=\"time\">\r\n <select [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\r\n [disabled]=\"disabled\" *ngSwitchCase=\"'category'\">\r\n <option *ngFor=\"let opt of getOptions(rule.field)\" [ngValue]=\"opt.value\">\r\n {{opt.name}}\r\n </option>\r\n </select>\r\n <ng-container *ngSwitchCase=\"'multiselect'\">\r\n <select [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\r\n [disabled]=\"disabled\" multiple>\r\n <option *ngFor=\"let opt of getOptions(rule.field)\" [ngValue]=\"opt.value\">\r\n {{opt.name}}\r\n </option>\r\n </select>\r\n </ng-container>\r\n <input [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\r\n [disabled]=\"disabled\" *ngSwitchCase=\"'boolean'\" type=\"checkbox\">\r\n </div>\r\n </ng-template>\r\n\r\n </ng-container>\r\n <query-builder *ngIf=\"local.ruleset\" [data]=\"rule\" [disabled]=\"disabled\" [parentTouchedCallback]=\"parentTouchedCallback || onTouchedCallback\"\r\n [parentChangeCallback]=\"parentChangeCallback || onChangeCallback\" [parentInputTemplates]=\"parentInputTemplates || inputTemplates\"\r\n [parentOperatorTemplate]=\"parentOperatorTemplate || operatorTemplate\" [parentFieldTemplate]=\"parentFieldTemplate || fieldTemplate\"\r\n [parentEntityTemplate]=\"parentEntityTemplate || entityTemplate\" [parentSwitchGroupTemplate]=\"parentSwitchGroupTemplate || switchGroupTemplate\"\r\n [parentButtonGroupTemplate]=\"parentButtonGroupTemplate || buttonGroupTemplate\" [parentRemoveButtonTemplate]=\"parentRemoveButtonTemplate || removeButtonTemplate\"\r\n [parentEmptyWarningTemplate]=\"parentEmptyWarningTemplate || emptyWarningTemplate\" [parentArrowIconTemplate]=\"parentArrowIconTemplate || arrowIconTemplate\"\r\n [parentValue]=\"data\" [classNames]=\"classNames\" [config]=\"config\" [allowRuleset]=\"allowRuleset\"\r\n [allowCollapse]=\"allowCollapse\" [emptyMessage]=\"emptyMessage\" [operatorMap]=\"operatorMap\">\r\n </query-builder>\r\n\r\n <ng-container *ngIf=\"getEmptyWarningTemplate() as template; else defaultEmptyWarning\">\r\n <ng-container *ngIf=\"local.invalid\">\r\n <ng-container *ngTemplateOutlet=\"template; context: getEmptyWarningContext()\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #defaultEmptyWarning>\r\n <p [ngClass]=\"getClassNames('emptyWarning')\" *ngIf=\"local.invalid\">\r\n {{emptyMessage}}\r\n </p>\r\n </ng-template>\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n</div>", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host .q-icon{font-style:normal;font-size:12px}:host .q-remove-icon:before{content:\"\\274c\"}:host .q-arrow-icon-button{float:left;margin:4px 6px 4px 0;transform:rotate(90deg);transition:linear .25s transform;cursor:pointer}:host .q-arrow-icon-button.q-collapsed{transform:rotate(0)}:host .q-arrow-icon:before{content:\"\\25b6\"}:host .q-add-icon{color:#555}:host .q-add-icon:before{content:\"\\2795\"}:host .q-remove-button{color:#b3415d;width:31px}:host .q-switch-group,:host .q-button-group{font-family:Lucida Grande,Tahoma,Verdana,sans-serif;overflow:hidden}:host .q-right-align{float:right}:host .q-button{margin-left:8px;padding:0 8px;background-color:#fff}:host .q-button:disabled{display:none}:host .q-control-size{display:inline-block;vertical-align:top;padding-right:10px}:host .q-input-control,:host .q-operator-control,:host .q-field-control,:host .q-entity-control{display:inline-block;padding:5px 8px;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;width:auto}:host .q-input-control:disabled,:host .q-operator-control:disabled,:host .q-field-control:disabled,:host .q-entity-control:disabled{border-color:transparent}:host .q-operator-control,:host .q-field-control,:host .q-entity-control,:host .q-input-control:not([type=checkbox]){min-height:32px;-webkit-appearance:none}:host .q-switch-label,:host .q-button{float:left;margin-bottom:0;font-size:14px;line-height:30px;font-weight:400;text-align:center;text-shadow:none;border:1px solid rgba(0,0,0,.2);box-sizing:border-box}:host .q-switch-label:hover,:host .q-button:hover{cursor:pointer;background-color:#f0f0f0}:host .q-switch-label{background-color:#e4e4e4;padding:0 8px}:host .q-switch-radio{position:absolute;clip:rect(0,0,0,0);height:1px;width:1px;border:0;overflow:hidden}:host .q-switch-radio:checked+.q-switch-label{border:1px solid rgb(97,158,215);background:#fff;color:#3176b3}:host .q-switch-radio:disabled+.q-switch-label{display:none}:host .q-switch-radio:checked:disabled+.q-switch-label{display:initial;color:initial;cursor:default;border-color:transparent}:host .q-invalid-ruleset{border:1px solid rgba(179,65,93,.5)!important;background:#b3415d1a!important}:host .q-empty-warning{color:#8d252e;text-align:center}:host .q-ruleset{border:1px solid #CCC}:host .q-rule{border:1px solid #CCC;background:#fff}:host .q-transition{-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}:host .q-tree-container{width:100%;overflow:hidden;transition:ease-in .25s max-height}:host .q-tree-container.q-collapsed{max-height:0!important}:host .q-tree{list-style:none;margin:4px 0 2px}:host .q-row{padding:6px 8px;margin-top:6px}:host .q-connector{position:relative}:host .q-connector:before{top:-5px;border-width:0 0 2px 2px}:host .q-connector:after{border-width:0 0 0 2px;top:50%}:host .q-connector:before,:host .q-connector:after{content:\"\";left:-12px;border-color:#ccc;border-style:solid;width:9px;height:calc(50% + 6px);position:absolute}:host .q-connector:last-child:after{content:none}:host .q-inline-block-display{display:inline-block;vertical-align:top}\n"] }]
|
|
843
|
+
args: [{ selector: 'query-builder', providers: [CONTROL_VALUE_ACCESSOR, VALIDATOR], standalone: false, template: "<div [ngClass]=\"getClassNames('switchRow')\">\n\n @if (allowCollapse) {\n <a (click)=\"toggleCollapse()\" [ngClass]=\"getClassNames('arrowIconButton', data.collapsed ? 'collapsed' : null)\">\n @if (getArrowIconTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: getArrowIconContext()\"></ng-container>\n } @else {\n <i [ngClass]=\"getClassNames('arrowIcon')\"></i>\n }\n </a>\n }\n\n @if (getButtonGroupTemplate(); as template) {\n <div [ngClass]=\"getClassNames('buttonGroup', 'rightAlign')\">\n <ng-container *ngTemplateOutlet=\"template; context: getButtonGroupContext()\"></ng-container>\n </div>\n } @else {\n <div [ngClass]=\"getClassNames('buttonGroup', 'rightAlign')\">\n <button type=\"button\" (click)=\"addRule()\" [ngClass]=\"getClassNames('button')\" [disabled]=disabled>\n <i [ngClass]=\"getClassNames('addIcon')\"></i> Rule\n </button>\n @if (allowRuleset) {\n <button type=\"button\" (click)=\"addRuleSet()\" [ngClass]=\"getClassNames('button')\" [disabled]=disabled>\n <i [ngClass]=\"getClassNames('addIcon')\"></i> Ruleset\n </button>\n }\n @if (!!parentValue && allowRuleset) {\n <button type=\"button\" (click)=\"removeRuleSet()\" [ngClass]=\"getClassNames('button', 'removeButton')\" [disabled]=disabled>\n <i [ngClass]=\"getClassNames('removeIcon')\"></i>\n </button>\n }\n </div>\n }\n\n\n @if (getSwitchGroupTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: getSwitchGroupContext()\"></ng-container>\n } @else {\n @if (data) {\n <div [ngClass]=\"getClassNames('switchGroup', 'transition')\">\n <div [ngClass]=\"getClassNames('switchControl')\">\n <input type=\"radio\" [ngClass]=\"getClassNames('switchRadio')\" [(ngModel)]=\"data.condition\" [disabled]=disabled\n value=\"and\" #andOption />\n <label (click)=\"changeCondition(andOption.value)\" [ngClass]=\"getClassNames('switchLabel')\">AND</label>\n </div>\n <div [ngClass]=\"getClassNames('switchControl')\">\n <input type=\"radio\" [ngClass]=\"getClassNames('switchRadio')\" [(ngModel)]=\"data.condition\" [disabled]=disabled\n value=\"or\" #orOption />\n <label (click)=\"changeCondition(orOption.value)\" [ngClass]=\"getClassNames('switchLabel')\">OR</label>\n </div>\n </div>\n }\n }\n\n </div>\n\n <div #treeContainer (transitionend)=\"transitionEnd($event)\" [ngClass]=\"getClassNames('treeContainer', data.collapsed ? 'collapsed' : null)\">\n @if (data && data.rules) {\n <ul [ngClass]=\"getClassNames('tree')\">\n @for (rule of data.rules; track rule; let i = $index) {\n @if ({ruleset: !!rule.rules, invalid: !config.allowEmptyRulesets && rule.rules && rule.rules.length === 0}; as local) {\n <li [ngClass]=\"getQueryItemClassName(local)\">\n @if (!local.ruleset) {\n @if (getRemoveButtonTemplate(); as template) {\n <div [ngClass]=\"getClassNames('buttonGroup', 'rightAlign')\">\n <ng-container *ngTemplateOutlet=\"template; context: getRemoveButtonContext(rule)\"></ng-container>\n </div>\n } @else {\n <div [ngClass]=\"getClassNames('removeButtonSize', 'rightAlign')\">\n <button type=\"button\" [ngClass]=\"getClassNames('button', 'removeButton')\" (click)=\"removeRule(rule, data)\" [disabled]=disabled>\n <i [ngClass]=\"getClassNames('removeIcon')\"></i>\n </button>\n </div>\n }\n @if (entities?.length > 0) {\n <div class=\"q-inline-block-display\">\n @if (getEntityTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: getEntityContext(rule)\"></ng-container>\n } @else {\n <div [ngClass]=\"getClassNames('entityControlSize')\">\n <select [ngClass]=\"getClassNames('entityControl')\" [(ngModel)]=\"rule.entity\" (ngModelChange)=\"changeEntity($event, rule,i,data)\"\n [disabled]=\"disabled\">\n @for (entity of entities; track entity) {\n <option [ngValue]=\"entity.value\">\n {{entity.name}}\n </option>\n }\n </select>\n </div>\n }\n </div>\n }\n @if (getFieldTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: getFieldContext(rule)\"></ng-container>\n } @else {\n <div [ngClass]=\"getClassNames('fieldControlSize')\">\n <select [ngClass]=\"getClassNames('fieldControl')\" [(ngModel)]=\"rule.field\" (ngModelChange)=\"changeField($event, rule)\"\n [disabled]=\"disabled\">\n @for (field of getFields(rule.entity); track field) {\n <option [ngValue]=\"field.value\">\n {{field.name}}\n </option>\n }\n </select>\n </div>\n }\n @if (getOperatorTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: getOperatorContext(rule)\"></ng-container>\n } @else {\n <div [ngClass]=\"getClassNames('operatorControlSize')\">\n <select [ngClass]=\"getClassNames('operatorControl')\" [(ngModel)]=\"rule.operator\" (ngModelChange)=\"changeOperator(rule)\"\n [disabled]=\"disabled\">\n @for (operator of getOperators(rule.field); track operator) {\n <option [ngValue]=\"operator\">\n {{operator}}\n </option>\n }\n </select>\n </div>\n }\n @if (findTemplateForRule(rule); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: getInputContext(rule)\"></ng-container>\n } @else {\n <div [ngClass]=\"getClassNames('inputControlSize')\">\n @switch (getInputType(rule.field, rule.operator)) {\n @case ('string') {\n <input [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\n [disabled]=\"disabled\" type=\"text\">\n }\n @case ('number') {\n <input [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\n [disabled]=\"disabled\" type=\"number\">\n }\n @case ('date') {\n <input [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\n [disabled]=\"disabled\" type=\"date\">\n }\n @case ('time') {\n <input [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\n [disabled]=\"disabled\" type=\"time\">\n }\n @case ('category') {\n <select [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\n [disabled]=\"disabled\">\n @for (opt of getOptions(rule.field); track opt) {\n <option [ngValue]=\"opt.value\">\n {{opt.name}}\n </option>\n }\n </select>\n }\n @case ('multiselect') {\n <select [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\n [disabled]=\"disabled\" multiple>\n @for (opt of getOptions(rule.field); track opt) {\n <option [ngValue]=\"opt.value\">\n {{opt.name}}\n </option>\n }\n </select>\n }\n @case ('boolean') {\n <input [ngClass]=\"getClassNames('inputControl')\" [(ngModel)]=\"rule.value\" (ngModelChange)=\"changeInput()\"\n [disabled]=\"disabled\" type=\"checkbox\">\n }\n }\n </div>\n }\n }\n @if (local.ruleset) {\n <query-builder [data]=\"rule\" [disabled]=\"disabled\" [parentTouchedCallback]=\"parentTouchedCallback || onTouchedCallback\"\n [parentChangeCallback]=\"parentChangeCallback || onChangeCallback\" [parentInputTemplates]=\"parentInputTemplates || inputTemplates\"\n [parentOperatorTemplate]=\"parentOperatorTemplate || operatorTemplate\" [parentFieldTemplate]=\"parentFieldTemplate || fieldTemplate\"\n [parentEntityTemplate]=\"parentEntityTemplate || entityTemplate\" [parentSwitchGroupTemplate]=\"parentSwitchGroupTemplate || switchGroupTemplate\"\n [parentButtonGroupTemplate]=\"parentButtonGroupTemplate || buttonGroupTemplate\" [parentRemoveButtonTemplate]=\"parentRemoveButtonTemplate || removeButtonTemplate\"\n [parentEmptyWarningTemplate]=\"parentEmptyWarningTemplate || emptyWarningTemplate\" [parentArrowIconTemplate]=\"parentArrowIconTemplate || arrowIconTemplate\"\n [parentValue]=\"data\" [classNames]=\"classNames\" [config]=\"config\" [allowRuleset]=\"allowRuleset\"\n [allowCollapse]=\"allowCollapse\" [emptyMessage]=\"emptyMessage\" [operatorMap]=\"operatorMap\">\n </query-builder>\n }\n @if (getEmptyWarningTemplate(); as template) {\n @if (local.invalid) {\n <ng-container *ngTemplateOutlet=\"template; context: getEmptyWarningContext()\"></ng-container>\n }\n } @else {\n @if (local.invalid) {\n <p [ngClass]=\"getClassNames('emptyWarning')\">\n {{emptyMessage}}\n </p>\n }\n }\n </li>\n }\n }\n </ul>\n }\n </div>", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host .q-icon{font-style:normal;font-size:12px}:host .q-remove-icon:before{content:\"\\274c\"}:host .q-arrow-icon-button{float:left;margin:4px 6px 4px 0;transform:rotate(90deg);transition:linear .25s transform;cursor:pointer}:host .q-arrow-icon-button.q-collapsed{transform:rotate(0)}:host .q-arrow-icon:before{content:\"\\25b6\"}:host .q-add-icon{color:#555}:host .q-add-icon:before{content:\"\\2795\"}:host .q-remove-button{color:#b3415d;width:31px}:host .q-switch-group,:host .q-button-group{font-family:Lucida Grande,Tahoma,Verdana,sans-serif;overflow:hidden}:host .q-right-align{float:right}:host .q-button{margin-left:8px;padding:0 8px;background-color:#fff}:host .q-button:disabled{display:none}:host .q-control-size{display:inline-block;vertical-align:top;padding-right:10px}:host .q-input-control,:host .q-operator-control,:host .q-field-control,:host .q-entity-control{display:inline-block;padding:5px 8px;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;width:auto}:host .q-input-control:disabled,:host .q-operator-control:disabled,:host .q-field-control:disabled,:host .q-entity-control:disabled{border-color:transparent}:host .q-operator-control,:host .q-field-control,:host .q-entity-control,:host .q-input-control:not([type=checkbox]){min-height:32px;-webkit-appearance:none}:host .q-switch-label,:host .q-button{float:left;margin-bottom:0;font-size:14px;line-height:30px;font-weight:400;text-align:center;text-shadow:none;border:1px solid rgba(0,0,0,.2);box-sizing:border-box}:host .q-switch-label:hover,:host .q-button:hover{cursor:pointer;background-color:#f0f0f0}:host .q-switch-label{background-color:#e4e4e4;padding:0 8px}:host .q-switch-radio{position:absolute;clip:rect(0,0,0,0);height:1px;width:1px;border:0;overflow:hidden}:host .q-switch-radio:checked+.q-switch-label{border:1px solid rgb(97,158,215);background:#fff;color:#3176b3}:host .q-switch-radio:disabled+.q-switch-label{display:none}:host .q-switch-radio:checked:disabled+.q-switch-label{display:initial;color:initial;cursor:default;border-color:transparent}:host .q-invalid-ruleset{border:1px solid rgba(179,65,93,.5)!important;background:#b3415d1a!important}:host .q-empty-warning{color:#8d252e;text-align:center}:host .q-ruleset{border:1px solid #CCC}:host .q-rule{border:1px solid #CCC;background:#fff}:host .q-transition{-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}:host .q-tree-container{width:100%;overflow:hidden;transition:ease-in .25s max-height}:host .q-tree-container.q-collapsed{max-height:0!important}:host .q-tree{list-style:none;margin:4px 0 2px}:host .q-row{padding:6px 8px;margin-top:6px}:host .q-connector{position:relative}:host .q-connector:before{top:-5px;border-width:0 0 2px 2px}:host .q-connector:after{border-width:0 0 0 2px;top:50%}:host .q-connector:before,:host .q-connector:after{content:\"\";left:-12px;border-color:#ccc;border-style:solid;width:9px;height:calc(50% + 6px);position:absolute}:host .q-connector:last-child:after{content:none}:host .q-inline-block-display{display:inline-block;vertical-align:top}\n"] }]
|
|
817
844
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
|
|
818
845
|
type: Input
|
|
819
846
|
}], data: [{
|
|
@@ -891,8 +918,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
|
|
|
891
918
|
}] } });
|
|
892
919
|
|
|
893
920
|
class QueryBuilderModule {
|
|
894
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
895
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
921
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
922
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: QueryBuilderModule, declarations: [QueryBuilderComponent,
|
|
896
923
|
QueryInputDirective,
|
|
897
924
|
QueryOperatorDirective,
|
|
898
925
|
QueryFieldDirective,
|
|
@@ -912,10 +939,10 @@ class QueryBuilderModule {
|
|
|
912
939
|
QueryRemoveButtonDirective,
|
|
913
940
|
QueryEmptyWarningDirective,
|
|
914
941
|
QueryArrowIconDirective] });
|
|
915
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
942
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryBuilderModule, imports: [CommonModule,
|
|
916
943
|
FormsModule] });
|
|
917
944
|
}
|
|
918
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
945
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: QueryBuilderModule, decorators: [{
|
|
919
946
|
type: NgModule,
|
|
920
947
|
args: [{
|
|
921
948
|
imports: [
|