Merge branch 'unprotected' into 'master'

update master

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

.eslintrc.js

@@ -0,0 +1,269 @@
+module.exports = {
+    root: true,
+    env: {
+        browser: true,
+    },
+    globals: {
+        NodeJS: true,
+    },
+    ignorePatterns: ['!**/*', 'jest.config.ts'],
+    overrides: [
+        {
+            files: ['*.ts'],
+            extends: ['plugin:@typescript-eslint/recommended'],
+            parser: '@typescript-eslint/parser',
+            parserOptions: {
+                project: './tsconfig.json',
+                tsconfigRootDir: __dirname,
+            },
+            rules: {
+                '@typescript-eslint/no-explicit-any': 'error',
+                '@typescript-eslint/explicit-member-accessibility': [
+                    'error',
+                    {
+                        accessibility: 'no-public',
+                    },
+                ],
+                '@typescript-eslint/unbound-method': 'error',
+                '@typescript-eslint/no-floating-promises': 'off',
+                '@typescript-eslint/naming-convention': [
+                    'error',
+                    {
+                        selector: 'memberLike',
+                        modifiers: ['private'],
+                        format: ['camelCase'],
+                        leadingUnderscore: 'allow',
+                    },
+                    {
+                        selector: 'memberLike',
+                        modifiers: ['protected'],
+                        format: ['camelCase'],
+                        leadingUnderscore: 'allow',
+                    },
+                    {
+                        selector: 'memberLike',
+                        modifiers: ['private'],
+                        format: ['UPPER_CASE', 'camelCase'],
+                        leadingUnderscore: 'allow',
+                    },
+                ],
+                '@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',
+                        ],
+                    },
+                ],
+            },
+        },
+        {
+            files: ['*.ts'],
+            extends: [
+                'eslint:recommended',
+                'plugin:@angular-eslint/recommended',
+                'plugin:@angular-eslint/template/process-inline-templates',
+                'plugin:prettier/recommended',
+                'plugin:rxjs/recommended',
+            ],
+            rules: {
+                'rxjs/no-ignored-subscription': 'error',
+                '@angular-eslint/prefer-standalone': 'off',
+                '@angular-eslint/directive-selector': [
+                    'error',
+                    {
+                        type: 'attribute',
+                        prefix: 'iqser',
+                        style: 'camelCase',
+                    },
+                ],
+                '@angular-eslint/component-selector': [
+                    'error',
+                    {
+                        type: 'element',
+                        prefix: 'iqser',
+                        style: 'kebab-case',
+                    },
+                ],
+                '@angular-eslint/prefer-on-push-component-change-detection': 'error',
+                '@angular-eslint/use-lifecycle-interface': 'error',
+                '@angular-eslint/no-input-prefix': 'error',
+                '@angular-eslint/no-input-rename': 'error',
+                '@angular-eslint/no-output-on-prefix': 'error',
+                '@angular-eslint/no-output-rename': 'error',
+                '@angular-eslint/prefer-output-readonly': 'error',
+                'no-underscore-dangle': 'off',
+                'no-param-reassign': 'error',
+                'no-dupe-class-members': 'off',
+                'no-redeclare': 'off',
+                'no-unused-vars': 'off',
+                'consistent-return': 'off',
+            },
+        },
+        {
+            files: ['*.html'],
+            extends: ['plugin:@angular-eslint/template/recommended'],
+        },
+        {
+            files: ['*.html'],
+            excludedFiles: ['*inline-template-*.component.html'],
+            extends: ['plugin:prettier/recommended'],
+            rules: {
+                'prettier/prettier': [
+                    'error',
+                    {
+                        parser: 'angular',
+                    },
+                ],
+            },
+        },
+        {
+            files: ['**/*.spec.ts'],
+            env: {
+                node: true,
+                jest: true,
+            },
+            rules: {
+                '@angular-eslint/prefer-on-push-component-change-detection': 'off',
+            },
+        },
+    ],
+};

.eslintrc.json

@@ -1,68 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "node": true
-  },
-  "ignorePatterns": ["!**/*"],
-  "overrides": [
-    {
-      "files": ["**/*.ts"],
-      "rules": {
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "type": "attribute",
-            "prefix": "iqser",
-            "style": "camelCase"
-          }
-        ],
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": "element",
-            "prefix": "iqser",
-            "style": "kebab-case"
-          }
-        ],
-        "@angular-eslint/prefer-on-push-component-change-detection": "error",
-        "@angular-eslint/use-lifecycle-interface": "error",
-        "@angular-eslint/no-input-prefix": "error",
-        "@angular-eslint/no-input-rename": "error",
-        "@angular-eslint/no-output-on-prefix": "error",
-        "@angular-eslint/no-output-rename": "error",
-        "@angular-eslint/prefer-output-readonly": "error",
-        "@typescript-eslint/unbound-method": "error",
-        "@typescript-eslint/no-floating-promises": "off",
-        "@typescript-eslint/naming-convention": [
-          "error",
-          {
-            "selector": "memberLike",
-            "modifiers": ["private"],
-            "format": ["camelCase"],
-            "leadingUnderscore": "allow"
-          },
-          {
-            "selector": "memberLike",
-            "modifiers": ["protected"],
-            "format": ["camelCase"],
-            "leadingUnderscore": "allow"
-          },
-          {
-            "selector": "memberLike",
-            "modifiers": ["private"],
-            "format": ["UPPER_CASE", "camelCase"],
-            "leadingUnderscore": "allow"
-          }
-        ],
-        "no-underscore-dangle": "off",
-        "no-param-reassign": "error",
-        "no-dupe-class-members": "off",
-        "no-redeclare": "off",
-        "no-unused-vars": "off",
-        "consistent-return": "off",
-        "@typescript-eslint/restrict-template-expressions": "off",
-        "@typescript-eslint/lines-between-class-members": "off"
-      }
-    }
-  ]
-}

.gitlab-ci.yml

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

README.md

