@morozeckiy/dd-lib 0.1.1

package/src/lib/core/services/theme-constructor.service.ts

@@ -0,0 +1,68 @@
+import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ThemeConstructorService {
+  public get getTheme(): boolean {
+    return this.themeConfigurator.theme;
+  }
+  public isDarkTheme!: Observable<boolean>;
+  private readonly renderer: Renderer2;
+  private themeConfigurator!: ThemeConfigurator;
+
+  constructor(private rendererFactory: RendererFactory2) {
+    this.renderer = rendererFactory.createRenderer(null, null);
+  }
+
+  public setThemeConfiguratorRoot(document: Document): void {
+    this.themeConfigurator = new ThemeConfigurator(document, this.renderer);
+    this.isDarkTheme = this.themeConfigurator.isDarkThemeObservable;
+  }
+
+  public changeTheme(darkMode: boolean): void {
+    this.themeConfigurator.setTheme(darkMode);
+  }
+
+  public switchTheme(): void {
+    this.themeConfigurator.switchTheme();
+  }
+}
+
+export class ThemeConfigurator {
+  public set theme(value: boolean) {
+    localStorage.setItem('theme', value.toString());
+    this.isDarkTheme$.next(value);
+  }
+
+  public get theme(): boolean {
+    return this.isDarkTheme$.getValue();
+  }
+
+  private isDarkTheme$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  public isDarkThemeObservable: Observable<boolean> = this.isDarkTheme$.asObservable();
+
+  constructor(private document: Document, private renderer: Renderer2) {
+    this.isDarkThemeObservable.subscribe(ref => this.setTheme(ref));
+    const theme = localStorage.getItem('theme');
+
+    if (!theme) {
+      this.theme = false;
+    } else {
+      this.theme = localStorage.getItem('theme') !== 'false';
+    }
+  }
+
+  public switchTheme(): void {
+    this.theme = !this.theme;
+  }
+
+  public setTheme(isDarkMode: boolean): void {
+    if (!this.document) {
+      return;
+    }
+    const hostClass = isDarkMode ? 'theme-dark' : 'theme-light';
+    this.renderer.setAttribute(this.document.body, 'class', hostClass);
+  }
+}

package/src/lib/core/services/validators.service.ts

@@ -0,0 +1,73 @@
+import { Injectable } from '@angular/core';
+import { AbstractControl, ValidationErrors, Validators } from '@angular/forms';
+import { Observable, of } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class ValidatorsService {
+  constructor() {}
+
+  /** валидатор совпадения пароллей. При использовании указывать поля pswd & confPswd*/
+  public static passEqual(el: AbstractControl): ValidationErrors | null {
+    if (!el.get('pswd') || !el.get('oldPswd')) {
+      return null;
+    }
+    if (!(el.dirty || el.touched) || el.get('pswd')?.value === el.get('confPswd')?.value) {
+      return null;
+    }
+    return {
+      passEqual: 'Пароли не совпадают',
+    };
+  }
+
+  public static passNotEqual(el: AbstractControl): ValidationErrors | null {
+    if (!el.get('pswd') || !el.get('oldPswd')) {
+      return null;
+    }
+    if (!(el.dirty || el.touched) || el.get('pswd')?.value !== el.get('oldPswd')?.value) {
+      return null;
+    }
+    return {
+      passNotEqual: 'Старый и новый пароли не должны совпадать',
+    };
+  }
+
+  public static wrongLogin(): ValidationErrors {
+    return {
+      wrongMail: 'Неверный логин!',
+    };
+  }
+
+  public static wrongLoginOrPswd(): ValidationErrors {
+    return {
+      wrongLogin: 'Неверный логин или пароль!',
+    };
+  }
+
+  public static existLogin(): ValidationErrors {
+    return {
+      mailErr: 'Пользователь с таким адресом уже зарегистрирован.',
+    };
+  }
+
+  /** валидатор имени*/
+  public static getNameValid() {
+    return [Validators.required, Validators.pattern(/^[A-ZА-Яa-zа-яЁё0-9- .]+$/), Validators.maxLength(35)];
+  }
+
+  /** валидатор email*/
+  public static getMailValid(el?: AbstractControl): Observable<ValidationErrors | null> {
+    const pattern =
+      /^([A-Za-z0-9+_-]+\.)*[A-Za-z0-9+_-]+@[A-Za-z0-9+_-]+(\.[A-Za-z0-9+_-]+)*\.[A-Za-z]{2,6}$/;
+    if (!el?.value) {
+      return of({
+        required: 'Это поле обязательно для заполнения',
+      });
+    } else if (!pattern.test(el.value) && el.value !== 'test_admin' && el.value !== 'admin') {
+      return of({
+        email: 'Некорректно введены данные',
+      });
+    } else {
+      return of(null);
+    }
+  }
+}

