Merge branch 'unprotected' into 'master'

update master

See merge request fforesight/shared-ui-libraries/common-ui!15

.eslintrc.js

@@ -6,7 +6,7 @@ module.exports = {
     globals: {
         NodeJS: true,
     },
-    ignorePatterns: ['!**/*'],
+    ignorePatterns: ['!**/*', 'jest.config.ts'],
     overrides: [
         {
             files: ['*.ts'],
@@ -206,6 +206,7 @@ module.exports = {
             ],
             rules: {
                 'rxjs/no-ignored-subscription': 'error',
+                '@angular-eslint/prefer-standalone': 'off',
                 '@angular-eslint/directive-selector': [
                     'error',
                     {

.gitlab-ci.yml

@@ -0,0 +1,19 @@
+sonarqube:
+  stage: test
+  image:
+    name: sonarsource/sonar-scanner-cli:11.1
+    entrypoint:
+    - ''
+  variables:
+    SONAR_USER_HOME: "${CI_PROJECT_DIR}/.sonar"
+    GIT_DEPTH: '0'
+  cache:
+    key: "${CI_JOB_NAME}"
+    paths:
+    - ".sonar/cache"
+  script:
+  - sonar-scanner
+  rules:
+  - if: $CI_PIPELINE_SOURCE == "merge_request_event"
+  - if: "$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH"
+  - if: "$CI_COMMIT_BRANCH =~ /^release/"

sonar-project.properties

@@ -0,0 +1,2 @@
+sonar.projectKey=common-ui
+sonar.qualitygate.wait=false

src/assets/icons/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 7.4L0 1.4L1.4 0L6 4.6L10.6 0L12 1.4L6 7.4Z" fill="currentColor" />
+</svg>

src/assets/icons/chevron-up.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 2.8L1.4 7.4L0 6L6 0L12 6L10.6 7.4L6 2.8Z" fill="currentColor" />
+</svg>

src/assets/icons/exit-fullscreen.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px"
+     xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="minimize" stroke="none" stroke-width="1">
+        <path
+            d="M40,60 L40,90 L30,90 L30,77 L7,100 L0,93 L23,70 L10,70 L10,60 L40,60 Z M90,60 L90,70 L77,70 L100,93 L93,100 L70,77 L70,90 L60,90 L60,60 L90,60 Z M93,0 L100,7 L77,30 L90,30 L90,40 L60,40 L60,10 L70,10 L70,23 L93,0 Z M7,0 L30,23 L30,10 L40,10 L40,40 L10,40 L10,30 L23,30 L0,7 L7,0 Z"
+            fill="currentColor" fill-rule="nonzero" id="Combined-Shape"></path>
+    </g>
+</svg>

src/assets/icons/filter-list.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 12V10H11V12H7ZM3 7V5H15V7H3ZM0 2V0H18V2H0Z" fill="currentColor" />
+</svg>

src/assets/icons/fullscreen.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px"
+     xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="full-screen" stroke="none" stroke-width="1">
+        <path
+            d="M36.5,56.5 L43.5,63.5 L17,90 L30,90 L30,100 L0,100 L0,70 L10,70 L10,83 L36.5,56.5 Z M63.5,56.5 L90,83 L90,70 L100,70 L100,100 L70,100 L70,90 L83,90 L56.5,63.5 L63.5,56.5 Z M100,0 L100,30 L90,30 L90,17 L63.5,43.5 L56.5,36.5 L83,10 L70,10 L70,0 L100,0 Z M30,0 L30,10 L17,10 L43.5,36.5 L36.5,43.5 L10,17 L10,30 L0,30 L0,0 L30,0 Z"
+            fill="currentColor" fill-rule="nonzero" id="Combined-Shape"></path>
+    </g>
+</svg>

src/assets/icons/visibility-off.svg

@@ -0,0 +1,5 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z" fill="none" />
+    <path
+        d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" />
+</svg>

src/assets/icons/visibility.svg

@@ -0,0 +1,5 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+        d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
+</svg>

src/assets/styles/common-base-screen.scss

@@ -32,6 +32,7 @@
     .buttons {
         display: flex;
         margin-right: 8px;
+        align-items: center;
 
         > *:not(:last-child) {
             margin-right: 14px;
@@ -56,15 +57,11 @@
 .dev-mode {
     background-color: var(--iqser-primary);
     color: var(--iqser-white);
-    font-size: 22px;
-    line-height: 16px;
-    text-align: center;
     position: fixed;
-    top: 0;
-    z-index: 100;
     right: 0;
     height: var(--iqser-top-bar-height);
-    word-break: break-all;
+    writing-mode: vertical-rl;
+    text-orientation: upright;
     display: flex;
     justify-content: center;
     align-items: center;

src/assets/styles/common-checkbox.scss

@@ -5,6 +5,7 @@ $ripple-size: 26px;
     flex: 0 0 $checkbox-size;
     width: $checkbox-size;
     height: $checkbox-size;
+    margin-top: 4px;
 }
 
 .mat-mdc-checkbox,
@@ -24,10 +25,14 @@ $ripple-size: 26px;
     --mdc-checkbox-selected-hover-state-layer-color: var(--iqser-primary);
     --mdc-checkbox-selected-pressed-state-layer-color: var(--iqser-primary);
 
-    .mdc-form-field > label {
-        padding-left: 8px;
-        line-height: 24px;
-        white-space: nowrap;
+    .mdc-form-field {
+        align-items: start;
+
+        & > label {
+            padding-left: 8px;
+            line-height: 24px;
+            white-space: normal;
+        }
     }
 
     .mdc-checkbox__ripple {

src/assets/styles/common-components.scss

@@ -18,9 +18,18 @@
     &.large {
         height: 32px;
         width: 32px;
+        min-width: 32px;
         font-size: var(--iqser-font-size);
     }
 
+    &.extra-small {
+        height: 16px;
+        width: 16px;
+        min-width: 16px;
+        font-size: 10px;
+        font-weight: lighter;
+    }
+
     &.gray-dark {
         background-color: var(--iqser-user-avatar-1);
         color: var(--iqser-text);

src/assets/styles/common-dialogs.scss

@@ -47,7 +47,10 @@
                 font-weight: bold;
                 padding-bottom: 8px;
             }
+        }
 
+        &.redaction,
+        &.force-annotation {
             iqser-details-radio {
                 padding-top: 20px;
             }
@@ -72,3 +75,7 @@
         margin-left: auto;
     }
 }
+
+.large-form-dialog .dialog > form {
+    display: contents;
+}

src/assets/styles/common-file-upload.scss

@@ -7,6 +7,7 @@
         width: 100%;
         box-sizing: border-box;
         background: var(--iqser-alt-background);
+        height: 68px;
 
         &.drag-over {
             background-color: var(--iqser-file-drop-drag-over);
@@ -15,7 +16,6 @@
 
     .upload-area {
         gap: 16px;
-        height: 88px;
         cursor: pointer;
         padding: 0 32px;
 
@@ -33,7 +33,6 @@
 
     .file-area {
         gap: 10px;
-        height: 48px;
 
         mat-icon:first-child {
             opacity: 0.5;

src/assets/styles/common-layout.scss

@@ -156,13 +156,15 @@ section.settings {
     box-sizing: border-box;
     background: var(--iqser-background);
     overflow: hidden;
-    transition:
-        width ease-in-out 0.2s,
-        min-width ease-in-out 0.2s;
+    &.with-transition {
+        transition:
+            width ease-in-out 0.2s,
+            min-width ease-in-out 0.2s;
+    }
+    @include common-mixins.scroll-bar;
 
     &:hover {
         overflow-y: auto;
-        @include common-mixins.scroll-bar;
     }
 
     .collapsed-wrapper {
@@ -254,6 +256,10 @@ section.settings {
     cursor: pointer;
 }
 
+.cursor-default {
+    cursor: default;
+}
+
 .fit-content {
     width: fit-content;
 }

src/assets/styles/common-menu.scss

@@ -25,7 +25,7 @@
     .mat-mdc-menu-item {
         font-size: var(--iqser-font-size);
         color: var(--iqser-text);
-        padding: 0 26px 0 8px;
+        padding: 0 26px 0 8px !important;
         margin: var(--iqser-menu-item-margin);
         border-radius: 4px;
         width: -webkit-fill-available;
@@ -58,7 +58,7 @@
         }
 
         &.padding-left {
-            padding-left: 56px;
+            padding-left: 56px !important;
         }
 
         &:last-of-type {

src/assets/styles/common-texts.scss

@@ -149,6 +149,10 @@ pre {
     @include mixins.line-clamp(4);
 }
 
+.clamp-5 {
+    @include mixins.line-clamp(5);
+}
+
 .no-wrap {
     white-space: nowrap;
 }

src/assets/styles/common-utilities.scss

@@ -1,3 +1,5 @@
+@use 'sass:string';
+@use 'sass:list';
 /* Margins, paddings */
 
 $start: 0;
@@ -7,19 +9,19 @@ $values: '';
 $sides: (top, bottom, left, right);
 
 @for $i from $start + 1 through $end {
-    $values: append($values, $i, comma);
-    $values: set-nth($values, 1, $start);
+    $values: list.append($values, $i, comma);
+    $values: list.set-nth($values, 1, $start);
 }
 
 // TODO: Check if !important can be avoided
 
 @each $space in $values {
     @each $side in $sides {
-        .m#{str-slice($side, 0, 1)}-#{$space} {
+        .m#{string.slice($side, 0, 1)}-#{$space} {
             margin-#{$side}: #{$space}px !important;
         }
 
-        .p#{str-slice($side, 0, 1)}-#{$space} {
+        .p#{string.slice($side, 0, 1)}-#{$space} {
             padding-#{$side}: #{$space}px !important;
         }
     }

src/index.ts

@@ -3,13 +3,11 @@ export * from './lib/dialog';
 export * from './lib/form';
 export * from './lib/listing';
 export * from './lib/help-mode';
-export * from './lib/inputs';
 export * from './lib/services';
 export * from './lib/loading';
 export * from './lib/error';
 export * from './lib/search';
 export * from './lib/upload-file';
-export * from './lib/empty-state';
 export * from './lib/caching';
 export * from './lib/translations';
 export * from './lib/pipes';

src/lib/buttons/chevron-button/chevron-button.component.html

@@ -1,6 +1,8 @@
-<button [class.overlay]="showDot" [class.primary]="primary" [disabled]="disabled" [id]="buttonId" mat-button>
-    <span>{{ label }}</span>
+<button [class.overlay]="showDot()" [class.primary]="primary()" [disabled]="disabled()" [id]="buttonId()" mat-button>
+    <span>{{ label() }}</span>
     <mat-icon class="chevron-icon" iconPositionEnd svgIcon="iqser:arrow-down"></mat-icon>
 </button>
 
-<div *ngIf="showDot" class="dot"></div>
+@if (showDot()) {
+    <div class="dot"></div>
+}

src/lib/buttons/chevron-button/chevron-button.component.ts

@@ -1,21 +1,19 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { randomString } from '../../utils';
-import { NgIf } from '@angular/common';
+import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { randomString } from '../../utils';
 
 @Component({
     selector: 'iqser-chevron-button',
     templateUrl: './chevron-button.component.html',
     styleUrls: ['./chevron-button.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
-    imports: [NgIf, MatIconModule, MatButtonModule],
+    imports: [MatIconModule, MatButtonModule],
 })
 export class ChevronButtonComponent {
-    @Input({ required: true }) label!: string;
-    @Input() showDot = false;
-    @Input() primary = false;
-    @Input() disabled = false;
-    @Input() buttonId = `${randomString()}-chevron-button`;
+    readonly label = input.required<string>();
+    readonly showDot = input(false, { transform: booleanAttribute });
+    readonly primary = input(false, { transform: booleanAttribute });
+    readonly disabled = input(false, { transform: booleanAttribute });
+    readonly buttonId = input(`${randomString()}-chevron-button`);
 }

src/lib/buttons/chevron-button/index.ts

@@ -0,0 +1 @@
+export * from './chevron-button.component';

src/lib/buttons/circle-button/circle-button.component.html

@@ -1,21 +1,25 @@
-<div [matTooltipClass]="tooltipClass || ''" [matTooltipPosition]="tooltipPosition" [matTooltip]="tooltip || ''">
+<div [matTooltipClass]="tooltipClass()" [matTooltipPosition]="tooltipPosition()" [matTooltip]="tooltip()">
     <button
         (click)="performAction($event)"
-        [class.dark-bg]="type === _circleButtonTypes.dark"
-        [class.grey-selected]="greySelected"
-        [class.overlay]="showDot"
-        [class.primary]="type === _circleButtonTypes.primary"
-        [class.warn]="type === _circleButtonTypes.warn"
-        [disabled]="disabled"
-        [id]="buttonId"
+        [class.dark-bg]="type() === _circleButtonTypes.dark"
+        [class.grey-selected]="greySelected()"
+        [class.overlay]="showDot()"
+        [class.primary]="type() === _circleButtonTypes.primary"
+        [class.warn]="type() === _circleButtonTypes.warn"
+        [disabled]="disabled()"
+        [id]="buttonId()"
         [iqserStopPropagation]="action.observed && !_hasRouterLink"
-        [type]="isSubmit ? 'submit' : 'button'"
+        [type]="isSubmit() ? 'submit' : 'button'"
         mat-icon-button
     >
-        <mat-icon [svgIcon]="icon"></mat-icon>
+        <mat-icon [svgIcon]="icon()"></mat-icon>
     </button>
 
-    <div *ngIf="showDot" class="dot"></div>
+    @if (showDot()) {
+        <div class="dot"></div>
+    }
 
-    <div *ngIf="dropdownButton" [class.disabled]="disabled" class="arrow-down"></div>
+    @if (dropdownButton()) {
+        <div [class.disabled]="disabled()" class="arrow-down"></div>
+    }
 </div>

src/lib/buttons/circle-button/circle-button.component.ts

@@ -1,5 +1,16 @@
-import { NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
+import {
+    booleanAttribute,
+    ChangeDetectionStrategy,
+    Component,
+    effect,
+    ElementRef,
+    EventEmitter,
+    inject,
+    input,
+    numberAttribute,
+    Output,
+    viewChild,
+} from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
@@ -13,38 +24,39 @@ import { CircleButtonType, CircleButtonTypes } from '../types/circle-button.type
     templateUrl: './circle-button.component.html',
     styleUrls: ['./circle-button.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
-    imports: [MatTooltipModule, MatIconModule, NgIf, MatButtonModule, StopPropagationDirective],
+    imports: [MatTooltipModule, MatIconModule, MatButtonModule, StopPropagationDirective],
 })
-export class CircleButtonComponent implements OnInit {
+export class CircleButtonComponent {
     readonly #elementRef = inject(ElementRef<HTMLElement>);
-    @ViewChild(MatTooltip) private readonly _matTooltip!: MatTooltip;
+    protected readonly _matTooltip = viewChild.required(MatTooltip);
     protected readonly _circleButtonTypes = CircleButtonTypes;
     protected readonly _hasRouterLink = !!inject(RouterLink, { optional: true, host: true });
-    @Input() buttonId = `${randomString()}-circle-button`;
-    @Input({ required: true }) icon!: string;
-    @Input() tooltip?: string;
-    @Input() tooltipClass?: string;
-    @Input() showDot = false;
-    @Input() tooltipPosition: IqserTooltipPosition = IqserTooltipPositions.above;
-    @Input() disabled = false;
-    @Input() type: CircleButtonType = CircleButtonTypes.default;
-    @Input() greySelected = false;
-    @Input() removeTooltip = false;
-    @Input() isSubmit = false;
-    @Input() dropdownButton = false;
-    @Input() size = 34;
-    @Input() iconSize = 14;
+    readonly buttonId = input(`${randomString()}-circle-button`);
+    readonly icon = input.required<string>();
+    readonly tooltip = input('');
+    readonly tooltipClass = input('');
+    readonly showDot = input(false, { transform: booleanAttribute });
+    readonly tooltipPosition = input<IqserTooltipPosition>(IqserTooltipPositions.above);
+    readonly disabled = input(false, { transform: booleanAttribute });
+    readonly type = input<CircleButtonType>(CircleButtonTypes.default);
+    readonly greySelected = input(false, { transform: booleanAttribute });
+    readonly removeTooltip = input(false, { transform: booleanAttribute });
+    readonly isSubmit = input(false, { transform: booleanAttribute });
+    readonly dropdownButton = input(false, { transform: booleanAttribute });
+    readonly size = input(34, { transform: numberAttribute });
+    readonly iconSize = input(14, { transform: numberAttribute });
     @Output() readonly action = new EventEmitter<MouseEvent>();
 
-    ngOnInit() {
-        this.#elementRef.nativeElement.style.setProperty('--circle-button-size', `${this.size}px`);
-        this.#elementRef.nativeElement.style.setProperty('--circle-button-icon-size', `${this.iconSize}px`);
+    constructor() {
+        effect(() => {
+            this.#elementRef.nativeElement.style.setProperty('--circle-button-size', `${this.size()}px`);
+            this.#elementRef.nativeElement.style.setProperty('--circle-button-icon-size', `${this.iconSize()}px`);
+        });
     }
 
     performAction($event: MouseEvent) {
-        if (this.removeTooltip) {
-            this._matTooltip.hide();
+        if (this.removeTooltip()) {
+            this._matTooltip().hide();
             // Timeout to allow tooltip to disappear first,
             // useful when removing an item from the list without a confirmation dialog
             setTimeout(() => this.action.emit($event));

src/lib/buttons/icon-button/icon-button.component.html

@@ -1,14 +1,19 @@
 <button
-    (click)="!disabled && action.emit($event)"
-    [disabled]="disabled"
-    [id]="buttonId"
+    (click)="!disabled() && emitAction($event)"
+    [disabled]="disabled()"
+    [id]="buttonId()"
     [iqserStopPropagation]="action.observed && !_hasRouterLink"
-    [ngClass]="classes"
-    [type]="submit ? 'submit' : 'button'"
+    [ngClass]="_classes()"
+    [type]="submit() ? 'submit' : 'button'"
     mat-button
 >
-    <mat-icon *ngIf="icon" [svgIcon]="icon"></mat-icon>
-    <span>{{ label }}</span>
+    @if (icon(); as icon) {
+        <mat-icon [svgIcon]="icon"></mat-icon>
+    }
+
+    <span>{{ label() }}</span>
 </button>
 
-<div *ngIf="showDot" class="dot"></div>
+@if (showDot()) {
+    <div class="dot"></div>
+}

src/lib/buttons/icon-button/icon-button.component.ts

@@ -1,37 +1,42 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output } from '@angular/core';
-import { IconButtonType, IconButtonTypes } from '../types/icon-button.type';
-import { randomString } from '../../utils';
-import { NgClass, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, EventEmitter, inject, input, Output } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { StopPropagationDirective } from '../../directives';
 import { RouterLink } from '@angular/router';
+import { StopPropagationDirective } from '../../directives';
+import { randomString } from '../../utils';
+import { IconButtonType, IconButtonTypes } from '../types/icon-button.type';
 
 @Component({
     selector: 'iqser-icon-button',
     templateUrl: './icon-button.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
-    imports: [NgClass, MatButtonModule, NgIf, MatIconModule, StopPropagationDirective],
+    imports: [NgClass, MatButtonModule, MatIconModule, StopPropagationDirective],
 })
 export class IconButtonComponent {
-    @Input({ required: true }) label!: string;
-    @Input() buttonId = `${randomString()}-icon-button`;
-    @Input() icon?: string;
-    @Input() showDot = false;
-    @Input() active = false;
-    @Input() disabled = false;
-    @Input() submit = false;
-    @Input() type: IconButtonType = IconButtonTypes.default;
-    @Output() readonly action = new EventEmitter<MouseEvent>();
     protected readonly _hasRouterLink = !!inject(RouterLink, { optional: true, host: true });
-
-    get classes(): Record<string, boolean> {
+    readonly label = input.required<string>();
+    readonly buttonId = input(`${randomString()}-icon-button`);
+    readonly icon = input<string>();
+    readonly showDot = input(false, { transform: booleanAttribute });
+    readonly active = input(false, { transform: booleanAttribute });
+    readonly disabled = input(false, { transform: booleanAttribute });
+    readonly submit = input(false, { transform: booleanAttribute });
+    readonly type = input<IconButtonType>(IconButtonTypes.default);
+    protected readonly _classes = computed(() => {
         return {
-            overlay: this.showDot,
-            [this.type]: true,
-            'has-icon': !!this.icon,
-            active: this.active,
+            overlay: this.showDot(),
+            [this.type()]: true,
+            'has-icon': !!this.icon(),
+            active: this.active(),
         };
+    });
+    @Output() readonly action = new EventEmitter<MouseEvent>();
+
+    emitAction($event: MouseEvent) {
+        const activeElement = document.activeElement as HTMLElement;
+        if (activeElement.tagName?.toLowerCase() === 'button') {
+            this.action.emit($event);
+        }
     }
 }

src/lib/buttons/index.ts

@@ -3,4 +3,3 @@ export * from './types/circle-button.type';
 
 export * from './icon-button/icon-button.component';
 export * from './circle-button/circle-button.component';
-export * from './chevron-button/chevron-button.component';

src/lib/caching/dynamic-cache.ts

@@ -1,4 +1,4 @@
-import { List } from '../utils';
+import { List } from '../utils/types/iqser-types';
 
 export interface DynamicCache {
     readonly urls: List;

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

@@ -3,18 +3,20 @@ import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { debounceTime, firstValueFrom, fromEvent, merge, of, Subscription } from 'rxjs';
 import { tap } from 'rxjs/operators';
-import { ConfirmOptions } from '.';
-import { IconButtonTypes } from '../buttons';
-import { LoadingService } from '../loading';
-import { Toaster } from '../services';
-import { hasFormChanged, IqserEventTarget } from '../utils';
+import { IconButtonTypes } from '../buttons/types/icon-button.type';
+import { LoadingService } from '../loading/loading.service';
+import { Toaster } from '../services/toaster.service';
+import { hasFormChanged } from '../utils/functions';
+import { IqserEventTarget } from '../utils/types/events.type';
 import { ConfirmationDialogService } from './confirmation-dialog.service';
+import { ConfirmOptions } from './confirmation-dialog/confirmation-dialog.component';
 
 const DIALOG_CONTAINER = 'mat-dialog-container';
 const TEXT_INPUT = 'text';
 
 export interface SaveOptions {
     closeAfterSave?: boolean;
+    nextAction?: boolean;
     addMembers?: boolean;
 }
 
@@ -22,7 +24,7 @@ export interface SaveOptions {
 export abstract class BaseDialogComponent implements AfterViewInit, OnDestroy {
     readonly #confirmationDialogService = inject(ConfirmationDialogService);
     readonly #dialog = inject(MatDialog);
-    readonly #hasErrors = signal(true);
+    protected readonly _hasErrors = signal(true);
     protected readonly _formBuilder = inject(UntypedFormBuilder);
     protected readonly _loadingService = inject(LoadingService);
     protected readonly _toaster = inject(Toaster);
@@ -45,17 +47,18 @@ export abstract class BaseDialogComponent implements AfterViewInit, OnDestroy {
     }
 
     get disabled(): boolean {
-        return !this.valid || !this.changed || this.#hasErrors();
+        return !this.valid || !this.changed || this._hasErrors();
     }
 
     ngAfterViewInit() {
         this._subscriptions.add(this._dialogRef.backdropClick().subscribe(() => this.close()));
         const valueChanges = this.form?.valueChanges ?? of(null);
         const events = [fromEvent(window, 'keyup'), fromEvent(window, 'input'), valueChanges];
+        this._hasErrors.set(!!document.getElementsByClassName('ng-invalid')[0]);
         const events$ = merge(...events).pipe(
             debounceTime(10),
             tap(() => {
-                this.#hasErrors.set(!!document.getElementsByClassName('ng-invalid')[0]);
+                this._hasErrors.set(!!document.getElementsByClassName('ng-invalid')[0]);
             }),
         );
         this._subscriptions.add(events$.subscribe());

src/lib/dialog/confirmation-dialog.service.ts

@@ -1,7 +1,13 @@
 import { inject, Injectable } from '@angular/core';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { ConfirmationDialogComponent, ConfirmOption, defaultDialogConfig, IConfirmationDialogData, TitleColors } from '.';
 import { MatDialog } from '@angular/material/dialog';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import {
+    ConfirmationDialogComponent,
+    ConfirmOption,
+    IConfirmationDialogData,
+    TitleColors,
+} from './confirmation-dialog/confirmation-dialog.component';
+import { defaultDialogConfig } from './dialog.service';
 
 @Injectable({
     providedIn: 'root',

src/lib/dialog/confirmation-dialog/confirmation-dialog.component.html

@@ -1,56 +1,83 @@
 <section class="dialog">
     <div [class.warn]="isDeleteAction" [innerHTML]="config.title" class="dialog-header heading-l"></div>
 
-    <div *ngIf="showToast && config.toastMessage" class="inline-dialog-toast toast-error">
-        <div [translate]="config.toastMessage"></div>
-        <a (click)="showToast = false" class="toast-close-button">
-            <mat-icon svgIcon="iqser:close"></mat-icon>
-        </a>
-    </div>
+    @if (showToast && config.toastMessage) {
+        <div class="inline-dialog-toast toast-error">
+            <div [translate]="config.toastMessage"></div>
+            <a (click)="showToast = false" class="toast-close-button">
+                <mat-icon svgIcon="iqser:close"></mat-icon>
+            </a>
+        </div>
+    }
 
     <div class="dialog-content">
+        @if (config.component) {
+            <ng-container #detailsComponent></ng-container>
+        }
+
         <p [class.heading]="isDeleteAction" [innerHTML]="config.question" class="mt-0 mb-8"></p>
-        <p *ngIf="config.details" [innerHTML]="config.details" class="mt-0"></p>
+        @if (config.details) {
+            <p [innerHTML]="config.details" class="mt-0"></p>
+        }
 
-        <div *ngIf="config.requireInput" class="iqser-input-group required w-300 mt-24">
-            <label>{{ inputLabel }}</label>
-            <input [(ngModel)]="inputValue" id="confirmation-input" />
-        </div>
+        @if (config.requireInput) {
+            <div class="iqser-input-group required w-300 mt-24">
+                <label>{{ inputLabel }}</label>
+                <input [(ngModel)]="inputValue" id="confirmation-input" />
+            </div>
+        }
 
-        <div *ngIf="config.checkboxes.length > 0" class="mt-24 checkboxes-wrapper">
-            <ng-container *ngFor="let checkbox of config.checkboxes">
-                <mat-checkbox [(ngModel)]="checkbox.value" [class.error]="!checkbox.value && showToast" color="primary">
-                    {{ checkbox.label | translate: config.translateParams }}
-                </mat-checkbox>
-                <ng-container *ngTemplateOutlet="checkbox.extraContent; context: { data: checkbox.extraContentData }"></ng-container>
-            </ng-container>
-        </div>
+        @if (config.checkboxes.length > 0) {
+            <div class="mt-24 checkboxes-wrapper">
+                @for (checkbox of config.checkboxes; track checkbox) {
+                    <mat-checkbox [(ngModel)]="checkbox.value" [class.error]="!checkbox.value && showToast" color="primary">
+                        {{ checkbox.label | translate: config.translateParams }}
+                    </mat-checkbox>
+                    <ng-container *ngTemplateOutlet="checkbox.extraContent; context: { data: checkbox.extraContentData }"></ng-container>
+                }
+            </div>
+        }
     </div>
 
-    <div class="dialog-actions">
-        <iqser-icon-button
-            (action)="confirm(confirmOption)"
-            [disabled]="(config.requireInput && confirmationDoesNotMatch()) || config.disableConfirm"
-            [label]="config.confirmationText"
-            [type]="iconButtonTypes.primary"
-            buttonId="confirm"
-        ></iqser-icon-button>
+    <div class="dialog-actions" [class.reverse]="config.cancelButtonPrimary">
+        @if (!config.cancelButtonPrimary) {
+            <iqser-icon-button
+                (action)="confirm(confirmOption)"
+                [disabled]="(config.requireInput && confirmationDoesNotMatch()) || config.disableConfirm"
+                [label]="config.confirmationText"
+                [type]="iconButtonTypes.primary"
+                buttonId="confirm"
+            ></iqser-icon-button>
+        } @else {
+            <div (click)="confirm(confirmOption)" class="all-caps-label cancel no-uppercase" id="confirm">
+                {{ config.confirmationText }}
+            </div>
+        }
 
-        <iqser-icon-button
-            (action)="confirm(confirmOptions.CONFIRM_WITH_ACTION)"
-            *ngIf="config.alternativeConfirmationText"
-            [disabled]="config.requireInput && confirmationDoesNotMatch()"
-            [label]="config.alternativeConfirmationText"
-            [type]="iconButtonTypes.primary"
-        ></iqser-icon-button>
+        @if (config.alternativeConfirmationText) {
+            <iqser-icon-button
+                (action)="confirm(confirmOptions.CONFIRM_WITH_ACTION)"
+                [disabled]="config.requireInput && confirmationDoesNotMatch()"
+                [label]="config.alternativeConfirmationText"
+                [type]="iconButtonTypes.primary"
+            ></iqser-icon-button>
+        }
 
-        <div (click)="confirm(confirmOptions.DISCARD_CHANGES)" *ngIf="config.discardChangesText" class="all-caps-label cancel">
-            {{ config.discardChangesText }}
-        </div>
+        @if (config.discardChangesText) {
+            <div (click)="confirm(confirmOptions.DISCARD_CHANGES)" class="all-caps-label cancel">
+                {{ config.discardChangesText }}
+            </div>
+        }
 
-        <div (click)="deny()" *ngIf="!config.discardChangesText" class="all-caps-label cancel">
-            {{ config.denyText }}
-        </div>
+        @if (!config.discardChangesText) {
+            @if (config.cancelButtonPrimary) {
+                <iqser-icon-button (click)="deny()" [label]="config.denyText" [type]="iconButtonTypes.primary"></iqser-icon-button>
+            } @else {
+                <div (click)="deny()" class="all-caps-label cancel">
+                    {{ config.denyText }}
+                </div>
+            }
+        }
     </div>
 
     <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>

src/lib/dialog/confirmation-dialog/confirmation-dialog.component.scss

@@ -6,3 +6,12 @@
     display: flex;
     flex-direction: column;
 }
+
+.reverse {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+}
+
+.no-uppercase {
+    text-transform: unset;
+}

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

@@ -1,12 +1,23 @@
-import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, HostListener, inject, TemplateRef } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    Component,
+    HostListener,
+    inject,
+    TemplateRef,
+    Type,
+    viewChild,
+    ViewContainerRef,
+} from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { CircleButtonComponent, IconButtonComponent, IconButtonTypes } from '../../buttons';
+import { CircleButtonComponent, IconButtonTypes } from '../../buttons';
+import { IconButtonComponent } from '../../buttons';
 import { ValuesOf } from '../../utils';
 
 export const TitleColors = {
@@ -46,6 +57,9 @@ interface InternalConfirmationDialogData {
     readonly checkboxes: CheckBox[];
     readonly checkboxesValidation: boolean;
     readonly toastMessage?: string;
+    readonly component?: Type<unknown>;
+    readonly componentInputs?: { [key: string]: unknown };
+    readonly cancelButtonPrimary?: boolean;
 }
 
 export type IConfirmationDialogData = Partial<InternalConfirmationDialogData>;
@@ -63,6 +77,9 @@ function getConfig(options?: IConfirmationDialogData): InternalConfirmationDialo
         denyText: options?.denyText ?? _('common.confirmation-dialog.deny'),
         checkboxes: options?.checkboxes ?? [],
         checkboxesValidation: typeof options?.checkboxesValidation === 'boolean' ? options.checkboxesValidation : true,
+        component: options?.component,
+        componentInputs: options?.componentInputs,
+        cancelButtonPrimary: options?.cancelButtonPrimary ?? false,
     };
 }
 
@@ -70,12 +87,9 @@ function getConfig(options?: IConfirmationDialogData): InternalConfirmationDialo
     templateUrl: './confirmation-dialog.component.html',
     styleUrls: ['./confirmation-dialog.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
     imports: [
-        NgIf,
         MatIconModule,
         FormsModule,
-        NgForOf,
         MatCheckboxModule,
         TranslateModule,
         NgTemplateOutlet,
@@ -84,13 +98,14 @@ function getConfig(options?: IConfirmationDialogData): InternalConfirmationDialo
         MatDialogModule,
     ],
 })
-export class ConfirmationDialogComponent {
+export class ConfirmationDialogComponent implements AfterViewInit {
     readonly config = getConfig(inject(MAT_DIALOG_DATA));
     inputValue = '';
     showToast = false;
     readonly inputLabel: string;
     readonly confirmOptions = ConfirmOptions;
     readonly iconButtonTypes = IconButtonTypes;
+    readonly detailsComponentRef = viewChild.required('detailsComponent', { read: ViewContainerRef });
 
     constructor(
         private readonly _dialogRef: MatDialogRef<ConfirmationDialogComponent, ConfirmOption>,
@@ -115,13 +130,19 @@ export class ConfirmationDialogComponent {
         return ConfirmOptions.CONFIRM;
     }
 
-    @HostListener('window:keyup.enter')
-    onKeyupEnter(): void {
-        if (this.config.requireInput && !this.confirmationDoesNotMatch()) {
-            this.confirm(ConfirmOptions.CONFIRM);
+    @HostListener('window:keyup.enter', ['$event'])
+    onKeyupEnter(event: KeyboardEvent): void {
+        event?.stopImmediatePropagation();
+        if (!this.config.requireInput || !this.confirmationDoesNotMatch()) {
+            if (!this.config.cancelButtonPrimary) this.confirm(ConfirmOptions.CONFIRM);
+            else this.deny();
         }
     }
 
+    ngAfterViewInit() {
+        this.#initializeDetailsComponent();
+    }
+
     confirmationDoesNotMatch(): boolean {
         return this.inputValue.toLowerCase() !== this.config.confirmationText.toLowerCase();
     }
@@ -156,9 +177,13 @@ export class ConfirmationDialogComponent {
         });
     }
 
-    @HostListener('window:keydown.Enter', ['$event'])
-    onEnter(event: KeyboardEvent): void {
-        event?.stopImmediatePropagation();
-        this.confirm(ConfirmOptions.CONFIRM);
+    #initializeDetailsComponent() {
+        if (!this.config.component) return;
+        const component = this.detailsComponentRef().createComponent(this.config.component);
+        if (this.config.componentInputs) {
+            for (const [key, value] of Object.entries(this.config.componentInputs)) {
+                (component.instance as any)[key] = value;
+            }
+        }
     }
 }

src/lib/dialog/dialog.service.ts

@@ -1,8 +1,8 @@
-import { Injectable } from '@angular/core';
-import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
 import { ComponentType } from '@angular/cdk/portal';
-import { mergeMap } from 'rxjs/operators';
+import { Injectable, Type } from '@angular/core';
+import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
 import { from } from 'rxjs';
+import { mergeMap } from 'rxjs/operators';
 
 export const largeDialogConfig: MatDialogConfig = {
     width: '90vw',
@@ -64,4 +64,34 @@ export abstract class DialogService<T extends string> {
 
         return ref;
     }
+
+    open(
+        type: Type<unknown>,
+        data?: unknown,
+        config?: object,
+        cb?: (...params: unknown[]) => Promise<unknown> | void,
+        finallyCb?: (...params: unknown[]) => void | Promise<unknown>,
+    ): MatDialogRef<unknown> {
+        const ref = this._dialog.open(type, {
+            ...defaultDialogConfig,
+            ...(config || {}),
+            data,
+        });
+
+        const fn = async (result: unknown) => {
+            if (result && cb) {
+                await cb(result);
+            }
+
+            if (finallyCb) {
+                await finallyCb(result);
+            }
+        };
+
+        ref.afterClosed()
+            .pipe(mergeMap(result => from(fn(result))))
+            .subscribe();
+
+        return ref;
+    }
 }

src/lib/dialog/iqser-dialog-component.directive.ts

@@ -1,8 +1,9 @@
 import { Directive, HostListener, inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { hasFormChanged, IqserEventTarget } from '../utils';
 import { FormGroup } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { IconButtonTypes } from '../buttons';
+import { hasFormChanged, IqserEventTarget } from '../utils';
 
 const DIALOG_CONTAINER = 'mat-dialog-container';
 const DATA_TYPE_SYMBOL = Symbol.for('DATA_TYPE');
@@ -12,14 +13,17 @@ export type DATA_TYPE = typeof DATA_TYPE_SYMBOL;
 export type RETURN_TYPE = typeof RETURN_TYPE_SYMBOL;
 
 @Directive()
-export abstract class IqserDialogComponent<ComponentType, DataType, ReturnType> {
+export abstract class IqserDialogComponent<ComponentType, DataType = null, ReturnType = void> {
     readonly [DATA_TYPE_SYMBOL]!: DataType;
     readonly [RETURN_TYPE_SYMBOL]!: ReturnType;
 
+    readonly iconButtonTypes = IconButtonTypes;
     readonly dialogRef = inject(MatDialogRef<ComponentType, ReturnType>);
     readonly data = inject<DataType>(MAT_DIALOG_DATA);
     readonly dialog = inject(MatDialog);
     readonly form?: FormGroup;
+    readonly ignoredKeys: string[] = [];
+
     initialFormValue: Record<string, unknown> = {};
 
     constructor(private readonly _editMode = false) {
@@ -35,7 +39,7 @@ export abstract class IqserDialogComponent<ComponentType, DataType, ReturnType>
     }
 
     get changed(): boolean {
-        return !this.form || hasFormChanged(this.form, this.initialFormValue);
+        return !this.form || hasFormChanged(this.form, this.initialFormValue, this.ignoredKeys);
     }
 
     get disabled(): boolean {

src/lib/directives/disable-stop-propagation.directive.ts

@@ -1,9 +1,8 @@
-import { booleanAttribute, Directive, Input } from '@angular/core';
+import { booleanAttribute, Directive, input } from '@angular/core';
 
 @Directive({
     selector: '[iqserDisableStopPropagation]',
-    standalone: true,
 })
 export class DisableStopPropagationDirective {
-    @Input({ transform: booleanAttribute }) iqserDisableStopPropagation = true;
+    readonly iqserDisableStopPropagation = input(true, { transform: booleanAttribute });
 }

src/lib/directives/has-scrollbar.directive.ts

@@ -1,39 +1,35 @@
-import { ChangeDetectorRef, Directive, ElementRef, HostBinding, OnDestroy, OnInit } from '@angular/core';
+import { Directive, ElementRef, OnDestroy, OnInit, signal } from '@angular/core';
 
 @Directive({
     selector: '[iqserHasScrollbar]',
-    standalone: true,
+    host: {
+        '[class]': '_class()',
+    },
 })
 export class HasScrollbarDirective implements OnInit, OnDestroy {
-    @HostBinding('class') class = '';
     private readonly _resizeObserver: ResizeObserver;
+    protected readonly _class = signal('');
 
-    get hasScrollbar() {
-        const element = this._elementRef?.nativeElement as HTMLElement;
-        return element.clientHeight < element.scrollHeight;
-    }
-
-    constructor(
-        protected readonly _elementRef: ElementRef,
-        protected readonly _changeDetector: ChangeDetectorRef,
-    ) {
-        this._resizeObserver = new ResizeObserver(entry => {
+    constructor(protected readonly _elementRef: ElementRef) {
+        this._resizeObserver = new ResizeObserver(() => {
             this.process();
         });
 
         this._resizeObserver.observe(this._elementRef.nativeElement);
     }
 
+    private get _hasScrollbar() {
+        const element = this._elementRef?.nativeElement as HTMLElement;
+        return element.clientHeight < element.scrollHeight;
+    }
+
     ngOnInit() {
         setTimeout(() => this.process(), 0);
     }
 
     process() {
-        const newClass = this.hasScrollbar ? 'has-scrollbar' : '';
-        if (this.class !== newClass) {
-            this.class = newClass;
-            this._changeDetector.markForCheck();
-        }
+        const newClass = this._hasScrollbar ? 'has-scrollbar' : '';
+        this._class.set(newClass);
     }
 
     ngOnDestroy() {

src/lib/directives/hidden-action.directive.ts

@@ -2,7 +2,6 @@ import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/c
 
 @Directive({
     selector: '[iqserHiddenAction]',
-    standalone: true,
 })
 export class HiddenActionDirective {
     @Input() requiredClicks = 4;

src/lib/directives/prevent-default.directive.ts

@@ -3,7 +3,6 @@ import { NGXLogger } from 'ngx-logger';
 
 @Directive({
     selector: '[iqserPreventDefault]',
-    standalone: true,
 })
 export class PreventDefaultDirective {
     readonly #logger = inject(NGXLogger);

src/lib/directives/stop-propagation.directive.ts

@@ -1,10 +1,9 @@
 import { booleanAttribute, Directive, HostListener, inject, Input } from '@angular/core';
-import { DisableStopPropagationDirective } from './disable-stop-propagation.directive';
 import { NGXLogger } from 'ngx-logger';
+import { DisableStopPropagationDirective } from './disable-stop-propagation.directive';
 
 @Directive({
     selector: '[iqserStopPropagation]',
-    standalone: true,
 })
 export class StopPropagationDirective {
     readonly #disableStopPropagation = inject(DisableStopPropagationDirective, { optional: true });
@@ -13,7 +12,7 @@ export class StopPropagationDirective {
 
     @HostListener('click', ['$event'])
     onClick($event: Event) {
-        if (this.#disableStopPropagation?.iqserDisableStopPropagation) {
+        if (this.#disableStopPropagation?.iqserDisableStopPropagation()) {
             this.#logger.info('[CLICK] iqserStopPropagation is disabled by iqserDisableStopPropagation');
             return;
         }

src/lib/directives/sync-width.directive.ts

@@ -2,7 +2,6 @@ import { Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/
 
 @Directive({
     selector: '[iqserSyncWidth]',
-    standalone: true,
 })
 export class SyncWidthDirective implements OnDestroy {
     @Input() iqserSyncWidth!: string;

src/lib/empty-state/empty-state.component.html

@@ -1,26 +1,22 @@
-<div
-    [ngStyle]="{
-        'padding-top': verticalPadding + 'px',
-        'padding-left': horizontalPadding + 'px',
-        'padding-right': horizontalPadding + 'px'
-    }"
-    class="empty-state"
->
-    <mat-icon *ngIf="icon" [svgIcon]="icon"></mat-icon>
+<div [ngStyle]="styles()" class="empty-state">
+    @if (icon(); as icon) {
+        <mat-icon [svgIcon]="icon"></mat-icon>
+    }
 
     <div class="ng-content-wrapper heading-l">
         <ng-content></ng-content>
     </div>
 
-    <div [innerHTML]="text" class="heading-l"></div>
+    <div [innerHTML]="text()" class="heading-l"></div>
 
-    <iqser-icon-button
-        (action)="action.emit()"
-        *ngIf="showButton"
-        [buttonId]="buttonId"
-        [icon]="buttonIcon"
-        [attr.help-mode-key]="helpModeKey"
-        [label]="buttonLabel"
-        [type]="iconButtonTypes.primary"
-    ></iqser-icon-button>
+    @if (showButton() && this.action.observed) {
+        <iqser-icon-button
+            (action)="action.emit()"
+            [buttonId]="buttonId()"
+            [icon]="buttonIcon()"
+            [attr.help-mode-key]="helpModeKey()"
+            [label]="buttonLabel()"
+            [type]="iconButtonTypes.primary"
+        ></iqser-icon-button>
+    }
 </div>

src/lib/empty-state/empty-state.component.ts

@@ -1,32 +1,42 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { IconButtonComponent, IconButtonTypes } from '../buttons';
-import { randomString } from '../utils';
-import { NgIf, NgStyle } from '@angular/common';
+import { NgStyle } from '@angular/common';
+import {
+    booleanAttribute,
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    EventEmitter,
+    input,
+    numberAttribute,
+    Output,
+} from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
+import { IconButtonComponent } from '../buttons/icon-button/icon-button.component';
+import { IconButtonTypes } from '../buttons/types/icon-button.type';
+import { randomString } from '../utils/functions';
 
 @Component({
-    selector: 'iqser-empty-state [text]',
+    selector: 'iqser-empty-state',
     templateUrl: './empty-state.component.html',
     styleUrls: ['./empty-state.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
-    imports: [NgStyle, MatIconModule, NgIf, IconButtonComponent],
+    imports: [NgStyle, MatIconModule, IconButtonComponent],
 })
-export class EmptyStateComponent implements OnInit {
-    readonly iconButtonTypes = IconButtonTypes;
+export class EmptyStateComponent {
+    protected readonly iconButtonTypes = IconButtonTypes;
 
-    @Input() text!: string;
-    @Input() icon?: string;
-    @Input() showButton = true;
-    @Input() buttonIcon = 'iqser:plus';
-    @Input() buttonLabel?: string;
-    @Input() buttonId = `${randomString()}-icon-button`;
-    @Input() horizontalPadding = 100;
-    @Input() verticalPadding = 120;
-    @Input() helpModeKey?: string;
+    readonly text = input.required<string>();
+    readonly icon = input<string>();
+    readonly showButton = input(true, { transform: booleanAttribute });
+    readonly buttonIcon = input('iqser:plus');
+    readonly buttonLabel = input<string>();
+    readonly buttonId = input(`${randomString()}-icon-button`);
+    readonly horizontalPadding = input(100, { transform: numberAttribute });
+    readonly verticalPadding = input(120, { transform: numberAttribute });
+    protected readonly styles = computed(() => ({
+        'padding-top': this.verticalPadding() + 'px',
+        'padding-left': this.horizontalPadding() + 'px',
+        'padding-right': this.horizontalPadding() + 'px',
+    }));
+    readonly helpModeKey = input<string>();
     @Output() readonly action = new EventEmitter();
-
-    ngOnInit(): void {
-        this.showButton = this.showButton && this.action.observed;
-    }
 }

src/lib/error/connection-status/connection-status.component.html

@@ -1,8 +1,5 @@
-<div
-    *ngIf="errorService.connectionStatus$ | async as status"
-    [@animateOpenClose]="status"
-    [ngClass]="status"
-    class="indicator flex-align-items-center"
->
-    <span [translate]="connectionStatusTranslations[status]"></span>
-</div>
+@if (connectionStatus(); as status) {
+    <div [@animateOpenClose]="status" [ngClass]="status" class="indicator flex-align-items-center">
+        <span [translate]="connectionStatusTranslations[status]"></span>
+    </div>
+}

src/lib/error/connection-status/connection-status.component.ts

@@ -1,6 +1,7 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { connectionStatusTranslations } from '../../translations';
 import { animate, state, style, transition, trigger } from '@angular/animations';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { connectionStatusTranslations } from '../../translations';
 import { ErrorService } from '../error.service';
 
 @Component({
@@ -16,8 +17,9 @@ import { ErrorService } from '../error.service';
         ]),
     ],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false,
 })
 export class ConnectionStatusComponent {
-    connectionStatusTranslations = connectionStatusTranslations;
-    protected readonly errorService = inject(ErrorService);
+    protected readonly connectionStatusTranslations = connectionStatusTranslations;
+    protected readonly connectionStatus = toSignal(inject(ErrorService).connectionStatus$);
 }

src/lib/error/full-page-error/full-page-error.component.html

@@ -1,13 +1,11 @@
-<ng-container *ngIf="errorService.error$ | async as error">
+@if (errorService.error$ | async; as error) {
     <section class="full-page-section"></section>
-
     <section class="full-page-content flex-align-items-center">
         <mat-icon svgIcon="iqser:failure"></mat-icon>
-
         <div [translate]="errorTitle(error)" class="heading-l mt-24"></div>
-
-        <div *ngIf="error.message" class="mt-16 error">{{ error.message }}</div>
-
+        @if (error.message) {
+            <div class="mt-16 error">{{ error.message }}</div>
+        }
         <iqser-icon-button
             (action)="action(error)"
             [icon]="actionIcon(error)"
@@ -16,4 +14,4 @@
             class="mt-20"
         ></iqser-icon-button>
     </section>
-</ng-container>
+}

src/lib/error/full-page-error/full-page-error.component.ts

@@ -1,18 +1,18 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { IconButtonTypes } from '../../buttons';
 import { CustomError, ErrorService, ErrorType } from '../error.service';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 @Component({
     selector: 'iqser-full-page-error',
     templateUrl: './full-page-error.component.html',
     styleUrls: ['./full-page-error.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false,
 })
 export class FullPageErrorComponent {
-    readonly iconButtonTypes = IconButtonTypes;
-
-    constructor(readonly errorService: ErrorService) {}
+    protected readonly iconButtonTypes = IconButtonTypes;
+    protected readonly errorService = inject(ErrorService);
 
     errorTitle(error: ErrorType): string {
         return error instanceof CustomError ? error.label : _('error.title');

src/lib/filtering/filter-card/filter-card.component.html

@@ -1,43 +1,51 @@
-<ng-container *ngIf="primaryFilterGroup$ | async as primaryGroup">
-    <div *ngIf="primaryGroup.filterceptionPlaceholder" class="input-wrapper">
-        <iqser-input-with-action
-            [(value)]="searchService.searchValue"
-            [id]="'filterception-' + primaryGroup.slug"
-            [placeholder]="primaryGroup.filterceptionPlaceholder"
-            [width]="'full'"
-        ></iqser-input-with-action>
-    </div>
+@if (primaryFilterGroup$ | async; as primaryGroup) {
+    @if (primaryGroup.filterceptionPlaceholder) {
+        <div class="input-wrapper">
+            <iqser-input-with-action
+                [(value)]="searchService.searchValue"
+                [id]="'filterception-' + primaryGroup.slug"
+                [placeholder]="primaryGroup.filterceptionPlaceholder"
+                [width]="'full'"
+            ></iqser-input-with-action>
+        </div>
+    }
 
     <ng-container *ngTemplateOutlet="filterHeader"></ng-container>
 
-    <div *ngIf="primaryFilters$ | async as filters" class="filter-content">
-        <ng-container
-            *ngFor="let filter of filters"
-            [ngTemplateOutletContext]="{
-                filter: filter,
-                filterGroup: primaryGroup,
-                atLeastOneIsExpandable: atLeastOneFilterIsExpandable$ | async
-            }"
-            [ngTemplateOutlet]="defaultFilterTemplate"
-        ></ng-container>
-    </div>
-
-    <div *ngIf="secondaryFilterGroup$ | async as secondaryGroup" class="filter-options">
-        <div class="filter-menu-options">
-            <div class="all-caps-label" translate="filter-menu.filter-options"></div>
+    @if (primaryFilters$ | async; as filters) {
+        <div class="filter-content">
+            @for (filter of filters; track filter.id) {
+                <ng-container
+                    [ngTemplateOutletContext]="{
+                        filter: filter,
+                        filterGroup: primaryGroup,
+                        atLeastOneIsExpandable: atLeastOneFilterIsExpandable$ | async,
+                    }"
+                    [ngTemplateOutlet]="defaultFilterTemplate"
+                ></ng-container>
+            }
         </div>
+    }
 
-        <ng-container
-            *ngFor="let filter of secondaryGroup.filters"
-            [ngTemplateOutletContext]="{
-                filter: filter,
-                filterGroup: secondaryGroup,
-                atLeastOneIsExpandable: atLeastOneSecondaryFilterIsExpandable$ | async
-            }"
-            [ngTemplateOutlet]="defaultFilterTemplate"
-        ></ng-container>
-    </div>
-</ng-container>
+    @if (secondaryFilterGroup$ | async; as secondaryGroup) {
+        <div class="filter-options">
+            <div class="filter-menu-options">
+                <div class="all-caps-label" translate="filter-menu.filter-options"></div>
+            </div>
+
+            @for (filter of secondaryGroup.filters; track filter.id) {
+                <ng-container
+                    [ngTemplateOutletContext]="{
+                        filter: filter,
+                        filterGroup: secondaryGroup,
+                        atLeastOneIsExpandable: atLeastOneSecondaryFilterIsExpandable$ | async,
+                    }"
+                    [ngTemplateOutlet]="defaultFilterTemplate"
+                ></ng-container>
+            }
+        </div>
+    }
+}
 
 <ng-template #defaultFilterLabelTemplate let-filter="filter">
     {{ filter?.label }}
@@ -45,30 +53,51 @@
 
 <!--TODO: move to separate component-->
 <ng-template #filterHeader>
-    <div *ngIf="primaryFilterGroup$ | async as primaryGroup" class="filter-menu-header">
-        <div [translateParams]="{ count: primaryGroup.filters.length }" [translate]="primaryFiltersLabel" class="all-caps-label"></div>
-        <div class="actions">
+    @if (primaryFilterGroup$ | async; as primaryGroup) {
+        <div class="filter-menu-header">
             <div
-                (click)="activatePrimaryFilters()"
-                *ngIf="!primaryGroup.singleSelect"
-                class="all-caps-label primary pointer"
-                iqserStopPropagation
-                translate="actions.all"
+                [translateParams]="{ count: primaryGroup.filters.length }"
+                [translate]="primaryFiltersLabel()"
+                class="all-caps-label"
             ></div>
-            <div (click)="deactivateFilters()" class="all-caps-label primary pointer" iqserStopPropagation translate="actions.none"></div>
+            <div class="actions">
+                @if (!primaryGroup.singleSelect) {
+                    <div
+                        (click)="activatePrimaryFilters()"
+                        class="all-caps-label primary pointer"
+                        iqserStopPropagation
+                        translate="actions.all"
+                    ></div>
+                }
+
+                <div
+                    (click)="deactivatePrimaryFilters()"
+                    class="all-caps-label primary pointer"
+                    iqserStopPropagation
+                    translate="actions.none"
+                ></div>
+            </div>
         </div>
-    </div>
+    }
 </ng-template>
 
 <!--TODO: move to separate component-->
 <ng-template #defaultFilterTemplate let-atLeastOneIsExpandable="atLeastOneIsExpandable" let-filter="filter" let-filterGroup="filterGroup">
     <div (click)="toggleFilterExpanded(filter)" class="mat-mdc-menu-item flex" iqserStopPropagation>
-        <div *ngIf="filter.children?.length > 0" class="arrow-wrapper">
-            <mat-icon *ngIf="filter.expanded" color="accent" svgIcon="iqser:arrow-down"></mat-icon>
-            <mat-icon *ngIf="!filter.expanded" color="accent" svgIcon="iqser:arrow-right"></mat-icon>
-        </div>
+        @if (filter.children?.length > 0) {
+            <div class="arrow-wrapper">
+                @if (filter.expanded) {
+                    <mat-icon color="accent" svgIcon="iqser:arrow-down"></mat-icon>
+                }
+                @if (!filter.expanded) {
+                    <mat-icon color="accent" svgIcon="iqser:arrow-right"></mat-icon>
+                }
+            </div>
+        }
 
-        <div *ngIf="atLeastOneIsExpandable && filter.children?.length === 0" class="arrow-wrapper spacer">&nbsp;</div>
+        @if (atLeastOneIsExpandable && filter.children?.length === 0) {
+            <div class="arrow-wrapper spacer">&nbsp;</div>
+        }
 
         <mat-checkbox
             (click)="filterCheckboxClicked(filter, filterGroup)"
@@ -84,19 +113,28 @@
             ></ng-container>
         </mat-checkbox>
 
-        <ng-container [ngTemplateOutletContext]="{ filter: filter }" [ngTemplateOutlet]="actionsTemplate"></ng-container>
+        <ng-container [ngTemplateOutletContext]="{ filter: filter }" [ngTemplateOutlet]="actionsTemplate()"></ng-container>
     </div>
 
-    <div *ngIf="filter.children?.length && filter.expanded">
-        <div *ngFor="let child of filter.children" class="padding-left mat-mdc-menu-item" iqserStopPropagation>
-            <mat-checkbox (click)="filterCheckboxClicked(child, filterGroup, filter)" [checked]="child.checked" iqserStopPropagation>
-                <ng-container
-                    [ngTemplateOutletContext]="{ filter: child }"
-                    [ngTemplateOutlet]="filterGroup.filterTemplate ?? defaultFilterLabelTemplate"
-                ></ng-container>
-            </mat-checkbox>
-
-            <ng-container [ngTemplateOutletContext]="{ filter: child }" [ngTemplateOutlet]="actionsTemplate"></ng-container>
+    @if (filter.children?.length && filter.expanded) {
+        <div>
+            @for (child of filter.children; track child) {
+                @if (!child.hidden) {
+                    <div class="padding-left mat-mdc-menu-item" iqserStopPropagation>
+                        <mat-checkbox
+                            (click)="filterCheckboxClicked(child, filterGroup, filter)"
+                            [checked]="child.checked"
+                            iqserStopPropagation
+                        >
+                            <ng-container
+                                [ngTemplateOutletContext]="{ filter: child }"
+                                [ngTemplateOutlet]="filterGroup.filterTemplate ?? defaultFilterLabelTemplate"
+                            ></ng-container>
+                        </mat-checkbox>
+                        <ng-container [ngTemplateOutletContext]="{ filter: child }" [ngTemplateOutlet]="actionsTemplate()"></ng-container>
+                    </div>
+                }
+            }
         </div>
-    </div>
+    }
 </ng-template>

src/lib/filtering/filter-card/filter-card.component.ts

@@ -1,16 +1,20 @@
-import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, TemplateRef } from '@angular/core';
+import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, input, numberAttribute, OnInit, TemplateRef } from '@angular/core';
+import { MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckbox } from '@angular/material/checkbox';
+import { MatIcon } from '@angular/material/icon';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { TranslateModule } from '@ngx-translate/core';
 import { combineLatest, Observable, pipe } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { StopPropagationDirective } from '../../directives/stop-propagation.directive';
+import { InputWithActionComponent } from '../../inputs/input-with-action/input-with-action.component';
+import { SearchService } from '../../search/search.service';
+import { shareDistinctLast, shareLast } from '../../utils/operators';
+import { FilterService } from '../filter.service';
+import { Filter } from '../models/filter';
+import { IFilterGroup } from '../models/filter-group.model';
 import { IFilter } from '../models/filter.model';
 import { INestedFilter } from '../models/nested-filter.model';
-import { IFilterGroup } from '../models/filter-group.model';
-import { extractFilterValues, handleCheckedValue } from '../filter-utils';
-import { FilterService } from '../filter.service';
-import { SearchService } from '../../search';
-import { Filter } from '../models/filter';
-import { map } from 'rxjs/operators';
-import { shareDistinctLast, shareLast } from '../../utils';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/checkbox';
 
 const areExpandable = (nestedFilter: INestedFilter) => !!nestedFilter?.children?.length;
 const atLeastOneIsExpandable = pipe(
@@ -18,19 +22,8 @@ const atLeastOneIsExpandable = pipe(
     shareDistinctLast(),
 );
 
-export interface LocalStorageFilter {
-    id: string;
-    checked: boolean;
-    children?: LocalStorageFilter[] | null;
-}
-
-export interface LocalStorageFilters {
-    primaryFilters: LocalStorageFilter[] | null;
-    secondaryFilters: LocalStorageFilter[] | null;
-}
-
 @Component({
-    selector: 'iqser-filter-card [primaryFiltersSlug]',
+    selector: 'iqser-filter-card',
     templateUrl: './filter-card.component.html',
     styleUrls: ['./filter-card.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -44,27 +37,29 @@ export interface LocalStorageFilters {
             },
         },
     ],
+    imports: [AsyncPipe, InputWithActionComponent, NgTemplateOutlet, TranslateModule, MatIcon, MatCheckbox, StopPropagationDirective],
 })
 export class FilterCardComponent implements OnInit {
-    @Input() primaryFiltersSlug!: string;
-    @Input() fileId?: string;
-    @Input() actionsTemplate?: TemplateRef<unknown>;
-    @Input() secondaryFiltersSlug = '';
-    @Input() primaryFiltersLabel: string = _('filter-menu.filter-types');
-    @Input() minWidth = 350;
-
+    readonly #filterService = inject(FilterService);
+    readonly #elementRef = inject(ElementRef);
+    protected readonly searchService = inject<SearchService<Filter>>(SearchService);
+    readonly primaryFiltersSlug = input.required<string>();
+    readonly fileId = input<string>();
+    readonly actionsTemplate = input<TemplateRef<unknown>>();
+    readonly secondaryFiltersSlug = input('');
+    readonly primaryFiltersLabel = input<string>(_('filter-menu.filter-types'));
+    readonly minWidth = input(350, { transform: numberAttribute });
     primaryFilterGroup$!: Observable<IFilterGroup | undefined>;
     secondaryFilterGroup$!: Observable<IFilterGroup | undefined>;
     primaryFilters$!: Observable<IFilter[] | undefined>;
-
     atLeastOneFilterIsExpandable$?: Observable<boolean>;
     atLeastOneSecondaryFilterIsExpandable$?: Observable<boolean>;
 
-    constructor(
-        readonly filterService: FilterService,
-        readonly searchService: SearchService<Filter>,
-        private readonly _elementRef: ElementRef,
-    ) {}
+    constructor() {
+        effect(() => {
+            (this.#elementRef.nativeElement as HTMLElement).style.setProperty('--filter-card-min-width', `${this.minWidth()}px`);
+        });
+    }
 
     private get _primaryFilters$(): Observable<IFilter[]> {
         return combineLatest([this.primaryFilterGroup$, this.searchService.valueChanges$]).pipe(
@@ -74,87 +69,37 @@ export class FilterCardComponent implements OnInit {
     }
 
     ngOnInit() {
-        this.primaryFilterGroup$ = this.filterService.getGroup$(this.primaryFiltersSlug).pipe(shareLast());
-        this.secondaryFilterGroup$ = this.filterService.getGroup$(this.secondaryFiltersSlug).pipe(shareLast());
+        this.primaryFilterGroup$ = this.#filterService.getGroup$(this.primaryFiltersSlug()).pipe(shareLast());
+        this.secondaryFilterGroup$ = this.#filterService.getGroup$(this.secondaryFiltersSlug()).pipe(shareLast());
         this.primaryFilters$ = this._primaryFilters$;
 
         this.atLeastOneFilterIsExpandable$ = atLeastOneIsExpandable(this.primaryFilterGroup$);
         this.atLeastOneSecondaryFilterIsExpandable$ = atLeastOneIsExpandable(this.secondaryFilterGroup$);
-
-        (this._elementRef.nativeElement as HTMLElement).style.setProperty('--filter-card-min-width', `${this.minWidth}px`);
     }
 
     filterCheckboxClicked(nestedFilter: INestedFilter, filterGroup: IFilterGroup, parent?: INestedFilter): void {
-        if (filterGroup.singleSelect) {
-            this.deactivateFilters(nestedFilter.id);
-        }
+        this.#filterService.filterCheckboxClicked({
+            nestedFilter,
+            filterGroup,
+            parent,
+            primaryFiltersSlug: this.primaryFiltersSlug(),
+        });
+        this.#filterService.updateFiltersInLocalStorage(this.fileId());
+    }
 
-        // eslint-disable-next-line no-param-reassign
-        nestedFilter.checked = !nestedFilter.checked;
-
-        if (parent) {
-            handleCheckedValue(parent);
-        } else {
-            // eslint-disable-next-line no-param-reassign
-            if (nestedFilter.indeterminate) {
-                nestedFilter.checked = false;
-            }
-            // eslint-disable-next-line no-param-reassign
-            nestedFilter.indeterminate = false;
-            // eslint-disable-next-line no-return-assign,no-param-reassign
-            nestedFilter.children?.forEach(f => (f.checked = !!nestedFilter.checked));
-        }
-
-        this.filterService.refresh();
-        this.#updateFiltersInLocalStorage();
+    deactivatePrimaryFilters() {
+        this.#filterService.deactivateFilters({ primaryFiltersSlug: this.primaryFiltersSlug() });
+        this.#filterService.updateFiltersInLocalStorage(this.fileId());
     }
 
     activatePrimaryFilters(): void {
-        this._setFilters(this.primaryFiltersSlug, true);
-    }
-
-    deactivateFilters(exceptedFilterId?: string): void {
-        this._setFilters(this.primaryFiltersSlug, false, exceptedFilterId);
-        if (this.secondaryFiltersSlug) {
-            this._setFilters(this.secondaryFiltersSlug, false, exceptedFilterId);
-        }
+        this.#filterService.setFilters(this.primaryFiltersSlug(), true);
+        this.#filterService.updateFiltersInLocalStorage(this.fileId());
     }
 
     toggleFilterExpanded(nestedFilter: INestedFilter): void {
         // eslint-disable-next-line no-param-reassign
         nestedFilter.expanded = !nestedFilter.expanded;
-        this.filterService.refresh();
-    }
-
-    private _setFilters(filterGroup: string, checked = false, exceptedFilterId?: string) {
-        const filters = this.filterService.getGroup(filterGroup)?.filters;
-        filters?.forEach(f => {
-            if (f.id !== exceptedFilterId) {
-                // eslint-disable-next-line no-param-reassign
-                f.checked = checked;
-                // eslint-disable-next-line no-param-reassign
-                f.indeterminate = false;
-                // eslint-disable-next-line no-return-assign,no-param-reassign
-                f.children?.forEach(ff => (ff.checked = checked));
-            }
-        });
-        this.filterService.refresh();
-    }
-
-    #updateFiltersInLocalStorage(): void {
-        if (this.fileId) {
-            const primaryFilters = this.filterService.getGroup('primaryFilters');
-            const secondaryFilters = this.filterService.getGroup('secondaryFilters');
-
-            const filters: LocalStorageFilters = {
-                primaryFilters: extractFilterValues(primaryFilters?.filters),
-                secondaryFilters: extractFilterValues(secondaryFilters?.filters),
-            };
-
-            const workloadFiltersString = localStorage.getItem('workload-filters') ?? '{}';
-            const workloadFilters = JSON.parse(workloadFiltersString);
-            workloadFilters[this.fileId] = filters;
-            localStorage.setItem('workload-filters', JSON.stringify(workloadFilters));
-        }
+        this.#filterService.refresh();
     }
 }

src/lib/filtering/filter-utils.ts

@@ -1,10 +1,11 @@
 /* eslint-disable no-param-reassign */
-import { INestedFilter } from './models/nested-filter.model';
+import { IListable } from '../listing/models/listable';
+import { Id } from '../listing/models/trackable';
 import { IFilterGroup } from './models/filter-group.model';
 import { IFilter } from './models/filter.model';
+import { LocalStorageFilter } from './models/local-filters.model';
 import { NestedFilter } from './models/nested-filter';
-import { Id, IListable } from '../listing';
-import { LocalStorageFilter } from './filter-card/filter-card.component';
+import { INestedFilter } from './models/nested-filter.model';
 
 function copySettings(oldFilters: INestedFilter[], newFilters: INestedFilter[]) {
     if (!oldFilters || !newFilters) {
@@ -15,6 +16,7 @@ function copySettings(oldFilters: INestedFilter[], newFilters: INestedFilter[])
         const newFilter = newFilters.find(f => f.id === filter.id);
         if (newFilter) {
             newFilter.checked = filter.checked;
+            newFilter.expanded = filter.expanded;
             newFilter.indeterminate = filter.indeterminate;
             if (filter.children && newFilter.children) {
                 copySettings(filter.children, newFilter.children);

src/lib/filtering/filter.service.ts

@@ -1,13 +1,31 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { map, startWith, switchMap } from 'rxjs/operators';
-import { processFilters, toFlatFilters } from './filter-utils';
-import { IFilterGroup } from './models/filter-group.model';
-import { INestedFilter } from './models/nested-filter.model';
 import { get, shareDistinctLast, shareLast, some } from '../utils';
-import { NestedFilter } from './models/nested-filter';
+import { extractFilterValues, handleCheckedValue, processFilters, toFlatFilters } from './filter-utils';
 import { Filter } from './models/filter';
+import { IFilterGroup } from './models/filter-group.model';
 import { IFilter } from './models/filter.model';
+import { LocalStorageFilters } from './models/local-filters.model';
+import { NestedFilter } from './models/nested-filter';
+import { INestedFilter } from './models/nested-filter.model';
+
+export interface CheckboxClickedParams {
+    nestedFilter: INestedFilter;
+    filterGroup: IFilterGroup;
+    parent?: INestedFilter;
+    primaryFiltersSlug: string;
+}
+
+export interface DeactivateFiltersParams {
+    primaryFiltersSlug: string;
+    secondaryFiltersSlug?: string;
+    exceptedFilterId?: string;
+}
+
+const PRIMARY_FILTERS = 'primaryFilters';
+const SECONDARY_FILTERS = 'secondaryFilters';
+const WORKLOAD_FILTERS_KEY = 'workload-filters';
 
 @Injectable()
 export class FilterService {
@@ -196,4 +214,70 @@ export class FilterService {
             this.addSingleFilter(filter);
         }
     }
+
+    setFilters(filterGroup: string, checked = false, exceptedFilterId?: string) {
+        const filters = this.getGroup(filterGroup)?.filters;
+        filters?.forEach(f => {
+            if (f.id !== exceptedFilterId) {
+                // eslint-disable-next-line no-param-reassign
+                f.checked = checked;
+                // eslint-disable-next-line no-param-reassign
+                f.indeterminate = false;
+                // eslint-disable-next-line no-return-assign,no-param-reassign
+                f.children?.forEach(ff => (ff.checked = checked));
+            }
+        });
+        this.refresh();
+    }
+
+    deactivateFilters(params: DeactivateFiltersParams) {
+        const { primaryFiltersSlug, secondaryFiltersSlug, exceptedFilterId } = params;
+        this.setFilters(primaryFiltersSlug, false, exceptedFilterId);
+        if (secondaryFiltersSlug) {
+            this.setFilters(secondaryFiltersSlug, false, exceptedFilterId);
+        }
+    }
+
+    filterCheckboxClicked(params: CheckboxClickedParams) {
+        const { filterGroup, nestedFilter, parent, primaryFiltersSlug } = params;
+
+        if (filterGroup.singleSelect) {
+            this.deactivateFilters({ primaryFiltersSlug, exceptedFilterId: nestedFilter.id });
+        }
+
+        // eslint-disable-next-line no-param-reassign
+        nestedFilter.checked = !nestedFilter.checked;
+
+        if (parent) {
+            handleCheckedValue(parent);
+        } else {
+            // eslint-disable-next-line no-param-reassign
+            if (nestedFilter.indeterminate) {
+                nestedFilter.checked = false;
+            }
+            // eslint-disable-next-line no-param-reassign
+            nestedFilter.indeterminate = false;
+            // eslint-disable-next-line no-return-assign,no-param-reassign
+            nestedFilter.children?.forEach(f => (f.checked = !!nestedFilter.checked));
+        }
+
+        this.refresh();
+    }
+
+    updateFiltersInLocalStorage(fileId?: string) {
+        if (fileId) {
+            const primaryFilters = this.getGroup(PRIMARY_FILTERS);
+            const secondaryFilters = this.getGroup(SECONDARY_FILTERS);
+
+            const filters: LocalStorageFilters = {
+                primaryFilters: extractFilterValues(primaryFilters?.filters),
+                secondaryFilters: extractFilterValues(secondaryFilters?.filters),
+            };
+
+            const workloadFiltersString = localStorage.getItem(WORKLOAD_FILTERS_KEY) ?? '{}';
+            const workloadFilters = JSON.parse(workloadFiltersString);
+            workloadFilters[fileId] = filters;
+            localStorage.setItem(WORKLOAD_FILTERS_KEY, JSON.stringify(workloadFilters));
+        }
+    }
 }

src/lib/filtering/filters.module.ts

@@ -1,19 +1,18 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { TranslateModule } from '@ngx-translate/core';
-import { ChevronButtonComponent, IconButtonComponent } from '../buttons';
-import { PopupFilterComponent } from './popup-filter/popup-filter.component';
+import { ChevronButtonComponent } from '../buttons/chevron-button/chevron-button.component';
+import { IconButtonComponent } from '../buttons/icon-button/icon-button.component';
+import { PreventDefaultDirective } from '../directives/prevent-default.directive';
+import { StopPropagationDirective } from '../directives/stop-propagation.directive';
+import { InputWithActionComponent } from '../inputs/input-with-action/input-with-action.component';
 import { QuickFiltersComponent } from './quick-filters/quick-filters.component';
-import { IqserHelpModeModule } from '../help-mode';
 import { SingleFilterComponent } from './single-filter/single-filter.component';
-import { FilterCardComponent } from './filter-card/filter-card.component';
-import { MatIconModule } from '@angular/material/icon';
-import { PreventDefaultDirective, StopPropagationDirective } from '../directives';
-import { InputWithActionComponent } from '../inputs';
 
-const components = [QuickFiltersComponent, PopupFilterComponent, SingleFilterComponent, FilterCardComponent];
+const components = [QuickFiltersComponent, SingleFilterComponent];
 
 @NgModule({
     declarations: [...components],
@@ -23,7 +22,6 @@ const components = [QuickFiltersComponent, PopupFilterComponent, SingleFilterCom
         MatCheckboxModule,
         MatMenuModule,
         TranslateModule,
-        IqserHelpModeModule,
         IconButtonComponent,
         ChevronButtonComponent,
         MatIconModule,

src/lib/filtering/index.ts

@@ -11,3 +11,4 @@ export * from './models/nested-filter.model';
 
 export * from './popup-filter/popup-filter.component';
 export * from './quick-filters/quick-filters.component';
+export * from './simple-popup-filter/simple-popup-filter.component';

src/lib/filtering/models/filter.model.ts

@@ -10,5 +10,6 @@ export interface IFilter {
     readonly required?: boolean;
     readonly disabled?: boolean;
     readonly helpModeKey?: string;
+    readonly hidden?: boolean;
     readonly metadata?: Record<string, any>;
 }

src/lib/filtering/models/filter.ts

@@ -1,5 +1,5 @@
+import { IListable } from '../../listing/models/listable';
 import { IFilter } from './filter.model';
-import { IListable } from '../../listing';
 
 export class Filter implements IFilter, IListable {
     readonly id: string;
@@ -10,6 +10,7 @@ export class Filter implements IFilter, IListable {
     readonly checker?: (obj?: unknown) => boolean;
     readonly skipTranslation?: boolean;
     readonly metadata?: Record<string, any>;
+    readonly hidden?: boolean;
 
     checked: boolean;
     matches?: number;
@@ -25,6 +26,7 @@ export class Filter implements IFilter, IListable {
         this.required = !!filter.required;
         this.skipTranslation = !!filter.skipTranslation;
         this.metadata = filter.metadata;
+        this.hidden = !!filter.hidden;
     }
 
     get searchKey(): string {

src/lib/filtering/models/local-filters.model.ts

@@ -0,0 +1,10 @@
+export interface LocalStorageFilter {
+    id: string;
+    checked: boolean;
+    children?: LocalStorageFilter[] | null;
+}
+
+export interface LocalStorageFilters {
+    primaryFilters: LocalStorageFilter[] | null;
+    secondaryFilters: LocalStorageFilter[] | null;
+}

src/lib/filtering/models/nested-filter.ts

@@ -1,4 +1,4 @@
-import { IListable } from '../../listing';
+import { IListable } from '../../listing/models/listable';
 import { Filter } from './filter';
 import { INestedFilter } from './nested-filter.model';
 
@@ -8,8 +8,8 @@ export class NestedFilter extends Filter implements INestedFilter, IListable {
     disabled?: boolean;
     helpModeKey?: string;
     readonly children: Filter[];
-    readonly skipTranslation?: boolean;
-    readonly metadata?: Record<string, any>;
+    override readonly skipTranslation?: boolean;
+    override readonly metadata?: Record<string, any>;
 
     constructor(nestedFilter: INestedFilter) {
         super(nestedFilter);

src/lib/filtering/models/simple-filter-option.ts

@@ -0,0 +1,4 @@
+export interface SimpleFilterOption<T> {
+    value: T;
+    label: string;
+}

src/lib/filtering/popup-filter/popup-filter.component.html

@@ -1,5 +1,5 @@
-<ng-container *ngIf="primaryFilterGroup$ | async as primaryGroup">
-    <ng-container *ngIf="primaryGroup.icon">
+@if (primaryFilterGroup$ | async; as primaryGroup) {
+    @if (primaryGroup.icon) {
         <iqser-icon-button
             [attr.aria-expanded]="expanded$ | async"
             [class.disabled]="primaryFiltersDisabled$ | async"
@@ -10,9 +10,9 @@
             [showDot]="hasActiveFilters$ | async"
             buttonId="{{ primaryGroup.slug }}"
         ></iqser-icon-button>
-    </ng-container>
+    }
 
-    <ng-container *ngIf="!primaryGroup.icon">
+    @if (!primaryGroup.icon) {
         <iqser-chevron-button
             [attr.aria-expanded]="expanded$ | async"
             [class.disabled]="primaryFiltersDisabled$ | async"
@@ -21,7 +21,7 @@
             [matMenuTriggerFor]="filterMenu"
             [showDot]="hasActiveFilters$ | async"
         ></iqser-chevron-button>
-    </ng-container>
+    }
 
     <mat-menu
         #filterMenu="matMenu"
@@ -41,4 +41,4 @@
             </ng-template>
         </div>
     </mat-menu>
-</ng-container>
+}

src/lib/filtering/popup-filter/popup-filter.component.ts

@@ -1,16 +1,34 @@
+import { AsyncPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input, OnInit, TemplateRef } from '@angular/core';
+import { MatMenu, MatMenuContent, MatMenuTrigger } from '@angular/material/menu';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { TranslateModule } from '@ngx-translate/core';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { delay, map } from 'rxjs/operators';
-import { shareDistinctLast, shareLast, some } from '../../utils';
+import { ChevronButtonComponent } from '../../buttons/chevron-button/chevron-button.component';
+import { IconButtonComponent } from '../../buttons/icon-button/icon-button.component';
+import { StopPropagationDirective } from '../../directives/stop-propagation.directive';
+import { shareDistinctLast, shareLast, some } from '../../utils/operators';
+import { FilterCardComponent } from '../filter-card/filter-card.component';
 import { FilterService } from '../filter.service';
 import { IFilterGroup } from '../models/filter-group.model';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 @Component({
     selector: 'iqser-popup-filter [primaryFiltersSlug]',
     templateUrl: './popup-filter.component.html',
     styleUrls: ['./popup-filter.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        IconButtonComponent,
+        AsyncPipe,
+        TranslateModule,
+        MatMenuTrigger,
+        ChevronButtonComponent,
+        MatMenu,
+        FilterCardComponent,
+        StopPropagationDirective,
+        MatMenuContent,
+    ],
 })
 export class PopupFilterComponent implements OnInit {
     @Input() primaryFiltersSlug!: string;

src/lib/filtering/quick-filters/quick-filters.component.html

@@ -1,12 +1,13 @@
-<ng-container *ngIf="quickFilters$ | async as filters">
-    <div
-        (click)="filterService.toggleFilter('quickFilters', filter.id)"
-        *ngFor="let filter of filters"
-        [class.active]="filter.checked"
-        [class.disabled]="filter.disabled"
-        class="quick-filter"
-        [attr.help-mode-key]="filter.helpModeKey"
-    >
-        {{ filter.label }}
-    </div>
-</ng-container>
+@if (quickFilters$ | async; as filters) {
+    @for (filter of filters; track filter.id) {
+        <div
+            (click)="filterService.toggleFilter('quickFilters', filter.id)"
+            [class.active]="filter.checked"
+            [class.disabled]="filter.disabled"
+            class="quick-filter"
+            [attr.help-mode-key]="filter.helpModeKey"
+        >
+            {{ filter.label }}
+        </div>
+    }
+}

src/lib/filtering/quick-filters/quick-filters.component.ts

@@ -6,6 +6,7 @@ import { FilterService } from '../filter.service';
     templateUrl: './quick-filters.component.html',
     styleUrls: ['./quick-filters.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false,
 })
 export class QuickFiltersComponent {
     readonly quickFilters$ = this.filterService.getFilterModels$('quickFilters');

src/lib/filtering/simple-popup-filter/simple-popup-filter.component.html

@@ -0,0 +1,66 @@
+@if (type() === 'text' && icon()) {
+    <iqser-icon-button
+        [attr.aria-expanded]="expanded()"
+        [class.disabled]="disabled()"
+        [disabled]="disabled()"
+        [icon]="icon()"
+        [label]="label()"
+        [matMenuTriggerFor]="filterMenu"
+        [showDot]="hasActiveFilters()"
+    ></iqser-icon-button>
+}
+
+@if (type() === 'text' && !icon()) {
+    <iqser-chevron-button
+        [attr.aria-expanded]="expanded()"
+        [class.disabled]="disabled()"
+        [disabled]="disabled()"
+        [label]="label()"
+        [matMenuTriggerFor]="filterMenu"
+        [showDot]="hasActiveFilters()"
+    ></iqser-chevron-button>
+}
+
+@if (type() === 'icon') {
+    <iqser-circle-button
+        [attr.aria-expanded]="expanded()"
+        [class.disabled]="disabled()"
+        [disabled]="disabled()"
+        [matMenuTriggerFor]="filterMenu"
+        [showDot]="hasActiveFilters()"
+        [icon]="icon() || 'iqser:filter-list'"
+    ></iqser-circle-button>
+}
+
+<mat-menu #filterMenu="matMenu" (closed)="expanded.set(false)" xPosition="before">
+    <div iqserStopPropagation>
+        <ng-template matMenuContent>
+            <div class="input-wrapper">
+                <iqser-input-with-action
+                    (valueChange)="searchValue.set($event)"
+                    [placeholder]="filterPlaceholder()"
+                    [value]="searchValue()"
+                    [width]="'full'"
+                ></iqser-input-with-action>
+            </div>
+
+            <div class="filter-menu-header">
+                <div class="all-caps-label" translate="filter-menu.label"></div>
+                <div class="actions">
+                    <div (click)="_selectAll()" class="all-caps-label primary pointer" iqserStopPropagation translate="actions.all"></div>
+                    <div (click)="_clear()" class="all-caps-label primary pointer" iqserStopPropagation translate="actions.none"></div>
+                </div>
+            </div>
+
+            <div class="filter-content">
+                @for (option of displayedOptions(); track option) {
+                    <div mat-menu-item (click)="_filterCheckboxClicked(option)">
+                        <mat-checkbox [checked]="selectedOptions().includes(option)" class="filter-menu-checkbox">
+                            <span class="clamp-1">{{ option.label }}</span>
+                        </mat-checkbox>
+                    </div>
+                }
+            </div>
+        </ng-template>
+    </div>
+</mat-menu>

src/lib/filtering/simple-popup-filter/simple-popup-filter.component.scss

@@ -0,0 +1,25 @@
+@use 'common-mixins';
+
+.filter-menu-options,
+.filter-menu-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 16px 16px 16px;
+    min-width: var(--filter-card-min-width);
+
+    .actions {
+        display: flex;
+        gap: 8px;
+    }
+}
+
+.input-wrapper {
+    padding: 0 8px 8px 8px;
+}
+
+.filter-content {
+    max-height: 300px;
+    max-width: 500px;
+    overflow: auto;
+    @include common-mixins.scroll-bar;
+}

src/lib/filtering/simple-popup-filter/simple-popup-filter.component.ts

@@ -0,0 +1,81 @@
+import { Component, computed, effect, input, output, signal, untracked } from '@angular/core';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatMenuModule } from '@angular/material/menu';
+
+import { TranslateModule } from '@ngx-translate/core';
+import { CircleButtonComponent, IconButtonComponent } from '../../buttons';
+import { ChevronButtonComponent } from '../../buttons/chevron-button/chevron-button.component';
+import { StopPropagationDirective } from '../../directives';
+import { InputWithActionComponent } from '../../inputs/input-with-action/input-with-action.component';
+import { SimpleFilterOption } from '../models/simple-filter-option';
+
+@Component({
+    selector: 'iqser-simple-popup-filter',
+    templateUrl: './simple-popup-filter.component.html',
+    styleUrls: ['./simple-popup-filter.component.scss'],
+    imports: [
+        MatMenuModule,
+        IconButtonComponent,
+        ChevronButtonComponent,
+        StopPropagationDirective,
+        InputWithActionComponent,
+        TranslateModule,
+        MatCheckbox,
+        IconButtonComponent,
+        CircleButtonComponent,
+    ],
+})
+export class SimplePopupFilterComponent<T> {
+    readonly options = input.required<SimpleFilterOption<T>[]>();
+    readonly icon = input<string>();
+    readonly label = input<string>();
+    readonly filterPlaceholder = input.required<string>();
+    readonly disabled = input<boolean>(false);
+    readonly type = input<'text' | 'icon'>('text');
+    readonly selectionChanged = output<SimpleFilterOption<T>[]>();
+
+    readonly expanded = signal(false);
+    readonly selectedOptions = signal<SimpleFilterOption<T>[]>([]);
+    readonly hasActiveFilters = computed(() => this.selectedOptions().length > 0);
+    readonly searchValue = signal('');
+    readonly displayedOptions = computed(() =>
+        this.options().filter(option => option.label.toLowerCase().includes(this.searchValue().toLowerCase())),
+    );
+
+    constructor() {
+        effect(() => {
+            this.selectionChanged.emit(this.selectedOptions());
+        });
+
+        /** If the options change and the selected options are not in the new options, remove them. */
+        effect(
+            () => {
+                const allOptions = this.options();
+                const selectedOptions = untracked(this.selectedOptions);
+
+                if (selectedOptions.some(selectedOption => !allOptions.find(o => o.value === selectedOption))) {
+                    this.selectedOptions.set(
+                        selectedOptions.filter(selectedOption => allOptions.find(o => o.value === selectedOption.value)),
+                    );
+                }
+            },
+            { allowSignalWrites: true },
+        );
+    }
+
+    protected _selectAll(): void {
+        this.selectedOptions.set(untracked(this.options));
+    }
+
+    protected _clear(): void {
+        this.selectedOptions.set([]);
+    }
+
+    protected _filterCheckboxClicked(option: SimpleFilterOption<T>): void {
+        if (this.selectedOptions().includes(option)) {
+            this.selectedOptions.set(this.selectedOptions().filter(selectedOption => selectedOption !== option));
+        } else {
+            this.selectedOptions.set([...this.selectedOptions(), option]);
+        }
+    }
+}

src/lib/filtering/single-filter/single-filter.component.ts

@@ -7,6 +7,7 @@ import { IFilter } from '../models/filter.model';
     selector: 'iqser-single-filter',
     templateUrl: './single-filter.component.html',
     styleUrls: ['./single-filter.component.scss'],
+    standalone: false,
 })
 export class SingleFilterComponent {
     @Input() filter!: IFilter;

src/lib/help-mode/help-button/help-button.component.html

@@ -2,11 +2,14 @@
     [id]="buttonId"
     class="help-mode-slide-toggle"
     [class.dialog-toggle]="dialogButton"
-    [class.active]="helpModeService.isHelpModeActive"
+    [class.active]="helpModeService.isHelpModeActive()"
+    [matTooltip]="buttonTooltip"
+    #helpModeButton
 >
-    <input type="checkbox" class="toggle-input" [checked]="helpModeService.isHelpModeActive" (change)="toggleHelpMode()" />
-    <div class="toggle-track"></div>
-    <div class="toggle-thumb">
-        <mat-icon svgIcon="iqser:help-outline" [class.active-thumb]="helpModeService.isHelpModeActive"></mat-icon>
+    <input type="checkbox" class="toggle-input" [checked]="helpModeService.isHelpModeActive()" (change)="toggleHelpMode()" />
+    <div class="toggle-track">
+        <div class="toggle-thumb">
+            <mat-icon svgIcon="iqser:help-outline" [class.active-thumb]="helpModeService.isHelpModeActive()"></mat-icon>
+        </div>
     </div>
 </label>

src/lib/help-mode/help-button/help-button.component.scss

@@ -1,19 +1,20 @@
 :host {
     display: flex;
     align-items: center;
-    width: 60px;
+    width: 40px;
+    height: 24px;
 }
 
 .help-mode-slide-toggle {
     display: inline-block;
     position: relative;
-    width: 60px;
-    height: 34px;
+    width: 40px;
+    height: 24px;
     cursor: pointer;
 
     &.active,
     &.dialog-toggle {
-        z-index: 1100;
+        z-index: 1200;
     }
 
     .toggle-input {
@@ -21,27 +22,24 @@
     }
 
     .toggle-track {
-        position: absolute;
-        top: 50%;
-        left: 0;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: start;
         width: 100%;
-        height: 34px;
+        height: 25px;
         background-color: var(--iqser-grey-4);
         border-radius: 20px;
-        transform: translateY(-50%);
     }
 
     .toggle-thumb {
-        position: absolute;
-        top: 50%;
-        left: 4px;
-        width: 25px;
-        height: 25px;
+        margin-left: 6%;
+        width: 20px;
+        height: 20px;
         background-color: #fff;
         border-radius: 50%;
         box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-        transform: translateY(-50%);
-        transition: left 0.3s ease;
+        transition: margin-left 0.3s ease;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -59,7 +57,9 @@
         background: var(--iqser-helpmode-primary);
     }
 
-    .toggle-input:checked + .toggle-track + .toggle-thumb {
-        left: calc(100% - 30px);
+    .toggle-input:checked + .toggle-track {
+        .toggle-thumb {
+            margin-left: 43.5%;
+        }
     }
 }

src/lib/help-mode/help-button/help-button.component.ts

@@ -1,25 +1,55 @@
 /* eslint-disable @angular-eslint/prefer-on-push-component-change-detection */
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
-import { HelpModeService } from '../index';
+import { Component, effect, ElementRef, HostListener, Input, OnDestroy, OnInit, viewChild } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { HelpModeService } from '../help-mode.service';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslateService } from '@ngx-translate/core';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 @Component({
     selector: 'iqser-help-button',
     templateUrl: './help-button.component.html',
     styleUrls: ['./help-button.component.scss'],
+    imports: [MatIcon, MatTooltip],
 })
-export class HelpButtonComponent implements OnInit, AfterViewInit, OnDestroy {
+export class HelpButtonComponent implements OnInit, OnDestroy {
+    #helpModeHasBeenActivated = false;
+    readonly helpModeButton = viewChild.required<ElementRef>('helpModeButton');
     @Input() dialogButton = true;
-    helpModeButton: HTMLElement;
 
     constructor(
         private readonly _elementRef: ElementRef,
+        private readonly _translateService: TranslateService,
         readonly helpModeService: HelpModeService,
-    ) {}
+    ) {
+        effect(() => {
+            if (this.helpModeService.isHelpModeActive()) {
+                this.#helpModeHasBeenActivated = true;
+                setTimeout(() => this.#applyActiveButtonStyles(), 300);
+            } else if (this.#helpModeHasBeenActivated) {
+                setTimeout(() => this.#applyInactiveButtonStyles(), 300);
+            }
+        });
+    }
+
+    get buttonTooltip() {
+        const translation = this.helpModeService.isHelpModeActive() ? _('help-button.disable') : _('help-button.enable');
+        return this._translateService.instant(translation);
+    }
 
     get buttonId() {
         return `help-mode-button${this.dialogButton ? '-dialog' : ''}`;
     }
 
+    get currentComponentRect() {
+        return this._elementRef.nativeElement.getBoundingClientRect();
+    }
+
+    @HostListener('window:resize', ['$event'])
+    onResize() {
+        if (this.helpModeService.isHelpModeActive()) this.#applyActiveButtonStyles();
+    }
+
     ngOnInit() {
         if (this.dialogButton) {
             const defaultButton = document.getElementById('help-mode-button') as HTMLElement;
@@ -27,34 +57,39 @@ export class HelpButtonComponent implements OnInit, AfterViewInit, OnDestroy {
         }
     }
 
-    ngAfterViewInit() {
-        const currentComponent = this._elementRef.nativeElement;
-        this.helpModeButton = currentComponent.querySelector('.help-mode-slide-toggle');
-
-        if (this.helpModeButton) {
-            setTimeout(() => {
-                const currentComponentRect = currentComponent.getBoundingClientRect();
-                this.helpModeButton.style.setProperty('position', 'fixed');
-                this.helpModeButton.style.setProperty('top', `${currentComponentRect.top}px`);
-                this.helpModeButton.style.setProperty('left', `${currentComponentRect.left}px`);
-                document.body.appendChild(this.helpModeButton);
-            }, 500);
-        }
-    }
-
     ngOnDestroy() {
-        document.body.removeChild(this.helpModeButton);
         if (this.dialogButton) {
             const defaultButton = document.getElementById('help-mode-button') as HTMLElement;
             defaultButton.style.removeProperty('z-index');
+
+            if (!this.helpModeService.isHelpModeActive()) {
+                const helpButtonElement = document.querySelectorAll('iqser-help-button')[this.dialogButton ? 1 : 0];
+                if (helpButtonElement.contains(this.helpModeButton().nativeElement))
+                    helpButtonElement?.removeChild(this.helpModeButton().nativeElement);
+            }
         }
     }
 
     toggleHelpMode(): void {
-        if (this.helpModeService.isHelpModeActive) {
+        if (this.helpModeService.isHelpModeActive()) {
             this.helpModeService.deactivateHelpMode();
             return;
         }
         this.helpModeService.activateHelpMode(this.dialogButton);
     }
+
+    #applyActiveButtonStyles() {
+        this.helpModeButton().nativeElement.style.setProperty('position', 'absolute');
+        this.helpModeButton().nativeElement.style.setProperty('top', `${this.currentComponentRect.top}px`);
+        this.helpModeButton().nativeElement.style.setProperty('left', `${this.currentComponentRect.left}px`);
+        document.body.appendChild(this.helpModeButton().nativeElement);
+    }
+
+    #applyInactiveButtonStyles() {
+        this.helpModeButton().nativeElement.style.setProperty('position', 'relative');
+        this.helpModeButton().nativeElement.style.setProperty('top', 'unset');
+        this.helpModeButton().nativeElement.style.setProperty('left', 'unset');
+        document.body.removeChild(this.helpModeButton().nativeElement);
+        document.querySelectorAll('iqser-help-button')[this.dialogButton ? 1 : 0]?.appendChild(this.helpModeButton().nativeElement);
+    }
 }

src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.ts

@@ -1,6 +1,9 @@
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
-import { BaseDialogComponent } from '../../dialog';
+import { ChangeDetectionStrategy, Component, HostListener, OnDestroy, OnInit } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
+import { Subscription } from 'rxjs';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { CircleButtonComponent } from '../../buttons';
+import { TranslateModule } from '@ngx-translate/core';
 
 const HIGHER_CDK_OVERLAY_CONTAINER_ZINDEX = '1200';
 const DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX = '800';
@@ -9,12 +12,20 @@ const DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX = '800';
     templateUrl: './help-mode-dialog.component.html',
     styleUrls: ['./help-mode-dialog.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [MatCheckbox, CircleButtonComponent, TranslateModule],
 })
-export class HelpModeDialogComponent extends BaseDialogComponent implements OnInit, OnDestroy {
+export class HelpModeDialogComponent implements OnInit, OnDestroy {
+    #backdropClickSubscription: Subscription;
     protected doNotShowAgainOption = false;
 
     constructor(protected readonly _dialogRef: MatDialogRef<HelpModeDialogComponent>) {
-        super(_dialogRef);
+        this.#backdropClickSubscription = this._dialogRef.backdropClick().subscribe(() => this.close());
+    }
+
+    @HostListener('window:keydown.Enter', ['$event'])
+    @HostListener('window:keydown.Escape', ['$event'])
+    close() {
+        return this._dialogRef.close(this.doNotShowAgainOption);
     }
 
     ngOnInit(): void {
@@ -23,20 +34,13 @@ export class HelpModeDialogComponent extends BaseDialogComponent implements OnIn
 
     ngOnDestroy(): void {
         this._setCdkOverlayContainerZIndex(DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX);
+        this.#backdropClickSubscription.unsubscribe();
     }
 
     setDoNotShowAgainOption(checked: boolean): void {
         this.doNotShowAgainOption = checked;
     }
 
-    save() {
-        this.close();
-    }
-
-    close() {
-        return this._dialogRef.close(this.doNotShowAgainOption);
-    }
-
     private _setCdkOverlayContainerZIndex(zIndex: string): void {
         const cdkOverlayContainer = document.querySelector<HTMLElement>('.cdk-overlay-container');
         if (cdkOverlayContainer) {

src/lib/help-mode/help-mode.module.ts

@@ -1,27 +0,0 @@
-import { ModuleWithProviders, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import { HelpModeComponent } from './help-mode/help-mode.component';
-import { HelpButtonComponent } from './help-button/help-button.component';
-import { HelpModeKey, HelpModeService } from './help-mode.service';
-import { CircleButtonComponent } from '../buttons';
-import { HELP_MODE_KEYS } from './tokens';
-import { MatIcon } from '@angular/material/icon';
-import { MatCheckbox } from '@angular/material/checkbox';
-import { HelpModeDialogComponent } from './help-mode-dialog/help-mode-dialog.component';
-
-const components = [HelpModeComponent, HelpButtonComponent, HelpModeDialogComponent];
-
-@NgModule({
-    declarations: [...components],
-    imports: [CommonModule, TranslateModule, CircleButtonComponent, MatCheckbox, MatIcon],
-    exports: [...components],
-})
-export class IqserHelpModeModule {
-    static forRoot(helpModeKeys: HelpModeKey[]): ModuleWithProviders<IqserHelpModeModule> {
-        return {
-            ngModule: IqserHelpModeModule,
-            providers: [{ provide: HELP_MODE_KEYS, useValue: helpModeKeys }, HelpModeService],
-        };
-    }
-}

src/lib/help-mode/help-mode.service.ts

@@ -1,8 +1,12 @@
 import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject, firstValueFrom } from 'rxjs';
+import { getConfig } from '../services';
+import { IqserUserPreferenceService } from '../services';
 import { HelpModeDialogComponent } from './help-mode-dialog/help-mode-dialog.component';
 import { HELP_MODE_KEYS, MANUAL_BASE_URL } from './tokens';
+import { HelpModeKey } from './types';
 import {
     DOCUMINE_THEME_CLASS,
     HELP_HIGHLIGHT_CLASS,
@@ -16,9 +20,7 @@ import {
     ScrollableParentViews,
     WEB_VIEWER_ELEMENTS,
 } from './utils/constants';
-import { getConfig } from '../services';
-import { UserPreferenceService } from '../../../../../apps/red-ui/src/app/users/user-preference.service';
-import { MatDialog } from '@angular/material/dialog';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 export interface Helper {
     readonly element: HTMLElement;
@@ -29,24 +31,17 @@ export interface Helper {
     readonly iframeElement?: boolean;
 }
 
-export interface HelpModeKey {
-    readonly elementKey: string;
-    readonly documentKey: string;
-    readonly scrollableParentView?: ScrollableParentView;
-    readonly overlappingElements?: OverlappingElement[];
-    readonly dialogElement?: boolean;
-}
-
 @Injectable()
 export class HelpModeService {
     readonly #isHelpModeActive$ = new BehaviorSubject(false);
-    readonly isHelpModeActive$ = this.#isHelpModeActive$.asObservable();
     readonly #helpModeDialogIsOpened$ = new BehaviorSubject(false);
-    readonly helpModeDialogIsOpened$ = this.#helpModeDialogIsOpened$.asObservable();
     readonly #renderer: Renderer2;
     readonly #isDocumine = getConfig().IS_DOCUMINE;
     #helpers: Record<string, Helper> = {};
     #dialogMode = false;
+    readonly isHelpModeActive$ = this.#isHelpModeActive$.asObservable();
+    readonly isHelpModeActive = toSignal(this.isHelpModeActive$, { initialValue: false });
+    readonly helpModeDialogIsOpened$ = this.#helpModeDialogIsOpened$.asObservable();
 
     constructor(
         @Inject(HELP_MODE_KEYS) private readonly _keys: HelpModeKey[],
@@ -54,21 +49,17 @@ export class HelpModeService {
         private readonly _dialog: MatDialog,
         private readonly _rendererFactory: RendererFactory2,
         private readonly _translateService: TranslateService,
-        private readonly _userPreferencesService: UserPreferenceService,
+        private readonly _iqserUserPreferenceService: IqserUserPreferenceService,
     ) {
         this.#renderer = this._rendererFactory.createRenderer(null, null);
     }
 
-    get isHelpModeActive(): boolean {
-        return this.#isHelpModeActive$.getValue();
-    }
-
     get helpModeDialogIsOpened(): boolean {
         return this.#helpModeDialogIsOpened$.getValue();
     }
 
     async openHelpModeDialog() {
-        if (!this._userPreferencesService.getHelpModeDialog()) {
+        if (!this._iqserUserPreferenceService.getHelpModeDialog()) {
             this.#helpModeDialogIsOpened$.next(true);
 
             const ref = this._dialog.open(HelpModeDialogComponent, {
@@ -78,14 +69,14 @@ export class HelpModeService {
             firstValueFrom(ref.afterClosed()).then(result => {
                 this.#helpModeDialogIsOpened$.next(false);
                 if (result) {
-                    this._userPreferencesService.toggleHelpModeDialog();
+                    this._iqserUserPreferenceService.toggleHelpModeDialog();
                 }
             });
         }
     }
 
     activateHelpMode(dialogMode: boolean = false): void {
-        if (!this.isHelpModeActive) {
+        if (!this.isHelpModeActive()) {
             document.body.style.setProperty('overflow', 'unset');
             this.#isHelpModeActive$.next(true);
             this.openHelpModeDialog();
@@ -99,7 +90,7 @@ export class HelpModeService {
     }
 
     deactivateHelpMode(): void {
-        if (this.isHelpModeActive) {
+        if (this.isHelpModeActive()) {
             document.body.style.removeProperty('overflow');
             this.#isHelpModeActive$.next(false);
             this.#disableHelperElements();
@@ -107,6 +98,19 @@ export class HelpModeService {
         }
     }
 
+    highlightHelperElements(): void {
+        Object.values(this.#helpers).forEach(helper => {
+            this.#renderer.addClass(helper.helperElement, HELP_HIGHLIGHT_CLASS);
+            setTimeout(() => {
+                this.#renderer.removeClass(helper.helperElement, HELP_HIGHLIGHT_CLASS);
+            }, 500);
+        });
+    }
+
+    updateHelperElements() {
+        Object.values(this.#helpers).forEach(helper => this.#updateHelperElement(helper));
+    }
+
     #createHelpers() {
         for (const key of Object.values(this._keys)) {
             const elements = document.querySelectorAll(`[help-mode-key='${key.elementKey}']`);
@@ -160,19 +164,6 @@ export class HelpModeService {
         return `${this._manualBaseURL}/${currentLang}/index-${currentLang}.html?contextId=${key}`;
     }
 
-    highlightHelperElements(): void {
-        Object.values(this.#helpers).forEach(helper => {
-            this.#renderer.addClass(helper.helperElement, HELP_HIGHLIGHT_CLASS);
-            setTimeout(() => {
-                this.#renderer.removeClass(helper.helperElement, HELP_HIGHLIGHT_CLASS);
-            }, 500);
-        });
-    }
-
-    updateHelperElements() {
-        Object.values(this.#helpers).forEach(helper => this.#updateHelperElement(helper));
-    }
-
     #isElementVisible(helper: Helper): boolean {
         if (helper.iframeElement && !this.#isFilePreviewPage()) {
             return false;
@@ -251,6 +242,7 @@ export class HelpModeService {
                 const iframe: HTMLIFrameElement = document.getElementById(PDF_TRON_IFRAME_ID) as HTMLIFrameElement;
                 const iframeRect = iframe.getBoundingClientRect();
                 dimensions.y += iframeRect.top;
+                dimensions.x += iframeRect.left;
             }
 
             helper.helperElement.style.cssText = `

src/lib/help-mode/help-mode/help-mode.component.html

@@ -1,19 +1,23 @@
-<div *ngIf="helpModeService.isHelpModeActive$ | async">
-    <div class="help-mode-border"></div>
-    <div class="bottom small-label full-opacity">
-        <strong>{{ 'help-mode.bottom-text' | translate }}</strong>
-        <a (click)="helpModeService.openHelpModeDialog()" *ngIf="(helpModeService.helpModeDialogIsOpened$ | async) === false">
-            {{ 'help-mode.instructions' | translate }}
-        </a>
-        <div class="close">
-            (esc)
-            <iqser-circle-button
-                (click)="helpModeService.deactivateHelpMode()"
-                [iconSize]="10"
-                [size]="20"
-                class="ml-8"
-                icon="iqser:close"
-            ></iqser-circle-button>
+@if (helpModeService.isHelpModeActive$ | async) {
+    <div>
+        <div class="help-mode-border"></div>
+        <div class="bottom small-label full-opacity">
+            <strong>{{ 'help-mode.bottom-text' | translate }}</strong>
+            @if ((helpModeService.helpModeDialogIsOpened$ | async) === false) {
+                <a (click)="helpModeService.openHelpModeDialog()">
+                    {{ 'help-mode.instructions' | translate }}
+                </a>
+            }
+            <div class="close">
+                (esc)
+                <iqser-circle-button
+                    (click)="helpModeService.deactivateHelpMode()"
+                    [iconSize]="10"
+                    [size]="20"
+                    class="ml-8"
+                    icon="iqser:close"
+                ></iqser-circle-button>
+            </div>
         </div>
     </div>
-</div>
+}

src/lib/help-mode/help-mode/help-mode.component.ts

@@ -2,13 +2,16 @@ import { ChangeDetectionStrategy, Component, HostListener } from '@angular/core'
 import { HelpModeService } from '../help-mode.service';
 import { IqserEventTarget } from '../../utils';
 import { MatDialog } from '@angular/material/dialog';
-import { CircleButtonTypes } from '../../buttons';
+import { CircleButtonComponent, CircleButtonTypes } from '../../buttons';
+import { AsyncPipe } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'iqser-help-mode',
     templateUrl: './help-mode.component.html',
     styleUrls: ['./help-mode.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [AsyncPipe, TranslateModule, CircleButtonComponent],
 })
 export class HelpModeComponent {
     readonly circleButtonTypes = CircleButtonTypes;
@@ -20,7 +23,7 @@ export class HelpModeComponent {
 
     @HostListener('document:keydown.escape', ['$event'])
     onEscKeydownHandler(event: KeyboardEvent): void {
-        if (!this.helpModeService.helpModeDialogIsOpened && this.helpModeService.isHelpModeActive) {
+        if (!this.helpModeService.helpModeDialogIsOpened && this.helpModeService.isHelpModeActive()) {
             event?.stopPropagation();
             this.helpModeService.deactivateHelpMode();
         }
@@ -29,7 +32,7 @@ export class HelpModeComponent {
     @HostListener('document:keydown.h', ['$event'])
     onHKeydownHandler(event: KeyboardEvent): void {
         const node = (event.target as IqserEventTarget).localName;
-        if (!this.helpModeService.isHelpModeActive && node !== 'input' && node !== 'textarea') {
+        if (!this.helpModeService.isHelpModeActive() && node !== 'input' && node !== 'textarea') {
             const dialogMode = !!this._dialog.openDialogs.length;
             this.helpModeService.activateHelpMode(dialogMode);
         }
@@ -37,14 +40,14 @@ export class HelpModeComponent {
 
     @HostListener('click')
     onClick(): void {
-        if (this.helpModeService.isHelpModeActive) {
+        if (this.helpModeService.isHelpModeActive()) {
             this.helpModeService.highlightHelperElements();
         }
     }
 
     @HostListener('window:resize')
     onResize() {
-        if (this.helpModeService.isHelpModeActive) {
+        if (this.helpModeService.isHelpModeActive()) {
             this.helpModeService.updateHelperElements();
         }
     }

src/lib/help-mode/index.ts

@@ -1,7 +1,7 @@
 export * from './tokens';
-export * from './help-mode.module';
 export * from './help-mode.service';
 export * from './help-mode/help-mode.component';
 export * from './help-button/help-button.component';
 export * from './help-mode-dialog/help-mode-dialog.component';
 export * from './utils/constants';
+export * from './utils/help-mode.provider';

src/lib/help-mode/tokens.ts

@@ -1,6 +1,6 @@
 import { inject, InjectionToken } from '@angular/core';
-import { IqserConfigService } from '../services';
-import { HelpModeKey } from './help-mode.service';
+import { IqserConfigService } from '../services/iqser-config.service';
+import { HelpModeKey } from './types';
 
 export const HELP_MODE_KEYS = new InjectionToken<HelpModeKey>('Help mode keys');
 export const MANUAL_BASE_URL = new InjectionToken<string>('Base manual URL', {

src/lib/help-mode/types.ts

@@ -0,0 +1,9 @@
+import { OverlappingElement, ScrollableParentView } from './utils/constants';
+
+export interface HelpModeKey {
+    readonly elementKey: string;
+    readonly documentKey: string;
+    readonly scrollableParentView?: ScrollableParentView;
+    readonly overlappingElements?: OverlappingElement[];
+    readonly dialogElement?: boolean;
+}

src/lib/help-mode/utils/constants.ts

@@ -9,7 +9,7 @@ export const PDF_TRON_IFRAME_ID = 'webviewer-1';
 export const WEB_VIEWER_ELEMENTS = [
     {
         querySelector: '.HeaderItems',
-        documentKey: 'pdf_features',
+        documentKey: 'document_viewer_features',
     },
 ];
 
@@ -18,6 +18,7 @@ export const ScrollableParentViews = {
     ANNOTATIONS_LIST: 'ANNOTATIONS_LIST',
     SCM_EDIT_DIALOG: 'SCM_EDIT_DIALOG',
     WORKFLOW_VIEW: 'WORKFLOW_VIEW',
+    COMPONENTS_VIEW: 'COMPONENTS_VIEW',
 } as const;
 
 export const SCROLLABLE_PARENT_VIEWS_IDS = {
@@ -25,6 +26,7 @@ export const SCROLLABLE_PARENT_VIEWS_IDS = {
     ANNOTATIONS_LIST: 'annotations-list',
     SCM_EDIT_DIALOG: 'scm-edit',
     WORKFLOW_VIEW: 'workflow-view',
+    COMPONENTS_VIEW: 'components-view',
 } as const;
 
 export type ScrollableParentView = keyof typeof ScrollableParentViews;

src/lib/help-mode/utils/help-mode.provider.ts

@@ -0,0 +1,7 @@
+import { HelpModeService } from '../help-mode.service';
+import { HELP_MODE_KEYS } from '../tokens';
+import { HelpModeKey } from '../types';
+
+export function provideHelpMode(helpModeKeys: HelpModeKey[]) {
+    return [{ provide: HELP_MODE_KEYS, useValue: helpModeKeys }, HelpModeService];
+}

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

@@ -1,19 +1,29 @@
-interface ExtraOption {
+interface AdditionalField {
     label: string;
-    checked: boolean;
+    description?: string;
+}
+
+interface AdditionalCheck extends AdditionalField {
+    checked?: boolean;
     hidden?: boolean;
     disabled?: boolean;
-    description?: string;
+}
+
+interface AdditionalInput extends AdditionalField {
+    value: string;
+    placeholder?: string;
+    errorCode?: string;
 }
 
 export interface DetailsRadioOption<I> {
     id?: string;
     label: string;
     description: string;
-    descriptionParams?: Record<string, string>;
+    descriptionParams?: Record<string, string | number>;
     icon?: string;
     value: I;
     disabled?: boolean;
     tooltip?: string;
-    extraOption?: ExtraOption;
+    additionalCheck?: AdditionalCheck;
+    additionalInput?: AdditionalInput;
 }

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

@@ -1,50 +1,83 @@
-<div [class.row]="displayInRow" class="iqser-input-group">
-    <div
-        (click)="toggleOption(option)"
-        *ngFor="let option of options"
-        [class.active]="option.value === value?.value"
-        [class.disabled]="option.disabled"
-        [id]="groupId(option)"
-        [matTooltipPosition]="'above'"
-        [matTooltip]="option.tooltip || '' | translate"
-        [ngClass]="{ 'mb-8': !displayInRow, 'mr-8': displayInRow }"
-        class="option pointer"
-    >
-        <div *ngIf="option.icon; else withoutIcon" class="icon-option">
-            <mat-icon [svgIcon]="option.icon" class="icon"></mat-icon>
+<div [class.row]="displayInRow()" class="iqser-input-group">
+    @for (option of options(); track option) {
+        <div
+            (click)="toggleOption(option)"
+            [class.active]="isSelected(option)"
+            [class.disabled]="option.disabled"
+            [id]="groupId(option)"
+            [matTooltipPosition]="'above'"
+            [matTooltip]="option.tooltip || '' | translate"
+            [ngClass]="{ 'mb-8': !displayInRow(), 'mr-8': displayInRow() }"
+            class="option pointer"
+        >
+            @if (option.icon) {
+                <div class="icon-option">
+                    <mat-icon [svgIcon]="option.icon" class="icon"></mat-icon>
+                    <div class="text">
+                        <label class="details-radio-label pointer">{{
+                            option.label | translate: option.descriptionParams | replaceNbsp
+                        }}</label>
 
-            <div class="text">
-                <label class="details-radio-label pointer">{{ option.label | translate: option.descriptionParams }}</label>
-                <span class="hint">{{ option.description | translate: option.descriptionParams | replaceNbsp }}</span>
+                        <span class="hint">{{ option.description | translate: option.descriptionParams | replaceNbsp }}</span>
 
-                <div *ngIf="option.extraOption && !option.extraOption.hidden && isSelected(option)" class="iqser-input-group">
-                    <mat-checkbox
-                        (change)="emitExtraOption()"
-                        [(ngModel)]="option.extraOption.checked"
-                        [checked]="option.extraOption.checked"
-                        [disabled]="!!option.extraOption.disabled"
-                        color="primary"
-                    >
-                        {{ option.extraOption.label | translate }}
-                    </mat-checkbox>
-                    <span
-                        *ngIf="option.extraOption.description"
-                        [innerHTML]="option.extraOption.description | translate"
-                        class="hint extra-option-description"
-                    ></span>
+                        @if (isSelected(option)) {
+                            @if (option.additionalCheck && !option.additionalCheck.hidden) {
+                                <div class="iqser-input-group w-450">
+                                    <mat-checkbox
+                                        (change)="emitExtraOption()"
+                                        [(ngModel)]="option.additionalCheck.checked"
+                                        [checked]="option.additionalCheck.checked"
+                                        [disabled]="!!option.additionalCheck.disabled"
+                                        color="primary"
+                                    >
+                                        {{ option.additionalCheck.label | translate | replaceNbsp }}
+                                    </mat-checkbox>
+
+                                    @if (option.additionalCheck.description) {
+                                        <span
+                                            [innerHTML]="option.additionalCheck.description | translate"
+                                            class="hint additional-check-description"
+                                        ></span>
+                                    }
+                                </div>
+                            }
+
+                            @if (option.additionalInput) {
+                                <div class="iqser-input-group w-full additional-input">
+                                    <span class="label"> {{ option.additionalInput.label | translate }} </span>
+                                    <div class="flex-column">
+                                        <input
+                                            [(ngModel)]="option.additionalInput.value"
+                                            [ngClass]="{ error: additionalInputTouched && hasError(option.additionalInput.errorCode) }"
+                                            [placeholder]="
+                                                option.additionalInput.placeholder ? (option.additionalInput.placeholder | translate) : ''
+                                            "
+                                            (blur)="additionalInputTouched = true"
+                                            (focus)="additionalInputTouched = false"
+                                            (keydown)="emitExtraOption()"
+                                        />
+                                        @if (option.additionalInput.description) {
+                                            <span class="hint" [innerHTML]="option.additionalInput.description | translate"></span>
+                                        }
+                                    </div>
+                                </div>
+                            }
+                        }
+                    </div>
+
+                    @if (isSelected(option)) {
+                        <mat-icon class="checked" svgIcon="iqser:radio-selected"></mat-icon>
+                    }
                 </div>
-            </div>
+            } @else {
+                <div class="flex-align-items-center mb-8">
+                    <iqser-round-checkbox [active]="isSelected(option)" class="mr-6"></iqser-round-checkbox>
 
-            <mat-icon *ngIf="isSelected(option)" class="checked" svgIcon="iqser:radio-selected"></mat-icon>
+                    <label class="details-radio-label pointer">{{ option.label | translate | replaceNbsp }}</label>
+                </div>
+
+                <span class="hint">{{ option.description | translate | replaceNbsp }}</span>
+            }
         </div>
-
-        <ng-template #withoutIcon>
-            <div class="flex-align-items-center mb-8">
-                <iqser-round-checkbox [active]="isSelected(option)" class="mr-6"></iqser-round-checkbox>
-                <label class="details-radio-label pointer">{{ option.label | translate }}</label>
-            </div>
-
-            <span class="hint">{{ option.description | translate }}</span>
-        </ng-template>
-    </div>
+    }
 </div>

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

@@ -43,10 +43,44 @@ label {
         }
     }
 
-    .extra-option-description {
+    .additional-check-description {
         margin-left: 23px;
         opacity: 0.49;
     }
+
+    .additional-input {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+
+        span {
+            margin-top: 8px;
+            font-size: 12px;
+        }
+
+        div {
+            .error {
+                border-color: var(--iqser-red-1);
+            }
+
+            display: flex;
+
+            span {
+                font-size: 10px;
+                margin-top: 4px;
+            }
+        }
+
+        .flex-column {
+            flex: 1;
+
+            input {
+                width: 232px;
+                min-height: 30px;
+                height: 30px;
+            }
+        }
+    }
 }
 
 .row {

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

@@ -1,5 +1,5 @@
-import { NgClass, NgForOf, NgIf } from '@angular/common';
-import { booleanAttribute, Component, EventEmitter, Input, Output } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { booleanAttribute, Component, input, output } from '@angular/core';
 import { FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
@@ -14,7 +14,6 @@ import { DetailsRadioOption } from './details-radio-option';
     selector: 'iqser-details-radio',
     templateUrl: './details-radio.component.html',
     styleUrls: ['./details-radio.component.scss'],
-    standalone: true,
     providers: [
         {
             provide: NG_VALUE_ACCESSOR,
@@ -28,12 +27,10 @@ import { DetailsRadioOption } from './details-radio-option';
         },
     ],
     imports: [
-        NgForOf,
         NgClass,
         RoundCheckboxComponent,
         TranslateModule,
         MatIconModule,
-        NgIf,
         FormsModule,
         MatCheckboxModule,
         ReactiveFormsModule,
@@ -42,12 +39,12 @@ import { DetailsRadioOption } from './details-radio-option';
     ],
 })
 export class DetailsRadioComponent<I> extends FormFieldComponent<DetailsRadioOption<I>> {
-    @Input({ required: true }) options: DetailsRadioOption<I>[] = [];
-    @Input({ transform: booleanAttribute }) displayInRow = false;
+    readonly options = input.required<DetailsRadioOption<I>[]>();
+    readonly displayInRow = input(false, { transform: booleanAttribute });
+    readonly extraOptionChanged = output<DetailsRadioOption<I>>();
+    additionalInputTouched = false;
 
-    @Output() readonly extraOptionChanged: EventEmitter<DetailsRadioOption<I>> = new EventEmitter();
-
-    toggleOption(option: DetailsRadioOption<I>): void {
+    toggleOption(option: DetailsRadioOption<I>) {
         if (option.value !== this._value?.value && !option.disabled) {
             this.markAsTouched();
             const currentlyChecked = this.value?.value === option.value;
@@ -56,15 +53,20 @@ export class DetailsRadioComponent<I> extends FormFieldComponent<DetailsRadioOpt
         }
     }
 
-    groupId(option: DetailsRadioOption<I>): string {
+    groupId(option: DetailsRadioOption<I>) {
         return (option.id ?? option.label.replace('.', '-')) + '-checkbox-details-input';
     }
 
-    isSelected(option: DetailsRadioOption<I>): boolean {
+    isSelected(option: DetailsRadioOption<I>) {
         return option.value === this.value?.value;
     }
 
-    emitExtraOption(): void {
+    emitExtraOption() {
+        if (!this.value) {
+            console.error('Extra option selected but the value is undefined');
+            return;
+        }
+
         this.extraOptionChanged.emit(this.value);
     }
 }

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

@@ -1,40 +1,46 @@
-<div [class.datepicker-wrapper]="isDate" [ngClass]="classList" class="iqser-input-group">
-    <label *ngIf="label"> {{ label }} </label>
+<div [class.datepicker-wrapper]="isDate()" [ngClass]="classList()" class="iqser-input-group">
+    @if (label()) {
+        <label> {{ label() }} </label>
+    }
 
-    <ng-container *ngIf="isDate">
+    @if (isDate()) {
         <input
             (ngModelChange)="onChange($event)"
             [(ngModel)]="input"
             [disabled]="disabled"
-            [id]="id"
+            [id]="id()"
             [matDatepicker]="picker"
-            [placeholder]="placeholder || 'dd/mm/yy'"
+            [placeholder]="placeholder() || 'dd/mm/yy'"
             iqserStopPropagation
         />
+
         <mat-datepicker-toggle [for]="picker" matSuffix>
             <mat-icon matDatepickerToggleIcon svgIcon="iqser:calendar"></mat-icon>
         </mat-datepicker-toggle>
+
         <mat-datepicker #picker (closed)="onCloseDatepicker()" (opened)="onOpenDatepicker()"></mat-datepicker>
-    </ng-container>
+    }
 
-    <input
-        (ngModelChange)="onChange($event)"
-        *ngIf="isText"
-        [(ngModel)]="input"
-        [disabled]="disabled"
-        [id]="id"
-        [placeholder]="placeholder || ''"
-        iqserStopPropagation
-        type="text"
-    />
+    @if (isText()) {
+        <input
+            (ngModelChange)="onChange($event)"
+            [(ngModel)]="input"
+            [disabled]="disabled"
+            [id]="id()"
+            [placeholder]="placeholder() || ''"
+            iqserStopPropagation
+            type="text"
+        />
+    }
 
-    <input
-        (ngModelChange)="onChange($event)"
-        *ngIf="isNumber"
-        [(ngModel)]="input"
-        [disabled]="disabled"
-        [id]="id"
-        iqserStopPropagation
-        type="number"
-    />
+    @if (isNumber()) {
+        <input
+            (ngModelChange)="onChange($event)"
+            [(ngModel)]="input"
+            [disabled]="disabled"
+            [id]="id()"
+            iqserStopPropagation
+            type="number"
+        />
+    }
 </div>

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

@@ -1,13 +1,13 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, input, model, output } from '@angular/core';
 import { FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { FormFieldComponent } from '../form-field/form-field-component.directive';
-import { NgClass, NgIf } from '@angular/common';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { StopPropagationDirective } from '../../directives';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { StopPropagationDirective } from '../../directives';
+import { FormFieldComponent } from '../form-field/form-field-component.directive';
 
-const InputTypes = {
+export const InputTypes = {
     DATE: 'DATE',
     NUMBER: 'NUMBER',
     TEXT: 'TEXT',
@@ -23,7 +23,6 @@ type DynamicInput = number | string | Date;
     templateUrl: './dynamic-input.component.html',
     styleUrls: ['./dynamic-input.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
     providers: [
         {
             provide: NG_VALUE_ACCESSOR,
@@ -36,31 +35,23 @@ type DynamicInput = number | string | Date;
             useExisting: DynamicInputComponent,
         },
     ],
-    imports: [NgClass, NgIf, FormsModule, MatDatepickerModule, StopPropagationDirective, MatIconModule, MatInputModule],
+    imports: [NgClass, FormsModule, MatDatepickerModule, StopPropagationDirective, MatIconModule, MatInputModule],
 })
 export class DynamicInputComponent extends FormFieldComponent<DynamicInput> {
-    @Input() label?: string;
-    @Input({ required: true }) type!: InputType;
-    @Input() placeholder?: string;
-    @Input() id?: string;
-    @Input() classList = '';
-    @Input() input!: DynamicInput;
-    @Output() readonly closedDatepicker = new EventEmitter<boolean>();
+    readonly label = input<string>();
+    readonly type = input.required<InputType>();
+    readonly placeholder = input<string>();
+    readonly id = input<string>();
+    readonly classList = input('');
+    readonly input = model<DynamicInput>();
+    readonly closedDatepicker = output<boolean>();
 
-    get isDate() {
-        return this.type === InputTypes.DATE;
-    }
+    readonly isDate = computed(() => this.type() === InputTypes.DATE);
+    readonly isNumber = computed(() => this.type() === InputTypes.NUMBER);
+    readonly isText = computed(() => this.type() === InputTypes.TEXT);
 
-    get isNumber() {
-        return this.type === InputTypes.NUMBER;
-    }
-
-    get isText() {
-        return this.type === InputTypes.TEXT;
-    }
-
-    writeValue(input: DynamicInput): void {
-        this.input = input;
+    override writeValue(input: DynamicInput): void {
+        this.input.set(input);
     }
 
     onCloseDatepicker() {

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

@@ -1,55 +1,54 @@
-<ng-container *ngIf="!editing">
-    <div *ngIf="showPreview">
-        {{ value }}
-    </div>
+@if (!_editing()) {
+    @if (showPreview()) {
+        <div>{{ value() }}</div>
+    }
 
     <div class="flex">
-        <iqser-circle-button
-            *ngIf="canEdit"
-            (action)="editing = true"
-            [tooltip]="editTooltip"
-            [type]="buttonsType"
-            [attr.help-mode-key]="helpModeKey"
-            class="edit-button"
-            icon="iqser:edit"
-        ></iqser-circle-button>
+        @if (canEdit()) {
+            <iqser-circle-button
+                (action)="editing = true"
+                [tooltip]="editTooltip()"
+                [type]="buttonsType()"
+                [attr.help-mode-key]="helpModeKey()"
+                class="edit-button"
+                icon="iqser:edit"
+            ></iqser-circle-button>
+        }
 
         <ng-content select="[slot=editing]"></ng-content>
     </div>
-</ng-container>
-
-<ng-container *ngIf="editing">
+} @else {
     <form (submit)="saveValue()">
-        <div [class]="'iqser-input-group ' + class">
-            <input
-                *ngIf="!parentId; else expandableInput"
-                (ngModelChange)="newValue = $event"
-                [ngModel]="value"
-                [placeholder]="placeholder"
-                name="name"
-            />
-            <ng-template #expandableInput>
+        <div [class]="'iqser-input-group ' + class()">
+            @if (!parentId()) {
+                <input (ngModelChange)="newValue = $event" [ngModel]="value()" [placeholder]="placeholder()" name="name" />
+            } @else {
                 <textarea
                     (ngModelChange)="newValue = $event"
-                    [ngModel]="value"
-                    [placeholder]="placeholder"
-                    [id]="id"
+                    [ngModel]="value()"
+                    [placeholder]="placeholder()"
+                    [id]="id()"
                     name="name"
-                    [style.width]="this.textArea.width + 'px'"
-                    [style.height]="this.textArea.height + 'px'"
+                    [style.width]="textArea.width + 'px'"
+                    [style.height]="textArea.height + 'px'"
                 ></textarea>
-            </ng-template>
+            }
         </div>
     </form>
 
     <div class="flex">
-        <iqser-circle-button (action)="saveValue()" [tooltip]="saveTooltip" [type]="buttonsType" icon="iqser:check"></iqser-circle-button>
+        <iqser-circle-button
+            (action)="saveValue()"
+            [tooltip]="saveTooltip()"
+            [type]="buttonsType()"
+            icon="iqser:check"
+        ></iqser-circle-button>
 
         <iqser-circle-button
             (action)="editing = false"
-            [tooltip]="cancelTooltip"
-            [type]="buttonsType"
+            [tooltip]="cancelTooltip()"
+            [type]="buttonsType()"
             icon="iqser:close"
         ></iqser-circle-button>
     </div>
-</ng-container>
+}

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

@@ -1,44 +1,40 @@
-import { NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, input, OnChanges, output, signal, SimpleChanges } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { CircleButtonComponent, CircleButtonType, CircleButtonTypes } from '../../buttons';
+import { CircleButtonComponent } from '../../buttons/circle-button/circle-button.component';
+import { CircleButtonType, CircleButtonTypes } from '../../buttons/types/circle-button.type';
 
 @Component({
-    selector: 'iqser-editable-input [value]',
+    selector: 'iqser-editable-input',
     templateUrl: './editable-input.component.html',
     styleUrls: ['./editable-input.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
-    imports: [NgIf, CircleButtonComponent, FormsModule],
+    imports: [CircleButtonComponent, FormsModule],
+    host: {
+        '[class.editing]': '_editing()',
+    },
 })
 export class EditableInputComponent implements OnChanges {
-    @Input() id?: string;
-    @Input() parentId?: string;
-    @Input() value!: string;
-    @Input() editTooltip?: string;
-    @Input() saveTooltip?: string;
-    @Input() cancelTooltip?: string;
-    @Input() placeholder = '';
-    @Input() class?: string;
-    @Input() showPreview = true;
-    @Input() canEdit = true;
-    @Input() buttonsType: CircleButtonType = CircleButtonTypes.default;
-    @Input() helpModeKey: string = '';
-    @Input() lastChild = false;
-    @Output() readonly save = new EventEmitter<string>();
+    protected readonly _editing = signal(false);
+    readonly id = input<string>();
+    readonly parentId = input<string>();
+    readonly value = input.required<string>();
+    readonly editTooltip = input('');
+    readonly saveTooltip = input('');
+    readonly cancelTooltip = input('');
+    readonly placeholder = input('');
+    readonly class = input<string>();
+    readonly showPreview = input(true, { transform: booleanAttribute });
+    readonly canEdit = input(true, { transform: booleanAttribute });
+    readonly buttonsType = input<CircleButtonType>(CircleButtonTypes.default);
+    readonly helpModeKey = input('');
+    readonly lastChild = input(false, { transform: booleanAttribute });
+    readonly save = output<string>();
     textArea?: { width: number; height: number };
     newValue = '';
 
-    private _editing = false;
-
-    @HostBinding('class.editing')
-    get editing(): boolean {
-        return this._editing;
-    }
-
     set editing(value: boolean) {
-        this._editing = value;
-        this.newValue = this.value;
+        this._editing.set(value);
+        this.newValue = this.value();
     }
 
     ngOnChanges(changes: SimpleChanges): void {
@@ -52,12 +48,12 @@ export class EditableInputComponent implements OnChanges {
 
     setTextAreaSize() {
         setTimeout(() => {
-            const element = document.getElementById(this.id as string) as HTMLElement;
-            const parentElement = document.getElementById(this.parentId as string) as HTMLElement;
+            const element = document.getElementById(this.id() as string) as HTMLElement;
+            const parentElement = document.getElementById(this.parentId() as string) as HTMLElement;
             const width = parentElement.offsetWidth - 98;
-            let height = (this.lastChild ? parentElement.offsetHeight : element.offsetHeight) - 16;
-            if (this.lastChild) {
-                const lastChildIndex = Number(this.id?.split('-')[2]);
+            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 };

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

@@ -1,19 +1,47 @@
-import { ChangeDetectorRef, Directive, inject } from '@angular/core';
-import { ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
+import { ChangeDetectorRef, Directive, inject, Injector, OnInit } from '@angular/core';
+import {
+    ControlValueAccessor,
+    FormControl,
+    FormControlDirective,
+    FormControlName,
+    FormGroupDirective,
+    NgControl,
+    ValidationErrors,
+    Validator,
+} from '@angular/forms';
 
 @Directive()
-export abstract class FormFieldComponent<I> implements ControlValueAccessor, Validator {
+export abstract class FormFieldComponent<I> implements ControlValueAccessor, Validator, OnInit {
     touched = false;
     disabled = false;
 
     protected readonly _changeRef = inject(ChangeDetectorRef);
+    protected readonly _injector = inject(Injector);
 
+    protected _formControl: FormControl | undefined;
     protected _value: I | undefined;
 
     get value(): I | undefined {
         return this._value;
     }
 
+    ngOnInit() {
+        const ngControl = this._injector.get(NgControl);
+
+        if (ngControl instanceof FormControlName) {
+            this._formControl = this._injector.get(FormGroupDirective).getControl(ngControl);
+        } else {
+            this._formControl = (ngControl as FormControlDirective).form as FormControl;
+        }
+    }
+
+    hasError(errorCode: string | undefined): boolean {
+        if (errorCode && this._formControl) {
+            return this._formControl.hasError(errorCode);
+        }
+        return false;
+    }
+
     // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
     onChange = (value?: I) => {};
 

src/lib/inputs/index.ts

@@ -1,7 +0,0 @@
-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';
-export * from './form-field/form-field-component.directive';
-export * from './dynamic-input/dynamic-input.component';

src/lib/inputs/input-with-action/input-with-action.component.html

@@ -1,32 +1,33 @@
-<form (submit)="executeAction()" [style.max-width]="computedWidth" [style.width]="computedWidth" class="iqser-input-group">
+<form (submit)="executeAction()" [style.max-width]="_computedWidth()" [style.width]="_computedWidth()" class="iqser-input-group">
     <input
-        (ngModelChange)="valueChange.emit($event)"
         [(ngModel)]="value"
-        [autocomplete]="autocomplete"
-        [disabled]="disabled"
-        [id]="inputId"
+        [autocomplete]="autocomplete()"
+        [disabled]="disabled()"
+        [id]="inputId()"
         [ngModelOptions]="{ standalone: true }"
-        [placeholder]="placeholder"
+        [placeholder]="placeholder()"
         class="with-icon mt-0"
         type="text"
     />
 
-    <span *ngIf="hint" class="hint">{{ hint }}</span>
+    @if (hint()) {
+        <span class="hint">{{ hint() }}</span>
+    }
 
-    <mat-icon *ngIf="isSearch && !hasContent" class="icon-right" svgIcon="iqser:search"></mat-icon>
+    @if (_isSearch() && !_hasContent()) {
+        <mat-icon class="icon-right" svgIcon="iqser:search"></mat-icon>
+    }
 
-    <iqser-circle-button
-        (action)="reset()"
-        *ngIf="isSearch && hasContent"
-        [buttonId]="inputId + '-clear'"
-        icon="iqser:close"
-    ></iqser-circle-button>
+    @if (_isSearch() && _hasContent()) {
+        <iqser-circle-button (action)="reset()" [buttonId]="inputId() + '-clear'" icon="iqser:close"></iqser-circle-button>
+    }
 
-    <iqser-circle-button
-        (action)="executeAction()"
-        *ngIf="!isSearch"
-        [buttonId]="actionButtonId"
-        [disabled]="!hasContent"
-        [icon]="icon!"
-    ></iqser-circle-button>
+    @if (icon(); as icon) {
+        <iqser-circle-button
+            (action)="executeAction()"
+            [buttonId]="actionButtonId()"
+            [disabled]="!_hasContent()"
+            [icon]="icon"
+        ></iqser-circle-button>
+    }
 </form>

src/lib/inputs/input-with-action/input-with-action.component.ts

@@ -1,54 +1,39 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
-import { randomString } from '../../utils';
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, model, output } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { NgIf } from '@angular/common';
-import { CircleButtonComponent } from '../../buttons';
 import { MatIconModule } from '@angular/material/icon';
 
+import { CircleButtonComponent } from '../../buttons/circle-button/circle-button.component';
+import { randomString } from '../../utils/functions';
+
 @Component({
     selector: 'iqser-input-with-action',
     templateUrl: './input-with-action.component.html',
     styleUrls: ['./input-with-action.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
-    imports: [FormsModule, NgIf, MatIconModule, CircleButtonComponent],
+    imports: [FormsModule, MatIconModule, CircleButtonComponent],
 })
 export class InputWithActionComponent {
-    @Input() inputId = `${randomString() + '-search-input'}`;
-    @Input() actionButtonId = `${randomString() + '-action-input'}`;
-    @Input() placeholder = '';
-    @Input() hint?: string;
-    @Input() width: number | 'full' = 250;
-    @Input() icon?: string;
-    @Input() autocomplete: 'on' | 'off' = 'on';
-    @Input() value = '';
-    @Input() disabled = false;
-    @Output() readonly action = new EventEmitter<string>();
-    @Output() readonly valueChange = new EventEmitter<string>();
+    readonly inputId = input(`${randomString() + '-search-input'}`);
+    readonly actionButtonId = input(`${randomString() + '-action-input'}`);
+    readonly placeholder = input('');
+    readonly hint = input<string>();
+    readonly width = input<number | 'full'>(250);
+    protected readonly _computedWidth = computed(() => (this.width() === 'full' ? '100%' : `${this.width()}px`));
+    readonly icon = input<string>();
+    protected readonly _isSearch = computed(() => !this.icon());
+    readonly autocomplete = input<'on' | 'off'>('on');
+    readonly value = model('');
+    protected readonly _hasContent = computed(() => !!this.value()?.length);
+    readonly disabled = input(false, { transform: booleanAttribute });
+    readonly action = output<string>();
 
-    get hasContent(): boolean {
-        return !!this.value?.length;
+    reset() {
+        this.value.set('');
     }
 
-    get computedWidth(): string {
-        return this.width === 'full' ? '100%' : `${this.width}px`;
-    }
-
-    get isSearch(): boolean {
-        return !this.icon;
-    }
-
-    constructor(private readonly _changeDetectorRef: ChangeDetectorRef) {}
-
-    reset(): void {
-        this.value = '';
-        this.valueChange.emit(this.value);
-        this._changeDetectorRef.markForCheck();
-    }
-
-    executeAction(): void {
-        if (this.hasContent) {
-            this.action.emit(this.value);
+    executeAction() {
+        if (this._hasContent()) {
+            this.action.emit(this.value());
         }
     }
 }

src/lib/inputs/round-checkbox/round-checkbox.component.html

@@ -1,11 +1,16 @@
 <div
     #wrapper
-    [class.active]="active && !indeterminate"
-    [class.inactive]="!active && !indeterminate"
-    [class.indeterminate]="indeterminate"
-    [class.with-bg]="type === 'with-bg'"
+    [class.active]="active() && !indeterminate()"
+    [class.inactive]="!active() && !indeterminate()"
+    [class.indeterminate]="indeterminate()"
+    [class.with-bg]="type() === 'with-bg'"
     class="wrapper"
 >
-    <mat-icon *ngIf="active && !indeterminate" svgIcon="iqser:radio-selected"></mat-icon>
-    <mat-icon *ngIf="indeterminate" svgIcon="iqser:radio-indeterminate"></mat-icon>
+    @if (active() && !indeterminate()) {
+        <mat-icon svgIcon="iqser:radio-selected"></mat-icon>
+    }
+
+    @if (indeterminate()) {
+        <mat-icon svgIcon="iqser:radio-indeterminate"></mat-icon>
+    }
 </div>

src/lib/inputs/round-checkbox/round-checkbox.component.ts

@@ -1,27 +1,24 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input, OnInit, ViewChild } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, effect, ElementRef, input, numberAttribute, viewChild } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
-import { NgIf } from '@angular/common';
 
 @Component({
     selector: 'iqser-round-checkbox',
     templateUrl: './round-checkbox.component.html',
     styleUrls: ['./round-checkbox.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
-    imports: [MatIconModule, NgIf],
+    imports: [MatIconModule],
 })
-export class RoundCheckboxComponent implements OnInit {
-    @Input() size = 20;
-    @Input({ transform: booleanAttribute }) active = false;
-    @Input() indeterminate = false;
-    @Input() type: 'default' | 'with-bg' = 'default';
-    @HostBinding('class.disabled')
-    @Input()
-    disabled = false;
+export class RoundCheckboxComponent {
+    protected readonly _wrapper = viewChild.required('wrapper', { read: ElementRef });
+    readonly size = input(20, { transform: numberAttribute });
+    readonly active = input(false, { transform: booleanAttribute });
+    readonly indeterminate = input(false, { transform: booleanAttribute });
+    readonly type = input<'default' | 'with-bg'>('default');
+    readonly disabled = input(false, { transform: booleanAttribute });
 
-    @ViewChild('wrapper', { static: true }) private readonly _wrapper!: ElementRef;
-
-    ngOnInit(): void {
-        (this._wrapper.nativeElement as HTMLElement).style.setProperty('--size', `${this.size}px`);
+    constructor() {
+        effect(() => {
+            (this._wrapper().nativeElement as HTMLElement).style.setProperty('--size', `${this.size()}px`);
+        });
     }
 }

src/lib/listing/listing-component.directive.ts

@@ -1,12 +1,16 @@
 import { Directive, inject, OnDestroy, TemplateRef, ViewChild } from '@angular/core';
 import { combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { FilterService } from '../filtering';
-import { SortingService } from '../sorting';
-import { AutoUnsubscribe, shareDistinctLast } from '../utils';
-import { SearchService } from '../search';
-import { EntitiesService, ListingService } from './services';
-import { Id, IListable, TableColumnConfig } from './models';
+import { FilterService } from '../filtering/filter.service';
+import { SearchService } from '../search/search.service';
+import { SortingService } from '../sorting/sorting.service';
+import { AutoUnsubscribe } from '../utils/auto-unsubscribe.directive';
+import { shareDistinctLast } from '../utils/operators';
+import { IListable } from './models/listable';
+import { TableColumnConfig } from './models/table-column-config.model';
+import { Id } from './models/trackable';
+import { EntitiesService } from './services/entities.service';
+import { ListingService } from './services/listing.service';
 
 @Directive()
 export abstract class ListingComponent<Class extends IListable<PrimaryKey>, PrimaryKey extends Id = Class['id']>

src/lib/listing/listing.module.ts

@@ -1,49 +1,56 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import { TableHeaderComponent } from './table-header/table-header.component';
-import { IqserFiltersModule } from '../filtering';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { TableColumnNameComponent } from './table-column-name/table-column-name.component';
-import { ScrollButtonComponent } from './scroll-button/scroll-button.component';
-import { TableComponent } from './table/table.component';
-import { HasScrollbarDirective, SyncWidthDirective } from '../directives';
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import { RouterModule } from '@angular/router';
-import { WorkflowComponent } from './workflow/workflow.component';
 import { DragDropModule } from '@angular/cdk/drag-drop';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { CircleButtonComponent, IconButtonComponent } from '../buttons';
+import { HasScrollbarDirective, SyncWidthDirective } from '../directives';
+import { EmptyStateComponent } from '../empty-state';
+import { IqserFiltersModule, PopupFilterComponent } from '../filtering';
+import { InputWithActionComponent } from '../inputs/input-with-action/input-with-action.component';
+import { RoundCheckboxComponent } from '../inputs/round-checkbox/round-checkbox.component';
+import { SnakeCasePipe } from '../pipes/snake-case.pipe';
 import { PageHeaderComponent } from './page-header/page-header.component';
-import { IqserHelpModeModule } from '../help-mode';
+import { ScrollButtonComponent } from './scroll-button/scroll-button.component';
+import { TableColumnNameComponent } from './table-column-name/table-column-name.component';
 import { TableContentComponent } from './table-content/table-content.component';
 import { TableItemComponent } from './table-content/table-item/table-item.component';
+import { TableHeaderComponent } from './table-header/table-header.component';
+import { TableComponent } from './table/table.component';
 import { ColumnHeaderComponent } from './workflow/column-header/column-header.component';
-import { CircleButtonComponent, IconButtonComponent } from '../buttons';
-import { MatIconModule } from '@angular/material/icon';
-import { EmptyStateComponent } from '../empty-state';
-import { InputWithActionComponent, RoundCheckboxComponent } from '../inputs';
-import { SnakeCasePipe } from '../pipes/snake-case.pipe';
+import { WorkflowComponent } from './workflow/workflow.component';
 
 const matModules = [MatTooltipModule, MatIconModule];
-const components = [
-    TableHeaderComponent,
-    TableComponent,
-    WorkflowComponent,
-    TableColumnNameComponent,
-    ScrollButtonComponent,
-    PageHeaderComponent,
-    TableContentComponent,
-    TableItemComponent,
-    ColumnHeaderComponent,
-];
-const modules = [DragDropModule, TranslateModule, IqserFiltersModule, ScrollingModule, RouterModule, IqserHelpModeModule];
+const modules = [DragDropModule, TranslateModule, IqserFiltersModule, ScrollingModule, RouterModule];
 
 @NgModule({
-    declarations: [...components],
-    exports: [...components],
+    exports: [
+        WorkflowComponent,
+        ScrollButtonComponent,
+        PageHeaderComponent,
+        TableContentComponent,
+        TableColumnNameComponent,
+        TableHeaderComponent,
+        TableComponent,
+        ColumnHeaderComponent,
+        TableItemComponent,
+    ],
     imports: [
         CommonModule,
         ...modules,
         ...matModules,
+        WorkflowComponent,
+        ScrollButtonComponent,
+        PageHeaderComponent,
+        TableColumnNameComponent,
+        TableContentComponent,
+        TableComponent,
+        TableItemComponent,
+        ColumnHeaderComponent,
+        TableHeaderComponent,
         CircleButtonComponent,
         IconButtonComponent,
         EmptyStateComponent,
@@ -52,6 +59,7 @@ const modules = [DragDropModule, TranslateModule, IqserFiltersModule, ScrollingM
         InputWithActionComponent,
         SyncWidthDirective,
         SnakeCasePipe,
+        PopupFilterComponent,
     ],
 })
 export class IqserListingModule {}

src/lib/listing/page-header/models/action-config.model.ts

@@ -1,9 +1,10 @@
 import { BaseHeaderConfig } from './base-config.model';
 import { Observable } from 'rxjs';
-import { OverlappingElement } from '../../../help-mode';
 
 export interface ActionConfig extends BaseHeaderConfig {
     readonly action: ($event: MouseEvent) => void;
     readonly helpModeKey?: string;
     readonly disabled$?: Observable<boolean>;
+    readonly disabled?: boolean;
+    readonly disableStopPropagation?: boolean;
 }

src/lib/listing/page-header/models/button-config.model.ts

@@ -3,4 +3,5 @@ import { ActionConfig } from './action-config.model';
 
 export interface ButtonConfig extends ActionConfig {
     readonly type?: IconButtonType;
+    readonly tooltip?: string;
 }

src/lib/listing/page-header/page-header.component.html

@@ -1,94 +1,102 @@
 <div class="page-header">
-    <div *ngIf="pageLabel" class="breadcrumb">{{ pageLabel }}</div>
+    @if (pageLabel()) {
+        <div class="breadcrumb">{{ pageLabel() }}</div>
+    }
 
-    <div *ngIf="filters$ | async as filters" class="filters">
-        <ng-content select="[slot=beforeFilters]"></ng-content>
-
-        <div
-            *ngIf="filters.length && searchPosition !== searchPositions.beforeFilters"
-            class="text-muted"
-            translate="filters.filter-by"
-        ></div>
-
-        <ng-container *ngIf="searchPosition === searchPositions.beforeFilters" [ngTemplateOutlet]="searchBar"></ng-container>
-
-        <ng-container *ngFor="let filter of filters; trackBy: trackByLabel">
-            <iqser-popup-filter
-                *ngIf="!filter.hide"
-                [primaryFiltersSlug]="filter.slug"
-                [attr.help-mode-key]="filterHelpModeKey"
-            ></iqser-popup-filter>
-        </ng-container>
-
-        <ng-container *ngFor="let filter$ of filterService.singleFilters">
-            <iqser-single-filter *ngIf="filter$ | async as filter" [filter]="filter"></iqser-single-filter>
-        </ng-container>
-
-        <ng-container *ngIf="searchPosition === searchPositions.afterFilters" [ngTemplateOutlet]="searchBar"></ng-container>
-
-        <div
-            (click)="resetFilters()"
-            *ngIf="!hideResetButton && (showResetFilters$ | async) === true"
-            [attr.help-mode-key]="'filter_' + helpModeKey + '_list'"
-            class="reset-filters"
-            translate="reset-filters"
-        ></div>
-    </div>
-
-    <div *ngIf="showCloseButton || actionConfigs || buttonConfigs || viewModeSelection" class="actions">
-        <ng-container *ngIf="searchPosition === searchPositions.withActions" [ngTemplateOutlet]="searchBar"></ng-container>
-
-        <ng-container [ngTemplateOutlet]="viewModeSelection"></ng-container>
-
-        <ng-container *ngFor="let config of buttonConfigs; trackBy: trackByLabel">
-            <iqser-icon-button
-                (action)="config.action($event)"
-                *ngIf="!config.hide"
-                [buttonId]="config.label.replace('.', '-')"
-                [icon]="config.icon"
-                [label]="config.label | translate"
-                [type]="config.type"
-                [attr.help-mode-key]="config.helpModeKey"
-            ></iqser-icon-button>
-        </ng-container>
-
-        <div class="actions">
-            <ng-container *ngFor="let config of actionConfigs; trackBy: trackByLabel">
-                <iqser-circle-button
-                    (action)="config.action($event)"
-                    *ngIf="!config.hide"
-                    [buttonId]="config.id"
-                    [disabled]="config.disabled$ && (config.disabled$ | async)"
-                    [icon]="config.icon"
-                    [tooltip]="config.label"
-                    [attr.help-mode-key]="config.helpModeKey"
-                ></iqser-circle-button>
-            </ng-container>
-
-            <!-- Extra custom actions here -->
-            <ng-content select="[slot=right]"></ng-content>
-
-            <iqser-circle-button
-                buttonId="close-view-btn"
-                (action)="closeAction.emit()"
-                *ngIf="showCloseButton"
-                [class.ml-6]="actionConfigs"
-                [icon]="'iqser:close'"
-                [attr.help-mode-key]="'close_dossier'"
-                [tooltip]="'common.close' | translate"
-            ></iqser-circle-button>
+    @if (filters$ | async; as filters) {
+        <div class="filters">
+            <ng-content select="[slot=beforeFilters]"></ng-content>
+            @if (filters.length && searchPosition() !== searchPositions.beforeFilters) {
+                <div class="text-muted" translate="filters.filter-by"></div>
+            }
+            @if (searchPosition() === searchPositions.beforeFilters) {
+                <ng-container [ngTemplateOutlet]="searchBar"></ng-container>
+            }
+            @for (filter of filters; track trackByLabel($index, filter)) {
+                @if (!filter.hide) {
+                    <iqser-popup-filter [primaryFiltersSlug]="filter.slug" [attr.help-mode-key]="filterHelpModeKey()"></iqser-popup-filter>
+                }
+            }
+            @for (filter$ of filterService.singleFilters; track filter$) {
+                @if (filter$ | async; as filter) {
+                    <iqser-single-filter [filter]="filter"></iqser-single-filter>
+                }
+            }
+            @if (searchPosition() === searchPositions.afterFilters) {
+                <ng-container [ngTemplateOutlet]="searchBar"></ng-container>
+            }
+            @if (!hideResetButton() && (showResetFilters$ | async) === true) {
+                <div
+                    (click)="resetFilters()"
+                    [attr.help-mode-key]="'filter_' + helpModeKey() + '_list'"
+                    class="reset-filters"
+                    translate="reset-filters"
+                ></div>
+            }
         </div>
-    </div>
+    }
+
+    @if (showCloseButton() || actionConfigs() || buttonConfigs() || viewModeSelection()) {
+        <div class="actions">
+            @if (searchPosition() === searchPositions.withActions) {
+                <ng-container [ngTemplateOutlet]="searchBar"></ng-container>
+            }
+            <ng-container [ngTemplateOutlet]="viewModeSelection()"></ng-container>
+            @for (config of buttonConfigs(); track trackByLabel($index, config)) {
+                @if (!config.hide) {
+                    <iqser-icon-button
+                        (action)="config.action($event)"
+                        [buttonId]="config.label.replace('.', '-')"
+                        [icon]="config.icon"
+                        [label]="config.label | translate"
+                        [type]="config.type"
+                        [matTooltip]="(config.tooltip | translate) ?? ''"
+                        [disabled]="config.disabled"
+                        [attr.help-mode-key]="config.helpModeKey"
+                        matTooltipPosition="above"
+                    ></iqser-icon-button>
+                }
+            }
+            <div class="actions">
+                @for (config of actionConfigs(); track trackByLabel($index, config)) {
+                    @if (!config.hide) {
+                        <iqser-circle-button
+                            (action)="config.action($event)"
+                            [buttonId]="config.id"
+                            [disabled]="config.disabled"
+                            [icon]="config.icon"
+                            [tooltip]="config.label | translate"
+                            [attr.help-mode-key]="config.helpModeKey"
+                            [iqserDisableStopPropagation]="config.disableStopPropagation"
+                        ></iqser-circle-button>
+                    }
+                }
+                <!-- Extra custom actions here -->
+                <ng-content select="[slot=right]"></ng-content>
+                @if (showCloseButton()) {
+                    <iqser-circle-button
+                        buttonId="close-view-btn"
+                        (action)="closeAction.emit()"
+                        [class.ml-6]="actionConfigs()"
+                        [icon]="'iqser:close'"
+                        [attr.help-mode-key]="'close_dossier'"
+                        [tooltip]="'common.close' | translate"
+                    ></iqser-circle-button>
+                }
+            </div>
+        </div>
+    }
 </div>
 
 <ng-template #searchBar>
-    <iqser-input-with-action
-        [inputId]="searchInputId"
-        (valueChange)="searchService.searchValue = $event"
-        *ngIf="searchPlaceholder && searchService"
-        [class.mr-8]="searchPosition === searchPositions.beforeFilters"
-        [placeholder]="searchPlaceholder"
-        [value]="searchService.valueChanges$ | async"
-        [width]="searchWidth"
-    ></iqser-input-with-action>
+    @if (searchPlaceholder() && searchService) {
+        <iqser-input-with-action
+            [inputId]="searchInputId()"
+            (valueChange)="searchService.searchValue = $event"
+            [class.mr-8]="searchPosition() === searchPositions.beforeFilters"
+            [placeholder]="searchPlaceholder()"
+            [value]="searchService.valueChanges$ | async"
+            [width]="searchWidth()"
+        ></iqser-input-with-action>
+    }
 </ng-template>

src/lib/listing/page-header/page-header.component.ts

@@ -1,62 +1,81 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Optional, Output, TemplateRef } from '@angular/core';
-import { ActionConfig, ButtonConfig, SearchPosition, SearchPositions } from './models';
-import { distinctUntilChanged, map } from 'rxjs/operators';
+import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, inject, input, output, TemplateRef } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
 import { combineLatest, Observable, of } from 'rxjs';
-import { IListable } from '../models';
+import { distinctUntilChanged, map } from 'rxjs/operators';
+import { CircleButtonComponent } from '../../buttons';
+import { IconButtonComponent } from '../../buttons';
 import { IconButtonTypes } from '../../buttons';
-import { SearchService } from '../../search';
 import { FilterService } from '../../filtering';
-import { filterEach, List } from '../../utils';
+import { IqserFiltersModule } from '../../filtering';
+import { PopupFilterComponent } from '../../filtering';
+import { InputWithActionComponent } from '../../inputs/input-with-action/input-with-action.component';
+import { SearchService } from '../../search';
+import { filterEach } from '../../utils';
+import { List } from '../../utils';
+import { IListable } from '../models';
+import { ActionConfig, ButtonConfig, SearchPosition, SearchPositions } from './models';
+import { MatTooltip } from '@angular/material/tooltip';
+import { DisableStopPropagationDirective } from '../../directives';
 
 @Component({
     selector: 'iqser-page-header',
     templateUrl: './page-header.component.html',
     styleUrls: ['./page-header.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        AsyncPipe,
+        NgTemplateOutlet,
+        PopupFilterComponent,
+        IqserFiltersModule,
+        IconButtonComponent,
+        CircleButtonComponent,
+        TranslateModule,
+        InputWithActionComponent,
+        MatTooltip,
+        DisableStopPropagationDirective,
+    ],
 })
 export class PageHeaderComponent<T extends IListable> {
     readonly searchPositions = SearchPositions;
     readonly iconButtonTypes = IconButtonTypes;
+    readonly filterService = inject(FilterService, { optional: true });
+    readonly searchService = inject<SearchService<T>>(SearchService<T>, { optional: true });
 
-    @Input() pageLabel?: string;
-    @Input() searchInputId?: string;
-    @Input() showCloseButton = false;
-    @Input() hideResetButton = false;
-    @Input() actionConfigs?: List<ActionConfig>;
-    @Input() buttonConfigs?: List<ButtonConfig>;
-    @Input() viewModeSelection?: TemplateRef<unknown>;
-    @Input() searchPlaceholder?: string;
-    @Input() searchWidth?: number | 'full';
-    @Input() helpModeKey?: 'dossier' | 'document';
-    @Input() searchPosition: SearchPosition = SearchPositions.afterFilters;
-    @Output() readonly closeAction = new EventEmitter();
+    readonly pageLabel = input<string>();
+    readonly searchInputId = input<string>();
+    readonly showCloseButton = input(false);
+    readonly hideResetButton = input(false);
+    readonly actionConfigs = input<List<ActionConfig>>();
+    readonly buttonConfigs = input<List<ButtonConfig>>();
+    readonly viewModeSelection = input<TemplateRef<unknown>>();
+    readonly searchPlaceholder = input<string>();
+    readonly searchWidth = input<number | 'full'>();
+    readonly helpModeKey = input<'dossier' | 'document'>();
+    readonly searchPosition = input<SearchPosition>(SearchPositions.afterFilters);
+    readonly closeAction = output();
+
+    readonly filterHelpModeKey = computed(() =>
+        this.helpModeKey() ? (this.helpModeKey() === 'dossier' ? 'filter_dossier_list' : 'filter_documents') : '',
+    );
 
     readonly filters$ = this.filterService?.filterGroups$.pipe(filterEach(f => !!f.icon));
     readonly showResetFilters$ = this.#showResetFilters$;
 
-    constructor(
-        @Optional() readonly filterService: FilterService,
-        @Optional() readonly searchService: SearchService<T>,
-    ) {}
-
-    get filterHelpModeKey() {
-        return this.helpModeKey ? (this.helpModeKey === 'dossier' ? 'filter_dossier_list' : 'filter_documents') : '';
-    }
-
     get #showResetFilters$(): Observable<boolean> {
         if (!this.filterService) {
             return of(false);
         }
 
-        return combineLatest([this.filterService.showResetFilters$, this.searchService.valueChanges$]).pipe(
+        return combineLatest([this.filterService.showResetFilters$, this.searchService?.valueChanges$ ?? of(undefined)]).pipe(
             map(([showResetFilters, searchValue]) => showResetFilters || !!searchValue),
             distinctUntilChanged(),
         );
     }
 
     resetFilters(): void {
-        this.filterService.reset();
-        this.searchService.reset();
+        this.filterService?.reset();
+        this.searchService?.reset();
     }
 
     trackByLabel<K extends { label?: string }>(_index: number, item: K): string | undefined {