@@ -77,6 +77,7 @@ Update `styles` and `stylePreprocessorOptions` in `angular.json`:
 }
 ```
 
+
 Add theming classes (`light` or `dark`) to the `<body>` element.
 
 Configure light and dark theme variables in `styles.scss`.

jest.config.ts

@@ -0,0 +1,26 @@
+import type { Config } from 'jest';
+import { defaults } from 'jest-config';
+
+export default {
+    ...defaults,
+    displayName: 'common-ui',
+    preset: 'jest-preset-angular',
+    setupFilesAfterEnv: ['./setup-jest.ts'],
+    coverageDirectory: '../../coverage/libs/common-ui',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: './tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    testEnvironment: 'jest-environment-jsdom',
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+} as Config;

setup-jest.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

sonar-project.properties

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

src/assets/icons/alert-circle.svg

@@ -0,0 +1,14 @@
+<?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>

src/assets/icons/calendar.svg

@@ -0,0 +1,15 @@
+<?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>

src/assets/icons/chevron-down.svg

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

src/assets/icons/chevron-up.svg

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

src/assets/icons/color-picker.svg

@@ -0,0 +1,15 @@
+<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>

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">
-	.st0 {
+	#csv-svg .st0 {
         fill: currentColor;
     }
 </style>
-    <g id="Styleguide">
+    <g id="csv-svg">
 	<g id="Export-just-icons" transform="translate(-979.000000, -252.000000)">
 		<g id="Group" transform="translate(979.000000, 252.000000)">
 			<g id="list-view">

src/assets/icons/exit-fullscreen.svg

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

src/assets/icons/filter-list.svg

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

src/assets/icons/fullscreen.svg

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

src/assets/icons/help-outline-active.svg

@@ -0,0 +1,14 @@
+<?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>

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">
-	.st0 {
+	#lanes-svg .st0 {
         fill: currentColor;
     }
 </style>
-    <g id="Styleguide">
+    <g id="lanes-svg">
 	<g id="Export-just-icons" transform="translate(-979.000000, -294.000000)">
 		<g id="Group" transform="translate(979.000000, 294.000000)">
 			<g id="lanes-view">

src/assets/icons/nav-first.svg

@@ -0,0 +1,22 @@
+<?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>

src/assets/icons/nav-last.svg

@@ -0,0 +1,24 @@
+<?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>

src/assets/icons/nav-next.svg

@@ -0,0 +1,24 @@
+<?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>

src/assets/icons/nav-prev.svg

@@ -0,0 +1,25 @@
+<?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>

src/assets/icons/resize.svg

@@ -0,0 +1,26 @@
+<?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>

src/assets/icons/thumb-down.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px"
+     xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="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>

src/assets/icons/thumb-up.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px"
+     xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="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>

src/assets/icons/visibility-off.svg

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

src/assets/icons/visibility.svg

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

src/assets/styles/_common-variables.scss

@@ -43,14 +43,31 @@ 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;
+    --iqser-menu-border-radius: 8px;
+    --iqser-menu-padding-top: 8px;
+    --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-font-family' 'iqser-primary';
+$required-variables: 'iqser-primary';
 
 @mixin checkRequiredVariables($args, $theme) {
     @each $var in $required-variables {

src/assets/styles/common-autocomplete.scss

@@ -1,11 +1,12 @@
 @use 'common-mixins';
 
-.mat-autocomplete-panel {
+.mat-mdc-autocomplete-panel {
     @include common-mixins.scroll-bar;
+    background-color: var(--iqser-background);
 
     border-radius: 8px;
 
-    .mat-option {
+    .mat-mdc-option {
         font-size: inherit;
     }
 }

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

@@ -1,10 +1,11 @@
 @use 'common-mixins';
 
 .top-bar {
-    height: 61px;
+    height: var(--iqser-top-bar-height);
     width: 100vw;
     display: flex;
     justify-content: space-between;
+    align-items: center;
     padding: 0 24px;
     border-bottom: 1px solid var(--iqser-separator);
     box-sizing: border-box;
@@ -14,24 +15,6 @@
         margin-right: 50px;
     }
 
-    .logo {
-        @include common-mixins.clear-a;
-        display: flex;
-        align-items: center;
-    }
-
-    .app-name {
-        font-family: var(--iqser-app-name-font-family);
-        margin-left: 10px;
-        height: 20px;
-        font-size: var(--iqser-font-size);
-        font-weight: 800;
-        letter-spacing: 0;
-        line-height: 20px;
-        white-space: nowrap;
-        color: var(--iqser-text);
-    }
-
     .menu {
         display: flex;
         align-items: center;
@@ -49,6 +32,7 @@
     .buttons {
         display: flex;
         margin-right: 8px;
+        align-items: center;
 
         > *:not(:last-child) {
             margin-right: 14px;
@@ -56,18 +40,28 @@
     }
 }
 
+.logo {
+    @include common-mixins.clear-a;
+    display: flex;
+    align-items: center;
+}
+
+.app-name {
+    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;
+    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: 61px;
-    word-break: break-all;
+    height: var(--iqser-top-bar-height);
+    writing-mode: vertical-rl;
+    text-orientation: upright;
     display: flex;
     justify-content: center;
     align-items: center;

src/assets/styles/common-breadcrumbs.scss

@@ -13,13 +13,13 @@
         min-width: 16px;
     }
 
-    .dropdown-breadcrumb {
+    .dropdown-breadcrumb .mdc-button {
         font-weight: 600;
-        color: var(--iqser-primary);
+        --mdc-text-button-label-text-color: var(--iqser-primary);
+    }
 
-        &[aria-expanded='true'] .mat-button-wrapper > span {
-            color: var(--iqser-text);
-        }
+    .dropdown-breadcrumb[aria-expanded='true'] .mdc-button {
+        --mdc-text-button-label-text-color: var(--iqser-text);
     }
 }
 

src/assets/styles/common-buttons.scss

@@ -1,108 +1,20 @@
-.mat-button,
-.mat-flat-button {
-    border-radius: var(--iqser-button-radius) !important;
-    font-size: var(--iqser-button-font-size) !important;
-    height: var(--iqser-button-height);
-    display: flex !important;
-    align-items: center;
-
-    .mat-button-wrapper {
-        display: flex;
-        align-items: center;
-        line-height: 34px;
-        transition: opacity 0.2s;
-        width: 100%;
-
-        > *:not(:last-child) {
-            margin-right: 6px;
-        }
-
-        > span {
-            margin: auto;
-        }
+@mixin iconSize14 {
+    .mat-icon {
+        width: 14px;
+        height: 14px;
+        font-size: 14px;
     }
 }
 
-.mat-button,
-.mat-icon-button,
-.mat-flat-button {
-    &.mat-button-disabled .mat-button-wrapper {
-        color: var(--iqser-text);
-        opacity: 0.3;
+@mixin labelNoWrap {
+    .mdc-button__label {
+        white-space: nowrap;
     }
 }
 
-.mat-flat-button.mat-primary,
-.mat-button.primary {
-    padding: 0 14px;
-    transition: background-color 0.2s, color 0.2s;
-
-    background-color: var(--iqser-primary);
-
-    &.mat-button-disabled {
-        background-color: var(--iqser-primary);
-
-        .mat-button-wrapper {
-            color: var(--iqser-white);
-            opacity: 0.5;
-        }
-    }
-
-    &:not(.mat-button-disabled):hover {
-        background-color: var(--iqser-primary-2);
-    }
-}
-
-iqser-icon-button,
-iqser-chevron-button,
-.user-button,
-iqser-circle-button {
-    position: relative;
-    display: flex;
-
-    button {
-        font-weight: 400 !important;
-        transition: background-color 0.2s;
-
-        &.overlay {
-            background: rgba(var(--iqser-primary-rgb), 0.1);
-        }
-
-        &:not(.overlay):not(.mat-button-disabled):not(.primary):not(.dark-bg):not(.warn):not(.help):hover {
-            background-color: var(--iqser-btn-bg);
-        }
-
-        &.primary {
-            font-weight: 500 !important;
-            background-color: var(--iqser-primary);
-            color: var(--iqser-white);
-
-            &:hover {
-                background-color: var(--iqser-primary-2);
-            }
-        }
-
-        &.dark-bg:hover {
-            background-color: var(--iqser-btn-bg-hover);
-        }
-
-        &.help:hover {
-            background-color: var(--iqser-helpmode-primary);
-            color: var(--iqser-grey-1);
-        }
-    }
-
-    .dot {
-        top: 1px;
-        left: 1px;
-    }
-}
-
-iqser-chevron-button,
-iqser-circle-button,
-iqser-icon-button {
+@mixin ariaExpanded {
     &[aria-expanded='true'] {
-        button {
+        .mat-mdc-button-base {
             background: rgba(var(--iqser-primary-rgb), 0.1);
 
             &.primary {
@@ -115,3 +27,184 @@ iqser-icon-button {
         }
     }
 }
+
+@mixin dotOverlay {
+    position: relative;
+
+    .dot {
+        top: 1px;
+        left: 1px;
+    }
+
+    .overlay {
+        background: var(--iqser-dot-overlay-background);
+    }
+}
+
+@mixin buttonShape {
+    .mat-mdc-button {
+        --mdc-text-button-container-shape: var(--iqser-button-radius);
+
+        height: var(--iqser-button-height);
+
+        .mat-mdc-button-touch-target {
+            height: var(--iqser-button-height);
+        }
+    }
+}
+
+iqser-icon-button {
+    @include buttonShape;
+    @include ariaExpanded;
+    @include dotOverlay;
+    @include labelNoWrap;
+
+    display: block;
+
+    .mdc-button.mat-mdc-button {
+        @include iconSize14;
+
+        --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);
+        }
+
+        .mat-icon {
+            margin-right: 6px;
+        }
+
+        &.has-icon {
+            padding: 0 14px 0 10px;
+        }
+
+        &.primary {
+            --mdc-text-button-label-text-color: var(--iqser-white);
+            --mdc-text-button-disabled-label-text-color: rgba(255, 255, 255, 0.5);
+
+            background: var(--iqser-primary);
+            font-weight: 500;
+        }
+
+        &.dark {
+            background: var(--iqser-btn-bg);
+        }
+
+        &.active {
+            background: #fcebeb;
+            font-weight: 600;
+            color: var(--iqser-primary);
+            cursor: default;
+            pointer-events: none;
+        }
+    }
+}
+
+iqser-circle-button {
+    @include ariaExpanded;
+    @include dotOverlay;
+
+    display: block;
+
+    .mat-mdc-icon-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);
+            padding: 0;
+        }
+
+        svg {
+            vertical-align: bottom;
+            width: inherit;
+            height: inherit;
+        }
+
+        &.primary {
+            --mdc-icon-button-icon-color: var(--iqser-white);
+
+            &[disabled] {
+                --mdc-icon-button-disabled-icon-color: rgba(255, 255, 255, 0.5);
+            }
+
+            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);
+        }
+
+        mat-icon {
+            width: var(--circle-button-icon-size);
+            height: var(--circle-button-icon-size);
+            line-height: var(--circle-button-icon-size);
+            margin: 0 !important;
+
+            svg {
+                line-height: var(--circle-button-icon-size);
+            }
+        }
+    }
+}
+
+iqser-chevron-button {
+    @include buttonShape;
+    @include ariaExpanded;
+    @include labelNoWrap;
+
+    display: block;
+
+    .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 {
+    @include buttonShape;
+    @include ariaExpanded;
+    @include dotOverlay;
+
+    display: block;
+
+    .mdc-button.mat-mdc-button {
+        --mdc-text-button-label-text-color: var(--iqser-text);
+
+        @include iconSize14;
+        padding: 0 10px 0 5px;
+    }
+}

src/assets/styles/common-checkbox.scss

@@ -1,39 +1,76 @@
-.mat-checkbox .mat-checkbox-frame {
-    border: 1px solid var(--iqser-grey-5);
+$checkbox-size: 16px;
+$ripple-size: 26px;
+
+.mat-mdc-checkbox .mdc-checkbox {
+    flex: 0 0 $checkbox-size;
+    width: $checkbox-size;
+    height: $checkbox-size;
+    margin-top: 4px;
 }
 
-.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
-.mat-checkbox-checked.mat-accent .mat-checkbox-background {
-    margin-top: 1px;
-    margin-left: 1px;
-    width: 18px;
-    height: 18px;
-}
+.mat-mdc-checkbox,
+.mdc-checkbox {
+    --mdc-checkbox-state-layer-size: $checkbox-size;
+    --mdc-checkbox-unselected-icon-color: var(--iqser-grey-5);
+    --mdc-checkbox-unselected-hover-icon-color: var(--iqser-grey-5);
+    --mdc-checkbox-unselected-pressed-icon-color: var(--iqser-grey-5);
+    --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);
 
-.mat-checkbox-layout {
-    align-items: center !important;
+    .mdc-form-field {
+        align-items: start;
 
-    .mat-checkbox-inner-container {
-        margin-left: 0;
-    }
-
-    .mat-checkbox-label {
-        font-size: var(--iqser-font-size);
-        color: var(--iqser-text);
-
-        display: flex;
-        align-items: center;
-
-        > *:not(:last-child) {
-            margin-right: 8px;
+        & > label {
+            padding-left: 8px;
+            line-height: 24px;
+            white-space: normal;
         }
     }
+
+    .mdc-checkbox__ripple {
+        --mdc-checkbox-unselected-focus-state-layer-color: var(--iqser-alt-background);
+
+        width: $ripple-size;
+        height: $ripple-size;
+        left: calc(($checkbox-size - $ripple-size) / 2);
+        top: calc(($checkbox-size - $ripple-size) / 2);
+    }
+
+    .mdc-checkbox__background {
+        border-width: 1px;
+        width: $checkbox-size;
+        height: $checkbox-size;
+        top: 0 !important;
+        left: 0 !important;
+    }
+
+    .mat-mdc-checkbox-touch-target {
+        height: $ripple-size;
+        width: $ripple-size;
+        transform: translate(-50%, -50%);
+    }
 }
 
-.mat-checkbox.error .mat-checkbox-label {
-    color: var(--iqser-primary);
+.mdc-checkbox label {
+    font-size: var(--iqser-font-size);
+    color: var(--iqser-text);
+
+    display: flex;
+    align-items: center;
+
+    > *:not(:last-child) {
+        margin-right: 8px;
+    }
 }
 
-.mat-checkbox-disabled {
+.mat-mdc-checkbox-disabled .mdc-checkbox {
     opacity: 0.5;
 }

src/assets/styles/common-chips.scss

@@ -0,0 +1,78 @@
+@use 'common-mixins';
+
+mat-chip-listbox {
+    box-sizing: border-box;
+    height: calc(var(--height) - 40px);
+    overflow-x: hidden;
+    overflow-y: auto;
+    @include common-mixins.scroll-bar();
+
+    .mat-mdc-chip-set {
+        height: 100%;
+        align-items: flex-start;
+        flex-direction: column;
+        flex-wrap: nowrap;
+    }
+}
+
+.mat-mdc-standard-chip,
+.mat-mdc-standard-chip.mat-primary.mat-mdc-chip-selected {
+    --mdc-chip-label-text-color: var(--iqser-text);
+}
+
+.mdc-evolution-chip-set mat-chip-option.mat-mdc-standard-chip {
+    background-color: var(--iqser-background);
+    border-radius: 4px;
+    margin: 0 0 2px 0;
+    padding: 0 12px;
+    transition: background-color 0.2s;
+    cursor: pointer;
+
+    .selected-mark {
+        display: none;
+    }
+
+    &:hover {
+        background-color: var(--iqser-not-disabled-table-item);
+    }
+
+    &.mat-mdc-chip-selected {
+        background-color: var(--iqser-btn-bg);
+
+        .mdc-evolution-chip__text-label {
+            color: #212121;
+        }
+
+        .selected-mark {
+            display: block;
+        }
+    }
+}
+
+.mdc-evolution-chip__action {
+    width: 100%;
+}
+
+.mdc-evolution-chip__text-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.mdc-evolution-chip__graphic {
+    display: none !important;
+}
+
+.mat-mdc-chip-list--disabled {
+    pointer-events: none;
+    color: var(--iqser-grey-5);
+}
+
+.mdc-evolution-chip-set__chips {
+    margin-left: 0 !important;
+}
+
+.mat-mdc-chip-focus-overlay {
+    display: none;
+}

src/assets/styles/common-components.scss

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

src/assets/styles/common-dialogs.scss

@@ -1,9 +1,10 @@
 @use 'common-mixins';
 
-.mat-dialog-container {
+.mat-mdc-dialog-container .mdc-dialog__surface {
+    --mdc-dialog-container-color: var(--iqser-background);
     display: flex !important;
+    flex-direction: row;
     color: var(--iqser-text);
-    background-color: var(--iqser-background);
     padding: 0 !important;
     border-radius: 8px !important;
     @include common-mixins.scroll-bar;
@@ -14,6 +15,10 @@
     }
 }
 
+.use-backslash-n-as-line-break {
+    white-space: pre-line !important;
+}
+
 .dialog {
     position: relative;
     min-height: 80px;
@@ -36,6 +41,20 @@
         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 {
@@ -56,3 +75,7 @@
         margin-left: auto;
     }
 }
+
+.large-form-dialog .dialog > form {
+    display: contents;
+}

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

@@ -0,0 +1,59 @@
+.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;
+        }
+    }
+}

src/assets/styles/common-full-pages.scss

@@ -7,11 +7,11 @@
 .full-page-section {
     opacity: 0.7;
     background: var(--iqser-background);
-    z-index: 900;
+    z-index: 1001;
 }
 
 .full-page-content {
-    z-index: 1000;
+    z-index: 1002;
     justify-content: center;
     align-items: center;
     flex-direction: column;

src/assets/styles/common-help-mode.scss

@@ -9,4 +9,9 @@
     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;
+    }
 }

src/assets/styles/common-inputs.scss

@@ -1,9 +1,20 @@
 @use 'common-mixins' as mixins;
 
-form .iqser-input-group:not(first-of-type) {
+form .iqser-input-group:not(first-of-type),
+iqser-dynamic-input:not(first-of-type) {
     margin-top: 14px;
 }
 
+iqser-dynamic-input {
+    display: flex;
+}
+
+.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
+    padding-top: 0;
+    padding-bottom: 0;
+    min-height: var(--iqser-inputs-height);
+}
+
 .iqser-input-group {
     display: flex;
     flex-direction: column;
@@ -48,25 +59,6 @@ form .iqser-input-group:not(first-of-type) {
         }
     }
 
-    .mat-form-field-underline {
-        display: none;
-    }
-
-    .mat-form-field-wrapper,
-    .mat-form-field-infix {
-        padding-bottom: 0;
-    }
-
-    .mat-form-field-label {
-        opacity: 0.7 !important;
-        color: var(--iqser-text) !important;
-        transform: translateY(-1.34em) !important;
-    }
-
-    .mat-form-field-required-marker {
-        display: none;
-    }
-
     &:first-child {
         margin-top: 0;
     }
@@ -75,8 +67,8 @@ form .iqser-input-group:not(first-of-type) {
         width: 14px;
         height: 14px;
         position: absolute;
-        top: 10px;
-        right: 10px;
+        top: calc((var(--iqser-inputs-height) - 14px) / 2 - 1px);
+        right: calc((var(--iqser-inputs-height) - 14px) / 2 - 1px);
     }
 
     .slider-row {
@@ -91,27 +83,84 @@ form .iqser-input-group:not(first-of-type) {
         color: var(--iqser-white);
     }
 
-    input,
-    textarea,
-    mat-select {
+    .mat-mdc-text-field-wrapper {
+        padding: 0;
+    }
+
+    .mdc-text-field {
+        background: var(--iqser-background);
+    }
+
+    input:not([type='checkbox']),
+    textarea {
         box-sizing: border-box;
-        padding-left: 11px;
-        padding-right: 11px;
+        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);
+    }
+
+    .mat-mdc-form-field-subscript-wrapper {
+        display: none;
+    }
+
+    .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-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) {
+        .mdc-notched-outline__leading,
+        .mdc-notched-outline__trailing {
+            border-color: var(--iqser-inputs-outline);
+        }
+
+        &:hover {
+            .mdc-notched-outline__leading,
+            .mdc-notched-outline__trailing {
+                border-color: var(--iqser-inputs-outline);
+            }
+        }
+    }
+
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused {
+        .mdc-notched-outline__leading,
+        .mdc-notched-outline__trailing {
+            border-color: var(--iqser-text);
+        }
+
+        &:hover {
+            .mdc-notched-outline__leading,
+            .mdc-notched-outline__trailing {
+                border-color: var(--iqser-text);
+            }
+        }
+    }
+
+    .mdc-text-field--focused .mdc-notched-outline__leading,
+    .mdc-text-field--focused .mdc-notched-outline__notch,
+    .mdc-text-field--focused .mdc-notched-outline__trailing {
+        border-width: 1px;
+    }
+
+    input,
+    textarea {
         border: 1px solid var(--iqser-inputs-outline);
         font-family: var(--iqser-font-family);
-        font-size: var(--iqser-font-size);
+        font-size: var(--iqser-inputs-font-size);
         background-color: var(--iqser-background);
         color: var(--iqser-text);
         border-radius: 8px;
         outline: none;
-        margin-top: 3px;
-        min-height: 36px;
 
         &.with-icon {
             padding-right: 34px;
         }
 
-        &:focus:not(:disabled):not(.mat-select-disabled) {
+        &:focus:not(:disabled) {
             border-color: var(--iqser-text);
         }
 
@@ -127,16 +176,17 @@ form .iqser-input-group:not(first-of-type) {
                 border-color: var(--iqser-primary);
             }
         }
+    }
 
-        &:disabled,
-        &.mat-select-disabled {
-            background-color: var(--iqser-alt-background);
-            color: rgba(var(--iqser-text-rgb), 0.3);
-        }
+    input:disabled,
+    textarea:disabled,
+    .mdc-text-field--disabled {
+        background-color: var(--iqser-alt-background);
+        color: rgba(var(--iqser-text-rgb), 0.3);
     }
 
     textarea {
-        line-height: 18px;
+        line-height: calc(var(--iqser-inputs-font-size) * 1.4);
     }
 
     .hex-color-input {
@@ -144,30 +194,10 @@ form .iqser-input-group:not(first-of-type) {
         max-width: 150px;
     }
 
-    mat-select,
-    .mat-select.mat-select-disabled {
-        .mat-select-trigger {
-            height: 32px;
-        }
-
-        .mat-select-placeholder {
-            color: rgba(var(--iqser-text-rgb), 0.4);
-        }
-
-        .mat-select-value {
-            vertical-align: middle;
-            color: var(--iqser-text);
-        }
-
-        .mat-select-arrow {
-            color: rgba(var(--iqser-text-rgb), 0.7);
-        }
-    }
-
     textarea {
         resize: vertical;
-        padding-top: 7px;
-        padding-bottom: 7px;
+        padding-top: var(--iqser-textarea-padding-y);
+        padding-bottom: var(--iqser-textarea-padding-y);
         @include mixins.scroll-bar;
 
         &.has-scrollbar {
@@ -176,12 +206,12 @@ form .iqser-input-group:not(first-of-type) {
         }
     }
 
-    label:not(.mat-slide-toggle-label):not(.mat-radio-label):not(.details-radio-label) {
+    > label:not(.mat-slide-toggle-label):not(.mat-radio-label):not(.details-radio-label) {
         opacity: 0.7;
         font-size: 11px;
         letter-spacing: 0;
         line-height: 14px;
-        margin-bottom: 2px;
+        margin-bottom: 5px;
         color: var(--iqser-text);
 
         &.mat-checkbox-layout {
@@ -192,7 +222,7 @@ form .iqser-input-group:not(first-of-type) {
 
     &.required label:after {
         content: ' *';
-        color: var(--iqser-primary);
+        color: var(--iqser-red-1);
     }
 
     &.datepicker-wrapper {
@@ -209,7 +239,7 @@ form .iqser-input-group:not(first-of-type) {
         .mat-datepicker-toggle {
             position: absolute;
             right: 0;
-            bottom: 1px;
+            bottom: -4px;
             color: var(--iqser-accent);
 
             &.mat-datepicker-toggle-active {
@@ -226,6 +256,18 @@ form .iqser-input-group:not(first-of-type) {
                 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;

src/assets/styles/common-layout.scss

@@ -86,17 +86,13 @@ section.settings {
 }
 
 .fullscreen {
-    .page-header {
-        position: absolute;
-        top: 0;
-    }
-
     .content-inner {
         height: calc(100% - 50px);
     }
 
-    .overlay-shadow {
-        top: 50px;
+    .right-container {
+        transform: translateY(61px);
+        height: calc(100% - 61px);
     }
 }
 
@@ -106,7 +102,7 @@ section.settings {
     right: 0;
     bottom: 0;
     width: 100%;
-    height: calc(100vh - 111px);
+    height: calc(100vh - var(--iqser-top-bar-height) - 50px);
     transition: height ease-in-out 0.2s;
 }
 
@@ -149,7 +145,6 @@ section.settings {
         justify-content: center;
         align-items: center;
 
-        // TODO: Shouldn't use `redaction-` here
         iqser-initials-avatar .username {
             display: none;
         }
@@ -161,11 +156,15 @@ section.settings {
     box-sizing: border-box;
     background: var(--iqser-background);
     overflow: hidden;
-    transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s;
+    &.with-transition {
+        transition:
+            width ease-in-out 0.2s,
+            min-width ease-in-out 0.2s;
+    }
+    @include common-mixins.scroll-bar;
 
     &:hover {
         overflow-y: auto;
-        @include common-mixins.scroll-bar;
     }
 
     .collapsed-wrapper {
@@ -214,6 +213,11 @@ section.settings {
     display: flex !important;
 }
 
+.flex-column {
+    @extend .flex;
+    flex-direction: column;
+}
+
 .flex-end {
     display: flex;
     justify-content: flex-end;
@@ -252,12 +256,12 @@ section.settings {
     cursor: pointer;
 }
 
-.fit-content {
-    width: fit-content;
+.cursor-default {
+    cursor: default;
 }
 
-.d-flex {
-    display: flex;
+.fit-content {
+    width: fit-content;
 }
 
 .cdk-overlay-container {

src/assets/styles/common-loading.scss

@@ -7,22 +7,33 @@
     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: #283241;
-        text-shadow: 0.25em 0 0 rgba(var(--iqser-accent-rgb), 0), 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
+        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);
     }
     60% {
-        text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
+        text-shadow:
+            0.25em 0 0 var(--iqser-accent),
+            0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
     }
     80%,
     100% {
-        text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 #283241;
+        text-shadow:
+            0.25em 0 0 var(--iqser-accent),
+            0.5em 0 0 var(--iqser-accent);
     }
 }
 
 .spinning-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     animation-name: spin;
     animation-duration: 5000ms;
     animation-iteration-count: infinite;

src/assets/styles/common-menu.scss

@@ -1,32 +1,32 @@
 @use 'common-mixins';
 
-.mat-menu-panel {
-    border-radius: 8px !important;
+.mat-mdc-menu-panel {
+    border-radius: var(--iqser-menu-border-radius) !important;
     max-width: none !important;
     min-width: 180px !important;
-    margin-top: 10px;
-    background-color: var(--iqser-popup-background);
+    margin-top: var(--iqser-menu-margin-top);
+    min-height: unset !important;
     @include common-mixins.scroll-bar;
     @include common-mixins.drop-shadow;
 
-    .mat-menu-content:not(:empty) {
-        padding-top: 8px;
-        padding-bottom: 24px;
+    .mat-mdc-menu-content:not(:empty) {
+        padding-top: var(--iqser-menu-padding-top);
+        padding-bottom: var(--iqser-menu-padding-bottom);
     }
 
-    &.padding-bottom-0 .mat-menu-content:not(:empty) {
+    &.padding-bottom-0 .mat-mdc-menu-content:not(:empty) {
         padding-bottom: 0;
     }
 
-    &.padding-bottom-8 .mat-menu-content:not(:empty) {
+    &.padding-bottom-8 .mat-mdc-menu-content:not(:empty) {
         padding-bottom: 8px;
     }
 
-    .mat-menu-item {
+    .mat-mdc-menu-item {
         font-size: var(--iqser-font-size);
         color: var(--iqser-text);
-        padding: 0 26px 0 8px;
-        margin: 0 8px 2px 8px;
+        padding: 0 26px 0 8px !important;
+        margin: var(--iqser-menu-item-margin);
         border-radius: 4px;
         width: -webkit-fill-available;
 
@@ -35,6 +35,7 @@
 
         mat-icon {
             color: var(--iqser-text);
+            width: 14px;
         }
 
         .dot {
@@ -57,7 +58,7 @@
         }
 
         &.padding-left {
-            padding-left: 56px;
+            padding-left: 56px !important;
         }
 
         &:last-of-type {
@@ -76,13 +77,17 @@
         }
 
         &.active {
-            font-weight: 600;
+            > span {
+                font-weight: 600;
+            }
+
             padding-right: 8px;
             justify-content: space-between;
 
             .checkmark {
                 display: flex;
                 margin-left: 16px;
+                order: 1;
             }
         }
     }

src/assets/styles/common-progress-bar.scss

@@ -1,20 +1,18 @@
-.mat-progress-bar {
-    height: 6px;
+.mat-mdc-progress-bar {
+    --mdc-linear-progress-track-height: 6px;
+    --mdc-linear-progress-active-indicator-color: var(--iqser-white);
+
     border-radius: 3px;
 
-    .mat-progress-bar-buffer {
+    .mdc-linear-progress__buffer-bar {
         background-color: var(--iqser-grey-5);
     }
 
-    &.white {
-        .mat-progress-bar-fill::after {
-            background-color: var(--iqser-white);
-        }
+    &.primary {
+        --mdc-linear-progress-active-indicator-color: var(--iqser-primary);
     }
 
     &.green {
-        .mat-progress-bar-fill::after {
-            background-color: var(--iqser-green-2);
-        }
+        --mdc-linear-progress-active-indicator-color: var(--iqser-green-2);
     }
 }

src/assets/styles/common-progress-spinner.scss

@@ -0,0 +1,3 @@
+.mat-mdc-progress-spinner {
+    --mdc-circular-progress-active-indicator-color: var(--iqser-primary);
+}

src/assets/styles/common-radio.scss

@@ -1,8 +0,0 @@
-.mat-radio-group {
-    display: flex;
-    flex-direction: column;
-}
-
-.mat-radio-button:not(:last-child) {
-    margin-bottom: 8px;
-}

src/assets/styles/common-select.scss

@@ -1,42 +1,59 @@
 @use 'common-mixins';
 
-.mat-select-panel {
+.mat-mdc-select {
+    padding: 0 calc(var(--iqser-inputs-height) - 25px);
+    box-sizing: border-box;
+    --mat-select-trigger-text-line-height: var(--iqser-inputs-height);
+    --mat-select-trigger-text-size: var(--iqser-inputs-font-size);
+}
+
+.mat-mdc-select-panel {
     padding: 7px 0 !important;
+    min-width: fit-content;
     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-option {
-        margin: 1px 8px;
-        border-radius: 4px;
-        color: var(--iqser-text);
+.mat-mdc-select-arrow-wrapper {
+    margin-left: 10px;
+}
 
-        &:hover:not(.mat-option-disabled),
-        &:focus:not(.mat-option-disabled) {
-            background-color: var(--iqser-btn-bg);
-        }
+.mat-mdc-option {
+    margin: 1px 8px;
+    border-radius: 4px;
+    color: var(--iqser-text);
 
-        &.mat-selected:not(.mat-option-multiple) {
-            background-color: rgba(var(--iqser-primary-rgb), 0.2);
-        }
+    &:hover:not(.mdc-list-item--disabled, .mdc-list-item--selected),
+    &:focus:not(.mdc-list-item--disabled, .mdc-list-item--selected) {
+        background-color: var(--iqser-btn-bg);
+    }
 
-        &.mat-option-disabled {
-            color: rgba(var(--iqser-text-rgb), 0.7);
-        }
+    &.mdc-list-item--selected {
+        background-color: rgba(var(--iqser-primary-rgb), 0.2) !important;
+        color: var(--iqser-primary);
+    }
+
+    &.mdc-list-item--disabled {
+        color: rgba(var(--iqser-text-rgb), 0.7);
+    }
+
+    > span {
+        width: 100%;
     }
 }
 
-.mat-form-field.no-label .mat-form-field-infix {
-    padding: 0 !important;
-    border-top: 0 !important;
+.mat-mdc-select-value {
+    color: var(--iqser-text);
 }
 
-mat-select {
-    .mat-select-value,
-    .mat-select-arrow {
-        color: var(--iqser-text);
-    }
-
-    .mat-select-arrow {
-        margin-left: 6px;
+.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 {
+    display: none;
+}

src/assets/styles/common-side-nav.scss

@@ -19,7 +19,7 @@ iqser-side-nav {
 
     .item {
         margin-bottom: 4px;
-        border-radius: 20px;
+        border-radius: var(--iqser-side-nav-item-radius);
         padding: 9px 16px;
         cursor: pointer;
         transition: background-color 0.2s;

src/assets/styles/common-slider.scss

@@ -1,48 +1,26 @@
-.mat-slider-horizontal {
-    width: 140px;
-    height: 32px !important;
+.mat-mdc-slider .mdc-slider__track .mdc-slider__track--inactive {
+    --mdc-slider-inactive-track-color: var(--iqser-toggle-bg);
+    opacity: 1;
+}
 
-    .mat-slider-wrapper {
-        left: 0 !important;
-        top: 16px !important;
-    }
+.mat-mdc-slider.mdc-slider {
+    margin-left: 0;
+    margin-right: 0;
 
-    .mat-slider-track-wrapper,
-    .mat-slider-track-fill {
-        height: 6px !important;
-        border-radius: 3px;
-    }
+    --mdc-slider-handle-width: 16px;
+    --mdc-slider-handle-height: 16px;
+    --mdc-slider-handle-elevation: none;
+    --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;
 
-    // For disabled state
-    .mat-slider-track-fill {
-        background-color: var(--iqser-primary);
-    }
-
-    .mat-slider-track-background {
-        height: 4px !important;
-        margin-top: 1px;
-        border-radius: 3px;
-        background-color: var(--iqser-toggle-bg) !important;
-    }
-
-    .mat-slider-focus-ring {
-        display: none;
+    &.mdc-slider--disabled {
+        opacity: 1;
     }
 }
 
-.mat-slider-thumb {
-    width: 16px !important;
-    height: 16px !important;
-    border-width: 0 !important;
-    background-color: var(--iqser-primary) !important;
-}
-
-.mat-slider:not(.mat-slider-disabled):not(.mat-slider-sliding) .mat-slider-thumb {
-    transform: scale(1) !important;
-}
-
-.mat-slider-horizontal.mat-slider-disabled {
-    .mat-slider-thumb {
-        transform: translateX(-3px);
-    }
+.mdc-slider__value-indicator-text {
+    white-space: nowrap;
 }

src/assets/styles/common-styles.scss

@@ -1,3 +1,5 @@
+@use 'ngx-toastr/toastr';
+
 @use 'common-utilities';
 @use 'common-inputs';
 @use 'common-buttons';
@@ -12,12 +14,14 @@
 @use 'common-breadcrumbs';
 @use 'common-autocomplete';
 @use 'common-checkbox';
+@use 'common-chips';
 @use 'common-controls';
 @use 'common-help-mode';
 @use 'common-list';
 @use 'common-loading';
 @use 'common-media-queries';
 @use 'common-progress-bar';
+@use 'common-progress-spinner';
 @use 'common-select';
 @use 'common-slider';
 @use 'common-tabs';
@@ -26,7 +30,7 @@
 @use 'common-toggle-button';
 @use 'common-tooltips';
 @use 'common-file-drop';
+@use 'common-file-upload';
 @use 'common-side-nav';
-@use 'common-radio';
 @use 'common-color-picker';
 @use 'common-skeleton';

src/assets/styles/common-tables.scss

@@ -8,10 +8,7 @@
     flex: 1;
     align-items: center;
     justify-content: flex-end;
-
-    > *:not(:last-child) {
-        margin-right: 10px;
-    }
+    gap: 10px;
 }
 
 .header-item {
@@ -23,6 +20,7 @@
     border-bottom: 1px solid var(--iqser-separator);
     box-sizing: border-box;
     padding: 0 24px;
+    gap: 10px;
 
     .header-title {
         display: flex;
@@ -34,17 +32,10 @@
         padding: 0 24px 0 10px;
     }
 
-    > *:not(:last-child) {
-        margin-right: 10px;
-    }
-
     .actions {
         display: flex;
         align-items: center;
         justify-content: flex-end;
-
-        > *:not(:last-child) {
-            margin-right: 16px;
-        }
+        gap: 16px;
     }
 }

src/assets/styles/common-texts.scss

@@ -1,5 +1,10 @@
 @use 'common-mixins' as mixins;
 
+* {
+    -webkit-font-smoothing: subpixel-antialiased;
+    -moz-osx-font-smoothing: auto;
+}
+
 .text-muted {
     opacity: 0.7;
 }
@@ -73,6 +78,12 @@ pre {
     line-height: 24px;
 }
 
+.heading-md {
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 22px;
+}
+
 .heading {
     font-size: 16px;
     line-height: 20px;
@@ -97,7 +108,10 @@ pre {
     font-size: 11px;
     line-height: 14px;
     font-weight: initial;
-    @extend .text-muted;
+
+    &:not(.full-opacity) {
+        @extend .text-muted;
+    }
 }
 
 .link-action {
@@ -135,6 +149,10 @@ pre {
     @include mixins.line-clamp(4);
 }
 
+.clamp-5 {
+    @include mixins.line-clamp(5);
+}
+
 .no-wrap {
     white-space: nowrap;
 }

src/assets/styles/common-toasts.scss

@@ -84,11 +84,11 @@ $toast-width: 400px;
 }
 
 .toast-success {
-    background-color: var(--iqser-green-2);
+    background-color: #5ce594;
 }
 
 .toast-error {
-    background-color: var(--iqser-red-1);
+    background-color: #dd4d50;
     color: var(--iqser-white);
 }
 

src/assets/styles/common-toggle.scss

@@ -1,41 +1,59 @@
-.mat-slide-toggle {
-    .mat-slide-toggle-bar {
-        height: 16px !important;
-        width: 30px !important;
-        border-radius: 16px !important;
-        background-color: var(--iqser-toggle-bg);
+.mat-mdc-slide-toggle {
+    .mdc-switch {
+        --mdc-switch-handle-elevation: none;
+        --mdc-switch-handle-elevation-shadow: 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-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-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-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;
     }
 
-    .mat-slide-toggle-thumb-container {
-        top: 2px !important;
-        left: 2px !important;
-        height: 12px !important;
-        width: 12px !important;
+    .mdc-form-field > label {
+        margin-left: 8px;
+        padding-left: 0;
     }
 
-    .mat-slide-toggle-thumb {
-        height: 12px !important;
-        width: 12px !important;
-        box-shadow: none;
-        background-color: var(--iqser-alt-background);
-    }
-
-    .mat-ripple {
+    .mdc-switch__icons,
+    .mdc-switch__ripple {
         display: none;
     }
-
-    &.mat-primary.mat-checked {
-        .mat-slide-toggle-bar {
-            background-color: var(--iqser-primary);
-            border: 1px solid var(--iqser-background);
-        }
-
-        .mat-slide-toggle-thumb {
-            background-color: var(--iqser-background);
-        }
-
-        .mat-slide-toggle-thumb-container {
-            transform: translate3d(14px, 0, 0);
-        }
-    }
 }

src/assets/styles/common-tooltips.scss

@@ -1,29 +1,34 @@
-.mat-tooltip {
-    background-color: var(--iqser-accent);
-    border-radius: 3px !important;
-    padding: 10px;
-    margin: 12px !important;
-    font-size: 11px;
-    line-height: 14px;
-    color: var(--iqser-white) !important;
-    position: relative;
-    overflow: visible !important;
-    text-align: center;
+.mdc-tooltip {
+    .mdc-tooltip__surface {
+        --mdc-plain-tooltip-supporting-text-tracking: 0;
 
-    &.multiline {
-        white-space: pre-line;
-        text-align: left;
+        background-color: var(--iqser-accent);
+        border-radius: 3px !important;
+        padding: 10px;
+        margin: 12px !important;
+        font-size: 11px;
+        line-height: 14px;
+        color: var(--iqser-white) !important;
+        position: relative;
+        overflow: visible !important;
+        text-align: center !important;
+        max-width: unset;
     }
 
-    &.break-all {
-        word-break: break-all;
-    }
-
-    &.small {
+    &.small .mdc-tooltip__surface {
         max-width: 160px;
     }
 
-    &.warn {
+    &.multiline .mdc-tooltip__surface {
+        white-space: pre-line;
+        text-align: left !important;
+    }
+
+    &.break-all .mdc-tooltip__surface {
+        word-break: break-all;
+    }
+
+    &.warn .mdc-tooltip__surface {
         background-color: var(--iqser-yellow-2);
         color: var(--iqser-accent) !important;
     }

src/assets/styles/common-utilities.scss

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

src/index.ts

@@ -1,24 +1,15 @@
-export * from './lib/common-ui.module';
 export * from './lib/buttons';
 export * from './lib/dialog';
 export * from './lib/form';
 export * from './lib/listing';
-export * from './lib/filtering';
 export * from './lib/help-mode';
-export * from './lib/icons';
-export * from './lib/inputs';
-export * from './lib/utils';
-export * from './lib/sorting';
 export * from './lib/services';
-export * from './lib/shared';
 export * from './lib/loading';
 export * from './lib/error';
 export * from './lib/search';
 export * from './lib/upload-file';
-export * from './lib/empty-states';
-export * from './lib/scrollbar';
 export * from './lib/caching';
-export * from './lib/users';
 export * from './lib/translations';
-export * from './lib/standalone';
+export * from './lib/pipes';
 export * from './lib/permissions';
+export * from './lib/directives';

src/lib/buttons/buttons.module.ts

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
-import { TranslateModule } from '@ngx-translate/core';
-import { ChevronButtonComponent } from './chevron-button/chevron-button.component';
-import { CircleButtonComponent } from './circle-button/circle-button.component';
-import { IconButtonComponent } from './icon-button/icon-button.component';
-import { IqserIconsModule } from '../icons';
-
-const matModules = [MatButtonModule, MatTooltipModule];
-const components = [ChevronButtonComponent, CircleButtonComponent, IconButtonComponent];
-
-@NgModule({
-    declarations: [...components],
-    imports: [CommonModule, IqserIconsModule, TranslateModule, ...matModules],
-    exports: [...components],
-})
-export class IqserButtonsModule {}

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

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

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

@@ -1,5 +1,5 @@
 button {
-    padding: 0 10px 0 14px;
+    --mat-text-button-with-icon-horizontal-padding: 10px 0 14px;
 
     mat-icon {
         width: 14px;

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

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

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

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

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

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

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

@@ -1,47 +1,16 @@
-:host {
-    height: var(--size);
-    width: var(--size);
-    align-items: center;
+:host > div {
+    width: var(--circle-button-size);
+    height: var(--circle-button-size);
 
-    button {
-        height: var(--size);
-        width: var(--size);
-        line-height: var(--size);
+    .arrow-down {
+        border: 5px solid transparent;
+        border-top-color: black;
+        position: fixed;
+        margin-left: 12px;
+        margin-top: -8px;
 
-        mat-icon {
-            width: var(--iconSize);
-            height: var(--iconSize);
-            line-height: var(--iconSize);
-            margin: 0;
-
-            svg {
-                line-height: var(--iconSize);
-            }
+        &.disabled {
+            border-top-color: var(--iqser-grey-3);
         }
-
-        &.mat-button-disabled {
-            cursor: not-allowed;
-
-            &:not(.primary):not(.warn):not(.dark-bg):hover {
-                background-color: var(--iqser-btn-bg);
-            }
-        }
-
-        &.primary.mat-button-disabled {
-            color: #ffffff80;
-        }
-
-        &.warn:not([disabled]) {
-            background-color: var(--iqser-warn);
-            color: var(--iqser-accent);
-
-            &:hover {
-                background-color: var(--iqser-warn);
-            }
-        }
-    }
-
-    &.primary mat-icon {
-        color: var(--iqser-primary);
     }
 }

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

@@ -1,53 +1,62 @@
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { MatLegacyTooltip as MatTooltip } from '@angular/material/legacy-tooltip';
+import {
+    booleanAttribute,
+    ChangeDetectionStrategy,
+    Component,
+    effect,
+    ElementRef,
+    EventEmitter,
+    inject,
+    input,
+    numberAttribute,
+    Output,
+    viewChild,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
+import { RouterLink } from '@angular/router';
+import { StopPropagationDirective } from '../../directives';
+import { IqserTooltipPosition, IqserTooltipPositions, randomString } from '../../utils';
 import { CircleButtonType, CircleButtonTypes } from '../types/circle-button.type';
-import { IqserTooltipPosition, IqserTooltipPositions } from '../../utils';
 
 @Component({
-    selector: 'iqser-circle-button [icon]',
+    selector: 'iqser-circle-button',
     templateUrl: './circle-button.component.html',
     styleUrls: ['./circle-button.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [MatTooltipModule, MatIconModule, MatButtonModule, StopPropagationDirective],
 })
-export class CircleButtonComponent implements OnInit {
-    readonly circleButtonTypes = CircleButtonTypes;
-
-    @Input() id!: string;
-    @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;
+export class CircleButtonComponent {
+    readonly #elementRef = inject(ElementRef<HTMLElement>);
+    protected readonly _matTooltip = viewChild.required(MatTooltip);
+    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;
-
-    constructor(private readonly _elementRef: ElementRef) {}
-
-    get buttonId(): string {
-        return `${Math.random().toString(36).substring(2, 9)}-button`;
+    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 as HTMLElement).style.setProperty('--size', `${this.size}px`);
-        (this._elementRef.nativeElement as HTMLElement).style.setProperty('--iconSize', `${this.iconSize}px`);
-    }
-
-    performAction($event: MouseEvent): void {
-        if (this.disabled) {
-            return;
-        }
-
-        if (this.removeTooltip) {
-            this._matTooltip.hide();
+    performAction($event: MouseEvent) {
+        if (this.removeTooltip()) {
+            this._matTooltip().hide();
             // Timeout to allow tooltip to disappear first,
             // useful when removing an item from the list without a confirmation dialog
             setTimeout(() => this.action.emit($event));

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

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

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

@@ -1,20 +0,0 @@
-button {
-    padding: 0 14px;
-    width: 100%;
-
-    &.has-icon {
-        padding: 0 14px 0 10px;
-    }
-
-    &.dark {
-        background-color: var(--iqser-btn-bg);
-
-        &:not(.mat-button-disabled):hover {
-            background-color: var(--iqser-btn-bg-hover);
-        }
-    }
-
-    mat-icon {
-        width: 14px;
-    }
-}

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

@@ -1,34 +1,42 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, EventEmitter, inject, input, Output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { RouterLink } from '@angular/router';
+import { StopPropagationDirective } from '../../directives';
+import { randomString } from '../../utils';
 import { IconButtonType, IconButtonTypes } from '../types/icon-button.type';
 
 @Component({
-    selector: 'iqser-icon-button [label]',
+    selector: 'iqser-icon-button',
     templateUrl: './icon-button.component.html',
-    styleUrls: ['./icon-button.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgClass, MatButtonModule, MatIconModule, StopPropagationDirective],
 })
 export class IconButtonComponent {
-    readonly iconButtonTypes = IconButtonTypes;
-    readonly buttonId: string;
-
-    @Input() label!: string;
-    @Input() id?: string;
-    @Input() icon?: string;
-    @Input() showDot = false;
-    @Input() disabled = false;
-    @Input() submit = false;
-    @Input() type: IconButtonType = IconButtonTypes.default;
+    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(),
+        };
+    });
     @Output() readonly action = new EventEmitter<MouseEvent>();
 
-    constructor() {
-        this.buttonId = `${Math.random().toString(36).substring(2, 9)}-button`;
-    }
-
-    get classes(): Record<string, boolean> {
-        return {
-            overlay: this.showDot,
-            [this.type]: true,
-            'has-icon': !!this.icon,
-        };
+    emitAction($event: MouseEvent) {
+        const activeElement = document.activeElement as HTMLElement;
+        if (activeElement.tagName?.toLowerCase() === 'button') {
+            this.action.emit($event);
+        }
     }
 }

src/lib/buttons/index.ts

@@ -1,8 +1,5 @@
-export * from './buttons.module';
-
 export * from './types/icon-button.type';
 export * from './types/circle-button.type';
 
 export * from './icon-button/icon-button.component';
 export * from './circle-button/circle-button.component';
-export * from './chevron-button/chevron-button.component';

src/lib/buttons/types/circle-button.type.ts

@@ -3,7 +3,6 @@ export const CircleButtonTypes = {
     primary: 'primary',
     warn: 'warn',
     dark: 'dark',
-    help: 'help',
 } as const;
 
 export type CircleButtonType = keyof typeof CircleButtonTypes;

src/lib/buttons/types/icon-button.type.ts

@@ -2,7 +2,6 @@ export const IconButtonTypes = {
     default: 'default',
     dark: 'dark',
     primary: 'primary',
-    help: 'help',
 } as const;
 
 export type IconButtonType = keyof typeof IconButtonTypes;

src/lib/caching/cache-api.service.ts

@@ -12,7 +12,11 @@ export class CacheApiService {
     }
 
     get cachesAvailable(): boolean {
-        return !!window.caches;
+        try {
+            return !!caches;
+        } catch (e) {
+            return false;
+        }
     }
 
     cacheRequest(request: HttpRequest<any>, httpResponse: HttpResponse<any>) {
@@ -20,6 +24,10 @@ export class CacheApiService {
             return;
         }
 
+        if (!this.cachesAvailable) {
+            return;
+        }
+
         const url = this._buildUrl(request);
         for (const dynCache of this._dynamicCaches) {
             for (const cacheUrl of dynCache.urls) {
@@ -35,6 +43,10 @@ export class CacheApiService {
 
     async wipeCaches(logoutDependant = false) {
         // console.log('[CACHE-API] delete app level cache ');
+        if (!this.cachesAvailable) {
+            return;
+        }
+
         await caches.delete(APP_LEVEL_CACHE);
 
         for (const cache of this._dynamicCaches) {
@@ -234,6 +246,10 @@ export class CacheApiService {
 
     private async _handleCacheExpiration(dynCache: DynamicCache, now: number) {
         // console.log('[CACHE-API] checking cache expiration');
+        if (!this.cachesAvailable) {
+            return;
+        }
+
         const cache = await caches.open(dynCache.name);
         let keys = await cache.keys();
         // removed expired;

src/lib/caching/cache-utils.ts

@@ -6,20 +6,21 @@ export const APP_LEVEL_CACHE = 'app-level-cache';
 export const DYNAMIC_CACHES = new InjectionToken<DynamicCaches>('dynamic-caches');
 
 export async function wipeAllCaches() {
-    console.log('get caches keys');
-    const keys = await caches.keys();
+    const keys = (await caches?.keys()) ?? [];
     for (const cache of keys) {
         await wipeCache(cache);
     }
 }
 
 export function wipeCache(cacheName: string) {
-    console.log('delete cache: ', cacheName);
-    return caches.delete(cacheName);
+    return caches?.delete(cacheName);
 }
 
 export async function wipeCacheEntry(cacheName: string, entry: string) {
-    console.log('open cache: ', cacheName);
+    if (!caches) {
+        return;
+    }
+
     const cache = await caches.open(cacheName);
     return cache.delete(entry, { ignoreSearch: false });
 }

src/lib/caching/dynamic-cache.ts

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

src/lib/common-ui.module.ts

@@ -1,72 +1,61 @@
-import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
+import { inject, ModuleWithProviders, NgModule, Optional, Provider, SkipSelf } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
+import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { SortByPipe } from './sorting';
-import { CommonUiOptions, IqserAppConfig, ModuleWithOptions } from './utils';
-import { HiddenActionComponent, ToastComponent } from './shared';
+import { CommonUiOptions, IqserAppConfig, ModuleOptions } from './utils';
 import { ConnectionStatusComponent, FullPageErrorComponent } from './error';
-import { IqserListingModule } from './listing';
-import { IqserFiltersModule } from './filtering';
-import { IqserInputsModule } from './inputs';
-import { IqserIconsModule } from './icons';
-import { IqserButtonsModule } from './buttons';
-import { IqserScrollbarModule } from './scrollbar';
-import { IqserEmptyStatesModule } from './empty-states';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
-import { ConfirmationDialogComponent } from './dialog';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { ApiPathInterceptor, DefaultUserPreferenceService, IqserConfigService, IqserUserPreferenceService } from './services';
-import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
-import { IqserSkeletonModule } from './skeleton/skeleton.module';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { MatDialogModule } from '@angular/material/dialog';
+import { CircleButtonComponent, IconButtonComponent } from './buttons';
+import { DomSanitizer } from '@angular/platform-browser';
+import { ICONS } from './utils/constants';
+import { StopPropagationDirective } from './directives';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 
-const matModules = [
-    MatIconModule,
-    MatProgressSpinnerModule,
-    MatButtonModule,
-    MatDialogModule,
-    MatCheckboxModule,
-    MatTooltipModule,
-    MatProgressBarModule,
-];
-const modules = [
-    IqserIconsModule,
-    IqserButtonsModule,
-    IqserListingModule,
-    IqserFiltersModule,
-    IqserInputsModule,
-    IqserScrollbarModule,
-    IqserEmptyStatesModule,
-    IqserSkeletonModule,
-    HttpClientModule,
-];
-const components = [ConnectionStatusComponent, FullPageErrorComponent, HiddenActionComponent, ConfirmationDialogComponent, ToastComponent];
-
-const pipes = [SortByPipe];
+const matModules = [MatIconModule, MatButtonModule, MatDialogModule, MatCheckboxModule, MatTooltipModule, MatProgressBarModule];
+const components = [ConnectionStatusComponent, FullPageErrorComponent];
 
 @NgModule({
-    declarations: [...components, ...pipes],
-    imports: [CommonModule, ...matModules, ...modules, FormsModule, ReactiveFormsModule, TranslateModule],
-    exports: [...components, ...pipes, ...modules],
+    declarations: [...components],
+    imports: [
+        CommonModule,
+        ...matModules,
+        FormsModule,
+        ReactiveFormsModule,
+        TranslateModule,
+        IconButtonComponent,
+        CircleButtonComponent,
+        StopPropagationDirective,
+    ],
+    exports: [...components],
     providers: [
         {
             provide: HTTP_INTERCEPTORS,
             multi: true,
             useClass: ApiPathInterceptor,
         },
+        { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } },
     ],
 })
-export class CommonUiModule extends ModuleWithOptions {
+export class CommonUiModule {
     constructor(@Optional() @SkipSelf() parentModule?: CommonUiModule) {
-        super();
         if (parentModule) {
             throw new Error('CommonUiModule is already loaded. Import it in the AppModule only!');
         }
+
+        const iconRegistry = inject(MatIconRegistry);
+        const sanitizer = inject(DomSanitizer);
+
+        ICONS.forEach(icon => {
+            const url = sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/${icon}.svg`);
+            iconRegistry.addSvgIconInNamespace('iqser', icon, url);
+        });
     }
 
     static forRoot<
