@morozeckiy/dd-lib 0.1.1 → 0.1.2

package/src/lib/lib-period/lib-period.component.ts

@@ -1,131 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  forwardRef,
-  Input,
-  OnInit,
-  Output,
-} from '@angular/core';
-import { LibCardComponent } from '../lib-card/lib-card.component';
-import { LibFilterButtonComponent } from '../lib-filter-button/lib-filter-button.component';
-import { LibRadioComponent } from '../lib-radio/lib-radio.component';
-
-import { LibCalendarComponent } from '../lib-calendar/lib-calendar.component';
-import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-import { format } from 'date-fns';
-import {ClickOutsideDirective, DateService, DEFAULT_FORMAT, GetDateBy, PeriodMenuDate, PeriodName} from "../core";
-
-@Component({
-  selector: 'dd-lib-period',
-  standalone: true,
-  imports: [
-    LibCardComponent,
-    LibFilterButtonComponent,
-    LibRadioComponent,
-    LibCalendarComponent,
-    FormsModule,
-    ClickOutsideDirective,
-  ],
-
-  templateUrl: './lib-period.component.html',
-  styleUrl: './lib-period.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => LibPeriodComponent),
-      multi: true,
-    },
-  ],
-})
-export class LibPeriodComponent implements OnInit, ControlValueAccessor {
-  public static idCounter = 1;
-  @Input() public maxDate: Date | undefined;
-  @Output() public setPeriodDate = new EventEmitter<{ [key in keyof GetDateBy]: string } | null>();
-
-  public periodMenu: PeriodMenuDate[] | undefined;
-  public periodIsShown = false;
-  public calendarIsShown = false;
-  public periodIsSelected = false;
-  public calendarIsSelected = false;
-  public selectedPeriod: PeriodName | undefined;
-  public selectedDate: Date | undefined;
-  public idPeriod!: string;
-  public idCalendar!: string;
-  private onTouchedCallback: (() => void) | undefined;
-
-  constructor(private dateService: DateService) {}
-
-  public ngOnInit(): void {
-    this.idPeriod = 'period-wrapper-' + LibPeriodComponent.idCounter++;
-    this.idCalendar = 'calendar-wrapper-' + LibPeriodComponent.idCounter++;
-    this.periodMenu = this.dateService.getPeriodMenu();
-  }
-
-  public registerOnChange(fn: any): void {
-    this.propagateChange = fn;
-  }
-
-  public registerOnTouched(fn: any): void {
-    this.onTouchedCallback = fn;
-  }
-
-  public showPeriod(): void {
-    this.periodIsShown = !this.periodIsShown;
-    this.calendarIsShown = !!this.selectedDate;
-  }
-
-  public clearPeriod(): void {
-    this.periodIsSelected = false;
-    this.calendarIsSelected = false;
-    this.periodIsShown = false;
-    this.calendarIsShown = false;
-    this.selectedPeriod = undefined;
-    this.selectedDate = undefined;
-    this.setPeriodDate.emit(null);
-  }
-
-  public selectPeriod(type: keyof GetDateBy): void {
-    this.periodIsShown = false;
-    this.calendarIsShown = false;
-    this.periodIsSelected = true;
-    this.calendarIsSelected = false;
-    const date = this.dateService.getFormattedDate(type);
-    this.propagateChange(type);
-    this.setPeriodDate.emit({ [type]: date });
-  }
-
-  public writeValue(value: any): void {
-    this.selectedPeriod = value;
-  }
-
-  public selectDate($event: Date | undefined): void {
-    this.calendarIsShown = false;
-    if ($event) {
-      this.selectedPeriod = 'calendar';
-      this.propagateChange(this.selectedPeriod);
-      this.periodIsShown = false;
-      this.periodIsSelected = false;
-      this.calendarIsSelected = true;
-      this.setPeriodDate.emit({ calendar: format($event, DEFAULT_FORMAT) });
-    } else {
-      this.selectedDate = undefined;
-      this.setPeriodDate.emit(null);
-      if (!this.selectedPeriod) {
-        this.periodIsSelected = false;
-      }
-      this.calendarIsSelected = false;
-    }
-  }
-
-  public clickOutside($event: boolean): void {
-    this.periodIsShown = $event;
-    if (this.periodIsShown && !$event) {
-      this.calendarIsShown = $event;
-    }
-  }
-
-  private propagateChange(value: PeriodName) {}
-}

