cat-qw-lib 0.62.4 → 0.63.6

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.
@@ -2539,6 +2539,25 @@ class WidgetAdminService extends BaseService {
2539
2539
  listLabelProperty: "name",
2540
2540
  },
2541
2541
  ];
2542
+ /**
2543
+ * Cleans and parses a malformed style JSON string
2544
+ * @param {string} rawStyleStr - The raw style string from API or DB
2545
+ * @returns {Record<string, any> | null} - Parsed style object or null if parsing fails
2546
+ */
2547
+ sanitizeStyleString(rawStyleStr) {
2548
+ try {
2549
+ if (!rawStyleStr)
2550
+ return {};
2551
+ rawStyleStr = rawStyleStr.replace(/""/g, '"');
2552
+ rawStyleStr = rawStyleStr.replace(/([{,]\s*)([a-zA-Z0-9_]+)\s*:/g, '$1"$2":');
2553
+ const parsed = JSON.parse(rawStyleStr);
2554
+ return typeof parsed === 'object' && parsed !== null ? parsed : null;
2555
+ }
2556
+ catch (err) {
2557
+ console.error('Failed to parse style string:', rawStyleStr, err);
2558
+ return null;
2559
+ }
2560
+ }
2542
2561
  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 });
2543
2562
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetAdminService, providedIn: 'root' });
2544
2563
  }
@@ -2714,6 +2733,20 @@ class WidgetAdminFormComponent extends BaseFormComponent {
2714
2733
  console.error(ERROR.INVALID_INDEX, index);
2715
2734
  }
2716
2735
  }
