@morozeckiy/dd-lib 0.1.1

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

@@ -0,0 +1,15 @@
+<div
+  #svgRef
+  [class.black-stroke]="stroke === 'black'"
+  [class.black]="color === 'black'"
+  [class.gray-stroke]="stroke === 'gray'"
+  [class.gray]="color === 'gray'"
+  [class.green-stroke]="stroke === 'green'"
+  [class.green]="color === 'green'"
+  [class.white-stroke]="stroke === 'white'"
+  [class.white]="color === 'white'"
+  [class.gold-stroke]="stroke === 'gold'"
+  [class.gold]="color === 'gold'"
+  [class.blue-stroke]="stroke === 'blue'"
+  [class.blue]="color === 'blue'"
+  class="lib-icon"></div>

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

@@ -0,0 +1,81 @@
+.lib-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.green {
+    fill: var(--primary-green-color);
+  }
+
+  &.white {
+    fill: #fff;
+    path {
+      fill: #fff;
+      stroke: #fff;
+    }
+  }
+
+  &.white-stroke {
+    stroke: var(--white-color);
+
+    g > path,
+    path {
+      stroke: var(--white-color);
+    }
+  }
+
+  &.black {
+    fill: var(--black-color);
+  }
+
+  &.gray {
+    fill: var(--second-gray-color);
+
+    path {
+      fill: var(--second-gray-color);
+      stroke: var(--second-gray-color);
+    }
+  }
+
+  &.gray-stroke {
+    stroke: var(--second-gray-color);
+
+    path {
+      stroke: var(--second-gray-color);
+    }
+  }
+
+  &.gold-stroke {
+    stroke: var(--gold-svg-color);
+
+    path {
+      stroke: var(--gold-svg-color);
+    }
+  }
+
+  &.gold {
+    fill: var(--gold-bgc-color);
+
+    path {
+      fill: var(--gold-bgc-color);
+      stroke: var(--gold-svg-color);
+    }
+  }
+
+  &.blue-stroke {
+    stroke: var(--blue-color);
+
+    path {
+      stroke: var(--blue-color);
+    }
+  }
+
+  &.blue {
+    fill: var(--blue-light-bgc);
+
+    path {
+      fill: var(--blue-light-bgc);
+      stroke: var(--blue-light-bgc);
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+import {ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, Renderer2, ViewChild,} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+
+export type TSvgColor = 'white' | 'green' | 'black' | 'gray' | 'gold' | 'blue';
+/**
+  Компонент LibSvgComponent отвечает за отображение SVG иконок. Он содержит следующие свойства и методы:
+
+  Свойства:
+  - @ViewChild('svgRef', { static: true }) public svg: ElementRef; - ссылка на элемент SVG.
+  - @Input() public width: string; - ширина иконки.
+  - @Input() public height: string; - высота иконки.
+  - @Input() public icon: string; - название иконки.
+  - @Input() public pack = 'svg'; - тип иконки (по умолчанию 'svg').
+  - @Input() public color: TSvgColor = 'green'; - цвет иконки (зеленый по умолчанию).
+  - @Input() public stroke: TSvgColor; - цвет обводки иконки.
+
+  Методы:
+  - public ngOnInit(): void {} - метод жизненного цикла компонента, вызываемый при инициализации. В нем происходит загрузка SVG изображения и настройка его параметров, таких как ширина, высота и цвет.
+
+  В методе ngOnInit компонента LibSvgComponent происходит загрузка SVG изображения по указанному пути в зависимости от типа иконки и ее названия. Затем происходит обработка SVG элементов: удаление атрибутов fill и stroke у всех элементов path, а также у элементов svg и g. Задается ширина и высота SVG изображения в соответствии с переданными значениями.
+
+  Этот компонент значительно упрощает процесс отображения иконок на веб-странице, позволяя легко управлять их параметрами, такими как размеры и цвет.
+**/
+// @Deprecate
+@Component({
+  selector: 'dd-lib-svg',
+  standalone: true,
+  imports: [],
+  templateUrl: './lib-svg.component.html',
+  styleUrl: './lib-svg.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LibSvgComponent implements OnInit {
+  @ViewChild('svgRef', {static: true}) public svg!: ElementRef;
+  @Input() public width: string | undefined;
+  @Input() public height: string | undefined;
+  @Input() public icon: string | undefined;
+  @Input() public pack = 'svg';
+  @Input() public color: TSvgColor = 'green';
+  @Input() public stroke: TSvgColor | undefined;
+
+  constructor(private http: HttpClient, private rdr: Renderer2) {}
+
+  public ngOnInit(): void {
+    this.http
+      .get(`assets/images/${this.pack}/${this.icon}.svg`, { responseType: 'text', withCredentials: true })
+      .subscribe(txt => {
+        this.svg.nativeElement.innerHTML = txt;
+        const svg = this.svg.nativeElement.children[0];
+        const g = this.svg.nativeElement.children[0].children[0];
+        const path = this.svg.nativeElement.children[0].children[0].children;
+        for (const item of path) {
+          this.rdr.removeAttribute(item, 'fill');
+          this.rdr.removeAttribute(item, 'stroke');
+        }
+        this.rdr.removeAttribute(svg, 'fill');
+        this.rdr.removeAttribute(g, 'fill');
+        if (this.width) {
+          this.rdr.setAttribute(svg, 'width', this.width);
+        }
+        if (this.height) {
+          this.rdr.setAttribute(svg, 'height', this.height);
+        }
+      });
+  }
+}

package/src/lib/lib-svg-icon/lib-svg-icon.component.ts

@@ -0,0 +1,58 @@
+import {ChangeDetectionStrategy, Component, ElementRef, Inject, Input, Optional, Renderer2} from '@angular/core';
+import {SvgIconsService} from "../core";
+import {DOCUMENT} from "@angular/common";
+
+@Component({
+  selector: 'dd-lib-svg-icon',
+  standalone: true,
+  imports: [],
+  template: '<ng-content></ng-content>',
+  styleUrl: './lib-svg-icon.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+
+})
+export class LibSvgIconComponent {
+  @Input() public width: string | undefined;
+  @Input() public height: string | undefined;
+  @Input() public color: string | undefined;
+
+  @Input()
+  public set icon(iconName: string) {
+    const svgData = this.svgIconRegistry.getIcon(iconName);
+    if (this.svgIcon) {
+      this.el.nativeElement.removeChild(this.svgIcon);
+    }
+
+    if (svgData) {
+      this.svgIcon = this.svgElementFromString(svgData);
+      if (this.width) {
+        this.rdr.setStyle(this.svgIcon, 'width', this.width)
+      }
+      if ( this.height) {
+      }
+      if (this.color) {
+        this.rdr.setStyle(this.svgIcon, 'fill', this.color)
+      }
+
+
+      this.el.nativeElement.appendChild(this.svgIcon);
+    }
+  }
+
+  private svgIcon: SVGElement | undefined;
+
+  constructor(
+    private el: ElementRef,
+    private rdr: Renderer2,
+    private svgIconRegistry: SvgIconsService,
+    @Optional() @Inject(DOCUMENT) private document: any,
+  ) {
+  }
+
+  private svgElementFromString(svgContent: string): SVGElement {
+    const div = this.document.createElement('DIV');
+    div.innerHTML = svgContent;
+
+    return div.querySelector('svg') || this.document.createElementNS('http://www.w3.org/200/svg', 'path');
+  }
+}

package/src/lib/lib-tabs-fragment/lib-tabs-fragment.component.html

@@ -0,0 +1,12 @@
+@if (tabs?.length) {
+<div class="tabs-filter-types">
+  @for (tab of tabs; track tab) {
+  <div
+    (click)="checkActiveTab(tab)"
+    [class.active]="tab.id === activeFragment"
+    class="tabs-filter-types__type">
+    {{ tab.title }}
+  </div>
+  }
+</div>
+}

package/src/lib/lib-tabs-fragment/lib-tabs-fragment.component.scss

@@ -0,0 +1,19 @@
+.tabs-filter-types {
+  display: flex;
+  align-items: center;
+
+  &__type {
+    padding: 16px 8px;
+    border-bottom: 1px solid var(--gray-color-200);
+    color: var(--second-gray-color);
+    cursor: pointer;
+    transition: 0.5s;
+
+    &:hover,
+    &.active {
+      border-color: var(--primary-green-color);
+      box-shadow: 0px -1px 0px 0px var(--primary-green-color) inset;
+      color: var(--primary-green-color);
+    }
+  }
+}

package/src/lib/lib-tabs-fragment/lib-tabs-fragment.component.ts

@@ -0,0 +1,88 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+export class ITab {
+  public title: string;
+  public id: null | number;
+  public fragment: string;
+  public name?: string;
+  public welcomeText?: string;
+  public type?: 1 | 2;
+
+  constructor(body: any) {
+    this.id = body.id;
+    this.title = body.namePage;
+    this.name = body.name;
+    this.fragment = body.address;
+    this.welcomeText = body.welcomeText;
+    this.type = body.type;
+    for (const key in body) {
+      if (key) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        this[key] = body[key];
+      }
+    }
+  }
+}
+
+@Component({
+  selector: 'dd-lib-tabs-fragment',
+  standalone: true,
+  imports: [],
+  templateUrl: './lib-tabs-fragment.component.html',
+  styleUrl: './lib-tabs-fragment.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LibTabsFragmentComponent implements OnInit {
+  @Input() public rout = location.pathname;
+  @Input() public tabs: ITab[] | undefined;
+  @Input() public tabsFragment: string[] | undefined;
+  @Input() public needInitEvent: boolean | undefined;
+  @Output() public setActiveTab = new EventEmitter<null | number>();
+  public activeFragment: number | null | undefined;
+
+  constructor(private route: ActivatedRoute, private router: Router, private cdr: ChangeDetectorRef) {}
+
+  public ngOnInit(): void {
+    if (this.tabs) {
+      this.tabsFragment = this.tabs.map(t => t.fragment);
+      this.getFragment();
+    }
+  }
+
+  public checkActiveTab(tab?: ITab) {
+    if (tab) {
+      this.activeFragment = tab.id;
+      if (this.rout) {
+        this.router.navigate([this.rout], { fragment: tab.fragment });
+      }
+      this.setActiveTab.emit(this.activeFragment);
+    } else {
+      this.activeFragment = undefined;
+      this.router.navigate([this.rout], { fragment: undefined });
+    }
+    this.cdr.detectChanges();
+  }
+
+  private getFragment(): void {
+    const activeFragment = this.route.snapshot.fragment as string;
+    this.activeFragment = this.tabs?.[0]?.id || 0;
+    if (this.tabsFragment?.includes(activeFragment)) {
+      this.activeFragment = this.tabs?.find(f => f.fragment === activeFragment)?.id;
+      if (this.needInitEvent) {
+        this.setActiveTab.emit(this.activeFragment);
+      }
+    } else if (this.needInitEvent) {
+      this.setActiveTab.emit(this.activeFragment);
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+<div class="lib-textarea">
+  <label [for]="id" class="lib-textarea__title">
+    {{ label }} @if (needCounter) {
+    <span>(осталось {{ maxlength - (value?.length || 0) }} символов)</span>
+    } @if (required) {
+    <dd-lib-svg-icon icon="error_hint"></dd-lib-svg-icon>
+    }
+  </label>
+  <div class="pos-relative d-flex">
+    <textarea
+      #textarea
+      (blur)="notifyFocusEvent($event)"
+      (change)="handleChange()"
+      (focus)="notifyFocusEvent($event)"
+      (input)="handleInput($event)"
+      (keyup.enter)="forceChange()"
+      [(ngModel)]="value"
+      [attr.id]="id ? id : null"
+      [attr.maxlength]="maxlength"
+      [attr.minlength]="minlength"
+      [attr.name]="name"
+      [attr.placeholder]="placeholder"
+      [attr.tabIndex]="tabIndex"
+      [class.focused]="focused"
+      [class.invalid]="invalid"
+      [disabled]="disabled"
+      [readOnly]="readOnly"
+      [required]="required"
+      [rows]="rows"
+      class="textarea"></textarea>
+    <span class="lib-textarea__counter">{{ value?.length || 0 }}/{{ maxlength }}</span>
+  </div>
+
+  @if (errorText && invalid)  {
+  <div class="lib-input__error">{{ errorText }}</div>
+  }
+</div>

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

@@ -0,0 +1,77 @@
+.lib-textarea {
+  position: relative;
+  display: inline;
+  flex-direction: column;
+
+  textarea {
+    width: 100%;
+    min-height: 48px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    border: 1px solid var(--input-border-color);
+    background-color: transparent;
+    resize: none;
+
+    &: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);
+      }
+    }
+  }
+
+  &__counter {
+    position: absolute;
+    font-size: 12px;
+    font-weight: 400;
+    right: 16px;
+    bottom: 12px;
+    color: var(--input-placeholder);
+
+    textarea:disabled + .lib-text-counter {
+      color: var(--input-disable-text);
+    }
+  }
+
+  &__title {
+    margin-bottom: 4px;
+    font-size: 14px;
+    line-height: 24px;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  &__error {
+    color: var(--primary-red-color);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 10px;
+    margin-top: 2px;
+  }
+}

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

@@ -0,0 +1,49 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  forwardRef,
+  Host,
+  Input,
+  OnInit,
+  Optional,
+  SkipSelf,
+} from '@angular/core';
+import {ControlContainer, FormsModule, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {NgOptimizedImage} from '@angular/common';
+import {LibCommonInputTextComponent} from '../common/lib-common-input-text';
+import {LibSvgIconComponent} from "../lib-svg-icon/lib-svg-icon.component";
+
+@Component({
+  selector: 'dd-lib-textarea',
+  standalone: true,
+  imports: [FormsModule, NgOptimizedImage, LibSvgIconComponent],
+  templateUrl: './lib-textarea.component.html',
+  styleUrl: './lib-textarea.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => LibTextareaComponent),
+      multi: true,
+    },
+  ],
+})
+export class LibTextareaComponent extends LibCommonInputTextComponent implements OnInit {
+  @Input() public rows = '6';
+  @Input() public needCounter = true;
+
+  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;
+  }
+}

package/src/lib/toast/toast-base/toast-base.component.html

@@ -0,0 +1,7 @@
+<div (click)="destroy()" class="toast-wrapper {{ data.type }}">
+  <dd-lib-svg-icon [icon]="data.type"></dd-lib-svg-icon>
+  <div>
+    <div>{{ data.title }}</div>
+    <div>{{ data.description }}</div>
+  </div>
+</div>

package/src/lib/toast/toast-base/toast-base.component.scss

@@ -0,0 +1,44 @@
+:host {
+  display: block;
+}
+
+.toast-wrapper {
+  display: flex;
+  margin: 40px 40px 0 0;
+  align-items: center;
+  padding: 20px;
+  background: #eefaf3;
+  border-radius: 12px;
+  opacity: 1;
+  max-width: 350px;
+  animation: fade 1s linear;
+  width: 100%;
+
+  &.success {
+    background-color: var(--light-green-color);
+  }
+
+  &.info {
+    background-color: var(--light-blue-color);
+  }
+
+  &.warning {
+    background-color: var(--yellow-card);
+  }
+
+  &.danger {
+    background-color: var(--red-light-color);
+  }
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/src/lib/toast/toast-base/toast-base.component.ts

@@ -0,0 +1,38 @@
+import {ChangeDetectionStrategy, Component, Inject, InjectionToken} from '@angular/core';
+import {NgIf, NgOptimizedImage} from '@angular/common';
+import {ToastService, ToastType} from '../toast.service';
+import {LibSvgIconComponent} from "../../lib-svg-icon/lib-svg-icon.component";
+
+export interface ToastData {
+  title?: string;
+  description?: string;
+  type: ToastType;
+  id: number;
+}
+
+export const TOAST_DATA = new InjectionToken<ToastData>('ToastData');
+
+@Component({
+  selector: 'dd-toast-base',
+  standalone: true,
+  imports: [NgOptimizedImage, NgIf, LibSvgIconComponent],
+  templateUrl: './toast-base.component.html',
+  styleUrl: './toast-base.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ToastBaseComponent {
+  public get id() {
+    return this.data.id;
+  }
+
+  public title: string | undefined;
+  protected data: ToastData;
+
+  constructor(private toastService: ToastService, @Inject(TOAST_DATA) public ddToastData: ToastData) {
+    this.data = { ...this.ddToastData };
+  }
+
+  public destroy(): void {
+    this.toastService.destroyToast(this.id);
+  }
+}

package/src/lib/toast/toast-placeholder/toast-placeholder.component.ts

@@ -0,0 +1,20 @@
+import {Component, Injector, ViewChild, ViewContainerRef} from '@angular/core';
+import {ToastService} from '../toast.service';
+
+@Component({
+  selector: 'dd-toast-placeholder',
+  standalone: true,
+  template: ` <div #toastPlaceholder></div>
+    <div id="toast-overlay"></div>`,
+})
+export class ToastPlaceholderComponent {
+  @ViewChild('toastPlaceholder', { read: ViewContainerRef, static: true })
+  private viewContainerRef: ViewContainerRef | undefined;
+
+  constructor(private toastService: ToastService, private injector: Injector) {}
+
+  public ngOnInit() {
+    this.toastService.registerViewContainerRef(this.viewContainerRef!);
+    this.toastService.registerInjector(this.injector);
+  }
+}