RED-6408, get UI to run without errors.

RED-6408, rewrite filters service with signals. TODO: Modify its usage everywhere in the codebase.
2023-07-10 19:34:47 +03:00 · 2023-07-10 15:30:56 +03:00
260 changed files with 2266 additions and 4616 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -3,10 +3,7 @@ module.exports = {
    env: {
        browser: true,
    },
-    globals: {
-        NodeJS: true,
-    },
-    ignorePatterns: ['!**/*', 'jest.config.ts'],
+    ignorePatterns: ['!**/*'],
    overrides: [
        {
            files: ['*.ts'],
@ -49,150 +46,6 @@ module.exports = {
                ],
                '@typescript-eslint/restrict-template-expressions': 'off',
                '@typescript-eslint/lines-between-class-members': 'off',
-                '@typescript-eslint/member-ordering': [
-                    'warn',
-                    {
-                        default: [
-                            // Index signature
-                            'signature',
-                            'call-signature',
-
-                            // Fields
-                            '#private-static-field',
-                            'private-static-field',
-                            'protected-static-field',
-                            'public-static-field',
-
-                            '#private-instance-field',
-                            'private-instance-field',
-                            'protected-instance-field',
-                            'public-instance-field',
-
-                            'private-decorated-field',
-                            'protected-decorated-field',
-                            'public-decorated-field',
-
-                            'protected-abstract-field',
-                            'public-abstract-field',
-
-                            '#private-field',
-                            'private-field',
-                            'protected-field',
-                            'public-field',
-
-                            'static-field',
-                            'instance-field',
-                            'abstract-field',
-
-                            'decorated-field',
-
-                            'field',
-
-                            // Static initialization
-                            'static-initialization',
-
-                            // Constructors
-                            'public-constructor',
-                            'protected-constructor',
-                            'private-constructor',
-
-                            'constructor',
-
-                            // Getters
-                            'public-static-get',
-                            'protected-static-get',
-                            'private-static-get',
-                            '#private-static-get',
-
-                            'public-decorated-get',
-                            'protected-decorated-get',
-                            'private-decorated-get',
-
-                            'public-instance-get',
-                            'protected-instance-get',
-                            'private-instance-get',
-                            '#private-instance-get',
-
-                            'public-abstract-get',
-                            'protected-abstract-get',
-
-                            'public-get',
-                            'protected-get',
-                            'private-get',
-                            '#private-get',
-
-                            'static-get',
-                            'instance-get',
-                            'abstract-get',
-
-                            'decorated-get',
-
-                            'get',
-
-                            // Setters
-                            'public-static-set',
-                            'protected-static-set',
-                            'private-static-set',
-                            '#private-static-set',
-
-                            'public-decorated-set',
-                            'protected-decorated-set',
-                            'private-decorated-set',
-
-                            'public-instance-set',
-                            'protected-instance-set',
-                            'private-instance-set',
-                            '#private-instance-set',
-
-                            'public-abstract-set',
-                            'protected-abstract-set',
-
-                            'public-set',
-                            'protected-set',
-                            'private-set',
-                            '#private-set',
-
-                            'static-set',
-                            'instance-set',
-                            'abstract-set',
-
-                            'decorated-set',
-
-                            'set',
-
-                            // Methods
-                            'public-static-method',
-                            'protected-static-method',
-                            'private-static-method',
-                            '#private-static-method',
-
-                            'public-decorated-method',
-                            'protected-decorated-method',
-                            'private-decorated-method',
-
-                            'public-instance-method',
-                            'protected-instance-method',
-                            'private-instance-method',
-                            '#private-instance-method',
-
-                            'public-abstract-method',
-                            'protected-abstract-method',
-
-                            'public-method',
-                            'protected-method',
-                            'private-method',
-                            '#private-method',
-
-                            'static-method',
-                            'instance-method',
-                            'abstract-method',
-
-                            'decorated-method',
-
-                            'method',
-                        ],
-                    },
-                ],
            },
        },
        {
@ -206,7 +59,6 @@ module.exports = {
            ],
            rules: {
                'rxjs/no-ignored-subscription': 'error',
-                '@angular-eslint/prefer-standalone': 'off',
                '@angular-eslint/directive-selector': [
                    'error',
                    {
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -1,19 +0,0 @@
-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/"
--- a/sonar-project.properties
+++ b/sonar-project.properties
@ -1,2 +0,0 @@
-sonar.projectKey=common-ui
-sonar.qualitygate.wait=false
--- a/src/assets/icons/alert-circle.svg
+++ b/src/assets/icons/alert-circle.svg
@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="12px" viewBox="0 0 12 12" width="12px" xmlns="http://www.w3.org/2000/svg">
-  <g fill="none" fill-rule="evenodd" id="User-Management" stroke="none" stroke-width="1">
-    <g id="01.2-Bulk-Actions" transform="translate(-876.000000, -468.000000)">
-      <rect fill="#FFFFFF" height="900" width="1440" x="0" y="0"></rect>
-      <polygon fill="#FFFFFF" id="Rectangle" points="201 449 1087 449 1087 499 201 499"></polygon>
-      <g fill="#DD4D50" id="Group-19" transform="translate(876.000000, 171.000000)">
-        <path
-          d="M6.00002308,297 C9.30875217,297 12.0000462,299.690683 12.0000462,302.999359 C12.0000462,306.309082 9.30898674,309 6.00002308,309 C2.69105942,309 2.27373675e-13,306.309082 2.27373675e-13,302.999359 C2.27373675e-13,299.690683 2.69129399,297 6.00002308,297 Z M6.00002308,298.846154 C3.71080282,298.846154 1.84615385,300.71038 1.84615385,302.999359 C1.84615385,305.289458 3.71064029,307.153846 6.00002308,307.153846 C8.28940586,307.153846 10.1538923,305.289458 10.1538923,302.999359 C10.1538923,300.71038 8.28924333,298.846154 6.00002308,298.846154 Z M6.89921108,303.700197 L6.89921108,305.678219 L5.10100111,305.678219 L5.10100111,303.700197 L6.89921108,303.700197 Z M6.89921108,300.103957 L6.89921108,302.801137 L5.10100111,302.801137 L5.10100111,300.103957 L6.89921108,300.103957 Z"
-          id="Combined-Shape"></path>
-      </g>
-    </g>
-  </g>
-</svg>
--- a/src/assets/icons/calendar.svg
+++ b/src/assets/icons/calendar.svg
@ -1,15 +0,0 @@
-<?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="calendar" stroke="none" stroke-width="1">
-        <path
-            d="M35,70 L35,80 L25,80 L25,70 L35,70 Z M55,70 L55,80 L45,80 L45,70 L55,70 Z M35,55 L35,65 L25,65 L25,55 L35,55 Z M55,55 L55,65 L45,65 L45,55 L55,55 Z M75,55 L75,65 L65,65 L65,55 L75,55 Z M55,40 L55,50 L45,50 L45,40 L55,40 Z M75,40 L75,50 L65,50 L65,40 L75,40 Z"
-            fill="currentColor" fill-rule="nonzero" id="Combined-Shape"></path>
-        <path
-            d="M90,0 L10,0 C4.5,0 0,4.5 0,10 L0,90 C0,95.5 4.5,100 10,100 L90,100 C95.5,100 100,95.5 100,90 L100,10 C100,4.5 95.5,0 90,0 Z M10,90 L10,10 L90,10 L90,90 L10,90 Z"
-            fill="currentColor" fill-rule="nonzero" id="Shape"></path>
-        <path
-            d="M90,20 L10,20 C4.5,20 0,24.5 0,30 L0,90 C0,95.5 4.5,100 10,100 L90,100 C95.5,100 100,95.5 100,90 L100,30 C100,24.5 95.5,20 90,20 Z M10,90 L10,30 L90,30 L90,90 L10,90 Z"
-            fill="currentColor" fill-rule="nonzero" id="Shape"></path>
-    </g>
-</svg>
--- a/src/assets/icons/chevron-down.svg
+++ b/src/assets/icons/chevron-down.svg
@ -1,3 +0,0 @@
-<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>
--- a/src/assets/icons/chevron-up.svg
+++ b/src/assets/icons/chevron-up.svg
@ -1,3 +0,0 @@
-<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>
--- a/src/assets/icons/color-picker.svg
+++ b/src/assets/icons/color-picker.svg
@ -1,15 +0,0 @@
-<svg id="Capa_1" style="enable-background:new 0 0 464.736 464.736;" viewBox="0 0 464.736 464.736"
-     x="0px"
-     xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0px">
-<g>
-	<path d="M446.598,18.143c-24.183-24.184-63.393-24.191-87.592-0.008l-16.717,16.717c-8.98-8.979-23.525-8.979-32.504,0
-		c-8.981,8.972-8.981,23.533,0,32.505l5.416,5.419L134.613,253.377h-0.016l-62.685,62.691c-4.982,4.982-7.919,11.646-8.235,18.684
-		l-0.15,3.344c0,0.016,0,0.03,0,0.046l-2.529,56.704c-0.104,2.633,0.883,5.185,2.739,7.048c1.751,1.759,4.145,2.738,6.63,2.738
-		c0.135,0,0.269,0,0.42-0.008l30.064-1.331h0.016l18.318-0.815l8.318-0.366c9.203-0.412,17.944-4.259,24.469-10.776l240.898-240.891
-		l4.506,4.505c4.49,4.488,10.372,6.733,16.252,6.733c5.881,0,11.764-2.245,16.253-6.733c8.98-8.973,8.98-23.534,0-32.505
-		l16.716-16.718C470.782,81.544,470.782,42.334,446.598,18.143z M272.639,227.33l-84.6,15.96l137.998-138.004l34.332,34.316
-		L272.639,227.33z" fill="currentColor" />
-    <path d="M64.5,423.872c-35.617,0-64.5,9.145-64.5,20.435c0,11.284,28.883,20.428,64.5,20.428s64.486-9.143,64.486-20.428
-		C128.986,433.016,100.117,423.872,64.5,423.872z" fill="currentColor" />
-</g>
-</svg>
--- a/src/assets/icons/csv.svg
+++ b/src/assets/icons/csv.svg
@ -3,11 +3,11 @@
 <svg id="Layer_1" style="enable-background:new 0 0 14 14;" version="1.1" viewBox="0 0 14 14" x="0px"
     xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0px">
 <style type="text/css">
-	#csv-svg .st0 {
+	.st0 {
        fill: currentColor;
    }
 </style>
-    <g id="csv-svg">
+    <g id="Styleguide">
 	<g id="Export-just-icons" transform="translate(-979.000000, -252.000000)">
 		<g id="Group" transform="translate(979.000000, 252.000000)">
 			<g id="list-view">
--- a/src/assets/icons/exit-fullscreen.svg
+++ b/src/assets/icons/exit-fullscreen.svg
@ -1,9 +0,0 @@
-<?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>
--- a/src/assets/icons/filter-list.svg
+++ b/src/assets/icons/filter-list.svg
@ -1,3 +0,0 @@
-<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>
--- a/src/assets/icons/fullscreen.svg
+++ b/src/assets/icons/fullscreen.svg
@ -1,9 +0,0 @@
-<?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>
--- a/src/assets/icons/help-outline-active.svg
+++ b/src/assets/icons/help-outline-active.svg
@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px" xmlns="http://www.w3.org/2000/svg"
->
-    <g fill="none" fill-rule="evenodd" id="Help-Mode" stroke="none" stroke-width="1">
-        <g fill="currentColor" fill-rule="nonzero" id="01.-Help-button" transform="translate(-1408.000000, -645.000000)">
-            <g id="help-button" transform="translate(1294.000000, 635.000000)">
-                <g id="help" transform="translate(114.000000, 10.000000)">
-                    <path
-                        d="M10,0 C15.5,1.01033361e-15 20,4.5 20,10 C20,15.5 15.5,20 10,20 C4.5,20 3.55271368e-15,15.5 3.55271368e-15,10 C7.10542736e-15,4.5 4.5,-1.01033361e-15 10,0 Z M10,2 C5.6,2 2,5.6 2,10 C2,14.4 5.6,18 10,18 C14.4,18 18,14.4 18,10 C18,5.6 14.4,2 10,2 Z M10.86,12.9 L10.86,14.9 L8.86,14.9 L8.86,12.9 L10.86,12.9 Z M9.86,4.9 C11.56,4.9 12.86,6.2 12.86,7.9 C12.86,8.8 12.36,9.7 11.66,10.3 C11.3830769,10.4846154 10.9357396,10.839645 10.8685571,11.4437415 L10.86,11.6 L10.86,11.9 L8.86,11.9 L8.86,11.6 C8.86,10.5 9.46,9.4 10.46,8.7 C10.76,8.5 10.86,8.2 10.86,7.9 C10.86,7.3 10.46,6.9 9.86,6.9 C9.30285714,6.9 8.91816327,7.24489796 8.86604956,7.77456268 L8.86,7.9 L6.86,7.9 C6.86,6.2 8.16,4.9 9.86,4.9 Z"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/src/assets/icons/lanes.svg
+++ b/src/assets/icons/lanes.svg
@ -3,11 +3,11 @@
 <svg id="Layer_1" style="enable-background:new 0 0 14 14;" version="1.1" viewBox="0 0 14 14" x="0px"
     xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0px">
 <style type="text/css">
-	#lanes-svg .st0 {
+	.st0 {
        fill: currentColor;
    }
 </style>
-    <g id="lanes-svg">
+    <g id="Styleguide">
 	<g id="Export-just-icons" transform="translate(-979.000000, -294.000000)">
 		<g id="Group" transform="translate(979.000000, 294.000000)">
 			<g id="lanes-view">
--- a/src/assets/icons/nav-first.svg
+++ b/src/assets/icons/nav-first.svg
@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="16px" version="1.1" viewBox="0 0 16 16" width="16px"
-     xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd" id="Annotations-Jump-to-" stroke="none" stroke-width="1">
-        <g id="03.Jump-to-first-annotation" transform="translate(-1109.000000, -181.000000)">
-            <rect height="750" width="1440" x="0" y="0"></rect>
-            <rect height="32" id="Rectangle" width="60" x="1087" y="173"></rect>
-            <g fill="currentColor" fill-rule="nonzero" id="right_white"
-               transform="translate(1109.000000, 181.000000)">
-                <polygon id="Path"
-                         points="12 6.24 10.88 5.12 8 8 7.2 7.2 5.12 5.12 4 6.24 8 10.24"
-                         transform="translate(8.000000, 7.680000) scale(1, -1) translate(-8.000000, -7.680000) "></polygon>
-                <polygon id="Path"
-                         points="12 10.4 10.88 9.28 8 12.16 7.2 11.36 5.12 9.28 4 10.4 8 14.4"
-                         transform="translate(8.000000, 11.840000) scale(1, -1) translate(-8.000000, -11.840000) "></polygon>
-                <polygon id="Path"
-                         points="14.4 1.92 1.6 1.92 1.22124533e-14 1.92 1.22124533e-14 3.52 16 3.52 16 1.92"
-                         transform="translate(8.000000, 2.720000) scale(1, -1) translate(-8.000000, -2.720000) "></polygon>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/src/assets/icons/nav-last.svg
+++ b/src/assets/icons/nav-last.svg
@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="16px" version="1.1" viewBox="0 0 16 16" width="16px"
-     xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd" id="Annotations-Jump-to-" stroke="none" stroke-width="1">
-        <g id="03.Jump-to-first-annotation" transform="translate(-1109.000000, -726.000000)">
-            <rect height="750" width="1440" x="0" y="0"></rect>
-            <rect height="32" id="Rectangle" width="60" x="1087" y="718"></rect>
-            <g fill="currentColor"
-               fill-rule="nonzero"
-               id="right_white"
-               transform="translate(1117.000000, 734.000000) scale(1, -1) translate(-1117.000000, -734.000000) translate(1109.000000, 726.000000)">
-                <polygon id="Path"
-                         points="12 6.24 10.88 5.12 8 8 7.2 7.2 5.12 5.12 4 6.24 8 10.24"
-                         transform="translate(8.000000, 7.680000) scale(1, -1) translate(-8.000000, -7.680000) "></polygon>
-                <polygon id="Path"
-                         points="12 10.4 10.88 9.28 8 12.16 7.2 11.36 5.12 9.28 4 10.4 8 14.4"
-                         transform="translate(8.000000, 11.840000) scale(1, -1) translate(-8.000000, -11.840000) "></polygon>
-                <polygon id="Path"
-                         points="14.4 1.92 1.6 1.92 1.22124533e-14 1.92 1.22124533e-14 3.52 16 3.52 16 1.92"
-                         transform="translate(8.000000, 2.720000) scale(1, -1) translate(-8.000000, -2.720000) "></polygon>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/src/assets/icons/nav-next.svg
+++ b/src/assets/icons/nav-next.svg
@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px"
-     xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd" id="Annotations-Jump-to-" stroke="none" stroke-width="1">
-        <g id="01.Jump-to-first-last-annotation" transform="translate(-1222.000000, -486.000000)">
-            <rect height="750" width="1440" x="0" y="0"></rect>
-            <rect height="544" id="Rectangle" width="282" x="1148" y="206"></rect>
-            <g id="Page-05" transform="translate(1147.000000, 173.000000)"></g>
-            <g id="Group" transform="translate(1212.000000, 476.000000)">
-                <rect height="34" id="Rectangle" rx="17" width="151" x="0" y="0"></rect>
-                <g fill="currentColor" fill-rule="nonzero" id="collapse"
-                   transform="translate(10.000000, 10.000000)">
-                    <g id="Group" transform="translate(1.400000, 3.360000)">
-                        <polygon id="Path"
-                                 points="9.1 0.98 8.12 0 5.6 2.52 4.9 1.82 3.08 0 2.1 0.98 5.6 4.48"></polygon>
-                        <polygon id="Path"
-                                 points="9.8 5.88 1.4 5.88 7.34412531e-15 5.88 7.34412531e-15 7.28 11.2 7.28 11.2 5.88"
-                                 transform="translate(5.600000, 6.580000) scale(1, -1) translate(-5.600000, -6.580000) "></polygon>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/src/assets/icons/nav-prev.svg
+++ b/src/assets/icons/nav-prev.svg
@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px"
-     xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd" id="Annotations-Jump-to-" stroke="none" stroke-width="1">
-        <g id="01.Jump-to-first-last-annotation" transform="translate(-1222.000000, -444.000000)">
-            <rect height="750" width="1440" x="0" y="0"></rect>
-            <rect height="544" id="Rectangle" width="282" x="1148" y="206"></rect>
-            <g id="Page-05" transform="translate(1147.000000, 173.000000)"></g>
-            <g id="Group" transform="translate(1212.000000, 434.000000)">
-                <rect height="34" id="Rectangle" rx="17" width="151" x="0" y="0"></rect>
-                <g fill="currentColor" fill-rule="nonzero" id="collapse"
-                   transform="translate(10.000000, 10.000000)">
-                    <g id="Group" transform="translate(1.400000, 3.360000)">
-                        <polygon id="Path"
-                                 points="9.1 3.78 8.12 2.8 5.6 5.32 4.9 4.62 3.08 2.8 2.1 3.78 5.6 7.28"
-                                 transform="translate(5.600000, 5.040000) scale(1, -1) translate(-5.600000, -5.040000) "></polygon>
-                        <polygon id="Path"
-                                 points="9.8 0 1.4 0 7.34412531e-15 0 7.34412531e-15 1.4 11.2 1.4 11.2 0"
-                                 transform="translate(5.600000, 0.700000) scale(1, -1) translate(-5.600000, -0.700000) "></polygon>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/src/assets/icons/resize.svg
+++ b/src/assets/icons/resize.svg
@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd" id="Styleguide" stroke="none" stroke-width="1">
-        <g fill="currentColor" id="Styleguide-Actions" transform="translate(-979.000000, -630.000000)">
-            <g id="reference" transform="translate(969.000000, 620.000000)">
-                <g id="status" transform="translate(10.000000, 10.000000)">
-                    <path
-                        d="M1.4,9.8 L1.4,12.6 L4.2,12.6 L4.2,14 L0,14 L0,9.8 L1.4,9.8 Z M14,9.8 L14,14 L9.8,14 L9.8,12.6 L12.6,12.6 L12.6,9.8 L14,9.8 Z M4.2,0 L4.2,1.4 L1.4,1.4 L1.4,4.2 L0,4.2 L0,0 L4.2,0 Z M14,0 L14,4.2 L12.6,4.2 L12.6,1.4 L9.8,1.4 L9.8,0 L14,0 Z"
-                        fill-rule="nonzero" id="OCR"></path>
-                    <path d="M4.2,0 L0,0 L0,4.2 L4.2,4.2 L4.2,0 Z M2.8,1.4 L2.8,2.8 L1.4,2.8 L1.4,1.4 L2.8,1.4 Z" fill-rule="nonzero"
-                          id="Path"></path>
-                    <path d="M4.2,9.8 L0,9.8 L0,14 L4.2,14 L4.2,9.8 Z M2.8,11.2 L2.8,12.6 L1.4,12.6 L1.4,11.2 L2.8,11.2 Z" fill-rule="nonzero"
-                          id="Path"></path>
-                    <path d="M14,0 L9.8,0 L9.8,4.2 L14,4.2 L14,0 Z M12.6,1.4 L12.6,2.8 L11.2,2.8 L11.2,1.4 L12.6,1.4 Z" fill-rule="nonzero"
-                          id="Path"></path>
-                    <path d="M14,9.8 L9.8,9.8 L9.8,14 L14,14 L14,9.8 Z M12.6,11.2 L12.6,12.6 L11.2,12.6 L11.2,11.2 L12.6,11.2 Z" fill-rule="nonzero"
-                          id="Path"></path>
-                    <rect height="1.4" id="Rectangle" width="5.6" x="4.2" y="1.4"></rect>
-                    <rect height="1.4" id="Rectangle" width="5.6" x="4.2" y="11.2"></rect>
-                    <rect height="5.6" id="Rectangle" width="1.4" x="11.2" y="4.2"></rect>
-                    <rect height="5.6" id="Rectangle" width="1.4" x="1.4" y="4.2"></rect>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/src/assets/icons/thumb-down.svg
+++ b/src/assets/icons/thumb-down.svg
@ -1,9 +0,0 @@
-<?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="false_positive" stroke="none" stroke-width="1">
-        <path
-            d="M70.0540046,8 L70.0540046,13 L18.1476125,13 C13.6557132,13 9.16381388,16.5 8.16561403,21 L0.180015248,61 C-0.319084676,64 0.180015248,67 2.17641494,69.5 C4.17281464,71.5 7.16741418,73 10.1620137,73 L23.1386117,73 C18.6467124,78.5 18.1476125,86 22.1404119,91.5 C24.6359115,95.5 29.1278108,98 34.1188101,98 C38.1116095,98 42.1044088,96.5 44.5999085,93.5 L65.0630053,73 L70.0540046,73 L70.0540046,78 L100,78 L100,8 L70.0540046,8 Z M61.0702059,63 L37.6125095,86.5 C36.6143097,87.5 35.6161098,88 34.1188101,88 C32.6215103,88 31.1242105,87 30.1260107,86 C28.6287109,84 29.1278108,81 31.1242105,79 L47.0954081,63 L10.1620137,63 L18.1476125,23 L70.0540046,23 L70.0540046,63 L61.0702059,63 Z M90.0180015,68 L80.036003,68 L80.036003,18 L90.0180015,18 L90.0180015,68 Z"
-            fill="currentColor" fill-rule="nonzero" id="Shape"></path>
-    </g>
-</svg>
--- a/src/assets/icons/thumb-up.svg
+++ b/src/assets/icons/thumb-up.svg
@ -1,9 +0,0 @@
-<?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="false_negative" stroke="none" stroke-width="1">
-        <path
-            d="M29.9459954,92 L29.9459954,87 L81.8523875,87 C86.3442868,87 90.8361861,83.5 91.834386,79 L99.8199848,39 C100.319085,36 99.8199848,33 97.8235851,30.5 C95.8271854,28.5 92.8325858,27 89.8379863,27 L76.8613883,27 C81.3532876,21.5 81.8523875,14 77.8595881,8.5 C75.3640885,4.5 70.8721892,2 65.8811899,2 C61.8883905,2 57.8955912,3.5 55.4000915,6.5 L34.9369947,27 L29.9459954,27 L29.9459954,22 L0,22 L0,92 L29.9459954,92 Z M38.9297941,37 L62.3874905,13.5 C63.3856903,12.5 64.3838902,12 65.8811899,12 C67.3784897,12 68.8757895,13 69.8739893,14 C71.3712891,16 70.8721892,19 68.8757895,21 L52.9045919,37 L89.8379863,37 L81.8523875,77 L29.9459954,77 L29.9459954,37 L38.9297941,37 Z M9.98199848,32 L19.963997,32 L19.963997,82 L9.98199848,82 L9.98199848,32 Z"
-            fill="currentColor" fill-rule="nonzero" id="Shape"></path>
-    </g>
-</svg>
--- a/src/assets/icons/visibility-off.svg
+++ b/src/assets/icons/visibility-off.svg
@ -1,5 +0,0 @@
-<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>
--- a/src/assets/icons/visibility.svg
+++ b/src/assets/icons/visibility.svg
@ -1,5 +0,0 @@
-<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>
--- a/src/assets/styles/_common-variables.scss
+++ b/src/assets/styles/_common-variables.scss
@ -43,12 +43,12 @@ body {
    --iqser-pink-1: #f125de;
    --iqser-helpmode-primary: green;
    --iqser-font-size: 13px;
-    --iqser-inputs-font-size: 13px;
    --iqser-button-radius: 17px;
    --iqser-button-font-size: 13px;
    --iqser-button-height: 34px;
+    --iqser-font-family: 'some placeholder value that should be overridden when configuring a theme';
+    --iqser-app-name-font-family: 'some placeholder value that should be overridden when configuring a theme';
    --iqser-app-name-font-size: 18px;
-    --iqser-logo-size: 28px;
    --iqser-app-name-color: black;
    --iqser-top-bar-height: 61px;
    --iqser-menu-margin-top: 10px;
@ -57,17 +57,9 @@ body {
    --iqser-menu-padding-bottom: 24px;
    --iqser-menu-min-height: 24px;
    --iqser-menu-item-margin: 0 8px 2px 8px;
-    --iqser-inputs-height: 36px;
-    --iqser-textarea-padding-y: 7px;
-    --iqser-font-family: Inter, sans-serif;
-    --iqser-app-name-font-family: Inter, sans-serif;
-    --iqser-circle-button-radius: 50%;
-    --iqser-side-nav-item-radius: 20px;
-    --iqser-dot-overlay-background: rgba(var(--iqser-primary-rgb), 0.1);
-    --iqser-chevron-button-bg: transparent;
 }

-$required-variables: 'iqser-primary';
+$required-variables: 'iqser-font-family' 'iqser-primary';

@mixin checkRequiredVariables($args, $theme) {
    @each $var in $required-variables {
--- a/src/assets/styles/common-base-screen.scss
+++ b/src/assets/styles/common-base-screen.scss
@ -32,7 +32,6 @@
    .buttons {
        display: flex;
        margin-right: 8px;
-        align-items: center;

        > *:not(:last-child) {
            margin-right: 14px;
@ -50,18 +49,22 @@
    font-family: var(--iqser-app-name-font-family);
    font-size: var(--iqser-app-name-font-size);
    color: var(--iqser-app-name-color);
-    font-weight: normal;
+    font-weight: 800;
    white-space: nowrap;
 }

 .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);
-    writing-mode: vertical-rl;
-    text-orientation: upright;
+    word-break: break-all;
    display: flex;
    justify-content: center;
    align-items: center;
--- a/src/assets/styles/common-buttons.scss
+++ b/src/assets/styles/common-buttons.scss
@ -37,7 +37,7 @@
    }

    .overlay {
-        background: var(--iqser-dot-overlay-background);
+        background: rgba(var(--iqser-primary-rgb), 0.1);
    }
 }

@ -66,14 +66,6 @@ iqser-icon-button {

        --mdc-text-button-label-text-color: var(--iqser-text);
        padding: 0 14px;
-        width: 100%;
-
-        &:hover:not([disabled]) {
-            .mat-mdc-button-persistent-ripple::before {
-                background-color: #000;
-                opacity: 0.04;
-            }
-        }

        &[disabled] {
            --mdc-text-button-disabled-label-text-color: rgba(var(--iqser-text-rgb), 0.3);
@ -119,17 +111,12 @@ iqser-circle-button {
        display: flex;
        align-items: center;
        justify-content: center;
-        border-radius: var(--iqser-circle-button-radius);

        .mat-mdc-button-touch-target {
            width: var(--circle-button-size);
            height: var(--circle-button-size);
        }

-        .mat-mdc-button-persistent-ripple {
-            border-radius: var(--iqser-circle-button-radius);
-        }
-
        &.mat-mdc-button-base {
            height: var(--circle-button-size);
            width: var(--circle-button-size);
@ -152,10 +139,6 @@ iqser-circle-button {
            background: var(--iqser-primary);
        }

-        &.dark-bg {
-            background: var(--iqser-btn-bg);
-        }
-
        &.warn:not([disabled]) {
            --mdc-icon-button-icon-color: var(--iqser-accent);
            background-color: var(--iqser-warn);
@ -177,6 +160,7 @@ iqser-circle-button {
 iqser-chevron-button {
    @include buttonShape;
    @include ariaExpanded;
+    @include dotOverlay;
    @include labelNoWrap;

    display: block;
@ -184,14 +168,10 @@ iqser-chevron-button {
    .mat-mdc-button {
        @include iconSize14;

-        background-color: var(--iqser-chevron-button-bg);
-
        &:not([disabled]) {
            --mdc-text-button-label-text-color: var(--iqser-text);
        }
    }
-
-    @include dotOverlay;
 }

 iqser-user-button {
--- a/src/assets/styles/common-checkbox.scss
+++ b/src/assets/styles/common-checkbox.scss
@ -5,7 +5,6 @@ $ripple-size: 26px;
    flex: 0 0 $checkbox-size;
    width: $checkbox-size;
    height: $checkbox-size;
-    margin-top: 4px;
 }

 .mat-mdc-checkbox,
@ -17,22 +16,10 @@ $ripple-size: 26px;
    --mdc-checkbox-unselected-focus-icon-color: var(--iqser-grey-5);
    --mdc-checkbox-disabled-selected-icon-color: var(--iqser-primary);
    --mdc-checkbox-disabled-unselected-icon-color: var(--iqser-grey-5);
-    --mdc-checkbox-selected-focus-icon-color: var(--iqser-primary);
-    --mdc-checkbox-selected-hover-icon-color: var(--iqser-primary);
-    --mdc-checkbox-selected-icon-color: var(--iqser-primary);
-    --mdc-checkbox-selected-pressed-icon-color: var(--iqser-primary);
-    --mdc-checkbox-selected-focus-state-layer-color: var(--iqser-primary);
-    --mdc-checkbox-selected-hover-state-layer-color: var(--iqser-primary);
-    --mdc-checkbox-selected-pressed-state-layer-color: var(--iqser-primary);

-    .mdc-form-field {
-        align-items: start;
-
-        & > label {
-            padding-left: 8px;
-            line-height: 24px;
-            white-space: normal;
-        }
+    .mdc-form-field > label {
+        padding-left: 8px;
+        line-height: 24px;
    }

    .mdc-checkbox__ripple {
@ -53,9 +40,10 @@ $ripple-size: 26px;
    }

    .mat-mdc-checkbox-touch-target {
+        position: unset;
        height: $ripple-size;
        width: $ripple-size;
-        transform: translate(-50%, -50%);
+        transform: translate(calc(($checkbox-size - $ripple-size) / 2), calc(($checkbox-size - $ripple-size) / 2));
    }
 }

--- a/src/assets/styles/common-chips.scss
+++ b/src/assets/styles/common-chips.scss
@ -39,10 +39,6 @@ mat-chip-listbox {
    &.mat-mdc-chip-selected {
        background-color: var(--iqser-btn-bg);

-        .mdc-evolution-chip__text-label {
-            color: #212121;
-        }
-
        .selected-mark {
            display: block;
        }
@ -72,7 +68,3 @@ mat-chip-listbox {
 .mdc-evolution-chip-set__chips {
    margin-left: 0 !important;
 }
-
-.mat-mdc-chip-focus-overlay {
-    display: none;
-}
--- a/src/assets/styles/common-components.scss
+++ b/src/assets/styles/common-components.scss
@ -18,18 +18,9 @@
    &.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);
--- a/src/assets/styles/common-dialogs.scss
+++ b/src/assets/styles/common-dialogs.scss
@ -15,10 +15,6 @@
    }
 }

-.use-backslash-n-as-line-break {
-    white-space: pre-line !important;
-}
-
 .dialog {
    position: relative;
    min-height: 80px;
@ -41,20 +37,6 @@
        flex-direction: column;
        flex: 1;
        padding: 24px 32px 40px;
-
-        &.redaction {
-            .selected-text {
-                font-weight: bold;
-                padding-bottom: 8px;
-            }
-        }
-
-        &.redaction,
-        &.force-annotation {
-            iqser-details-radio {
-                padding-top: 20px;
-            }
-        }
    }

    .dialog-actions {
@ -75,7 +57,3 @@
        margin-left: auto;
    }
 }
-
-.large-form-dialog .dialog > form {
-    display: contents;
-}
--- a/src/assets/styles/common-file-upload.scss
+++ b/src/assets/styles/common-file-upload.scss
@ -1,59 +0,0 @@
-.iqser-upload-file {
-    .upload-area,
-    .file-area {
-        display: flex;
-        align-items: center;
-        border-radius: 8px;
-        width: 100%;
-        box-sizing: border-box;
-        background: var(--iqser-alt-background);
-        height: 68px;
-
-        &.drag-over {
-            background-color: var(--iqser-file-drop-drag-over);
-        }
-    }
-
-    .upload-area {
-        gap: 16px;
-        cursor: pointer;
-        padding: 0 32px;
-
-        mat-icon,
-        div {
-            opacity: 0.5;
-            transition: 0.1s;
-        }
-
-        div {
-            font-size: 16px;
-            font-weight: 500;
-        }
-    }
-
-    .file-area {
-        gap: 10px;
-
-        mat-icon:first-child {
-            opacity: 0.5;
-            margin-left: 16px;
-        }
-
-        mat-icon:last-child {
-            margin-left: auto;
-            margin-right: 16px;
-            cursor: pointer;
-        }
-
-        mat-icon {
-            transform: scale(0.7);
-        }
-
-        p {
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            max-width: 490px;
-        }
-    }
-}
--- a/src/assets/styles/common-full-pages.scss
+++ b/src/assets/styles/common-full-pages.scss
@ -7,11 +7,11 @@
 .full-page-section {
    opacity: 0.7;
    background: var(--iqser-background);
-    z-index: 1001;
+    z-index: 900;
 }

 .full-page-content {
-    z-index: 1002;
+    z-index: 1000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
--- a/src/assets/styles/common-help-mode.scss
+++ b/src/assets/styles/common-help-mode.scss
@ -9,9 +9,4 @@
    background: rgba(92, 229, 148, 0.5);
    box-shadow: 0 0 0 2px var(--iqser-helpmode-primary) inset;
    cursor: help;
-
-    &.documine-theme {
-        background: rgba(253, 189, 0, 0.5);
-        box-shadow: 0 0 0 2px var(--iqser-yellow-2) inset;
-    }
 }
--- a/src/assets/styles/common-inputs.scss
+++ b/src/assets/styles/common-inputs.scss
@ -67,8 +67,8 @@ iqser-dynamic-input {
        width: 14px;
        height: 14px;
        position: absolute;
-        top: calc((var(--iqser-inputs-height) - 14px) / 2 - 1px);
-        right: calc((var(--iqser-inputs-height) - 14px) / 2 - 1px);
+        top: 10px;
+        right: 10px;
    }

    .slider-row {
@ -94,10 +94,19 @@ iqser-dynamic-input {
    input:not([type='checkbox']),
    textarea {
        box-sizing: border-box;
+        margin-top: 3px;
        min-height: var(--iqser-inputs-height);
        line-height: 32px;
-        padding-left: calc((var(--iqser-inputs-height) - 14px) / 2);
-        padding-right: calc((var(--iqser-inputs-height) - 14px) / 2);
+        padding-left: 11px;
+        padding-right: 11px;
+    }
+
+    .mat-mdc-form-field {
+        margin-top: 3px;
+
+        input {
+            margin-top: 0;
+        }
    }

    .mat-mdc-form-field-subscript-wrapper {
@ -105,11 +114,7 @@ iqser-dynamic-input {
    }

    .mdc-text-field--outlined {
-        --mdc-outlined-text-field-focus-outline-width: 1px;
-        --mdc-shape-small: 8px;
-        --mdc-outlined-text-field-container-shape: 8px;
-        border-bottom-left-radius: var(--mdc-shape-small);
-        border-bottom-right-radius: var(--mdc-shape-small);
+        --mdc-shape-small: 8px; // border-radius
    }

    .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) {
@ -150,7 +155,7 @@ iqser-dynamic-input {
    textarea {
        border: 1px solid var(--iqser-inputs-outline);
        font-family: var(--iqser-font-family);
-        font-size: var(--iqser-inputs-font-size);
+        font-size: var(--iqser-font-size);
        background-color: var(--iqser-background);
        color: var(--iqser-text);
        border-radius: 8px;
@ -186,7 +191,7 @@ iqser-dynamic-input {
    }

    textarea {
-        line-height: calc(var(--iqser-inputs-font-size) * 1.4);
+        line-height: 18px;
    }

    .hex-color-input {
@ -196,8 +201,8 @@ iqser-dynamic-input {

    textarea {
        resize: vertical;
-        padding-top: var(--iqser-textarea-padding-y);
-        padding-bottom: var(--iqser-textarea-padding-y);
+        padding-top: 7px;
+        padding-bottom: 7px;
        @include mixins.scroll-bar;

        &.has-scrollbar {
@ -211,7 +216,7 @@ iqser-dynamic-input {
        font-size: 11px;
        letter-spacing: 0;
        line-height: 14px;
-        margin-bottom: 5px;
+        margin-bottom: 2px;
        color: var(--iqser-text);

        &.mat-checkbox-layout {
@ -222,7 +227,7 @@ iqser-dynamic-input {

    &.required label:after {
        content: ' *';
-        color: var(--iqser-red-1);
+        color: var(--iqser-primary);
    }

    &.datepicker-wrapper {
@ -239,7 +244,7 @@ iqser-dynamic-input {
        .mat-datepicker-toggle {
            position: absolute;
            right: 0;
-            bottom: -4px;
+            bottom: 1px;
            color: var(--iqser-accent);

            &.mat-datepicker-toggle-active {
@ -256,18 +261,6 @@ iqser-dynamic-input {
                width: 14px;
            }

-            button.cdk-focused,
-            button:hover {
-                span {
-                    &::before {
-                        width: 32px;
-                        height: 32px;
-                        top: 10px;
-                        left: 8px;
-                    }
-                }
-            }
-
            .mat-mdc-icon-button svg {
                width: unset;
                height: unset;
--- a/src/assets/styles/common-layout.scss
+++ b/src/assets/styles/common-layout.scss
@ -86,13 +86,17 @@ section.settings {
 }

 .fullscreen {
+    .page-header {
+        position: absolute;
+        top: 0;
+    }
+
    .content-inner {
        height: calc(100% - 50px);
    }

-    .right-container {
-        transform: translateY(61px);
-        height: calc(100% - 61px);
+    .overlay-shadow {
+        top: 50px;
    }
 }

@ -156,15 +160,11 @@ section.settings {
    box-sizing: border-box;
    background: var(--iqser-background);
    overflow: hidden;
-    &.with-transition {
-        transition:
-            width ease-in-out 0.2s,
-            min-width ease-in-out 0.2s;
-    }
-    @include common-mixins.scroll-bar;
+    transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s;

    &:hover {
        overflow-y: auto;
+        @include common-mixins.scroll-bar;
    }

    .collapsed-wrapper {
@ -213,11 +213,6 @@ section.settings {
    display: flex !important;
 }

-.flex-column {
-    @extend .flex;
-    flex-direction: column;
-}
-
 .flex-end {
    display: flex;
    justify-content: flex-end;
@ -256,10 +251,6 @@ section.settings {
    cursor: pointer;
 }

-.cursor-default {
-    cursor: default;
-}
-
 .fit-content {
    width: fit-content;
 }
--- a/src/assets/styles/common-loading.scss
+++ b/src/assets/styles/common-loading.scss
@ -7,26 +7,18 @@
    0%,
    20% {
        color: rgba(var(--iqser-accent-rgb), 0);
-        text-shadow:
-            0.25em 0 0 rgba(var(--iqser-accent-rgb), 0),
-            0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
+        text-shadow: 0.25em 0 0 rgba(var(--iqser-accent-rgb), 0), 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
    }
    40% {
-        color: var(--iqser-accent);
-        text-shadow:
-            0.25em 0 0 rgba(var(--iqser-accent-rgb), 0),
-            0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
+        color: #283241;
+        text-shadow: 0.25em 0 0 rgba(var(--iqser-accent-rgb), 0), 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
    }
    60% {
-        text-shadow:
-            0.25em 0 0 var(--iqser-accent),
-            0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
+        text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
    }
    80%,
    100% {
-        text-shadow:
-            0.25em 0 0 var(--iqser-accent),
-            0.5em 0 0 var(--iqser-accent);
+        text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 #283241;
    }
 }

--- a/src/assets/styles/common-menu.scss
+++ b/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 !important;
+        padding: 0 26px 0 8px;
        margin: var(--iqser-menu-item-margin);
        border-radius: 4px;
        width: -webkit-fill-available;
@ -58,7 +58,7 @@
        }

        &.padding-left {
-            padding-left: 56px !important;
+            padding-left: 56px;
        }

        &:last-of-type {
--- a/src/assets/styles/common-progress-spinner.scss
+++ b/src/assets/styles/common-progress-spinner.scss
@ -1,3 +0,0 @@
-.mat-mdc-progress-spinner {
-    --mdc-circular-progress-active-indicator-color: var(--iqser-primary);
-}
--- a/src/assets/styles/common-select.scss
+++ b/src/assets/styles/common-select.scss
@ -1,10 +1,9 @@
@use 'common-mixins';

 .mat-mdc-select {
-    padding: 0 calc(var(--iqser-inputs-height) - 25px);
+    padding: 0 11px;
    box-sizing: border-box;
-    --mat-select-trigger-text-line-height: var(--iqser-inputs-height);
-    --mat-select-trigger-text-size: var(--iqser-inputs-font-size);
+    line-height: var(--iqser-inputs-height);
 }

 .mat-mdc-select-panel {
@ -13,7 +12,6 @@
    background-color: var(--iqser-background);
    @include common-mixins.scroll-bar;
    @include common-mixins.drop-shadow;
-    --mat-option-selected-state-label-text-color: var(--iqser-primary);
 }

 .mat-mdc-select-arrow-wrapper {
@ -48,12 +46,6 @@
    color: var(--iqser-text);
 }

-.mat-form-field-disabled {
-    .mat-mdc-select-value {
-        color: var(--iqser-grey-3);
-    }
-}
-
-.mat-mdc-option:not(.mat-mdc-option-multiple) .mat-mdc-option-pseudo-checkbox {
+.mat-mdc-option .mat-mdc-option-pseudo-checkbox {
    display: none;
 }
--- a/src/assets/styles/common-side-nav.scss
+++ b/src/assets/styles/common-side-nav.scss
@ -19,7 +19,7 @@ iqser-side-nav {

    .item {
        margin-bottom: 4px;
-        border-radius: var(--iqser-side-nav-item-radius);
+        border-radius: 20px;
        padding: 9px 16px;
        cursor: pointer;
        transition: background-color 0.2s;
--- a/src/assets/styles/common-slider.scss
+++ b/src/assets/styles/common-slider.scss
@ -13,14 +13,8 @@
    --mdc-slider-disabled-handle-color: var(--iqser-primary);
    --mdc-slider-disabled-active-track-color: var(--iqser-grey-5);
    --mdc-slider-disabled-inactive-track-color: var(--iqser-grey-7);
-    --mdc-slider-label-container-color: var(--iqser-accent);
-    --mat-mdc-slider-value-indicator-opacity: 1;

    &.mdc-slider--disabled {
        opacity: 1;
    }
 }
-
-.mdc-slider__value-indicator-text {
-    white-space: nowrap;
-}
--- a/src/assets/styles/common-styles.scss
+++ b/src/assets/styles/common-styles.scss
@ -1,5 +1,3 @@
-@use 'ngx-toastr/toastr';
-
@use 'common-utilities';
@use 'common-inputs';
@use 'common-buttons';
@ -21,7 +19,6 @@
@use 'common-loading';
@use 'common-media-queries';
@use 'common-progress-bar';
-@use 'common-progress-spinner';
@use 'common-select';
@use 'common-slider';
@use 'common-tabs';
@ -30,7 +27,6 @@
@use 'common-toggle-button';
@use 'common-tooltips';
@use 'common-file-drop';
-@use 'common-file-upload';
@use 'common-side-nav';
@use 'common-color-picker';
@use 'common-skeleton';
--- a/src/assets/styles/common-tables.scss
+++ b/src/assets/styles/common-tables.scss
@ -8,7 +8,10 @@
    flex: 1;
    align-items: center;
    justify-content: flex-end;
-    gap: 10px;
+
+    > *:not(:last-child) {
+        margin-right: 10px;
+    }
 }

 .header-item {
@ -20,7 +23,6 @@
    border-bottom: 1px solid var(--iqser-separator);
    box-sizing: border-box;
    padding: 0 24px;
-    gap: 10px;

    .header-title {
        display: flex;
@ -32,10 +34,17 @@
        padding: 0 24px 0 10px;
    }

+    > *:not(:last-child) {
+        margin-right: 10px;
+    }
+
    .actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
-        gap: 16px;
+
+        > *:not(:last-child) {
+            margin-right: 16px;
+        }
    }
 }
--- a/src/assets/styles/common-texts.scss
+++ b/src/assets/styles/common-texts.scss
@ -78,12 +78,6 @@ pre {
    line-height: 24px;
 }

-.heading-md {
-    font-size: 18px;
-    font-weight: 600;
-    line-height: 22px;
-}
-
 .heading {
    font-size: 16px;
    line-height: 20px;
@ -149,10 +143,6 @@ pre {
    @include mixins.line-clamp(4);
 }

-.clamp-5 {
-    @include mixins.line-clamp(5);
-}
-
 .no-wrap {
    white-space: nowrap;
 }
--- a/src/assets/styles/common-toasts.scss
+++ b/src/assets/styles/common-toasts.scss
@ -84,11 +84,11 @@ $toast-width: 400px;
 }

 .toast-success {
-    background-color: #5ce594;
+    background-color: var(--iqser-green-2);
 }

 .toast-error {
-    background-color: #dd4d50;
+    background-color: var(--iqser-red-1);
    color: var(--iqser-white);
 }

--- a/src/assets/styles/common-toggle.scss
+++ b/src/assets/styles/common-toggle.scss
@ -1,57 +1,55 @@
 .mat-mdc-slide-toggle {
-    .mdc-switch {
-        --mdc-switch-handle-elevation: none;
-        --mdc-switch-handle-elevation-shadow: none;
+    --mdc-switch-handle-elevation: none;

-        --mdc-switch-selected-track-color: var(--iqser-primary);
-        --mdc-switch-selected-hover-track-color: var(--iqser-primary);
-        --mdc-switch-selected-pressed-track-color: var(--iqser-primary);
-        --mdc-switch-selected-focus-track-color: var(--iqser-primary);
-        --mdc-switch-disabled-selected-track-color: var(--iqser-primary);
+    --mdc-switch-selected-track-color: var(--iqser-primary);
+    --mdc-switch-selected-hover-track-color: var(--iqser-primary);
+    --mdc-switch-selected-pressed-track-color: var(--iqser-primary);
+    --mdc-switch-selected-focus-track-color: var(--iqser-primary);
+    --mdc-switch-disabled-selected-track-color: var(--iqser-primary);

-        --mdc-switch-unselected-track-color: var(--iqser-toggle-bg);
-        --mdc-switch-unselected-hover-track-color: var(--iqser-toggle-bg);
-        --mdc-switch-unselected-pressed-track-color: var(--iqser-toggle-bg);
-        --mdc-switch-unselected-focus-track-color: var(--iqser-toggle-bg);
-        --mdc-switch-disabled-unselected-track-color: var(--iqser-toggle-bg);
+    --mdc-switch-unselected-track-color: var(--iqser-toggle-bg);
+    --mdc-switch-unselected-hover-track-color: var(--iqser-toggle-bg);
+    --mdc-switch-unselected-pressed-track-color: var(--iqser-toggle-bg);
+    --mdc-switch-unselected-focus-track-color: var(--iqser-toggle-bg);
+    --mdc-switch-disabled-unselected-track-color: var(--iqser-toggle-bg);

-        --mdc-switch-selected-handle-color: var(--iqser-background);
-        --mdc-switch-selected-pressed-handle-color: var(--iqser-background);
-        --mdc-switch-selected-hover-handle-color: var(--iqser-background);
-        --mdc-switch-selected-focus-handle-color: var(--iqser-background);
-        --mdc-switch-disabled-selected-handle-color: var(--iqser-background);
+    --mdc-switch-selected-handle-color: var(--iqser-background);
+    --mdc-switch-selected-pressed-handle-color: var(--iqser-background);
+    --mdc-switch-selected-hover-handle-color: var(--iqser-background);
+    --mdc-switch-selected-focus-handle-color: var(--iqser-background);
+    --mdc-switch-disabled-selected-handle-color: var(--iqser-background);

-        --mdc-switch-unselected-handle-color: var(--iqser-alt-background);
-        --mdc-switch-unselected-pressed-handle-color: var(--iqser-alt-background);
-        --mdc-switch-unselected-hover-handle-color: var(--iqser-alt-background);
-        --mdc-switch-unselected-focus-handle-color: var(--iqser-alt-background);
-        --mdc-switch-disabled-unselected-handle-color: var(--iqser-alt-background);
+    --mdc-switch-unselected-handle-color: var(--iqser-alt-background);
+    --mdc-switch-unselected-pressed-handle-color: var(--iqser-alt-background);
+    --mdc-switch-unselected-hover-handle-color: var(--iqser-alt-background);
+    --mdc-switch-unselected-focus-handle-color: var(--iqser-alt-background);
+    --mdc-switch-disabled-unselected-handle-color: var(--iqser-alt-background);

-        --mdc-switch-disabled-track-opacity: 0.38;
+    --mdc-switch-disabled-track-opacity: 0.38;

-        --mdc-switch-track-width: 30px;
-        --mdc-switch-track-height: 16px;
-        --mdc-switch-track-shape: 8px;
-        --mat-switch-with-icon-handle-size: 12px;
-        --mdc-switch-handle-shape: 6px;
-
-        --mat-switch-unselected-with-icon-handle-horizontal-margin: 0 2px;
-        --mat-switch-unselected-pressed-handle-horizontal-margin: 0 2px;
-
-        --mat-switch-selected-with-icon-handle-horizontal-margin: 0 6px;
-        --mat-switch-selected-pressed-handle-horizontal-margin: 0 6px;
-        --mat-switch-selected-handle-horizontal-margin: 0 6px;
-
-        --mat-switch-unselected-handle-size: 12px;
-        --mat-switch-selected-handle-size: 12px;
-        --mat-switch-pressed-handle-size: 12px;
-    }
+    --mdc-switch-track-width: 30px;
+    --mdc-switch-track-height: 16px;
+    --mdc-switch-track-shape: 8px;
+    --mdc-switch-handle-width: 12px;
+    --mdc-switch-handle-height: 12px;
+    --mdc-switch-handle-shape: 6px;

    .mdc-form-field > label {
        margin-left: 8px;
        padding-left: 0;
    }

+    .mdc-switch__handle {
+        right: 8px;
+        left: unset;
+    }
+
+    .mdc-switch--unselected {
+        .mdc-switch__handle {
+            right: 4px;
+        }
+    }
+
    .mdc-switch__icons,
    .mdc-switch__ripple {
        display: none;
--- a/src/assets/styles/common-utilities.scss
+++ b/src/assets/styles/common-utilities.scss
@ -1,5 +1,3 @@
-@use 'sass:string';
-@use 'sass:list';
 /* Margins, paddings */

 $start: 0;
@ -9,19 +7,19 @@ $values: '';
 $sides: (top, bottom, left, right);

@for $i from $start + 1 through $end {
-    $values: list.append($values, $i, comma);
-    $values: list.set-nth($values, 1, $start);
+    $values: append($values, $i, comma);
+    $values: set-nth($values, 1, $start);
 }

 // TODO: Check if !important can be avoided

@each $space in $values {
    @each $side in $sides {
-        .m#{string.slice($side, 0, 1)}-#{$space} {
+        .m#{str-slice($side, 0, 1)}-#{$space} {
            margin-#{$side}: #{$space}px !important;
        }

-        .p#{string.slice($side, 0, 1)}-#{$space} {
+        .p#{str-slice($side, 0, 1)}-#{$space} {
            padding-#{$side}: #{$space}px !important;
        }
    }
--- a/src/index.ts
+++ b/src/index.ts
@ -3,11 +3,13 @@ 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';
--- a/src/lib/buttons/chevron-button/chevron-button.component.html
+++ b/src/lib/buttons/chevron-button/chevron-button.component.html
@ -1,8 +1,6 @@
-<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>

-@if (showDot()) {
-    <div class="dot"></div>
-}
+<div *ngIf="showDot" class="dot"></div>
--- a/src/lib/buttons/chevron-button/chevron-button.component.scss
+++ b/src/lib/buttons/chevron-button/chevron-button.component.scss
@ -1,5 +1,5 @@
 button {
-    --mat-text-button-with-icon-horizontal-padding: 10px 0 14px;
+    padding: 0 10px 0 14px;

    mat-icon {
        width: 14px;
--- a/src/lib/buttons/chevron-button/chevron-button.component.ts
+++ b/src/lib/buttons/chevron-button/chevron-button.component.ts
@ -1,19 +1,21 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { randomString } from '../../utils';
+import { NgIf } from '@angular/common';
 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,
-    imports: [MatIconModule, MatButtonModule],
+    standalone: true,
+    imports: [NgIf, MatIconModule, MatButtonModule],
 })
 export class ChevronButtonComponent {
-    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`);
+    @Input({ required: true }) label!: string;
+    @Input() showDot = false;
+    @Input() primary = false;
+    @Input() disabled = false;
+    @Input() buttonId = `${randomString()}-chevron-button`;
 }
--- a/src/lib/buttons/chevron-button/index.ts
+++ b/src/lib/buttons/chevron-button/index.ts
@ -1 +0,0 @@
-export * from './chevron-button.component';
--- a/src/lib/buttons/circle-button/circle-button.component.html
+++ b/src/lib/buttons/circle-button/circle-button.component.html
@ -1,25 +1,20 @@
-<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.help]="type === _circleButtonTypes.help"
+        [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>

-    @if (showDot()) {
-        <div class="dot"></div>
-    }
-
-    @if (dropdownButton()) {
-        <div [class.disabled]="disabled()" class="arrow-down"></div>
-    }
+    <div *ngIf="showDot" class="dot"></div>
 </div>
--- a/src/lib/buttons/circle-button/circle-button.component.scss
+++ b/src/lib/buttons/circle-button/circle-button.component.scss
@ -1,16 +1,4 @@
 :host > div {
    width: var(--circle-button-size);
    height: var(--circle-button-size);
-
-    .arrow-down {
-        border: 5px solid transparent;
-        border-top-color: black;
-        position: fixed;
-        margin-left: 12px;
-        margin-top: -8px;
-
-        &.disabled {
-            border-top-color: var(--iqser-grey-3);
-        }
-    }
 }
--- a/src/lib/buttons/circle-button/circle-button.component.ts
+++ b/src/lib/buttons/circle-button/circle-button.component.ts
@ -1,62 +1,50 @@
-import {
-    booleanAttribute,
-    ChangeDetectionStrategy,
-    Component,
-    effect,
-    ElementRef,
-    EventEmitter,
-    inject,
-    input,
-    numberAttribute,
-    Output,
-    viewChild,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
+import { CircleButtonType, CircleButtonTypes } from '../types/circle-button.type';
+import { IqserTooltipPosition, IqserTooltipPositions, randomString } from '../../utils';
+import { NgIf } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
-import { RouterLink } from '@angular/router';
 import { StopPropagationDirective } from '../../directives';
-import { IqserTooltipPosition, IqserTooltipPositions, randomString } from '../../utils';
-import { CircleButtonType, CircleButtonTypes } from '../types/circle-button.type';
+import { RouterLink } from '@angular/router';

@Component({
-    selector: 'iqser-circle-button',
+    selector: 'iqser-circle-button [icon]',
    templateUrl: './circle-button.component.html',
    styleUrls: ['./circle-button.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [MatTooltipModule, MatIconModule, MatButtonModule, StopPropagationDirective],
+    standalone: true,
+    imports: [MatTooltipModule, MatIconModule, NgIf, MatButtonModule, StopPropagationDirective],
 })
-export class CircleButtonComponent {
-    readonly #elementRef = inject(ElementRef<HTMLElement>);
-    protected readonly _matTooltip = viewChild.required(MatTooltip);
+export class CircleButtonComponent implements OnInit {
+    @Input() buttonId = `${randomString()}-circle-button`;
+    @Input() 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() helpModeButton = false;
+    @Input() removeTooltip = false;
+    @Input() isSubmit = false;
+    @Input() size = 34;
+    @Input() iconSize = 14;
+    @Output() readonly action = new EventEmitter<MouseEvent>();
    protected readonly _circleButtonTypes = CircleButtonTypes;
    protected readonly _hasRouterLink = !!inject(RouterLink, { optional: true, host: true });
-    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>();
+    @ViewChild(MatTooltip) private readonly _matTooltip!: MatTooltip;
+    readonly #elementRef = inject(ElementRef<HTMLElement>);

-    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`);
-        });
+    ngOnInit(): void {
+        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));
--- a/src/lib/buttons/icon-button/icon-button.component.html
+++ b/src/lib/buttons/icon-button/icon-button.component.html
@ -1,19 +1,14 @@
 <button
-    (click)="!disabled() && emitAction($event)"
-    [disabled]="disabled()"
-    [id]="buttonId()"
+    (click)="!disabled && action.emit($event)"
+    [disabled]="disabled"
+    [id]="buttonId"
    [iqserStopPropagation]="action.observed && !_hasRouterLink"
-    [ngClass]="_classes()"
-    [type]="submit() ? 'submit' : 'button'"
+    [ngClass]="classes"
+    [type]="submit ? 'submit' : 'button'"
    mat-button
 >
-    @if (icon(); as icon) {
-        <mat-icon [svgIcon]="icon"></mat-icon>
-    }
-
-    <span>{{ label() }}</span>
+    <mat-icon *ngIf="icon" [svgIcon]="icon"></mat-icon>
+    <span>{{ label }}</span>
 </button>

-@if (showDot()) {
-    <div class="dot"></div>
-}
+<div *ngIf="showDot" class="dot"></div>
--- a/src/lib/buttons/icon-button/icon-button.component.ts
+++ b/src/lib/buttons/icon-button/icon-button.component.ts
@ -1,42 +1,37 @@
-import { NgClass } from '@angular/common';
-import { booleanAttribute, ChangeDetectionStrategy, Component, computed, EventEmitter, inject, input, Output } from '@angular/core';
+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 { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { RouterLink } from '@angular/router';
 import { StopPropagationDirective } from '../../directives';
-import { randomString } from '../../utils';
-import { IconButtonType, IconButtonTypes } from '../types/icon-button.type';
+import { RouterLink } from '@angular/router';

@Component({
    selector: 'iqser-icon-button',
    templateUrl: './icon-button.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [NgClass, MatButtonModule, MatIconModule, StopPropagationDirective],
+    standalone: true,
+    imports: [NgClass, MatButtonModule, NgIf, MatIconModule, StopPropagationDirective],
 })
 export class IconButtonComponent {
-    protected readonly _hasRouterLink = !!inject(RouterLink, { optional: true, host: true });
-    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(),
-        };
-    });
+    @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 });

-    emitAction($event: MouseEvent) {
-        const activeElement = document.activeElement as HTMLElement;
-        if (activeElement.tagName?.toLowerCase() === 'button') {
-            this.action.emit($event);
-        }
+    get classes(): Record<string, boolean> {
+        return {
+            overlay: this.showDot,
+            [this.type]: true,
+            'has-icon': !!this.icon,
+            active: this.active,
+        };
    }
 }
--- a/src/lib/buttons/index.ts
+++ b/src/lib/buttons/index.ts
@ -3,3 +3,4 @@ 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';
--- a/src/lib/buttons/types/circle-button.type.ts
+++ b/src/lib/buttons/types/circle-button.type.ts
@ -3,6 +3,7 @@ export const CircleButtonTypes = {
    primary: 'primary',
    warn: 'warn',
    dark: 'dark',
+    help: 'help',
 } as const;

 export type CircleButtonType = keyof typeof CircleButtonTypes;
--- a/src/lib/caching/dynamic-cache.ts
+++ b/src/lib/caching/dynamic-cache.ts
@ -1,4 +1,4 @@
-import { List } from '../utils/types/iqser-types';
+import { List } from '../utils';

 export interface DynamicCache {
    readonly urls: List;
--- a/src/lib/dialog/base-dialog.component.ts
+++ b/src/lib/dialog/base-dialog.component.ts
@ -1,42 +1,36 @@
-import { AfterViewInit, Directive, HostListener, inject, OnDestroy, signal } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { AfterViewInit, Directive, HostListener, inject, OnDestroy } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { debounceTime, firstValueFrom, fromEvent, merge, of, Subscription } from 'rxjs';
-import { tap } from 'rxjs/operators';
-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 { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { hasFormChanged, IqserEventTarget } from '../utils';
+import { ConfirmOptions } from '.';
 import { ConfirmationDialogService } from './confirmation-dialog.service';
-import { ConfirmOptions } from './confirmation-dialog/confirmation-dialog.component';
+import { debounceTime, firstValueFrom, fromEvent, merge, of, Subscription } from 'rxjs';
+import { LoadingService } from '../loading';
+import { Toaster } from '../services';
+import { IconButtonTypes } from '../buttons';
+import { tap } from 'rxjs/operators';

-const DIALOG_CONTAINER = 'mat-dialog-container';
-const TEXT_INPUT = 'text';
+const TARGET_NODE = 'mat-dialog-container';

 export interface SaveOptions {
    closeAfterSave?: boolean;
-    nextAction?: boolean;
    addMembers?: boolean;
 }

@Directive()
 export abstract class BaseDialogComponent implements AfterViewInit, OnDestroy {
-    readonly #confirmationDialogService = inject(ConfirmationDialogService);
-    readonly #dialog = inject(MatDialog);
-    protected readonly _hasErrors = signal(true);
-    protected readonly _formBuilder = inject(UntypedFormBuilder);
-    protected readonly _loadingService = inject(LoadingService);
-    protected readonly _toaster = inject(Toaster);
-    protected readonly _subscriptions = new Subscription();
    readonly iconButtonTypes = IconButtonTypes;
    form?: UntypedFormGroup;
    initialFormValue!: Record<string, string>;
+    protected readonly _formBuilder = inject(UntypedFormBuilder);
+    protected readonly _loadingService = inject(LoadingService);
+    protected readonly _toaster = inject(Toaster);
+    protected readonly _subscriptions: Subscription = new Subscription();
+    readonly #confirmationDialogService = inject(ConfirmationDialogService);
+    readonly #dialog = inject(MatDialog);
+    #hasErrors = false;

-    protected constructor(
-        protected readonly _dialogRef: MatDialogRef<BaseDialogComponent>,
-        private readonly _isInEditMode = false,
-    ) {}
+    protected constructor(protected readonly _dialogRef: MatDialogRef<BaseDialogComponent>, private readonly _isInEditMode = false) {}

    get valid(): boolean {
        return !this.form || this.form.valid;
@ -47,19 +41,16 @@ 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]);
-            }),
+            tap(() => (this.#hasErrors = !!document.getElementsByClassName('ng-invalid')[0])),
        );
        this._subscriptions.add(events$.subscribe());
    }
@ -88,18 +79,9 @@ export abstract class BaseDialogComponent implements AfterViewInit, OnDestroy {

    @HostListener('window:keydown.Enter', ['$event'])
    onEnter(event: KeyboardEvent): void {
-        const target = event.target as IqserEventTarget;
-        const isDialogSelected = target.localName?.trim()?.toLowerCase() === DIALOG_CONTAINER;
-        const isTextInputSelected = target.type?.trim()?.toLowerCase() === TEXT_INPUT;
-
-        if (
-            this.valid &&
-            !this.disabled &&
-            (this.changed || !this._isInEditMode) &&
-            this.#dialog.openDialogs.length === 1 &&
-            (isDialogSelected || isTextInputSelected)
-        ) {
-            event?.stopImmediatePropagation();
+        event?.stopImmediatePropagation();
+        const node = (event.target as IqserEventTarget).localName?.trim()?.toLowerCase();
+        if (this.valid && !this.disabled && this.changed && node === TARGET_NODE) {
            this.save();
        }
    }
--- a/src/lib/dialog/confirmation-dialog.service.ts
+++ b/src/lib/dialog/confirmation-dialog.service.ts
@ -1,13 +1,7 @@
 import { inject, Injectable } from '@angular/core';
-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';
+import { ConfirmationDialogComponent, ConfirmOption, defaultDialogConfig, IConfirmationDialogData, TitleColors } from '.';
+import { MatDialog } from '@angular/material/dialog';

@Injectable({
    providedIn: 'root',
--- a/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.html
+++ b/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.html
@ -1,83 +1,56 @@
 <section class="dialog">
    <div [class.warn]="isDeleteAction" [innerHTML]="config.title" class="dialog-header heading-l"></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>
-        @if (config.details) {
-            <p [innerHTML]="config.details" class="mt-0"></p>
-        }
-
-        @if (config.requireInput) {
-            <div class="iqser-input-group required w-300 mt-24">
-                <label>{{ inputLabel }}</label>
-                <input [(ngModel)]="inputValue" id="confirmation-input" />
-            </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 *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>

-    <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>
-        }
+    <div class="dialog-content">
+        <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.alternativeConfirmationText) {
-            <iqser-icon-button
-                (action)="confirm(confirmOptions.CONFIRM_WITH_ACTION)"
-                [disabled]="config.requireInput && confirmationDoesNotMatch()"
-                [label]="config.alternativeConfirmationText"
-                [type]="iconButtonTypes.primary"
-            ></iqser-icon-button>
-        }
+        <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.discardChangesText) {
-            <div (click)="confirm(confirmOptions.DISCARD_CHANGES)" class="all-caps-label cancel">
-                {{ config.discardChangesText }}
-            </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>
+    </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 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>
+
+        <iqser-icon-button
+            (action)="confirm(confirmOptions.SECOND_CONFIRM)"
+            *ngIf="config.alternativeConfirmationText"
+            [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>
+
+        <div (click)="deny()" *ngIf="!config.discardChangesText" class="all-caps-label cancel">
+            {{ config.denyText }}
+        </div>
    </div>

    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
--- a/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.scss
+++ b/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.scss
@ -6,12 +6,3 @@
    display: flex;
    flex-direction: column;
 }
-
-.reverse {
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-}
-
-.no-uppercase {
-    text-transform: unset;
-}
--- a/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.ts
+++ b/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.ts
@ -1,23 +1,12 @@
-import { NgTemplateOutlet } from '@angular/common';
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    Component,
-    HostListener,
-    inject,
-    TemplateRef,
-    Type,
-    viewChild,
-    ViewContainerRef,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, inject, TemplateRef } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { CircleButtonComponent, IconButtonComponent, IconButtonTypes } from '../../buttons';
+import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
 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, IconButtonTypes } from '../../buttons';
-import { IconButtonComponent } from '../../buttons';
 import { ValuesOf } from '../../utils';

 export const TitleColors = {
@ -29,7 +18,7 @@ export type TitleColor = ValuesOf<typeof TitleColors>;

 export const ConfirmOptions = {
    CONFIRM: 1,
-    CONFIRM_WITH_ACTION: 2,
+    SECOND_CONFIRM: 2,
    DISCARD_CHANGES: 3,
 } as const;

@ -57,9 +46,6 @@ 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>;
@ -77,9 +63,6 @@ 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,
    };
 }

@ -87,9 +70,12 @@ 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,
@ -98,14 +84,13 @@ function getConfig(options?: IConfirmationDialogData): InternalConfirmationDialo
        MatDialogModule,
    ],
 })
-export class ConfirmationDialogComponent implements AfterViewInit {
+export class ConfirmationDialogComponent {
    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>,
@ -125,24 +110,18 @@ export class ConfirmationDialogComponent implements AfterViewInit {

    get confirmOption(): ConfirmOption {
        if (!this.config.checkboxesValidation && this.config.checkboxes[0]?.value) {
-            return ConfirmOptions.CONFIRM_WITH_ACTION;
+            return ConfirmOptions.SECOND_CONFIRM;
        }
        return 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();
+    @HostListener('window:keyup.enter')
+    onKeyupEnter(): void {
+        if (this.config.requireInput && !this.confirmationDoesNotMatch()) {
+            this.confirm(ConfirmOptions.CONFIRM);
        }
    }

-    ngAfterViewInit() {
-        this.#initializeDetailsComponent();
-    }
-
    confirmationDoesNotMatch(): boolean {
        return this.inputValue.toLowerCase() !== this.config.confirmationText.toLowerCase();
    }
@ -176,14 +155,4 @@ export class ConfirmationDialogComponent implements AfterViewInit {
            Object.assign(obj, { [key]: value });
        });
    }
-
-    #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;
-            }
-        }
-    }
 }
--- a/src/lib/dialog/dialog.service.ts
+++ b/src/lib/dialog/dialog.service.ts
@ -1,8 +1,8 @@
-import { ComponentType } from '@angular/cdk/portal';
-import { Injectable, Type } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
-import { from } from 'rxjs';
+import { ComponentType } from '@angular/cdk/portal';
 import { mergeMap } from 'rxjs/operators';
+import { from } from 'rxjs';

 export const largeDialogConfig: MatDialogConfig = {
    width: '90vw',
@ -64,34 +64,4 @@ 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;
-    }
 }
--- a/src/lib/dialog/iqser-dialog-component.directive.ts
+++ b/src/lib/dialog/iqser-dialog-component.directive.ts
@ -1,37 +1,34 @@
 import { Directive, HostListener, inject } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { IconButtonTypes } from '../buttons';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { hasFormChanged, IqserEventTarget } from '../utils';
+import { FormGroup } from '@angular/forms';

-const DIALOG_CONTAINER = 'mat-dialog-container';
 const DATA_TYPE_SYMBOL = Symbol.for('DATA_TYPE');
 const RETURN_TYPE_SYMBOL = Symbol.for('RETURN_TYPE');

 export type DATA_TYPE = typeof DATA_TYPE_SYMBOL;
 export type RETURN_TYPE = typeof RETURN_TYPE_SYMBOL;

+const TARGET_NODE = 'mat-dialog-container';
+
@Directive()
-export abstract class IqserDialogComponent<ComponentType, DataType = null, ReturnType = void> {
+export abstract class IqserDialogComponent<ComponentType, DataType, ReturnType> {
    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) {
+    constructor() {
        this.dialogRef
            .backdropClick()
            .pipe(takeUntilDestroyed())
            // eslint-disable-next-line rxjs/no-ignored-subscription
-            .subscribe(() => this.dialogRef.close());
+            .subscribe(() => this.close());
    }

    get valid(): boolean {
@ -39,7 +36,7 @@ export abstract class IqserDialogComponent<ComponentType, DataType = null, Retur
    }

    get changed(): boolean {
-        return !this.form || hasFormChanged(this.form, this.initialFormValue, this.ignoredKeys);
+        return !this.form || hasFormChanged(this.form, this.initialFormValue);
    }

    get disabled(): boolean {
@ -49,25 +46,21 @@ export abstract class IqserDialogComponent<ComponentType, DataType = null, Retur
    @HostListener('window:keydown.Escape', ['$event'])
    onEscape(): void {
        if (this.dialog.openDialogs.length === 1) {
-            this.dialogRef.close();
+            this.close();
        }
    }

    @HostListener('window:keydown.Enter', ['$event'])
    onEnter(event: KeyboardEvent): void {
        event?.stopImmediatePropagation();
-        if (this.onEnterValidator(event)) {
+        const node = (event.target as IqserEventTarget).localName?.trim()?.toLowerCase();
+        if (this.onEnterValidator(event) && node === TARGET_NODE) {
            this.close();
        }
    }

    onEnterValidator(event: KeyboardEvent) {
-        const targetElement = (event.target as IqserEventTarget).localName?.trim()?.toLowerCase();
-        const canClose = targetElement === DIALOG_CONTAINER && this.valid;
-        if (this._editMode) {
-            return canClose && this.changed;
-        }
-        return canClose;
+        return this.valid && !this.disabled && this.changed;
    }

    close(dialogResult?: ReturnType) {
--- a/src/lib/dialog/iqser-dialog.service.ts
+++ b/src/lib/dialog/iqser-dialog.service.ts
@ -1,9 +1,9 @@
-import { ComponentType } from '@angular/cdk/portal';
 import { inject, Injectable } from '@angular/core';
 import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { ComponentType } from '@angular/cdk/portal';
 import { firstValueFrom } from 'rxjs';
-import { defaultDialogConfig, largeDialogConfig } from './dialog.service';
 import { DATA_TYPE, IqserDialogComponent, RETURN_TYPE } from './iqser-dialog-component.directive';
+import { defaultDialogConfig, largeDialogConfig } from './dialog.service';

@Injectable({
    providedIn: 'root',
@ -12,33 +12,33 @@ export class IqserDialog {
    protected readonly _dialog = inject(MatDialog);

    open<
-        Component extends IqserDialogComponent<Component, Component[DATA_TYPE], Component[RETURN_TYPE]>,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        Data extends Component[DATA_TYPE] = Component[DATA_TYPE],
-        Return extends Component[RETURN_TYPE] = Component[RETURN_TYPE],
-    >(dialog: ComponentType<Component>, config?: MatDialogConfig<Component[DATA_TYPE]>) {
-        const ref = this._dialog.open<Component, Component[DATA_TYPE], Return>(dialog, config);
+        Component extends IqserDialogComponent<Component, unknown, unknown>,
+        Data extends Component[DATA_TYPE],
+        Return extends Component[RETURN_TYPE],
+    >(dialog: ComponentType<Component>, config?: MatDialogConfig<Data>) {
+        const ref = this._dialog.open<Component, Data, Return>(dialog, config);
        return {
            ...ref,
            result() {
+                console.log('result');
                return firstValueFrom(ref.afterClosed());
            },
        } as MatDialogRef<Component, Return> & { result(): Promise<Return> };
    }

    openLarge<
-        Component extends IqserDialogComponent<Component, Component[DATA_TYPE], Component[RETURN_TYPE]>,
-        Data extends Component[DATA_TYPE] = Component[DATA_TYPE],
-        Return extends Component[RETURN_TYPE] = Component[RETURN_TYPE],
-    >(dialog: ComponentType<Component>, config?: MatDialogConfig<Component[DATA_TYPE]>) {
+        Component extends IqserDialogComponent<Component, unknown, unknown>,
+        Data extends Component[DATA_TYPE],
+        Return extends Component[RETURN_TYPE],
+    >(dialog: ComponentType<Component>, config?: MatDialogConfig<Data>) {
        return this.open<Component, Data, Return>(dialog, { ...largeDialogConfig, ...config });
    }

    openDefault<
-        Component extends IqserDialogComponent<Component, Component[DATA_TYPE], Component[RETURN_TYPE]>,
-        Data extends Component[DATA_TYPE] = Component[DATA_TYPE],
-        Return extends Component[RETURN_TYPE] = Component[RETURN_TYPE],
-    >(dialog: ComponentType<Component>, config?: MatDialogConfig<Component[DATA_TYPE]>) {
+        Component extends IqserDialogComponent<Component, unknown, unknown>,
+        Data extends Component[DATA_TYPE],
+        Return extends Component[RETURN_TYPE],
+    >(dialog: ComponentType<Component>, config?: MatDialogConfig<Data>) {
        return this.open<Component, Data, Return>(dialog, { ...defaultDialogConfig, ...config });
    }
 }
--- a/src/lib/directives/disable-stop-propagation.directive.ts
+++ b/src/lib/directives/disable-stop-propagation.directive.ts
@ -1,8 +1,9 @@
-import { booleanAttribute, Directive, input } from '@angular/core';
+import { booleanAttribute, Directive, Input } from '@angular/core';

@Directive({
    selector: '[iqserDisableStopPropagation]',
+    standalone: true,
 })
 export class DisableStopPropagationDirective {
-    readonly iqserDisableStopPropagation = input(true, { transform: booleanAttribute });
+    @Input({ transform: booleanAttribute }) iqserDisableStopPropagation = true;
 }
--- a/src/lib/directives/has-scrollbar.directive.ts
+++ b/src/lib/directives/has-scrollbar.directive.ts
@ -1,24 +1,15 @@
-import { Directive, ElementRef, OnDestroy, OnInit, signal } from '@angular/core';
+import { ChangeDetectorRef, Directive, ElementRef, HostBinding, HostListener, OnChanges, OnInit } from '@angular/core';

@Directive({
    selector: '[iqserHasScrollbar]',
-    host: {
-        '[class]': '_class()',
-    },
+    standalone: true,
 })
-export class HasScrollbarDirective implements OnInit, OnDestroy {
-    private readonly _resizeObserver: ResizeObserver;
-    protected readonly _class = signal('');
+export class HasScrollbarDirective implements OnInit, OnChanges {
+    @HostBinding('class') class = '';

-    constructor(protected readonly _elementRef: ElementRef) {
-        this._resizeObserver = new ResizeObserver(() => {
-            this.process();
-        });
+    constructor(protected readonly _elementRef: ElementRef, protected readonly _changeDetector: ChangeDetectorRef) {}

-        this._resizeObserver.observe(this._elementRef.nativeElement);
-    }
-
-    private get _hasScrollbar() {
+    get hasScrollbar() {
        const element = this._elementRef?.nativeElement as HTMLElement;
        return element.clientHeight < element.scrollHeight;
    }
@ -27,12 +18,16 @@ export class HasScrollbarDirective implements OnInit, OnDestroy {
        setTimeout(() => this.process(), 0);
    }

+    @HostListener('window:resize')
    process() {
-        const newClass = this._hasScrollbar ? 'has-scrollbar' : '';
-        this._class.set(newClass);
+        const newClass = this.hasScrollbar ? 'has-scrollbar' : '';
+        if (this.class !== newClass) {
+            this.class = newClass;
+            this._changeDetector.markForCheck();
+        }
    }

-    ngOnDestroy() {
-        this._resizeObserver.unobserve(this._elementRef.nativeElement);
+    ngOnChanges() {
+        this.process();
    }
 }
--- a/src/lib/directives/hidden-action.directive.ts
+++ b/src/lib/directives/hidden-action.directive.ts
@ -2,6 +2,7 @@ import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/c

@Directive({
    selector: '[iqserHiddenAction]',
+    standalone: true,
 })
 export class HiddenActionDirective {
    @Input() requiredClicks = 4;
--- a/src/lib/directives/prevent-default.directive.ts
+++ b/src/lib/directives/prevent-default.directive.ts
@ -3,6 +3,7 @@ import { NGXLogger } from 'ngx-logger';

@Directive({
    selector: '[iqserPreventDefault]',
+    standalone: true,
 })
 export class PreventDefaultDirective {
    readonly #logger = inject(NGXLogger);
--- a/src/lib/directives/stop-propagation.directive.ts
+++ b/src/lib/directives/stop-propagation.directive.ts
@ -1,9 +1,10 @@
 import { booleanAttribute, Directive, HostListener, inject, Input } from '@angular/core';
-import { NGXLogger } from 'ngx-logger';
 import { DisableStopPropagationDirective } from './disable-stop-propagation.directive';
+import { NGXLogger } from 'ngx-logger';

@Directive({
    selector: '[iqserStopPropagation]',
+    standalone: true,
 })
 export class StopPropagationDirective {
    readonly #disableStopPropagation = inject(DisableStopPropagationDirective, { optional: true });
@ -12,14 +13,13 @@ 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;
        }

        if (this.iqserStopPropagation) {
            this.#logger.info('[CLICK] iqserStopPropagation');
-            $event.preventDefault();
            $event.stopPropagation();
        }
    }
--- a/src/lib/directives/sync-width.directive.ts
+++ b/src/lib/directives/sync-width.directive.ts
@ -2,6 +2,7 @@ import { Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/

@Directive({
    selector: '[iqserSyncWidth]',
+    standalone: true,
 })
 export class SyncWidthDirective implements OnDestroy {
    @Input() iqserSyncWidth!: string;
--- a/src/lib/empty-state/empty-state.component.html
+++ b/src/lib/empty-state/empty-state.component.html
@ -1,22 +1,26 @@
-<div [ngStyle]="styles()" class="empty-state">
-    @if (icon(); as icon) {
-        <mat-icon [svgIcon]="icon"></mat-icon>
-    }
+<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 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>

-    @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>
-    }
+    <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>
 </div>
--- a/src/lib/empty-state/empty-state.component.ts
+++ b/src/lib/empty-state/empty-state.component.ts
@ -1,42 +1,33 @@
-import { NgStyle } from '@angular/common';
-import {
-    booleanAttribute,
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    EventEmitter,
-    input,
-    numberAttribute,
-    Output,
-} from '@angular/core';
+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 { 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';
+import { IqserHelpModeModule } from '../help-mode';

@Component({
-    selector: 'iqser-empty-state',
+    selector: 'iqser-empty-state [text]',
    templateUrl: './empty-state.component.html',
    styleUrls: ['./empty-state.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [NgStyle, MatIconModule, IconButtonComponent],
+    standalone: true,
+    imports: [NgStyle, MatIconModule, NgIf, IconButtonComponent, IqserHelpModeModule],
 })
-export class EmptyStateComponent {
-    protected readonly iconButtonTypes = IconButtonTypes;
+export class EmptyStateComponent implements OnInit {
+    readonly iconButtonTypes = IconButtonTypes;

-    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>();
+    @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;
    @Output() readonly action = new EventEmitter();
+
+    ngOnInit(): void {
+        this.showButton = this.showButton && this.action.observed;
+    }
 }
--- a/src/lib/error/connection-status/connection-status.component.html
+++ b/src/lib/error/connection-status/connection-status.component.html
@ -1,5 +1,8 @@
-@if (connectionStatus(); as status) {
-    <div [@animateOpenClose]="status" [ngClass]="status" class="indicator flex-align-items-center">
-        <span [translate]="connectionStatusTranslations[status]"></span>
-    </div>
-}
+<div
+    *ngIf="errorService.connectionStatus$ | async as status"
+    [@animateOpenClose]="status"
+    [ngClass]="status"
+    class="indicator flex-align-items-center"
+>
+    <span [translate]="connectionStatusTranslations[status]"></span>
+</div>
--- a/src/lib/error/connection-status/connection-status.component.ts
+++ b/src/lib/error/connection-status/connection-status.component.ts
@ -1,7 +1,6 @@
-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 { animate, state, style, transition, trigger } from '@angular/animations';
 import { ErrorService } from '../error.service';

@Component({
@ -17,9 +16,8 @@ import { ErrorService } from '../error.service';
        ]),
    ],
    changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: false,
 })
 export class ConnectionStatusComponent {
-    protected readonly connectionStatusTranslations = connectionStatusTranslations;
-    protected readonly connectionStatus = toSignal(inject(ErrorService).connectionStatus$);
+    connectionStatusTranslations = connectionStatusTranslations;
+    protected readonly errorService = inject(ErrorService);
 }
--- a/src/lib/error/error.service.ts
+++ b/src/lib/error/error.service.ts
@ -48,6 +48,7 @@ export class ErrorService {
    readonly #loadingService = inject(LoadingService);
    readonly #router = inject(Router);
    readonly #displayNotification$ = new Subject<string | undefined>();
+    // eslint-disable-next-line no-undef
    #notificationTimeout: Record<string, NodeJS.Timeout | undefined> = {};
    #displayedNotificationType: string | undefined;

--- a/src/lib/error/full-page-error/full-page-error.component.html
+++ b/src/lib/error/full-page-error/full-page-error.component.html
@ -1,11 +1,13 @@
-@if (errorService.error$ | async; as error) {
+<ng-container *ngIf="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>
-        @if (error.message) {
-            <div class="mt-16 error">{{ error.message }}</div>
-        }
+
+        <div *ngIf="error.message" class="mt-16 error">{{ error.message }}</div>
+
        <iqser-icon-button
            (action)="action(error)"
            [icon]="actionIcon(error)"
@ -14,4 +16,4 @@
            class="mt-20"
        ></iqser-icon-button>
    </section>
-}
+</ng-container>
--- a/src/lib/error/full-page-error/full-page-error.component.ts
+++ b/src/lib/error/full-page-error/full-page-error.component.ts
@ -1,18 +1,18 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 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 {
-    protected readonly iconButtonTypes = IconButtonTypes;
-    protected readonly errorService = inject(ErrorService);
+    readonly iconButtonTypes = IconButtonTypes;
+
+    constructor(readonly errorService: ErrorService) {}

    errorTitle(error: ErrorType): string {
        return error instanceof CustomError ? error.label : _('error.title');
--- a/src/lib/error/server-error-interceptor.ts
+++ b/src/lib/error/server-error-interceptor.ts
@ -8,12 +8,13 @@ import {
    HttpStatusCode,
 } from '@angular/common/http';
 import { Inject, Injectable, Optional } from '@angular/core';
-import { finalize, MonoTypeOperatorFunction, Observable, retry, throwError, timer } from 'rxjs';
+import { MonoTypeOperatorFunction, Observable, retry, throwError, timer } from 'rxjs';
 import { catchError, tap } from 'rxjs/operators';
 import { MAX_RETRIES_ON_SERVER_ERROR, SERVER_ERROR_SKIP_PATHS } from './tokens';
 import { ErrorService } from './error.service';
+import { KeycloakService } from 'keycloak-angular';
+import { IqserConfigService } from '../services';
 import { KeycloakStatusService } from '../tenants';
-import { LoadingService } from '../loading';

 function updateSeconds(seconds: number) {
    if (seconds === 0 || seconds === 1) {
@ -55,7 +56,8 @@ export class ServerErrorInterceptor implements HttpInterceptor {

    constructor(
        private readonly _errorService: ErrorService,
-        private readonly _loadingService: LoadingService,
+        private readonly _keycloakService: KeycloakService,
+        private readonly _configService: IqserConfigService,
        private readonly _keycloakStatusService: KeycloakStatusService,
        @Optional() @Inject(MAX_RETRIES_ON_SERVER_ERROR) private readonly _maxRetries: number,
        @Optional() @Inject(SERVER_ERROR_SKIP_PATHS) private readonly _skippedPaths: string[],
@ -82,11 +84,7 @@ export class ServerErrorInterceptor implements HttpInterceptor {
                    this._urlsWithError.add(req.url);
                }

-                return throwError(() => error).pipe(
-                    finalize(() => {
-                        this._loadingService.stop();
-                    }),
-                );
+                return throwError(() => error);
            }),
            backoffOnServerError(this._maxRetries, this._skippedPaths),
        );
--- a/src/lib/filtering/filter-card/filter-card.component.html
+++ b/src/lib/filtering/filter-card/filter-card.component.html
@ -1,51 +1,42 @@
-@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 *ngIf="primaryFilterGroup() as primaryGroup">
+    <iqser-input-with-action
+        *ngIf="primaryGroup.filterceptionPlaceholder"
+        [(value)]="searchService.searchValue"
+        [id]="'filterception-' + primaryGroup.slug"
+        [placeholder]="primaryGroup.filterceptionPlaceholder"
+        [width]="'full'"
+    ></iqser-input-with-action>

    <ng-container *ngTemplateOutlet="filterHeader"></ng-container>

-    @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>
-    }
+    <div *ngIf="primaryFilters() as filters" class="filter-content">
+        <ng-container
+            *ngFor="let filter of filters"
+            [ngTemplateOutletContext]="{
+                filter: filter,
+                filterGroup: primaryGroup,
+                atLeastOneIsExpandable: atLeastOneFilterIsExpandable()
+            }"
+            [ngTemplateOutlet]="defaultFilterTemplate"
+        ></ng-container>
+    </div>

-    @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 *ngIf="secondaryFilterGroup() as secondaryGroup" class="filter-options">
+        <div class="filter-menu-options">
+            <div class="all-caps-label" translate="filter-menu.filter-options"></div>
        </div>
-    }
-}
+
+        <ng-container
+            *ngFor="let filter of secondaryGroup.filters"
+            [ngTemplateOutletContext]="{
+                filter: filter,
+                filterGroup: secondaryGroup,
+                atLeastOneIsExpandable: atLeastOneSecondaryFilterIsExpandable()
+            }"
+            [ngTemplateOutlet]="defaultFilterTemplate"
+        ></ng-container>
+    </div>
+</ng-container>

 <ng-template #defaultFilterLabelTemplate let-filter="filter">
    {{ filter?.label }}
@ -53,51 +44,30 @@

 <!--TODO: move to separate component-->
 <ng-template #filterHeader>
-    @if (primaryFilterGroup$ | async; as primaryGroup) {
-        <div class="filter-menu-header">
+    <div *ngIf="primaryFilterGroup() as primaryGroup" class="filter-menu-header">
+        <div [translateParams]="{ count: primaryGroup.filters.length }" [translate]="primaryFiltersLabel" class="all-caps-label"></div>
+        <div class="actions">
            <div
-                [translateParams]="{ count: primaryGroup.filters.length }"
-                [translate]="primaryFiltersLabel()"
-                class="all-caps-label"
+                (click)="activatePrimaryFilters()"
+                *ngIf="!primaryGroup.singleSelect"
+                class="all-caps-label primary pointer"
+                iqserStopPropagation
+                translate="actions.all"
            ></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 (click)="deactivateFilters()" class="all-caps-label primary pointer" iqserStopPropagation translate="actions.none"></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>
-        @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="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 (atLeastOneIsExpandable && filter.children?.length === 0) {
-            <div class="arrow-wrapper spacer">&nbsp;</div>
-        }
+        <div *ngIf="atLeastOneIsExpandable && filter.children?.length === 0" class="arrow-wrapper spacer">&nbsp;</div>

        <mat-checkbox
            (click)="filterCheckboxClicked(filter, filterGroup)"
@ -113,28 +83,19 @@
            ></ng-container>
        </mat-checkbox>

-        <ng-container [ngTemplateOutletContext]="{ filter: filter }" [ngTemplateOutlet]="actionsTemplate()"></ng-container>
+        <ng-container [ngTemplateOutletContext]="{ filter: filter }" [ngTemplateOutlet]="actionsTemplate"></ng-container>
    </div>

-    @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 *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>
        </div>
-    }
+    </div>
 </ng-template>
--- a/src/lib/filtering/filter-card/filter-card.component.scss
+++ b/src/lib/filtering/filter-card/filter-card.component.scss
@ -32,7 +32,7 @@
    padding-bottom: 8px;
 }

-.input-wrapper {
+iqser-input-with-action {
    padding: 0 8px 8px 8px;
 }

--- a/src/lib/filtering/filter-card/filter-card.component.ts
+++ b/src/lib/filtering/filter-card/filter-card.component.ts
@ -1,29 +1,40 @@
-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 { ChangeDetectionStrategy, Component, computed, ElementRef, inject, Input, OnInit, TemplateRef } from '@angular/core';
 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 { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/checkbox';
+import { toSignal } from '@angular/core/rxjs-interop';

 const areExpandable = (nestedFilter: INestedFilter) => !!nestedFilter?.children?.length;
-const atLeastOneIsExpandable = pipe(
-    map<IFilterGroup | undefined, boolean>(group => !!group?.filters.some(areExpandable)),
-    shareDistinctLast(),
-);
+const atLeastOneIsExpandable = (group: IFilterGroup | undefined): boolean => !!group?.filters.some(areExpandable);
+
+export interface LocalStorageFilter {
+    id: string;
+    checked: boolean;
+    children?: LocalStorageFilter[] | null;
+}
+
+export interface LocalStorageFilters {
+    primaryFilters: LocalStorageFilter[] | null;
+    secondaryFilters: LocalStorageFilter[] | null;
+}
+
+const setFilters = (fGs: IFilterGroup[], slug: string, checked: boolean, exceptedFilterId?: string) => {
+    const filters = fGs.find(fg => fg.slug === slug)?.filters;
+    filters?.forEach(f => {
+        if (f.id !== exceptedFilterId) {
+            f.checked = checked;
+            f.indeterminate = false;
+            f.children?.forEach(ff => (ff.checked = checked));
+        }
+    });
+};

@Component({
-    selector: 'iqser-filter-card',
+    selector: 'iqser-filter-card [primaryFiltersSlug]',
    templateUrl: './filter-card.component.html',
    styleUrls: ['./filter-card.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
@ -37,69 +48,91 @@ const atLeastOneIsExpandable = pipe(
            },
        },
    ],
-    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;
+
+    protected readonly searchService = inject(SearchService);
    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() {
-        effect(() => {
-            (this.#elementRef.nativeElement as HTMLElement).style.setProperty('--filter-card-min-width', `${this.minWidth()}px`);
-        });
-    }
+    readonly #searchValueChanged = toSignal(this.searchService.valueChanges$);
+    readonly primaryFilterGroup = computed(() => this.#filterService.getGroup(this.primaryFiltersSlug));
+    readonly secondaryFilterGroup = computed(() => this.#filterService.getGroup(this.secondaryFiltersSlug));
+    primaryFilters = computed(() => {
+        this.#searchValueChanged();
+        return this.searchService.searchIn(this.primaryFilterGroup()?.filters ?? []);
+    });

-    private get _primaryFilters$(): Observable<IFilter[]> {
-        return combineLatest([this.primaryFilterGroup$, this.searchService.valueChanges$]).pipe(
-            map(([group]) => this.searchService.searchIn(group?.filters ?? [])),
-            shareLast(),
-        );
-    }
+    atLeastOneFilterIsExpandable = computed(() => atLeastOneIsExpandable(this.primaryFilterGroup()));
+    atLeastOneSecondaryFilterIsExpandable = computed(() => atLeastOneIsExpandable(this.secondaryFilterGroup()));

    ngOnInit() {
-        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 {
-        this.#filterService.filterCheckboxClicked({
-            nestedFilter,
-            filterGroup,
-            parent,
-            primaryFiltersSlug: this.primaryFiltersSlug(),
-        });
-        this.#filterService.updateFiltersInLocalStorage(this.fileId());
-    }
+        if (filterGroup.singleSelect) {
+            this.deactivateFilters(nestedFilter.id);
+        }

-    deactivatePrimaryFilters() {
-        this.#filterService.deactivateFilters({ 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.#updateFiltersInLocalStorage();
    }

    activatePrimaryFilters(): void {
-        this.#filterService.setFilters(this.primaryFiltersSlug(), true);
-        this.#filterService.updateFiltersInLocalStorage(this.fileId());
+        this.#setFilters(this.primaryFiltersSlug, true);
+    }
+
+    deactivateFilters(exceptedFilterId?: string): void {
+        this.#setFilters(this.primaryFiltersSlug, false, exceptedFilterId);
+        if (this.secondaryFiltersSlug) {
+            this.#setFilters(this.secondaryFiltersSlug, false, exceptedFilterId);
+        }
    }

    toggleFilterExpanded(nestedFilter: INestedFilter): void {
-        // eslint-disable-next-line no-param-reassign
        nestedFilter.expanded = !nestedFilter.expanded;
-        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));
+        }
+    }
+
+    #setFilters(slug: string, checked = false, exceptedFilterId?: string) {
+        this.#filterService.mutateFilterGroup(setFilters, [slug, checked, exceptedFilterId]);
    }
 }
--- a/src/lib/filtering/filter-utils.ts
+++ b/src/lib/filtering/filter-utils.ts
@ -1,11 +1,10 @@
 /* eslint-disable no-param-reassign */
-import { IListable } from '../listing/models/listable';
-import { Id } from '../listing/models/trackable';
+import { INestedFilter } from './models/nested-filter.model';
 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 { INestedFilter } from './models/nested-filter.model';
+import { Id, IListable } from '../listing';
+import { LocalStorageFilter } from './filter-card/filter-card.component';

 function copySettings(oldFilters: INestedFilter[], newFilters: INestedFilter[]) {
    if (!oldFilters || !newFilters) {
@ -16,7 +15,6 @@ 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);
--- a/src/lib/filtering/filter.service.ts
+++ b/src/lib/filtering/filter.service.ts
@ -1,75 +1,22 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
-import { map, startWith, switchMap } from 'rxjs/operators';
-import { get, shareDistinctLast, shareLast, some } from '../utils';
-import { extractFilterValues, handleCheckedValue, processFilters, toFlatFilters } from './filter-utils';
-import { Filter } from './models/filter';
+import { computed, Injectable, signal } from '@angular/core';
+import { processFilters, toFlatFilters } from './filter-utils';
 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';
+import { NestedFilter } from './models/nested-filter';
+import { Filter } from './models/filter';
+import { IFilter } from './models/filter.model';

@Injectable()
 export class FilterService {
-    readonly #singleFilters = new Map<string, BehaviorSubject<IFilter | undefined>>();
-    readonly #filterGroups$ = new BehaviorSubject<IFilterGroup[]>([]);
-    readonly #refresh$ = new Subject();
-    readonly showResetFilters$: Observable<boolean>;
-    readonly filterGroups$: Observable<IFilterGroup[]>;
-
-    constructor() {
-        this.filterGroups$ = this.#refresh$.pipe(
-            startWith(''),
-            switchMap(() => this.#filterGroups$.asObservable()),
-            shareLast(),
-        );
-        this.showResetFilters$ = this._showResetFilters$;
-    }
-
-    get filterGroups(): IFilterGroup[] {
-        return Object.values(this.#filterGroups$.getValue());
-    }
-
-    get enabledFlatFilters() {
-        return toFlatFilters(this.filterGroups, filters => filters.filter(f => f.checked));
-    }
-
-    get singleFilters() {
-        return Array.from(this.#singleFilters.values());
-    }
-
-    private get _showResetFilters$(): Observable<boolean> {
-        return this.filterGroups$.pipe(
-            map(value => toFlatFilters(value)),
-            some(filter => !!filter.checked),
-            shareDistinctLast(),
-        );
-    }
-
-    refresh(): void {
-        this.#refresh$.next(true);
-    }
+    readonly #singleFilters = signal({} as Record<string, IFilter | undefined>);
+    readonly #filterGroups = signal([] as IFilterGroup[]);
+    readonly filterGroups = this.#filterGroups.asReadonly();
+    readonly singleFilters = computed(() => Object.values(this.#singleFilters));
+    readonly enabledFlatFilters = computed(() => toFlatFilters(this.filterGroups(), filters => filters.filter(f => f.checked)));
+    readonly showResetFilters = computed(() => !!this.enabledFlatFilters().length);

    toggleFilter(filterGroupSlug: string, key: string, checkChildren = false): void {
-        const filters = this.filterGroups.find(group => group.slug === filterGroupSlug)?.filters;
+        const filters = this.filterGroups().find(group => group.slug === filterGroupSlug)?.filters;
        if (!filters) {
            return console.error(`Cannot find filter group "${filterGroupSlug}"`);
        }
@ -89,18 +36,16 @@ export class FilterService {
                found.children.forEach(c => (c.checked = true));
            }
        }
-
-        this.refresh();
    }

    addFilterGroup(value: IFilterGroup): void {
        const oldFilters = this.getGroup(value.slug)?.filters;
        if (!oldFilters) {
-            return this.#filterGroups$.next([...this.filterGroups, value]);
+            return this.#filterGroups.update(fGs => [...fGs, value]);
        }

        const newGroup = { ...value, filters: processFilters(oldFilters, value.filters) };
-        this.#filterGroups$.next([...this.filterGroups.filter(f => f.slug !== newGroup.slug), newGroup]);
+        this.#filterGroups.update(fG => [...fG.filter(f => f.slug !== newGroup.slug), newGroup]);
    }

    addFilterGroups(values: IFilterGroup[], removeOldFilters = false): void {
@ -114,54 +59,26 @@ export class FilterService {
        });

        const filterSlugs = newFilters.map(f => f.slug);
-        this.#filterGroups$.next(
-            removeOldFilters ? newFilters : [...this.filterGroups.filter(f => !filterSlugs.includes(f.slug)), ...newFilters],
+        this.#filterGroups.update(fG =>
+            removeOldFilters ? newFilters : [...fG.filter(f => !filterSlugs.includes(f.slug)), ...newFilters],
        );
    }

-    updateFilterGroups(newFilters: IFilterGroup[]): void {
-        const filters = this.filterGroups.map(oldFilter => {
-            const newFilter = newFilters.find(f => f.slug === oldFilter.slug);
-            return newFilter ? newFilter : oldFilter;
-        });
-
-        this.replaceOldFilters(filters);
-    }
-
-    replaceOldFilters(filterGroups: IFilterGroup[]) {
-        this.#filterGroups$.next(filterGroups);
-    }
-
    addSingleFilter(filter: IFilter) {
-        if (!this.#singleFilters.has(filter.id)) {
-            return this.#singleFilters.set(filter.id, new BehaviorSubject<IFilter | undefined>(filter));
-        }
-
-        return this.#singleFilters.get(filter.id)?.next(filter);
+        this.#singleFilters.update(sF => ({ ...sF, [filter.id]: filter }));
+        return filter;
    }

    getSingleFilter(filterId: string) {
-        if (!this.#singleFilters.has(filterId)) {
-            this.#singleFilters.set(filterId, new BehaviorSubject<IFilter | undefined>(undefined));
-        }
-
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        return this.#singleFilters.get(filterId)!.asObservable();
+        return this.#singleFilters()[filterId];
    }

    getGroup(slug: string): IFilterGroup | undefined {
-        return this.filterGroups.find(group => group.slug === slug);
+        return this.filterGroups().find(group => group.slug === slug);
    }

-    getFilterModels$(filterGroupSlug: string): Observable<INestedFilter[] | undefined> {
-        return this.getGroup$(filterGroupSlug).pipe(map(f => f?.filters));
-    }
-
-    getGroup$(slug: string): Observable<IFilterGroup | undefined> {
-        return this.filterGroups$.pipe(
-            get(group => group.slug === slug),
-            shareLast(),
-        );
+    getFilterModels(filterGroupSlug: string): INestedFilter[] | undefined {
+        return this.getGroup(filterGroupSlug)?.filters;
    }

    filtersEnabled(filterGroupSlug: string): boolean {
@ -175,109 +92,46 @@ export class FilterService {
    }

    reset(): void {
-        this.filterGroups.forEach(group => {
-            group.filters.forEach(filter => {
-                // eslint-disable-next-line no-param-reassign
-                filter.checked = false;
-                // eslint-disable-next-line no-param-reassign
-                filter.indeterminate = false;
-                filter.children?.forEach(f => {
-                    // eslint-disable-next-line no-param-reassign
-                    f.checked = false;
+        this.#filterGroups.mutate(fGs => {
+            fGs.forEach(group => {
+                group.filters.forEach(filter => {
+                    filter.checked = false;
+                    filter.indeterminate = false;
+                    filter.children?.forEach(f => {
+                        f.checked = false;
+                    });
                });
            });
        });

        this.resetSingleFilters();
-
-        this.refresh();
    }

    resetSingleFilters() {
-        this.#singleFilters.forEach(filter$ => {
-            const filter = filter$.value;
-            if (filter) {
-                filter$.next({ ...filter$.value, checked: !filter$.value?.checked });
-            }
-        });
+        this.#singleFilters.update(filters =>
+            Object.entries(filters).reduce(
+                (acc, [key, value]) => ({ ...acc, [key]: value ? { ...value, checked: !value?.checked } : undefined }),
+                {},
+            ),
+        );
    }

    toggleSingleFilter(filterId: string) {
-        const filter$ = this.#singleFilters.get(filterId);
-        if (!filter$) {
+        const filter = this.#singleFilters()[filterId];
+        if (!filter) {
            return;
        }

-        const filter = filter$.value;
        if (filter) {
            filter.checked = !filter.checked;
            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));
-            }
+    // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+    mutateFilterGroup<T extends (fGs: IFilterGroup[], ...args: any[]) => void>(predicate: T, ...args: unknown[]) {
+        this.#filterGroups.mutate(fGs => {
+            predicate(fGs, ...args);
        });
-        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));
-        }
    }
 }
--- a/src/lib/filtering/filters.module.ts
+++ b/src/lib/filtering/filters.module.ts
@ -1,18 +1,19 @@
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 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 } 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 { ChevronButtonComponent, IconButtonComponent } from '../buttons';
+import { PopupFilterComponent } from './popup-filter/popup-filter.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, SingleFilterComponent];
+const components = [QuickFiltersComponent, PopupFilterComponent, SingleFilterComponent, FilterCardComponent];

@NgModule({
    declarations: [...components],
@ -22,6 +23,7 @@ const components = [QuickFiltersComponent, SingleFilterComponent];
        MatCheckboxModule,
        MatMenuModule,
        TranslateModule,
+        IqserHelpModeModule,
        IconButtonComponent,
        ChevronButtonComponent,
        MatIconModule,
--- a/src/lib/filtering/index.ts
+++ b/src/lib/filtering/index.ts
@ -11,4 +11,3 @@ 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';
--- a/src/lib/filtering/models/filter.model.ts
+++ b/src/lib/filtering/models/filter.model.ts
@ -10,6 +10,5 @@ export interface IFilter {
    readonly required?: boolean;
    readonly disabled?: boolean;
    readonly helpModeKey?: string;
-    readonly hidden?: boolean;
    readonly metadata?: Record<string, any>;
 }
--- a/src/lib/filtering/models/filter.ts
+++ b/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,7 +10,6 @@ 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;
@ -26,7 +25,6 @@ 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 {
--- a/src/lib/filtering/models/local-filters.model.ts
+++ b/src/lib/filtering/models/local-filters.model.ts
@ -1,10 +0,0 @@
-export interface LocalStorageFilter {
-    id: string;
-    checked: boolean;
-    children?: LocalStorageFilter[] | null;
-}
-
-export interface LocalStorageFilters {
-    primaryFilters: LocalStorageFilter[] | null;
-    secondaryFilters: LocalStorageFilter[] | null;
-}
--- a/src/lib/filtering/models/nested-filter.ts
+++ b/src/lib/filtering/models/nested-filter.ts
@ -1,4 +1,4 @@
-import { IListable } from '../../listing/models/listable';
+import { IListable } from '../../listing';
 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[];
-    override readonly skipTranslation?: boolean;
-    override readonly metadata?: Record<string, any>;
+    readonly skipTranslation?: boolean;
+    readonly metadata?: Record<string, any>;

    constructor(nestedFilter: INestedFilter) {
        super(nestedFilter);
--- a/src/lib/filtering/models/simple-filter-option.ts
+++ b/src/lib/filtering/models/simple-filter-option.ts
@ -1,4 +0,0 @@
-export interface SimpleFilterOption<T> {
-    value: T;
-    label: string;
-}
--- a/src/lib/filtering/popup-filter/popup-filter.component.html
+++ b/src/lib/filtering/popup-filter/popup-filter.component.html
@ -1,35 +1,35 @@
-@if (primaryFilterGroup$ | async; as primaryGroup) {
-    @if (primaryGroup.icon) {
+<ng-container *ngIf="primaryFilterGroup() as primaryGroup">
+    <ng-container *ngIf="primaryGroup.icon">
        <iqser-icon-button
-            [attr.aria-expanded]="expanded$ | async"
-            [class.disabled]="primaryFiltersDisabled$ | async"
-            [disabled]="primaryFiltersDisabled$ | async"
+            [attr.aria-expanded]="expanded()"
+            [class.disabled]="primaryFiltersDisabled()"
+            [disabled]="primaryFiltersDisabled()"
            [icon]="primaryGroup.icon"
            [label]="primaryGroup.label?.capitalize() || ('filter-menu.label' | translate)"
            [matMenuTriggerFor]="filterMenu"
-            [showDot]="hasActiveFilters$ | async"
+            [showDot]="hasActiveFilters()"
            buttonId="{{ primaryGroup.slug }}"
        ></iqser-icon-button>
-    }
+    </ng-container>

-    @if (!primaryGroup.icon) {
+    <ng-container *ngIf="!primaryGroup.icon">
        <iqser-chevron-button
-            [attr.aria-expanded]="expanded$ | async"
-            [class.disabled]="primaryFiltersDisabled$ | async"
-            [disabled]="primaryFiltersDisabled$ | async"
+            [attr.aria-expanded]="expanded()"
+            [class.disabled]="primaryFiltersDisabled()"
+            [disabled]="primaryFiltersDisabled()"
            [label]="primaryGroup.label?.capitalize() || ('filter-menu.label' | translate)"
            [matMenuTriggerFor]="filterMenu"
-            [showDot]="hasActiveFilters$ | async"
+            [showDot]="hasActiveFilters()"
        ></iqser-chevron-button>
-    }
+    </ng-container>

    <mat-menu
        #filterMenu="matMenu"
-        (closed)="expanded.next(false)"
-        [class]="(secondaryFilterGroup$ | async)?.filters.length > 0 ? 'padding-bottom-0' : ''"
+        (close)="expanded.set(false)"
+        [class]="secondaryFilterGroup()?.filters.length > 0 ? 'padding-bottom-0' : ''"
        xPosition="before"
    >
-        <div id="workload-filters" iqserStopPropagation>
+        <div id="workload-filters">
            <ng-template matMenuContent>
                <iqser-filter-card
                    [actionsTemplate]="actionsTemplate"
@ -41,4 +41,4 @@
            </ng-template>
        </div>
    </mat-menu>
-}
+</ng-container>
--- a/src/lib/filtering/popup-filter/popup-filter.component.ts
+++ b/src/lib/filtering/popup-filter/popup-filter.component.ts
@ -1,72 +1,29 @@
-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 { 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 { ChangeDetectionStrategy, Component, computed, inject, Input, OnInit, signal, Signal, TemplateRef } from '@angular/core';
 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 {
+export class PopupFilterComponent {
    @Input() primaryFiltersSlug!: string;
    @Input() fileId?: string;
    @Input() actionsTemplate?: TemplateRef<unknown>;
    @Input() secondaryFiltersSlug = '';
    @Input() primaryFiltersLabel: string = _('filter-menu.filter-types');

-    readonly expanded = new BehaviorSubject<boolean>(false);
-    readonly expanded$ = this.expanded.asObservable().pipe(delay(200));
+    readonly #filterService = inject(FilterService);
+    protected readonly expanded = signal(false);

-    hasActiveFilters$!: Observable<boolean>;
-    primaryFilterGroup$!: Observable<IFilterGroup | undefined>;
-    secondaryFilterGroup$!: Observable<IFilterGroup | undefined>;
-    primaryFiltersDisabled$!: Observable<boolean>;
-
-    constructor(readonly filterService: FilterService) {}
-
-    private get _hasActiveFilters$() {
-        return combineLatest([this.primaryFilterGroup$, this.secondaryFilterGroup$]).pipe(
-            map(([primary, secondary]) => [...(primary?.filters || []), ...(secondary?.filters || [])]),
-            some(f => f.checked || !!f.indeterminate),
-            shareDistinctLast(),
-        );
-    }
-
-    private get _primaryFiltersDisabled$(): Observable<boolean> {
-        return this.primaryFilterGroup$.pipe(
-            map(group => group?.filters?.length === 0),
-            shareDistinctLast(),
-        );
-    }
-
-    ngOnInit(): void {
-        this.primaryFilterGroup$ = this.filterService.getGroup$(this.primaryFiltersSlug).pipe(shareLast());
-        this.secondaryFilterGroup$ = this.filterService.getGroup$(this.secondaryFiltersSlug).pipe(shareLast());
-
-        this.hasActiveFilters$ = this._hasActiveFilters$;
-        this.primaryFiltersDisabled$ = this._primaryFiltersDisabled$;
-    }
+    protected readonly primaryFilterGroup = computed(() => this.#filterService.getGroup(this.primaryFiltersSlug));
+    protected readonly secondaryFilterGroup = computed(() => this.#filterService.getGroup(this.secondaryFiltersSlug));
+    protected readonly primaryFiltersDisabled = computed(() => this.primaryFilterGroup()?.filters?.length === 0);
+    protected readonly hasActiveFilters = computed(() =>
+        [...(this.primaryFilterGroup()?.filters || []), ...(this.secondaryFilterGroup()?.filters || [])].some(
+            f => f.checked || !!f.indeterminate,
+        ),
+    );
 }
--- a/src/lib/filtering/quick-filters/quick-filters.component.html
+++ b/src/lib/filtering/quick-filters/quick-filters.component.html
@ -1,13 +1,12 @@
-@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>
-    }
-}
+<ng-container *ngIf="quickFilters() 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>
--- a/src/lib/filtering/quick-filters/quick-filters.component.ts
+++ b/src/lib/filtering/quick-filters/quick-filters.component.ts
@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
 import { FilterService } from '../filter.service';

@Component({
@ -6,10 +6,9 @@ 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');
+    readonly quickFilters = computed(() => this.filterService.getFilterModels('quickFilters'));

    constructor(readonly filterService: FilterService) {}
 }
--- a/src/lib/filtering/simple-popup-filter/simple-popup-filter.component.html
+++ b/src/lib/filtering/simple-popup-filter/simple-popup-filter.component.html
@ -1,66 +0,0 @@
-@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>
--- a/src/lib/filtering/simple-popup-filter/simple-popup-filter.component.scss
+++ b/src/lib/filtering/simple-popup-filter/simple-popup-filter.component.scss
@ -1,25 +0,0 @@
-@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;
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
George	41d19013ad	RED-6408, get UI to run without errors.	2023-07-10 19:34:47 +03:00
George	9e0c31992a	RED-6408, rewrite filters service with signals. TODO: Modify its usage everywhere in the codebase.	2023-07-10 15:30:56 +03:00