ngx-register-base 1.3.3 → 2.0.0

package/lib/core/param/param-base.d.ts

@@ -1,14 +1,22 @@
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DestroyRef, Injector, OnInit } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DestroyRef, Injector, OnInit, TemplateRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { IInputControl, InputControlGqlValue, InputControlSaveValue } from '../../types';
 import { FormatterGqlValueType, FormatterSavedValueType, ParserSavedValueType } from '../../types/params.types';
+import { ValidationMessageService } from '../../services/validation-message.service';
 import * as i0 from "@angular/core";
 export declare abstract class ParamBase<ValueType extends any | null, SavedValueType extends InputControlSaveValue> implements ControlValueAccessor, OnInit, AfterViewInit, AfterContentInit {
     private _injector;
+    protected readonly validationMessageService: ValidationMessageService | null;
     /** Название */
     label: string;
     /** Текст при пустом значении control (null) */
     placeholder: import("@angular/core").InputSignal<string>;
+    /** Отображаемый при наведении на значок рядом с лейблом текст в режиме просмотра */
+    tooltip: import("@angular/core").InputSignal<string>;
+    /** Отображаемый при наведении на значок рядом с лейблом текст в режиме редактирования */
+    editTooltip: import("@angular/core").InputSignal<string>;
+    /** Размер поля */
+    size: import("@angular/core").InputSignal<"m" | "l" | "s">;
     /** Режим просмотра, по умолчанию выключен */
     readmode: boolean;
     /** Кнопка быстрой очистки поля, по умолчанию включена */
@@ -25,10 +33,16 @@ export declare abstract class ParamBase<ValueType extends any | null, SavedValue
     set formatGqlValue(formatter: FormatterGqlValueType<ValueType> | undefined);
     /** Метод для отображения значения в режиме просмотра */
     buildShowedValue: import("@angular/core").InputSignal<(_: ValueType) => string>;
+    /** Шаблон для отображения значения в режиме просмотра */
+    templateReadValue: import("@angular/core").InputSignal<TemplateRef<{
+        $implicit: ValueType;
+    }> | null>;
     set required(required: boolean);
     get required(): boolean;
     set disabled(disabled: boolean);
     get disabled(): boolean;
+    private _errorMessage;
+    protected validationErrorHint: import("@angular/core").Signal<string>;
     private readonly _ngControl;
     protected readonly cdr: ChangeDetectorRef;
     protected readonly dr: DestroyRef;
@@ -57,12 +71,14 @@ export declare abstract class ParamBase<ValueType extends any | null, SavedValue
     protected isNotEmpty(): boolean;
     ngAfterContentInit(): void;
     private _subscribeOnValue;
+    protected onControlValueChange(): void;
     private _updateShowedValue;
     private _updateSavedValue;
     private _subscribeOnSavedValue;
+    private _subscribeOnValidationMessage;
     protected afterContentInit(): void;
     private _setControlRequired;
     private _setControlDisabled;
     static ɵfac: i0.ɵɵFactoryDeclaration<ParamBase<any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ParamBase<any, any>, never, never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readmode": { "alias": "readmode"; "required": false; }; "forceClear": { "alias": "forceClear"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "paramStyle": { "alias": "paramStyle"; "required": false; }; "formatSavedValue": { "alias": "formatSavedValue"; "required": false; }; "parseSavedValue": { "alias": "parseSavedValue"; "required": false; }; "formatGqlValue": { "alias": "formatGqlValue"; "required": false; }; "buildShowedValue": { "alias": "buildShowedValue"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ParamBase<any, any>, never, never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "editTooltip": { "alias": "editTooltip"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "readmode": { "alias": "readmode"; "required": false; }; "forceClear": { "alias": "forceClear"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "paramStyle": { "alias": "paramStyle"; "required": false; }; "formatSavedValue": { "alias": "formatSavedValue"; "required": false; }; "parseSavedValue": { "alias": "parseSavedValue"; "required": false; }; "formatGqlValue": { "alias": "formatGqlValue"; "required": false; }; "buildShowedValue": { "alias": "buildShowedValue"; "required": false; "isSignal": true; }; "templateReadValue": { "alias": "templateReadValue"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/core/param/param-date-base.d.ts

@@ -1,18 +1,24 @@
-import { Injector } from '@angular/core';
 import { DateTimeService } from '../../services/date-time.service';
 import { ParamBase } from './param-base';
-import { PrizmDateTypes } from '../../utils/prizm.shared.module';
 import { InputControlSaveValue } from '../../types';
-import { EDatePattern, ETimezone } from '../../directives/date/date-time.types';
+import { EDatePattern } from '../../directives/date/date-time.types';
+import { TuiDay, TuiMonth, TuiMonthRange } from '@taiga-ui/cdk';
 import * as i0 from "@angular/core";
-export declare abstract class ParamDateBase<ValueType extends PrizmDateTypes | null, SavedValueType extends InputControlSaveValue> extends ParamBase<ValueType, SavedValueType> {
-    private _dateInjector;
-    protected readonly ETimezone: typeof ETimezone;
-    protected readonly EDatePattern: typeof EDatePattern;
+export type DateRangeType = {
+    from: Date;
+    to: Date;
+};
+type ParamDateType = TuiDay | TuiMonth | TuiMonthRange | DateRangeType | Date;
+export declare abstract class ParamDateBase<ValueType extends ParamDateType | null, SavedValueType extends InputControlSaveValue> extends ParamBase<ValueType, SavedValueType> {
     protected readonly _dts: DateTimeService;
+    min: import("@angular/core").InputSignal<Date | null | undefined>;
+    max: import("@angular/core").InputSignal<Date | null | undefined>;
+    protected minDay: import("@angular/core").Signal<TuiDay | null>;
+    protected maxDay: import("@angular/core").Signal<TuiDay | null>;
+    protected readonly EDatePattern: typeof EDatePattern;
     protected readonly timezoneChange: import("rxjs").Observable<import("../../services/date-time.service").ITimeZone>;
-    constructor(_dateInjector: Injector);
     protected rebuildDateInNewTimezone(date: Date, prevDiff: string, currDiff: string): Date;
     static ɵfac: i0.ɵɵFactoryDeclaration<ParamDateBase<any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ParamDateBase<any, any>, never, never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ParamDateBase<any, any>, never, never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, never, false, never>;
 }
+export {};

package/lib/core/param/param-select-base.d.ts

@@ -1,25 +1,30 @@
-import { Injector } from '@angular/core';
+import { Injector, TemplateRef } from '@angular/core';
 import { ParamBase } from './param-base';
-import { PolymorphContent } from '@prizm-ui/components';
 import { InputControlSaveValue } from '../../types';
 import { InferArrayType } from '../../types/sub-types';
 import { MetaQuery } from '../../types/params.types';
 import { FastQueryStore } from '../../store/fast-query-store.service';
+import { TuiDropdownWidth } from '@taiga-ui/core';
+import { PolymorpheusContent } from '@taiga-ui/polymorpheus';
 import * as i0 from "@angular/core";
 export declare abstract class ParamSelectBase<ValueType, SavedValueType extends InputControlSaveValue> extends ParamBase<ValueType, SavedValueType> {
     private _selectInjector;
     items: NonNullable<InferArrayType<ValueType>>[];
     searchable: boolean;
-    maxDropdownHeight: number;
-    valueTemplate?: PolymorphContent;
-    listItemTemplate?: PolymorphContent;
-    nullContent: PolymorphContent | string | null;
+    minDropdownHeight: import("@angular/core").InputSignal<number>;
+    maxDropdownHeight: import("@angular/core").InputSignal<number>;
+    dropdownLimitWidth: import("@angular/core").InputSignal<TuiDropdownWidth>;
+    valueTemplate?: PolymorpheusContent;
+    listItemTemplate?: TemplateRef<any>;
+    nullContent: PolymorpheusContent | null;
     /** Массив полей по которым будет производиться фильтрация _or */
     searchSubfields: string[];
     /** Флаг строгого поиска: строгий - _eq, не строгий - _ilike */
     strictSearch: boolean;
     selectClasses?: string;
     limit: number;
+    /** Автозаполнение при автозапросе получения значений в поле */
+    autoFill: boolean;
     /** форматтер для задания кастомного отображения значения в поле */
     formatShowedValue: (value: any, field: string) => string;
     /** мета для автоматической подргузки значений из таблицы */
@@ -38,5 +43,5 @@ export declare abstract class ParamSelectBase<ValueType, SavedValueType extends
         valueField: string | null;
     };
     static ɵfac: i0.ɵɵFactoryDeclaration<ParamSelectBase<any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ParamSelectBase<any, any>, never, never, { "items": { "alias": "items"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "maxDropdownHeight": { "alias": "maxDropdownHeight"; "required": false; }; "valueTemplate": { "alias": "valueTemplate"; "required": false; }; "listItemTemplate": { "alias": "listItemTemplate"; "required": false; }; "nullContent": { "alias": "nullContent"; "required": false; }; "searchSubfields": { "alias": "searchSubfields"; "required": false; }; "strictSearch": { "alias": "strictSearch"; "required": false; }; "selectClasses": { "alias": "selectClasses"; "required": false; }; "limit": { "alias": "limit"; "required": false; }; "formatShowedValue": { "alias": "formatShowedValue"; "required": false; }; "meta": { "alias": "meta"; "required": false; }; }, { "itemsChange": "itemsChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ParamSelectBase<any, any>, never, never, { "items": { "alias": "items"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "minDropdownHeight": { "alias": "minDropdownHeight"; "required": false; "isSignal": true; }; "maxDropdownHeight": { "alias": "maxDropdownHeight"; "required": false; "isSignal": true; }; "dropdownLimitWidth": { "alias": "dropdownLimitWidth"; "required": false; "isSignal": true; }; "valueTemplate": { "alias": "valueTemplate"; "required": false; }; "listItemTemplate": { "alias": "listItemTemplate"; "required": false; }; "nullContent": { "alias": "nullContent"; "required": false; }; "searchSubfields": { "alias": "searchSubfields"; "required": false; }; "strictSearch": { "alias": "strictSearch"; "required": false; }; "selectClasses": { "alias": "selectClasses"; "required": false; }; "limit": { "alias": "limit"; "required": false; }; "autoFill": { "alias": "autoFill"; "required": false; }; "formatShowedValue": { "alias": "formatShowedValue"; "required": false; }; "meta": { "alias": "meta"; "required": false; }; }, { "itemsChange": "itemsChange"; }, never, never, false, never>;
 }

package/lib/core/register-base/register-base.store.d.ts

@@ -1,8 +1,7 @@
 import { ComponentStore } from '@ngrx/component-store';
-import { PrizmTableCellSorter } from '@prizm-ui/components';
 import { Apollo, MutationResult } from 'apollo-angular';
 import { Observable, ReplaySubject, Subscription } from 'rxjs';
-import { IHasuraQueryFilter } from '../../components/register-table/model/schema';
+import { IHasuraQueryFilter, RegisterTableCellSorter } from '../../components/register-table/model/schema';
 import { GqlFields } from '../../types/inputs.types';
 import { IBaseRegisterStore, IBaseRegisterStoreState } from '../../types/register-base.types';
 import { HasuraError } from '../../types/hasura.types';
@@ -29,7 +28,7 @@ export declare abstract class RegisterBaseStore<Type extends Record<string, any>
         filter: IHasuraQueryFilter<Type>;
         callback?: (data: Type[]) => void;
     }>) => Subscription;
-    abstract buildFilter(limit: number | undefined, offset: number | undefined, gqlFilter: GqlFields | undefined, sorter?: PrizmTableCellSorter<Type>[]): IHasuraQueryFilter<Type>;
+    abstract buildFilter(limit: number | undefined, offset: number | undefined, gqlFilter: GqlFields | undefined, sorter?: RegisterTableCellSorter<Type>[]): IHasuraQueryFilter<Type>;
     static ɵfac: i0.ɵɵFactoryDeclaration<RegisterBaseStore<any, any>, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<RegisterBaseStore<any, any>>;
 }