package/src/lib/lib-radio/lib-radio.component.html

@@ -1,22 +0,0 @@
-<label [for]="radioId" class="radio">
-  <input
-    (change)="onSelected($event.target)"
-    [attr.aria-checked]="checked"
-    [attr.tabIndex]="disabled ? -1 : 0"
-    [attr.value]="value"
-    [checked]="checked"
-    [disabled]="disabled"
-    [id]="radioId"
-    [name]="name"
-    [ngClass]="{ disabled: disabled }"
-    [required]="required"
-    class="radio-input"
-    role="radio"
-    type="radio" />
-  <div [class.focused]="focused" class="mark-wrap">
-    <div class="radio-button"></div>
-  </div>
-  <div class="label-wrap">
-    <span><ng-content></ng-content></span>
-  </div>
-</label>

package/src/lib/lib-radio/lib-radio.component.scss

@@ -1,113 +0,0 @@
-
-:host {
-  outline: none;
-}
-
-.radio {
-  display: flex;
-  align-items: center;
-  position: relative;
-  font-size: 16px;
-  cursor: pointer;
-}
-
-.radio-input {
-  opacity: 0;
-  position: absolute;
-  z-index: -1;
-
-  &:focus {
-    opacity: 1;
-    width: 24px;
-    height: 24px;
-    left: 0;
-    top: 0;
-    margin: 0;
-    border-color: #000;
-  }
-
-  &:focus:not(:focus-visible) {
-    opacity: 0;
-    border: 0;
-    outline: 0;
-    margin: 0;
-    width: inherit;
-    height: inherit;
-  }
-
-  &:checked ~ .label-wrap {
-    font-weight: bold;
-  }
-
-  &:checked + .mark-wrap {
-    border: 2px solid var(--radio-active-color);
-
-    .radio-button {
-      background-color: var(--radio-active-color);
-      border: 2px solid #fff;
-      width: 16px;
-      height: 16px;
-    }
-  }
-
-  &:checked:disabled + .mark-wrap,
-  &:checked:disabled:hover + .mark-wrap {
-    border-color: var(--radio-disabled);
-    cursor: default;
-
-    .radio-button {
-      cursor: default;
-      background-color: var(--radio-disabled);
-      border: 2px solid #fff;
-    }
-  }
-
-  &:disabled + .mark-wrap,
-  &:disabled:hover + .mark-wrap {
-    border-color: var(--radio-disabled);
-    cursor: default;
-
-    .radio-button {
-      cursor: default;
-      border: 2px solid #fff;
-    }
-  }
-
-  &:hover + .mark-wrap {
-    border-color: #1c1c1c;
-
-    .radio-button {
-      border-color: #1c1c1c;
-    }
-  }
-
-  &:checked:hover + .mark-wrap {
-    cursor: pointer;
-    border: 2px solid var(--radio-hover-color);
-
-    .radio-button {
-      cursor: pointer;
-      background-color: var(--radio-hover-color);
-      border: 2px solid #fff;
-    }
-  }
-}
-
-.mark-wrap {
-  border-radius: 100%;
-  border: 1px solid #d7d7d7;
-  background: #fff;
-  margin-right: 12px;
-}
-
-.radio-button {
-  box-sizing: border-box;
-  border-radius: 100%;
-  width: 18px;
-  height: 18px;
-}
-
-.label-wrap {
-  display: inline-block;
-  line-height: 19px;
-}

package/src/lib/lib-radio/lib-radio.component.ts

