@morozeckiy/dd-lib 0.1.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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