@morozeckiy/dd-lib 0.1.1 → 0.1.2

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

@@ -1,28 +0,0 @@
-.lib-comment-textarea {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  //height: 48px;
-
-  textarea {
-    margin-right: 16px;
-    width: 100%;
-    max-height: 48px;
-    padding: 12px 16px;
-    border-radius: 12px;
-    border: none;
-    background-color: var(--gray-color-200);
-    resize: none;
-    box-sizing: inherit;
-
-    &:disabled {
-      background-color: var(--input-disable-input);
-      pointer-events: none;
-
-      &::placeholder {
-        color: var(--disabled-color);
-      }
-    }
-  }
-}

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

@@ -1,20 +0,0 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {LibCommonInputTextComponent} from '../common/lib-common-input-text';
-import {LibButtonComponent} from '../lib-button/lib-button.component';
-import {NgOptimizedImage} from '@angular/common';
-import {ResizeTextareaDirective} from "../core";
-
-@Component({
-  selector: 'dd-lib-comment-input',
-  standalone: true,
-  imports: [FormsModule, LibButtonComponent, NgOptimizedImage, ResizeTextareaDirective],
-  templateUrl: './lib-comment-input.component.html',
-  styleUrl: './lib-comment-input.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LibCommentInputComponent extends LibCommonInputTextComponent {
-  constructor(changeDetection: ChangeDetectorRef) {
-    super(changeDetection);
-  }
-}

package/src/lib/lib-file-upload/lib-file-upload.component.html

@@ -1,14 +0,0 @@
-<input
-  type="file"
-  class="file-input"
-  [accept]="requiredFileType"
-  (change)="onFileSelected($event)"
-  #fileUpload />
-
-<div class="file-upload">
-  <div class="upload-btn" (click)="fileUpload.click()">
-    @if (template) {
-    <ng-template [ngTemplateOutlet]="template"></ng-template>
-    } @else { Загрузить }
-  </div>
-</div>

package/src/lib/lib-file-upload/lib-file-upload.component.scss

@@ -1,3 +0,0 @@
-.file-input {
-  display: none;
-}

package/src/lib/lib-file-upload/lib-file-upload.component.ts

@@ -1,26 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
-
-@Component({
-  selector: 'dd-lib-file-upload',
-  standalone: true,
-  imports: [NgTemplateOutlet],
-  templateUrl: './lib-file-upload.component.html',
-  styleUrl: './lib-file-upload.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LibFileUploadComponent {
-  @Input() public multi: boolean | undefined;
-  @Input() public requiredFileType: string | undefined;
-  @Input() public template: TemplateRef<HTMLElement> | undefined;
-  @Output() public outputFile = new EventEmitter<File>();
-  @Output() public outputFiles = new EventEmitter<File[]>();
-  public onFileSelected($event: Event) {
-    if (!this.multi) {
-      const file: File | undefined = ($event?.target as HTMLInputElement)?.files?.[0];
-      if (file) {
-        this.outputFile.emit(file);
-      }
-    }
-  }
-}

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

@@ -1,46 +0,0 @@
-<div (click)="onClick($event)" [class.disabled]="disabled" [ngStyle]="{width}" class="button-container">
-  <button
-    #btn
-    [attr.tabIndex]="disabled ? -1 : 0"
-    [autofocus]="autofocus"
-    [disabled]="disabled"
-    [ngClass]="{
-      disabled: disabled,
-      loader: showLoader,
-      active: active,
-      white: btnColor === 'white',
-      transparent: btnColor === 'transparent',
-    }"
-    [type]="buttonType"
-    class=""
-    role="button">
-    @if (!showLoader) {
-    <ng-container *ngTemplateOutlet="content"></ng-container>
-    } @if (showLoader) {
-    <div class="loader"></div>
-    }
-  </button>
-</div>
-
-<ng-template #content>
-  <span #contentData><ng-content></ng-content></span>
-  @if (hintContent) {
-  <img
-    (click)="hintClick($event)"
-    alt="Описание"
-    [ddTooltip]="hintContent"
-    [withClick]="true"
-    class="ml-8"
-    height="16"
-    ngSrc="assets/images/svg/question{{ active ? '-white-g' : '' }}.svg"
-    width="16" />
-  } @if (active) {
-  <img
-    (click)="onClear($event)"
-    alt="Очистить"
-    class="ml-8 cup"
-    height="20"
-    ngSrc="assets/images/svg/close.svg"
-    width="20" />
-  }
-</ng-template>

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

@@ -1,62 +0,0 @@
-.button-container {
-  display: inline-block;
-
-  button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: var(--btn-height);
-    font-size: 14px;
-    line-height: 24px;
-    outline: none;
-    cursor: pointer;
-    white-space: nowrap;
-    color: var(--black-color);
-    background-color: var(--btn-white-bgc);
-    border: 1px solid var(--gray-color-200);
-    border-radius: var(--btn-border-round-radius);
-    padding: var(--btn-round-padding);
-    font-weight: var(--font-wheit-small);
-
-    &.loader {
-      min-width: 100px;
-    }
-
-    .loader {
-      width: 24px;
-      height: 24px;
-      background: url(../../../assets/images/svg/small-round-loader.svg) center no-repeat;
-      animation: rotate 1.5s linear infinite;
-    }
-
-    &:hover {
-      color: var(--btn-white-hover-color);
-    }
-
-    &.transparent {
-      background-color: transparent;
-    }
-
-    &.active {
-      color: var(--white-color);
-      background-color: var(--primary-green-color);
-
-      &:hover {
-        background-color: var(--btn-green-hover);
-      }
-    }
-
-    &.disabled {
-      color: var(--disabled-color);
-      background-color: var(--btn-disabled-bgc);
-      pointer-events: none;
-      cursor: default;
-    }
-  }
-
-  @keyframes rotate {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-}

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

@@ -1,45 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  CUSTOM_ELEMENTS_SCHEMA,
-  EventEmitter,
-  Input,
-  NO_ERRORS_SCHEMA,
-  Output,
-} from '@angular/core';
-import {CommonModule, NgOptimizedImage} from '@angular/common';
-import {LibCommonButtonComponent} from '../common/lib-common-button';
-import {FormsModule} from '@angular/forms';
-import {TooltipData, TooltipDirective} from "../core";
-
-@Component({
-  selector: 'dd-lib-filter-button',
-  standalone: true,
-  templateUrl: './lib-filter-button.component.html',
-  styleUrl: './lib-filter-button.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, FormsModule, NgOptimizedImage, TooltipDirective],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
-})
-export class LibFilterButtonComponent extends LibCommonButtonComponent {
-  // public onClick(event: Event): void {
-  //   super.onClick(event);
-  //   // this.active = !this.active;
-  // }
-  @Output() public clearEvent = new EventEmitter<null>();
-  @Output() public hintEvent = new EventEmitter<null>();
-  @Input() public hintContent: TooltipData | undefined;
-
-  public onClear($event: MouseEvent): void {
-    $event.preventDefault();
-    $event.stopPropagation();
-    this.active = false;
-    this.clearEvent.emit();
-  }
-
-  public hintClick($event: MouseEvent): void {
-    $event.stopPropagation();
-    $event.preventDefault();
-    this.hintEvent.emit();
-  }
-}