@@ -1,78 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  forwardRef,
-  Input,
-  OnInit,
-  Output,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'dd-lib-radio',
-  standalone: true,
-  imports: [CommonModule, FormsModule, ReactiveFormsModule],
-  templateUrl: './lib-radio.component.html',
-  styleUrl: './lib-radio.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => LibRadioComponent),
-      multi: true,
-    },
-  ],
-})
-export class LibRadioComponent implements OnInit, ControlValueAccessor {
-  public static idCounter = 1;
-
-  @Input() public radioId: string | undefined; // input ID: если не указан, генерируется уникальный ID
-  @Input() public disabled = false; // состояние: по умолчанию - активное
-  @Input() public required = false;
-  @Input() public name: string | undefined;
-  @Input() public value: any;
-  @Input() public checked = false;
-
-  @Output() public changed = new EventEmitter();
-
-  public focused: boolean | undefined;
-  public onTouchedCallback: (() => void) | undefined;
-  private modelInitialization = true;
-
-  public ngOnInit() {
-    if (!this.radioId) {
-      this.radioId = 'dd-radio-' + LibRadioComponent.idCounter++;
-    }
-  }
-
-  public onSelected(target: EventTarget | null) {
-    this.checked = (target as HTMLInputElement)?.checked;
-    this.propagateChange(this.value);
-    this.changed.emit(this.value);
-  }
-
-  public registerOnChange(fn: any): void {
-    this.propagateChange = fn;
-  }
-
-  public setDisabledState(disabled: boolean): void {
-    this.disabled = disabled;
-  }
-
-  public registerOnTouched(fn: any): void {
-    this.onTouchedCallback = fn;
-  }
-
-  public writeValue(value: any): void {
-    const isInitialization = this.modelInitialization;
-    this.modelInitialization = false;
-    if (this.checked !== undefined && value === undefined && isInitialization) {
-      return;
-    }
-    this.checked = value === this.value;
-  }
-
-  private propagateChange(_value: any) {}
-}

package/src/lib/lib-search-input/lib-search-input.component.html

@@ -1,48 +0,0 @@
-<div class="lib-search-input">
-  <label [for]="id" class="lib-search-input__title">
-    {{ label }}
-    @if (required) {
-      <dd-lib-svg-icon icon="error_hint"></dd-lib-svg-icon>
-    }
-  </label>
-  <div class="pos-relative">
-    <dd-lib-svg-icon (click)="forceChange()" class="search-icon" icon="search"></dd-lib-svg-icon>
-    <input
-      #searchInput
-      (keyup)="keyUp.next($event)"
-      (keyup.enter)="forceChange()"
-      [(ngModel)]="value"
-      [attr.autocomplete]="autocomplete === undefined ? null : autocomplete"
-      [attr.id]="id ? id : null"
-      [attr.maxlength]="maxlength"
-      [attr.minlength]="minlength"
-      [attr.name]="name"
-      [attr.placeholder]="placeholder"
-      [attr.tabIndex]="tabIndex"
-      [attr.type]="type || 'text'"
-      [class.focused]="focused"
-      [class.round]="styleInput === 'round'"
-      [class.white]="inputStyle === 'white'"
-      [disabled]="disabled"
-      [readOnly]="readOnly"
-      class="search-input" />
-    <dd-lib-svg-icon
-      (click)="onClear()"
-      [id]="idClose" [style.display]="value?.length ? 'block' : 'none'"
-      class="clear-icon" icon="clear"></dd-lib-svg-icon>
-  </div>
-
-  @if (searchData?.length) {
-  <dd-lib-card>
-    @for (item of searchData; track item) {
-    <div (click)="onClickSearchItem(item)" class="search-result">
-      @if (getTitle(item); as title) {
-      <div [innerHTML]="title | highlight: value | safe: 'html'" class="search-result__title"></div>
-      } @if (getDesc(item); as desc) {
-      <div [innerHTML]="desc | highlight: value | safe: 'html'" class="search-result__desc"></div>
-      }
-    </div>
-    }
-  </dd-lib-card>
-  }
-</div>

package/src/lib/lib-search-input/lib-search-input.component.scss