2736
+ handleSubmit() {
2737
+ if (typeof this.record.style === 'string') {
2738
+ const parsedStyle = this.service.sanitizeStyleString(this.record.style);
2739
+ this.record.style = parsedStyle ? parsedStyle : {};
2740
+ }
2741
+ this.record.dataItems = this.record.dataItems.map((item) => {
2742
+ if (typeof item.style === 'string') {
2743
+ const parsed = this.service.sanitizeStyleString(item.style);
2744
+ item.style = parsed ? parsed : {};
2745
+ }
2746
+ return item;
2747
+ });
2748
+ super.handleSubmit();
2749
+ }
2717
2750
  ngOnDestroy() {
2718
2751
  this.record = {};
2719
2752
  super.ngOnDestroy();
@@ -4150,13 +4183,30 @@ class StyleBuilderService {
4150
4183
  getStyle(style) {
4151
4184
  if (!style)
4152
4185
  return {};
4153
- const itemStyle = style.itemStyle || {};
4154
- const styleExpression = style.styleExpression || {};
4186
+ if (typeof style === 'string')
4187
+ style = this.parseStyleObject(style);
4188
+ const itemStyle = typeof style.itemStyle === 'string'
4189
+ ? this.parseStyleObject(style.itemStyle)
4190
+ : (style.itemStyle || {});
4191
+ const styleExpression = typeof style.styleExpression === 'string'
4192
+ ? this.parseStyleObject(style.styleExpression)
4193
+ : (style.styleExpression || {});
4155
4194
  return {
4156
4195
  ...this.normalizeStyleObject(itemStyle),
4157
4196
  ...this.normalizeStyleObject(styleExpression),
4158
4197
  };
4159
4198
  }
4199
+ parseStyleObject(styleStr) {
4200
+ if (!styleStr)
4201
+ return {};
4202
+ try {
4203
+ return JSON.parse(styleStr);
4204
+ }
4205
+ catch (e) {
4206
+ console.warn('Failed to parse style:', styleStr);
4207
+ return {};
4208
+ }
4209
+ }
4160
4210
  normalizeStyleObject(obj) {
4161
4211
  return Object.entries(obj).reduce((acc, [key, value]) => {
4162
4212
  if (value !== undefined && value !== '') {
@@ -4196,10 +4246,13 @@ class WidgetHeaderComponent {
4196
4246
  }
4197
4247
  ngOnChanges(changes) {
4198
4248
  if (this.widget && this.widget.style) {
4199
- this.headerStyle = this.styleBulderService.getStyle(this.widget.style.headerStyle);
4200
- this.subHeaderStyle = this.styleBulderService.getStyle(this.widget.style.subHeaderStyle);
4249
+ const parsedHeaderStyle = this.styleBulderService.parseStyleObject(this.widget.style.headerStyle);
4250
+ const parsedSubHeaderStyle = this.styleBulderService.parseStyleObject(this.widget.style.subHeaderStyle);
4251
+ const parsedHeaderIconStyle = this.styleBulderService.parseStyleObject(this.widget.style.headerIconStyle);
4252
+ this.headerStyle = this.styleBulderService.getItemStyle(parsedHeaderStyle);
4253
+ this.subHeaderStyle = this.styleBulderService.getItemStyle(parsedSubHeaderStyle);
4254
+ this.headerIconStyle = this.styleBulderService.getItemStyle(parsedHeaderIconStyle);
4201
4255
  this.headerIconClass = this.widget.style.headerIconClass;
4202
- this.headerIconStyle = this.styleBulderService.getStyle(this.widget.style.headerIconStyle);
4203
4256
  }
4204
4257
  }
4205
4258
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetHeaderComponent, deps: [{ token: StyleBuilderService }], target: i0.ɵɵFactoryTarget.Component });
@@ -4264,12 +4317,16 @@ class WidgetItemComponent {
4264
4317
  }
4265
4318
  ngOnChanges() {
4266
4319
  if (this.widgetItem && this.widgetItem.style) {
4267
- this.fieldValueStyle = this.styleBulderService.getStyle(this.widgetItem.style.value);
4268
- this.fieldKeyStyle = this.styleBulderService.getStyle(this.widgetItem.style.key);
4320
+ const parsedValueStyle = this.styleBulderService.parseStyleObject(this.widgetItem.style.value);
4321
+ const parsedKeyStyle = this.styleBulderService.parseStyleObject(this.widgetItem.style.key);
4322
+ const parsedKeyIconStyle = this.styleBulderService.parseStyleObject(this.widgetItem.style.keyIconStyle);
4323
+ const parsedValueIconStyle = this.styleBulderService.parseStyleObject(this.widgetItem.style.valueIconStyle);
4324
+ this.fieldValueStyle = this.styleBulderService.getItemStyle(parsedValueStyle);
4325
+ this.fieldKeyStyle = this.styleBulderService.getItemStyle(parsedKeyStyle);
4269
4326
  this.keyIconClass = this.widgetItem.style.keyIconClass;
4270
- this.keyIconStyle = this.widgetItem.style.keyIconStyle ? this.styleBulderService.getStyle(this.widgetItem.style.keyIconStyle) : {};
4327
+ this.keyIconStyle = this.widgetItem.style.keyIconStyle ? this.styleBulderService.getItemStyle(parsedKeyIconStyle) : {};
4271
4328
  this.valueIconClass = this.widgetItem.style.valueIconClass;
4272
- this.valueIconStyle = this.widgetItem.style.valueIconStyle ? this.styleBulderService.getStyle(this.widgetItem.style.valueIconStyle) : {};
4329
+ this.valueIconStyle = this.widgetItem.style.valueIconStyle ? this.styleBulderService.getItemStyle(parsedValueIconStyle) : {};
4273
4330
  this.hasSeparator = this.widgetItem.style.hasSeparator;
4274
4331
  this.isConfirmed = this.widgetItem.style.isConfirmed;
4275
4332
  }
@@ -4318,16 +4375,15 @@ class WidgetItemComponent {
4318
4375
  updatedItem.value = applicantId;
4319
4376
  break;
4320
4377
  }
4321
- console.log(this.widget);
4322
4378
  this.widgetStore.setWidgetData(this.widget);
4323
4379
  this.widgetStore.setOnWidgetItemClick(updatedItem);
4324
4380
  }
4325
4381
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetItemComponent, deps: [{ token: StyleBuilderService }, { token: WidgetStore }, { token: WidgetQuery }], target: i0.ɵɵFactoryTarget.Component });
4326
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: WidgetItemComponent, isStandalone: false, selector: "lib-widget-item", inputs: { widgetItem: "widgetItem", widget: "widget", application: "application" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"widget-container\" [class.border-bottom]=\"hasSeparator\">\r\n <div class=\"widget-content\"\r\n [ngClass]=\"{\r\n 'layout-row': widget.layoutType === 'row',\r\n 'layout-tile m-0': widget.layoutType === 'tile'\r\n }\">\r\n <div class=\"flex align-items-center justify-content-between\">\r\n <div class=\"w-full\">\r\n <i *ngIf=\"keyIconClass\" classs=\"keyIconClass\" [ngStyle]=\"keyIconStyle\"></i>\r\n <p *ngIf=\"!isMenu\" [ngStyle]=\"fieldKeyStyle\" class=\"mb-0 text-color-secondary mr-3 key-field-wrapper w-50\">{{ widgetItem?.key }}</p>\r\n <p *ngIf=\"isMenu\" [ngStyle]=\"fieldKeyStyle\" (click)=\"handleDynamicEvent(widget.recordId)\"\r\n class=\"mb-0 text-color-secondary mr-3 key-field-wrapper w-50\">{{ widgetItem?.key }}</p>\r\n </div>\r\n <div *ngIf=\"isConfirmed\">\r\n <i class=\"pi pi-check check-icon-wrapper\"></i>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mb-0 text-color font-semibold text-value-wrapper w-50\"\r\n [ngClass]=\"{\r\n 'flex align-items-center justify-content-end': widget.layoutType === 'row'\r\n }\">\r\n <i *ngIf=\"valueIconClass\" classs=\"valueIconClass\" [ngStyle]=\"valueIconStyle\"></i>\r\n <p class=\"key-field-wrapper\">\r\n <ng-container *ngIf=\"widgetItem.isEvent; else notEvent\">\r\n <a\r\n class=\"cursor-pointer\"\r\n [ngStyle]=\"fieldValueStyle\"\r\n (click)=\"handleDynamicEvent(widget.recordId)\"\r\n >\r\n {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n </a>\r\n </ng-container>\r\n\r\n <ng-template #notEvent>\r\n <ng-container *ngIf=\"widgetItem.isLink; else plainText\">\r\n <a\r\n class=\"cursor-pointer\"\r\n [ngStyle]=\"fieldValueStyle\"\r\n (click)=\"handleWidgetItemClick(widgetItem)\"\r\n >\r\n {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n </a>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <ng-template #plainText>\r\n <span [ngStyle]=\"fieldValueStyle\">\r\n {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n </span>\r\n </ng-template>\r\n </p>\r\n </div>\r\n </div>\r\n</div>", styles: [".text-value-wrapper{-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:100%}.key-field-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.w-50{width:50%!important}.map-icon-wrapper{font-size:16px;padding:13px;border-radius:30px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.address-title-wrapper{width:80%;word-break:break-word;margin-top:-12px}.border-bottom{border-bottom:1px solid rgba(76,98,146,.1)}.check-icon-wrapper{border-radius:50%;background:#22c55e;padding:8px}.widget-content.layout-row{display:flex;flex-direction:row;align-items:center;gap:.5rem}.widget-content.layout-tile{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;row-gap:.5rem;align-items:start;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
4382
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: WidgetItemComponent, isStandalone: false, selector: "lib-widget-item", inputs: { widgetItem: "widgetItem", widget: "widget", application: "application" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"widget-container\" [class.border-bottom]=\"hasSeparator\">\r\n <div class=\"widget-content\"\r\n [ngClass]=\"{\r\n 'layout-row': widget.layoutType === 'row',\r\n 'layout-tile m-0': widget.layoutType === 'tile'\r\n }\">\r\n <div class=\"flex align-items-center justify-content-between w-full\">\r\n <div class=\"w-full\">\r\n <i *ngIf=\"keyIconClass\" classs=\"keyIconClass\" [ngStyle]=\"keyIconStyle\"></i>\r\n <p *ngIf=\"!isMenu\" [ngStyle]=\"fieldKeyStyle\" class=\"mb-0 mr-3 key-field-wrapper\">{{ widgetItem?.key }}</p>\r\n <p *ngIf=\"isMenu\" [ngStyle]=\"fieldKeyStyle\" (click)=\"handleDynamicEvent(widget.recordId)\"\r\n class=\"mb-0 mr-3 key-field-wrapper\">{{ widgetItem?.key }}</p>\r\n </div>\r\n <div *ngIf=\"isConfirmed\">\r\n <i class=\"pi pi-check check-icon-wrapper\"></i>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mb-0 text-color font-semibold text-value-wrapper w-full\"\r\n [ngClass]=\"{'flex align-items-center justify-content-end': widget.layoutType === 'row'}\">\r\n <i *ngIf=\"valueIconClass\" classs=\"valueIconClass\" [ngStyle]=\"valueIconStyle\"></i>\r\n <p class=\"key-field-wrapper\">\r\n <ng-container *ngIf=\"widgetItem.isEvent; else notEvent\">\r\n <a\r\n class=\"cursor-pointer\"\r\n [ngStyle]=\"fieldValueStyle\"\r\n (click)=\"handleDynamicEvent(widget.recordId)\"\r\n >\r\n {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n </a>\r\n </ng-container>\r\n\r\n <ng-template #notEvent>\r\n <ng-container *ngIf=\"widgetItem.isLink; else plainText\">\r\n <a\r\n class=\"cursor-pointer\"\r\n [ngStyle]=\"fieldValueStyle\"\r\n (click)=\"handleWidgetItemClick(widgetItem)\"\r\n >\r\n {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n </a>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <ng-template #plainText>\r\n <span [ngStyle]=\"fieldValueStyle\">\r\n {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n </span>\r\n </ng-template>\r\n </p>\r\n </div>\r\n </div>\r\n</div>", styles: [".text-value-wrapper{-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:100%}.key-field-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#4b5563}.w-50{width:50%!important}.map-icon-wrapper{font-size:16px;padding:13px;border-radius:30px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.address-title-wrapper{width:80%;word-break:break-word;margin-top:-12px}.border-bottom{border-bottom:1px solid rgba(76,98,146,.1)}.check-icon-wrapper{border-radius:50%;background:#22c55e;padding:8px}.widget-content.layout-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem}.widget-content.layout-tile{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;row-gap:.5rem;align-items:start;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
4327
4383
  }
4328
4384
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetItemComponent, decorators: [{
4329
4385
  type: Component,
4330
- args: [{ selector: 'lib-widget-item', standalone: false, template: "<div class=\"widget-container\" [class.border-bottom]=\"hasSeparator\">\r\n <div class=\"widget-content\"\r\n [ngClass]=\"{\r\n 'layout-row': widget.layoutType === 'row',\r\n 'layout-tile m-0': widget.layoutType === 'tile'\r\n }\">\r\n <div class=\"flex align-items-center justify-content-between\">\r\n <div class=\"w-full\">\r\n <i *ngIf=\"keyIconClass\" classs=\"keyIconClass\" [ngStyle]=\"keyIconStyle\"></i>\r\n <p *ngIf=\"!isMenu\" [ngStyle]=\"fieldKeyStyle\" class=\"mb-0 text-color-secondary mr-3 key-field-wrapper w-50\">{{ widgetItem?.key }}</p>\r\n <p *ngIf=\"isMenu\" [ngStyle]=\"fieldKeyStyle\" (click)=\"handleDynamicEvent(widget.recordId)\"\r\n class=\"mb-0 text-color-secondary mr-3 key-field-wrapper w-50\">{{ widgetItem?.key }}</p>\r\n </div>\r\n <div *ngIf=\"isConfirmed\">\r\n <i class=\"pi pi-check check-icon-wrapper\"></i>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mb-0 text-color font-semibold text-value-wrapper w-50\"\r\n [ngClass]=\"{\r\n 'flex align-items-center justify-content-end': widget.layoutType === 'row'\r\n }\">\r\n <i *ngIf=\"valueIconClass\" classs=\"valueIconClass\" [ngStyle]=\"valueIconStyle\"></i>\r\n <p class=\"key-field-wrapper\">\r\n <ng-container *ngIf=\"widgetItem.isEvent; else notEvent\">\r\n <a\r\n class=\"cursor-pointer\"\r\n [ngStyle]=\"fieldValueStyle\"\r\n (click)=\"handleDynamicEvent(widget.recordId)\"\r\n >\r\n {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n </a>\r\n </ng-container>\r\n\r\n <ng-template #notEvent>\r\n <ng-container *ngIf=\"widgetItem.isLink; else plainText\">\r\n <a\r\n class=\"cursor-pointer\"\r\n [ngStyle]=\"fieldValueStyle\"\r\n (click)=\"handleWidgetItemClick(widgetItem)\"\r\n >\r\n {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n </a>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <ng-template #plainText>\r\n <span [ngStyle]=\"fieldValueStyle\">\r\n {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n </span>\r\n </ng-template>\r\n </p>\r\n </div>\r\n </div>\r\n</div>", styles: [".text-value-wrapper{-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:100%}.key-field-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.w-50{width:50%!important}.map-icon-wrapper{font-size:16px;padding:13px;border-radius:30px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.address-title-wrapper{width:80%;word-break:break-word;margin-top:-12px}.border-bottom{border-bottom:1px solid rgba(76,98,146,.1)}.check-icon-wrapper{border-radius:50%;background:#22c55e;padding:8px}.widget-content.layout-row{display:flex;flex-direction:row;align-items:center;gap:.5rem}.widget-content.layout-tile{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;row-gap:.5rem;align-items:start;margin:0}\n"] }]
4386
+ args: [{ selector: 'lib-widget-item', standalone: false, template: "<div class=\"widget-container\" [class.border-bottom]=\"hasSeparator\">\r\n <div class=\"widget-content\"\r\n [ngClass]=\"{\r\n 'layout-row': widget.layoutType === 'row',\r\n 'layout-tile m-0': widget.layoutType === 'tile'\r\n }\">\r\n <div class=\"flex align-items-center justify-content-between w-full\">\r\n <div class=\"w-full\">\r\n <i *ngIf=\"keyIconClass\" classs=\"keyIconClass\" [ngStyle]=\"keyIconStyle\"></i>\r\n <p *ngIf=\"!isMenu\" [ngStyle]=\"fieldKeyStyle\" class=\"mb-0 mr-3 key-field-wrapper\">{{ widgetItem?.key }}</p>\r\n <p *ngIf=\"isMenu\" [ngStyle]=\"fieldKeyStyle\" (click)=\"handleDynamicEvent(widget.recordId)\"\r\n class=\"mb-0 mr-3 key-field-wrapper\">{{ widgetItem?.key }}</p>\r\n </div>\r\n <div *ngIf=\"isConfirmed\">\r\n <i class=\"pi pi-check check-icon-wrapper\"></i>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mb-0 text-color font-semibold text-value-wrapper w-full\"\r\n [ngClass]=\"{'flex align-items-center justify-content-end': widget.layoutType === 'row'}\">\r\n <i *ngIf=\"valueIconClass\" classs=\"valueIconClass\" [ngStyle]=\"valueIconStyle\"></i>\r\n <p class=\"key-field-wrapper\">\r\n <ng-container *ngIf=\"widgetItem.isEvent; else notEvent\">\r\n <a\r\n class=\"cursor-pointer\"\r\n [ngStyle]=\"fieldValueStyle\"\r\n (click)=\"handleDynamicEvent(widget.recordId)\"\r\n >\r\n {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n </a>\r\n </ng-container>\r\n\r\n <ng-template #notEvent>\r\n <ng-container *ngIf=\"widgetItem.isLink; else plainText\">\r\n <a\r\n class=\"cursor-pointer\"\r\n [ngStyle]=\"fieldValueStyle\"\r\n (click)=\"handleWidgetItemClick(widgetItem)\"\r\n >\r\n {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n </a>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <ng-template #plainText>\r\n <span [ngStyle]=\"fieldValueStyle\">\r\n {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n </span>\r\n </ng-template>\r\n </p>\r\n </div>\r\n </div>\r\n</div>", styles: [".text-value-wrapper{-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:100%}.key-field-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#4b5563}.w-50{width:50%!important}.map-icon-wrapper{font-size:16px;padding:13px;border-radius:30px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.address-title-wrapper{width:80%;word-break:break-word;margin-top:-12px}.border-bottom{border-bottom:1px solid rgba(76,98,146,.1)}.check-icon-wrapper{border-radius:50%;background:#22c55e;padding:8px}.widget-content.layout-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem}.widget-content.layout-tile{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;row-gap:.5rem;align-items:start;margin:0}\n"] }]
4331
4387
  }], ctorParameters: () => [{ type: StyleBuilderService }, { type: WidgetStore }, { type: WidgetQuery }], propDecorators: { widgetItem: [{
4332
4388
  type: Input
4333
4389
  }], widget: [{
@@ -4337,29 +4393,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
4337
4393
  }] } });
4338
4394
 
4339
4395
  class WidgetBodyComponent {
4396
+ styleBulderService;
4397
+ constructor(styleBulderService) {
4398
+ this.styleBulderService = styleBulderService;
4399
+ }
4340
4400
  widget;
4401
+ hasBackgroundColor = false;
4402
+ widgetStyle = {};
4341
4403
  ngOnChanges(changes) {
4342
- this.computeStylesForAll();
4343
- }
4404
+ if (this.widget && this.widget.style) {
4405
+ const parsedWidgetStyle = this.styleBulderService.parseStyleObject(this.widget.style.widgetStyle);
4406
+ this.hasBackgroundColor = !!parsedWidgetStyle?.['backgroundColor'];
4407
+ this.widgetStyle = this.styleBulderService.getItemStyle(parsedWidgetStyle);
4408
+ }
4409
+ // this.computeStylesForAll();
4410
+ }
4411
+ // parseStyleObject(styleStr?: string): { [key: string]: any } {
4412
+ // if (!styleStr) return {};
4413
+ // try {
4414
+ // return JSON.parse(styleStr);
4415
+ // } catch (e) {
4416
+ // return {};
4417
+ // }
4418
+ // }
4344
4419
  computeStylesForAll() {
4345
4420
  if (!this.widget?.dataItems)
4346
4421
  return;
4347
- this.widget.dataItems.forEach((item) => {
4348
- console.log(item.style);
4349
- const base = item.style?.itemStyle || {};
4350
- console.log(base);
4351
- const expr = item.style?.styleExpression || {};
4352
- console.log(expr);
4353
- item.style.computedStyle = { ...base, ...expr };
4354
- });
4355
- }
4356
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4357
- 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"] }] });
4422
+ // this.widget.dataItems.forEach((item: WidgetItem) => {
4423
+ // const base = this.styleBulderService.parseStyleObject(
4424
+ // typeof item.style.itemStyle === 'string' ? item.style.itemStyle : undefined
4425
+ // );
4426
+ // const expr = this.styleBulderService.parseStyleObject(
4427
+ // typeof item.style.styleExpression === 'string' ? item.style.styleExpression : undefined
4428
+ // );
4429
+ // item.style.computedStyle = { ...base, ...expr };
4430
+ // });
4431
+ }
4432
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetBodyComponent, deps: [{ token: StyleBuilderService }], target: i0.ɵɵFactoryTarget.Component });
4433
+ 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]=\"widgetStyle\" [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) || hasBackgroundColor ? '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"] }] });
4358
4434
  }
