Skip to content

Commit be621b7

Browse files
raysuelzerraysuelzer
authored
Merge pull request raysuelzer#13 from raysuelzer/feature/angular-15
Angular 15
2 parents 0cb4968 + f6036f2 commit be621b7

File tree

12 files changed

+8772
-8112
lines changed

12 files changed

+8772
-8112
lines changed

‎package-lock.json‎

Lines changed: 8566 additions & 7876 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,24 @@
1111
},
1212
"private": true,
1313
"dependencies": {
14-
"@angular/animations": "^14.2.8",
15-
"@angular/common": "^14.2.8",
16-
"@angular/compiler": "^14.2.8",
17-
"@angular/cdk": "^14.2.6",
18-
"@angular/material": "^14.2.6",
19-
"@angular/core": "^14.2.8",
20-
"@angular/forms": "^14.2.8",
21-
"@angular/platform-browser": "^14.2.8",
22-
"@angular/platform-browser-dynamic": "^14.2.8",
23-
"@angular/router": "^14.2.8",
14+
"@angular/animations": "^15.2.0",
15+
"@angular/common": "^15.2.0",
16+
"@angular/compiler": "^15.2.0",
17+
"@angular/cdk": "^15.2.0",
18+
"@angular/material": "^15.2.0",
19+
"@angular/core": "^15.2.0",
20+
"@angular/forms": "^15.2.0",
21+
"@angular/platform-browser": "^15.2.0",
22+
"@angular/platform-browser-dynamic": "^15.2.0",
23+
"@angular/router": "^15.2.0",
2424
"rxjs": "~6.6.0",
2525
"tslib": "^2.3.0",
2626
"zone.js": "~0.11.4"
2727
},
2828
"devDependencies": {
29-
"@angular-devkit/build-angular": "^14.2.7",
30-
"@angular/cli": "^14.2.7",
31-
"@angular/compiler-cli": "^14.2.8",
29+
"@angular-devkit/build-angular": "^15.2.0",
30+
"@angular/cli": "^15.2.0",
31+
"@angular/compiler-cli": "^15.2.0",
3232
"@types/jasmine": "~3.8.0",
3333
"@types/node": "^12.11.1",
3434
"jasmine-core": "~3.8.0",
@@ -37,7 +37,7 @@
3737
"karma-coverage": "~2.0.3",
3838
"karma-jasmine": "~4.0.0",
3939
"karma-jasmine-html-reporter": "~1.7.0",
40-
"ng-packagr": "^14.2.2",
41-
"typescript": "~4.6.4"
40+
"ng-packagr": "^15.2.2",
41+
"typescript": "~4.9.5"
4242
}
4343
}

