ngx-register-base 1.3.1 → 1.3.3

package/src/lib/components/inputs/param-custom/param-custom.component.html

@@ -1 +0,0 @@
-<ng-content></ng-content>

package/src/lib/components/inputs/param-custom/param-custom.component.ts

@@ -1,9 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ParamBase } from '../../../core/param/param-base';
-
-@Component({
-  selector: 'sproc-param-custom',
-  templateUrl: './param-custom.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ParamCustomComponent extends ParamBase<any, any> {}

package/src/lib/components/inputs/param-date/param-date.component.html

@@ -1,55 +0,0 @@
-<ng-container [ngTemplateOutlet]="readmode ? readTemplate : editTemplate">
-  <ng-template #readTemplate>
-    <div class="container container--read" [attr.sproc-param-style]="paramStyle">
-      <ng-container *ngIf="label">
-        <ng-container [ngSwitch]="paramStyle">
-          <ng-template ngSwitchCase="filter">
-            <div class="label-wrapper">
-              <span class="label">{{ label }}</span>
-              <div class="dashed-row"></div>
-            </div>
-          </ng-template>
-          <ng-template ngSwitchDefault>
-            <span class="label">{{ label }}</span>
-            <div class="dashed-row"></div>
-          </ng-template>
-        </ng-container>
-      </ng-container>
-      <div class="value">
-        <span>{{ showedValue }}</span>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template #editTemplate>
-    <div class="container container--edit" [attr.sproc-param-style]="paramStyle">
-      <div *ngIf="label" class="label-wrapper" [class.applied]="applied()">
-        <span class="label" [class.required]="required">
-          {{ label }}
-        </span>
-      </div>
-
-      <tui-textfield
-        tuiAppearance="sproc-input-appearance"
-        tuiTextfieldSize="m"
-        [tuiTextfieldLabelOutside]="true"
-        [style.--t-icon-end]="'url(/assets/ngx-register-base/icons/calendar-blank.svg)'"
-        [style.--t-icon-size]="'16px'"
-      >
-        <input
-          tuiInputDate
-          [min]="min"
-          [max]="max"
-          [placeholder]="placeholder()"
-          [formControl]="control"
-        />
-        <tui-calendar *tuiTextfieldDropdown />
-
-        <div class="textfield-icons-container">
-          @if (isInvalidAndNotPristine) {
-            <sproc-param-invalid-icon></sproc-param-invalid-icon>
-          }
-        </div>
-      </tui-textfield>
-    </div>
-  </ng-template>
-</ng-container>

package/src/lib/components/inputs/param-date/param-date.component.less

@@ -1,67 +0,0 @@
-@import 'fonts';
-@import 'common-param';
-
-:host {
-  .container {
-    &--read {
-      .read-style-card;
-      .read-style-filter;
-    }
-
-    &--edit {
-      .edit-style-card;
-      .edit-style-filter;
-
-      &[sproc-param-style='card'] {
-        ::ng-deep {
-          input {
-            .input-text-14px;
-
-            color: var(--text-contrast);
-          }
-        }
-      }
-
-      &[sproc-param-style='filter'] {
-        ::ng-deep {
-          input {
-            .input-text-12px;
-
-            color: var(--text-contrast);
-          }
-        }
-      }
-
-      ::ng-deep {
-        tui-textfield {
-          --t-icon-end: url('/assets/ngx-register-base/icons/calendar-custom.svg') !important;
-
-          &::after {
-            padding-top: 14px;
-            width: 16px !important;
-            height: 16px !important;
-          }
-        }
-      }
-    }
-  }
-
-  ::ng-deep {
-    tui-textfield[tuiIcons] .t-content {
-      display: flex !important;
-      align-items: center !important;
-      justify-content: flex-end !important;
-    }
-
-    tui-textfield[tuiIcons]::after {
-      content: '';
-      width: 16px !important;
-      height: 16px !important;
-      background-size: 16px 16px !important;
-      background-repeat: no-repeat !important;
-      background-position: center !important;
-      order: 2;
-      align-self: center;
-    }
-  }
-}

package/src/lib/components/inputs/param-date/param-date.component.ts

@@ -1,77 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, input } from '@angular/core';
-import { TuiAppearance, TuiTextfield } from '@taiga-ui/core';
-import { TuiInputDate } from '@taiga-ui/kit';
-import { ReactiveFormsModule } from '@angular/forms';
-import { NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
-import { TuiTextfieldControllerModule } from '@taiga-ui/legacy';
-import { TuiDay } from '@taiga-ui/cdk';
-import { ParamInvalidIconComponent } from '../sub-components/param-invalid-icon/param-invalid-icon.component';
-import { ParamDateBase } from '../../../core/param/param-date-base';
-import { FormatterSavedValueType, ParserSavedValueType } from '../../../types/params.types';
-import { EDatePattern } from '../../../directives/date/date-time.types';
-
-export type InputDateSaveValue = string | null;
-
-@Component({
-  selector: 'sproc-param-date',
-  templateUrl: './param-date.component.html',
-  styleUrls: ['./param-date.component.less'],
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    TuiTextfield,
-    TuiInputDate,
-    ReactiveFormsModule,
-    NgIf,
-    NgTemplateOutlet,
-    NgSwitch,
-    NgSwitchCase,
-    NgSwitchDefault,
-    TuiAppearance,
-    TuiTextfieldControllerModule,
-    ParamInvalidIconComponent,
-  ],
-})
-export class ParamDateComponent extends ParamDateBase<TuiDay | null, InputDateSaveValue> {
-  override placeholder = input('Выберите дату');
-  @Input() min: TuiDay | null = null;
-  @Input() max: TuiDay | null = null;
-  @Input() override set formatSavedValue(
-    formatter: FormatterSavedValueType<TuiDay | null, InputDateSaveValue> | undefined
-  ) {
-    this.formatterSavedValue = formatter ?? this._defaultFormatterSaveValue;
-  }
-  @Input() override set parseSavedValue(
-    parser: ParserSavedValueType<InputDateSaveValue, TuiDay | null> | undefined
-  ) {
-    this.parserSavedValue = parser ?? this._defaultParserSaveValue;
-  }
-  override buildShowedValue = input((value: TuiDay | null): string =>
-    value ? this._defaultDateConvert(value) : '-'
-  );
-
-  protected override formatterSavedValue = this._defaultFormatterSaveValue;
-  protected override parserSavedValue = this._defaultParserSaveValue;
-
-  private _defaultDateConvert(value: TuiDay): string {
-    return this._dts.parseDate(value.toString(EDatePattern.TUI_YMD, '-'), EDatePattern.DATE);
-  }
-
-  private _defaultFormatterSaveValue(value: TuiDay | null): InputDateSaveValue {
-    if (!value) {
-      return null;
-    }
-
-    const iso = this._dts.toISOString(value.toLocalNativeDate());
-
-    return this._dts.parseDate(iso, EDatePattern.YEAR_MONTH_DAY);
-  }
-
-  private _defaultParserSaveValue(value: InputDateSaveValue): TuiDay | null {
-    if (!value) {
-      return null;
-    }
-
-    return TuiDay.fromLocalNativeDate(this._dts.isoToLocalDate(value));
-  }
-}

package/src/lib/components/inputs/param-date-range/param-date-range.component.html

@@ -1,45 +0,0 @@
-<ng-container [ngTemplateOutlet]="readmode ? readTemplate : editTemplate">
-  <ng-template #readTemplate>
-    <div class="container container--read" [attr.sproc-param-style]="paramStyle">
-      <ng-container *ngIf="label">
-        <ng-container [ngSwitch]="paramStyle">
-          <ng-template ngSwitchCase="filter">
-            <div class="label-wrapper">
-              <span class="label">{{ label }}</span>
-              <div class="dashed-row"></div>
-            </div>
-          </ng-template>
-          <ng-template ngSwitchDefault>
-            <span class="label">{{ label }}</span>
-            <div class="dashed-row"></div>
-          </ng-template>
-        </ng-container>
-      </ng-container>
-      <div class="value">
-        <span>{{ showedValue }}</span>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template #editTemplate>
-    <div class="container container--edit" [attr.sproc-param-style]="paramStyle">
-      <div *ngIf="label" class="label-wrapper" [class.applied]="applied()">
-        <span class="label" [class.required]="required">
-          {{ label }}
-        </span>
-        @if (errorMessage() && control.invalid) {
-          <div class="errorMessage">{{ errorMessage() }}</div>
-        }
-      </div>
-
-      <prizm-input-layout class="flex-shrink--zero" size="s" [forceClear]="forceClear">
-        <prizm-input-layout-date-range
-          [placeholder]="placeholder()"
-          [maxLength]="maxLength()"
-          [min]="$any(min)"
-          [max]="$any(max)"
-          [formControl]="control"
-        ></prizm-input-layout-date-range>
-      </prizm-input-layout>
-    </div>
-  </ng-template>
-</ng-container>

package/src/lib/components/inputs/param-date-range/param-date-range.component.less

@@ -1,75 +0,0 @@
-@import 'fonts';
-@import 'common-param';
-
-:host {
-  .container {
-    &--read {
-      .read-style-card;
-      .read-style-filter;
-    }
-
-    &--edit {
-      .edit-style-card;
-      .edit-style-filter;
-
-      &[sproc-param-style='card'] {
-        ::ng-deep {
-          .prizm-input-form:not(.prizm-input-form-focused) {
-            background: inherit;
-            border: 1px solid var(--input-stroke);
-            padding: 0 3.5px 0 8px;
-          }
-
-          .prizm-input-form .prizm-input-form-focused {
-            background: inherit;
-            border: 1px solid var(--input-stroke);
-          }
-
-          .prizm-input-form-inner {
-            min-height: 32px;
-            height: 32px;
-          }
-
-          input {
-            .input-text-14px;
-
-            color: var(--text-contrast);
-          }
-        }
-      }
-
-      &[sproc-param-style='filter'] {
-        ::ng-deep {
-          .prizm-input-form:not(.prizm-input-form-focused) {
-            background: inherit;
-            border: none;
-            border-bottom: 1px solid var(--input-stroke);
-            padding: 0 3.5px 0 8px;
-          }
-
-          .prizm-input-form .prizm-input-form-focused {
-            background: inherit;
-            border: 1px !important;
-            border-bottom: 1px solid var(--input-stroke);
-          }
-
-          .prizm-input-form-inner {
-            min-height: 32px;
-            height: 32px;
-          }
-
-          input {
-            .input-text-12px;
-
-            color: var(--text-contrast);
-          }
-        }
-      }
-    }
-
-    .errorMessage {
-      margin-left: auto;
-      color: var(--brand-danger);
-    }
-  }
-}

package/src/lib/components/inputs/param-date-range/param-date-range.component.ts

@@ -1,67 +0,0 @@
-import { ChangeDetectionStrategy, Component, input, Input } from '@angular/core';
-import { PrizmDay, PrizmDayLike, PrizmDayRange } from '@prizm-ui/components';
-import { ParamDateBase } from '../../../core/param/param-date-base';
-import { FormatterSavedValueType, ParserSavedValueType } from '../../../types/params.types';
-import { EDatePattern } from '../../../directives/date/date-time.types';
-import { TuiDay } from '@taiga-ui/cdk';
-
-export type InputDateRangeSavedValue = { from: string; to: string } | null;
-
-@Component({
-  selector: 'sproc-param-date-range',
-  templateUrl: './param-date-range.component.html',
-  styleUrls: ['./param-date-range.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ParamDateRangeComponent extends ParamDateBase<
-  PrizmDayRange | null,
-  InputDateRangeSavedValue
-> {
-  public maxLength = input<PrizmDayLike | null>(null);
-  /** текст сообщения об ошибке */
-  public errorMessage = input<string>('');
-  override placeholder = input('Выберите период');
-  @Input() min: TuiDay | PrizmDay | undefined;
-  @Input() max: TuiDay | PrizmDay | undefined;
-  @Input() override set formatSavedValue(
-    formatter: FormatterSavedValueType<PrizmDayRange | null, InputDateRangeSavedValue> | undefined
-  ) {
-    this.formatterSavedValue = formatter ?? this._defaultFormatterSaveValue;
-  }
-  @Input() override set parseSavedValue(
-    parser: ParserSavedValueType<InputDateRangeSavedValue, PrizmDayRange | null> | undefined
-  ) {
-    this.parserSavedValue = parser ?? this._defaultParserSaveValue;
-  }
-  override buildShowedValue = input(
-    (value: PrizmDayRange | null): string => value?.toString() ?? '-'
-  );
-
-  protected override formatterSavedValue = this._defaultFormatterSaveValue;
-  protected override parserSavedValue = this._defaultParserSaveValue;
-
-  private _defaultFormatterSaveValue(range: PrizmDayRange | null): InputDateRangeSavedValue {
-    if (!range) {
-      return null;
-    }
-
-    const isoFrom = this._dts.toISOString(range.from.toLocalNativeDate());
-    const isoTo = this._dts.toISOString(range.to.toLocalNativeDate());
-
-    return {
-      from: this._dts.parseDate(isoFrom, EDatePattern.YEAR_MONTH_DAY),
-      to: this._dts.parseDate(isoTo, EDatePattern.YEAR_MONTH_DAY),
-    };
-  }
-
-  private _defaultParserSaveValue(value: InputDateRangeSavedValue): PrizmDayRange | null {
-    if (!value) {
-      return null;
-    }
-
-    const from = this._dts.isoToLocalDate(value.from);
-    const to = this._dts.isoToLocalDate(value.to);
-
-    return PrizmDayRange.fromLocalNativeDate(from, to);
-  }
-}

package/src/lib/components/inputs/param-date-time/param-date-time.component.html

@@ -1,70 +0,0 @@
-<ng-container [ngTemplateOutlet]="readmode ? readTemplate : editTemplate">
-  <ng-template #readTemplate>
-    <div class="container container--read" [attr.sproc-param-style]="paramStyle">
-      <ng-container *ngIf="label">
-        <ng-container [ngSwitch]="paramStyle">
-          <ng-template ngSwitchCase="filter">
-            <div class="label-wrapper">
-              <span class="label">{{ label }}</span>
-              <div class="dashed-row"></div>
-            </div>
-          </ng-template>
-          <ng-template ngSwitchDefault>
-            <span class="label">{{ label }}</span>
-            <div class="dashed-row"></div>
-          </ng-template>
-        </ng-container>
-      </ng-container>
-      <div class="value">
-        <span *ngIf="nativeDate; else emptyTemplate">
-          {{
-            nativeDate
-              | formatDate
-                : (timezoneChange | async)!.time_diff!
-                : EDatePattern.DATE_TIME_WITHOUT_SECONDS
-                : (timezoneChange | async)
-          }}
-        </span>
-        <ng-template #emptyTemplate>-</ng-template>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template #editTemplate>
-    <div class="container container--edit" [attr.sproc-param-style]="paramStyle">
-      <div *ngIf="label" class="label-wrapper" [class.applied]="applied()">
-        <span class="label" [class.required]="required">
-          {{ label }}
-        </span>
-      </div>
-
-      <prizm-input-layout
-        class="flex-shrink--zero"
-        size="s"
-        [forceClear]="forceClear"
-        [clearButton]="clearButtonTemplate"
-      >
-        <prizm-input-layout-date-time
-          [placeholder]="placeholder()"
-          [max]="$any(max)"
-          [min]="$any(min)"
-          [formControl]="control"
-        ></prizm-input-layout-date-time>
-        <ng-template
-          #clearButtonTemplate
-          let-showStatusButton="showStatusButton"
-          let-disabled="disabled"
-        >
-          <button
-            [interactive]="true"
-            [disabled]="disabled"
-            prizmHint="Нажмите для очистки"
-            prizmHintTheme="light"
-            prizmInputIconButton="cancel-delete-content"
-            class="{{ showStatusButton ? '' : 'alone' }}"
-            (click)="clearValue()"
-          ></button>
-        </ng-template>
-      </prizm-input-layout>
-    </div>
-  </ng-template>
-</ng-container>

package/src/lib/components/inputs/param-date-time/param-date-time.component.less

@@ -1,72 +0,0 @@
-@import 'fonts';
-@import 'common-param';
-
-:host {
-  .container {
-    &--read {
-      .read-style-card;
-      .read-style-filter;
-    }
-
-    &--edit {
-      .edit-style-card;
-      .edit-style-filter;
-
-      &[sproc-param-style='card'] {
-        padding: 0 2px;
-
-        ::ng-deep {
-          .prizm-input-form:not(.prizm-input-form-focused) {
-            background: inherit;
-            border: 1px solid var(--input-stroke);
-            padding: 0 3.5px 0 8px;
-          }
-
-          .prizm-input-form .prizm-input-form-focused {
-            background: inherit;
-            border: 1px solid var(--input-stroke);
-          }
-
-          .prizm-input-form-inner {
-            min-height: 32px;
-            height: 32px;
-          }
-
-          input {
-            .input-text-14px;
-
-            color: var(--text-contrast);
-          }
-        }
-      }
-
-      &[sproc-param-style='filter'] {
-        ::ng-deep {
-          .prizm-input-form:not(.prizm-input-form-focused) {
-            background: inherit;
-            border: none;
-            border-bottom: 1px solid var(--input-stroke);
-            padding: 0 3.5px 0 8px;
-          }
-
-          .prizm-input-form .prizm-input-form-focused {
-            background: inherit;
-            border: 1px !important;
-            border-bottom: 1px solid var(--input-stroke);
-          }
-
-          .prizm-input-form-inner {
-            min-height: 32px;
-            height: 32px;
-          }
-
-          input {
-            .input-text-12px;
-
-            color: var(--text-contrast);
-          }
-        }
-      }
-    }
-  }
-}

package/src/lib/components/inputs/param-date-time/param-date-time.component.ts

@@ -1,101 +0,0 @@
-import { ChangeDetectionStrategy, Component, input, Input } from '@angular/core';
-import { PrizmDay, PrizmTime, PrizmTimeMode } from '@prizm-ui/components';
-import { distinctUntilChanged, filter, map, pairwise } from 'rxjs';
-import { ParamDateBase } from '../../../core/param/param-date-base';
-import { FormatterSavedValueType, ParserSavedValueType } from '../../../types/params.types';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-
-export type SmaPrizmDateTime = [PrizmDay, PrizmTime | undefined];
-
-export type InputDateTimeSaveValue = string | null;
-
-@Component({
-  selector: 'sproc-param-date-time',
-  templateUrl: './param-date-time.component.html',
-  styleUrls: ['./param-date-time.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ParamDateTimeComponent extends ParamDateBase<
-  SmaPrizmDateTime | null,
-  InputDateTimeSaveValue
-> {
-  override placeholder = input('Выберите дату и время');
-  @Input() min: PrizmDay | [PrizmDay, PrizmTime] | undefined;
-  @Input() max: PrizmDay | [PrizmDay, PrizmTime] | undefined;
-  @Input() timeMode: PrizmTimeMode = 'HH:MM';
-  @Input() override set formatSavedValue(
-    formatter: FormatterSavedValueType<SmaPrizmDateTime | null, InputDateTimeSaveValue> | undefined
-  ) {
-    this.formatterSavedValue = formatter ?? this._defaultFormatterSaveValue;
-  }
-  @Input() override set parseSavedValue(
-    parser: ParserSavedValueType<InputDateTimeSaveValue, SmaPrizmDateTime | null> | undefined
-  ) {
-    this.parserSavedValue = parser ?? this._defaultParserSaveValue;
-  }
-
-  protected override formatterSavedValue = this._defaultFormatterSaveValue;
-  protected override parserSavedValue = this._defaultParserSaveValue;
-
-  private _defaultFormatterSaveValue(value: SmaPrizmDateTime | null): InputDateTimeSaveValue {
-    if (!value) {
-      return null;
-    }
-
-    const date = this._dts.prizmDateTimeToNativeDate(value);
-
-    return this._dts.toISOString(date);
-  }
-
-  private _defaultParserSaveValue(value: InputDateTimeSaveValue): SmaPrizmDateTime | null {
-    if (!value) {
-      return null;
-    }
-
-    const date = this._dts.isoToLocalDate(value);
-
-    return this._valueFromLocalNativeDate(date);
-  }
-
-  protected override onInit(): void {
-    this._subscribeOnTimeZoneChanges();
-  }
-
-  protected clearValue(): void {
-    this.control.setValue(null);
-  }
-
-  protected get nativeDate(): Date | null {
-    if (!this.value) {
-      return null;
-    }
-    return typeof this.value === 'string'
-      ? this._dts.isoToLocalDate(this.value)
-      : this._dts.prizmDateTimeToNativeDate(this.value);
-  }
-
-  private _subscribeOnTimeZoneChanges(): void {
-    this.timezoneChange
-      .pipe(
-        distinctUntilChanged((prev, curr) => prev.time_diff === curr.time_diff),
-        pairwise(),
-        map(([prev, curr]) => ({
-          prevDiff: prev.time_diff,
-          currDiff: curr.time_diff,
-          value: this.value,
-        })),
-        filter(({ value }) => !!value),
-        takeUntilDestroyed(this.dr)
-      )
-      .subscribe(({ prevDiff, currDiff, value }) => {
-        const date = this._dts.prizmDateTimeToNativeDate(value!);
-        const newDate = this.rebuildDateInNewTimezone(date, prevDiff, currDiff);
-
-        this.control.setValue(this._valueFromLocalNativeDate(newDate), { emitEvent: false });
-      });
-  }
-
-  private _valueFromLocalNativeDate(date: Date): SmaPrizmDateTime {
-    return [PrizmDay.fromLocalNativeDate(date), PrizmTime.fromLocalNativeDate(date)];
-  }
-}