ngx-register-base 1.3.1 → 1.3.2

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

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

@@ -1,103 +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;
-          }
-
-          .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;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,128 +0,0 @@
-import { ChangeDetectionStrategy, Component, input, Input } from '@angular/core';
-import {
-  PrizmDateTime,
-  PrizmDateTimeRange,
-  PrizmDay,
-  PrizmDayLike,
-  PrizmDayRange,
-  PrizmTime,
-  PrizmTimeMode,
-  PrizmTimeRange,
-} 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 InputDateTimeRangeSaveValue = {
-  from: string;
-  to: string;
-} | null;
-
-@Component({
-  selector: 'sproc-param-date-time-range',
-  templateUrl: './param-date-time-range.component.html',
-  styleUrls: ['./param-date-time-range.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ParamDateTimeRangeComponent extends ParamDateBase<
-  PrizmDateTimeRange | null,
-  InputDateTimeRangeSaveValue
-> {
-  override placeholder = input('Выберите период');
-  @Input() min: PrizmDay | undefined;
-  @Input() max: PrizmDay | undefined;
-  @Input() timeMode: PrizmTimeMode = 'HH:MM';
-  @Input() maxLength: PrizmDayLike | null = null;
-  @Input() override set formatSavedValue(
-    formatter:
-      | FormatterSavedValueType<PrizmDateTimeRange | null, InputDateTimeRangeSaveValue>
-      | undefined
-  ) {
-    this.formatterSavedValue = formatter ?? this._defaultFormatterSaveValue;
-  }
-  @Input() override set parseSavedValue(
-    parser: ParserSavedValueType<InputDateTimeRangeSaveValue, PrizmDateTimeRange | null> | undefined
-  ) {
-    this.parserSavedValue = parser ?? this._defaultParserSaveValue;
-  }
-
-  protected override formatterSavedValue = this._defaultFormatterSaveValue;
-  protected override parserSavedValue = this._defaultParserSaveValue;
-
-  private _defaultFormatterSaveValue(
-    range: PrizmDateTimeRange | null
-  ): InputDateTimeRangeSaveValue {
-    if (!range) {
-      return null;
-    }
-
-    const { from, to } = this._dts.prizmDateTimeRangeToNativeDates(range);
-
-    return {
-      from: this._dts.toISOString(from),
-      to: this._dts.toISOString(to),
-    };
-  }
-
-  private _defaultParserSaveValue(value: InputDateTimeRangeSaveValue): PrizmDateTimeRange | null {
-    if (!value) {
-      return null;
-    }
-
-    const from = this._dts.isoToLocalDate(value.from);
-    const to = this._dts.isoToLocalDate(value.to);
-
-    return new PrizmDateTimeRange(
-      PrizmDayRange.fromLocalNativeDate(from, to),
-      new PrizmTimeRange(PrizmTime.fromLocalNativeDate(from), PrizmTime.fromLocalNativeDate(to))
-    );
-  }
-
-  protected override onInit(): void {
-    this._subscribeOnTimeZoneChanges();
-  }
-
-  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 { from, to } = this._dts.prizmDateTimeRangeToNativeDates(value!);
-
-        const newFrom = this.rebuildDateInNewTimezone(from, prevDiff, currDiff);
-        const newTo = this.rebuildDateInNewTimezone(to, prevDiff, currDiff);
-
-        this.control.setValue(this._dts.prizmDateTimeRangeFromNativeDates(newFrom, newTo), {
-          emitEvent: false,
-        });
-      });
-  }
-
-  protected get from(): Date | null {
-    return this._getDateFromRange('from');
-  }
-
-  protected get to(): Date | null {
-    return this._getDateFromRange('to');
-  }
-
-  private _getDateFromRange(date: 'from' | 'to'): Date | null {
-    if (!this.value) {
-      return null;
-    }
-
-    const { dayRange, timeRange } = this.value;
-
-    return new PrizmDateTime(dayRange[date], timeRange?.[date]).toLocalNativeDate();
-  }
-}

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

@@ -1,46 +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>
-      <span class="value">
-        <span>{{ showedValue }}</span>
-      </span>
-    </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 size="s" [forceClear]="forceClear">
-        <prizm-input-layout-month
-          [placeholder]="placeholder()"
-          [formControl]="control"
-        ></prizm-input-layout-month>
-      </prizm-input-layout>
-    </div>
-  </ng-template>
-</ng-container>

package/src/lib/components/inputs/param-month/param-month.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-month/param-month.component.ts

