RED-8342 - Component Editor not showing all values for a multi-value-component

src/assets/styles/common-inputs.scss

@@ -231,7 +231,7 @@ iqser-dynamic-input {
 
     &.required label:after {
         content: ' *';
-        color: var(--iqser-primary);
+        color: var(--iqser-red-1);
     }
 
     &.datepicker-wrapper {

src/lib/inputs/details-radio/details-radio-option.ts

@@ -3,6 +3,7 @@ interface ExtraOption {
     checked: boolean;
     hidden?: boolean;
     disabled?: boolean;
+    description?: string;
 }
 
 export interface DetailsRadioOption<I> {

src/lib/inputs/details-radio/details-radio.component.html

@@ -27,6 +27,11 @@
                     >
                         {{ option.extraOption.label | translate }}
                     </mat-checkbox>
+                    <span
+                        *ngIf="option.extraOption.description"
+                        [innerHTML]="option.extraOption.description | translate"
+                        class="hint extra-option-description"
+                    ></span>
                 </div>
             </div>
 

src/lib/inputs/details-radio/details-radio.component.scss

@@ -42,6 +42,11 @@ label {
             color: var(--iqser-primary);
         }
     }
+
+    .extra-option-description {
+        margin-left: 23px;
+        opacity: 0.49;
+    }
 }
 
 .row {

src/lib/inputs/editable-input/editable-input.component.html

@@ -1,6 +1,7 @@
 <ng-container *ngIf="!editing">
     <div *ngIf="showPreview">
-        {{ value }}
+        <li *ngIf="listValue; else simpleValue">{{ value }}</li>
+        <ng-template #simpleValue> {{ value }} </ng-template>
     </div>
 
     <div class="flex">
@@ -35,8 +36,8 @@
                     [placeholder]="placeholder"
                     [id]="id"
                     name="name"
-                    [style.width]="this.textArea.width + 'px'"
+                    [style.width]="this.parentDimensions?.width + 'px'"
-                    [style.height]="this.textArea.height + 'px'"
+                    [style.height]="this.parentDimensions?.height + 'px'"
                 ></textarea>
             </ng-template>
         </div>

src/lib/inputs/editable-input/editable-input.component.ts

@@ -25,8 +25,9 @@ export class EditableInputComponent implements OnChanges {
     @Input() buttonsType: CircleButtonType = CircleButtonTypes.default;
     @Input() helpModeKey: string = '';
     @Input() lastChild = false;
+    @Input() listValue = false;
     @Output() readonly save = new EventEmitter<string>();
-    textArea?: { width: number; height: number };
+    parentDimensions?: { width: number; height: number };
     newValue = '';
 
     private _editing = false;
@@ -45,23 +46,10 @@ export class EditableInputComponent implements OnChanges {
         if (changes['value']) {
             this.editing = false;
         }
-        if (changes['parentId']?.currentValue) {
-            this.setTextAreaSize();
-        }
-    }
-
-    setTextAreaSize() {
         setTimeout(() => {
-            const element = document.getElementById(this.id as string) as HTMLElement;
+            const parent = document.getElementById(this.parentId as string) as HTMLElement;
-            const parentElement = document.getElementById(this.parentId as string) as HTMLElement;
+            this.parentDimensions = { width: parent.offsetWidth - 98, height: parent.offsetHeight - 16 };
-            const width = parentElement.offsetWidth - 98;
+        }, 20);
-            let height = (this.lastChild ? parentElement.offsetHeight : element.offsetHeight) - 16;
-            if (this.lastChild) {
-                const lastChildIndex = Number(this.id?.split('-')[2]);
-                height = height - lastChildIndex * element.offsetHeight;
-            }
-            this.textArea = { width, height };
-        }, 50);
     }
 
     saveValue(): void {

src/lib/listing/workflow/workflow.component.ts

@@ -236,7 +236,11 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Co
 
     private _shouldUpdate(entity: T): boolean {
         const existingEntity = this.all[entity.id]?.entity;
-        return existingEntity && this.config.itemVersionFn(entity) !== this.config.itemVersionFn(existingEntity);
+        return (
+            existingEntity &&
+            (this.config.itemVersionFn(entity) !== this.config.itemVersionFn(existingEntity) ||
+                JSON.stringify(entity) !== JSON.stringify(existingEntity))
+        );
     }
 
     private _shouldAdd(entity: T): boolean {

src/lib/services/toaster.service.ts

@@ -7,6 +7,7 @@ import { ActiveToast, ToastrService } from 'ngx-toastr';
 import { IndividualConfig } from 'ngx-toastr/toastr/toastr-config';
 import { filter, tap } from 'rxjs/operators';
 import { ErrorMessageService } from './error-message.service';
+import { isIqserDevMode } from './iqser-user-preference.service';
 
 const enum NotificationType {
     SUCCESS = 'SUCCESS',
@@ -26,6 +27,7 @@ export interface ToasterOptions extends IndividualConfig {
      */
     readonly params?: Record<string, string | number>;
     readonly actions?: ToasterActions[];
+    readonly useRaw?: boolean;
 }
 
 export interface ErrorToasterOptions extends ToasterOptions {
@@ -35,10 +37,19 @@ export interface ErrorToasterOptions extends ToasterOptions {
     readonly error?: HttpErrorResponse;
 }
 
+const defaultDevToastOptions: Partial<ToasterOptions> = {
+    timeOut: 10000,
+    easing: 'ease-in-out',
+    easeTime: 500,
+    useRaw: true,
+};
+
 @Injectable({
     providedIn: 'root',
 })
 export class Toaster {
+    readonly #isIqserDevMode = isIqserDevMode();
+
     constructor(
         router: Router,
         private readonly _toastr: ToastrService,
@@ -69,6 +80,14 @@ export class Toaster {
         return this._toastr.error(message, undefined, config);
     }
 
+    devInfo(message: string): ActiveToast<unknown> | undefined {
+        if (!this.#isIqserDevMode) {
+            return;
+        }
+
+        return this.info(message, defaultDevToastOptions);
+    }
+
     info(message: string, options?: Partial<ToasterOptions>): ActiveToast<unknown> {
         return this.#showToastNotification(message, NotificationType.INFO, options);
     }
@@ -86,7 +105,7 @@ export class Toaster {
         notificationType = NotificationType.INFO,
         options?: Partial<ToasterOptions>,
     ): ActiveToast<unknown> {
-        const translatedMsg = this._translateService.instant(message, options?.params) as string;
+        const translatedMsg = options?.useRaw ? message : (this._translateService.instant(message, options?.params) as string);
 
         switch (notificationType) {
             case NotificationType.SUCCESS: