novo-elements 10.2.0 → 10.3.0-next.1

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.
@@ -48,9 +48,9 @@ import { NovoTabModule } from 'novo-elements/elements/tabs';
48
48
 
49
49
  var Conjunction;
50
50
  (function (Conjunction) {
51
- Conjunction["AND"] = "and";
52
- Conjunction["OR"] = "or";
53
- Conjunction["NOT"] = "not";
51
+ Conjunction["And"] = "and";
52
+ Conjunction["Or"] = "or";
53
+ Conjunction["Not"] = "not";
54
54
  })(Conjunction || (Conjunction = {}));
55
55
 
56
56
  const defaultEditTypeFn = (field) => {
@@ -118,11 +118,11 @@ class QueryBuilderService {
118
118
  }
119
119
  getConjunctionLabel(conjunction) {
120
120
  switch (conjunction.replace('$', '').toLowerCase()) {
121
- case Conjunction.OR:
121
+ case Conjunction.Or:
122
122
  return this.labels.or;
123
- case Conjunction.NOT:
123
+ case Conjunction.Not:
124
124
  return this.labels.not;
125
- case Conjunction.AND:
125
+ case Conjunction.And:
126
126
  default:
127
127
  return this.labels.and;
128
128
  }
@@ -1204,7 +1204,7 @@ class ConditionGroupComponent {
1204
1204
  this.controlContainer = controlContainer;
1205
1205
  this.formBuilder = formBuilder;
1206
1206
  this.cdr = cdr;
1207
- this.controlName = '$' + Conjunction.AND;
1207
+ this.controlName = '$' + Conjunction.And;
1208
1208
  /** Subject that emits when the component has been destroyed. */
1209
1209
  this._onDestroy = new Subject();
1210
1210
  }
@@ -1234,8 +1234,8 @@ class ConditionGroupComponent {
1234
1234
  return this.parentForm.get(this.controlName);
1235
1235
  }
1236
1236
  addCondition(data) {
1237
- const conditon = this.newCondition(data);
1238
- this.root.push(conditon);
1237
+ const condition = this.newCondition(data);
1238
+ this.root.push(condition);
1239
1239
  this.cdr.markForCheck();
1240
1240
  }
1241
1241
  removeCondition(index) {
@@ -1249,19 +1249,20 @@ class ConditionGroupComponent {
1249
1249
  value: [value],
1250
1250
  });
1251
1251
  }
1252
- cantRemoveRow(isFirst) {
1253
- if (this.parentForm.parent.length > 1)
1252
+ cantRemoveRow() {
1253
+ if (this.parentForm.parent.length > 1) {
1254
1254
  return false;
1255
+ }
1255
1256
  return this.root.length <= 1;
1256
1257
  }
1257
1258
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ConditionGroupComponent, deps: [{ token: QueryBuilderService }, { token: i1.NovoLabelService }, { token: i2.ControlContainer }, { token: i2.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
1258
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ConditionGroupComponent, selector: "novo-condition-group", inputs: { controlName: "controlName", groupIndex: "groupIndex" }, host: { classAttribute: "novo-condition-group" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ConditionGroupComponent), multi: true }], ngImport: i0, template: "<div [formGroup]=\"parentForm\" class=\"condition-group-container\">\n <novo-stack [formArrayName]=\"controlName\" gap=\"md\">\n <ng-container\n *ngFor=\"let andGroup of root.controls; let andIndex = index; let isFirst = first;let isLast = last;\">\n <ng-container [formGroupName]=\"andIndex\">\n <novo-flex class=\"condition-row\" align=\"end\" gap=\"sm\">\n <novo-dropdown *ngIf=\"!isFirst && qbs.allowedGroupings.length > 1; else labeledGroup\">\n <button theme=\"dialogue\" icon=\"collapse\" size=\"sm\">{{qbs.getConjunctionLabel(controlName)}}</button>\n <novo-optgroup>\n <novo-option *ngFor=\"let c of qbs.allowedGroupings\" (click)=\"updateControlName(c)\">\n {{qbs.getConjunctionLabel(c)}}</novo-option>\n </novo-optgroup>\n </novo-dropdown>\n <ng-template #labeledGroup>\n <novo-label *ngIf=\"!isFirst\" color=\"ash\" size=\"xs\" uppercase padding=\"sm\">\n {{qbs.getConjunctionLabel(controlName)}}</novo-label>\n </ng-template>\n <novo-condition-builder [groupIndex]=\"groupIndex\" [andIndex]=\"andIndex\" [isFirst]=\"isFirst\"></novo-condition-builder>\n <novo-button theme=\"icon\" icon=\"delete-o\" color=\"negative\" (click)=\"removeCondition(andIndex)\"\n [disabled]=\"cantRemoveRow(isFirst)\">\n </novo-button>\n </novo-flex>\n </ng-container>\n </ng-container>\n <button theme=\"dialogue\" data-automation-id=\"add-advanced-search-condition\" icon=\"add-thin\" side=\"left\" size=\"sm\" uppercase (click)=\"addCondition()\">\n {{ labels.addCondition }}</button>\n </novo-stack>\n <!-- <button class=\"and-or-button\" theme=\"secondary\" size=\"sm\" (click)=\"addRootCondition()\">{{ addCriteriaLabel }}</button> -->\n</div>", styles: [":host{position:relative;display:block;border:1px solid var(--border);border-radius:var(--border-radius-round);padding:var(--spacing-md);width:100%}:host .condition-row{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i5$1.NovoButtonElement, selector: "novo-button,button[theme]", inputs: ["color", "side", "size", "theme", "loading", "icon", "disabled"] }, { kind: "component", type: i3.NovoLabel, selector: "novo-label,[novo-label]" }, { kind: "directive", type: i3.PaddingDirective, selector: "[p],[padding],[paddingTop],[paddingRight],[paddingBottom],[paddingLeft],[paddingX],[paddingY],[pt],[pr],[pb],[pl],[px],[py]", inputs: ["padding", "p", "paddingLeft", "pl", "paddingRight", "pr", "paddingTop", "pt", "paddingBottom", "pb", "paddingX", "px", "paddingY", "py"] }, { kind: "directive", type: i3.GapDirective, selector: "[gap]", inputs: ["gap"] }, { kind: "directive", type: i3.ThemeColorDirective, selector: "[theme]", inputs: ["theme"] }, { kind: "component", type: i3.NovoOption, selector: "novo-option", inputs: ["selected", "keepOpen", "novoInert", "value", "disabled"], exportAs: ["novoOption"] }, { kind: "component", type: i3.NovoOptgroup, selector: "novo-optgroup", inputs: ["disabled", "label"], exportAs: ["novoOptgroup"] }, { kind: "component", type: i7.NovoFlexElement, selector: "novo-flex,novo-row", inputs: ["direction", "align", "justify", "wrap", "gap"] }, { kind: "component", type: i7.NovoStackElement, selector: "novo-stack,novo-column", inputs: ["direction", "align"] }, { kind: "component", type: i8$1.NovoDropdownElement, selector: "novo-dropdown", inputs: ["parentScrollSelector", "parentScrollAction", "containerClass", "side", "scrollStrategy", "keepOpen", "height", "width", "appendToBody", "multiple", "scrollToActiveItemOnOpen"], outputs: ["toggled"] }, { kind: "component", type: ConditionBuilderComponent, selector: "novo-condition-builder", inputs: ["label", "isFirst", "andIndex", "groupIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1259
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ConditionGroupComponent, selector: "novo-condition-group", inputs: { controlName: "controlName", groupIndex: "groupIndex" }, host: { classAttribute: "novo-condition-group" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ConditionGroupComponent), multi: true }], ngImport: i0, template: "<div [formGroup]=\"parentForm\" class=\"condition-group-container\">\n <novo-stack [formArrayName]=\"controlName\" gap=\"md\">\n <ng-container\n *ngFor=\"let andGroup of root.controls; let andIndex = index; let isFirst = first;let isLast = last;\">\n <ng-container [formGroupName]=\"andIndex\">\n <novo-flex class=\"condition-row\" align=\"end\" gap=\"sm\">\n <novo-dropdown *ngIf=\"!isFirst && qbs.allowedGroupings.length > 1; else labeledGroup\">\n <button theme=\"dialogue\" icon=\"collapse\" size=\"sm\">{{qbs.getConjunctionLabel(controlName)}}</button>\n <novo-optgroup>\n <novo-option *ngFor=\"let c of qbs.allowedGroupings\" (click)=\"updateControlName(c)\">\n {{qbs.getConjunctionLabel(c)}}</novo-option>\n </novo-optgroup>\n </novo-dropdown>\n <ng-template #labeledGroup>\n <novo-label *ngIf=\"!isFirst\" color=\"ash\" size=\"xs\" uppercase padding=\"sm\">\n {{qbs.getConjunctionLabel(controlName)}}</novo-label>\n </ng-template>\n <novo-condition-builder [groupIndex]=\"groupIndex\" [andIndex]=\"andIndex\" [isFirst]=\"isFirst\"></novo-condition-builder>\n <novo-button theme=\"icon\" icon=\"delete-o\" color=\"negative\" (click)=\"removeCondition(andIndex)\"\n [disabled]=\"cantRemoveRow()\">\n </novo-button>\n </novo-flex>\n </ng-container>\n </ng-container>\n <button theme=\"dialogue\" data-automation-id=\"add-advanced-search-condition\" icon=\"add-thin\" side=\"left\" size=\"sm\" uppercase (click)=\"addCondition()\">\n {{ labels.addCondition }}</button>\n </novo-stack>\n <!-- <button class=\"and-or-button\" theme=\"secondary\" size=\"sm\" (click)=\"addRootCondition()\">{{ addCriteriaLabel }}</button> -->\n</div>\n", styles: [":host{position:relative;display:block;border:1px solid var(--border);border-radius:var(--border-radius-round);padding:var(--spacing-md);width:100%}:host .condition-row{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i5$1.NovoButtonElement, selector: "novo-button,button[theme]", inputs: ["color", "side", "size", "theme", "loading", "icon", "disabled"] }, { kind: "component", type: i3.NovoLabel, selector: "novo-label,[novo-label]" }, { kind: "directive", type: i3.PaddingDirective, selector: "[p],[padding],[paddingTop],[paddingRight],[paddingBottom],[paddingLeft],[paddingX],[paddingY],[pt],[pr],[pb],[pl],[px],[py]", inputs: ["padding", "p", "paddingLeft", "pl", "paddingRight", "pr", "paddingTop", "pt", "paddingBottom", "pb", "paddingX", "px", "paddingY", "py"] }, { kind: "directive", type: i3.GapDirective, selector: "[gap]", inputs: ["gap"] }, { kind: "directive", type: i3.ThemeColorDirective, selector: "[theme]", inputs: ["theme"] }, { kind: "component", type: i3.NovoOption, selector: "novo-option", inputs: ["selected", "keepOpen", "novoInert", "value", "disabled"], exportAs: ["novoOption"] }, { kind: "component", type: i3.NovoOptgroup, selector: "novo-optgroup", inputs: ["disabled", "label"], exportAs: ["novoOptgroup"] }, { kind: "component", type: i7.NovoFlexElement, selector: "novo-flex,novo-row", inputs: ["direction", "align", "justify", "wrap", "gap"] }, { kind: "component", type: i7.NovoStackElement, selector: "novo-stack,novo-column", inputs: ["direction", "align"] }, { kind: "component", type: i8$1.NovoDropdownElement, selector: "novo-dropdown", inputs: ["parentScrollSelector", "parentScrollAction", "containerClass", "side", "scrollStrategy", "keepOpen", "height", "width", "appendToBody", "multiple", "scrollToActiveItemOnOpen"], outputs: ["toggled"] }, { kind: "component", type: ConditionBuilderComponent, selector: "novo-condition-builder", inputs: ["label", "isFirst", "andIndex", "groupIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1259
1260
  }
1260
1261
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ConditionGroupComponent, decorators: [{
1261
1262
  type: Component,
1262
1263
  args: [{ selector: 'novo-condition-group', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ConditionGroupComponent), multi: true }], host: {
1263
1264
  class: 'novo-condition-group',
1264
- }, template: "<div [formGroup]=\"parentForm\" class=\"condition-group-container\">\n <novo-stack [formArrayName]=\"controlName\" gap=\"md\">\n <ng-container\n *ngFor=\"let andGroup of root.controls; let andIndex = index; let isFirst = first;let isLast = last;\">\n <ng-container [formGroupName]=\"andIndex\">\n <novo-flex class=\"condition-row\" align=\"end\" gap=\"sm\">\n <novo-dropdown *ngIf=\"!isFirst && qbs.allowedGroupings.length > 1; else labeledGroup\">\n <button theme=\"dialogue\" icon=\"collapse\" size=\"sm\">{{qbs.getConjunctionLabel(controlName)}}</button>\n <novo-optgroup>\n <novo-option *ngFor=\"let c of qbs.allowedGroupings\" (click)=\"updateControlName(c)\">\n {{qbs.getConjunctionLabel(c)}}</novo-option>\n </novo-optgroup>\n </novo-dropdown>\n <ng-template #labeledGroup>\n <novo-label *ngIf=\"!isFirst\" color=\"ash\" size=\"xs\" uppercase padding=\"sm\">\n {{qbs.getConjunctionLabel(controlName)}}</novo-label>\n </ng-template>\n <novo-condition-builder [groupIndex]=\"groupIndex\" [andIndex]=\"andIndex\" [isFirst]=\"isFirst\"></novo-condition-builder>\n <novo-button theme=\"icon\" icon=\"delete-o\" color=\"negative\" (click)=\"removeCondition(andIndex)\"\n [disabled]=\"cantRemoveRow(isFirst)\">\n </novo-button>\n </novo-flex>\n </ng-container>\n </ng-container>\n <button theme=\"dialogue\" data-automation-id=\"add-advanced-search-condition\" icon=\"add-thin\" side=\"left\" size=\"sm\" uppercase (click)=\"addCondition()\">\n {{ labels.addCondition }}</button>\n </novo-stack>\n <!-- <button class=\"and-or-button\" theme=\"secondary\" size=\"sm\" (click)=\"addRootCondition()\">{{ addCriteriaLabel }}</button> -->\n</div>", styles: [":host{position:relative;display:block;border:1px solid var(--border);border-radius:var(--border-radius-round);padding:var(--spacing-md);width:100%}:host .condition-row{width:100%}\n"] }]
1265
+ }, template: "<div [formGroup]=\"parentForm\" class=\"condition-group-container\">\n <novo-stack [formArrayName]=\"controlName\" gap=\"md\">\n <ng-container\n *ngFor=\"let andGroup of root.controls; let andIndex = index; let isFirst = first;let isLast = last;\">\n <ng-container [formGroupName]=\"andIndex\">\n <novo-flex class=\"condition-row\" align=\"end\" gap=\"sm\">\n <novo-dropdown *ngIf=\"!isFirst && qbs.allowedGroupings.length > 1; else labeledGroup\">\n <button theme=\"dialogue\" icon=\"collapse\" size=\"sm\">{{qbs.getConjunctionLabel(controlName)}}</button>\n <novo-optgroup>\n <novo-option *ngFor=\"let c of qbs.allowedGroupings\" (click)=\"updateControlName(c)\">\n {{qbs.getConjunctionLabel(c)}}</novo-option>\n </novo-optgroup>\n </novo-dropdown>\n <ng-template #labeledGroup>\n <novo-label *ngIf=\"!isFirst\" color=\"ash\" size=\"xs\" uppercase padding=\"sm\">\n {{qbs.getConjunctionLabel(controlName)}}</novo-label>\n </ng-template>\n <novo-condition-builder [groupIndex]=\"groupIndex\" [andIndex]=\"andIndex\" [isFirst]=\"isFirst\"></novo-condition-builder>\n <novo-button theme=\"icon\" icon=\"delete-o\" color=\"negative\" (click)=\"removeCondition(andIndex)\"\n [disabled]=\"cantRemoveRow()\">\n </novo-button>\n </novo-flex>\n </ng-container>\n </ng-container>\n <button theme=\"dialogue\" data-automation-id=\"add-advanced-search-condition\" icon=\"add-thin\" side=\"left\" size=\"sm\" uppercase (click)=\"addCondition()\">\n {{ labels.addCondition }}</button>\n </novo-stack>\n <!-- <button class=\"and-or-button\" theme=\"secondary\" size=\"sm\" (click)=\"addRootCondition()\">{{ addCriteriaLabel }}</button> -->\n</div>\n", styles: [":host{position:relative;display:block;border:1px solid var(--border);border-radius:var(--border-radius-round);padding:var(--spacing-md);width:100%}:host .condition-row{width:100%}\n"] }]
1265
1266
  }], ctorParameters: () => [{ type: QueryBuilderService }, { type: i1.NovoLabelService }, { type: i2.ControlContainer }, { type: i2.FormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { controlName: [{
1266
1267
  type: Input
1267
1268
  }], groupIndex: [{
@@ -1279,7 +1280,7 @@ class CriteriaBuilderComponent {
1279
1280
  this.formBuilder = formBuilder;
1280
1281
  this.cdr = cdr;
1281
1282
  this.qbs = qbs;
1282
- this.allowedGroupings = [Conjunction.AND, Conjunction.OR, Conjunction.NOT];
1283
+ this.allowedGroupings = [Conjunction.And, Conjunction.Or, Conjunction.Not];
1283
1284
  /** Subject that emits when the component has been destroyed. */
1284
1285
  this._onDestroy = new Subject();
1285
1286
  }
@@ -1290,7 +1291,7 @@ class CriteriaBuilderComponent {
1290
1291
  });
1291
1292
  this.parentForm.valueChanges.pipe(takeUntil(this._onDestroy)).subscribe((value) => {
1292
1293
  Promise.resolve().then(() => {
1293
- this.setInitalValue(value[this.controlName]);
1294
+ this.setInitialValue(value[this.controlName]);
1294
1295
  this.cdr.markForCheck();
1295
1296
  });
1296
1297
  });
@@ -1324,7 +1325,7 @@ class CriteriaBuilderComponent {
1324
1325
  isConditionGroup(group) {
1325
1326
  return Object.keys(group).every((key) => ['$and', '$or', '$not'].includes(key));
1326
1327
  }
1327
- setInitalValue(value) {
1328
+ setInitialValue(value) {
1328
1329
  if (value.length && this.isConditionGroup(value[0])) {
1329
1330
  value.forEach((it) => this.addConditionGroup(it));
1330
1331
  }