4359
4435
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetBodyComponent, decorators: [{
4360
4436
  type: Component,
4361
- 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"] }]
4362
- }], propDecorators: { widget: [{
4437
+ 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]=\"widgetStyle\" [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) || hasBackgroundColor ? '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"] }]
4438
+ }], ctorParameters: () => [{ type: StyleBuilderService }], propDecorators: { widget: [{
4363
4439
  type: Input
4364
4440
  }] } });
4365
4441
 
@@ -4742,6 +4818,7 @@ class WidgetMenuItemComponent {
4742
4818
  updatedItem.value = applicantId;
4743
4819
  break;
4744
4820
  }
4821
+ this.widgetStore.setWidgetData(this.widget);
4745
4822
  this.widgetStore.setOnWidgetItemClick(updatedItem);
4746
4823
  }
4747
4824
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetMenuItemComponent, deps: [{ token: StyleBuilderService }, { token: WidgetStore }], target: i0.ɵɵFactoryTarget.Component });
@@ -4761,11 +4838,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
4761
4838
  class WidgetMenuBodyComponent {
4762
4839
  widget;
4763
4840
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetMenuBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4764
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: WidgetMenuBodyComponent, isStandalone: false, selector: "lib-widget-menu-body", inputs: { widget: "widget" }, ngImport: i0, template: "<div class=\"widget-body-container\">\r\n <div *ngFor=\"let dataItem of widget?.dataItems || []; let i = index\">\r\n @if(!dataItem.isHidden){\r\n <div [ngClass]=\"i !== ((widget.dataItems || []).length - 1) ? '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-menu-item [widgetItem]=\"dataItem\" [widget]=\"widget\"></lib-widget-menu-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: "component", type: WidgetMenuItemComponent, selector: "lib-widget-menu-item", inputs: ["widgetItem", "widget", "application"] }] });
4841
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: WidgetMenuBodyComponent, isStandalone: false, selector: "lib-widget-menu-body", inputs: { widget: "widget" }, ngImport: i0, template: "<div class=\"widget-body-container\">\r\n <div *ngFor=\"let dataItem of widget?.dataItems || []; let i = index\">\r\n @if(!dataItem.isHidden){\r\n <div [ngClass]=\"i !== ((widget.dataItems || []).length - 1) ? '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-menu-item [widgetItem]=\"dataItem\" [widget]=\"widget\"></lib-widget-menu-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}.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: "component", type: WidgetMenuItemComponent, selector: "lib-widget-menu-item", inputs: ["widgetItem", "widget", "application"] }] });
4765
4842
  }
