TECHDEBT-36: Bump Angular@13 and fixes (#8)

.eslintrc.js

@@ -1,4 +1,4 @@
-const rules = require('@rbkmoney/eslint-plugin/lib/rules');
+const rules = require('./tools/eslint-config/rules');
 
 const baseTsRules = {
     parserOptions: {
@@ -6,10 +6,10 @@ const baseTsRules = {
         createDefaultProgram: true,
     },
     extends: [
-        'plugin:@rbkmoney/typescript',
+        './tools/eslint-config/typescript',
-        'plugin:@rbkmoney/angular',
+        './tools/eslint-config/angular',
-        'plugin:@rbkmoney/lodash',
+        './tools/eslint-config/lodash',
-        'plugin:@rbkmoney/prettier',
+        'prettier',
     ],
     rules: {
         ...rules.createImportOrderRule({ internalPathsPattern: '@dsh/**' }),
@@ -22,6 +22,7 @@ const baseTsRules = {
         '@typescript-eslint/unbound-method': 'warn',
         '@typescript-eslint/restrict-plus-operands': 'warn',
         '@typescript-eslint/restrict-template-expressions': 'warn',
+        '@typescript-eslint/no-unsafe-argument': 'warn',
     },
 };
 
@@ -43,7 +44,7 @@ module.exports = {
         {
             ...baseTsRules,
             files: ['*.spec.ts'],
-            extends: [...baseTsRules.extends, 'plugin:@rbkmoney/jasmine'],
+            extends: [...baseTsRules.extends, './tools/eslint-config/jasmine'],
         },
         {
             files: ['*.html'],

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,71 +0,0 @@
-<!--
-Название ветки:
-fr-0/<name>
-(fr-0/bump-angular-to-12)
-
-Название PR'a:
-FR-0: <НАЗВАНИЕ>
-FR-0,FR-1: <ОБЩЕЕ НАЗВАНИЕ> или <НАЗВАНИЕ 1>; <НАЗВАНИЕ 2>
--->
-
-## ⛵ JIRA
-
--   [ ] [FR-0](https://rbkmoney.atlassian.net/browse/FR-0)
-
-## 📑 Изменения
-
-```
-✍️(^◡^)
-```
-
-### 📦 Новые NPM пакеты
-
--   [ ] Добавлены новые NPM пакеты
-
-<!-- Описание NPM пакета и возможно стоит добавить в Guidelin'ы
--   [NPM](https://www.npmjs.com/)
--->
-
-### 📚 Обновлен Guideline
-
--   [ ] Добавлено описание в [wiki](https://github.com/rbkmoney/dashboard/wiki)
-
-<!-- Ссылка и возможно коротко об изменениях
--   [Wiki](https://github.com/rbkmoney/dashboard/wiki)
--->
-
-## 🖥️ Изменения в интерфейсе
-
--   [ ] Да
--   [ ] Выглядит отлично на мобильных устройствах
-
-### 🔗 Страницы с изменениями либо как их воспроизвести
-
--   http://localhost:8000/
-
-### 🖼 Скриншоты
-
-<!--
-<details>
-<summary>Скриншоты</summary>
-
-</details>
--->
-
-<!--
-- На измененные поля нужно ставить "x", для понимания что это было отредактировано.
-
-JIRA:
-- Если несколько, то нужно добавить каждый
-
-Описание изменений:
-- Например: Обновление Angular до 12 версии
-
-Страницы с изменениями:
-- Например: http://localhost:8000/invoices или диалог на http://localhost:8000/payments
-
-Скриншоты:
-- Можно просто скопировать и вставить изображение (CTRL-V)
-- Шаблон для изображения: ![Название](URL)
-- Если есть скриншоты которые занимаю много места, то их нужно вложить в details
--->

.gitignore

@@ -52,3 +52,6 @@ src/app/**/gen-model
 
 # ESLint
 .eslintcache
+
+# Angular
+.angular

.gitmodules

@@ -1,7 +1,3 @@
-[submodule "build_utils"]
-	path = build_utils
-	url = https://github.com/rbkmoney/build_utils.git
-	branch = master
 [submodule "schemes/claim-management/v0"]
 	path = schemes/claim-management/v0
 	url = https://github.com/rbkmoney/swag-claim-management.git

.idea/jsLinters/eslint.xml

@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="EslintConfiguration">
-    <custom-configuration-file used="true" path="$PROJECT_DIR$/.eslintrc.js" />
     <option name="fix-on-save" value="true" />
   </component>
 </project>

.idea/prettier.xml

@@ -2,6 +2,7 @@
 <project version="4">
   <component name="PrettierConfiguration">
     <option name="myRunOnSave" value="true" />
+    <option name="myRunOnReformat" value="true" />
     <option name="myFilesPattern" value="{**/*,*}.{js,ts,jsx,tsx,md,json,html,svg,scss,css}" />
   </component>
 </project>

.prettierignore

@@ -2,7 +2,6 @@ package.json
 package-lock.json
 node_modules
 dist
-build_utils
 coverage
 schemes
 src/app/**/swagger-codegen

Dockerfile.sh

@@ -1,23 +0,0 @@
-#!/bin/bash
-cat <<EOF
-FROM $BASE_IMAGE
-MAINTAINER Rinat Arsaev <r.arsaev@rbkmoney.com>
-COPY dist /usr/share/nginx/html
-COPY nginx.conf /etc/nginx/vhosts.d/dashboard.conf
-EXPOSE 8080
-LABEL base_image_tag=$BASE_IMAGE_TAG
-LABEL build_image_tag=$BUILD_IMAGE_TAG
-# A bit of magic to get a proper branch name
-# even when the HEAD is detached (Hey Jenkins!
-# BRANCH_NAME is available in Jenkins env).
-LABEL branch=$( \
-  if [ "HEAD" != $(git rev-parse --abbrev-ref HEAD) ]; then \
-    echo $(git rev-parse --abbrev-ref HEAD); \
-  elif [ -n "$BRANCH_NAME" ]; then \
-    echo $BRANCH_NAME; \
-  else \
-    echo $(git name-rev --name-only HEAD); \
-  fi)
-LABEL commit=$(git rev-parse HEAD)
-LABEL commit_number=$(git rev-list --count HEAD)
-EOF

Jenkinsfile

@@ -1,55 +0,0 @@
-#!groovy
-
-build('dashboard', 'docker-host') {
-  checkoutRepo()
-  loadBuildUtils()
-
-  def pipeDefault
-  def withWsCache
-  runStage('load pipeline') {
-    env.JENKINS_LIB = "build_utils/jenkins_lib"
-    pipeDefault = load("${env.JENKINS_LIB}/pipeDefault.groovy")
-    withWsCache = load("${env.JENKINS_LIB}/withWsCache.groovy")
-  }
-
-  def pipeline = {
-    runStage('init') {
-      withGithubSshCredentials {
-        sh 'make submodules'
-        withGithubToken {
-          sh 'make wc_init'
-        }
-      }
-    }
-    if (env.BRANCH_NAME == 'master') {
-      runStage('build') {
-        withCredentials([string(credentialsId: 'SENTRY_AUTH_TOKEN', variable: 'SENTRY_AUTH_TOKEN')]) {
-          sh 'make wc_build'
-        }
-      }
-    } else {
-      runStage('build') {
-        sh "make wc_cmd WC_CMD='make build_pr'"
-      }
-    }
-    runStage('test fe (karma.js)') {
-      sh 'make test'
-    }
-    runStage('build image') {
-      sh 'make build_image'
-    }
-    runFESecurityTools()
-    try {
-      if (env.BRANCH_NAME == 'master') {
-        runStage('push image') {
-          sh 'make push_image'
-        }
-      }
-    } finally {
-      runStage('rm local image') {
-        sh 'make rm_local_image'
-      }
-    }
-  }
-  pipeDefault(pipeline)
-}

Makefile

@@ -1,62 +0,0 @@
-UTILS_PATH := build_utils
-SWAGGER_SCHEMES_PATH := schemes/swag/v2 schemes/claim-management/v0 schemes/questionary/v0 schemes/questionary-aggr-proxy/v0 schemes/swag-analytics/v1 schemes/dark-api/v0 schemes/messages/v0 schemes/url-shortener/v0 schemes/swag-wallets/v0 schemes/organizations/v0 schemes/sender/v0
-SUBMODULES = $(UTILS_PATH) $(SWAGGER_SCHEMES_PATH)
-
-SUBTARGETS = $(patsubst %,%/.git,$(SUBMODULES))
-
-UTILS_PATH := build_utils
-TEMPLATES_PATH := .
-
-WORKDIR := $(shell dirname $(realpath $(lastword $(MAKEFILE_LIST))))
-
-# Name of the service
-SERVICE_NAME := dashboard
-# Service image default tag
-SERVICE_IMAGE_TAG ?= $(shell git rev-parse HEAD)
-# The tag for service image to be pushed with
-SERVICE_IMAGE_PUSH_TAG ?= $(SERVICE_IMAGE_TAG)
-
-REGISTRY ?= dr2.rbkmoney.com
-
-# Base image for the service
-BASE_IMAGE_NAME := service-fe
-BASE_IMAGE_TAG := 68877f5853c6f3df2664b8b23f8ec8367902047a
-
-BUILD_IMAGE_TAG := 25c031edd46040a8745334570940a0f0b2154c5c
-
-GIT_SSH_COMMAND :=
-DOCKER_RUN_OPTS = -e GIT_SSH_COMMAND='$(GIT_SSH_COMMAND)' -e NG_CLI_ANALYTICS=ci -e NPM_TOKEN='$(GITHUB_TOKEN)' -e SENTRY_AUTH_TOKEN='$(SENTRY_AUTH_TOKEN)'
-
-CALL_W_CONTAINER := init test build clean submodules
-
-.PHONY: $(CALL_W_CONTAINER)
-
-all: build
-
--include $(UTILS_PATH)/make_lib/utils_image.mk
--include $(UTILS_PATH)/make_lib/utils_container.mk
-
-$(SUBTARGETS): %/.git: %
-	git submodule update --init $<
-	touch $@
-
-submodules: $(SUBTARGETS)
-
-init:
-	echo -e "//npm.pkg.github.com/:_authToken=$(NPM_TOKEN)" >> .npmrc
-	npm ci
-	npm run codegen
-
-build:
-	npm run ci:check
-	SENTRY_AUTH_TOKEN=$(SENTRY_AUTH_TOKEN) npm run build
-
-build_pr:
-	npm run ci:check
-	npm run build
-
-clean:
-	rm -rf dist
-
-test:
-	docker run --name $(SERVICE_NAME)_$(shell python -c 'from random import randint; print(randint(100000, 999999));')_test --rm -v $(WORKDIR):/usr/src/app:z zenika/alpine-chrome:with-node npm run ci:test

build_utils

@@ -1 +0,0 @@
-Subproject commit be44d69fc87b22a0bb82d98d6eae7658d1647f98

containerpilot.json

@@ -1,13 +0,0 @@
-{
-    "consul": "{{ .CONSUL_ADDR }}",
-    "services": [
-        {
-            "name": "{{ .SERVICE_NAME }}",
-            "port": 8080,
-            "health": "/usr/bin/curl --silent --show-error --output /dev/null localhost:8080",
-            "poll": 1,
-            "ttl": 2,
-            "interfaces": ["inet6", "inet"]
-        }
-    ]
-}

package.json

@@ -9,7 +9,7 @@
     "build": "ng build --extra-webpack-config webpack.extra.js",
     "test": "ng test",
     "coverage": "npx http-server -c-1 -o -p 9875 ./coverage",
-    "lint-cmd": "eslint \"src/**/*.{ts,js,html}\" --max-warnings 1477",
+    "lint-cmd": "eslint \"src/**/*.{ts,js,html}\" --max-warnings 1364",
     "lint-cache-cmd": "npm run lint-cmd -- --cache",
     "lint": "npm run lint-cache-cmd",
     "lint-fix": "npm run lint-cache-cmd -- --fix",
@@ -29,21 +29,21 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~12.2.13",
+    "@angular/animations": "~13.1.1",
-    "@angular/cdk": "~12.1.4",
+    "@angular/cdk": "~13.1.1",
-    "@angular/common": "~12.2.13",
+    "@angular/common": "~13.1.1",
-    "@angular/compiler": "~12.2.13",
+    "@angular/compiler": "~13.1.1",
-    "@angular/core": "~12.2.13",
+    "@angular/core": "~13.1.1",
-    "@angular/flex-layout": "^12.0.0-beta.34",
+    "@angular/flex-layout": "^13.0.0-beta.36",
-    "@angular/forms": "~12.2.13",
+    "@angular/forms": "~13.1.1",
-    "@angular/material": "~12.1.4",
+    "@angular/material": "~13.1.1",
-    "@angular/material-moment-adapter": "~12.1.4",
+    "@angular/material-moment-adapter": "~13.1.1",
-    "@angular/platform-browser": "~12.2.13",
+    "@angular/platform-browser": "~13.1.1",
-    "@angular/platform-browser-dynamic": "~12.2.13",
+    "@angular/platform-browser-dynamic": "~13.1.1",
-    "@angular/router": "~12.2.13",
+    "@angular/router": "~13.1.1",
     "@ngneat/reactive-forms": "^1.5.0",
-    "@ngneat/transloco": "^2.19.1",
+    "@ngneat/transloco": "^3.1.1",
-    "@ngneat/until-destroy": "^8.0.3",
+    "@ngneat/until-destroy": "^9.0.0",
     "@s-libs/js-core": "^12.0.0",
     "@s-libs/micro-dash": "^12.0.0",
     "@s-libs/ng-core": "^12.0.0",
@@ -63,8 +63,8 @@
     "libphonenumber-js": "^1.7.27",
     "lodash-es": "^4.17.20",
     "moment": "^2.24.0",
-    "ng-apexcharts": "^1.3.0",
+    "ng-apexcharts": "^1.6.0",
-    "ngx-mat-select-search": "^3.3.0",
+    "ngx-mat-select-search": "^3.3.3",
     "rxjs": "~6.6.7",
     "shelljs": "^0.8.4",
     "short-uuid": "^4.2.0",
@@ -74,14 +74,15 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.2.13",
+    "@angular-devkit/build-angular": "~13.1.2",
-    "@angular-eslint/builder": "^12.0.0",
+    "@angular-eslint/builder": "^13.0.1",
-    "@angular-eslint/eslint-plugin-template": "^12.0.0",
+    "@angular-eslint/eslint-plugin": "^13.0.1",
-    "@angular-eslint/schematics": "~12.3.1",
+    "@angular-eslint/eslint-plugin-template": "^13.0.1",
-    "@angular-eslint/template-parser": "^12.0.0",
+    "@angular-eslint/schematics": "~13.0.1",
-    "@angular/cli": "~12.2.13",
+    "@angular-eslint/template-parser": "^13.0.1",
-    "@angular/compiler-cli": "~12.2.13",
+    "@angular/cli": "~13.1.2",
-    "@angular/language-service": "~12.2.13",
+    "@angular/compiler-cli": "~13.1.1",
+    "@angular/language-service": "~13.1.1",
     "@openapitools/openapi-generator-cli": "^2.3.7",
     "@sentry/webpack-plugin": "^1.17.1",
     "@types/d3": "^5.7.0",
@@ -94,10 +95,18 @@
     "@types/moment": "^2.13.0",
     "@types/node": "^16.4.10",
     "@types/prettier": "^2.2.3",
-    "@typescript-eslint/parser": "~4.23.0",
+    "@typescript-eslint/eslint-plugin": "^5.8.0",
+    "@typescript-eslint/parser": "~5.8.0",
     "concurrently": "^6.2.0",
     "del": "^5.1.0",
-    "eslint": "^7.26.0",
+    "eslint": "^8.5.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jasmine": "^4.1.2",
+    "eslint-plugin-jsdoc": "^37.4.0",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
+    "eslint-plugin-unused-imports": "^2.0.0",
+    "eslint-plugin-you-dont-need-lodash-underscore": "^6.11.0",
     "glob": "^7.1.6",
     "jasmine-core": "~3.7.0",
     "jasmine-marbles": "^0.6.0",
@@ -107,11 +116,10 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-spec-reporter": "0.0.32",
-    "ngx-build-plus": "^12.0.1",
+    "ngx-build-plus": "^13.0.1",
     "prettier": "^2.3.1",
-    "puppeteer": "^5.5.0",
     "ts-mockito": "^2.6.1",
     "ts-node": "~8.8.1",
-    "typescript": "~4.2.4"
+    "typescript": "~4.5.4"
   }
 }

src/app/config/config.service.ts

@@ -1,8 +1,8 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
 
 import { BASE_CONFIG, Config } from './config';
-import { BehaviorSubject } from 'rxjs';
 
 @Injectable()
 export class ConfigService extends BASE_CONFIG {

src/app/dadata/_dadata-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-dadata-autocomplete-theme($theme) {
     $primary: map-get($theme, primary);

src/app/feedback/_feedback-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-feedback-theme($theme) {
     $primary: map-get($theme, primary);

src/app/home/brand/brand.component.ts

@@ -2,8 +2,8 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 import { coerceBoolean } from '@dsh/utils';
 
-import { BrandName } from './brand-name';
 import { ConfigService } from '../../config';
+import { BrandName } from './brand-name';
 
 interface IconConfig {
     name: string;

src/app/home/mobile-grid/mobile-menu/components/mobile-menu-nav-item/_mobile-menu-nav-item-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-mobile-nav-item-theme($theme) {
     $primary: map-get($theme, primary);

src/app/home/mobile-grid/mobile-menu/components/mobile-user-bar/_mobile-user-bar-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-mobile-user-bar-typography($config) {
     .dsh-mobile-user-bar-username {

src/app/home/welcome-image/_welcome-image-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import 'node_modules/@angular/material/theming';
 
 @mixin dsh-welcome-image-theme($theme) {

src/app/icons/icons.service.ts

@@ -2,8 +2,8 @@ import { Injectable } from '@angular/core';
 import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 
-import icons from './icons.json';
 import { ConfigService } from '../config';
+import icons from './icons.json';
 
 @Injectable()
 export class IconsService {

src/app/sections/claim-section/claim/conversation/send-comment/send-comment.service.ts

@@ -8,8 +8,8 @@ import { v4 as uuid } from 'uuid';
 import { Conversation } from '@dsh/api-codegen/messages';
 import { createSingleMessageConversationParams, MessagesService } from '@dsh/api/messages';
 
-import { UiError } from '../../../../ui-error';
 import { progress } from '../../../../../custom-operators';
+import { UiError } from '../../../../ui-error';
 
 @Injectable()
 export class SendCommentService {

src/app/sections/claim-section/claim/conversation/send-comment/upload-files.service.ts

@@ -1,13 +1,12 @@
 import { Injectable } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslocoService } from '@ngneat/transloco';
-import { progress } from '../../../../../custom-operators';
 import { combineLatest, merge, Observable, Subject } from 'rxjs';
 import { map, share, shareReplay, switchMap } from 'rxjs/operators';
 
 import { FilesService } from '@dsh/api/files';
 
-import { filterError, filterPayload, replaceError } from '../../../../../custom-operators';
+import { progress, filterError, filterPayload, replaceError } from '../../../../../custom-operators';
 import { UpdateClaimService } from '../../update-claim';
 
 @Injectable()

src/app/sections/claim-section/claim/revoke-claim-dialog/revoke-claim-dialog.service.ts

@@ -7,8 +7,8 @@ import { catchError, filter, pluck, switchMap, tap } from 'rxjs/operators';
 
 import { ClaimsService } from '@dsh/api/claims';
 
-import { UiError } from '../../../ui-error';
 import { progress } from '../../../../custom-operators';
+import { UiError } from '../../../ui-error';
 import { RevokeClaimDialogComponent } from './revoke-claim-dialog.component';
 
 @Injectable()

src/app/sections/claim-section/claims/claims-list/components/claim-row/claim-row.component.html

@@ -15,7 +15,7 @@
     </dsh-row-label>
     <dsh-row-label fxFlex.gt-sm="30" fxFlex>
         <span fxHide.lt-md>{{ item.updatedAt | date: 'dd MMMM yyyy, HH:mm' }}</span>
-        <span fxHide.gt-sm>{{ item.updatedAt | date: 'dd.mm.yyyy, HH:mm' }}</span>
+        <span fxHide.gt-sm>{{ item.updatedAt | date: 'dd.MM.yyyy, HH:mm' }}</span>
     </dsh-row-label>
     <dsh-row-label fxFlex.gt-sm="30" fxFlex fxLayout="row" fxLayoutAlign="end center"
         ><dsh-navigation-link

src/app/sections/claim-section/claims/services/fetch-claims/fetch-claims.service.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslocoService } from '@ngneat/transloco';
-import { FetchResult, PartialFetcher } from '@dsh/app/shared';
 import { Observable } from 'rxjs';
 import { shareReplay } from 'rxjs/operators';
 
 import { Claim } from '@dsh/api-codegen/claim-management/swagger-codegen';
 import { ClaimsService } from '@dsh/api/claims';
+import { FetchResult, PartialFetcher } from '@dsh/app/shared';
 import { booleanDebounceTime, mapToTimestamp } from '@dsh/operators';
 
 import { ClaimsSearchFiltersSearchParams } from '../../claims-search-filters/claims-search-filters-search-params';

src/app/sections/payment-section/analytics/analytics-search-filters/analytics-search-filters.component.ts

@@ -1,13 +1,13 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, OnInit, OnChanges } from '@angular/core';
 import { FormBuilder } from '@ngneat/reactive-forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { ComponentChanges } from '@dsh/type-utils';
 import { combineLatest, defer, Observable } from 'rxjs';
 import { first, map, pluck, shareReplay } from 'rxjs/operators';
 
 import { Shop } from '@dsh/api-codegen/capi';
 import { createDateRangeWithPreset, DateRangeWithPreset, Preset } from '@dsh/components/date-range-filter';
 import { SHARE_REPLAY_CONF } from '@dsh/operators';
+import { ComponentChanges } from '@dsh/type-utils';
 import { getFormValueChanges } from '@dsh/utils';
 
 import { RealmShopsService } from '../../services';

src/app/sections/payment-section/analytics/average-payment/average-payment.service.ts

@@ -6,7 +6,6 @@ import { distinctUntilChanged, map, pluck, shareReplay, switchMap } from 'rxjs/o
 import { AnalyticsService } from '@dsh/api/analytics';
 
 import { filterError, filterPayload, replaceError, SHARE_REPLAY_CONF, progress } from '../../../../custom-operators';
-
 import { SearchParams } from '../search-params';
 import { amountResultToStatData, searchParamsToStatSearchParams } from '../utils';
 

src/app/sections/payment-section/analytics/payment-split-count/payment-split-count.component.ts

@@ -1,7 +1,7 @@
 import { Component, Inject, Input, OnChanges } from '@angular/core';
-import { ComponentChanges } from '@dsh/type-utils';
 
 import { SpinnerType } from '@dsh/components/indicators';
+import { ComponentChanges } from '@dsh/type-utils';
 
 import { ChartsThemeProvider, CHARTS_THEME } from '../charts-theme';
 import { SearchParams } from '../search-params';

src/app/sections/payment-section/analytics/payment-split-count/split-count-to-chart-data.ts

@@ -4,7 +4,7 @@ import moment from 'moment';
 
 import { SplitCountResult, SplitUnit, StatusOffsetCount } from '@dsh/api-codegen/anapi/swagger-codegen';
 
-import { ChartData, splitUnitToTimeFormat } from '../utils';
+import { ChartData, splitUnitToTimeFormat, Series } from '../utils';
 
 const prepareOffsetCounts = (statusOffsetCounts: StatusOffsetCount[]): StatusOffsetCount[] =>
     statusOffsetCounts.map((statusOffsetCount): StatusOffsetCount => {
@@ -21,7 +21,7 @@ const indexToVisibility = (index: number, length: number): 'show' | 'hide' =>
 const offsetToX = (offset: number, unit: SplitUnit, index: number, length: number): string =>
     `${moment(offset).format(splitUnitToTimeFormat(unit))}#${indexToVisibility(index, length)}`;
 
-const statusOffsetCountsToSeries = (statusOffsetCounts: StatusOffsetCount[], unit: SplitUnit) => {
+const statusOffsetCountsToSeries = (statusOffsetCounts: StatusOffsetCount[], unit: SplitUnit): Series[] => {
     return statusOffsetCounts.map(({ status, offsetCount }) => ({
         name: translate(`analytics.paymentStatuses.${status.toString()}`, null, 'payment-section'),
         data: offsetCount.map((c, i) => ({

src/app/sections/payment-section/analytics/percent-difference/_percent-difference-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-percent-difference-theme($theme) {
     $accent: map-get($theme, accent);

src/app/sections/payment-section/balances/_balances-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-balances-theme($theme) {
     $foreground: map-get($theme, foreground);

src/app/sections/payment-section/integrations/payment-link/payment-link.component.html

@@ -1,9 +1,9 @@
 <dsh-card fxLayout="column" fxLayoutGap="24px">
     <dsh-create-invoice-or-invoice-template
-        *ngIf="currentStep === step.InvoiceTemplate"
+        *ngIf="(currentStep$ | async) === step.InvoiceTemplate"
         (next)="nextInvoiceOrInvoiceTemplate($event)"
     ></dsh-create-invoice-or-invoice-template>
-    <div fxLayout="column" fxLayoutGap="32px" *ngIf="currentStep === step.PaymentLink">
+    <div fxLayout="column" fxLayoutGap="32px" *ngIf="(currentStep$ | async) === step.PaymentLink">
         <ng-container *transloco="let c; scope: 'create-payment-link'; read: 'createPaymentLink'">
             <h1 class="dsh-headline">
                 {{ c('title') }}
@@ -18,7 +18,7 @@
                     <button
                         dsh-text-button
                         color="accent"
-                        (click)="currentStep = step.InvoiceTemplate"
+                        (click)="currentStep$.next(step.InvoiceTemplate)"
                         [disabled]="inProgress$ | async"
                     >
                         {{ t('back') }}

src/app/sections/payment-section/integrations/payment-link/payment-link.component.ts

@@ -28,7 +28,7 @@ enum Step {
 })
 export class PaymentLinkComponent {
     step = Step;
-    currentStep = Step.InvoiceTemplate;
+    currentStep$ = new BehaviorSubject(Step.InvoiceTemplate);
     invoiceOrInvoiceTemplate: InvoiceOrInvoiceTemplate;
 
     paymentMethods$ = new ReplaySubject<PaymentMethod[]>(1);
@@ -69,7 +69,7 @@ export class PaymentLinkComponent {
                   )
         ).subscribe((paymentMethods) => {
             this.paymentMethods$.next(paymentMethods);
-            this.currentStep = Step.PaymentLink;
+            this.currentStep$.next(Step.PaymentLink);
             this.invoiceOrInvoiceTemplate = invoiceOrInvoiceTemplate;
         });
     }

src/app/sections/payment-section/no-shops-alert/_no-shops-alert-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-no-shops-alert-theme($theme) {
     $primary: map-get($theme, primary);

src/app/sections/payment-section/operations/invoices/services/fetch-invoices/fetch-invoices.service.ts

@@ -1,10 +1,10 @@
 import { Inject, Injectable } from '@angular/core';
-import { FetchResult, PartialFetcher } from '@dsh/app/shared';
 import { Observable } from 'rxjs';
 import { shareReplay } from 'rxjs/operators';
 
 import { Invoice } from '@dsh/api-codegen/anapi';
 import { InvoiceSearchService } from '@dsh/api/search';
+import { FetchResult, PartialFetcher } from '@dsh/app/shared';
 import { booleanDebounceTime, mapToTimestamp } from '@dsh/operators';
 
 import { SEARCH_LIMIT } from '../../../../../tokens';

src/app/sections/payment-section/operations/payments/payments-panels/payments-details/refunds/services/fetch-refunds/fetch-refunds.service.spec.ts

@@ -1,9 +1,9 @@
 import { TestBed } from '@angular/core/testing';
-import { DEBOUNCE_FETCHER_ACTION_TIME } from '@dsh/app/shared';
 import { instance, mock } from 'ts-mockito';
 
 import { RefundSearchService } from '@dsh/api/search';
 import { SEARCH_LIMIT } from '@dsh/app/sections/tokens';
+import { DEBOUNCE_FETCHER_ACTION_TIME } from '@dsh/app/shared';
 
 import { FetchRefundsService } from './fetch-refunds.service';
 

src/app/sections/payment-section/operations/payments/payments-panels/payments-details/refunds/services/fetch-refunds/fetch-refunds.service.ts

@@ -1,11 +1,11 @@
 import { Inject, Injectable } from '@angular/core';
-import { DEBOUNCE_FETCHER_ACTION_TIME, FetchResult, PartialFetcher } from '@dsh/app/shared';
 import { Observable } from 'rxjs';
 import { shareReplay } from 'rxjs/operators';
 
 import { RefundSearchResult } from '@dsh/api-codegen/capi';
 import { RefundSearchService, RefundsSearchParams } from '@dsh/api/search';
 import { SEARCH_LIMIT } from '@dsh/app/sections/tokens';
+import { DEBOUNCE_FETCHER_ACTION_TIME, FetchResult, PartialFetcher } from '@dsh/app/shared';
 import { booleanDebounceTime } from '@dsh/operators';
 
 @Injectable()

src/app/sections/payment-section/operations/payments/services/fetch-payments/fetch-payments.service.ts

@@ -1,13 +1,13 @@
 import { Inject, Injectable } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslocoService } from '@ngneat/transloco';
-import { DEBOUNCE_FETCHER_ACTION_TIME, PartialFetcher } from '@dsh/app/shared';
 import { Observable, of } from 'rxjs';
 import { catchError, shareReplay } from 'rxjs/operators';
 
 import { PaymentSearchResult } from '@dsh/api-codegen/anapi';
 import { PaymentsAndContinuationToken, PaymentSearchService } from '@dsh/api/search';
 import { SEARCH_LIMIT } from '@dsh/app/sections/tokens';
+import { DEBOUNCE_FETCHER_ACTION_TIME, PartialFetcher } from '@dsh/app/shared';
 import { isNumber } from '@dsh/app/shared/utils';
 import { booleanDebounceTime, mapToTimestamp } from '@dsh/operators';
 import { toMinor } from '@dsh/utils';

src/app/sections/payment-section/operations/refunds/services/fetch-refunds/fetch-refunds.service.ts

@@ -1,11 +1,11 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { PartialFetcher } from '@dsh/app/shared';
 import { Observable } from 'rxjs';
 import { shareReplay } from 'rxjs/operators';
 
 import { RefundSearchResult } from '@dsh/api-codegen/capi/swagger-codegen';
 import { RefundSearchService } from '@dsh/api/search';
+import { PartialFetcher } from '@dsh/app/shared';
 import { booleanDebounceTime, mapToTimestamp } from '@dsh/operators';
 
 import { SearchFiltersParams } from '../../refunds-search-filters';

src/app/sections/payment-section/payouts/fetch-payouts.service.ts

@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core';
-import { PartialFetcher } from '@dsh/app/shared';
 import { Observable } from 'rxjs';
 import { shareReplay } from 'rxjs/operators';
 
 import { Payout } from '@dsh/api-codegen/anapi';
 import { PayoutSearchService } from '@dsh/api/search';
+import { PartialFetcher } from '@dsh/app/shared';
 import { booleanDebounceTime, mapToTimestamp } from '@dsh/operators';
 
 import { SearchParams } from './types/search-params';

src/app/sections/payment-section/reports/fetch-reports.service.ts

@@ -1,5 +1,4 @@
 import { Inject, Injectable } from '@angular/core';
-import { PartialFetcher } from '@dsh/app/shared';
 import isEmpty from 'lodash-es/isEmpty';
 import { Observable } from 'rxjs';
 import { shareReplay } from 'rxjs/operators';
@@ -7,6 +6,7 @@ import { shareReplay } from 'rxjs/operators';
 import { InlineResponse20013, Report } from '@dsh/api-codegen/anapi';
 import { ReportsService as ReportsApiService } from '@dsh/api/reports';
 import { SEARCH_LIMIT } from '@dsh/app/sections/tokens';
+import { PartialFetcher } from '@dsh/app/shared';
 import { booleanDebounceTime, mapToTimestamp } from '@dsh/operators';
 
 import { SearchFiltersParams } from './reports-search-filters';

src/app/sections/sections.module.ts

@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
 import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
-import { DEBOUNCE_FETCHER_ACTION_TIME, DEFAULT_FETCHER_DEBOUNCE_ACTION_TIME } from '@dsh/app/shared';
 
 import { ShopModule } from '@dsh/api/shop';
 import { WalletModule } from '@dsh/api/wallet';
+import { DEBOUNCE_FETCHER_ACTION_TIME, DEFAULT_FETCHER_DEBOUNCE_ACTION_TIME } from '@dsh/app/shared';
 
 import { CHARTS_THEME } from './payment-section/analytics/charts-theme';
 import { SectionsRoutingModule } from './sections-routing.module';

src/app/sections/wallet-section/deposits/deposit-panels/deposit-reverts/services/fetch-deposit-reverts.service.ts

@@ -1,13 +1,13 @@
 import { Inject, Injectable } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslocoService } from '@ngneat/transloco';
-import { DEBOUNCE_FETCHER_ACTION_TIME, PartialFetcher } from '@dsh/app/shared';
 import { Observable, of } from 'rxjs';
 import { catchError, shareReplay } from 'rxjs/operators';
 
 import { DepositsSearchParams, DepositsService as DepositsApiService } from '@dsh/api';
 import { DepositRevert } from '@dsh/api-codegen/wallet-api';
 import { SEARCH_LIMIT } from '@dsh/app/sections/tokens';
+import { DEBOUNCE_FETCHER_ACTION_TIME, PartialFetcher } from '@dsh/app/shared';
 import { booleanDebounceTime } from '@dsh/operators';
 
 @Injectable()

src/app/sections/wallet-section/deposits/services/fetch-deposits/fetch-deposits.service.ts

@@ -1,13 +1,13 @@
 import { Inject, Injectable } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslocoService } from '@ngneat/transloco';
-import { DEBOUNCE_FETCHER_ACTION_TIME, PartialFetcher } from '@dsh/app/shared';
 import { Observable, of } from 'rxjs';
 import { catchError, shareReplay } from 'rxjs/operators';
 
 import { Deposit } from '@dsh/api-codegen/wallet-api/swagger-codegen';
 import { DepositsSearchParams, DepositsService as DepositsApiService } from '@dsh/api/deposits';
 import { SEARCH_LIMIT } from '@dsh/app/sections/tokens';
+import { DEBOUNCE_FETCHER_ACTION_TIME, PartialFetcher } from '@dsh/app/shared';
 import { isNumber } from '@dsh/app/shared/utils';
 import { booleanDebounceTime, mapToTimestamp } from '@dsh/operators';
 import { toMinor } from '@dsh/utils';

src/app/sections/wallet-section/wallets/services/fetch-wallets/fetch-wallets.service.ts

@@ -1,11 +1,11 @@
 import { Inject, Injectable } from '@angular/core';
-import { FetchResult, PartialFetcher } from '@dsh/app/shared';
 import { Observable } from 'rxjs';
 
 import { Wallet } from '@dsh/api-codegen/wallet-api';
 import { WalletService } from '@dsh/api/wallet';
 import { WalletsSearchParams } from '@dsh/api/wallet/wallets-search-params';
 import { SEARCH_LIMIT } from '@dsh/app/sections/tokens';
+import { FetchResult, PartialFetcher } from '@dsh/app/shared';
 import { mapToTimestamp, publishReplayRefCount } from '@dsh/operators';
 
 @Injectable()

src/app/sections/wallet-section/wallets/wallets-list/wallet-deposits/services/fetch-wallet-deposits/fetch-wallet-deposits.service.ts

@@ -1,11 +1,11 @@
 import { Inject, Injectable } from '@angular/core';
 import { UntilDestroy } from '@ngneat/until-destroy';
-import { PartialFetcher } from '@dsh/app/shared';
 import { Observable } from 'rxjs';
 
 import { DepositsService } from '@dsh/api';
 import { Deposit } from '@dsh/api-codegen/wallet-api';
 import { SEARCH_LIMIT } from '@dsh/app/sections/tokens';
+import { PartialFetcher } from '@dsh/app/shared';
 
 @UntilDestroy()
 @Injectable()

src/app/sections/wallet-section/wallets/wallets-list/wallet-main-info/wallets-main-info.component.html

@@ -1,6 +1,6 @@
 <div *transloco="let t; scope: 'wallets'; read: 'wallets.mainInfo'" fxLayout="column" fxLayout.gt-sm fxLayoutGap="24px">
     <dsh-details-item fxFlex.gt-sm="66" [title]="t('name')">{{ wallet.name }}</dsh-details-item>
     <dsh-details-item fxFlex.gt-sm [title]="t('createdAt')">{{
-        wallet.createdAt | date: 'dd.mm.yyyy, HH:mm'
+        wallet.createdAt | date: 'dd.MM.yyyy, HH:mm'
     }}</dsh-details-item>
 </div>

src/app/sections/wallet-section/wallets/wallets-list/wallet-withdrawals/services/fetch-wallet-withdrawals/fetch-wallet-withdrawals.service.ts

@@ -1,11 +1,11 @@
 import { Inject, Injectable } from '@angular/core';
 import { UntilDestroy } from '@ngneat/until-destroy';
-import { PartialFetcher } from '@dsh/app/shared';
 import { Observable } from 'rxjs';
 
 import { WithdrawalsService } from '@dsh/api';
 import { Withdrawal } from '@dsh/api-codegen/wallet-api';
 import { SEARCH_LIMIT } from '@dsh/app/sections/tokens';
+import { PartialFetcher } from '@dsh/app/shared';
 
 @UntilDestroy()
 @Injectable()

src/app/sections/wallet-section/withdrawals/services/fetch-withdrawals/fetch-withdrawals.service.ts

@@ -1,13 +1,13 @@
 import { Inject, Injectable } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslocoService } from '@ngneat/transloco';
-import { DEBOUNCE_FETCHER_ACTION_TIME, PartialFetcher } from '@dsh/app/shared';
 import { Observable, of } from 'rxjs';
 import { catchError, shareReplay } from 'rxjs/operators';
 
 import { WithdrawalsSearchParams, WithdrawalsService as WithdrawalsApiService } from '@dsh/api';
 import { InlineResponse2007, Withdrawal } from '@dsh/api-codegen/wallet-api';
 import { SEARCH_LIMIT } from '@dsh/app/sections/tokens';
+import { DEBOUNCE_FETCHER_ACTION_TIME, PartialFetcher } from '@dsh/app/shared';
 import { booleanDebounceTime, mapToTimestamp } from '@dsh/operators';
 
 type WithdrawalsAndContinuationToken = InlineResponse2007;

src/app/shared/components/create-payment-link-form/create-payment-link-form.component.ts

@@ -5,10 +5,10 @@ import { FormBuilder } from '@ngneat/reactive-forms';
 import { FbGroupConfig } from '@ngneat/reactive-forms/lib/formBuilder';
 import { TranslocoService } from '@ngneat/transloco';
 import { UntilDestroy } from '@ngneat/until-destroy';
-import { ComponentChanges } from '@dsh/type-utils';
 
 import { BankCard, PaymentMethod, PaymentTerminal } from '@dsh/api-codegen/capi';
 import { PaymentLinkParams } from '@dsh/app/shared/services/create-payment-link/types/payment-link-params';
+import { ComponentChanges } from '@dsh/type-utils';
 import { createValidatedAbstractControlProviders, ValidatedWrappedAbstractControlSuperclass } from '@dsh/utils';
 
 import { HoldExpiration } from '../../services/create-payment-link/types/hold-expiration';

src/app/shared/components/inputs/shops-field/shops-field.component.ts

@@ -1,11 +1,11 @@
 import { Component, Injector, Input, OnChanges } from '@angular/core';
-import { ComponentChanges } from '@dsh/type-utils';
 import { provideValueAccessor, WrappedFormControlSuperclass } from '@s-libs/ng-core';
 import { defer, ReplaySubject } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { Shop } from '@dsh/api-codegen/capi';
 import { shareReplayRefCount } from '@dsh/operators';
+import { ComponentChanges } from '@dsh/type-utils';
 
 @Component({
     selector: 'dsh-shops-field',

src/app/shared/services/fetch-organizations/fetch-organizations.service.spec.ts

@@ -1,5 +1,4 @@
 import { TestBed } from '@angular/core/testing';
-import { DEBOUNCE_FETCHER_ACTION_TIME } from '@dsh/app/shared';
 import { of } from 'rxjs';
 import { mock, verify, when } from 'ts-mockito';
 
@@ -7,6 +6,7 @@ import { OrganizationsService } from '@dsh/api';
 import { OrganizationSearchResult } from '@dsh/api-codegen/organizations';
 import { MOCK_ORG } from '@dsh/api/organizations/tests/mock-org';
 import { SEARCH_LIMIT } from '@dsh/app/sections/tokens';
+import { DEBOUNCE_FETCHER_ACTION_TIME } from '@dsh/app/shared';
 import { provideMockService, provideMockToken } from '@dsh/app/shared/tests';
 
 import { FetchOrganizationsService } from './fetch-organizations.service';

src/app/shared/services/fetch-organizations/fetch-organizations.service.ts

@@ -1,11 +1,11 @@
 import { Inject, Injectable } from '@angular/core';
-import { DEBOUNCE_FETCHER_ACTION_TIME, FetchResult, PartialFetcher } from '@dsh/app/shared';
 import { Observable } from 'rxjs';
 import { shareReplay } from 'rxjs/operators';
 
 import { OrganizationsService } from '@dsh/api';
 import { Organization } from '@dsh/api-codegen/organizations';
 import { SEARCH_LIMIT } from '@dsh/app/sections/tokens';
+import { DEBOUNCE_FETCHER_ACTION_TIME, FetchResult, PartialFetcher } from '@dsh/app/shared';
 import { mapToTimestamp } from '@dsh/operators';
 
 @Injectable()

src/app/shared/services/partial-fetcher/fetch-action.ts

@@ -1,4 +1,4 @@
-export interface FetchAction<P extends any = any> {
+export interface FetchAction<P = any> {
     type: 'search' | 'fetchMore';
     value?: P;
 }

src/app/shared/services/partial-fetcher/partial-fetcher.ts

@@ -12,8 +12,8 @@ import {
     switchMap,
     tap,
 } from 'rxjs/operators';
-import { progress } from '../../../custom-operators';
 
+import { progress } from '../../../custom-operators';
 import { FetchAction } from './fetch-action';
 import { FetchFn } from './fetch-fn';
 import { FetchResult } from './fetch-result';

src/assets/i18n/ru.json

@@ -148,6 +148,7 @@
     },
     "claimStatus": {
         "pending": "В ожидании",
+        "pendingAcceptance": "В ожидании одобрения",
         "review": "На рассмотрении",
         "revoked": "Отозвана",
         "denied": "Отклонена",

src/components/buttons/button-toggle/_button-toggle-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import '../../../styles/utils/fill';
 
 @mixin dsh-button-toggle-theme($theme) {

src/components/buttons/button-toggle/button-toggle.component.ts

@@ -24,7 +24,7 @@ import {
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatButtonToggleGroup } from '@angular/material/button-toggle';
-import { CanDisableRippleCtor, mixinDisableRipple } from '@angular/material/core';
+import { mixinDisableRipple } from '@angular/material/core';
 
 export type ToggleType = 'checkbox' | 'radio';
 
@@ -300,8 +300,7 @@ export class ButtonToggleGroupDirective implements ControlValueAccessor, OnInit,
 /** @docs-private */
 class MatButtonToggleBase {}
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const _MatButtonToggleMixinBase: CanDisableRippleCtor & typeof MatButtonToggleBase =
+const _MatButtonToggleMixinBase = mixinDisableRipple(MatButtonToggleBase);
-    mixinDisableRipple(MatButtonToggleBase);
 
 /** Single button inside of a toggle group. */
 @Component({

src/components/buttons/button/_button-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin button($text-color, $background-color) {
     background: $background-color;

src/components/charts/_charts-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import '../../styles/utils/shadow';
 
 @mixin dsh-charts-theme($theme) {

src/components/date-range-filter/_date-range-filter-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-date-range-filter-theme($theme) {
     .dsh-date-range-filter-preset-active {

src/components/filter/components/filter-button/_filter-button-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-filter-button-theme($theme) {
     $foreground: map-get($theme, foreground);

src/components/form-controls/file-uploader/_file-uploader-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-file-uploader-theme($theme) {
     $primary: map-get($theme, primary);

src/components/form-controls/format-input/format-input.component.ts

@@ -11,6 +11,9 @@ import { CONFIGS, Type } from './configs';
     styleUrls: ['format-input.component.scss'],
     providers: [{ provide: MatFormFieldControl, useExisting: FormatInputComponent }],
 })
+/**
+ * @deprecated
+ */
 export class FormatInputComponent extends CustomFormControl {
     mask: TextMaskConfig;
     prefix = '';

src/components/form-controls/multi-select-field/multi-select-field.component.ts

@@ -1,10 +1,10 @@
 import { Component, Injector, Input, OnChanges } from '@angular/core';
 import { FormBuilder } from '@ngneat/reactive-forms';
 import { UntilDestroy } from '@ngneat/until-destroy';
-import { ComponentChanges } from '@dsh/type-utils';
 import { FormControlSuperclass, provideValueAccessor } from '@s-libs/ng-core';
 import isNil from 'lodash-es/isNil';
 
+import { ComponentChanges } from '@dsh/type-utils';
 import { coerceBoolean } from '@dsh/utils';
 
 export interface Option<T> {

src/components/form-controls/utils/custom-form-control.ts

@@ -23,7 +23,7 @@ import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Subject } from 'rxjs';
 import { v4 as uuid } from 'uuid';
 
-import { InputMixinBase } from './input-base';
+import { INPUT_MIXIN_BASE } from './input-base';
 
 /* eslint-disable @angular-eslint/no-conflicting-lifecycle */
 @UntilDestroy()
@@ -32,8 +32,8 @@ import { InputMixinBase } from './input-base';
 /**
  * @deprecated use s-libs
  */
-export class CustomFormControl<I extends any = any, P extends any = I>
+export class CustomFormControl<I = any, P = I>
-    extends InputMixinBase
+    extends INPUT_MIXIN_BASE
     implements AfterViewInit, ControlValueAccessor, MatFormFieldControl<I>, OnDestroy, DoCheck, OnChanges
 {
     /** The aria-describedby attribute on the input for improved a11y. */
@@ -41,6 +41,8 @@ export class CustomFormControl<I extends any = any, P extends any = I>
 
     readonly stateChanges: Subject<void> = new Subject<void>();
 
+    errorState: boolean;
+
     controlType = 'text';
 
     autofilled = false;

src/components/form-controls/utils/input-base.ts

@@ -1,5 +1,5 @@
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
-import { CanUpdateErrorStateCtor, ErrorStateMatcher, mixinErrorState } from '@angular/material/core';
+import { ErrorStateMatcher, mixinErrorState } from '@angular/material/core';
 
 export class InputBase {
     constructor(
@@ -10,5 +10,4 @@ export class InputBase {
     ) {}
 }
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
+export const INPUT_MIXIN_BASE = mixinErrorState(InputBase);
-export const InputMixinBase: CanUpdateErrorStateCtor & typeof InputBase = mixinErrorState(InputBase);

src/components/indicators/last-updated/_last-updated-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-last-updated-theme($theme) {
     $foreground: map-get($theme, foreground);

src/components/indicators/status/_status-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-status-theme($theme) {
     $foreground: map-get($theme, foreground);

src/components/layout/accordion/accordion-item-content-header/_accordion-item-content-header-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-accordion-item-content-header-theme($theme) {
     $foreground: map-get($theme, foreground);

src/components/layout/alert/_alert-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-alert-theme($theme) {
     $primary: map-get($theme, primary);

src/components/layout/card/_card-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import '../../../styles/utils/shadow';
 
 @mixin dsh-card-theme($theme) {

src/components/layout/details-item/_details-item-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-details-item-theme($theme) {
     $foreground: map-get($theme, foreground);

src/components/layout/dropdown/_dropdown-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @use '../../../styles/utils/shadow';
 
 @mixin dsh-dropdown-theme($theme) {

src/components/layout/limited-list/_limited-list-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-limited-list-theme($theme) {
     $foreground: map-get($theme, foreground);

src/components/layout/link-label/_link-label-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-link-label-typography($config) {
     .dsh-link-label-content {

src/components/layout/panel/_panel-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin panel($color) {
     border: solid 1px $color;

src/components/layout/row/_row-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-row-theme($theme) {
     $background: map-get($theme, background);

src/components/layout/timeline/_timeline-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import './timeline-item/timeline-item-badge/timeline-item-badge-theme';
 
 @mixin dsh-timeline-theme($theme) {

src/components/link/_link-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-link-theme($theme) {
     .dsh-link {

src/components/navigation/breadcrumb/_breadcrumb-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-breadcrumb-theme($theme) {
     $foreground: map-get($theme, foreground);

src/components/navigation/navbar-item/_navbar-item-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-navbar-item-theme($theme) {
     $primary: map-get($theme, primary);

src/components/navigation/navbar-item/navbar-item.component.ts

@@ -1,11 +1,11 @@
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { OnChanges, ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { MatSlideToggle, MatSlideToggleChange } from '@angular/material/slide-toggle';
-import { ComponentChanges } from '@dsh/type-utils';
 import { Observable } from 'rxjs';
 import { map, pluck } from 'rxjs/operators';
 
 import { BootstrapIconSize } from '@dsh/components/indicators/bootstrap-icon';
+import { ComponentChanges } from '@dsh/type-utils';
 
 @Component({
     selector: 'dsh-navbar-item',

src/components/navigation/state-nav/_state-nav-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import '../../../styles/utils/fill';
 
 @mixin dsh-state-nav-theme($theme) {

src/components/nested-table/_nested-table-theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin dsh-nested-table-theme($theme) {
     $foreground: map-get($theme, foreground);

src/styles/core.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @import 'dsh/typography';
 @import 'dsh/style';

src/styles/dsh/styles/_dsh-base-typography.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @function dsh-typography-config(
     $font-family: 'Roboto, "Helvetica Neue", sans-serif',

src/styles/mat/styles/_mat-radio-button.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin mat-radio-button-override() {
     .mat-radio-label {

src/styles/mat/styles/_mat-tabs.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @mixin mat-tabs-override() {
     .mat-tab-header-pagination {

src/styles/themes/_theme.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import '../utils/map-get-strict';
 
 @import '../dsh/theme';

src/styles/themes/eastern.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import 'palette';
 @import 'theme';
 

src/styles/themes/main.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import 'palette';
 @import 'theme';
 

src/styles/themes/persian-green.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import 'palette';
 @import 'theme';
 

src/styles/themes/solitude.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @import 'palette';
 @import 'theme';
 

src/styles/utils/_shadow.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 @function get-shadow($color, $opacity) {
     $color: rgba($color, $opacity);

tools/eslint-config/angular.js

@@ -0,0 +1,10 @@
+'use strict';
+
+module.exports = {
+    plugins: ['@angular-eslint', 'import', '@typescript-eslint'],
+    extends: [
+        'plugin:@angular-eslint/recommended',
+        'plugin:@angular-eslint/template/process-inline-templates',
+        require.resolve('./typescript.js'),
+    ],
+};

tools/eslint-config/import.js

@@ -0,0 +1,11 @@
+'use strict';
+
+module.exports = {
+    plugins: ['import'],
+    extends: ['plugin:import/errors', 'plugin:import/warnings', 'plugin:import/typescript'],
+    rules: {
+        'import/no-unresolved': 'off',
+        'import/namespace': 'off',
+        ...require('./rules').createImportOrderRule(),
+    },
+};

tools/eslint-config/jasmine.js

@@ -0,0 +1,10 @@
+'use strict';
+
+module.exports = {
+    plugins: ['jasmine', '@typescript-eslint'],
+    extends: ['plugin:jasmine/recommended'],
+    rules: {
+        'jasmine/new-line-before-expect': 'off',
+        '@typescript-eslint/no-floating-promises': 'off',
+    },
+};