package/src/lib/lib-image-loader/lib-image-loader.component.html

@@ -1,17 +0,0 @@
-<div class="image-loader">
-  <div class="b3-title mb-4">Вы можете прикрепить до 5 фотографий</div>
-  <div class="gray b6-title mb-16">Только .png и .jpg файлы. Общий объем не должен превышать 5 мегабайт</div>
-  @if (images) {
-  <div class="loaded-images"></div>
-  }
-  <div>
-    <dd-lib-button btnColor="white">
-      <div class="d-flex align-center">
-        <div class="mr-8">
-          <dd-lib-svg-icon icon="paperclip"></dd-lib-svg-icon>
-        </div>
-        <div class="title-soc-btn">Добавить фотографии</div>
-      </div>
-    </dd-lib-button>
-  </div>
-</div>

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

@@ -1,6 +0,0 @@
-.image-loader {
-  .loaded-images {
-    margin-bottom: 16px;
-    display: flex;
-  }
-}

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

@@ -1,16 +0,0 @@
-import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {LibButtonComponent} from '../lib-button/lib-button.component';
-import {NgOptimizedImage} from '@angular/common';
-import {LibSvgIconComponent} from "../lib-svg-icon/lib-svg-icon.component";
-
-@Component({
-  selector: 'dd-lib-image-loader',
-  standalone: true,
-  imports: [LibButtonComponent, NgOptimizedImage, LibSvgIconComponent],
-  templateUrl: './lib-image-loader.component.html',
-  styleUrl: './lib-image-loader.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LibImageLoaderComponent {
-  public images: any;
-}

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

@@ -1,32 +0,0 @@
-<div class="lib-input">
-  <label [for]="id" class="lib-input__title">
-    {{ label }}
-    @if (required) {
-      <dd-lib-svg-icon icon="error_hint"></dd-lib-svg-icon>
-    }
-  </label>
-  <input
-    #input
-    (blur)="notifyFocusEvent($event)"
-    (change)="handleChange()"
-    (focus)="notifyFocusEvent($event)"
-    (input)="handleInput($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.invalid]="invalid"
-    [disabled]="disabled"
-    [readOnly]="readOnly"
-    class="text-input" />
-  @if (errorText && invalid) {
-  <div class="lib-input__error">{{ errorText }}</div>
-  }
-</div>

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

@@ -1,72 +0,0 @@
-:host {
-  display: block;
-}
-
-.lib-input {
-  position: relative;
-  input {
-    width: 100%;
-    height: 48px;
-    padding: 15px 16px;
-    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);
-      }
-    }
-  }
-
-  &__title {
-    margin-bottom: 4px;
-    font-size: 14px;
-    line-height: 24px;
-    display: flex;
-    align-items: flex-start;
-  }
-
-  &__error {
-    color: var(--primary-red-color);
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
-    margin-top: 4px;
-  }
-
-  .password-eye {
-    position: absolute;
-    right: 16px;
-    top: 40px;
-    cursor: pointer;
-  }
-}

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

