cat-qw-lib 0.59.2 → 0.59.4

package/fesm2022/cat-qw-lib.mjs

@@ -2539,6 +2539,22 @@ class WidgetAdminService extends BaseService {
             listLabelProperty: "name",
         },
     ];
+    /**
+     * Cleans and parses a malformed style JSON string
+     * @param {string} rawStyleStr - The raw style string from API or DB
+     * @returns {Record<string, any> | null} - Parsed style object or null if parsing fails
+     */
+    sanitizeStyleString(rawStyleStr) {
+        try {
+            rawStyleStr = rawStyleStr.replace(/""/g, '"');
+            rawStyleStr = rawStyleStr.replace(/([{,]\s*)([a-zA-Z0-9_]+)\s*:/g, '$1"$2":');
+            return JSON.parse(rawStyleStr);
+        }
+        catch (err) {
+            console.error('Failed to sanitize/parse style JSON:', err);
+            return null;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetAdminService, deps: [{ token: i1$1.HttpClient }, { token: WidgetAdminStore }, { token: AppConfigService }, { token: ListService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetAdminService, providedIn: 'root' });
 }
@@ -2714,6 +2730,15 @@ class WidgetAdminFormComponent extends BaseFormComponent {
             console.error(ERROR.INVALID_INDEX, index);
         }
     }
+    handleSubmit() {
+        this.record.style = this.service.sanitizeStyleString(typeof this.record.style === 'string' ? this.record.style : SHARED.EMPTY);
+        this.record.dataItems = this.record.dataItems.map((item) => {
+            item.style = this.service.sanitizeStyleString(typeof item.style === 'string' ? item.style : SHARED.EMPTY);
+            return item;
+        });
+        console.log(this.record);
+        super.handleSubmit();
+    }
     ngOnDestroy() {
         this.record = {};
         super.ngOnDestroy();
@@ -4157,6 +4182,17 @@ class StyleBuilderService {
             ...this.normalizeStyleObject(styleExpression),
         };
     }
+    parseStyleObject(styleStr) {
+        if (!styleStr)
+            return {};
+        try {
+            return JSON.parse(styleStr);
+        }
+        catch (e) {
+            console.warn('Failed to parse style:', styleStr);
+            return {};
+        }
+    }
     normalizeStyleObject(obj) {
         return Object.entries(obj).reduce((acc, [key, value]) => {
             if (value !== undefined && value !== '') {
@@ -4336,29 +4372,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
             }] } });
 
 class WidgetBodyComponent {
+    styleBulderService;
+    constructor(styleBulderService) {
+        this.styleBulderService = styleBulderService;
+    }
     widget;
     ngOnChanges(changes) {
         this.computeStylesForAll();
     }
+    parseStyleObject(styleStr) {
+        if (!styleStr)
+            return {};
+        try {
+            return JSON.parse(styleStr);
+        }
+        catch (e) {
+            return {};
+        }
+    }
     computeStylesForAll() {
         if (!this.widget?.dataItems)
             return;
         this.widget.dataItems.forEach((item) => {
-            console.log(item.style);
-            const base = item.style?.itemStyle || {};
-            console.log(base);
-            const expr = item.style?.styleExpression || {};
-            console.log(expr);
+            const base = this.styleBulderService.parseStyleObject(typeof item.style.itemStyle === 'string' ? item.style.itemStyle : undefined);
+            const expr = this.styleBulderService.parseStyleObject(typeof item.style.styleExpression === 'string' ? item.style.styleExpression : undefined);
             item.style.computedStyle = { ...base, ...expr };
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: WidgetBodyComponent, isStandalone: false, selector: "lib-widget-body", inputs: { widget: "widget" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"widget-body-container grid m-0\">\r\n    <div *ngFor=\"let dataItem of widget?.dataItems || []; let i = index\" [ngClass]=\"widget.style.width\">\r\n        @if(!dataItem.isHidden){\r\n        <div [ngStyle]=\"dataItem.style.computedStyle\" [ngClass]=\"(i !== ((widget.dataItems || []).length - 1)) && dataItem.style.hasSeparator ? 'widget-item-wrapper' : ''\">\r\n            <div [ngClass]=\"\r\n            dataItem?.key === 'Vulnerability' && widget.predefinedName === 'ApplicantWidget'\r\n              ? 'vulnerability-title-wrapper'\r\n              : ( i !== ((widget.dataItems || []).length - 1) ? 'widget-wrapper' : 'widget-last-wrapper' )\r\n            \" class=\"px-3\">\r\n                <lib-widget-item [widgetItem]=\"dataItem\" [widget]=\"widget\"></lib-widget-item>\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n</div>", styles: [".widget-item-wrapper{border-bottom:1px solid rgba(68,72,109,.1)}.widget-wrapper{padding:10px 0}.widget-last-wrapper{padding:10px 0 0}.vulnerability-title-wrapper{background:#fb392d36}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: WidgetItemComponent, selector: "lib-widget-item", inputs: ["widgetItem", "widget", "application"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetBodyComponent, deps: [{ token: StyleBuilderService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: WidgetBodyComponent, isStandalone: false, selector: "lib-widget-body", inputs: { widget: "widget" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"widget-body-container grid m-0\">\r\n    <div *ngFor=\"let dataItem of widget?.dataItems || []; let i = index\" [ngClass]=\"widget.style.width\">\r\n        @if(!dataItem.isHidden){\r\n        <div [ngStyle]=\"dataItem.style.computedStyle\"\r\n        [ngClass]=\"{'widget-item-wrapper': (i !== ((widget.dataItems || []).length - 1)) && dataItem.style?.hasSeparator}\">\r\n            <div [ngClass]=\"\r\n            dataItem?.key === 'Vulnerability' && widget.predefinedName === 'ApplicantWidget'\r\n              ? 'vulnerability-title-wrapper'\r\n              : ( i !== ((widget.dataItems || []).length - 1) ? 'widget-wrapper' : 'widget-last-wrapper' )\r\n            \" class=\"px-3\">\r\n                <lib-widget-item [widgetItem]=\"dataItem\" [widget]=\"widget\"></lib-widget-item>\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n</div>", styles: [".widget-item-wrapper{border-bottom:1px solid rgba(68,72,109,.1)}.widget-wrapper{padding:10px 0}.widget-last-wrapper{padding:10px 0 0}.vulnerability-title-wrapper{background:#fb392d36}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: WidgetItemComponent, selector: "lib-widget-item", inputs: ["widgetItem", "widget", "application"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-body', standalone: false, template: "<div class=\"widget-body-container grid m-0\">\r\n    <div *ngFor=\"let dataItem of widget?.dataItems || []; let i = index\" [ngClass]=\"widget.style.width\">\r\n        @if(!dataItem.isHidden){\r\n        <div [ngStyle]=\"dataItem.style.computedStyle\" [ngClass]=\"(i !== ((widget.dataItems || []).length - 1)) && dataItem.style.hasSeparator ? 'widget-item-wrapper' : ''\">\r\n            <div [ngClass]=\"\r\n            dataItem?.key === 'Vulnerability' && widget.predefinedName === 'ApplicantWidget'\r\n              ? 'vulnerability-title-wrapper'\r\n              : ( i !== ((widget.dataItems || []).length - 1) ? 'widget-wrapper' : 'widget-last-wrapper' )\r\n            \" class=\"px-3\">\r\n                <lib-widget-item [widgetItem]=\"dataItem\" [widget]=\"widget\"></lib-widget-item>\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n</div>", styles: [".widget-item-wrapper{border-bottom:1px solid rgba(68,72,109,.1)}.widget-wrapper{padding:10px 0}.widget-last-wrapper{padding:10px 0 0}.vulnerability-title-wrapper{background:#fb392d36}\n"] }]
-        }], propDecorators: { widget: [{
+            args: [{ selector: 'lib-widget-body', standalone: false, template: "<div class=\"widget-body-container grid m-0\">\r\n    <div *ngFor=\"let dataItem of widget?.dataItems || []; let i = index\" [ngClass]=\"widget.style.width\">\r\n        @if(!dataItem.isHidden){\r\n        <div [ngStyle]=\"dataItem.style.computedStyle\"\r\n        [ngClass]=\"{'widget-item-wrapper': (i !== ((widget.dataItems || []).length - 1)) && dataItem.style?.hasSeparator}\">\r\n            <div [ngClass]=\"\r\n            dataItem?.key === 'Vulnerability' && widget.predefinedName === 'ApplicantWidget'\r\n              ? 'vulnerability-title-wrapper'\r\n              : ( i !== ((widget.dataItems || []).length - 1) ? 'widget-wrapper' : 'widget-last-wrapper' )\r\n            \" class=\"px-3\">\r\n                <lib-widget-item [widgetItem]=\"dataItem\" [widget]=\"widget\"></lib-widget-item>\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n</div>", styles: [".widget-item-wrapper{border-bottom:1px solid rgba(68,72,109,.1)}.widget-wrapper{padding:10px 0}.widget-last-wrapper{padding:10px 0 0}.vulnerability-title-wrapper{background:#fb392d36}\n"] }]
+        }], ctorParameters: () => [{ type: StyleBuilderService }], propDecorators: { widget: [{
                 type: Input
             }] } });