@smartbit4all/ng-client 7.2.6 → 7.2.7
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 {
|