ngx-register-base 1.2.3 → 1.3.1

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

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

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

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

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

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

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

@@ -0,0 +1,101 @@
+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)];
+  }
+}

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

@@ -0,0 +1,67 @@
+<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="value; else emptyTemplate">
+          {{
+            from
+              | formatDate
+                : (timezoneChange | async)!.time_diff!
+                : EDatePattern.DATE_TIME_WITHOUT_SECONDS
+                : (timezoneChange | async)
+          }}
+          -
+          {{
+            to
+              | 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>
+        <img
+          *ngIf="hint"
+          src="assets/ngx-register-base/icons/circle-info-empty.svg"
+          [prizmHint]="hint"
+          prizmHintTheme="light"
+          style="margin-bottom: 2px"
+        />
+      </div>
+
+      <prizm-input-layout class="flex-shrink--zero" size="s" [forceClear]="forceClear">
+        <prizm-input-layout-date-time-range
+          [placeholder]="placeholder()"
+          [timeMode]="timeMode"
+          [maxLength]="maxLength"
+          [min]="$any(min)"
+          [max]="$any(max)"
+          [formControl]="control"
+        ></prizm-input-layout-date-time-range>
+      </prizm-input-layout>
+    </div>
+  </ng-template>
+</ng-container>

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

@@ -0,0 +1,103 @@
+@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;
+          }
+
+          .multiple-input-box {
+            padding: 0 !important;
+
+            input {
+              .input-text-12px;
+
+              color: var(--text-contrast);
+
+              &:last-child {
+                width: 100%;
+              }
+            }
+          }
+
+          .prizm-input-label-clear-btn {
+            position: absolute;
+            right: 0;
+            display: flex;
+            align-items: center;
+
+            prizm-icons-full {
+              width: 16px;
+              height: 16px;
+              display: none;
+            }
+
+            &:hover {
+              background: var(--brand-disabled);
+
+              prizm-icons-full {
+                width: 16px;
+                height: 16px;
+                display: unset;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}