@@ -74,7 +63,7 @@ export class CommonUiModule extends ModuleWithOptions {
         Config extends IqserConfigService<AppConfig>,
         AppConfig extends IqserAppConfig = IqserAppConfig,
     >(options: CommonUiOptions<UserPreference, Config, AppConfig>): ModuleWithProviders<CommonUiModule> {
-        const userPreferenceService = this._getService(
+        const userPreferenceService = ModuleOptions.getService(
             IqserUserPreferenceService,
             DefaultUserPreferenceService,
             options.existingUserPreferenceService,
@@ -84,11 +73,11 @@ export class CommonUiModule extends ModuleWithOptions {
 
         return {
             ngModule: CommonUiModule,
-            providers: [userPreferenceService, configServiceProviders],
+            providers: [userPreferenceService, ...configServiceProviders],
         };
     }
 
-    private static _getConfigServiceProviders(configServiceFactory: () => unknown, configService?: unknown) {
+    private static _getConfigServiceProviders(configServiceFactory: () => unknown, configService?: unknown): Provider[] {
         if (configService) {
             return [
                 {

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

@@ -1,36 +1,42 @@
-import { Directive, HostListener, inject, OnDestroy } from '@angular/core';
-import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { AfterViewInit, Directive, HostListener, inject, OnDestroy, signal } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { hasFormChanged, IqserEventTarget } from '../utils';
-import { ConfirmOptions } from '.';
+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 { ConfirmationDialogService } from './confirmation-dialog.service';
-import { firstValueFrom } from 'rxjs';
-import { LoadingService } from '../loading';
-import { Toaster } from '../services';
-import { IconButtonTypes } from '../buttons';
+import { ConfirmOptions } from './confirmation-dialog/confirmation-dialog.component';
 
-const TARGET_NODE = 'mat-dialog-container';
+const DIALOG_CONTAINER = 'mat-dialog-container';
+const TEXT_INPUT = 'text';
 
 export interface SaveOptions {
     closeAfterSave?: boolean;
+    nextAction?: boolean;
     addMembers?: boolean;
 }
 
 @Directive()
-export abstract class BaseDialogComponent implements OnDestroy {
-    readonly iconButtonTypes = IconButtonTypes;
-    form?: UntypedFormGroup;
-    initialFormValue!: Record<string, string>;
+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);
-    readonly #confirmationDialogService = inject(ConfirmationDialogService);
-    readonly #dialog = inject(MatDialog);
-    #backdropClickSubscription = this._dialogRef.backdropClick().subscribe(() => {
-        this.close();
-    });
+    protected readonly _subscriptions = new Subscription();
+    readonly iconButtonTypes = IconButtonTypes;
+    form?: UntypedFormGroup;
+    initialFormValue!: Record<string, string>;
 
-    protected constructor(protected readonly _dialogRef: MatDialogRef<BaseDialogComponent>, private readonly _isInEditMode?: boolean) {}
+    protected constructor(
+        protected readonly _dialogRef: MatDialogRef<BaseDialogComponent>,
+        private readonly _isInEditMode = false,
+    ) {}
 
     get valid(): boolean {
         return !this.form || this.form.valid;
@@ -41,36 +47,59 @@ export abstract class BaseDialogComponent implements OnDestroy {
     }
 
     get disabled(): boolean {
-        return !this.valid || !this.changed;
+        return !this.valid || !this.changed || this._hasErrors();
+    }
+
+    ngAfterViewInit() {
+        this._subscriptions.add(this._dialogRef.backdropClick().subscribe(() => this.close()));
+        const valueChanges = this.form?.valueChanges ?? of(null);
+        const events = [fromEvent(window, 'keyup'), fromEvent(window, 'input'), valueChanges];
+        this._hasErrors.set(!!document.getElementsByClassName('ng-invalid')[0]);
+        const events$ = merge(...events).pipe(
+            debounceTime(10),
+            tap(() => {
+                this._hasErrors.set(!!document.getElementsByClassName('ng-invalid')[0]);
+            }),
+        );
+        this._subscriptions.add(events$.subscribe());
     }
 
     abstract save(options?: SaveOptions): void;
 
     ngOnDestroy(): void {
-        this.#backdropClickSubscription.unsubscribe();
+        this._subscriptions.unsubscribe();
     }
 
-    close(): void {
-        if (this._isInEditMode && this.changed) {
-            this._openConfirmDialog().then(result => {
-                if (result in ConfirmOptions) {
-                    if (result === ConfirmOptions.CONFIRM) {
-                        this.save({ closeAfterSave: true });
-                    } else {
-                        this._dialogRef.close();
-                    }
-                }
-            });
-        } else {
-            this._dialogRef.close();
+    close() {
+        if (!this._isInEditMode || !this.changed) {
+            return this._dialogRef.close();
         }
+
+        this._openConfirmDialog().then(result => {
+            if (result) {
+                if (result === ConfirmOptions.CONFIRM) {
+                    this.save({ closeAfterSave: true });
+                } else {
+                    this._dialogRef.close();
+                }
+            }
+        });
     }
 
     @HostListener('window:keydown.Enter', ['$event'])
     onEnter(event: KeyboardEvent): void {
-        event?.stopImmediatePropagation();
-        const node = (event.target as IqserEventTarget).localName?.trim()?.toLowerCase();
-        if (this.valid && !this.disabled && this.changed && node === TARGET_NODE) {
+        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();
             this.save();
         }
     }
@@ -83,7 +112,7 @@ export abstract class BaseDialogComponent implements OnDestroy {
     }
 
     protected _openConfirmDialog() {
-        const dialogRef = this.#confirmationDialogService.openDialog({ disableConfirm: !this.valid });
+        const dialogRef = this.#confirmationDialogService.open({ disableConfirm: !this.valid });
         return firstValueFrom(dialogRef.afterClosed());
     }
 }

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

@@ -1,41 +1,35 @@
-import { Injectable } from '@angular/core';
-import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { inject, Injectable } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { DialogConfig, DialogService } from '../services';
-import { ConfirmationDialogComponent, ConfirmationDialogInput, TitleColors } from '.';
-
-type DialogType = 'confirm';
+import {
+    ConfirmationDialogComponent,
+    ConfirmOption,
+    IConfirmationDialogData,
+    TitleColors,
+} from './confirmation-dialog/confirmation-dialog.component';
+import { defaultDialogConfig } from './dialog.service';
 
 @Injectable({
     providedIn: 'root',
 })
-export class ConfirmationDialogService extends DialogService<DialogType> {
-    protected readonly _config: DialogConfig<DialogType> = {
-        confirm: {
-            component: ConfirmationDialogComponent,
-            dialogConfig: { disableClose: false },
-        },
-    };
+export class ConfirmationDialogService {
+    readonly #dialog = inject(MatDialog);
 
-    constructor(protected readonly _dialog: MatDialog) {
-        super(_dialog);
-    }
+    open(data?: { disableConfirm: boolean }) {
+        const dialogData: IConfirmationDialogData = {
+            title: _('confirmation-dialog.unsaved-changes.title'),
+            question: _('confirmation-dialog.unsaved-changes.question'),
+            details: _('confirmation-dialog.unsaved-changes.details'),
+            confirmationText: _('confirmation-dialog.unsaved-changes.confirmation-text'),
+            discardChangesText: _('confirmation-dialog.unsaved-changes.discard-changes-text'),
+            disableConfirm: data?.disableConfirm,
+            titleColor: TitleColors.WARN,
+        };
 
-    // @ts-ignore
-    openDialog(data?: { disableConfirm: boolean; [key: string]: unknown }): MatDialogRef<unknown> {
-        return super.openDialog(
-            'confirm',
-            // @ts-ignore
-            undefined,
-            new ConfirmationDialogInput({
-                title: _('confirmation-dialog.unsaved-changes.title'),
-                question: _('confirmation-dialog.unsaved-changes.question'),
-                details: _('confirmation-dialog.unsaved-changes.details'),
-                confirmationText: _('confirmation-dialog.unsaved-changes.confirmation-text'),
-                discardChangesText: _('confirmation-dialog.unsaved-changes.discard-changes-text'),
-                disableConfirm: data?.disableConfirm,
-                titleColor: TitleColors.WARN,
-            }),
-        );
+        return this.#dialog.open<ConfirmationDialogComponent, IConfirmationDialogData, ConfirmOption>(ConfirmationDialogComponent, {
+            ...defaultDialogConfig,
+            disableClose: false,
+            data: dialogData,
+        });
     }
 }

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

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

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

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

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

@@ -1,21 +1,39 @@
-import { ChangeDetectionStrategy, Component, HostListener, Inject, TemplateRef } from '@angular/core';
-import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
-import { TranslateService } from '@ngx-translate/core';
+import { NgTemplateOutlet } from '@angular/common';
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    Component,
+    HostListener,
+    inject,
+    TemplateRef,
+    Type,
+    viewChild,
+    ViewContainerRef,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { IconButtonTypes } from '../../buttons';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { CircleButtonComponent, IconButtonTypes } from '../../buttons';
+import { IconButtonComponent } from '../../buttons';
+import { ValuesOf } from '../../utils';
 
-export type TitleColor = 'default' | 'warn';
+export const TitleColors = {
+    DEFAULT: 'default',
+    WARN: 'warn',
+} as const;
 
-export enum TitleColors {
-    DEFAULT = 'default',
-    WARN = 'warn',
-}
+export type TitleColor = ValuesOf<typeof TitleColors>;
 
-export enum ConfirmOptions {
-    CONFIRM = 1,
-    SECOND_CONFIRM = 2,
-    DISCARD_CHANGES = 3,
-}
+export const ConfirmOptions = {
+    CONFIRM: 1,
+    CONFIRM_WITH_ACTION: 2,
+    DISCARD_CHANGES: 3,
+} as const;
+
+export type ConfirmOption = ValuesOf<typeof ConfirmOptions>;
 
 interface CheckBox {
     value: boolean;
@@ -24,76 +42,75 @@ interface CheckBox {
     extraContentData?: Record<string, unknown>;
 }
 
-interface IConfirmationDialogInput {
-    title?: string;
-    titleColor?: TitleColor;
-    question?: string;
-    details?: string;
-    confirmationText?: string;
-    alternativeConfirmationText?: string;
-    discardChangesText?: string;
-    requireInput?: boolean;
-    disableConfirm?: boolean;
-    denyText?: string;
-    translateParams?: Record<string, unknown>;
-    checkboxes?: CheckBox[];
-    checkboxesValidation?: boolean;
-    toastMessage?: string;
+interface InternalConfirmationDialogData {
+    readonly title: string;
+    readonly titleColor: TitleColor;
+    readonly question: string;
+    readonly details: string;
+    readonly confirmationText: string;
+    readonly alternativeConfirmationText?: string;
+    readonly discardChangesText?: string;
+    readonly requireInput: boolean;
+    readonly disableConfirm: boolean;
+    readonly denyText: string;
+    readonly translateParams?: Record<string, unknown>;
+    readonly checkboxes: CheckBox[];
+    readonly checkboxesValidation: boolean;
+    readonly toastMessage?: string;
+    readonly component?: Type<unknown>;
+    readonly componentInputs?: { [key: string]: unknown };
+    readonly cancelButtonPrimary?: boolean;
 }
 
-export class ConfirmationDialogInput implements IConfirmationDialogInput {
-    title: string;
-    titleColor: TitleColor;
-    question: string;
-    details: string;
-    confirmationText: string;
-    alternativeConfirmationText?: string;
-    discardChangesText?: string;
-    requireInput: boolean;
-    disableConfirm: boolean;
-    denyText: string;
-    translateParams: Record<string, unknown>;
-    checkboxes: CheckBox[];
-    checkboxesValidation: boolean;
-    toastMessage?: string;
+export type IConfirmationDialogData = Partial<InternalConfirmationDialogData>;
 
-    constructor(options?: IConfirmationDialogInput) {
-        this.title = options?.title || _('common.confirmation-dialog.title');
-        this.titleColor = options?.titleColor || TitleColors.DEFAULT;
-        this.question = options?.question || _('common.confirmation-dialog.description');
-        this.details = options?.details || '';
-        this.confirmationText = options?.confirmationText || _('common.confirmation-dialog.confirm');
-        this.alternativeConfirmationText = options?.alternativeConfirmationText;
-        this.discardChangesText = options?.discardChangesText;
-        this.requireInput = options?.requireInput || false;
-        this.disableConfirm = options?.disableConfirm || false;
-        this.denyText = options?.denyText || _('common.confirmation-dialog.deny');
-        this.translateParams = options?.translateParams || {};
-        this.checkboxes = options?.checkboxes || [];
-        this.checkboxesValidation = typeof options?.checkboxesValidation === 'boolean' ? options.checkboxesValidation : true;
-        this.toastMessage = options?.toastMessage;
-    }
+function getConfig(options?: IConfirmationDialogData): InternalConfirmationDialogData {
+    return {
+        ...options,
+        title: options?.title ?? _('common.confirmation-dialog.title'),
+        titleColor: options?.titleColor ?? TitleColors.DEFAULT,
+        question: options?.question ?? _('common.confirmation-dialog.description'),
+        details: options?.details ?? '',
+        confirmationText: options?.confirmationText ?? _('common.confirmation-dialog.confirm'),
+        requireInput: options?.requireInput ?? false,
+        disableConfirm: options?.disableConfirm ?? false,
+        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,
+    };
 }
 
 @Component({
     templateUrl: './confirmation-dialog.component.html',
     styleUrls: ['./confirmation-dialog.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        MatIconModule,
+        FormsModule,
+        MatCheckboxModule,
+        TranslateModule,
+        NgTemplateOutlet,
+        IconButtonComponent,
+        CircleButtonComponent,
+        MatDialogModule,
+    ],
 })
-export class ConfirmationDialogComponent {
-    config: ConfirmationDialogInput;
+export class ConfirmationDialogComponent implements AfterViewInit {
+    readonly config = getConfig(inject(MAT_DIALOG_DATA));
     inputValue = '';
     showToast = false;
     readonly inputLabel: string;
-    readonly ConfirmOptions = ConfirmOptions;
+    readonly confirmOptions = ConfirmOptions;
     readonly iconButtonTypes = IconButtonTypes;
+    readonly detailsComponentRef = viewChild.required('detailsComponent', { read: ViewContainerRef });
 
     constructor(
-        private readonly _dialogRef: MatDialogRef<ConfirmationDialogComponent>,
+        private readonly _dialogRef: MatDialogRef<ConfirmationDialogComponent, ConfirmOption>,
         private readonly _translateService: TranslateService,
-        @Inject(MAT_DIALOG_DATA) private readonly _confirmationDialogInput: ConfirmationDialogInput,
     ) {
-        this.config = _confirmationDialogInput ?? new ConfirmationDialogInput();
         this.translate(this.config);
         this.inputLabel = `${this._translateService.instant('confirmation-dialog.input-label')} '${this.config.confirmationText || ''}'`;
     }
@@ -103,32 +120,38 @@ export class ConfirmationDialogComponent {
     }
 
     get isDeleteAction(): boolean {
-        return this.config?.titleColor === TitleColors.WARN;
+        return this.config.titleColor === TitleColors.WARN;
     }
 
-    get confirmOption(): ConfirmOptions {
+    get confirmOption(): ConfirmOption {
         if (!this.config.checkboxesValidation && this.config.checkboxes[0]?.value) {
-            return ConfirmOptions.SECOND_CONFIRM;
+            return ConfirmOptions.CONFIRM_WITH_ACTION;
         }
         return ConfirmOptions.CONFIRM;
     }
 
-    @HostListener('window:keyup.enter')
-    onKeyupEnter(): void {
-        if (this.config.requireInput && !this.confirmationDoesNotMatch()) {
-            this.confirm(1);
+    @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();
         }
     }
 
-    confirmationDoesNotMatch(): boolean {
-        return this.inputValue.toLowerCase() !== this.config.confirmationText?.toLowerCase();
+    ngAfterViewInit() {
+        this.#initializeDetailsComponent();
     }
 
-    deny(): void {
+    confirmationDoesNotMatch(): boolean {
+        return this.inputValue.toLowerCase() !== this.config.confirmationText.toLowerCase();
+    }
+
+    deny() {
         this._dialogRef.close();
     }
 
-    confirm(option: ConfirmOptions): void {
+    confirm(option: ConfirmOption) {
         if (this.uncheckedBoxes) {
             this.showToast = true;
         } else {
@@ -136,8 +159,8 @@ export class ConfirmationDialogComponent {
         }
     }
 
-    translate(obj: ConfirmationDialogInput): void {
-        const translateKeys: (keyof typeof obj)[] = [
+    translate(obj: InternalConfirmationDialogData) {
+        const translateKeys: (keyof InternalConfirmationDialogData)[] = [
             'title',
             'question',
             'details',
@@ -147,12 +170,20 @@ export class ConfirmationDialogComponent {
             'denyText',
         ];
 
-        translateKeys
-            .filter(key => !!obj[key])
-            .forEach(key => {
-                Object.assign(obj, {
-                    [key]: this._translateService.instant(obj[key] as string, this.config.translateParams) as string,
-                });
-            });
+        const filtered = translateKeys.filter(key => !!obj[key]);
+        filtered.forEach(key => {
+            const value = this._translateService.instant(obj[key] as string, this.config.translateParams);
+            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;
+            }
+        }
     }
 }

src/lib/dialog/dialog.service.ts

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

src/lib/dialog/index.ts

@@ -1,3 +1,6 @@
 export * from './base-dialog.component';
 export * from './confirmation-dialog.service';
 export * from './confirmation-dialog/confirmation-dialog.component';
+export * from './dialog.service';
+export * from './iqser-dialog-component.directive';
+export * from './iqser-dialog.service';

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

@@ -0,0 +1,82 @@
+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 { hasFormChanged, IqserEventTarget } from '../utils';
+
+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;
+
+@Directive()
+export abstract class IqserDialogComponent<ComponentType, DataType = null, ReturnType = void> {
+    readonly [DATA_TYPE_SYMBOL]!: DataType;
+    readonly [RETURN_TYPE_SYMBOL]!: ReturnType;
+
+    readonly iconButtonTypes = IconButtonTypes;
+    readonly dialogRef = inject(MatDialogRef<ComponentType, ReturnType>);
+    readonly data = inject<DataType>(MAT_DIALOG_DATA);
+    readonly dialog = inject(MatDialog);
+    readonly form?: FormGroup;
+    readonly ignoredKeys: string[] = [];
+
+    initialFormValue: Record<string, unknown> = {};
+
+    constructor(private readonly _editMode = false) {
+        this.dialogRef
+            .backdropClick()
+            .pipe(takeUntilDestroyed())
+            // eslint-disable-next-line rxjs/no-ignored-subscription
+            .subscribe(() => this.dialogRef.close());
+    }
+
+    get valid(): boolean {
+        return !this.form || this.form.valid;
+    }
+
+    get changed(): boolean {
+        return !this.form || hasFormChanged(this.form, this.initialFormValue, this.ignoredKeys);
+    }
+
+    get disabled(): boolean {
+        return !this.valid || !this.changed;
+    }
+
+    @HostListener('window:keydown.Escape', ['$event'])
+    onEscape(): void {
+        if (this.dialog.openDialogs.length === 1) {
+            this.dialogRef.close();
+        }
+    }
+
+    @HostListener('window:keydown.Enter', ['$event'])
+    onEnter(event: KeyboardEvent): void {
+        event?.stopImmediatePropagation();
+        if (this.onEnterValidator(event)) {
+            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;
+    }
+
+    close(dialogResult?: ReturnType) {
+        this.dialogRef.close(dialogResult);
+    }
+}
+
+/**
+ * This is for testing only
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class DialogComponentImpl extends IqserDialogComponent<DialogComponentImpl, unknown, unknown> {}

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

@@ -0,0 +1,44 @@
+import { ComponentType } from '@angular/cdk/portal';
+import { inject, Injectable } from '@angular/core';
+import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { firstValueFrom } from 'rxjs';
+import { defaultDialogConfig, largeDialogConfig } from './dialog.service';
+import { DATA_TYPE, IqserDialogComponent, RETURN_TYPE } from './iqser-dialog-component.directive';
+
+@Injectable({
+    providedIn: 'root',
+})
+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);
+        return {
+            ...ref,
+            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]>) {
+        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]>) {
+        return this.open<Component, Data, Return>(dialog, { ...defaultDialogConfig, ...config });
+    }
+}

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

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

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

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

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

@@ -0,0 +1,45 @@
+import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
+
+@Directive({
+    selector: '[iqserHiddenAction]',
+})
+export class HiddenActionDirective {
+    @Input() requiredClicks = 4;
+    @Output() readonly iqserHiddenAction = new EventEmitter();
+
+    #dPressed = false;
+    #clickCount = 0;
+    #clickCountTimeout?: ReturnType<typeof setTimeout>;
+
+    @HostListener('window:keydown.D')
+    onKeydownD() {
+        this.#dPressed = true;
+    }
+
+    @HostListener('window:keyup.D')
+    onKeyupD() {
+        this.#dPressed = false;
+    }
+
+    @HostListener('click', ['$event'])
+    countActions($event: MouseEvent): void {
+        if (!this.#dPressed) {
+            this.#clickCount = 0;
+            clearTimeout(this.#clickCountTimeout);
+            return;
+        }
+
+        $event.stopPropagation();
+        $event.preventDefault();
+
+        this.#clickCount += 1;
+
+        if (this.#clickCount === this.requiredClicks) {
+            this.#clickCount = 0;
+            this.iqserHiddenAction.emit();
+        }
+
+        clearTimeout(this.#clickCountTimeout);
+        this.#clickCountTimeout = setTimeout(() => (this.#clickCount = 0), 1000);
+    }
+}

src/lib/directives/index.ts

@@ -0,0 +1,6 @@
+export * from './hidden-action.directive';
+export * from './stop-propagation.directive';
+export * from './disable-stop-propagation.directive';
+export * from './prevent-default.directive';
+export * from './has-scrollbar.directive';
+export * from './sync-width.directive';

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

@@ -0,0 +1,18 @@
+import { booleanAttribute, Directive, HostListener, inject, Input } from '@angular/core';
+import { NGXLogger } from 'ngx-logger';
+
+@Directive({
+    selector: '[iqserPreventDefault]',
+})
+export class PreventDefaultDirective {
+    readonly #logger = inject(NGXLogger);
+    @Input({ transform: booleanAttribute }) iqserPreventDefault = true;
+
+    @HostListener('click', ['$event'])
+    onClick($event: Event) {
+        if (this.iqserPreventDefault) {
+            this.#logger.info('[CLICK] iqserPreventDefault');
+            $event.preventDefault();
+        }
+    }
+}

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

@@ -0,0 +1,26 @@
+import { booleanAttribute, Directive, HostListener, inject, Input } from '@angular/core';
+import { NGXLogger } from 'ngx-logger';
+import { DisableStopPropagationDirective } from './disable-stop-propagation.directive';
+
+@Directive({
+    selector: '[iqserStopPropagation]',
+})
+export class StopPropagationDirective {
+    readonly #disableStopPropagation = inject(DisableStopPropagationDirective, { optional: true });
+    readonly #logger = inject(NGXLogger);
+    @Input({ transform: booleanAttribute }) iqserStopPropagation = true;
+
+    @HostListener('click', ['$event'])
+    onClick($event: Event) {
+        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();
+        }
+    }
+}

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

@@ -5,24 +5,24 @@ import { Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/
 })
 export class SyncWidthDirective implements OnDestroy {
     @Input() iqserSyncWidth!: string;
-    private readonly _interval: number;
+    readonly #interval: number;
 
     constructor(private readonly _elementRef: ElementRef) {
-        this._interval = window.setInterval(() => {
-            this._matchWidth();
+        this.#interval = window.setInterval(() => {
+            this.#matchWidth();
         }, 1000);
     }
 
-    ngOnDestroy(): void {
-        window.clearInterval(this._interval);
+    ngOnDestroy() {
+        window.clearInterval(this.#interval);
     }
 
     @HostListener('window:resize')
-    onResize(): void {
-        this._matchWidth();
+    onResize() {
+        this.#matchWidth();
     }
 
-    private _matchWidth() {
+    #matchWidth() {
         const headerItems = (this._elementRef.nativeElement as HTMLElement).children;
         const tableRows = (this._elementRef.nativeElement as HTMLElement).parentElement?.parentElement?.getElementsByClassName(
             this.iqserSyncWidth,
@@ -34,7 +34,7 @@ export class SyncWidthDirective implements OnDestroy {
 
         (this._elementRef.nativeElement as HTMLElement).setAttribute('synced', 'true');
 
-        const { columns, length } = this._sampleRow(tableRows);
+        const { columns, length } = this.#sampleRow(tableRows);
         if (!columns) {
             return;
         }
@@ -57,7 +57,7 @@ export class SyncWidthDirective implements OnDestroy {
         }
     }
 
-    private _sampleRow(tableRows: HTMLCollectionOf<Element>): {
+    #sampleRow(tableRows: HTMLCollectionOf<Element>): {
         columns?: Element[];
         length: number;
     } {

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

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

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

@@ -0,0 +1,42 @@
+import { NgStyle } from '@angular/common';
+import {
+    booleanAttribute,
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    EventEmitter,
+    input,
+    numberAttribute,
+    Output,
+} from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { IconButtonComponent } from '../buttons/icon-button/icon-button.component';
+import { IconButtonTypes } from '../buttons/types/icon-button.type';
+import { randomString } from '../utils/functions';
+
+@Component({
+    selector: 'iqser-empty-state',
+    templateUrl: './empty-state.component.html',
+    styleUrls: ['./empty-state.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgStyle, MatIconModule, IconButtonComponent],
+})
+export class EmptyStateComponent {
+    protected 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>();
+    @Output() readonly action = new EventEmitter();
+}

src/lib/empty-state/index.ts

@@ -0,0 +1 @@
+export * from './empty-state.component';

src/lib/empty-states/empty-state.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { IqserIconsModule } from '../icons';
-import { EmptyStateComponent } from './empty-state/empty-state.component';
-import { IqserButtonsModule } from '../buttons';
-import { IqserHelpModeModule } from '../help-mode';
-
-const modules = [IqserIconsModule, IqserButtonsModule, IqserHelpModeModule];
-const components = [EmptyStateComponent];
-
-@NgModule({
-    declarations: [...components],
-    imports: [CommonModule, ...modules],
-    exports: [...components],
-})
-export class IqserEmptyStatesModule {}

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

@@ -1,22 +0,0 @@
-<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 class="heading-l" [innerHTML]="text"></div>
-    <iqser-icon-button
-        (action)="action.emit()"
-        *ngIf="showButton"
-        [icon]="buttonIcon"
-        [label]="buttonLabel"
-        [type]="iconButtonTypes.primary"
-        [iqserHelpMode]="helpModeKey"
-    ></iqser-icon-button>
-</div>

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

@@ -1,26 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { IconButtonTypes } from '../../buttons';
-
-@Component({
-    selector: 'iqser-empty-state [text]',
-    templateUrl: './empty-state.component.html',
-    styleUrls: ['./empty-state.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class EmptyStateComponent implements OnInit {
-    readonly iconButtonTypes = IconButtonTypes;
-
-    @Input() text!: string;
-    @Input() icon?: string;
-    @Input() showButton = true;
-    @Input() buttonIcon = 'iqser:plus';
-    @Input() buttonLabel?: string;
-    @Input() horizontalPadding = 100;
-    @Input() verticalPadding = 120;
-    @Input() helpModeKey?: string;
-    @Output() readonly action = new EventEmitter();
-
-    ngOnInit(): void {
-        this.showButton = this.showButton && this.action.observers.length > 0;
-    }
-}

src/lib/empty-states/index.ts

@@ -1,2 +0,0 @@
-export * from './empty-state.module';
-export * from './empty-state/empty-state.component';

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

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