package/lib/directives/date/date-time.types.d.ts

@@ -1,4 +1,3 @@
-import { PrizmDay, PrizmTime } from '@prizm-ui/components';
 export declare enum EDatePattern {
     MONTH_YEAR = "MM.yyyy",
     DATE = "dd.MM.yyyy",
@@ -29,4 +28,3 @@ export declare enum ETimezone {
     IRK = "+08:00",
     YAK = "+09:00"
 }
-export type SmaPrizmDateTime = [PrizmDay, PrizmTime | undefined];

package/lib/providers/index.d.ts

@@ -0,0 +1 @@
+export { provideSprocIcons } from './provide-icons';

package/lib/providers/provide-icons.d.ts

@@ -0,0 +1,3 @@
+import { Provider } from '@angular/core';
+/** Провайдер для регистрации иконок библиотеки */
+export declare function provideSprocIcons(): Provider;

package/lib/services/date-time.service.d.ts

@@ -1,7 +1,4 @@
 import { Moment } from 'moment-timezone';
-import { EDatePattern, SmaPrizmDateTime } from '../directives/date/date-time.types';
-import { PrizmDateTimeRange } from '@prizm-ui/components';
-import { TuiDay } from '@taiga-ui/cdk';
 import * as i0 from "@angular/core";
 export interface ITimeZone {
     time_diff: string;
@@ -65,16 +62,6 @@ export declare class DateTimeService {
     getCurrentDateWithoutTime(): Date;
     getDateWithoutTime(date: Date): Date;
     getXMonthBackDate(monthBackNumber: number): Date;
-    prizmDateTimeRangeToNativeDates(range: PrizmDateTimeRange): {
-        from: Date;
-        to: Date;
-    };
-    prizmDateTimeRangeFromNativeDates(from: Date, to: Date): PrizmDateTimeRange;
-    prizmDateTimeToNativeDate(prizmDateTime: SmaPrizmDateTime): Date;
-    getTuiDayFromString(date: string): TuiDay;
-    getTuiDayFromDate(date: Date): TuiDay;
-    transferTuiDayToString(date: TuiDay | null, pattern?: EDatePattern): string | null;
-    toSmaPrizmDateTime(dateString: string): SmaPrizmDateTime;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateTimeService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DateTimeService>;
 }

package/lib/services/dialog/dialog.service.d.ts

@@ -1,13 +1,11 @@
 import { Injector } from '@angular/core';
 import { Observable } from 'rxjs';
-import { DialogContext, DialogOptions } from './dialog.types';
+import { DialogContext } from './dialog.types';
 import { TuiDialogOptions } from '@taiga-ui/core';
 import { PolymorpheusContent } from '@taiga-ui/polymorpheus';
 import * as i0 from "@angular/core";
 export declare class DialogService {
-    private readonly _dialogService;
     private readonly _tuiDialogService;
-    openModal(template: unknown, config: Partial<DialogOptions<unknown, unknown>>): Observable<any>;
     openModalTaiga<Context extends DialogContext, Result = any>(component: new (...args: any[]) => unknown, context: Context, injector?: Injector): Observable<Result>;
     /**
      * Универсальная функция открытия диалога

package/lib/services/dialog/dialog.types.d.ts

@@ -1,7 +1,4 @@
-import { PrizmDialogOptions } from '@prizm-ui/components';
 import { TuiDialogSize } from '@taiga-ui/core';
-export { PrizmOverlayInsidePlacement as DialogOverlayInsidePlacement } from '@prizm-ui/components';
-export type DialogOptions<O, DATA> = PrizmDialogOptions<O, DATA>;
 export type DialogSize = TuiDialogSize;
 export interface DialogContext {
     closeable?: boolean;

package/lib/services/message.service.d.ts

@@ -0,0 +1,20 @@
+import { TuiAlertOptions } from '@taiga-ui/core';
+import type { PolymorpheusContent } from '@taiga-ui/polymorpheus';
+import { TuiPopoverContext } from '@taiga-ui/cdk';
+import * as i0 from "@angular/core";
+export declare const AlertType: {
+    readonly INFO: "info";
+    readonly POSITIVE: "positive";
+    readonly NEGATIVE: "negative";
+    readonly WARNING: "warning";
+    readonly NEUTRAL: "neutral";
+};
+export declare class MessageService {
+    private readonly _alerts;
+    alertsCount: import("@angular/core").WritableSignal<number>;
+    private refs;
+    showAlert<Option extends TuiAlertOptions<any> = TuiAlertOptions<any>, Result = void>(content: PolymorpheusContent<Option & TuiPopoverContext<Result>>, options?: Partial<Option>): void;
+    closeAll(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MessageService>;
+}

package/lib/services/validation-message.service.d.ts

@@ -0,0 +1,14 @@
+import { InjectionToken } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare const VALIDATION_MESSAGES_TOKEN: InjectionToken<Map<string, string>>;
+export declare class ValidationMessageService {
+    private readonly _messagesMap;
+    private defaultValidationMessages;
+    /** Возвращает Observable с текстом ошибки для контрола */
+    observeControlErrors(control: AbstractControl): Observable<string | null>;
+    private _getErrorMessage;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ValidationMessageService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ValidationMessageService>;
+}

package/lib/store/fast-query-store.service.d.ts

@@ -12,6 +12,7 @@ export declare class FastQueryStore {
         totalElements: number;
         selectedIdsQuery?: any[];
     }>;
+    fetchAllCount(meta: MetaQuery, limit: number): Observable<number>;
     generateGqlQuery(meta: MetaQuery, withoutAggregate?: boolean, withPickedSearch?: boolean): DocumentNode;
     private _buildDeepDataFromValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<FastQueryStore, never>;

package/lib/utils/index.d.ts

@@ -2,3 +2,4 @@ export * from './functions';
 export * from './get-url-segment';
 export * from './rxjs';
 export * from './select-all-utils';
+export * from './utils';

package/lib/utils/utils.d.ts

@@ -0,0 +1,3 @@
+import { Provider } from '@angular/core';
+/** Утилита для безопасного добавления кастомных резолверов иконок */
+export declare function provideCustomIcons(resolverFn: (icon: string) => string | null): Provider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-register-base",
-  "version": "1.3.3",
+  "version": "2.0.0",
   "schematics": "./schematics/collection.json",
   "ng-update": {
     "migrations": "./schematics/migration-collection.json"
@@ -24,17 +24,10 @@
     "@angular/core": "^18.2.0",
     "@apollo/client": "^3.13.5",
     "@ngrx/component-store": "^18.1.1",
-    "@prizm-ui/components": "^5.9",
-    "@prizm-ui/core": "^5.9",
-    "@prizm-ui/flag-icons": "^5.9",
-    "@prizm-ui/helpers": "^5.9",
-    "@prizm-ui/i18n": "^5.9",
-    "@prizm-ui/icons": "^5.9",
-    "@prizm-ui/theme": "^5.9",
-    "@taiga-ui/addon-table": "4.44.0",
-    "@taiga-ui/core": "4.44.0",
-    "@taiga-ui/kit": "4.44.0",
-    "@taiga-ui/legacy": "4.44.0",
+    "@taiga-ui/addon-table": "4.48.0",
+    "@taiga-ui/core": "4.48.0",
+    "@taiga-ui/kit": "4.48.0",
+    "@taiga-ui/legacy": "4.48.0",
     "apollo-angular": "^10.0.3",
     "date-fns": "^4.1.0",
     "graphql": "^16.10.0",

package/public-api.d.ts

@@ -2,6 +2,7 @@ export * from './lib/components/index';
 export * from './lib/consts/index';
 export * from './lib/core/index';
 export * from './lib/directives/index';
+export * from './lib/providers/index';
 export * from './lib/services/index';
 export * from './lib/store/index';
 export * from './lib/types/index';

package/styles/common-param.less

@@ -79,6 +79,15 @@
     .label {
       .default-label;
     }
+
+    input,
+    textarea,
+    sproc-custom-date-time-range,
+    tui-multi-select {
+      .input-text-14px;
+
+      border: 1px solid var(--stroke1);
+    }
   }
 }
 
@@ -87,6 +96,7 @@
     width: 100%;
     display: flex;
     flex-direction: column;
+    border-bottom: 1px solid var(--stroke1);
 
     .label-wrapper {
       .default-label-wrapper;
@@ -97,6 +107,11 @@
     .label {
       .default-label;
     }
+
+    input,
+    textarea {
+      .input-text-12px;
+    }
   }
 }
 