@@ -1,55 +0,0 @@
-import { ChangeDetectionStrategy, Component, input, Input } from '@angular/core';
-import { ParamDateBase } from '../../../core/param/param-date-base';
-import { PrizmMonth } from '@prizm-ui/components';
-import { FormatterSavedValueType, ParserSavedValueType } from '../../../types/params.types';
-import { EMonth, MonthMapper } from '../../../consts/month.consts';
-
-export type InputMonthSavedValue = string | null;
-
-@Component({
-  selector: 'sproc-param-month',
-  templateUrl: './param-month.component.html',
-  styleUrls: ['./param-month.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ParamMonthComponent extends ParamDateBase<PrizmMonth | null, InputMonthSavedValue> {
-  override placeholder = input('Выберите месяц');
-  @Input() override set formatSavedValue(
-    formatter: FormatterSavedValueType<PrizmMonth | null, InputMonthSavedValue> | undefined
-  ) {
-    this.formatterSavedValue = formatter ?? this._defaultFormatterSaveValue;
-  }
-  @Input() override set parseSavedValue(
-    parser: ParserSavedValueType<InputMonthSavedValue, PrizmMonth | null> | undefined
-  ) {
-    this.parserSavedValue = parser ?? this._defaultParserSaveValue;
-  }
-  override buildShowedValue = input((value: PrizmMonth | null): string =>
-    value ? `${this._formatMonth(value.month)} ${value.year}` : '-'
-  );
-
-  protected override formatterSavedValue = this._defaultFormatterSaveValue;
-  protected override parserSavedValue = this._defaultParserSaveValue;
-
-  private _defaultFormatterSaveValue(month: PrizmMonth | null): InputMonthSavedValue {
-    if (!month) {
-      return null;
-    }
-
-    return this._dts.toISOString(month.toLocalNativeDate());
-  }
-
-  private _defaultParserSaveValue(value: InputMonthSavedValue): PrizmMonth | null {
-    if (!value) {
-      return null;
-    }
-
-    const date = this._dts.isoToLocalDate(value);
-
-    return new PrizmMonth(date.getFullYear(), date.getMonth());
-  }
-
-  private _formatMonth(month: EMonth): string {
-    return MonthMapper.getRusNamesArr()[month];
-  }
-}

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

@@ -1,39 +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>
-      <span class="value">
-        <span>{{ showedValue }}</span>
-      </span>
-    </div>
-  </ng-template>
-  <ng-template #editTemplate>
-    <div class="container container--edit" [attr.sproc-param-style]="paramStyle">
-      <div class="label-wrapper" [class.applied]="applied()">
-        <span class="label" [class.required]="required">
-          {{ label }}
-        </span>
-      </div>
-
-      <prizm-input-layout size="s" [forceClear]="forceClear">
-        <prizm-input-layout-month-range
-          [placeholder]="placeholder()"
-          [formControl]="control"
-        ></prizm-input-layout-month-range>
-      </prizm-input-layout>
-    </div>
-  </ng-template>
-</ng-container>

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

@@ -1,71 +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);
-          }
-
-          .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-month-range/param-month-range.component.ts

@@ -1,76 +0,0 @@
-import { ChangeDetectionStrategy, Component, input, Input } from '@angular/core';
-import { PrizmMonth, PrizmMonthRange } from '@prizm-ui/components';
-import { ParamDateBase } from '../../../core/param/param-date-base';
-import { FormatterSavedValueType, ParserSavedValueType } from '../../../types/params.types';
-import { EMonth, MonthMapper } from '../../../consts/month.consts';
-
-export type InputMonthRangeSavedValue = { from: string; to: string } | null;
-
-@Component({
-  selector: 'sproc-param-month-range',
-  templateUrl: './param-month-range.component.html',
-  styleUrls: ['./param-month-range.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ParamMonthRangeComponent extends ParamDateBase<
-  PrizmMonthRange | null,
-  InputMonthRangeSavedValue
-> {
-  override placeholder = input('Выберите период');
-  @Input() override set formatSavedValue(
-    formatter:
-      | FormatterSavedValueType<PrizmMonthRange | null, InputMonthRangeSavedValue>
-      | undefined
-  ) {
-    this.formatterSavedValue = formatter ?? this._defaultFormatterSaveValue;
-  }
-  @Input() override set parseSavedValue(
-    parser: ParserSavedValueType<InputMonthRangeSavedValue, PrizmMonthRange | null> | undefined
-  ) {
-    this.parserSavedValue = parser ?? this._defaultParserSaveValue;
-  }
-  override buildShowedValue = input((range: PrizmMonthRange | null): string => {
-    if (!range) {
-      return '-';
-    }
-
-    const { from, to } = range;
-
-    const fromRuString = `${this._formatMonth(from.month)} ${from.year}`;
-    const toRuString = `${this._formatMonth(to.month)} ${to.year}`;
-
-    return `${fromRuString} - ${toRuString}`;
-  });
-
-  protected override formatterSavedValue = this._defaultFormatterSaveValue;
-  protected override parserSavedValue = this._defaultParserSaveValue;
-
-  private _defaultFormatterSaveValue(range: PrizmMonthRange | null): InputMonthRangeSavedValue {
-    if (!range) {
-      return null;
-    }
-
-    return {
-      from: this._dts.toISOString(range.from.toLocalNativeDate()),
-      to: this._dts.toISOString(range.to.toLocalNativeDate()),
-    };
-  }
-
-  private _defaultParserSaveValue(value: InputMonthRangeSavedValue): PrizmMonthRange | null {
-    if (!value) {
-      return null;
-    }
-
-    const from = this._dts.isoToLocalDate(value.from);
-    const to = this._dts.isoToLocalDate(value.to);
-
-    return new PrizmMonthRange(
-      new PrizmMonth(from.getFullYear(), from.getMonth()),
-      new PrizmMonth(to.getFullYear(), to.getMonth())
-    );
-  }
-
-  private _formatMonth(month: EMonth): string {
-    return MonthMapper.getRusNamesArr()[month];
-  }
-}