cat-qw-lib 2.3.33 → 2.3.35

package/fesm2022/cat-qw-lib.mjs

@@ -5439,6 +5439,12 @@ class WidgetHeaderComponent {
     subHeaderStyle = {};
     headerIconStyle = {};
     headerIconClass;
+    processedBadges = [];
+    widgetStatusIconClass;
+    widgetStatusIconClassExpression;
+    widgetStatusIconStyle = {};
+    widgetStatusIconStyleExpression = {};
+    mergedWidgetStatusIconStyle = {};
     constructor(styleBulderService) {
         this.styleBulderService = styleBulderService;
     }
@@ -5452,13 +5458,97 @@ class WidgetHeaderComponent {
             this.headerIconStyle = this.styleBulderService.getItemStyle(parsedHeaderIconStyle);
             this.headerIconClass = this.widget.style.headerIconClass;
         }
+        // Process widget status icon
+        this.processWidgetStatusIcon();
+        // Process badges
+        this.processBadges();
+    }
+    processWidgetStatusIcon() {
+        // Process widget status icon class (static)
+        this.widgetStatusIconClass = this.widget?.widgetStatusIconClass || '';
+        // Process widget status icon class expression (dynamic)
+        this.widgetStatusIconClassExpression = this.widget?.widgetStatusIconClassExpression
+            ? this.widget.widgetStatusIconClassExpression.replace(/^['"]+|['"]+$/g, '')
+            : '';
+        // Process widget status icon style (static)
+        if (this.widget?.widgetStatusIconStyle) {
+            const parsedWidgetStatusIconStyle = this.styleBulderService.parseStyleObject(this.widget.widgetStatusIconStyle);
+            this.widgetStatusIconStyle = this.styleBulderService.getItemStyle(parsedWidgetStatusIconStyle);
+        }
+        else {
+            this.widgetStatusIconStyle = {};
+        }
+        // Process widget status icon style expression (dynamic)
+        if (this.widget?.widgetStatusIconStyleExpression) {
+            const parsedWidgetStatusIconStyleExpression = this.styleBulderService.parseStyleObject(this.widget.widgetStatusIconStyleExpression);
+            this.widgetStatusIconStyleExpression = this.styleBulderService.getItemStyle(parsedWidgetStatusIconStyleExpression);
+        }
+        else {
+            this.widgetStatusIconStyleExpression = {};
+        }
+        // Merge icon styles
+        this.mergedWidgetStatusIconStyle = {
+            ...this.widgetStatusIconStyle,
+            ...this.widgetStatusIconStyleExpression
+        };
+    }
+    processBadges() {
+        this.processedBadges = [];
+        if (this.widget && this.widget.badges && Array.isArray(this.widget.badges)) {
+            this.processedBadges = this.widget.badges.map((badge) => {
+                const badgeStyle = badge.style || {};
+                const processedBadge = {
+                    value: badge.value || '',
+                    valueClass: badgeStyle.valueClass || '',
+                    badgeStyle: {},
+                    valueIconClass: badgeStyle.valueIconClass,
+                    valueIconStyle: {},
+                    valueIconClassExpression: badgeStyle.valueIconClassExpression,
+                    valueIconStyleExpression: {},
+                    mergedValueIconStyle: {}
+                };
+                // Parse and apply badge styles
+                if (badgeStyle.value) {
+                    const parsedValueStyle = this.styleBulderService.parseStyleObject(badgeStyle.value);
+                    processedBadge.badgeStyle = this.styleBulderService.getItemStyle(parsedValueStyle);
+                }
+                // Parse style expression if present
+                if (badgeStyle.styleExpression) {
+                    const parsedStyleExpression = this.styleBulderService.parseStyleObject(badgeStyle.styleExpression);
+                    const styleExpressionObj = this.styleBulderService.getItemStyle(parsedStyleExpression);
+                    processedBadge.badgeStyle = { ...processedBadge.badgeStyle, ...styleExpressionObj };
+                }
+                // Parse item style if present
+                if (badgeStyle.itemStyle) {
+                    const parsedItemStyle = this.styleBulderService.parseStyleObject(badgeStyle.itemStyle);
+                    const itemStyleObj = this.styleBulderService.getItemStyle(parsedItemStyle);
+                    processedBadge.badgeStyle = { ...processedBadge.badgeStyle, ...itemStyleObj };
+                }
+                // Parse value icon style
+                if (badgeStyle.valueIconStyle) {
+                    const parsedValueIconStyle = this.styleBulderService.parseStyleObject(badgeStyle.valueIconStyle);
+                    processedBadge.valueIconStyle = this.styleBulderService.getItemStyle(parsedValueIconStyle);
+                }
+                // Parse value icon style expression
+                if (badgeStyle.valueIconStyleExpression) {
+                    const parsedValueIconStyleExpression = this.styleBulderService.parseStyleObject(badgeStyle.valueIconStyleExpression);
+                    processedBadge.valueIconStyleExpression = this.styleBulderService.getItemStyle(parsedValueIconStyleExpression);
+                }
+                // Merge icon styles
+                processedBadge.mergedValueIconStyle = {
+                    ...processedBadge.valueIconStyle,
+                    ...processedBadge.valueIconStyleExpression
+                };
+                return processedBadge;
+            });
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetHeaderComponent, deps: [{ token: StyleBuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WidgetHeaderComponent, isStandalone: false, selector: "lib-widget-header", inputs: { widget: "widget" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"widget.header || widget.subHeader\" class=\"grid m-0 align-items-center justify-content-between px-3 pt-3\">\r\n  <div class=\"col-12 p-0\">\r\n    <div class=\"flex align-items-center\">\r\n      <i [class]=\"headerIconClass\" [ngStyle]=\"headerIconStyle\"></i>\r\n      <h3 [ngStyle]=\"headerStyle\" class=\"m-0 application-title-wrapper\">\r\n        {{ (widget.header) }}\r\n      </h3>\r\n    </div>\r\n    <div *ngIf=\"widget?.subHeader\" class=\"flex align-items-center mt-2\">\r\n      <span [ngStyle]=\"subHeaderStyle\" class=\"mr-3 font-semibold\">{{ widget.subHeader }}</span>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}.application-title-wrapper{font-size:16px;font-weight:600}.chart-container{display:flex;flex-direction:column;align-items:center;justify-content:center}@media screen and (min-width: 1200px) and (max-width: 1800px){.application-title-wrapper{font-size:14px}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WidgetHeaderComponent, isStandalone: false, selector: "lib-widget-header", inputs: { widget: "widget" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"widget.header || widget.subHeader\" class=\"grid m-0 align-items-center justify-content-between px-3 pt-3\">\r\n  <div class=\"col-12 p-0\">\r\n    <div class=\"flex align-items-center justify-content-between\">\r\n    <div class=\"flex align-items-center\">\r\n      <i [class]=\"headerIconClass\" [ngStyle]=\"headerIconStyle\"></i>\r\n      <h3 [ngStyle]=\"headerStyle\" class=\"m-0 application-title-wrapper\">\r\n        {{ (widget.header) }}\r\n      </h3>\r\n\r\n      <!-- Badges -->\r\n      <div *ngIf=\"processedBadges && processedBadges.length > 0\" class=\"flex align-items-center ml-2\">\r\n        <span *ngFor=\"let badge of processedBadges\" \r\n              class=\"px-2 py-1 rounded font-semibold badge ml-2\"\r\n              [ngClass]=\"badge.valueClass\"\r\n              [ngStyle]=\"badge.badgeStyle\">\r\n          <i *ngIf=\"badge.valueIconClass\" \r\n             [ngClass]=\"badge.valueIconClass\" \r\n             [ngStyle]=\"badge.mergedValueIconStyle\"\r\n             class=\"mr-1\"></i>\r\n          <i *ngIf=\"badge.valueIconClassExpression\" \r\n             [ngClass]=\"badge.valueIconClassExpression\" \r\n             [ngStyle]=\"badge.mergedValueIconStyle\"\r\n             class=\"mr-1\"></i>\r\n          {{ badge.value !== 'null' ? badge.value : '' }}\r\n        </span>\r\n      </div>\r\n      </div>\r\n\r\n      <!-- Widget Status Icon -->\r\n      <div class=\"flex align-items-center\">\r\n        <i *ngIf=\"widgetStatusIconClass\" [ngClass]=\"widgetStatusIconClass\" [ngStyle]=\"mergedWidgetStatusIconStyle\"></i>\r\n        <i *ngIf=\"widgetStatusIconClassExpression\" [ngClass]=\"widgetStatusIconClassExpression\" [ngStyle]=\"mergedWidgetStatusIconStyle\"></i>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"widget?.subHeader\" class=\"flex align-items-center mt-2\">\r\n      <span [ngStyle]=\"subHeaderStyle\" class=\"mr-3 font-semibold\">{{ widget.subHeader }}</span>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}.application-title-wrapper{font-size:16px;font-weight:600}.chart-container{display:flex;flex-direction:column;align-items:center;justify-content:center}@media screen and (min-width: 1200px) and (max-width: 1800px){.application-title-wrapper{font-size:14px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-header', standalone: false, template: "<div *ngIf=\"widget.header || widget.subHeader\" class=\"grid m-0 align-items-center justify-content-between px-3 pt-3\">\r\n  <div class=\"col-12 p-0\">\r\n    <div class=\"flex align-items-center\">\r\n      <i [class]=\"headerIconClass\" [ngStyle]=\"headerIconStyle\"></i>\r\n      <h3 [ngStyle]=\"headerStyle\" class=\"m-0 application-title-wrapper\">\r\n        {{ (widget.header) }}\r\n      </h3>\r\n    </div>\r\n    <div *ngIf=\"widget?.subHeader\" class=\"flex align-items-center mt-2\">\r\n      <span [ngStyle]=\"subHeaderStyle\" class=\"mr-3 font-semibold\">{{ widget.subHeader }}</span>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}.application-title-wrapper{font-size:16px;font-weight:600}.chart-container{display:flex;flex-direction:column;align-items:center;justify-content:center}@media screen and (min-width: 1200px) and (max-width: 1800px){.application-title-wrapper{font-size:14px}}\n"] }]
+            args: [{ selector: 'lib-widget-header', standalone: false, template: "<div *ngIf=\"widget.header || widget.subHeader\" class=\"grid m-0 align-items-center justify-content-between px-3 pt-3\">\r\n  <div class=\"col-12 p-0\">\r\n    <div class=\"flex align-items-center justify-content-between\">\r\n    <div class=\"flex align-items-center\">\r\n      <i [class]=\"headerIconClass\" [ngStyle]=\"headerIconStyle\"></i>\r\n      <h3 [ngStyle]=\"headerStyle\" class=\"m-0 application-title-wrapper\">\r\n        {{ (widget.header) }}\r\n      </h3>\r\n\r\n      <!-- Badges -->\r\n      <div *ngIf=\"processedBadges && processedBadges.length > 0\" class=\"flex align-items-center ml-2\">\r\n        <span *ngFor=\"let badge of processedBadges\" \r\n              class=\"px-2 py-1 rounded font-semibold badge ml-2\"\r\n              [ngClass]=\"badge.valueClass\"\r\n              [ngStyle]=\"badge.badgeStyle\">\r\n          <i *ngIf=\"badge.valueIconClass\" \r\n             [ngClass]=\"badge.valueIconClass\" \r\n             [ngStyle]=\"badge.mergedValueIconStyle\"\r\n             class=\"mr-1\"></i>\r\n          <i *ngIf=\"badge.valueIconClassExpression\" \r\n             [ngClass]=\"badge.valueIconClassExpression\" \r\n             [ngStyle]=\"badge.mergedValueIconStyle\"\r\n             class=\"mr-1\"></i>\r\n          {{ badge.value !== 'null' ? badge.value : '' }}\r\n        </span>\r\n      </div>\r\n      </div>\r\n\r\n      <!-- Widget Status Icon -->\r\n      <div class=\"flex align-items-center\">\r\n        <i *ngIf=\"widgetStatusIconClass\" [ngClass]=\"widgetStatusIconClass\" [ngStyle]=\"mergedWidgetStatusIconStyle\"></i>\r\n        <i *ngIf=\"widgetStatusIconClassExpression\" [ngClass]=\"widgetStatusIconClassExpression\" [ngStyle]=\"mergedWidgetStatusIconStyle\"></i>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"widget?.subHeader\" class=\"flex align-items-center mt-2\">\r\n      <span [ngStyle]=\"subHeaderStyle\" class=\"mr-3 font-semibold\">{{ widget.subHeader }}</span>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}.application-title-wrapper{font-size:16px;font-weight:600}.chart-container{display:flex;flex-direction:column;align-items:center;justify-content:center}@media screen and (min-width: 1200px) and (max-width: 1800px){.application-title-wrapper{font-size:14px}}\n"] }]
         }], ctorParameters: () => [{ type: StyleBuilderService }], propDecorators: { widget: [{
                 type: Input
             }] } });