@@ -1,62 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  forwardRef,
-  Host,
-  OnDestroy,
-  OnInit,
-  Optional,
-  SkipSelf,
-} from '@angular/core';
-import {ControlContainer, ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR} 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 {LibSvgIconComponent} from "../lib-svg-icon/lib-svg-icon.component";
-
-@Component({
-  selector: 'dd-lib-input',
-  standalone: true,
-  templateUrl: './lib-input.component.html',
-  styleUrls: ['./lib-input.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => LibInputComponent),
-      multi: true,
-    },
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [FormsModule, NgOptimizedImage, LibCardComponent, LibSvgIconComponent],
-})
-export class LibInputComponent
-  extends LibCommonInputTextComponent
-  implements OnInit, OnDestroy, ControlValueAccessor
-{
-  constructor(
-    changeDetection: ChangeDetectorRef,
-    @Optional() @Host() @SkipSelf() private controlContainer: ControlContainer,
-  ) {
-    super(changeDetection);
-  }
-
-  public ngOnInit(): void {
-    this.control =
-      this.controlContainer && this.formControlName
-        ? this.controlContainer?.control?.get(this.formControlName)
-        : null;
-  }
-
-  public writeValue(value: string | number | null): void {
-    this.value = value === null || value === undefined ? '' : '' + value;
-    if (!this.destroyed) {
-      this.changeDetection.detectChanges();
-    }
-  }
-
-  public ngOnDestroy(): void {
-    this.destroyed = true;
-    // this.focusManager.unregister(this);
-  }
-}

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

@@ -1,29 +0,0 @@
-<div class="loader">
-  <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_728_22764)">
-      <path
-        [attr.stroke]="color"
-        d="M12 6V3"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="1.7" />
-      <path
-        [attr.stroke]="color"
-        d="M6 12H3"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2" />
-      <path
-        [attr.stroke]="color"
-        d="M7.74961 7.74961L5.59961 5.59961"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2" />
-    </g>
-    <defs>
-      <clipPath id="clip0_728_22764">
-        <rect fill="white" height="24" width="24" />
-      </clipPath>
-    </defs>
-  </svg>
-</div>

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

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

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

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

@@ -1,77 +0,0 @@
-
-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);
-  }
-}