4766
4843
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetMenuBodyComponent, decorators: [{
4767
4844
  type: Component,
4768
- args: [{ selector: 'lib-widget-menu-body', standalone: false, template: "<div class=\"widget-body-container\">\r\n <div *ngFor=\"let dataItem of widget?.dataItems || []; let i = index\">\r\n @if(!dataItem.isHidden){\r\n <div [ngClass]=\"i !== ((widget.dataItems || []).length - 1) ? '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-menu-item [widgetItem]=\"dataItem\" [widget]=\"widget\"></lib-widget-menu-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"] }]
4845
+ args: [{ selector: 'lib-widget-menu-body', standalone: false, template: "<div class=\"widget-body-container\">\r\n <div *ngFor=\"let dataItem of widget?.dataItems || []; let i = index\">\r\n @if(!dataItem.isHidden){\r\n <div [ngClass]=\"i !== ((widget.dataItems || []).length - 1) ? '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-menu-item [widgetItem]=\"dataItem\" [widget]=\"widget\"></lib-widget-menu-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}.vulnerability-title-wrapper{background:#fb392d36}\n"] }]
4769
4846
  }], propDecorators: { widget: [{
4770
4847
  type: Input
4771
4848
  }] } });
@@ -4835,7 +4912,6 @@ class WidgetMenuContainerComponent {
4835
4912
  .pipe(takeUntil(this.destroy$))
4836
4913
  .subscribe((res) => {
4837
4914
  if (res) {
4838
- console.log("widget=>", res);
4839
4915
  this.getWidgetData.emit(res);
4840
4916
  }
4841
4917
  }, (error) => {