@@ -1,86 +0,0 @@
-:host {
-  display: block;
-}
-.lib-search-input {
-  position: relative;
-
-  &__title {
-    margin-bottom: 4px;
-    font-size: 14px;
-    line-height: 24px;
-    display: flex;
-    align-items: flex-start;
-  }
-
-  input {
-    width: 100%;
-    height: 48px;
-    padding: 16px 16px 15px 44px;
-    border-radius: 8px;
-    border: none;
-    background-color: var(--input-gray-bgc);
-
-    &.white {
-      background-color: var(--white-color);
-      border: 1px solid var(--primary-gray-color);
-    }
-  }
-
-  .round {
-    border-radius: 24px;
-  }
-
-  .search-icon {
-    position: absolute;
-    left: 16px;
-    top: 14px;
-    cursor: pointer;
-  }
-
-  .clear-icon {
-    position: absolute;
-    right: 16px;
-    top: 14px;
-    cursor: pointer;
-  }
-
-  .search-result {
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 24px;
-    letter-spacing: 0;
-    text-align: left;
-    cursor: pointer;
-
-    &:hover {
-      opacity: 0.8;
-    }
-    &:last-child {
-      .search-result__desc {
-        border: none;
-        padding-bottom: 0;
-      }
-    }
-
-    &__title {
-      color: var(--second-gray-color);
-      margin: 24px 0 2px 0;
-    }
-
-    &__desc {
-      padding-bottom: 16px;
-      border-bottom: 1px solid var(--gray-color-200);
-    }
-  }
-
-  dd-lib-card {
-    position: absolute;
-    display: block;
-    top: 76px;
-    z-index: 100;
-    width: 100%;
-    max-height: 400px;
-    box-shadow: var(--main-card-shadow);
-    overflow: auto;
-  }
-}

package/src/lib/lib-search-input/lib-search-input.component.ts

@@ -1,94 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {NgOptimizedImage} from '@angular/common';
-import {LibCommonInputTextComponent} from '../common/lib-common-input-text';
-import {LibCardComponent} from '../lib-card/lib-card.component';
-import {of, Subject} from 'rxjs';
-import {debounceTime, delay, map, mergeMap, takeUntil} from 'rxjs/operators';
-import {DestroyService, HighlightPipe, SafePipe} from "../core";
-import {LibSvgIconComponent} from "../lib-svg-icon/lib-svg-icon.component";
-
-@Component({
-  selector: 'dd-lib-search-input',
-  standalone: true,
-  imports: [FormsModule, NgOptimizedImage, LibCardComponent, HighlightPipe, SafePipe, LibSvgIconComponent],
-  templateUrl: './lib-search-input.component.html',
-  styleUrl: './lib-search-input.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [DestroyService],
-})
-export class LibSearchInputComponent<T> extends LibCommonInputTextComponent implements OnInit {
-  @Input() public keyTitle = 'title';
-  @Input() public keyDesc = 'description';
-  @Input() public styleInput: 'round' | 'standard' = 'standard';
-  @Input() public inputStyle: 'white' | 'gray' = 'gray';
-  @Input() public searchData: T[] | null | undefined;
-  @Input() public debounceTime = 100;
-  @Input() public delay = 0;
-  @Input() public idClose: string | undefined;
-  @Output() public keyupEvent = new EventEmitter<string>();
-  @Output() public selectedItem = new EventEmitter();
-  public keyUp = new Subject<KeyboardEvent>();
-
-  constructor(
-    private destroy$: DestroyService,
-    changeDetection: ChangeDetectorRef,
-    private cdr: ChangeDetectorRef,
-  ) {
-    super(changeDetection);
-  }
-
-  public ngOnInit(): void {
-    if (this.commitOnInput) {
-      this.keyUp
-        .pipe(
-          map(event => (event.target as HTMLInputElement)?.value),
-          debounceTime(this.debounceTime),
-          // distinctUntilChanged(), надо ли?
-          mergeMap(search => of(search).pipe(delay(this.delay))),
-          takeUntil(this.destroy$),
-        )
-        .subscribe(str => {
-          this.keyupEvent.emit(str);
-        });
-    }
-  }
-
-  public override forceChange(): void {
-    if (!this.commitOnInput) {
-      this.keyupEvent.emit(this.value);
-    }
-  }
-
-  public onClear(noEmit?: boolean): void {
-    this.value = '';
-    if (!noEmit) {
-      this.cleared.emit();
-      this.keyupEvent.emit('');
-    }
-    this.inputSearchElement?.nativeElement.focus();
-    this.cdr.detectChanges();
-  }
-
-  public onClickSearchItem(item: T): void {
-    this.onClear();
-    this.selectedItem.emit(item);
-    this.value = this.getTitle(item);
-  }
-
-  public getTitle(item: T): string {
-    return item[this.keyTitle as keyof typeof item] as string;
-  }
-
-  public getDesc(item: T): string {
-    return item[this.keyDesc as keyof typeof item] as string;
-  }
-}