package/src/lib/core/tools.ts

@@ -0,0 +1,159 @@
+export function compare(field?: any, order?: number, ...args: undefined[]): any {
+  let len = args.length;
+  if (len === 0) {
+    return (a: number, b: number) => (a < b && -1) || (a > b && 1) || 0;
+  }
+  if (len === 1) {
+    switch (typeof field) {
+      case 'number':
+        return field < 0
+          ? (a: number, b: number) => (a < b && 1) || (a > b && -1) || 0
+          : (a: number, b: number) => (a < b && -1) || (a > b && 1) || 0;
+      case 'string':
+        return (a: { [x: string]: string }, b: { [x: string]: string }) =>
+          (a[field] ? a[field].toLowerCase() : '' < b[field] ? b[field].toLowerCase() : '' && -1) ||
+          (a[field] ? a[field].toLowerCase() : '' > b[field] ? b[field].toLowerCase() : '' && 1) ||
+          0;
+    }
+  }
+  if (field && len === 2 && typeof order === 'number') {
+    return order < 0
+      ? (
+          a: { [x: string]: any },
+          b: {
+            [x: string]: any;
+          },
+        ) => (b[field] || '').toLowerCase().localeCompare((a[field] || '').toLowerCase())
+      : (
+          a: { [x: string]: any },
+          b: {
+            [x: string]: any;
+          },
+        ) => (a[field] || '').toLowerCase().localeCompare((b[field] || '').toLowerCase());
+  }
+  let fields: any[];
+  let orders: any[];
+  if (typeof field === 'object') {
+    fields = Object.getOwnPropertyNames(field);
+    orders = fields.map(key => field[key]);
+    len = fields.length;
+  } else {
+    fields = new Array(len);
+    orders = new Array(len);
+    for (let i = len; i--; ) {
+      fields[i] = args[i];
+      orders[i] = 1;
+    }
+  }
+  return (
+    a: { [x: string]: { toLowerCase: () => number } },
+    b: { [x: string]: { toLowerCase: () => number } },
+  ) => {
+    for (let i = 0; i < len; i++) {
+      if (a[fields[i]].toLowerCase() < b[fields[i]].toLowerCase()) {
+        return orders[i];
+      }
+      if (a[fields[i]].toLowerCase() > b[fields[i]].toLowerCase()) {
+        return -orders[i];
+      }
+    }
+    return 0;
+  };
+}
+
+// export function parseDate(value) {
+//     if (value && value.length === 6) {
+//         const year = parseInt(value.slice(2, 6), 10);
+//         const month = parseInt(value.slice(0, 2), 10) - 1;
+//         return new Date(year, month);
+//     }
+// }
+
+export function rndRgb() {
+  const x = Math.floor(Math.random() * 256);
+  const y = Math.floor(Math.random() * 256);
+  const z = Math.floor(Math.random() * 256);
+  return 'rgb(' + x + ',' + y + ',' + z + ')';
+}
+
+export function setMinDate() {
+  let curYear = new Date().getFullYear();
+  let curMonth = new Date().getMonth();
+  const curDay = new Date().getDate();
+  if (curMonth < 6) {
+    curYear -= 1;
+    curMonth = curMonth - 6 + 12;
+  } else {
+    curMonth -= 6;
+  }
+  return new Date(curYear, curMonth, curDay);
+}
+
+export function isNil(value: any): value is null | undefined {
+  return value === null || typeof value === 'undefined';
+}
+
+export function isString(value: any): value is string {
+  return typeof value === 'string';
+}
+
+export function isObject(value: any): boolean {
+  return value !== null && typeof value === 'object';
+}
+
+export function getProperty(value: { [key: string]: any }, key: string): any {
+  if (isNil(value) || !isObject(value)) {
+    return undefined;
+  }
+
+  const keys: string[] = key.split('.');
+  let result: any = value[keys.shift()!];
+
+  for (const k of keys) {
+    if (isNil(result) || !isObject(result)) {
+      return undefined;
+    }
+
+    result = result[k];
+  }
+
+  return result;
+}
+
+export function isMobile() {
+  return Android() || BlackBerry() || iOS() || Opera() || Windows();
+}
+
+export function Android() {
+  return !!navigator.userAgent.match(/Android/i);
+}
+
+export function BlackBerry() {
+  return !!navigator.userAgent.match(/BlackBerry/i);
+}
+
+export function iOS() {
+  return !!navigator.userAgent.match(/iPhone|iPad|iPod/i);
+}
+
+export function Opera() {
+  return !!navigator.userAgent.match(/Opera Mini/i);
+}
+
+export function Windows() {
+  return !!navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
+}
+
+export function dataURLtoFile(dataUrl: string, filename: string) {
+  const arr = dataUrl.split(',');
+  const mime = (arr as any)[0].match(/:(.*?);/)[1];
+  const bstr = atob(arr[1]);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+
+  return new File([u8arr], filename, { type: mime });
+}

