TD-576: Fix select search input (#120)

.gitignore

@@ -51,3 +51,4 @@ Thumbs.db
 # Env and configs
 .env*
 src/*Config*.json
+!src/_*Config*.json

README.md

@@ -15,34 +15,11 @@
 
 1. Add environment and configurations:
 
-    - `src/appConfig.json`:
+    - `src/.env`
+    - `src/appConfig.json`
+    - `src/authConfig.json`
 
-        ```json
-        {
-            "apiEndpoint": "https://api.xample.com",
-            "urlShortenerEndpoint": "https://shrt.example.com",
-            "checkoutEndpoint": "https://checkout.example.com",
-            "docsEndpoints": {
-                "payments": "https://example.com/docs"
-            },
-            "theme": {
-                "name": "main"
-            },
-            "sentryDsn": "https://public@sentry.example.com/1",
-            "keycloakEndpoint": "https://auth.example.com"
-        }
-        ```
-
-    - `src/authConfig.json`:
-        ```json
-        {
-            "realm": "external",
-            "auth-server-url": "https://auth.example.com/auth/",
-            "ssl-required": "external",
-            "resource": "koffing",
-            "public-client": true
-        }
-        ```
+You can copy from examples like this one: [`_appConfig.json`](./src/_appConfig.json)
 
 2. Install packages
     ```sh

_.env

@@ -1 +1 @@
-PROXY_TARGET="https://sample.vality.dev"
+PROXY_TARGET="https://vality.dev"

package-lock.json

@@ -42,6 +42,7 @@
         "angular-file": "^3.0.1",
         "angular2-text-mask": "^9.0.0",
         "apexcharts": "^3.19.2",
+        "coerce-property": "^15.0.1",
         "css-element-queries": "1.2.3",
         "dinero.js": "2.0.0-alpha.8",
         "humanize-duration": "^3.19.0",
@@ -52,7 +53,7 @@
         "lodash-es": "4.17.21",
         "moment": "2.29.4",
         "ng-apexcharts": "1.7.1",
-        "ngx-mat-select-search": "4.2.1",
+        "ngx-mat-select-search": "6.0.0",
         "rxjs": "7.5.6",
         "short-uuid": "4.2.0",
         "tslib": "2.4.0",
@@ -7546,6 +7547,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/coerce-property": {
+      "version": "15.0.1",
+      "resolved": "https://registry.npmjs.org/coerce-property/-/coerce-property-15.0.1.tgz",
+      "integrity": "sha512-BFuCajc/anzod6ExgyfEm2jaAE0OhSHEIBsmFj0bB7rQIrhgBiLPxpo3XWi7AyE5VVlFsLpkgIEGrDIWzJWc1Q==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/cdk": ">=15.0.0",
+        "@angular/common": ">=15.0.0",
+        "@angular/core": ">=15.0.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -13323,14 +13337,14 @@
       }
     },
     "node_modules/ngx-mat-select-search": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-4.2.1.tgz",
-      "integrity": "sha512-bKHpOSIXyqwZw35OB6yi87tcRRV/69mu49PN0M2ZzVbiWBPg/IN58aJnCHUDxDG6CdK0vbGJ/2eCPniZ1nf9KA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-6.0.0.tgz",
+      "integrity": "sha512-arrWZg2N/Pv3hCE2EV0qj3rqEUKImntmhW8qvo/aYxeN9iWPsseOpokcfMeC9I/SrLrqQFdfyPgHOgB9DqF2Hw==",
       "dependencies": {
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
-        "@angular/material": "^12.0.0 || ^13.0.0 || ^14.0.0"
+        "@angular/material": "^15.0.0"
       }
     },
     "node_modules/nice-napi": {
@@ -23545,6 +23559,14 @@
       "integrity": "sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==",
       "dev": true
     },
+    "coerce-property": {
+      "version": "15.0.1",
+      "resolved": "https://registry.npmjs.org/coerce-property/-/coerce-property-15.0.1.tgz",
+      "integrity": "sha512-BFuCajc/anzod6ExgyfEm2jaAE0OhSHEIBsmFj0bB7rQIrhgBiLPxpo3XWi7AyE5VVlFsLpkgIEGrDIWzJWc1Q==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -27639,9 +27661,9 @@
       }
     },
     "ngx-mat-select-search": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-4.2.1.tgz",
-      "integrity": "sha512-bKHpOSIXyqwZw35OB6yi87tcRRV/69mu49PN0M2ZzVbiWBPg/IN58aJnCHUDxDG6CdK0vbGJ/2eCPniZ1nf9KA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-6.0.0.tgz",
+      "integrity": "sha512-arrWZg2N/Pv3hCE2EV0qj3rqEUKImntmhW8qvo/aYxeN9iWPsseOpokcfMeC9I/SrLrqQFdfyPgHOgB9DqF2Hw==",
       "requires": {
         "tslib": "^2.4.0"
       }

package.json

@@ -60,6 +60,7 @@
     "angular-file": "^3.0.1",
     "angular2-text-mask": "^9.0.0",
     "apexcharts": "^3.19.2",
+    "coerce-property": "^15.0.1",
     "css-element-queries": "1.2.3",
     "dinero.js": "2.0.0-alpha.8",
     "humanize-duration": "^3.19.0",
@@ -70,7 +71,7 @@
     "lodash-es": "4.17.21",
     "moment": "2.29.4",
     "ng-apexcharts": "1.7.1",
-    "ngx-mat-select-search": "4.2.1",
+    "ngx-mat-select-search": "6.0.0",
     "rxjs": "7.5.6",
     "short-uuid": "4.2.0",
     "tslib": "2.4.0",

src/_appConfig.json

@@ -0,0 +1,14 @@
+{
+    "keycloakEndpoint": "https://auth.vality.dev",
+    "theme": {
+        "name": "eastern"
+    },
+    "sentryDsn": null,
+    "docsEndpoints": {
+        "payments": "https://valitydev.github.io/swag-payments"
+    },
+    "apiEndpoint": "http://localhost:8000/__api",
+    "urlShortenerEndpoint": "https://shrt.vality.dev",
+    "checkoutEndpoint": "https://checkout.vality.dev",
+    "currencies": ["RUB", "USD", "EUR"]
+}

src/_authConfig.json

@@ -0,0 +1,7 @@
+{
+    "realm": "external",
+    "auth-server-url": "https://auth.vality.dev/auth/",
+    "ssl-required": "external",
+    "resource": "dashboard",
+    "public-client": true
+}

src/app/config/config.ts

@@ -12,5 +12,6 @@ export interface Config {
     };
     sentryDsn?: string;
     keycloakEndpoint: string;
+    currencies: string[];
 }
 export const BASE_CONFIG = getBaseClass<Config>();

src/app/dadata/dadata.component.ts

@@ -9,13 +9,14 @@ import {
     FmsUnitQuery,
     PartyContent,
 } from '@vality/swag-questionary-aggr-proxy';
+import { coerceBoolean } from 'coerce-property';
 import isEmpty from 'lodash-es/isEmpty';
 import { interval, Observable } from 'rxjs';
 import { debounce, filter, map, switchMap, take } from 'rxjs/operators';
 
 import { ContentByRequestType, DaDataService, ParamsByRequestType, Suggestion } from '@dsh/api/questionary-aggr-proxy';
 import { progress, shareReplayUntilDestroyed, takeError } from '@dsh/operators';
-import { coerceBoolean, provideValueAccessor } from '@dsh/utils';
+import { provideValueAccessor } from '@dsh/utils';
 
 import { Type } from './type';
 

src/app/home/actionbar/components/menu-item/menu-item.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
-
-import { coerceBoolean } from '@dsh/utils';
+import { coerceBoolean } from 'coerce-property';
 
 @Component({
     selector: 'dsh-menu-item',

src/app/home/actionbar/components/user-dropdown/user-dropdown.component.ts

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { coerceBoolean } from 'coerce-property';
 import { map } from 'rxjs/operators';
 
 import { ContextOrganizationService } from '@dsh/app/shared/services';
-import { coerceBoolean } from '@dsh/utils';
 
 import { ROTATE } from './utils/rotate-animation';
 import { KeycloakService } from '../../../../auth';

src/app/icons/icons.json

@@ -1 +1 @@
-["apple_pay", "google_pay", "logo", "mastercard", "mir", "samsung_pay", "visa", "yandex_pay"]
+["apple_pay", "google_pay", "logo", "mastercard", "mir", "samsung_pay", "visa", "yandex_pay", "x"]

src/app/sections/organization-section/organization-details/change-roles-table/change-roles-table.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnInit, Outp
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { MemberRole, ResourceScopeId, RoleId } from '@vality/swag-organizations';
+import { coerceBoolean } from 'coerce-property';
 import isNil from 'lodash-es/isNil';
 import { BehaviorSubject, combineLatest, EMPTY, Observable, of } from 'rxjs';
 import { first, map, switchMap, tap } from 'rxjs/operators';
@@ -11,7 +12,6 @@ import { DialogConfig, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
 import { ShopsDataService } from '@dsh/app/shared';
 import { sortRoleIds } from '@dsh/app/shared/components/organization-roles/utils/sort-role-ids';
 import { PartialReadonly } from '@dsh/type-utils';
-import { coerceBoolean } from '@dsh/utils';
 
 import { SelectRoleDialogComponent } from './components/select-role-dialog/select-role-dialog.component';
 import { SelectRoleDialogResult } from './components/select-role-dialog/types/select-role-dialog-result';

src/app/sections/payment-section/analytics/stat-item/stat-item.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { coerceBoolean } from 'coerce-property';
 
 import { SpinnerType } from '@dsh/components/indicators';
-import { coerceBoolean } from '@dsh/utils';
 
 import { StatData } from '../utils';
 

src/app/shared/components/dialog/base-dialog/base-dialog.component.ts

@@ -1,6 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-import { coerceBoolean } from '@dsh/utils';
+import { coerceBoolean } from 'coerce-property';
 
 // TODO: add unit test for template with new ng-content
 @Component({

src/app/shared/components/inputs/category-autocomplete-field/category-autocomplete-field.component.ts

@@ -1,13 +1,14 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { WrappedFormControlSuperclass } from '@s-libs/ng-core';
 import { Category } from '@vality/swag-payments';
+import { coerceBoolean } from 'coerce-property';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { CategoriesService } from '@dsh/api/payments';
 import { Option } from '@dsh/components/form-controls/select-search-field';
 import { shareReplayRefCount } from '@dsh/operators';
-import { provideValueAccessor, coerceBoolean } from '@dsh/utils';
+import { provideValueAccessor } from '@dsh/utils';
 
 @Component({
     selector: 'dsh-category-autocomplete-field',

src/app/shared/components/inputs/country-autocomplete-field/countries-autocomplete-field.component.ts

@@ -1,9 +1,10 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { WrappedFormControlSuperclass } from '@s-libs/ng-core';
+import { coerceBoolean } from 'coerce-property';
 import { map } from 'rxjs/operators';
 
 import { CountriesService } from '@dsh/api/payments';
-import { provideValueAccessor, coerceBoolean } from '@dsh/utils';
+import { provideValueAccessor } from '@dsh/utils';
 
 import { CountryId } from './types';
 import { countriesToOptions } from './utils';

src/app/shared/components/inputs/currency-autocomplete-field/currency-autocomplete-field.component.ts

@@ -1,8 +1,11 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { WrappedFormControlSuperclass } from '@s-libs/ng-core';
+import { coerceBoolean } from 'coerce-property';
 
 import { Option } from '@dsh/components/form-controls/radio-group-field';
-import { provideValueAccessor, coerceBoolean } from '@dsh/utils';
+import { provideValueAccessor } from '@dsh/utils';
+
+import { ConfigService } from '../../../../config';
 
 @Component({
     selector: 'dsh-currency-autocomplete-field',
@@ -14,23 +17,11 @@ export class CurrencyAutocompleteFieldComponent extends WrappedFormControlSuperc
     @Input() label: string;
     @Input() @coerceBoolean required = false;
 
-    options: Option<string>[] = [
-        'RUB',
-        'USD',
-        'EUR',
-        'UAH',
-        'KZT',
-        'BYN',
-        'JPY',
-        'INR',
-        'AZN',
-        'BRL',
-        'BDT',
-        'TRY',
-        'PHP',
-        'KRW',
-        'PKR',
-    ]
+    options: Option<string>[] = this.configService.currencies
         .sort()
         .map((currency) => ({ label: currency, value: currency }));
+
+    constructor(private configService: ConfigService) {
+        super();
+    }
 }

src/app/shared/components/inputs/max-length-input/max-length-input.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, forwardRef, Input, OnChanges } from
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { FormControl, ValidatorFn } from '@ngneat/reactive-forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { coerceBoolean } from 'coerce-property';
 import isNil from 'lodash-es/isNil';
 import isObject from 'lodash-es/isObject';
 import { skip } from 'rxjs/operators';
@@ -9,7 +10,6 @@ import { skip } from 'rxjs/operators';
 import { ComponentInputError } from '@dsh/app/shared/services/error/models/component-input-error';
 import { ErrorMatcher } from '@dsh/app/shared/utils';
 import { ComponentChanges } from '@dsh/type-utils';
-import { coerceBoolean } from '@dsh/utils';
 @UntilDestroy()
 @Component({
     selector: 'dsh-max-length-input',

src/app/shared/components/inputs/payment-institution-field/payment-institution-field.component.ts

@@ -1,12 +1,13 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { WrappedFormControlSuperclass } from '@s-libs/ng-core';
 import { PaymentInstitution } from '@vality/swag-payments';
+import { coerceBoolean } from 'coerce-property';
 import { Observable } from 'rxjs';
 import { map, share } from 'rxjs/operators';
 
 import { PaymentInstitutionsService } from '@dsh/api/payments';
 import { Option } from '@dsh/components/form-controls/select-search-field';
-import { provideValueAccessor, coerceBoolean } from '@dsh/utils';
+import { provideValueAccessor } from '@dsh/utils';
 
 @Component({
     selector: 'dsh-payment-institution-field',

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

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, Optional } from '@angular/core';
 import { WrappedFormControlSuperclass } from '@s-libs/ng-core';
 import { Shop } from '@vality/swag-payments';
+import { coerceBoolean } from 'coerce-property';
 import { defer, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -9,7 +10,7 @@ import { ShopsDataService } from '@dsh/app/shared';
 import { shopToOption } from '@dsh/app/shared/components/inputs/shop-field/utils/shops-to-options';
 import { Option } from '@dsh/components/form-controls/select-search-field';
 import { shareReplayRefCount } from '@dsh/operators';
-import { coerceBoolean, provideValueAccessor } from '@dsh/utils';
+import { provideValueAccessor } from '@dsh/utils';
 
 import { SHOPS } from './shops-token';
 

src/app/shared/components/inputs/wallet-autocomplete-field/wallet-autocomplete-field.component.ts

@@ -1,9 +1,10 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { WrappedFormControlSuperclass } from '@s-libs/ng-core';
+import { coerceBoolean } from 'coerce-property';
 import { map } from 'rxjs/operators';
 
 import { WalletsService } from '@dsh/api/wallet';
-import { coerceBoolean, provideValueAccessor } from '@dsh/utils';
+import { provideValueAccessor } from '@dsh/utils';
 
 import { WalletId } from './types';
 import { walletsToOptions } from './utils';

src/app/shared/components/organization-roles/organization-roles.component.ts

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { MemberRole } from '@vality/swag-organizations';
+import { coerceBoolean } from 'coerce-property';
 
 import { OrganizationsDictionaryService } from '@dsh/api/organizations';
-import { coerceBoolean } from '@dsh/utils';
 
 import { RoleGroup } from './types/role-group';
 import { groupRoles } from './utils/group-roles';

src/app/shared/components/radio-buttons/expandable-radio-group/expandable-radio-group.component.ts

@@ -11,10 +11,10 @@ import {
     TemplateRef,
 } from '@angular/core';
 import { FormControl } from '@ngneat/reactive-forms';
+import { coerceBoolean } from 'coerce-property';
 
 import { isNumber } from '@dsh/app/shared/utils';
 import { Dict } from '@dsh/type-utils';
-import { coerceBoolean } from '@dsh/utils';
 
 import { ExpandableRadioGroupItemDirective } from './directives/expandable-radio-group-item/expandable-radio-group-item.directive';
 import { ExpandableRadioChoice, isExpandableRadioObjectChoice } from './types/expandable-radio-choice';

src/assets/icons/x.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
+    <path
+        d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
+    />
+</svg>

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

@@ -10,8 +10,7 @@ import {
     ViewEncapsulation,
 } from '@angular/core';
 import { mixinDisabled } from '@angular/material/core';
-
-import { coerceBoolean } from '@dsh/utils';
+import { coerceBoolean } from 'coerce-property';
 
 import { ColorManager } from './color-manager';
 import { FocusManager } from './focus-manager';

src/components/filter/components/filter-button/filter-button.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-import { coerceBoolean } from '@dsh/utils';
+import { coerceBoolean } from 'coerce-property';
 
 @Component({
     selector: 'dsh-filter-button',

src/components/filter/components/filter-content/filter-content.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-
-import { coerceBoolean } from '@dsh/utils';
+import { coerceBoolean } from 'coerce-property';
 
 @Component({
     selector: 'dsh-filter-content',

src/components/filter/filter.component.ts

@@ -2,10 +2,9 @@ import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { coerceBoolean } from 'coerce-property';
 import { map, pluck } from 'rxjs/operators';
 
-import { coerceBoolean } from '@dsh/utils';
-
 import { FilterDialogComponent } from './components/filter-dialog/filter-dialog.component';
 
 @UntilDestroy()

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

@@ -1,10 +1,11 @@
 import { Component, Input, OnChanges } from '@angular/core';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { WrappedFormControlSuperclass } from '@s-libs/ng-core';
+import { coerceBoolean } from 'coerce-property';
 import isNil from 'lodash-es/isNil';
 
 import { ComponentChanges } from '@dsh/type-utils';
-import { provideValueAccessor, coerceBoolean } from '@dsh/utils';
+import { provideValueAccessor } from '@dsh/utils';
 
 export interface Option<T> {
     value: T;

src/components/form-controls/select-search-field/select-search-field.component.html

@@ -1,12 +1,14 @@
 <mat-form-field *transloco="let t; scope: 'core-components'; read: 'coreComponents.selectSearchField'">
     <mat-label>{{ label }}</mat-label>
     <mat-hint *ngIf="hint">{{ hint }}</mat-hint>
-    <mat-select [formControl]="control" [required]="required">
+    <mat-select [formControl]="control">
         <mat-option>
             <ngx-mat-select-search
                 [formControl]="selectSearchControl"
                 [placeholderLabel]="t('searchPlaceholder')"
                 [noEntriesFoundLabel]="t('noEntriesFoundLabel')"
+                closeSvgIcon="x"
+                [required]="required"
             >
             </ngx-mat-select-search>
         </mat-option>

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

@@ -1,11 +1,12 @@
 import { OnChanges, ChangeDetectionStrategy, Input, Component } from '@angular/core';
 import { FormControl } from '@ngneat/reactive-forms';
 import { WrappedFormControlSuperclass } from '@s-libs/ng-core';
+import { coerceBoolean } from 'coerce-property';
 import { BehaviorSubject, combineLatest, defer, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { ComponentChanges } from '@dsh/type-utils';
-import { getFormValueChanges, provideValueAccessor, coerceBoolean } from '@dsh/utils';
+import { getFormValueChanges, provideValueAccessor } from '@dsh/utils';
 
 import { Option } from './types';
 import { filterOptions } from './utils';

src/components/indicators/selection/selection.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-import { coerceBoolean } from '@dsh/utils';
+import { coerceBoolean } from 'coerce-property';
 
 @Component({
     selector: 'dsh-selection',

src/components/indicators/status/status.component.ts

@@ -1,7 +1,7 @@
 import { Component, HostBinding, Input } from '@angular/core';
+import { coerceBoolean } from 'coerce-property';
 
 import { StatusColor } from '../../../app/theme-manager';
-import { coerceBoolean } from '../../../utils';
 
 @Component({
     selector: 'dsh-status',

src/components/layout/accordion/accordion-item/accordion-item.component.ts

@@ -1,7 +1,6 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, Input, Output } from '@angular/core';
-
-import { coerce } from '@dsh/utils';
+import { coerce } from 'coerce-property';
 
 import { EXPAND_ANIMATION } from './expand-animation';
 import { LazyPanelContentDirective } from './lazy-panel-content.directive';
@@ -18,7 +17,7 @@ export class AccordionItemComponent {
     @Output() expandedChange = new EventEmitter<boolean>();
 
     @Input()
-    @coerce(coerceBooleanProperty, (v: boolean, self: AccordionItemComponent) => self.expandedChange.emit(v))
+    @coerce<AccordionItemComponent>(coerceBooleanProperty, (v: boolean, self) => self.expandedChange.emit(v))
     expanded = false;
 
     @ContentChild(AccordionItemContentComponent)

src/components/layout/accordion/accordion.component.ts

@@ -9,11 +9,12 @@ import {
     QueryList,
     ViewContainerRef,
 } from '@angular/core';
+import { coerce } from 'coerce-property';
 import { combineLatest, merge, of } from 'rxjs';
 import { delay, distinctUntilChanged, filter, map, startWith, switchMap, take } from 'rxjs/operators';
 
 import { AccordionItemComponent } from './accordion-item';
-import { coerce, smoothChangeTo } from '../../../utils';
+import { smoothChangeTo } from '../../../utils';
 
 const INIT_DELAY_MS = 350;
 const SCROLL_TO_Y_OFFSET_PX = 80;
@@ -26,7 +27,7 @@ const SCROLL_TIME_MS = 500;
 })
 export class AccordionComponent implements AfterViewInit {
     @Input()
-    @coerce((v) => v, (v: number, self: AccordionComponent) => self.expandedChange.emit(v))
+    @coerce<AccordionComponent>((v) => v, (v: number, self) => self.expandedChange.emit(v))
     expanded: number;
 
     @Output() expandedChange = new EventEmitter<number>();

src/components/layout/dropdown/dropdown.component.ts

@@ -9,11 +9,10 @@ import {
     TemplateRef,
     ViewChild,
 } from '@angular/core';
+import { coerceBoolean } from 'coerce-property';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
-import { coerceBoolean } from '@dsh/utils';
-
 import { OPEN_CLOSE_ANIMATION, State } from './open-close-animation';
 
 /**

src/components/navigation/state-nav/state-nav-item/state-nav-item.component.ts

@@ -1,8 +1,7 @@
 import { Component, ElementRef, Input, Renderer2 } from '@angular/core';
+import { coerceBoolean } from 'coerce-property';
 import { Subject } from 'rxjs';
 
-import { coerceBoolean } from '../../../../utils';
-
 export enum Color {
     Success = 'success',
     Warn = 'warn',

src/components/navigation/state-nav/state-nav.component.ts

@@ -8,10 +8,10 @@ import {
     QueryList,
     ViewEncapsulation,
 } from '@angular/core';
+import { coerceBoolean } from 'coerce-property';
 import { Subscription } from 'rxjs';
 
 import { StateNavItemComponent } from './state-nav-item';
-import { coerceBoolean } from '../../../utils';
 
 @Component({
     selector: 'dsh-state-nav',

src/utils/coerce/coerce-by-type.ts

@@ -1,29 +0,0 @@
-import {
-    coerceArray as coerceArrayProperty,
-    coerceBooleanProperty,
-    coerceCssPixelValue,
-    coerceElement as coerceElementProperty,
-    coerceNumberProperty,
-} from '@angular/cdk/coercion';
-
-import { coerce } from './coerce';
-
-export function coerceBoolean(target, key) {
-    return coerce(coerceBooleanProperty)(target, key);
-}
-
-export function coerceNumber(target, key) {
-    return coerce(coerceNumberProperty)(target, key);
-}
-
-export function coerceArray(target, key) {
-    return coerce(coerceArrayProperty)(target, key);
-}
-
-export function coercePixel(target, key) {
-    return coerce(coerceCssPixelValue)(target, key);
-}
-
-export function coerceElement(target, key) {
-    return coerce(coerceElementProperty)(target, key);
-}

src/utils/coerce/coerce.spec.ts

@@ -1,41 +0,0 @@
-import { coerce } from './coerce';
-
-describe('coerce', () => {
-    class Simple {
-        @coerce(function (v) {
-            return this.withDef + v;
-        })
-        testThisBefore = 1;
-
-        @coerce((v) => v + 1)
-        withDef = 0;
-
-        @coerce((v) => v + 1)
-        withoutDef;
-
-        @coerce(function (v) {
-            return this.withDef + v;
-        })
-        testThisAfter = 1;
-    }
-
-    it("without default init shouldn't call", () => {
-        const simple = new Simple();
-        expect(simple.withoutDef).toBeUndefined();
-    });
-
-    it('with default init should call', () => {
-        const simple = new Simple();
-        expect(simple.withDef).toBe(1);
-    });
-
-    it('init order should affects usage this (before)', () => {
-        const simple = new Simple();
-        expect(simple.testThisBefore).toBeNaN();
-    });
-
-    it('init order should affects usage this (after)', () => {
-        const simple = new Simple();
-        expect(simple.testThisAfter).toBe(2);
-    });
-});

src/utils/coerce/coerce.ts

@@ -1,22 +0,0 @@
-export function coerce<I = any, O = any, T = any>(
-    fn: (value: I, self: T) => O,
-    afterFn?: (newValue: O, self: T, oldValue: I) => void
-): PropertyDecorator {
-    return function (target: T, key) {
-        const _key = Symbol(key.toString());
-        target[_key] = target[key];
-        Object.defineProperty(target, key, {
-            get() {
-                return this[_key];
-            },
-            set: afterFn
-                ? function (v) {
-                      this[_key] = fn.call(this, v);
-                      afterFn.call(this, this[_key], this, v);
-                  }
-                : function (v) {
-                      this[_key] = fn.call(this, v, this);
-                  },
-        });
-    };
-}

src/utils/coerce/index.ts

@@ -1,2 +0,0 @@
-export * from './coerce';
-export * from './coerce-by-type';

src/utils/index.ts

@@ -1,4 +1,3 @@
-export * from './coerce';
 export * from './get-base-class';
 export * from './download';
 export * from './smooth-change-to';