‎projects/demo/.browserslistrc‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎projects/demo/src/app/app.component.html‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<h2>Vanilla</h2>
2+
<br>
3+
<query-builder [formControl]='queryCtrl' [config]='currentConfig' [allowRuleset]='allowRuleset'
4+
[allowCollapse]='allowCollapse' [persistValueOnFieldChange]='persistValueOnFieldChange'>
5+
<ng-container *queryInput="let rule; type: 'textarea'; let getDisabledState=getDisabledState">
6+
<textarea class="text-input text-area" [(ngModel)]="rule.value" [disabled]=getDisabledState()
7+
placeholder="Custom Textarea"></textarea>
8+
</ng-container>
9+
</query-builder>
10+
<br>
11+
<div>
12+
<div class="row">
13+
<p class="col-6">Control Valid (Vanilla): {{ queryCtrl.valid }}</p>
14+
<div class="col-6">
15+
<label><input type="checkbox" (change)=switchModes($event)>Entity Mode</label>
16+
</div>
17+
</div>
18+
<div class="row">
19+
<p class="col-6">Control Touched (Vanilla): {{ queryCtrl.touched }}</p>
20+
<div class="col-6">
21+
<label><input type="checkbox" (change)=changeDisabled($event)>Disabled</label>
22+
</div>
23+
</div>
24+
<div class="row">
25+
<div class="col-6">
26+
<label><input type="checkbox" [(ngModel)]='allowRuleset'>Allow Ruleset</label>
27+
</div>
28+
<div class="col-6">
29+
<label><input type="checkbox" [(ngModel)]='allowCollapse'>Allow Collapse</label>
30+
</div>
31+
<div class="col-6">
32+
<label><input type="checkbox" [(ngModel)]='persistValueOnFieldChange'>Persist Values on Field Change</label>
33+
</div>
34+
</div>
35+
<textarea class="output">{{query | json}}</textarea>
36+
</div>
37+
<br>
38+
<h2>Custom Material</h2>
39+
<br>
40+
<mat-card appearance="outlined" [style.padding.px]="'10'">
41+
<query-builder [(ngModel)]='query' [config]='currentConfig' [allowRuleset]='allowRuleset'
42+
[allowCollapse]='allowCollapse' [persistValueOnFieldChange]='persistValueOnFieldChange'>
43+
<ng-container
44+
*queryButtonGroup="let ruleset; let addRule=addRule; let addRuleSet=addRuleSet; let removeRuleSet=removeRuleSet">
45+
<button type="button" mat-icon-button color="primary" (click)="addRule()">
46+
<mat-icon>add</mat-icon></button>
47+
<button type="button" mat-icon-button color="primary" *ngIf="addRuleSet" (click)="addRuleSet()">
48+
<mat-icon>add_circle_outline</mat-icon></button>
49+
<button type="button" mat-icon-button color="accent" *ngIf="removeRuleSet" (click)="removeRuleSet()">
50+
<mat-icon>remove_circle_outline</mat-icon></button>
51+
</ng-container>
52+
<ng-container *queryArrowIcon>
53+
<mat-icon ngClass="mat-arrow-icon">chevron_right</mat-icon>
54+
</ng-container>
55+
<ng-container *queryRemoveButton="let rule; let removeRule=removeRule">
56+
<button type="button" mat-icon-button color="accent" (click)="removeRule(rule)">
57+
<mat-icon>remove</mat-icon>
58+
</button>
59+
</ng-container>
60+
<ng-container *querySwitchGroup="let ruleset; let onChange=onChange">
61+
<mat-radio-group *ngIf="ruleset" [(ngModel)]="ruleset.condition" (ngModelChange)="onChange($event)">
62+
<mat-radio-button [style.padding.px]="10" value="and">And</mat-radio-button>
63+
<mat-radio-button [style.padding.px]="10" value="or">Or</mat-radio-button>
64+
</mat-radio-group>
65+
</ng-container>
66+
<ng-container *queryEntity="let rule; let entities=entities; let onChange=onChange">
67+
<mat-form-field [appearance]="appearance" subscriptSizing="dynamic">
68+
<mat-select [(ngModel)]="rule.entity" (ngModelChange)="onChange($event, rule)" [hideSingleSelectionIndicator]="true">
69+
<mat-option *ngFor="let entity of entities" [value]="entity.value">
70+
{{entity.name}}
71+
</mat-option>
72+
</mat-select>
73+
</mat-form-field>
74+
</ng-container>
75+
<ng-container *queryField="let rule; let fields=fields; let onChange=onChange; let getFields = getFields">
76+
<mat-form-field [appearance]="appearance" subscriptSizing="dynamic">
77+
<mat-select [(ngModel)]="rule.field" (ngModelChange)="onChange($event, rule)" [hideSingleSelectionIndicator]="true">
78+
<mat-option *ngFor="let field of getFields(rule.entity)" [value]="field.value">
79+
{{ field.name }}
80+
</mat-option>
81+
</mat-select>
82+
</mat-form-field>
83+
</ng-container>
84+
<ng-container *queryOperator="let rule; let operators=operators; let onChange=onChange">
85+
<mat-form-field [style.width.px]="150" [appearance]="appearance" subscriptSizing="dynamic">
86+
<mat-select [(ngModel)]="rule.operator" (ngModelChange)="onChange(rule)" [hideSingleSelectionIndicator]="true">
87+
<mat-option *ngFor="let value of operators" [value]="value">
88+
{{ value }}
89+
</mat-option>
90+
</mat-select>
91+
</mat-form-field>
92+
</ng-container>
93+
<ng-container *queryInput="let rule; type: 'boolean'; let onChange=onChange">
94+
<mat-checkbox [(ngModel)]="rule.value" (ngModelChange)="onChange()"></mat-checkbox>
95+
</ng-container>
96+
<ng-container *queryInput="let rule; let field=field; let options=options; type: 'category'; let onChange=onChange">
97+
<mat-form-field [appearance]="appearance" subscriptSizing="dynamic">
98+
<mat-select [(ngModel)]="rule.value" (ngModelChange)="onChange()" [hideSingleSelectionIndicator]="true">
99+
<mat-option *ngFor="let opt of options" [value]="opt.value">
100+
{{ opt.name }}
101+
</mat-option>
102+
</mat-select>
103+
</mat-form-field>
104+
</ng-container>
105+
<ng-container *queryInput="let rule; type: 'date'; let onChange=onChange">
106+
<mat-form-field [appearance]="appearance" subscriptSizing="dynamic">
107+
<input matInput [matDatepicker]="picker" [(ngModel)]="rule.value" (ngModelChange)="onChange()">
108+
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
109+
<mat-datepicker #picker></mat-datepicker>
110+
</mat-form-field>
111+
</ng-container>
112+
<ng-container *queryInput="let rule; let options=options; type: 'multiselect'; let onChange=onChange">
113+
<mat-form-field [style.width.px]="300" [appearance]="appearance" subscriptSizing="dynamic">
114+
<mat-select [(ngModel)]="rule.value" multiple (ngModelChange)="onChange()" [hideSingleSelectionIndicator]="true">
115+
<mat-option *ngFor="let opt of options" [value]="opt.value">
116+
{{ opt.name }}
117+
</mat-option>
118+
</mat-select>
119+
</mat-form-field>
120+
</ng-container>
121+
<ng-container *queryInput="let rule; let field=field; type: 'number'; let onChange=onChange">
122+
<mat-form-field [style.width.px]="100" [appearance]="appearance" subscriptSizing="dynamic">
123+
<input matInput [(ngModel)]="rule.value" type="number" (ngModelChange)="onChange()">
124+
</mat-form-field>
125+
</ng-container>
126+
<ng-container *queryInput="let rule; let field=field; type: 'string'; let onChange=onChange">
127+
<mat-form-field [appearance]="appearance" subscriptSizing="dynamic">
128+
<input matInput [(ngModel)]="rule.value" (ngModelChange)="onChange()">
129+
</mat-form-field>
130+
</ng-container>
131+
<ng-container *queryInput="let rule; let field=field; type: 'textarea'; let onChange=onChange">
132+
<mat-form-field [appearance]="appearance" subscriptSizing="dynamic">
133+
<textarea matInput [(ngModel)]="rule.value" (ngModelChange)="onChange()">
134+
</textarea>
135+
</mat-form-field>
136+
</ng-container>
137+
</query-builder>
138+
</mat-card>
139+
<br>
140+
<h2>Bootstrap</h2>
141+
<br>
142+
<query-builder [(ngModel)]='query' [classNames]='bootstrapClassNames' [config]='currentConfig'
143+
[allowRuleset]='allowRuleset' [allowCollapse]='allowCollapse' [persistValueOnFieldChange]='persistValueOnFieldChange'>
144+
<div class="col-auto" *queryInput="let rule; type: 'textarea'">
145+
<textarea class="form-control" [(ngModel)]="rule.value" placeholder="Custom Textarea"></textarea>
146+
</div>
147+
</query-builder>

‎projects/demo/src/app/app.component.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
::ng-deep html {
2+
font: 14px sans-serif;
3+
margin: 30px;
4+
}
5+
.mat-mdc-icon-button {
6+
outline: none;
7+
}
8+
.mat-arrow-icon {
9+
outline: none;
10+
line-height: 32px;
11+
}
12+
.mat-mdc-form-field {
13+
padding-left: 5px;
14+
padding-right: 5px;
15+
}
16+
.text-input {
17+
padding: 4px 8px;
18+
border-radius: 4px;
19+
border: 1px solid #ccc;
20+
}
21+
.text-area {
22+
width: 300px;
23+
height: 100px;
24+
}
25+
.output {
26+
width: 100%;
27+
height: 300px;
28+
}
29+
30+
.mat-mdc-radio-button label {
31+
margin: 0;
32+
}

0 commit comments

Comments
 (0)