@smartbit4all/ng-client 7.2.6 → 7.2.8
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/HTML-WIDGET.md
CHANGED
|
@@ -399,8 +399,15 @@ Az ikon címe négyféle lehet, és mindegyiknek megvan a maga esete:
|
|
|
399
399
|
nincs a szótárban, már a `build()` elutasítja.
|
|
400
400
|
- Egy elemen **nem állhat** a `data-sb4-icon` és a `data-sb4-icon-key` egyszerre: `build()`-hiba, a
|
|
401
401
|
kliens a kulcsot használja és warningot ír.
|
|
402
|
-
- A
|
|
403
|
-
|
|
402
|
+
- **A jelölő bármely elemen állhat** (`<span class="badge" data-sb4-icon="mail"></span>`), nem csak
|
|
403
|
+
`<smart-icon>`-on: a kliens attribútum szerint keres, és a komponenst magába a jelölő-elembe
|
|
404
|
+
rendereli. A `Tag.icon(...)` azért mégis `<smart-icon>` taget generál, mert a hostok tag-szelektorral
|
|
405
|
+
szokták stílusozni az ikont — saját elemnél erre a szelektorra ne számíts.
|
|
406
|
+
- **Üres tartalommal írd**, mint a toolbar-slotot: a jelölő-elem gyerekei helyére a komponens
|
|
407
|
+
kerül. A saját `class`, `style` és `title` attribútuma megmarad, a méretezés a widget CSS-éből
|
|
408
|
+
megy (`.card-icon mat-icon { font-size: … }`). Ha szöveg és ikon is kell egy elemben — például egy
|
|
409
|
+
badge-ben —, az ikon **gyerek**-slot legyen:
|
|
410
|
+
`<span class="pill"><smart-icon data-sb4-icon="bolt"></smart-icon>count 0</span>`.
|
|
404
411
|
- Az ikon a nevét a regiszterben keresi meg, ezért **egy microtaskkal később** jelenik meg — a
|
|
405
412
|
kliens ettől még ugyanabban a renderelésben írja ki a html-t.
|
|
406
413
|
|
|
@@ -23147,7 +23147,7 @@ class AdvancedSmartFilterExpressionItemComponent extends SmartFilterExpressionIt
|
|
|
23147
23147
|
});
|
|
23148
23148
|
}
|
|
23149
23149
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AdvancedSmartFilterExpressionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
23150
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AdvancedSmartFilterExpressionItemComponent, isStandalone: true, selector: "app-advanced-expression-item", usesInheritance: true, ngImport: i0, template: "<div class=\"expressionItemContainer\">\r\n <div\r\n class=\"expressionItemInnerContainer\"\r\n [ngClass]=\"\r\n item.expressionData?.currentOperation === 'EXPRESSION'\r\n ? isSelected\r\n ? 'selectedExpressionContainer'\r\n : 'expressionContainer'\r\n : ''\r\n \"\r\n >\r\n <div\r\n *ngIf=\"\r\n item.expressionData?.currentOperation === 'EXPRESSION';\r\n then expression;\r\n else simpleItem\r\n \"\r\n ></div>\r\n <ng-template #expression>\r\n <div class=\"sub-expression-container\" (click)=\"select($event, item)\">\r\n <div\r\n class=\"expressionItemBubble expression sub-expression-start\"\r\n (click)=\"select($event, item)\"\r\n ></div>\r\n <div class=\"sub-expression-items\">\r\n <app-advanced-expression-item\r\n [item]=\"subItem\"\r\n [service]=\"service()\"\r\n [hasNext]=\"i < (item.subFieldList?.filters)!.length - 1\"\r\n *ngFor=\"let subItem of item.subFieldList?.filters; let i = index\"\r\n ></app-advanced-expression-item>\r\n </div>\r\n <lib-advanced-relation-button\r\n [boolOperator]=\"item.subFieldList?.defaultOperation\"\r\n (boolOperatorChanged)=\"onOperatorChanged($event)\"\r\n ></lib-advanced-relation-button>\r\n <div class=\"expressionItemBubble expression sub-expression-end\"></div>\r\n </div>\r\n </ng-template>\r\n <ng-template #simpleItem>\r\n <div>\r\n <div\r\n (click)=\"select($event, item)\"\r\n class=\"expressionItemBubble simpleItem\"\r\n [ngClass]=\"isSelected ? 'selectedSimpleItem' : ''\"\r\n >\r\n <button mat-button class=\"mat-raised-button delete-button\" (click)=\"deleteItem($event)\"\r\n >x</button\r\n >\r\n\r\n {{ item.label }}:\r\n <div *ngIf=\"item.expressionData?.currentOperation !== 'BETWEEN'\">\r\n <div *ngIf=\"item.widgetType === 'DATE'\">\r\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDate }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType === 'DATE_TIME'\">\r\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDateTime }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE'\">\r\n <b>{{ getDisplayValue(item.expressionData!.operand2!.valueAsString!) }}</b>\r\n </div>\r\n </div>\r\n <div *ngIf=\"item.expressionData?.currentOperation === 'IN'\">\r\n <b *ngFor=\"let value of item.expressionData?.operand2?.selectedValues; let last = last\">\r\n {{ getDisplayValue(value) }} <b *ngIf=\"!last\">,</b>\r\n </b>\r\n </div>\r\n <div class=\"expressionValues\" *ngIf=\"item.expressionData?.currentOperation === 'BETWEEN'\">\r\n <div *ngIf=\"item.widgetType === 'DATE'\">\r\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDate }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType === 'DATE_TIME'\">\r\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDateTime }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE'\">\r\n <b>{{ item.expressionData?.operand2?.valueAsString }}</b>\r\n </div>\r\n <b>-</b>\r\n <div *ngIf=\"item.widgetType === 'DATE'\">\r\n <b>{{ item.expressionData!.operand3!.valueAsString! | smartDate }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType === 'DATE_TIME'\">\r\n <b>{{ item.expressionData!.operand3!.valueAsString! | smartDateTime }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE'\">\r\n <b>{{ item.expressionData?.operand3?.valueAsString }}</b>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: [".expressionItemContainer{display:flex;flex-direction:row;gap:.75rem}.expressionItemInnerContainer{display:flex;flex-direction:row;grid-area:.75rem;padding:.25rem;border-radius:.25rem}.expressionContainer{border:1px dashed var(--primary-lighter-gray-color);cursor:pointer}.selectedExpressionContainer{border:2px dashed var(--primary-color)}.expressionItemBubble,.relationItemBubble{display:flex;flex-direction:row;border-radius:1.5rem}.expressionItemBubble{padding:.75rem}.expression{background-color:var(--inner-container);font-weight:600;margin:auto 0}.simpleItem{background-color:#c6ddff;cursor:pointer}.relationItemBubble{border:1px solid #cdcdcd;padding:.25rem;max-height:42px;margin-top:.25rem}.relationItemBubble .mat-mdc-button{border-radius:1.5rem;height:100%;margin:auto 0}.expressionValues{display:flex;flex-direction:row;gap:.5rem}.sub-expression-container{display:flex;align-items:stretch}.sub-expression-start{padding:5px;height:100%;border-left:2px solid black;border-top:2px solid black;border-bottom:2px solid black;border-radius:0}.sub-expression-end{padding:5px;height:100%;border-right:2px solid black;border-top:2px solid black;border-bottom:2px solid black;border-radius:0}.sub-expression-items{display:flex;flex-wrap:wrap}lib-advanced-relation-button{margin-top:.25rem;margin-bottom:.25rem}.delete-button{min-width:10px;
|
|
23150
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AdvancedSmartFilterExpressionItemComponent, isStandalone: true, selector: "app-advanced-expression-item", usesInheritance: true, ngImport: i0, template: "<div class=\"expressionItemContainer\">\r\n <div\r\n class=\"expressionItemInnerContainer\"\r\n [ngClass]=\"\r\n item.expressionData?.currentOperation === 'EXPRESSION'\r\n ? isSelected\r\n ? 'selectedExpressionContainer'\r\n : 'expressionContainer'\r\n : ''\r\n \"\r\n >\r\n <div\r\n *ngIf=\"\r\n item.expressionData?.currentOperation === 'EXPRESSION';\r\n then expression;\r\n else simpleItem\r\n \"\r\n ></div>\r\n <ng-template #expression>\r\n <div class=\"sub-expression-container\" (click)=\"select($event, item)\">\r\n <div\r\n class=\"expressionItemBubble expression sub-expression-start\"\r\n (click)=\"select($event, item)\"\r\n ></div>\r\n <div class=\"sub-expression-items\">\r\n <app-advanced-expression-item\r\n [item]=\"subItem\"\r\n [service]=\"service()\"\r\n [hasNext]=\"i < (item.subFieldList?.filters)!.length - 1\"\r\n *ngFor=\"let subItem of item.subFieldList?.filters; let i = index\"\r\n ></app-advanced-expression-item>\r\n </div>\r\n <lib-advanced-relation-button\r\n [boolOperator]=\"item.subFieldList?.defaultOperation\"\r\n (boolOperatorChanged)=\"onOperatorChanged($event)\"\r\n ></lib-advanced-relation-button>\r\n <div class=\"expressionItemBubble expression sub-expression-end\"></div>\r\n </div>\r\n </ng-template>\r\n <ng-template #simpleItem>\r\n <div>\r\n <div\r\n (click)=\"select($event, item)\"\r\n class=\"expressionItemBubble simpleItem\"\r\n [ngClass]=\"isSelected ? 'selectedSimpleItem' : ''\"\r\n >\r\n <button mat-button class=\"mat-raised-button delete-button\" (click)=\"deleteItem($event)\"\r\n >x</button\r\n >\r\n\r\n {{ item.label }}:\r\n <div *ngIf=\"item.expressionData?.currentOperation !== 'BETWEEN'\">\r\n <div *ngIf=\"item.widgetType === 'DATE'\">\r\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDate }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType === 'DATE_TIME'\">\r\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDateTime }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE'\">\r\n <b>{{ getDisplayValue(item.expressionData!.operand2!.valueAsString!) }}</b>\r\n </div>\r\n </div>\r\n <div *ngIf=\"item.expressionData?.currentOperation === 'IN'\">\r\n <b *ngFor=\"let value of item.expressionData?.operand2?.selectedValues; let last = last\">\r\n {{ getDisplayValue(value) }} <b *ngIf=\"!last\">,</b>\r\n </b>\r\n </div>\r\n <div class=\"expressionValues\" *ngIf=\"item.expressionData?.currentOperation === 'BETWEEN'\">\r\n <div *ngIf=\"item.widgetType === 'DATE'\">\r\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDate }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType === 'DATE_TIME'\">\r\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDateTime }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE'\">\r\n <b>{{ item.expressionData?.operand2?.valueAsString }}</b>\r\n </div>\r\n <b>-</b>\r\n <div *ngIf=\"item.widgetType === 'DATE'\">\r\n <b>{{ item.expressionData!.operand3!.valueAsString! | smartDate }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType === 'DATE_TIME'\">\r\n <b>{{ item.expressionData!.operand3!.valueAsString! | smartDateTime }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE'\">\r\n <b>{{ item.expressionData?.operand3?.valueAsString }}</b>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: [".expressionItemContainer{display:flex;flex-direction:row;gap:.75rem}.expressionItemInnerContainer{display:flex;flex-direction:row;grid-area:.75rem;padding:.25rem;border-radius:.25rem}.expressionContainer{border:1px dashed var(--primary-lighter-gray-color);cursor:pointer}.selectedExpressionContainer{border:2px dashed var(--primary-color)}.expressionItemBubble,.relationItemBubble{display:flex;flex-direction:row;border-radius:1.5rem}.expressionItemBubble{padding:.75rem}.expression{background-color:var(--inner-container);font-weight:600;margin:auto 0}.simpleItem{background-color:#c6ddff;cursor:pointer}.relationItemBubble{border:1px solid #cdcdcd;padding:.25rem;max-height:42px;margin-top:.25rem}.relationItemBubble .mat-mdc-button{border-radius:1.5rem;height:100%;margin:auto 0}.expressionValues{display:flex;flex-direction:row;gap:.5rem}.sub-expression-container{display:flex;align-items:stretch}.sub-expression-start{padding:5px;height:100%;border-left:2px solid black;border-top:2px solid black;border-bottom:2px solid black;border-radius:0}.sub-expression-end{padding:5px;height:100%;border-right:2px solid black;border-top:2px solid black;border-bottom:2px solid black;border-radius:0}.sub-expression-items{display:flex;flex-wrap:wrap}lib-advanced-relation-button{margin-top:.25rem;margin-bottom:.25rem}.delete-button{min-width:10px;height:20px;padding:5px;border-radius:1.5rem}\n"], dependencies: [{ kind: "component", type: AdvancedSmartFilterExpressionItemComponent, selector: "app-advanced-expression-item" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdvancedRelationButtonComponent, selector: "lib-advanced-relation-button", inputs: ["boolOperator"], outputs: ["boolOperatorChanged"] }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }] }); }
|
|
23151
23151
|
}
|
|
23152
23152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AdvancedSmartFilterExpressionItemComponent, decorators: [{
|
|
23153
23153
|
type: Component,
|
|
@@ -23159,7 +23159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
23159
23159
|
SmartDatePipe,
|
|
23160
23160
|
SmartDateTimePipe,
|
|
23161
23161
|
AdvancedRelationButtonComponent,
|
|
23162
|
-
], template: "<div class=\"expressionItemContainer\">\r\n <div\r\n class=\"expressionItemInnerContainer\"\r\n [ngClass]=\"\r\n item.expressionData?.currentOperation === 'EXPRESSION'\r\n ? isSelected\r\n ? 'selectedExpressionContainer'\r\n : 'expressionContainer'\r\n : ''\r\n \"\r\n >\r\n <div\r\n *ngIf=\"\r\n item.expressionData?.currentOperation === 'EXPRESSION';\r\n then expression;\r\n else simpleItem\r\n \"\r\n ></div>\r\n <ng-template #expression>\r\n <div class=\"sub-expression-container\" (click)=\"select($event, item)\">\r\n <div\r\n class=\"expressionItemBubble expression sub-expression-start\"\r\n (click)=\"select($event, item)\"\r\n ></div>\r\n <div class=\"sub-expression-items\">\r\n <app-advanced-expression-item\r\n [item]=\"subItem\"\r\n [service]=\"service()\"\r\n [hasNext]=\"i < (item.subFieldList?.filters)!.length - 1\"\r\n *ngFor=\"let subItem of item.subFieldList?.filters; let i = index\"\r\n ></app-advanced-expression-item>\r\n </div>\r\n <lib-advanced-relation-button\r\n [boolOperator]=\"item.subFieldList?.defaultOperation\"\r\n (boolOperatorChanged)=\"onOperatorChanged($event)\"\r\n ></lib-advanced-relation-button>\r\n <div class=\"expressionItemBubble expression sub-expression-end\"></div>\r\n </div>\r\n </ng-template>\r\n <ng-template #simpleItem>\r\n <div>\r\n <div\r\n (click)=\"select($event, item)\"\r\n class=\"expressionItemBubble simpleItem\"\r\n [ngClass]=\"isSelected ? 'selectedSimpleItem' : ''\"\r\n >\r\n <button mat-button class=\"mat-raised-button delete-button\" (click)=\"deleteItem($event)\"\r\n >x</button\r\n >\r\n\r\n {{ item.label }}:\r\n <div *ngIf=\"item.expressionData?.currentOperation !== 'BETWEEN'\">\r\n <div *ngIf=\"item.widgetType === 'DATE'\">\r\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDate }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType === 'DATE_TIME'\">\r\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDateTime }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE'\">\r\n <b>{{ getDisplayValue(item.expressionData!.operand2!.valueAsString!) }}</b>\r\n </div>\r\n </div>\r\n <div *ngIf=\"item.expressionData?.currentOperation === 'IN'\">\r\n <b *ngFor=\"let value of item.expressionData?.operand2?.selectedValues; let last = last\">\r\n {{ getDisplayValue(value) }} <b *ngIf=\"!last\">,</b>\r\n </b>\r\n </div>\r\n <div class=\"expressionValues\" *ngIf=\"item.expressionData?.currentOperation === 'BETWEEN'\">\r\n <div *ngIf=\"item.widgetType === 'DATE'\">\r\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDate }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType === 'DATE_TIME'\">\r\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDateTime }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE'\">\r\n <b>{{ item.expressionData?.operand2?.valueAsString }}</b>\r\n </div>\r\n <b>-</b>\r\n <div *ngIf=\"item.widgetType === 'DATE'\">\r\n <b>{{ item.expressionData!.operand3!.valueAsString! | smartDate }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType === 'DATE_TIME'\">\r\n <b>{{ item.expressionData!.operand3!.valueAsString! | smartDateTime }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE'\">\r\n <b>{{ item.expressionData?.operand3?.valueAsString }}</b>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: [".expressionItemContainer{display:flex;flex-direction:row;gap:.75rem}.expressionItemInnerContainer{display:flex;flex-direction:row;grid-area:.75rem;padding:.25rem;border-radius:.25rem}.expressionContainer{border:1px dashed var(--primary-lighter-gray-color);cursor:pointer}.selectedExpressionContainer{border:2px dashed var(--primary-color)}.expressionItemBubble,.relationItemBubble{display:flex;flex-direction:row;border-radius:1.5rem}.expressionItemBubble{padding:.75rem}.expression{background-color:var(--inner-container);font-weight:600;margin:auto 0}.simpleItem{background-color:#c6ddff;cursor:pointer}.relationItemBubble{border:1px solid #cdcdcd;padding:.25rem;max-height:42px;margin-top:.25rem}.relationItemBubble .mat-mdc-button{border-radius:1.5rem;height:100%;margin:auto 0}.expressionValues{display:flex;flex-direction:row;gap:.5rem}.sub-expression-container{display:flex;align-items:stretch}.sub-expression-start{padding:5px;height:100%;border-left:2px solid black;border-top:2px solid black;border-bottom:2px solid black;border-radius:0}.sub-expression-end{padding:5px;height:100%;border-right:2px solid black;border-top:2px solid black;border-bottom:2px solid black;border-radius:0}.sub-expression-items{display:flex;flex-wrap:wrap}lib-advanced-relation-button{margin-top:.25rem;margin-bottom:.25rem}.delete-button{min-width:10px;
|
|
23162
|
+
], template: "<div class=\"expressionItemContainer\">\r\n <div\r\n class=\"expressionItemInnerContainer\"\r\n [ngClass]=\"\r\n item.expressionData?.currentOperation === 'EXPRESSION'\r\n ? isSelected\r\n ? 'selectedExpressionContainer'\r\n : 'expressionContainer'\r\n : ''\r\n \"\r\n >\r\n <div\r\n *ngIf=\"\r\n item.expressionData?.currentOperation === 'EXPRESSION';\r\n then expression;\r\n else simpleItem\r\n \"\r\n ></div>\r\n <ng-template #expression>\r\n <div class=\"sub-expression-container\" (click)=\"select($event, item)\">\r\n <div\r\n class=\"expressionItemBubble expression sub-expression-start\"\r\n (click)=\"select($event, item)\"\r\n ></div>\r\n <div class=\"sub-expression-items\">\r\n <app-advanced-expression-item\r\n [item]=\"subItem\"\r\n [service]=\"service()\"\r\n [hasNext]=\"i < (item.subFieldList?.filters)!.length - 1\"\r\n *ngFor=\"let subItem of item.subFieldList?.filters; let i = index\"\r\n ></app-advanced-expression-item>\r\n </div>\r\n <lib-advanced-relation-button\r\n [boolOperator]=\"item.subFieldList?.defaultOperation\"\r\n (boolOperatorChanged)=\"onOperatorChanged($event)\"\r\n ></lib-advanced-relation-button>\r\n <div class=\"expressionItemBubble expression sub-expression-end\"></div>\r\n </div>\r\n </ng-template>\r\n <ng-template #simpleItem>\r\n <div>\r\n <div\r\n (click)=\"select($event, item)\"\r\n class=\"expressionItemBubble simpleItem\"\r\n [ngClass]=\"isSelected ? 'selectedSimpleItem' : ''\"\r\n >\r\n <button mat-button class=\"mat-raised-button delete-button\" (click)=\"deleteItem($event)\"\r\n >x</button\r\n >\r\n\r\n {{ item.label }}:\r\n <div *ngIf=\"item.expressionData?.currentOperation !== 'BETWEEN'\">\r\n <div *ngIf=\"item.widgetType === 'DATE'\">\r\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDate }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType === 'DATE_TIME'\">\r\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDateTime }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE'\">\r\n <b>{{ getDisplayValue(item.expressionData!.operand2!.valueAsString!) }}</b>\r\n </div>\r\n </div>\r\n <div *ngIf=\"item.expressionData?.currentOperation === 'IN'\">\r\n <b *ngFor=\"let value of item.expressionData?.operand2?.selectedValues; let last = last\">\r\n {{ getDisplayValue(value) }} <b *ngIf=\"!last\">,</b>\r\n </b>\r\n </div>\r\n <div class=\"expressionValues\" *ngIf=\"item.expressionData?.currentOperation === 'BETWEEN'\">\r\n <div *ngIf=\"item.widgetType === 'DATE'\">\r\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDate }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType === 'DATE_TIME'\">\r\n <b>{{ item.expressionData!.operand2!.valueAsString! | smartDateTime }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE'\">\r\n <b>{{ item.expressionData?.operand2?.valueAsString }}</b>\r\n </div>\r\n <b>-</b>\r\n <div *ngIf=\"item.widgetType === 'DATE'\">\r\n <b>{{ item.expressionData!.operand3!.valueAsString! | smartDate }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType === 'DATE_TIME'\">\r\n <b>{{ item.expressionData!.operand3!.valueAsString! | smartDateTime }}</b>\r\n </div>\r\n <div *ngIf=\"item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE'\">\r\n <b>{{ item.expressionData?.operand3?.valueAsString }}</b>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: [".expressionItemContainer{display:flex;flex-direction:row;gap:.75rem}.expressionItemInnerContainer{display:flex;flex-direction:row;grid-area:.75rem;padding:.25rem;border-radius:.25rem}.expressionContainer{border:1px dashed var(--primary-lighter-gray-color);cursor:pointer}.selectedExpressionContainer{border:2px dashed var(--primary-color)}.expressionItemBubble,.relationItemBubble{display:flex;flex-direction:row;border-radius:1.5rem}.expressionItemBubble{padding:.75rem}.expression{background-color:var(--inner-container);font-weight:600;margin:auto 0}.simpleItem{background-color:#c6ddff;cursor:pointer}.relationItemBubble{border:1px solid #cdcdcd;padding:.25rem;max-height:42px;margin-top:.25rem}.relationItemBubble .mat-mdc-button{border-radius:1.5rem;height:100%;margin:auto 0}.expressionValues{display:flex;flex-direction:row;gap:.5rem}.sub-expression-container{display:flex;align-items:stretch}.sub-expression-start{padding:5px;height:100%;border-left:2px solid black;border-top:2px solid black;border-bottom:2px solid black;border-radius:0}.sub-expression-end{padding:5px;height:100%;border-right:2px solid black;border-top:2px solid black;border-bottom:2px solid black;border-radius:0}.sub-expression-items{display:flex;flex-wrap:wrap}lib-advanced-relation-button{margin-top:.25rem;margin-bottom:.25rem}.delete-button{min-width:10px;height:20px;padding:5px;border-radius:1.5rem}\n"] }]
|
|
23163
23163
|
}] });
|
|
23164
23164
|
|
|
23165
23165
|
class SmartFilterExpressionItemsComponent {
|
|
@@ -23217,14 +23217,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
23217
23217
|
class ExpressionEditorDialogComponent {
|
|
23218
23218
|
constructor() {
|
|
23219
23219
|
this.service = inject(ExpressionEditorDialogService);
|
|
23220
|
+
this._destroy$ = new Subject();
|
|
23220
23221
|
this.smartForm = this.service.form;
|
|
23222
|
+
// Reacts to any later refreshDialog() call while the dialog stays open.
|
|
23223
|
+
// On the very first run (during construction) formComponent isn't resolved yet —
|
|
23224
|
+
// that first run corresponds to the initial open, already handled by the constructor
|
|
23225
|
+
// assignment above, so it's safely skipped.
|
|
23226
|
+
effect(() => {
|
|
23227
|
+
const form = this.service.formState();
|
|
23228
|
+
if (!form || !this.formComponent) {
|
|
23229
|
+
return;
|
|
23230
|
+
}
|
|
23231
|
+
this.smartForm = form;
|
|
23232
|
+
this.formComponent.smartForm = form;
|
|
23233
|
+
this.formComponent.refresh();
|
|
23234
|
+
});
|
|
23235
|
+
}
|
|
23236
|
+
ngAfterViewInit() {
|
|
23237
|
+
this.formComponent.sophisticatedValueChange
|
|
23238
|
+
.pipe(takeUntil(this._destroy$))
|
|
23239
|
+
.subscribe((change) => {
|
|
23240
|
+
if (change.key === 'expressionData.currentOperation') {
|
|
23241
|
+
// Push data up without closing; parent recomputes and calls refreshDialog().
|
|
23242
|
+
const submittedForm = this.formComponent.submitForm(false);
|
|
23243
|
+
this.service.onSave(submittedForm.componentModel.data);
|
|
23244
|
+
}
|
|
23245
|
+
});
|
|
23246
|
+
}
|
|
23247
|
+
ngOnDestroy() {
|
|
23248
|
+
this._destroy$.next();
|
|
23249
|
+
this._destroy$.complete();
|
|
23221
23250
|
}
|
|
23222
23251
|
cancel() {
|
|
23223
23252
|
this.service.closeDialog(false);
|
|
23224
23253
|
}
|
|
23225
23254
|
save() {
|
|
23226
23255
|
let submittedForm = this.formComponent.submitForm();
|
|
23227
|
-
this.service.
|
|
23256
|
+
this.service.onSaveWithClose(submittedForm.componentModel.data);
|
|
23228
23257
|
}
|
|
23229
23258
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExpressionEditorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23230
23259
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: ExpressionEditorDialogComponent, isStandalone: true, selector: "lib-expression-editor-dialog", viewQueries: [{ propertyName: "formComponent", first: true, predicate: ["form"], descendants: true, read: SmartformComponent }], ngImport: i0, template: "<smartform #form [smartForm]=\"smartForm\"></smartform>\r\n<div class=\"button-container\">\r\n <button (click)=\"save()\" mat-raised-button color=\"primary\">Ment\u00E9s</button>\r\n <button (click)=\"cancel()\" mat-raised-button color=\"secondary\">M\u00E9gsem</button>\r\n</div>\r\n", styles: [".button-container{display:flex;justify-content:flex-end;gap:1rem}:host{display:flex;flex-direction:column;padding:1rem}:host::ng-deep h4{margin:0}:host::ng-deep .mat-mdc-form-field-infix:has(input){padding:0}\n"], dependencies: [{ kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
|
|
@@ -23238,16 +23267,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
23238
23267
|
}] } });
|
|
23239
23268
|
|
|
23240
23269
|
class ExpressionEditorDialogService extends SmartdialogService {
|
|
23270
|
+
get form() {
|
|
23271
|
+
return this.formState();
|
|
23272
|
+
}
|
|
23241
23273
|
constructor() {
|
|
23242
23274
|
const dialog = inject(MatDialog);
|
|
23243
23275
|
const inject$1 = inject(Injector);
|
|
23244
23276
|
super(dialog, inject$1);
|
|
23245
23277
|
this._destroy$ = new Subject();
|
|
23246
23278
|
this.saveEvent = new Subject();
|
|
23279
|
+
this.formState = signal(undefined, /* @ts-ignore */
|
|
23280
|
+
...(ngDevMode ? [{ debugName: "formState" }] : /* istanbul ignore next */ []));
|
|
23247
23281
|
}
|
|
23248
23282
|
setDataAndOpenDialog(form) {
|
|
23249
|
-
this.form
|
|
23250
|
-
console.log(this.form);
|
|
23283
|
+
this.formState.set(form);
|
|
23251
23284
|
this.openDialog();
|
|
23252
23285
|
}
|
|
23253
23286
|
openDialog() {
|
|
@@ -23260,11 +23293,15 @@ class ExpressionEditorDialogService extends SmartdialogService {
|
|
|
23260
23293
|
};
|
|
23261
23294
|
this.createDialog(dialogData, ExpressionEditorDialogComponent);
|
|
23262
23295
|
}
|
|
23296
|
+
refreshDialog(form) {
|
|
23297
|
+
this.formState.set(form);
|
|
23298
|
+
}
|
|
23299
|
+
onSaveWithClose(data) {
|
|
23300
|
+
this.onSave(data);
|
|
23301
|
+
this.closeDialog();
|
|
23302
|
+
}
|
|
23263
23303
|
onSave(data) {
|
|
23264
23304
|
this.saveEvent.next(data);
|
|
23265
|
-
// this.onAction.complete();
|
|
23266
|
-
this.closeDialog();
|
|
23267
|
-
// this.onAction = new SmartSubject(this._destroy$);
|
|
23268
23305
|
}
|
|
23269
23306
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExpressionEditorDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
23270
23307
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExpressionEditorDialogService, providedIn: 'root' }); }
|
|
@@ -23344,7 +23381,12 @@ class SmartFilterEditorContentComponent {
|
|
|
23344
23381
|
if (this.smartComponent && !this.service.parentSmartComponent) {
|
|
23345
23382
|
this.service.parentSmartComponent = this.smartComponent;
|
|
23346
23383
|
}
|
|
23347
|
-
this.service.modelChanged.pipe(takeUntil(this._destroy$)).subscribe(() =>
|
|
23384
|
+
this.service.modelChanged.pipe(takeUntil(this._destroy$)).subscribe(() => {
|
|
23385
|
+
this.setUp();
|
|
23386
|
+
if (this.useAdvancedFilter) {
|
|
23387
|
+
this.expressionEditorDialogService.refreshDialog(this.createFilterEditorForm());
|
|
23388
|
+
}
|
|
23389
|
+
});
|
|
23348
23390
|
this.service.load();
|
|
23349
23391
|
if (this.useAdvancedFilter) {
|
|
23350
23392
|
this.service.itemSelected.pipe(takeUntil(this._destroy$)).subscribe((item) => {
|