@morozeckiy/dd-lib 0.1.1

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

@@ -0,0 +1,30 @@
+<div (click)="onClick($event)" [ngStyle]="{width, height}" class="button-container">
+  <button
+    #btn
+    [attr.tabIndex]="disabled ? -1 : 0"
+    [autofocus]="autofocus"
+    [class.active]="active"
+    [class.disabled]="disabled"
+    [class.green]="btnColor === 'green'"
+    [class.loader]="showLoader"
+    [class.no-padding]="noPadding"
+    [class.red]="btnColor === 'red'"
+    [class.transparent]="btnColor === 'transparent'"
+    [class.white]="btnColor === 'white'"
+    [class.dark]="btnColor === 'dark'"
+    [disabled]="disabled"
+    [ngStyle]="{width, height}"
+    [type]="buttonType"
+    class=""
+    role="button">
+    @if (!showLoader) {
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+    } @if (showLoader) {
+    <dd-lib-loader [color]="loaderColor"></dd-lib-loader>
+    }
+  </button>
+</div>
+
+<ng-template #content>
+  <span #contentData><ng-content></ng-content></span>
+</ng-template>

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

@@ -0,0 +1,89 @@
+@import '../../../assets/scss/mixins';
+@import '../../../assets/scss/vars';
+
+.button-container {
+  display: inline-block;
+
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--btn-height);
+    padding: var(--btn-padding);
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: var(--font-wheit-big);
+    border-radius: var(--btn-border-radius);
+    outline: none;
+    cursor: pointer;
+    white-space: nowrap;
+    border: none;
+    background-color: var(--btn-green-bgc);
+    color: #fff;
+
+    &:hover,
+    &:focus {
+      background-color: var(--btn-green-hover);
+    }
+
+    &:active {
+      background-color: var(--btn-green-hover);
+    }
+
+    &.active {
+      background-color: var(--btn-green-hover);
+    }
+
+    &.disabled {
+      color: var(--disabled-color);
+      background-color: var(--btn-disabled-bgc);
+      pointer-events: none;
+      cursor: default;
+    }
+
+    &.loader {
+      min-width: 100px;
+    }
+
+    &.white {
+      background-color: var(--btn-light-green-bgc);
+      color: var(--btn-white-color);
+
+      &:hover {
+        color: var(--btn-white-hover-color);
+      }
+    }
+
+    &.transparent {
+      background-color: transparent;
+      color: var(--btn-white-color);
+      border: none;
+
+      &:hover {
+        color: var(--btn-white-hover-color);
+      }
+    }
+
+    &.red {
+      background-color: var(--btn-red-bgc);
+      color: var(--btn-red-color);
+
+      &:hover {
+        color: var(--btn-red-hover-color);
+      }
+    }
+
+    &.dark {
+      background-color: var(--btn-dark-bgc);
+      color: var(--btn-dark-color);
+
+      &:hover {
+        background-color: var(--btn-dark-hover-color);
+      }
+    }
+
+    &.no-padding {
+      padding: 0;
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  Input,
+  NO_ERRORS_SCHEMA,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { LibCommonButtonComponent } from '../common/lib-common-button';
+import { LibLoaderComponent } from '../lib-loader/lib-loader.component';
+
+@Component({
+  selector: 'dd-lib-button',
+  standalone: true,
+  templateUrl: './lib-button.component.html',
+  styleUrls: ['./lib-button.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, FormsModule, LibLoaderComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
+})
+export class LibButtonComponent extends LibCommonButtonComponent implements AfterViewInit {
+  @Input() public noPadding: boolean | undefined;
+  @Input() public loaderColor = this.btnColor === 'green' ? '#fff' : '';
+
+  public ngAfterViewInit() {
+    const btn = this.button?.nativeElement;
+    if (btn && btn.attributes?.autofocus) {
+      btn.focus();
+    }
+  }
+}

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

@@ -0,0 +1,64 @@
+@if (mode === 'icon') {
+<div class="pos-relative d-flex align-center">
+  @if (dateValue) {
+  <span class="mr-12 green">{{ dateValue | date: 'dd.MM.yyyy' }}</span>
+  }
+  <dd-lib-svg-icon class="cup" (click)="showCalendar = !showCalendar" icon="calendar"></dd-lib-svg-icon>
+  @if (dateValue) {
+    <dd-lib-svg-icon class="cup" (click)="canselDate()" icon="clear"></dd-lib-svg-icon>
+  } @if (showCalendar) {
+  <div class="calendar-abs-wrapper">
+    <ng-template [ngTemplateOutlet]="calendar"></ng-template>
+  </div>
+  }
+</div>
+} @if (mode === 'full') {
+<ng-template [ngTemplateOutlet]="calendar"></ng-template>
+}
+
+<ng-template #calendar>
+  <dd-lib-card class="calendar-block" type="small">
+    <div class="calendar-block__header">
+      <div class="calendar-block__header_arrow">
+        <dd-lib-svg-icon (click)="changeMonth(-1)" icon="left_chevron"></dd-lib-svg-icon>
+      </div>
+      <div class="calendar-block__header_year">{{ getMonth() + ' ' + year }}</div>
+      <div class="calendar-block__header_arrow">
+        <dd-lib-svg-icon (click)="changeMonth(1)" icon="right_chevron"></dd-lib-svg-icon>
+      </div>
+    </div>
+    <div class="calendar-block__week">
+      @for (day of week; track day) {
+      <div class="calendar-block__week_day">{{ day }}</div>
+      }
+    </div>
+    <div class="calendar-block__days">
+      @for (day of daysInMonth?.prevDays; track day) {
+      <div class="calendar-block__days_day hide">{{ day }}</div>
+      } @for (day of daysInMonth?.days; track day) {
+      <div
+        (click)="selectDay(day)"
+        [class.active]="
+          dateValue?.getDate() === day && dateValue?.getMonth() === month && dateValue?.getFullYear() === year
+        "
+        [class.current]="
+          dateNow.getDate() === day && dateNow.getMonth() === month && dateNow.getFullYear() === year
+        "
+        [class.hide]="checkHideDay(day)"
+        class="calendar-block__days_day normal">
+        {{ day }}
+      </div>
+      } @for (day of daysInMonth?.lastDays; track day) {
+      <div class="calendar-block__days_day hide">{{ day }}</div>
+      }
+    </div>
+    <div class="calendar-block__footer">
+      <dd-lib-button (click)="canselDate()" [btnColor]="'transparent'" class="calendar-block__footer_btn"
+        >Отменить
+      </dd-lib-button>
+      <dd-lib-button (click)="selectDate()" [disabled]="!dateValue" class="calendar-block__footer_btn"
+        >Выбрать
+      </dd-lib-button>
+    </div>
+  </dd-lib-card>
+</ng-template>

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

@@ -0,0 +1,88 @@
+:host {
+  display: block;
+}
+.calendar-block {
+  z-index: 1100;
+  display: block;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 22px;
+    color: var(--calendar-gray-color);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 24px;
+
+    &_arrow {
+      cursor: pointer;
+    }
+  }
+
+  &__week {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    color: var(--primary-green-color);
+    font-size: 10px;
+    font-weight: 400;
+    line-height: 12px;
+    letter-spacing: 1.5px;
+    margin-bottom: 22px;
+
+    &_day {
+      min-width: 45px;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+    }
+  }
+
+  &__days {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
+    gap: 14px;
+    justify-items: center;
+    margin-bottom: 22px;
+
+    &_day {
+      cursor: pointer;
+      width: 30px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 29px;
+
+      &.current {
+        border: 1px solid var(--primary-green-color);
+      }
+
+      &.active,
+      &.normal:hover {
+        background-color: var(--primary-green-color);
+        color: var(--white-color);
+      }
+
+      &.hide {
+        pointer-events: none;
+        cursor: default;
+        color: var(--calendar-gray-hide-color);
+      }
+    }
+  }
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+.calendar-abs-wrapper {
+  position: absolute;
+  box-shadow: var(--main-card-shadow);
+  right: 0;
+  z-index: 1111;
+}

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

@@ -0,0 +1,227 @@
+import {ChangeDetectionStrategy, Component, EventEmitter, forwardRef, Input, OnInit, Output,} from '@angular/core';
+import {LibFilterButtonComponent} from '../lib-filter-button/lib-filter-button.component';
+import {LibCardComponent} from '../lib-card/lib-card.component';
+import {LibRadioComponent} from '../lib-radio/lib-radio.component';
+import {CommonModule, NgOptimizedImage} from '@angular/common';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {LibButtonComponent} from '../lib-button/lib-button.component';
+import {parse} from 'date-fns';
+import {DateService, IDaysInMonth} from "../core";
+import {LibSvgIconComponent} from "../lib-svg-icon/lib-svg-icon.component";
+
+const Months = [
+  'Январь',
+  'Февраль',
+  'Март',
+  'Апрель',
+  'Май',
+  'Июнь',
+  'Июль',
+  'Август',
+  'Сентябрь',
+  'Октябрь',
+  'Ноябрь',
+  'Декабрь',
+];
+
+/**
+ Этот компонент используется для отображения календаря с возможностью выбора даты.
+ Ниже приведено описание свойств и методов данного компонента:
+
+ Свойства:
+ - @Input() public type: 'string' | 'number' | 'date' = 'string'; - тип данных для выбора даты.
+ - @Input() public format = 'dd.MM.yyyy HH:mm'; - формат отображения даты.
+ - @Input() public maxDate = new Date(); - максимальная дата, которую можно выбрать.
+ - @Output() public emitDate = new EventEmitter<date | undefined>(); - событие, срабатывающее при выборе даты.
+ - public dateValue: Date | undefined; - выбранная пользователем дата.
+ - public months = Months; - массив с названиями месяцев.
+ - public week = ['ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ', 'ВС']; - массив с названиями дней недели.
+ - public year = new Date().getFullYear(); - текущий год.
+ - public month = new Date().getMonth(); - текущий месяц.
+ - public day = new Date().getDay(); - текущий день недели.
+ - public daysInMonth: IDaysInMonth; - количество дней в текущем месяце.
+ - public currentDate = new Date(); - текущая выбранная дата.
+ - public dateNow = new Date(); - текущая дата.
+ - public onTouchedCallback: () => void; - функция обратного вызова при касании.
+
+ Методы:
+ - public propagateChange(_value: Date): void {} - метод для обновления значения выбранной даты.
+ - public ngOnInit(): void {} - метод жизненного цикла компонента, вызываемый при инициализации.
+ - public setDayInMonth(): void {} - метод для установки количества дней в текущем месяце.
+ - public changeMonth(number: number): void {} - метод для изменения месяца в календаре.
+ - public getMonth(): string {} - метод для получения названия текущего месяца.
+ - public registerOnChange(fn: any): void {} - метод для регистрации функции обратного вызова при изменении значения.
+ - public registerOnTouched(fn: any): void {} - метод для регистрации функции обратного вызова при касании.
+ - public writeValue(val: Date): void {} - метод для установки значения даты.
+ - public selectDay(day: number): void {} - метод для выбора конкретного дня в календаре.
+ - public selectDate(): void {} - метод для выбора даты и передачи значения через propagateChange и emitDate.
+ - public checkHideDay(day: number): boolean {} - метод для проверки скрытия определенного дня в календаре.
+ - public canselDate(): void {} - метод для отмены выбранной даты и сброса значений.
+ **/
+@Component({
+  selector: 'dd-lib-calendar',
+  standalone: true,
+  imports: [
+    LibFilterButtonComponent,
+    LibCardComponent,
+    LibRadioComponent,
+    CommonModule,
+    LibButtonComponent,
+    NgOptimizedImage,
+    LibSvgIconComponent,
+  ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => LibCalendarComponent),
+      multi: true,
+    },
+  ],
+  templateUrl: './lib-calendar.component.html',
+  styleUrl: './lib-calendar.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LibCalendarComponent implements ControlValueAccessor, OnInit {
+  @Input() public type: 'string' | 'number' | 'date' = 'string';
+  @Input() public formatDate = 'dd.MM.yyyy';
+  @Input() public formatTime: string | undefined;
+  @Input() public mode: 'icon' | 'full' = 'full';
+  @Output() public emitDate = new EventEmitter<Date | undefined>();
+  @Input()
+  public set maxDate(date: any) {
+    if (date === 'current') {
+      this._maxDate = new Date();
+    } else if (typeof date === 'object') {
+      this._maxDate = date;
+    } else if (typeof date === 'string') {
+      this._maxDate = parse(
+        date,
+        `${this.formatDate}${this.formatTime ? ' ' + this.formatTime : ''}`,
+        new Date(),
+      );
+    }
+  }
+
+  @Input()
+  public set minDate(date: any) {
+    if (date === 'current') {
+      this._minDate = new Date();
+    } else if (date === 'year') {
+      this._minDate = new Date(new Date().setFullYear(new Date().getFullYear() - 1));
+    } else if (date === 'month') {
+      this._minDate = new Date(new Date().setMonth(new Date().getMonth() - 1));
+    } else if (typeof date === 'object') {
+      this._minDate = date;
+    } else if (typeof date === 'string') {
+      this._minDate = parse(
+        date,
+        `${this.formatDate}${this.formatTime ? ' ' + this.formatTime : ''}`,
+        new Date(),
+      );
+    }
+  }
+
+  private _maxDate: Date | undefined;
+  private _minDate: Date | undefined;
+  public dateValue: Date | undefined;
+  public months = Months;
+  public week = ['ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ', 'ВС'];
+  public year = new Date().getFullYear();
+  public month = new Date().getMonth();
+  public day = new Date().getDay();
+  public daysInMonth: IDaysInMonth | undefined;
+  // minDate = setMinDate();
+  public currentDate = new Date();
+  public dateNow = new Date();
+  public onTouchedCallback: (() => void) | undefined;
+  public showCalendar: boolean | undefined;
+
+  constructor(private dateService: DateService) {}
+
+  public propagateChange(_value: Date): void {}
+
+  public ngOnInit(): void {
+    this.setDayInMonth();
+  }
+
+  public setDayInMonth(): void {
+    this.daysInMonth = this.dateService.getDaysInMonth(this.month, this.year);
+  }
+
+  public changeMonth(number: number): void {
+    const temp = new Date(this.currentDate);
+    temp.setMonth(temp.getMonth() + number);
+    this.month = temp.getMonth();
+    this.year = temp.getFullYear();
+    this.currentDate = temp;
+    this.setDayInMonth();
+  }
+
+  public getMonth(): string {
+    if (this.currentDate) {
+      return this.months[this.currentDate.getMonth()];
+    } else {
+      return this.months[this.month];
+    }
+  }
+
+  public registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  public registerOnTouched(fn: any): void {
+    this.onTouchedCallback = fn;
+  }
+
+  public writeValue(val: Date): void {
+    this.dateValue = val;
+  }
+
+  public selectDay(day: number): void {
+    if (!this.checkHideDay(day)) {
+      this.dateValue = new Date(this.year, this.month, day);
+    }
+  }
+
+  public selectDate(): void {
+    this.propagateChange(this.dateValue as Date);
+    this.emitDate.emit(this.dateValue);
+    this.showCalendar = false;
+  }
+
+  public checkHideDay(day: number): boolean {
+    let moreDay = false;
+      let moreMonth = false;
+      let moreYear = false;
+    const lessDay = false;
+      const lessMonth = false;
+      const lessYear = false;
+    if (this._maxDate) {
+      const [maxYear, maxMonth, maxDay] = [
+        this._maxDate.getFullYear(),
+        this._maxDate.getMonth(),
+        this._maxDate.getDate(),
+      ];
+      moreDay = this.year >= maxYear && this.month >= maxMonth && day > maxDay;
+      moreMonth = this.year >= maxYear && this.month > maxMonth;
+      moreYear = this.year > maxYear;
+    }
+    if (this._minDate) {
+      const [minYear, minMonth, minDay] = [
+        this._minDate.getFullYear(),
+        this._minDate.getMonth(),
+        this._minDate.getDate(),
+      ];
+      moreDay = this.year <= minYear && this.month <= minMonth && day < minDay;
+      moreMonth = this.year <= minYear && this.month < minMonth;
+      moreYear = this.year < minYear;
+    }
+    return moreDay || moreMonth || moreYear || lessDay || lessMonth || lessYear;
+  }
+
+  public canselDate(): void {
+    this.emitDate.emit();
+    this.dateValue = undefined;
+    this.showCalendar = false;
+  }
+}

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

@@ -0,0 +1,23 @@
+<div
+  class="lib-card-wrapper"
+  [class.border-r-bottom]="borderRadius === 'bottom'"
+  [class.border-r-none]="borderRadius === 'none'"
+  [class.border-r-top]="borderRadius === 'top'"
+  [class.giant-card]="type === 'giant'"
+  [class.small-card]="type === 'small'"
+  [class.with-footer]="!!footerBtn">
+  <dd-lib-skeleton
+    [deepParent]="parentLvlForSkeleton"
+    [skeleton]="skeleton"
+    [plugs]="plugs"
+    [sHeight]="sHeight">
+    <div class="lib-card">
+      <ng-content></ng-content>
+    </div>
+  </dd-lib-skeleton>
+</div>
+@if (footerBtn) {
+<div (click)="cardBtnEvent.emit(); cdr.detectChanges()" class="lib-card-footer-btn">
+  {{ footerBtn }}
+</div>
+}

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

@@ -0,0 +1,64 @@
+@import '../../../assets/scss/mixins';
+@import '../../../assets/scss/vars';
+
+:host {
+  display: block;
+}
+.lib-card-wrapper {
+  overflow: hidden;
+  border-radius: 24px;
+  box-shadow: var(--main-card-shadow);
+  background-color: var(--main-card-color);
+  min-height: 100%;
+
+  &.border-r-bottom {
+    border-radius: 0 0 24px 24px;
+  }
+
+  &.border-r-top {
+    border-radius: 24px 24px 0 0;
+  }
+
+  &.border-r-none {
+    border-radius: 0;
+  }
+
+  &.small-card {
+    border-radius: 12px;
+  }
+
+  &.giant-card {
+    .lib-card {
+      padding: 32px;
+
+      @include below($mobile) {
+        padding: 16px;
+      }
+    }
+  }
+
+  &.with-footer {
+    border-radius: 24px 24px 0 0;
+  }
+}
+
+.lib-card {
+  min-height: 100%;
+  padding: 24px;
+
+  @include below($mobile) {
+    padding: 16px;
+  }
+}
+
+.lib-card-footer-btn {
+  border-radius: 0 0 12px 12px;
+  font-weight: 500;
+  background-color: var(--primary-green-color);
+  color: var(--white-color);
+  cursor: pointer;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -0,0 +1,32 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+
+import { LibSkeletonComponent } from '../lib-skeleton/lib-skeleton.component';
+
+@Component({
+  selector: 'dd-lib-card',
+  standalone: true,
+  imports: [LibSkeletonComponent],
+  templateUrl: './lib-card.component.html',
+  styleUrl: './lib-card.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LibCardComponent {
+  @Input() public type: 'giant' | 'standard' | 'small' = 'standard';
+  @Input() public footerBtn: string | undefined;
+  @Input() public sHeight: string | undefined;
+  @Input() public skeleton: any;
+  @Input() public parentLvlForSkeleton: number | undefined;
+  @Input() public plugs: number | undefined;
+  @Input() public borderRadius: 'all' | 'top' | 'bottom' | 'none' = 'all';
+
+  @Output() public cardBtnEvent = new EventEmitter<undefined>();
+
+  constructor(public cdr: ChangeDetectorRef) {}
+}

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

@@ -0,0 +1,15 @@
+<input
+  (change)="onChecked($event.target)"
+  [checked]="checked"
+  [class.disabled]="disabled"
+  [class.invalid]="invalid"
+  [disabled]="disabled"
+  [id]="checkboxId"
+  [required]="required"
+  [tabindex]="disabled ? -1 : null"
+  class="check-input"
+  type="checkbox" />
+<label [for]="checkboxId" class="{{ customClass }} check">
+  <span [class.focused]="focused" class="checkbox"></span>
+  <ng-content></ng-content>
+</label>