Merge branch 'master' into VM/RED-3982

src/assets/styles/common-inputs.scss

@@ -165,7 +165,7 @@ form .iqser-input-group:not(first-of-type) {
         }
     }
 
-    label:not(.mat-slide-toggle-label):not(.mat-radio-label) {
+    label:not(.mat-slide-toggle-label):not(.mat-radio-label):not(.details-radio-label) {
         opacity: 0.7;
         font-size: 11px;
         letter-spacing: 0;

src/lib/dialog/base-dialog.component.ts

@@ -6,6 +6,8 @@ import { ConfirmOptions } from '../misc';
 import { ConfirmationDialogService } from './confirmation-dialog.service';
 import { firstValueFrom } from 'rxjs';
 
+const TARGET_NODE = 'mat-dialog-container';
+
 export interface SaveOptions {
     closeAfterSave?: boolean;
     addMembers?: boolean;
@@ -75,8 +77,8 @@ export abstract class BaseDialogComponent extends AutoUnsubscribe implements OnI
     @HostListener('window:keydown.Enter', ['$event'])
     onEnter(event: KeyboardEvent): void {
         event?.stopImmediatePropagation();
-        const node = (event.target as IqserEventTarget).localName;
-        if (this.valid && !this.disabled && this.changed && node !== 'textarea') {
+        const node = (event.target as IqserEventTarget).localName?.trim()?.toLowerCase();
+        if (this.valid && !this.disabled && this.changed && node === TARGET_NODE) {
             this.save();
         }
     }

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

@@ -0,0 +1,5 @@
+export interface DetailsRadioOption<I> {
+    label: string;
+    description: string;
+    value: I;
+}

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

@@ -0,0 +1,14 @@
+<div class="iqser-input-group">
+    <div
+        (click)="toggleOption(option)"
+        *ngFor="let option of options"
+        [class.active]="option.value === value?.value"
+        class="option mb-8 pointer"
+    >
+        <div class="flex-align-items-center mb-8">
+            <iqser-round-checkbox [active]="option.value === value?.value" class="mr-6"></iqser-round-checkbox>
+            <label class="details-radio-label pointer">{{ option.label | translate }}</label>
+        </div>
+        <span class="hint">{{ option.description | translate }}</span>
+    </div>
+</div>

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

@@ -0,0 +1,13 @@
+label {
+    font-weight: 600;
+}
+
+.option {
+    padding: 16px;
+    border-radius: 8px;
+    background-color: var(--iqser-grey-2);
+
+    &.active {
+        background-color: rgba(var(--iqser-primary-rgb), 0.1);
+    }
+}

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

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { DetailsRadioOption } from './details-radio-option';
+import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FormFieldComponent } from '../form-field/form-field-component.directive';
+
+@Component({
+    selector: 'iqser-details-radio [options]',
+    templateUrl: './details-radio.component.html',
+    styleUrls: ['./details-radio.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: DetailsRadioComponent,
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: DetailsRadioComponent,
+        },
+    ],
+})
+export class DetailsRadioComponent<I> extends FormFieldComponent<DetailsRadioOption<I>> {
+    @Input() options: DetailsRadioOption<I>[] = [];
+
+    toggleOption(option: DetailsRadioOption<I>): void {
+        this.markAsTouched();
+        const currentlyChecked = this.value?.value === option.value;
+        this._value = currentlyChecked ? undefined : option;
+        this.onChange(this._value);
+    }
+}

src/lib/inputs/form-field/form-field-component.directive.ts

@@ -0,0 +1,45 @@
+import { Directive } from '@angular/core';
+import { ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
+
+@Directive()
+export abstract class FormFieldComponent<I> implements ControlValueAccessor, Validator {
+    touched = false;
+    disabled = false;
+
+    protected _value: I | undefined;
+
+    get value(): I | undefined {
+        return this._value;
+    }
+
+    onChange = (value?: I) => {};
+
+    onTouched = () => {};
+
+    markAsTouched() {
+        if (!this.touched) {
+            this.onTouched();
+            this.touched = true;
+        }
+    }
+
+    setDisabledState(disabled: boolean) {
+        this.disabled = disabled;
+    }
+
+    registerOnChange(onChange: (value?: I) => void): void {
+        this.onChange = onChange;
+    }
+
+    registerOnTouched(onTouched: () => void): void {
+        this.onTouched = onTouched;
+    }
+
+    writeValue(option: I): void {
+        this._value = option;
+    }
+
+    validate(): ValidationErrors | null {
+        return null;
+    }
+}

src/lib/inputs/index.ts

@@ -2,3 +2,5 @@ export * from './inputs.module';
 export * from './round-checkbox/round-checkbox.component';
 export * from './editable-input/editable-input.component';
 export * from './input-with-action/input-with-action.component';
+export * from './details-radio/details-radio.component';
+export * from './details-radio/details-radio-option';

src/lib/inputs/inputs.module.ts

@@ -6,13 +6,15 @@ import { RoundCheckboxComponent } from './round-checkbox/round-checkbox.componen
 import { EditableInputComponent } from './editable-input/editable-input.component';
 import { InputWithActionComponent } from './input-with-action/input-with-action.component';
 import { IqserIconsModule } from '../icons';
+import { DetailsRadioComponent } from './details-radio/details-radio.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 const modules = [IqserButtonsModule, FormsModule];
-const components = [RoundCheckboxComponent, EditableInputComponent, InputWithActionComponent];
+const components = [RoundCheckboxComponent, EditableInputComponent, InputWithActionComponent, DetailsRadioComponent];
 
 @NgModule({
     declarations: [...components],
     exports: [...components],
-    imports: [CommonModule, IqserIconsModule, ...modules],
+    imports: [CommonModule, IqserIconsModule, TranslateModule, ...modules],
 })
 export class IqserInputsModule {}

src/lib/listing/scroll-button/scroll-button.component.ts

@@ -22,6 +22,7 @@ export class ScrollButtonComponent implements OnInit {
 
     @Input() @Required() scrollViewport!: CdkVirtualScrollViewport;
     @Input() @Required() itemSize!: number;
+    @Input() helpModeKey?: string;
 
     showScrollUp$?: Observable<boolean>;
     showScrollDown$?: Observable<boolean>;
@@ -61,9 +62,4 @@ export class ScrollButtonComponent implements OnInit {
             this.scroll(ButtonTypes.top);
         }
     }
-
-    get helpModeKey(): string {
-        const screen = window.location.href.includes('/dossiers/') ? 'document' : 'dossier';
-        return `${screen}`;
-    }
 }

src/lib/listing/table/table.component.html

@@ -35,4 +35,5 @@
     *ngIf="hasScrollButton && tableContent?.scrollViewport"
     [itemSize]="itemSize"
     [scrollViewport]="tableContent.scrollViewport"
+    [helpModeKey]="helpModeKey"
 ></iqser-scroll-button>

src/lib/listing/table/table.component.ts

@@ -45,6 +45,7 @@ export class TableComponent<T extends IListable> extends AutoUnsubscribe impleme
     @Input() noDataButtonLabel?: string;
     @Input() showNoDataButton = false;
     @Input() noMatchText?: string;
+    @Input() helpModeKey?: string;
     @Input() tableItemClasses?: Record<string, (e: T) => boolean>;
     @Input() itemMouseEnterFn?: (entity: T) => void;
     @Input() itemMouseLeaveFn?: (entity: T) => void;