package/src/lib/core/tooltip/tooltip.component.html

@@ -0,0 +1,10 @@
+<div class="tooltip-container">
+  @if (asString; as string) {
+  {{ string }}
+  } @if (asTemplate; as template) {
+  <ng-template [ngTemplateOutlet]="template"></ng-template>
+  }
+  <svg class="tooltip-container__triangle" width="16" height="16">
+    <polyline points="8,0 0,8 8,16"></polyline>
+  </svg>
+</div>

package/src/lib/core/tooltip/tooltip.component.scss

@@ -0,0 +1,59 @@
+:host {
+  position: relative;
+}
+
+.tooltip-container {
+  position: relative;
+  display: block;
+  max-width: 312px;
+  padding: 6px 12px 6px 12px;
+  background: var(--white-color);
+  border-radius: 8px;
+  box-sizing: border-box;
+  box-shadow: 0 14px 64px -4px #18274b0f, 0px 8px 22px -6px #18274b0f;
+
+  &__triangle {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    fill: rgb(255, 255, 255);
+    stroke: rgb(255, 255, 255);
+    box-shadow: rgba(24, 39, 75, 0.06) 0 14px 64px -4px, rgba(24, 39, 75, 0.06) 0px 8px 22px -6px;
+  }
+}
+
+:host-context(.left) {
+  //left: -35px;
+
+  svg {
+    top: calc(50% - 8px);
+    right: -8px;
+    rotate: 180deg;
+  }
+}
+
+:host-context(.right) {
+  //right: -35px;
+  svg {
+    top: calc(50% - 8px);
+    left: -8px;
+  }
+}
+
+:host-context(.top) {
+  //margin-bottom: 16px;
+  svg {
+    right: calc(50% - 8px);
+    bottom: -8px;
+    rotate: -90deg;
+  }
+}
+
+:host-context(.bottom) {
+  //margin-top: 16px;
+  svg {
+    right: calc(50% - 8px);
+    top: -8px;
+    rotate: 90deg;
+  }
+}

package/src/lib/core/tooltip/tooltip.component.ts

