@morozeckiy/dd-lib 0.1.1 → 0.1.2

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

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

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

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

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

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

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

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

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

@@ -1,80 +0,0 @@
-
-:host {
-  outline: none;
-  position: relative;
-}
-
-.check {
-  display: flex;
-  position: relative;
-  font-size: 16px;
-  width: fit-content;
-  cursor: pointer;
-  align-items: center;
-}
-
-.check-input {
-  appearance: none;
-  position: absolute;
-  opacity: 0;
-
-  width: 20px;
-  height: 20px;
-
-  &:hover + label .checkbox {
-    border-color: var(--light-black-color);
-  }
-
-  &:hover:checked + label .checkbox {
-    background: var(--cb-hover-bgc);
-    border: none;
-  }
-
-  &:disabled + label,
-  &:disabled + label .checkbox,
-  &:hover:disabled + label,
-  &:hover:disabled + label .checkbox {
-    cursor: default;
-    pointer-events: none;
-    border-color: var(--cb-init-border);
-  }
-
-  &:disabled:checked + label .checkbox {
-    cursor: default;
-    pointer-events: none;
-    border-color: var(--cb-init-border);
-    background-color: var(--cb-init-border);
-    font-weight: bold;
-  }
-
-  &:checked + label {
-    font-weight: bold;
-  }
-
-  &:checked + label .checkbox {
-    background: var(--cb-checked-bgc);
-    border: none;
-    position: relative;
-
-    &:before {
-      content: '';
-      background: url(../../../assets/images/svg/check-white.svg) no-repeat;
-      height: 10px;
-      position: absolute;
-      width: 13px;
-      top: 5px;
-      left: 4px;
-    }
-  }
-}
-
-.checkbox {
-  min-width: 20px;
-  min-height: 20px;
-  padding: 3px;
-  background-color: var(--white-color);
-  border-radius: 5px;
-  border: 1px solid var(--cb-init-border);
-  cursor: pointer;
-  margin-right: 12px;
-}

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

@@ -1,67 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  forwardRef,
-  Input,
-  OnInit,
-  Output,
-} from '@angular/core';
-
-import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-@Component({
-  selector: 'dd-lib-checkbox',
-  standalone: true,
-  imports: [FormsModule],
-  templateUrl: './lib-checkbox.component.html',
-  styleUrl: './lib-checkbox.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => LibCheckboxComponent),
-      multi: true,
-    },
-  ],
-})
-export class LibCheckboxComponent implements OnInit, ControlValueAccessor {
-  public static idCounter = 1;
-
-  @Input() public checkboxId: string | undefined;
-  @Input() public required = false;
-  @Input() public disabled = false;
-  @Input() public checked = false;
-  @Input() public customClass: string | undefined;
-  @Input() public invalid = false;
-
-  @Output() public checkEvent = new EventEmitter<boolean>();
-  public focused: boolean | undefined;
-  private onTouchedCallback: (() => void) | undefined;
-
-  public ngOnInit(): void {
-    if (!this.checkboxId) {
-      this.checkboxId = 'dd-checkbox-' + LibCheckboxComponent.idCounter++;
-    }
-  }
-
-  public registerOnChange(fn: any): void {
-    this.propagateChange = fn;
-  }
-
-  public registerOnTouched(fn: any): void {
-    this.onTouchedCallback = fn;
-  }
-
-  public onChecked(target: EventTarget | null): void {
-    this.checked = (target as HTMLInputElement)?.checked;
-    this.propagateChange(this.checked);
-    this.checkEvent.emit(this.checked);
-  }
-
-  public writeValue(value: boolean): void {
-    this.checked = value;
-  }
-
-  private propagateChange(value: boolean) {}
-}

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

@@ -1,32 +0,0 @@
-<div class="lib-comment-textarea">
-  <textarea
-    [(ngModel)]="value"
-    [disabled]="disabled"
-    [placeholder]="placeholder"
-    [readOnly]="readOnly"
-    ddResizeTextarea
-    type="text"></textarea>
-  <dd-lib-button [disabled]="disabled" [noPadding]="true" height="48px" width="48px">
-    <svg fill="none" height="28" viewBox="0 0 24 22" width="24" xmlns="http://www.w3.org/2000/svg">
-      <g clip-path="url(#clip0_429_4922)">
-        <path
-          [attr.stroke]="disabled ? '#8e9cbe' : 'white'"
-          d="M10 14L21 3"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.7" />
-        <path
-          [attr.stroke]="disabled ? '#8e9cbe' : 'white'"
-          d="M21.0001 3L14.5001 21C14.4562 21.0957 14.3858 21.1769 14.2971 21.2338C14.2085 21.2906 14.1054 21.3209 14.0001 21.3209C13.8948 21.3209 13.7917 21.2906 13.703 21.2338C13.6144 21.1769 13.5439 21.0957 13.5001 21L10.0001 14L3.00007 10.5C2.90433 10.4561 2.8232 10.3857 2.76632 10.2971C2.70944 10.2084 2.6792 10.1053 2.6792 10C2.6792 9.89468 2.70944 9.79158 2.76632 9.70295C2.8232 9.61431 2.90433 9.54387 3.00007 9.5L21.0001 3Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.7" />
-      </g>
-      <defs>
-        <clipPath id="clip0_429_4922">
-          <rect [attr.fill]="disabled ? '#8e9cbe' : 'white'" height="28" width="24" />
-        </clipPath>
-      </defs>
-    </svg>
-  </dd-lib-button>
-</div>