@morozeckiy/dd-lib 0.1.1

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

@@ -0,0 +1,26 @@
+:host {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.loader {
+  //min-width: 100px;
+}
+
+.loader {
+  width: 24px;
+  height: 24px;
+  //background: url(../../../assets/images/svg/small-round-loader.svg) center no-repeat;
+  svg {
+    animation: rotate 1.5s linear infinite;
+  }
+}
+
+@keyframes rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'dd-lib-loader',
+  standalone: true,
+  imports: [],
+  templateUrl: './lib-loader.component.html',
+  styleUrl: './lib-loader.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LibLoaderComponent {
+  @Input() public color = '#07b700';
+}

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

@@ -0,0 +1,41 @@
+<div class="pos-relative">
+  <dd-lib-filter-button
+    (clearEvent)="clearPeriod()"
+    (clickEvent)="showPeriod()"
+    [active]="periodIsSelected || calendarIsSelected"
+    [id]="idPeriod"
+    btnColor="transparent">
+    <div>Период</div>
+  </dd-lib-filter-button>
+  @if (periodIsShown) {
+  <div (ddClickOutside)="clickOutside($event)" [elements]="[idPeriod, idCalendar]" class="wrapper-calendar">
+    <dd-lib-card class="period-block" type="small">
+      <div>
+        <div class="period-block__header">
+          <div class="period-block__header_title">Период</div>
+          <div (click)="clearPeriod()" class="period-block__header_clear">Сбросить</div>
+        </div>
+        <div class="period-block__list">
+          @for (period of periodMenu; track period) {
+          <dd-lib-radio (changed)="selectPeriod($event)" [(ngModel)]="selectedPeriod" [value]="period.name">{{
+            period.title
+          }}</dd-lib-radio>
+          }
+        </div>
+        <div (click)="calendarIsShown = !calendarIsShown" class="period-block__footer">
+          {{ calendarIsShown ? 'Закрыть' : 'Открыть' }} календарь
+        </div>
+      </div>
+    </dd-lib-card>
+    @if (calendarIsShown) {
+    <dd-lib-calendar
+      (emitDate)="selectDate($event)"
+      [(ngModel)]="selectedDate"
+      [id]="idCalendar"
+      [maxDate]="maxDate"
+      class="calendar-block">
+    </dd-lib-calendar>
+    }
+  </div>
+  }
+</div>

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

@@ -0,0 +1,77 @@
+
+dd-lib-filter-button {
+  position: relative;
+}
+
+.wrapper-calendar {
+  position: absolute;
+  left: 0;
+  width: 352px;
+  height: 348px;
+  z-index: 101;
+  display: block;
+  margin-top: 8px;
+}
+
+.period-block {
+  z-index: 400;
+  display: block;
+  position: relative;
+  animation: period 0.5s forwards;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+
+    &_title {
+      font-weight: 500;
+    }
+
+    &_clear {
+      font-weight: 500;
+      color: var(--primary-green-color);
+      cursor: pointer;
+    }
+  }
+
+  &__list {
+    dd-lib-radio {
+      display: block;
+      margin-bottom: 16px;
+    }
+  }
+
+  &__footer {
+    margin-top: 8px;
+    font-weight: 500;
+    color: var(--primary-green-color);
+    cursor: pointer;
+  }
+}
+
+.calendar-block {
+  margin-top: 8px;
+  display: block;
+  transform: translateY(-10%);
+  animation: date 0.5s forwards;
+}
+
+@keyframes period {
+  0% {
+    transform: translateY(-10%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes date {
+  0% {
+    transform: translateY(-10%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}

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

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

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

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

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

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

@@ -0,0 +1,86 @@
+: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;
+  }
+}