package/src/lib/lib-select/lib-select.component.html

@@ -1,83 +0,0 @@
-<div class="lib-select" id="lib-select-{{ selectId }}">
-  <label [for]="id" class="lib-select__title">
-    {{ label }}
-    @if (required) {
-      <dd-lib-svg-icon icon="error_hint"></dd-lib-svg-icon>
-    }
-  </label>
-
-  <div class="pos-relative">
-    <input
-      #select
-      (change)="handleChange()"
-      (click)="notifyFocusEvent($event)"
-      (input)="handleInput($event)"
-      [(ngModel)]="inputValue"
-      [attr.id]="selectId"
-      [attr.name]="name"
-      [attr.placeholder]="placeholder"
-      [attr.tabIndex]="tabIndex"
-      [attr.type]="'text'"
-      [class.focused]="focused"
-      [class.invalid]="invalid"
-      [disabled]="disabled"
-      [readOnly]="readOnly"
-      [title]="inputValue"
-      class="text-select" />
-    <!--    (blur)="notifyFocusEvent($event)"-->
-    @if (!checkedItem) {
-      <dd-lib-svg-icon
-        (click)="notifyFocusEvent($event)"
-        [class.black-svg]="isShownList"
-        [class.disabled]="disabled"
-        [class.gray-svg]="!isShownList"
-        [class.up]="isShownList"
-        id="chevron-{{ selectId }}" class="chevron" icon="down_chevron"></dd-lib-svg-icon>
-
-    } @else {
-      <dd-lib-svg-icon
-        (click)="selectItem(checkedItem)"
-        class="clear"
-        id="chevron-{{ selectId }}" icon="clear"></dd-lib-svg-icon>
-
-    }
-  </div>
-
-  @if (errorText && invalid) {
-  <div class="lib-select__error">{{ errorText }}</div>
-  } @if (isShownList) {
-  <div
-    (ddClickOutside)="notifyFocusEvent($event)"
-    [elements]="['lib-select-' + selectId, 'chevron' + selectId]"
-    class="select-list-wrapper">
-    @if (data?.length) { @for (item of data | filterByKey: filterList.bind(this); track item) {
-    <div
-      (click)="selectItem(item)"
-      [class.active]="checkedItem?.[keyValue!] === item[keyValue!] || checkedItem === item"
-      class="select-data">
-      @if (!keyDesc && !keyTitle) {
-      <div [innerHTML]="item | highlight: inputValue | safe: 'html'" class="select-data__title"></div>
-      } @if (keyTitle) {
-      <div
-        [innerHTML]="item[keyTitle!] | highlight: inputValue | safe: 'html'"
-        class="select-data__title"></div>
-      } @if (keyDesc) {
-      <div
-        [innerHTML]="item[keyDesc!] | highlight: inputValue | safe: 'html'"
-        [title]="item[keyDesc]"
-        class="select-data__desc"></div>
-      } @if (checkedItem?.[keyValue!] === item?.[keyValue!] || checkedItem === item) {
-      <dd-lib-svg-icon
-        (click)="selectItem(checkedItem)"
-        class="checked"
-        id="chevron-{{ selectId }}" icon="check_green"></dd-lib-svg-icon>
-      }
-    </div>
-    } } @else {
-    <div class="select-loader">
-      <dd-lib-loader></dd-lib-loader>
-    </div>
-    }
-  </div>
-  }
-</div>