@super-green/query-builder 0.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +340 -0
  3. package/dist/query-builder/README.md +24 -0
  4. package/dist/query-builder/esm2022/lib/query-builder/query-arrow-icon.directive.mjs +15 -0
  5. package/dist/query-builder/esm2022/lib/query-builder/query-builder.component.mjs +769 -0
  6. package/dist/query-builder/esm2022/lib/query-builder/query-builder.interfaces.mjs +2 -0
  7. package/dist/query-builder/esm2022/lib/query-builder/query-button-group.directive.mjs +15 -0
  8. package/dist/query-builder/esm2022/lib/query-builder/query-empty-warning.directive.mjs +15 -0
  9. package/dist/query-builder/esm2022/lib/query-builder/query-entity.directive.mjs +15 -0
  10. package/dist/query-builder/esm2022/lib/query-builder/query-field.directive.mjs +15 -0
  11. package/dist/query-builder/esm2022/lib/query-builder/query-input.directive.mjs +28 -0
  12. package/dist/query-builder/esm2022/lib/query-builder/query-operator.directive.mjs +15 -0
  13. package/dist/query-builder/esm2022/lib/query-builder/query-remove-button.directive.mjs +15 -0
  14. package/dist/query-builder/esm2022/lib/query-builder/query-switch-group.directive.mjs +15 -0
  15. package/dist/query-builder/esm2022/lib/query-builder.module.mjs +73 -0
  16. package/dist/query-builder/esm2022/public-api.mjs +16 -0
  17. package/dist/query-builder/esm2022/query-builder.mjs +5 -0
  18. package/dist/query-builder/fesm2022/query-builder.mjs +961 -0
  19. package/dist/query-builder/fesm2022/query-builder.mjs.map +1 -0
  20. package/dist/query-builder/index.d.ts +5 -0
  21. package/dist/query-builder/lib/query-builder/query-arrow-icon.directive.d.ts +8 -0
  22. package/dist/query-builder/lib/query-builder/query-builder.component.d.ts +129 -0
  23. package/dist/query-builder/lib/query-builder/query-builder.interfaces.d.ts +143 -0
  24. package/dist/query-builder/lib/query-builder/query-button-group.directive.d.ts +8 -0
  25. package/dist/query-builder/lib/query-builder/query-empty-warning.directive.d.ts +8 -0
  26. package/dist/query-builder/lib/query-builder/query-entity.directive.d.ts +8 -0
  27. package/dist/query-builder/lib/query-builder/query-field.directive.d.ts +8 -0
  28. package/dist/query-builder/lib/query-builder/query-input.directive.d.ts +12 -0
  29. package/dist/query-builder/lib/query-builder/query-operator.directive.d.ts +8 -0
  30. package/dist/query-builder/lib/query-builder/query-remove-button.directive.d.ts +8 -0
  31. package/dist/query-builder/lib/query-builder/query-switch-group.directive.d.ts +8 -0
  32. package/dist/query-builder/lib/query-builder.module.d.ts +18 -0
  33. package/dist/query-builder/public-api.d.ts +12 -0
  34. package/package.json +56 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2018 Zeb Zhao
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,340 @@
1
+ # @super-green/query-builder
2
+
3
+ ## Info
4
+
5
+ Lightweight query-builder for Angular 18.
6
+ This project's code should be credited to [zebzhao](https://github.com/zebzhao) and is based on [angular2-query-builder](https://www.npmjs.com/package/angular2-query-builder).
7
+ Main changes done by me is copying it to the new Angular 18 project and making it build and work. For convenience (because I'm lazy and didn't want to struggle with updating it aswell) I removed demo files.
8
+
9
+ ## Build
10
+
11
+ Run `ng build query-builder --configuration production` to build the project. The build artifacts will be stored in the `dist/` directory.
12
+
13
+ ## Publish to npm
14
+
15
+ Run `npm publish --access public`
16
+
17
+ ## Usage
18
+
19
+ Basic usage didn't change, i.e. everything should work as previously.
20
+
21
+ # FROM THE ORIGINAL README
22
+
23
+ # Angular-QueryBuilder
24
+ A modernized Angular 4+ query builder based on jQuery QueryBuilder. Support for heavy customization with Angular components and provides a flexible way to handle custom data types.
25
+
26
+ # Getting Started
27
+
28
+ ## Install
29
+
30
+ - Angular 9, use 0.6.0
31
+ - Angular 8, use 0.5.1
32
+ - Angular 6-7, use 0.4.2
33
+ - Angular 4-5, use 0.3.2
34
+
35
+ `npm install angular2-query-builder`
36
+
37
+ ## Demo
38
+ Play with the [Demo here](https://zebzhao.github.io/Angular-QueryBuilder/demo/).
39
+
40
+ [Editable Demo](https://zebzhao.github.io/Angular-QueryBuilder/editor/)
41
+
42
+ ## Documentation
43
+
44
+ [Documentation link](https://zebzhao.github.io/Angular-QueryBuilder/)
45
+
46
+ # Examples
47
+
48
+ ## Basic Usage
49
+
50
+ ##### `app.module.ts`
51
+ ```javascript
52
+ import { QueryBuilderModule } from "angular2-query-builder";
53
+ import { AppComponent } from "./app.component"
54
+
55
+ @NgModule(imports: [
56
+ ...,
57
+ QueryBuilderModule,
58
+ IonicModule.forRoot(AppComponent) // (Optional) for IonicFramework 2+
59
+ ])
60
+ export class AppModule { }
61
+ ```
62
+
63
+ ##### `app.component.html`
64
+ ```html
65
+ ...
66
+ <query-builder [(ngModel)]='query' [config]='config'></query-builder>
67
+ ...
68
+ ```
69
+ ##### `app.component.ts`
70
+ ```javascript
71
+ import { QueryBuilderConfig } from 'angular2-query-builder';
72
+
73
+ export class AppComponent {
74
+ query = {
75
+ condition: 'and',
76
+ rules: [
77
+ {field: 'age', operator: '<=', value: 'Bob'},
78
+ {field: 'gender', operator: '>=', value: 'm'}
79
+ ]
80
+ };
81
+
82
+ config: QueryBuilderConfig = {
83
+ fields: {
84
+ age: {name: 'Age', type: 'number'},
85
+ gender: {
86
+ name: 'Gender',
87
+ type: 'category',
88
+ options: [
89
+ {name: 'Male', value: 'm'},
90
+ {name: 'Female', value: 'f'}
91
+ ]
92
+ }
93
+ }
94
+ }
95
+ }
96
+ ```
97
+
98
+ ## Custom Input Components
99
+
100
+ ##### `app.component.html`
101
+ ```html
102
+ <query-builder [(ngModel)]='query' [config]='config'>
103
+ <ng-container *queryInput="let rule; type: 'date'">
104
+ <custom-datepicker [(ngModel)]="rule.value"></custom-datepicker>
105
+ </ng-container>
106
+ </query-builder>
107
+ ```
108
+
109
+ ##### `app.component.ts`
110
+ ```javascript
111
+ query = {
112
+ condition: 'and',
113
+ rules: [
114
+ {field: 'birthday', operator: '=', value: new Date()}
115
+ ]
116
+ };
117
+
118
+ config: QueryBuilderConfig = {
119
+ fields: {
120
+ birthday: {name: 'Birthday', type: 'date', operators: ['=', '<=', '>']
121
+ defaultValue: (() => return new Date())
122
+ },
123
+ }
124
+ }
125
+ ```
126
+
127
+ ## Custom Styling (with Bootstrap 4)
128
+
129
+ [Bootstrap demo](https://zebzhao.github.io/Angular-QueryBuilder/demo/).
130
+
131
+ ##### `app.component.html`
132
+ ```html
133
+ <query-builder [(ngModel)]='query' [config]='config' [classNames]='classNames'></query-builder>
134
+ ```
135
+ ##### `app.component.ts`
136
+ ```javascript
137
+ classNames: QueryBuilderClassNames = {
138
+ removeIcon: 'fa fa-minus',
139
+ addIcon: 'fa fa-plus',
140
+ arrowIcon: 'fa fa-chevron-right px-2',
141
+ button: 'btn',
142
+ buttonGroup: 'btn-group',
143
+ rightAlign: 'order-12 ml-auto',
144
+ switchRow: 'd-flex px-2',
145
+ switchGroup: 'd-flex align-items-center',
146
+ switchRadio: 'custom-control-input',
147
+ switchLabel: 'custom-control-label',
148
+ switchControl: 'custom-control custom-radio custom-control-inline',
149
+ row: 'row p-2 m-1',
150
+ rule: 'border',
151
+ ruleSet: 'border',
152
+ invalidRuleSet: 'alert alert-danger',
153
+ emptyWarning: 'text-danger mx-auto',
154
+ operatorControl: 'form-control',
155
+ operatorControlSize: 'col-auto pr-0',
156
+ fieldControl: 'form-control',
157
+ fieldControlSize: 'col-auto pr-0',
158
+ entityControl: 'form-control',
159
+ entityControlSize: 'col-auto pr-0',
160
+ inputControl: 'form-control',
161
+ inputControlSize: 'col-auto'
162
+ }
163
+ ```
164
+
165
+ ## Customizing with Angular Material
166
+
167
+ Example of how you can completely customize the query component with another library like Angular Material. For the full example, please look at the [source code](https://github.com/zebzhao/Angular-QueryBuilder/blob/master/demo/src/app/app.component.ts) provided in the demo.
168
+
169
+ #### `app.component.html`
170
+
171
+ ```html
172
+ <query-builder [(ngModel)]='query' [config]='config'>
173
+ <ng-container *queryButtonGroup="let ruleset; let addRule=addRule; let addRuleSet=addRuleSet; let removeRuleSet=removeRuleSet">
174
+ <button type="button" mat-button (click)="addRule()">+ Rule</button>
175
+ <button type="button" mat-button (click)="addRuleSet()">+ Ruleset</button>
176
+ <button type="button" mat-button (click)="removeRuleSet()">- Ruleset</button>
177
+ </ng-container>
178
+ <ng-container *queryRemoveButton="let rule; let removeRule=removeRule">
179
+ <button type="button" mat-icon-button color="accent" (click)="removeRule(rule)">
180
+ <mat-icon>remove</mat-icon>
181
+ </button>
182
+ </ng-container>
183
+ <ng-container *querySwitchGroup="let ruleset">
184
+ <mat-radio-group *ngIf="ruleset" [(ngModel)]="ruleset.condition">
185
+ <mat-radio-button value="and">And</mat-radio-button>
186
+ <mat-radio-button value="or">Or</mat-radio-button>
187
+ </mat-radio-group>
188
+ </ng-container>
189
+ <ng-container *queryField="let rule; let fields=fields; let onChange=onChange">
190
+ <mat-form-field>
191
+ <mat-select [(ngModel)]="rule.field" (ngModelChange)="onChange($event, rule)">
192
+ <mat-option *ngFor="let field of fields" [value]="field.value">{{field.name}}</mat-option>
193
+ </mat-select>
194
+ </mat-form-field>
195
+ </ng-container>
196
+ <ng-container *queryOperator="let rule; let operators=operators">
197
+ <mat-form-field>
198
+ <mat-select [(ngModel)]="rule.operator">
199
+ <mat-option *ngFor="let value of operators" [value]="value">{{value}}</mat-option>
200
+ </mat-select>
201
+ </mat-form-field>
202
+ </ng-container>
203
+ <!-- Override input component for 'boolean' type -->
204
+ <ng-container *queryInput="let rule; type: 'boolean'">
205
+ <mat-checkbox [(ngModel)]="rule.value"></mat-checkbox>
206
+ </ng-container>
207
+ <!-- Override input component for 'category' type -->
208
+ <ng-container *queryInput="let rule; let field=field; let options=options; type: 'category'">
209
+ <mat-form-field>
210
+ <mat-select [(ngModel)]="rule.value" [placeholder]="field.name">
211
+ <mat-option *ngFor="let opt of options" [value]="opt.value">
212
+ {{ opt.name }}
213
+ </mat-option>
214
+ </mat-select>
215
+ </mat-form-field>
216
+ </ng-container>
217
+ ...
218
+ </query-builder>
219
+ ```
220
+
221
+ ## Property Bindings Quick Reference
222
+
223
+ See [documentation](https://zebzhao.github.io/Angular-QueryBuilder/) for more details on interfaces and properties.
224
+
225
+ #### `query-builder`
226
+ |Name|Type|Required|Default|Description|
227
+ |:--- |:--- |:--- |:--- |:--- |
228
+ |`allowRuleset`|`boolean`|Optional|`true`| Displays the `+ Ruleset` button if `true`. |
229
+ |`allowCollapse`|`boolean`|Optional|`false`| Enables collapsible rule sets if `true`. ([See Demo](https://zebzhao.github.io/Angular-QueryBuilder/demo/)) |
230
+ |`classNames`|`object`|Optional|| CSS class names for different child elements in `query-builder` component. |
231
+ |`config`|`QueryBuilderConfig`|Required|| Configuration object for the main component. |
232
+ |`data`|`Ruleset`|Optional|| (Use `ngModel` or `value` instead.) |
233
+ |`emptyMessage`|`string`|Optional|| Message to display for an empty Ruleset if empty rulesets are not allowed. |
234
+ |`ngModel`| `Ruleset` |Optional|| Object that stores the state of the component. Supports 2-way binding. |
235
+ |`operatorMap`|`{ [key: string]: string[] }`|Optional|| Used to map field types to list of operators. |
236
+ |`persistValueOnFieldChange`|`boolean`|Optional|`false`| If `true`, when a field changes to another of the same type, and the type is one of: string, number, time, date, or boolean, persist the previous value. This option is ignored if config.calculateFieldChangeValue is provided. |
237
+ |`config.calculateFieldChangeValue`|`(currentField: Field, nextField: Field, currentValue: any) => any`|Optional|| Used to calculate the new value when a rule's field changes. |
238
+ |`value`| `Ruleset` |Optional|| Object that stores the state of the component. |
239
+
240
+ ## Structural Directives
241
+
242
+ Use these directives to replace different parts of query builder with custom components. See [example](#customizing-with-angular-material), or [demo](https://zebzhao.github.io/Angular-QueryBuilder/demo/) to see how it's done.
243
+
244
+ #### `queryInput`
245
+
246
+ Used to replace the input component. Specify the type/queryInputType to match specific field types to input template.
247
+
248
+ |Context Name|Type|Description|
249
+ |:--- |:--- |:--- |
250
+ |`$implicit`|`Rule`|Current rule object which contains the field, value, and operator|
251
+ |`field`|`Field`|Current field object which contains the field's value and name|
252
+ |`options`|`Option[]`|List of options for the field, returned by `getOptions`|
253
+ |`onChange`|`() => void`|Callback to handle changes to the input component|
254
+
255
+ #### `queryOperator`
256
+
257
+ Used to replace the query operator selection component.
258
+
259
+ |Context Name|Type|Description|
260
+ |:--- |:--- |:--- |
261
+ |`$implicit`|`Rule`|Current rule object which contains the field, value, and operator|
262
+ |`operators`|`string[]`|List of operators for the field, returned by `getOperators`|
263
+ |`onChange`|`() => void`|Callback to handle changes to the operator component|
264
+ |`type`|`string`|Input binding specifying the field type mapped to this input template, specified using syntax in above example|
265
+
266
+ #### `queryField`
267
+
268
+ Used this directive to replace the query field selection component.
269
+
270
+ |Context Name|Type|Description|
271
+ |:--- |:--- |:--- |
272
+ |`$implicit`|`Rule`|Current rule object which contains the field, value, and operator|
273
+ |`getFields`|`(entityName: string) => void`|Get the list of fields corresponding to an entity|
274
+ |`fields`|`Field[]`|List of fields for the component, specified by `config`|
275
+ |`onChange`|`(fieldValue: string, rule: Rule) => void`|Callback to handle changes to the field component|
276
+
277
+ #### `queryEntity`
278
+
279
+ Used to replace entity selection component.
280
+
281
+ |Context Name|Type|Description|
282
+ |:--- |:--- |:--- |
283
+ |`$implicit`|`Rule`|Current rule object which contains the field, value, and operator|
284
+ |`entities`|`Entity[]`|List of entities for the component, specified by `config`|
285
+ |`onChange`|`(entityValue: string, rule: Rule) => void`|Callback to handle changes to the entity component|
286
+
287
+ #### `querySwitchGroup`
288
+
289
+ Useful for replacing the switch controls, for example the AND/OR conditions. More custom conditions can be specified by using this directive to override the default component.
290
+
291
+ |Context Name|Type|Description|
292
+ |:--- |:--- |:--- |
293
+ |`$implicit`|`RuleSet`|Current rule set object which contain a list of child rules|
294
+ |`onChange`|`() => void`|Callback to handle changes to the switch group component|
295
+
296
+ #### `queryArrowIcon`
297
+
298
+ Directive to replace the expand arrow used in collapse/accordion mode of the query builder.
299
+
300
+ |Context Name|Type|Description|
301
+ |:--- |:--- |:--- |
302
+ |`$implicit`|`RuleSet`|Current rule set object which contain a list of child rules|
303
+
304
+ #### `queryEmptyWarning`
305
+
306
+ Can be used to customize the default empty warning message, alternatively can specify the `emptyMessage` property binding.
307
+
308
+ |Context Name|Type|Description|
309
+ |:--- |:--- |:--- |
310
+ |`$implicit`|`RuleSet`|Current rule set object which contain a list of child rules|
311
+ |`message`|`string`|Value passed to `emptyMessage`|
312
+
313
+ #### `queryButtonGroup`
314
+
315
+ For replacing the default button group for Add, Add Ruleset, Remove Ruleset buttons.
316
+
317
+ |Context Name|Type|Description|
318
+ |:--- |:--- |:--- |
319
+ |`$implicit`|`RuleSet`|Current rule set object which contain a list of child rules|
320
+ |`addRule`|`() => void`|Function to handle adding a new rule|
321
+ |`addRuleSet`|`() => void`|Function to handle adding a new rule set|
322
+ |`removeRuleSet`|`() => void`|Function to handle removing the current rule set|
323
+
324
+ #### `queryRemoveButton`
325
+
326
+ Directive to replace the default remove single rule button component.
327
+
328
+ |Context Name|Type|Description|
329
+ |:--- |:--- |:--- |
330
+ |`$implicit`|`Rule`|Current rule object which contains the field, value, and operator|
331
+ |`removeRule`|`(rule: Rule) => void`|Function to handle removing a rule|
332
+
333
+ ## Dependencies
334
+ - Angular 8+
335
+
336
+ That's it.
337
+
338
+ # Workflow
339
+ See the [angular-library-seed](https://github.com/trekhleb/angular-library-seed) project for details on how to build and run tests.
340
+
@@ -0,0 +1,24 @@
1
+ # QueryBuilder
2
+
3
+ This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.1.0.
4
+
5
+ ## Code scaffolding
6
+
7
+ Run `ng generate component component-name --project query-builder` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project query-builder`.
8
+ > Note: Don't forget to add `--project query-builder` or else it will be added to the default project in your `angular.json` file.
9
+
10
+ ## Build
11
+
12
+ Run `ng build query-builder` to build the project. The build artifacts will be stored in the `dist/` directory.
13
+
14
+ ## Publishing
15
+
16
+ After building your library with `ng build query-builder`, go to the dist folder `cd dist/query-builder` and run `npm publish`.
17
+
18
+ ## Running unit tests
19
+
20
+ Run `ng test query-builder` to execute the unit tests via [Karma](https://karma-runner.github.io).
21
+
22
+ ## Further help
23
+
24
+ To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
@@ -0,0 +1,15 @@
1
+ import { Directive } from '@angular/core';
2
+ import * as i0 from "@angular/core";
3
+ export class QueryArrowIconDirective {
4
+ template;
5
+ constructor(template) {
6
+ this.template = template;
7
+ }
8
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: QueryArrowIconDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
9
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: QueryArrowIconDirective, selector: "[queryArrowIcon]", ngImport: i0 });
10
+ }
11
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: QueryArrowIconDirective, decorators: [{
12
+ type: Directive,
13
+ args: [{ selector: '[queryArrowIcon]' }]
14
+ }], ctorParameters: () => [{ type: i0.TemplateRef }] });
15
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicXVlcnktYXJyb3ctaWNvbi5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9xdWVyeS1idWlsZGVyL3NyYy9saWIvcXVlcnktYnVpbGRlci9xdWVyeS1hcnJvdy1pY29uLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFlLE1BQU0sZUFBZSxDQUFDOztBQUd2RCxNQUFNLE9BQU8sdUJBQXVCO0lBQ2Y7SUFBbkIsWUFBbUIsUUFBMEI7UUFBMUIsYUFBUSxHQUFSLFFBQVEsQ0FBa0I7SUFBRyxDQUFDO3VHQUR0Qyx1QkFBdUI7MkZBQXZCLHVCQUF1Qjs7MkZBQXZCLHVCQUF1QjtrQkFEbkMsU0FBUzttQkFBQyxFQUFDLFFBQVEsRUFBRSxrQkFBa0IsRUFBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgVGVtcGxhdGVSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBEaXJlY3RpdmUoe3NlbGVjdG9yOiAnW3F1ZXJ5QXJyb3dJY29uXSd9KVxyXG5leHBvcnQgY2xhc3MgUXVlcnlBcnJvd0ljb25EaXJlY3RpdmUge1xyXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyB0ZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55Pikge31cclxufVxyXG4iXX0=