@@ -0,0 +1,27 @@
+import {ChangeDetectionStrategy, Component, Inject, InjectionToken, TemplateRef} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {TriangleDirective} from "../directives/triangle.directive";
+
+export type TooltipData = string | TemplateRef<void>;
+export const TOOLTIP_DATA = new InjectionToken<TooltipData>('Подсказка');
+
+@Component({
+  selector: 'dd-tooltip',
+  standalone: true,
+  imports: [CommonModule, TriangleDirective],
+  templateUrl: './tooltip.component.html',
+  styleUrl: './tooltip.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TooltipComponent {
+  public get asString(): string | false {
+    return typeof this.tooltipData === 'string' ? this.tooltipData : false;
+  }
+
+  public get asTemplate(): TemplateRef<void> | false {
+    return this.tooltipData instanceof TemplateRef ? this.tooltipData : false;
+  }
+
+  constructor(@Inject(TOOLTIP_DATA) public tooltipData: TooltipData) {
+  }
+}

package/src/lib/core/tooltip/tooltip.directive.ts

@@ -0,0 +1,137 @@
+import {
+  Directive,
+  ElementRef,
+  HostListener,
+  Injector,
+  Input,
+  OnDestroy,
+  Renderer2,
+  TemplateRef,
+  ViewContainerRef,
+} from '@angular/core';
+import { Overlay, OverlayRef, PositionStrategy } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { TOOLTIP_DATA, TooltipComponent } from './tooltip.component';
+
+@Directive({
+  selector: '[ddTooltip]',
+  standalone: true,
+})
+export class TooltipDirective implements OnDestroy {
+  @Input() public ddTooltip!: string | TemplateRef<void>;
+  @Input() public withClick = false;
+  private overlayRef: OverlayRef | null = null;
+
+  constructor(
+    private element: ElementRef,
+    private overlay: Overlay,
+    private viewContainer: ViewContainerRef,
+    private rdr: Renderer2,
+  ) {}
+
+  @HostListener('document:click', ['$event'])
+  public onClick(targetElement: Event) {
+    const clickedInside = this.element.nativeElement.contains(targetElement.target);
+
+    if (!clickedInside) {
+      if (this.overlayRef?.hasAttached() === true) {
+        this.overlayRef?.detach();
+      }
+    }
+  }
+
+  @HostListener('click')
+  public showTooltipOnClick(): void {
+    const overlay = document.getElementsByClassName('cdk-overlay-container')?.[0];
+    if (overlay && overlay.firstChild) {
+      overlay.removeChild(overlay.firstChild);
+    }
+    if (this.overlayRef?.hasAttached() === true) {
+      this.overlayRef?.detach();
+      return;
+    }
+
+    this.attachTooltip();
+  }
+
+  @HostListener('mouseenter')
+  @HostListener('focus')
+  public showTooltip(): void {
+    if (this.withClick) {
+      return;
+    }
+    if (this.overlayRef?.hasAttached() === true) {
+      return;
+    }
+
+    this.attachTooltip();
+  }
+
+  @HostListener('mouseleave')
+  @HostListener('blur')
+  public hideTooltip(): void {
+    if (this.withClick) {
+      return;
+    }
+    if (this.overlayRef?.hasAttached() === true) {
+      this.overlayRef?.detach();
+    }
+  }
+
+  public ngOnDestroy(): void {
+    this.overlayRef?.dispose();
+  }
+
+  private attachTooltip(): void {
+    if (this.overlayRef === null) {
+      const positionStrategy = this.getPositionStrategy();
+      this.overlayRef = this.overlay.create({ positionStrategy });
+    }
+    const injector = Injector.create({
+      providers: [
+        {
+          provide: TOOLTIP_DATA,
+          useValue: this.ddTooltip,
+        },
+      ],
+    });
+    const component = new ComponentPortal(TooltipComponent, this.viewContainer, injector);
+    this.overlayRef.attach(component);
+  }
+
+  private getPositionStrategy(): PositionStrategy {
+    return this.overlay
+      .position()
+      .flexibleConnectedTo(this.element)
+      .withPositions([
+        {
+          originX: 'start',
+          originY: 'center',
+          overlayX: 'start',
+          overlayY: 'center',
+          panelClass: 'right',
+        },
+        {
+          originX: 'center',
+          originY: 'bottom',
+          overlayX: 'center',
+          overlayY: 'top',
+          panelClass: 'bottom',
+        },
+        {
+          originX: 'center',
+          originY: 'top',
+          overlayX: 'center',
+          overlayY: 'bottom',
+          panelClass: 'top',
+        },
+        {
+          originX: 'end',
+          originY: 'center',
+          overlayX: 'end',
+          overlayY: 'center',
+          panelClass: 'left',
+        },
+      ]);
+  }
+}

package/src/lib/core/utils.ts

@@ -0,0 +1,28 @@
+export function isMobile() {
+  return Android() || BlackBerry() || iOS() || Opera() || Windows();
+}
+
+export function Android() {
+  return !!navigator.userAgent.match(/Android/i);
+}
+
+export function BlackBerry() {
+  return !!navigator.userAgent.match(/BlackBerry/i);
+}
+
+export function iOS() {
+  return !!navigator.userAgent.match(/iPhone|iPad|iPod/i);
+}
+
+export function Opera() {
+  return !!navigator.userAgent.match(/Opera Mini/i);
+}
+
+export function Windows() {
+  return !!navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
+}
+
+export const objConverting = ([name, data]: [string, string]) => ({ name, data });
+
+export const iconsToArray = (obj: { [key: string]: string }): { name: string, data: string }[] =>
+  Object.entries(obj).map(objConverting);

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

@@ -0,0 +1,15 @@
+<div class="accordion">
+  <div (click)="showAccordionContent = !showAccordionContent" class="accordion__header">
+    @if (accTitle) {
+    <div [innerHTML]="accTitle" class="accordion__title"></div>
+    }
+    <div>
+      <dd-lib-svg-icon class="cup" icon="{{ showAccordionContent ? 'minus' : 'plus' }}"></dd-lib-svg-icon>
+    </div>
+  </div>
+  @if (showAccordionContent) {
+  <div class="mt-8">
+    <ng-content></ng-content>
+  </div>
+  }
+</div>

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

@@ -0,0 +1,23 @@
+//@import '../../../assets/scss/mixins';
+//@import '../../../assets/scss/vars';
+//
+//.accordion {
+//  &__header {
+//    display: flex;
+//    align-items: center;
+//    justify-content: space-between;
+//    cursor: pointer;
+//  }
+//
+//  &__title {
+//    font-weight: 500;
+//    font-size: 20px;
+//    line-height: 28px;
+//    color: var(--light-black-color);
+//
+//    @include below($mobile) {
+//      font-size: 16px;
+//      line-height: 24px;
+//    }
+//  }
+//}

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

@@ -0,0 +1,17 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {NgOptimizedImage} from '@angular/common';
+import {SafeHtml} from '@angular/platform-browser';
+import {LibSvgIconComponent} from "../lib-svg-icon/lib-svg-icon.component";
+
+@Component({
+  selector: 'dd-lib-accordion',
+  standalone: true,
+  imports: [NgOptimizedImage, LibSvgIconComponent],
+  templateUrl: './lib-accordion.component.html',
+  styleUrl: './lib-accordion.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LibAccordionComponent {
+  @Input() public accTitle: string | SafeHtml | undefined;
+  public showAccordionContent: boolean | undefined;
+}

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

@@ -0,0 +1,4 @@
+<div (click)="onBack()" class="mr-8 align-center cup d-inline-flex">
+  <dd-lib-svg-icon icon="back_arrow"></dd-lib-svg-icon>
+  <div class="b3-title gray cup">{{ backTitle }}</div>
+</div>

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,31 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {Location, NgOptimizedImage} from '@angular/common';
+import {Router} from '@angular/router';
+import {LibSvgIconComponent} from "../lib-svg-icon/lib-svg-icon.component";
+
+@Component({
+  selector: 'dd-lib-back-button',
+  standalone: true,
+  imports: [NgOptimizedImage, LibSvgIconComponent],
+  templateUrl: './lib-back-button.component.html',
+  styleUrl: './lib-back-button.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LibBackButtonComponent {
+  @Input() public backTitle = 'Назад';
+  @Input() public rout: string | undefined;
+
+  constructor(private location: Location, private router: Router) {}
+
+  public onBack(): void {
+    if (this.rout) {
+      this.router.navigate([this.rout]);
+    } else {
+      try {
+        this.location.back();
+      } catch (err) {
+        this.router.navigate(['/']);
+      }
+    }
+  }
+}