package/styles/flex.less

@@ -14,6 +14,11 @@
   flex-grow: 1;
 }
 
+.full-flex-width {
+  flex: 1;
+  width: 100%;
+}
+
 // .gap-1, ...,  .gap-6
 .loop(@counter) when (@counter > 0) {
   .gap-@{counter} {
@@ -50,4 +55,3 @@
   }
 }
 .align-items();
-

package/styles/icons.less

@@ -0,0 +1,8 @@
+.icon-size(@size) {
+  width: @size;
+  height: @size;
+}
+
+.icon-size--16 {
+  .icon-size(16px);
+}

package/styles/modals.less

@@ -0,0 +1,54 @@
+@import 'fonts';
+// Общие миксины для стилизации модалок
+
+// Форма модального окна фиксированной ширины с блоками контента и футера с кнопками
+.modal-form(@width: auto) {
+  display: flex;
+  flex-direction: column;
+  width: @width;
+}
+
+// Контейнер модального окна
+.modal-form__content(@padding: 24px, @gap: 16px) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: @padding;
+  gap: @gap;
+  align-self: stretch;
+}
+
+// Футер модального окна (контейнер кнопок с бордером)
+.modal-form__footer(@padding: 8px 16px, @gap: 8px) {
+  display: flex;
+  align-items: flex-start;
+  gap: @gap;
+  flex: 1 0 0;
+  align-self: stretch;
+  border-top: 1px solid var(--table-stroke);
+  padding: @padding;
+  height: 56px;
+}
+
+.modal-form__title {
+  color: var(--text-main);
+  text-align: center;
+  font-variant-numeric: lining-nums tabular-nums;
+
+  .static-title-h4;
+}
+
+.icon-title-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  gap: 8px;
+}
+
+.exclamation-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  content: url('/assets/ngx-register-base/icons/circle-exclamation-fill.svg');
+}