@morozeckiy/dd-lib 0.1.1

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

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

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

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

@@ -0,0 +1,130 @@
+.lib-select {
+  position: relative;
+
+  input {
+    width: 100%;
+    height: 48px;
+    padding: 15px 28px 15px 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border-radius: 8px;
+    border: 1px solid var(--input-border-color);
+    background-color: transparent;
+    position: relative;
+
+    &:hover {
+      border-color: var(--input-active-border-colort);
+    }
+
+    &:focus {
+      border-color: var(--input-active-border-colort);
+      box-shadow: var(--input-active-border-shadow);
+    }
+
+    &:disabled {
+      border: none;
+      background-color: var(--input-disable-input);
+      color: var(--input-disable-text);
+      pointer-events: none;
+
+      &::placeholder {
+        color: var(--input-placeholder);
+      }
+    }
+
+    &.invalid {
+      border-color: var(--input-error-border-color);
+
+      &:hover {
+        border-color: var(--input-error-border-color);
+      }
+
+      &:focus {
+        border-color: var(--input-error-border-color);
+        box-shadow: var(--input-error-border-shadow);
+      }
+    }
+  }
+
+  .clear {
+    cursor: pointer;
+    position: absolute;
+    right: 8px;
+    top: 12px;
+  }
+
+  .chevron {
+    cursor: pointer;
+    position: absolute;
+    right: 16px;
+    top: 10px;
+
+    &.up {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__title {
+    margin-bottom: 4px;
+    font-size: 14px;
+    line-height: 24px;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  &__error {
+    color: var(--primary-red-color);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 10px;
+    margin-top: 2px;
+  }
+
+  .select-list-wrapper {
+    position: absolute;
+    display: block;
+    top: 80px;
+    z-index: 100;
+    width: 100%;
+    max-height: 300px;
+    overflow: auto;
+    border-radius: 8px;
+    box-shadow: var(--main-card-shadow);
+    background-color: var(--main-card-color);
+
+    .select-data {
+      padding: 12px 16px;
+      cursor: pointer;
+      position: relative;
+
+      &__desc {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 24px;
+        text-overflow: ellipsis;
+        text-wrap: nowrap;
+        padding-top: 2px;
+        overflow: hidden;
+        color: var(--second-gray-color);
+      }
+
+      &:hover {
+        background: var(--select-act-hov-bgc);
+      }
+
+      &.active {
+        background: var(--select-act-hov-bgc);
+
+        .checked {
+          position: absolute;
+          right: 16px;
+          top: 10px;
+        }
+      }
+    }
+
+    .select-loader {
+      padding: 24px;
+    }
+  }
+}

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

@@ -0,0 +1,152 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  forwardRef,
+  Host,
+  Input,
+  OnInit,
+  Optional,
+  SkipSelf,
+} from '@angular/core';
+import {NgOptimizedImage} from '@angular/common';
+import {
+  ControlContainer,
+  ControlValueAccessor,
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import {LibCommonInputTextComponent} from '../common/lib-common-input-text';
+import {LibCardComponent} from '../lib-card/lib-card.component';
+import {LibLoaderComponent} from '../lib-loader/lib-loader.component';
+import {LibSvgIconComponent} from "../lib-svg-icon/lib-svg-icon.component";
+import {ClickOutsideDirective, FilterByKeyPipe, HighlightPipe, SafePipe} from "../core";
+
+@Component({
+  selector: 'dd-lib-select',
+  standalone: true,
+  imports: [
+    NgOptimizedImage,
+    ReactiveFormsModule,
+    FormsModule,
+    HighlightPipe,
+    LibCardComponent,
+    SafePipe,
+    ClickOutsideDirective,
+    LibLoaderComponent,
+    FilterByKeyPipe,
+    LibSvgIconComponent,
+  ],
+  templateUrl: './lib-select.component.html',
+  styleUrl: './lib-select.component.scss',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => LibSelectComponent),
+      multi: true,
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LibSelectComponent<T>
+  extends LibCommonInputTextComponent
+  implements OnInit, ControlValueAccessor
+{
+  public static idCounter = 1;
+
+  @Input() public selectId: string  | undefined;
+  @Input() public data: any  | undefined;
+  @Input() public keyTitle: string  | undefined;
+  @Input() public keyDesc: string  | undefined;
+  @Input() public keyValue: string  | undefined;
+  @Input() public override placeholder = 'Выберите из списка';
+  public checkedItem: any;
+  public inputValue: string | undefined;
+  public searchValue: string | undefined;
+  public isShownList: boolean | undefined;
+
+  constructor(
+    changeDetection: ChangeDetectorRef,
+    @Optional() @Host() @SkipSelf() private controlContainer: ControlContainer,
+  ) {
+    super(changeDetection);
+  }
+
+  public ngOnInit(): void {
+    if (!this.selectId) {
+      this.selectId = 'dd-select-' + LibSelectComponent.idCounter++;
+    }
+    if (this.keyTitle && !this.keyValue) {
+      this.keyValue = this.keyTitle;
+    }
+    this.control =
+      this.controlContainer && this.formControlName
+        ? this.controlContainer?.control?.get(this.formControlName)
+        : null;
+  }
+
+  public override registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+    super.registerOnChange(fn)
+  }
+
+  public override registerOnTouched(fn: any): void {
+    this.onTouchedCallback = fn;
+    super.registerOnTouched(fn)
+  }
+
+  public override handleInput(e: Event): void {
+    this.isShownList = true;
+    this.searchValue = this.inputValue;
+    super.handleInput(e)
+  }
+
+  public override notifyFocusEvent(e: Event): void {
+    if (!this.disabled) {
+      this.isShownList = !this.isShownList;
+    }
+    super.notifyFocusEvent(e)
+  }
+
+  public writeValue(value: any): void {
+    this.value = value;
+    this.inputValue = value;
+  }
+
+  public selectItem(item: any): void {
+    if (typeof item === 'string') {
+      if (!this.checkedItem) {
+        this.checkedItem = item;
+        this.inputValue = item;
+        this.value = item;
+        this.propagateChange(this.value);
+      } else {
+        this.checkedItem = null;
+        this.inputValue = undefined;
+        this.value = undefined;
+        this.propagateChange(undefined);
+      }
+    } else {
+      if (!this.checkedItem || item[this.keyValue!] !== this.checkedItem?.[this.keyValue!]) {
+        this.checkedItem = item;
+        this.inputValue = this.checkedItem[this.keyTitle!];
+        this.value = item[this.keyValue!];
+        this.propagateChange(this.value);
+      } else {
+        this.checkedItem = null;
+        this.inputValue = undefined;
+        this.value = undefined;
+        this.propagateChange(undefined);
+      }
+    }
+    this.searchValue = undefined;
+    this.isShownList = false;
+  }
+
+  public filterList(item: any): any {
+    return item[this.keyTitle!]?.toLowerCase().includes(this.searchValue?.toLowerCase() || '');
+  }
+
+  private propagateChange(_value: any) {}
+}

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

@@ -0,0 +1,11 @@
+@if (_skeleton && _plugs.length) { @for (plug of _plugs; track plug) {
+<div
+  [class.skeleton]="_skeleton"
+  [style.height]="_skeleton ? sHeight : ''"
+  [style.margin-bottom]="sMb"
+  class="skelet full-width full-height"></div>
+} } @else {
+<div [style.height]="_skeleton ? sHeight : ''" [class.skeleton]="_skeleton" [ddAutoHeight]="deepParent">
+  <ng-content></ng-content>
+</div>
+}

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

@@ -0,0 +1,36 @@
+:host {
+  min-width: 100%;
+}
+.skeleton {
+  position: relative;
+  overflow: hidden;
+  min-height: 100%;
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background-image: linear-gradient(
+      90deg,
+      rgba(#d0cdcd, 0) 0,
+      rgba(#d0cdcd, 0.2) 20%,
+      rgba(#d0cdcd, 0.5) 60%,
+      rgba(#d0cdcd, 0)
+    );
+    animation: shimmer 2s infinite;
+    content: '';
+  }
+
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+}
+.skelet {
+  min-height: 100%;
+  border-radius: 24px;
+  //margin-bottom: 12px;
+}

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

@@ -0,0 +1,41 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
+import {AutoHeightDirective} from "../core";
+
+@Component({
+  selector: 'dd-lib-skeleton',
+  standalone: true,
+  imports: [AutoHeightDirective],
+  templateUrl: './lib-skeleton.component.html',
+  styleUrl: './lib-skeleton.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LibSkeletonComponent {
+  @Input() public deepParent: number | undefined;
+  @Input() public sHeight: string | undefined = '200px';
+  @Input() public sMb: string | undefined;
+
+  @Input()
+  public set skeleton(s: boolean | undefined) {
+    if (s === true) {
+      this._skeleton = s;
+      this.cdr.detectChanges();
+    } else {
+      setTimeout(() => {
+        this._skeleton = s;
+        this.cdr.detectChanges();
+      }, 1000);
+    }
+  }
+  @Input() public set plugs(n: number | undefined) {
+    if (n && n > 0) {
+      this._plugs = Array.from(Array(n).keys());
+    }
+  }
+
+  public _plugs: number[] = [];
+  public _skeleton: boolean | undefined;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  protected readonly length = length;
+}

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

@@ -0,0 +1,21 @@
+<div class="pos-relative" id="js-sort-wrapper">
+  <div (click)="showSortList()" class="d-flex align-center cup">
+    <div class="text-plain green mr-12">Сортировка</div>
+    <div>
+      <dd-lib-svg-icon icon="sort"></dd-lib-svg-icon>
+    </div>
+  </div>
+  @if (showSort) {
+  <div (ddClickOutside)="showSort = false" [elements]="['js-sort-wrapper']" class="sort-list-container">
+    <dd-lib-card type="small">
+      <div class="sort-list-container__list">
+        @for (item of sortItems; track item) {
+        <div (click)="onSort(item.value)" [class.green]="sort === item.value" class="mb-12 text-plain">
+          {{ item.name }}
+        </div>
+        }
+      </div>
+    </dd-lib-card>
+  </div>
+  }
+</div>

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

@@ -0,0 +1,21 @@
+:host {
+  display: block;
+}
+
+.sort-list-container {
+  position: absolute;
+  z-index: 1;
+  top: 36px;
+
+  &__list {
+    white-space: nowrap;
+
+    .text-plain {
+      cursor: pointer;
+
+      &:hover {
+        color: var(--primary-green-color);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {LibCardComponent} from '../lib-card/lib-card.component';
+import {NgOptimizedImage} from '@angular/common';
+import {ClickOutsideDirective} from "../core";
+import {LibSvgIconComponent} from "../lib-svg-icon/lib-svg-icon.component";
+
+export interface ISort {
+  value: string;
+  name: string;
+  default?: boolean;
+}
+
+const DefaultSort = [
+  { name: 'По возрастанию', value: 'asc', default: true },
+  { name: 'По убыванию', value: 'desc' },
+];
+
+@Component({
+  selector: 'dd-lib-sort',
+  standalone: true,
+  templateUrl: './lib-sort.component.html',
+  styleUrls: ['./lib-sort.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ClickOutsideDirective, LibCardComponent, NgOptimizedImage, LibSvgIconComponent],
+})
+export class LibSortComponent implements OnInit {
+  @Input() public sortItems: ISort[] = DefaultSort;
+  @Output() public sortEvent = new EventEmitter<string>();
+
+  public sort: string | undefined;
+  public showSort: boolean | undefined;
+
+  public ngOnInit(): void {
+    if (this.sortItems?.length) {
+      this.sort = this.sortItems?.find(f => f.default)?.value || this.sortItems[0]?.value;
+    }
+  }
+
+  public onSort(field: string): void {
+    if (field !== this.sort) {
+      this.sort = field;
+      this.sortEvent.emit(field);
+      this.showSort = false;
+    }
+  }
+
+  public showSortList(): void {
+    if (this.sortItems?.length) {
+      this.showSort = !this.showSort;
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+<span class="step-badge">
+  <span class="h3-title">{{ step }}</span>
+  &nbsp;<span class="h4-title">{{ name }}</span>
+</span>

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

@@ -0,0 +1,23 @@
+@import '../../../assets/scss/mixins';
+@import '../../../assets/scss/vars';
+
+:host {
+  display: flex;
+}
+
+.step-badge {
+  padding: 8px 32px 8px 32px;
+  border-radius: 40px;
+  background-color: var(--low-bgc-color);
+  display: flex;
+  align-items: baseline;
+
+  @include below($mobile) {
+    width: 100%;
+    justify-content: center;
+  }
+
+  & span {
+    color: var(--primary-green-color);
+  }
+}

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

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'dd-lib-step',
+  standalone: true,
+  imports: [],
+  templateUrl: './lib-step.component.html',
+  styleUrl: './lib-step.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LibStepComponent {
+  @Input() public step = 1;
+  @Input() public name = 'шаг';
+}