@morozeckiy/dd-lib 0.1.1

package/assets/svg-icons/my-icons.model.ts

@@ -0,0 +1,146 @@
+/* 🤖 this file was generated by svg-to-ts */
+
+export type svgIcon =
+  | 'cheese_king'
+  | 'circle_dot'
+  | 'grid_dots'
+  | 'steam'
+  | 'paperclip'
+  | 'appgalery'
+  | 'appstore'
+  | 'google_app'
+  | 'rustore'
+  | 'badges'
+  | 'benefactors'
+  | 'burger'
+  | 'chart_bar'
+  | 'checkbox'
+  | 'crane'
+  | 'districts'
+  | 'grid'
+  | 'info_circle'
+  | 'info'
+  | 'logo'
+  | 'moneybag'
+  | 'moon'
+  | 'news'
+  | 'dd_m'
+  | 'dd'
+  | 'eds_m'
+  | 'eds'
+  | 'health_m'
+  | 'health'
+  | 'my_m'
+  | 'my'
+  | 'pgu_mo_m'
+  | 'pgu_mo'
+  | 'sun'
+  | 'trees'
+  | 'user'
+  | 'button_ok'
+  | 'button_tg'
+  | 'button_vk'
+  | 'check_list'
+  | 'minus'
+  | 'mobilr_qr'
+  | 'news_big'
+  | 'plus'
+  | 'rupor'
+  | 'shared_logo_d'
+  | 'shared_logo'
+  | 'solve_problem_exampe'
+  | 'users'
+  | 'circle_no'
+  | 'esia_icon'
+  | 'set_avatar'
+  | '404'
+  | 'actogone_accept'
+  | 'all'
+  | 'arrow_down_red'
+  | 'arrow_up_green'
+  | 'back_arrow'
+  | 'down_chevron'
+  | 'left_chevron'
+  | 'next'
+  | 'prev'
+  | 'right_chevron'
+  | 'calendar'
+  | 'check_green'
+  | 'check_white'
+  | 'clear'
+  | 'close'
+  | 'dobrodel'
+  | 'entry'
+  | 'error_hint'
+  | 'eye_off'
+  | 'eye'
+  | 'mail_exclamation'
+  | 'not_found'
+  | 'plug_d'
+  | 'plug'
+  | 'question_white_g'
+  | 'question'
+  | 'red_close'
+  | 'search'
+  | 'send'
+  | 'small_round_loader'
+  | 'sort'
+  | 'star'
+  | 'tg'
+  | 'trash'
+  | 'vk'
+  | 'danger_t'
+  | 'info_t'
+  | 'success_t'
+  | 'warning_t'
+  | 'award'
+  | 'bell'
+  | 'circles'
+  | 'is_esia'
+  | 'list_search'
+  | 'logout'
+  | 'news'
+  | 'pen_edit'
+  | 'user'
+  | 'trophy'
+  | 'user_empty'
+  | '404'
+  | 'actogone_accept'
+  | 'all'
+  | 'arrow_down_red'
+  | 'arrow_up_green'
+  | 'back_arrow'
+  | 'down_chevron'
+  | 'left_chevron'
+  | 'next'
+  | 'prev'
+  | 'right_chevron'
+  | 'calendar'
+  | 'check_green'
+  | 'check_white'
+  | 'clear'
+  | 'close'
+  | 'dobrodel'
+  | 'entry'
+  | 'error_hint'
+  | 'eye_off'
+  | 'eye'
+  | 'mail_exclamation'
+  | 'not_found'
+  | 'plug_d'
+  | 'plug'
+  | 'question_white_g'
+  | 'question'
+  | 'red_close'
+  | 'search'
+  | 'send'
+  | 'small_round_loader'
+  | 'sort'
+  | 'star'
+  | 'tg'
+  | 'trash'
+  | 'vk';
+export interface SvgIcon {
+  name: svgIcon;
+  data: string;
+}

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/dd-lib",
+  "assets": ["assets"],
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@morozeckiy/dd-lib",
+  "version": "0.1.1",
+  "license": "MIT",
+  "repository": "https://gitlab.com/Morozeckiy/dd-lib",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/common": "^17.3.0",
+    "@angular/core": "^17.3.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/lib/common/lib-common-button.ts

@@ -0,0 +1,34 @@
+import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+
+@Component({
+  template: '',
+})
+export abstract class LibCommonButtonComponent {
+  @Input() public width: string | undefined;
+  @Input() public height: string | undefined;
+  @Input() public size: 'md' | 'lg' | '' = '';
+  @Input() public fontSize: number | null | undefined;
+  @Input() public autofocus = false;
+  @Input() public btnColor: 'white' | 'green' | 'red' | 'transparent' | 'dark' = 'green';
+  @Input() public active = false;
+  @Input() public disabled: boolean | null = false;
+
+  @Input() public showLoader: null | boolean | undefined = false;
+  @Input() public buttonType: 'submit' | 'reset' | 'button' = 'button';
+
+  @ViewChild('contentData', { static: false }) public content: ElementRef | undefined;
+  @ViewChild('btn', { static: false }) public button: ElementRef | undefined;
+
+  @Output() public clickEvent = new EventEmitter<null>();
+
+  public onClick(event: Event): void {
+    if (this.disabled || this.showLoader || this.active) {
+      event.stopPropagation();
+      event.preventDefault();
+    } else {
+      this.clickEvent.emit();
+      const el = document.activeElement as HTMLElement;
+      el?.blur();
+    }
+  }
+}

package/src/lib/common/lib-common-input-text.ts

@@ -0,0 +1,154 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  forwardRef,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import { AbstractControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'dd-lib-common-input',
+  template: '',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => LibCommonInputTextComponent),
+      multi: true,
+    },
+  ],
+})
+export abstract class LibCommonInputTextComponent {
+  @ViewChild('searchInput') protected inputSearchElement: ElementRef<HTMLInputElement> | undefined;
+  @ViewChild('input') protected inputElement: ElementRef<HTMLInputElement> | undefined;
+  @ViewChild('textarea') protected textAreaElement: ElementRef<HTMLTextAreaElement> | undefined;
+  @Input() public name: string | undefined;
+  @Input() public label: string | undefined;
+  @Input() public formControlName: string | undefined;
+  @Input() public type: 'password' | 'email' | 'number' | 'text' | undefined;
+  @Input() public contextClass: string | undefined; // класс разметки для deep стилей
+  @Input() public minlength: string | number | undefined;
+  @Input() public maxlength = 700;
+  @Input() public placeholder?: string;
+  @Input() public autocomplete?: string;
+  @Input() public tabIndex?: string | number;
+  @Input() public readOnly?: boolean;
+  @Input() public required = false;
+  @Input() public disabled = false;
+  @Input() public commitOnInput = true; // коммитить по input или по change
+  @Input() public clearable = false;
+  @Input() public uppercase = false;
+  @Input() public invalid = false;
+  @Input() public errorText: string | undefined;
+  @Output() public cleared = new EventEmitter<void>();
+  @Output() public focus = new EventEmitter<any>();
+  @Output() public blur = new EventEmitter<any>();
+  public get id() {
+    return this._ID;
+  }
+  public focused = false;
+  public touched = false;
+  public control: AbstractControl | undefined | null;
+  public value: string | undefined = '';
+  public changeDetection: ChangeDetectorRef;
+
+  protected destroyed = false;
+  protected onTouchedCallback: (() => void) | undefined;
+  private _ID = '';
+
+  protected constructor(changeDetection: ChangeDetectorRef) {
+    this.changeDetection = changeDetection;
+  }
+
+  public handleInput(_e: Event): void {
+    if (this.commitOnInput) {
+      this.commit(this.value);
+    }
+  }
+
+  public notifyFocusEvent(e: Event): void {
+    // this.focusManager.notifyFocusMayChanged(this, e.type === 'focus');
+  }
+
+  // public writeValue(value: string | number | null): void {
+  //   this.value = value === null || value === undefined ? '' : '' + value;
+  //   if (!this.destroyed) {
+  //     this.changeDetection.detectChanges();
+  //   }
+  // }
+
+  // public clearValue(e: Event): void {
+  //   if (!this.disabled) {
+  //     this.writeValue(null);
+  //     this.commit(null);
+  //     this.cleared.emit();
+  //     this.returnFocus(e);
+  //   }
+  //   e.stopPropagation();
+  // }
+
+  public handleBlur(): void {
+    this.focused = false;
+    if (this.onTouchedCallback) {
+      this.onTouchedCallback();
+    }
+
+    this.blur.emit();
+    this.changeDetection.detectChanges();
+  }
+
+  public handleFocus(): void {
+    this.focused = this.touched = true;
+    if (this.onTouchedCallback) {
+      this.onTouchedCallback();
+    }
+    this.focus.emit();
+  }
+
+  public returnFocus(e?: Event): void {
+    if (
+      this.inputElement &&
+      this.inputElement.nativeElement &&
+      (!e || e.target !== this.inputElement.nativeElement)
+    ) {
+      this.inputElement.nativeElement.focus();
+      // HelperService.resetSelection(this.inputElement.nativeElement);
+    }
+  }
+
+  public loseFocus(): void {
+    this.inputElement?.nativeElement.blur();
+  }
+
+  public forceChange(): void {
+    if (this.inputElement) {
+      // this.inputElement.nativeElement.dispatchEvent(HelperService.createEvent('change', true, false));
+    }
+  }
+
+  public registerOnChange(fn: any): void {
+    this.commit = fn;
+  }
+
+  public registerOnTouched(fn: any): void {
+    this.onTouchedCallback = fn;
+  }
+
+  public setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    if (!this.destroyed) {
+      this.changeDetection.detectChanges();
+    }
+  }
+
+  public handleChange(): void {
+    if (!this.commitOnInput) {
+      this.commit(this.value);
+    }
+  }
+
+  public commit(_value: string | null | undefined): void {}
+}

package/src/lib/core/dialog/dialog-config.ts

@@ -0,0 +1,19 @@
+import { InjectionToken, ViewContainerRef } from '@angular/core';
+
+export const DIALOG_CONFIG = new InjectionToken<DialogConfig>('Default options');
+
+export class DialogConfig<D = any> {
+  public hasBackdrop = true;
+  public backdropClass = 'modal-overlay';
+  public dialogClass = '';
+  public closeOnBackdropClick = true;
+  public closeOnEsc = true;
+  public hasScroll = false;
+  public autoFocus = true;
+  public viewContainerRef: ViewContainerRef | undefined;
+  public context: D | undefined;
+
+  constructor(config: Partial<DialogConfig>) {
+    Object.assign(this, config);
+  }
+}

package/src/lib/core/dialog/dialog-container.component.ts

@@ -0,0 +1,38 @@
+import { Component, ComponentRef, ElementRef, EmbeddedViewRef, ViewChild } from '@angular/core';
+import { CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
+import { DialogConfig } from './dialog-config';
+import { FocusTrap, FocusTrapFactory } from '@angular/cdk/a11y';
+
+@Component({
+  selector: 'dd-dialog-container',
+  standalone: true,
+  imports: [CdkPortalOutlet],
+  template: '<ng-template cdkPortalOutlet></ng-template>',
+})
+export class DialogContainerComponent {
+  @ViewChild(CdkPortalOutlet, { static: true }) public portalOutlet: CdkPortalOutlet | undefined;
+
+  protected focusTrap: FocusTrap | undefined;
+
+  constructor(
+    protected config: DialogConfig,
+    protected elementRef: ElementRef,
+    protected focusTrapFactory: FocusTrapFactory,
+  ) {}
+
+  public ngOnInit(): void {
+    if (this.config.autoFocus) {
+      this.focusTrap = this.focusTrapFactory.create(this.elementRef.nativeElement);
+      // this.focusTrap.blurPreviouslyFocusedElement();
+      this.focusTrap.focusInitialElement();
+    }
+  }
+
+  public attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {
+    return this.portalOutlet!.attachComponentPortal(portal);
+  }
+
+  public attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C> {
+    return this.portalOutlet!.attachTemplatePortal(portal);
+  }
+}

package/src/lib/core/dialog/dialog-ref.ts

@@ -0,0 +1,28 @@
+import { ComponentRef } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { OverlayRef } from '@angular/cdk/overlay';
+
+export class DDDialogRef<T> {
+  public componentRef: ComponentRef<T> | undefined;
+
+  /**
+   * Stream of backdrop click events.
+   * */
+  public readonly onBackdropClick: Observable<MouseEvent>;
+  protected onClose$: Subject<any> = new Subject();
+  public readonly onClose: Observable<any> = this.onClose$.asObservable();
+
+  constructor(protected overlayRef: OverlayRef) {
+    this.onBackdropClick = this.overlayRef.backdropClick();
+  }
+
+  /**
+   * Hides dialog.
+   * */
+  public close(res?: any) {
+    this.overlayRef.detach();
+    this.overlayRef.dispose();
+    this.onClose$.next(res);
+    this.onClose$.complete();
+  }
+}

package/src/lib/core/dialog/dialog.service.ts

@@ -0,0 +1,144 @@
+import {
+  ComponentFactoryResolver,
+  Inject,
+  Injectable,
+  Injector,
+  TemplateRef,
+  Type,
+  ViewContainerRef,
+} from '@angular/core';
+import { DDDialogRef as DialogRef } from './dialog-ref';
+import { DIALOG_CONFIG, DialogConfig } from './dialog-config';
+import { DOCUMENT } from '@angular/common';
+import {
+  GlobalPositionStrategy,
+  Overlay,
+  OverlayRef,
+  PositionStrategy,
+  ScrollStrategy,
+} from '@angular/cdk/overlay';
+import { ComponentPortal, PortalInjector, TemplatePortal } from '@angular/cdk/portal';
+import { DialogContainerComponent } from './dialog-container.component';
+import { fromEvent } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
+
+@Injectable({ providedIn: 'root' })
+export class DialogService {
+  public dialogRef: DialogRef<any> | undefined;
+
+  constructor(
+    @Inject(DOCUMENT) protected document: Document,
+    @Inject(DIALOG_CONFIG) protected globalConfig: DialogConfig,
+    protected overlay: Overlay,
+    protected injector: Injector,
+    protected cfr: ComponentFactoryResolver,
+  ) {}
+
+  public open<T, R = any>(
+    content: Type<T> | TemplateRef<T>,
+    userConfig: Partial<DialogConfig<Partial<R> | string>> = {},
+  ): DialogRef<T> {
+    const config = new DialogConfig({ ...this.globalConfig, ...userConfig });
+    const overlayRef = this.createOverlay(config);
+    const dialogRef = new DialogRef<T>(overlayRef);
+    this.dialogRef = dialogRef;
+    const container = this.createContainer(config, overlayRef);
+    this.createContent(config, content, container, dialogRef);
+
+    this.registerCloseListeners(config, overlayRef, dialogRef);
+
+    return dialogRef;
+  }
+
+  protected createOverlay(config: DialogConfig): OverlayRef {
+    const positionStrategy = this.createPositionStrategy();
+    const scrollStrategy = this.createScrollStrategy(config.hasScroll);
+
+    return this.overlay.create({
+      positionStrategy,
+      scrollStrategy,
+      hasBackdrop: config.hasBackdrop,
+      backdropClass: config.backdropClass,
+      panelClass: config.dialogClass,
+    });
+  }
+
+  protected createPositionStrategy(): PositionStrategy {
+    return new GlobalPositionStrategy().centerVertically().centerHorizontally();
+  }
+
+  protected createScrollStrategy(hasScroll: boolean): ScrollStrategy {
+    if (hasScroll) {
+      return this.overlay.scrollStrategies.noop();
+    } else {
+      return this.overlay.scrollStrategies.block();
+    }
+  }
+
+  protected createContainer(config: DialogConfig, overlayRef: OverlayRef): DialogContainerComponent {
+    const injector = new PortalInjector(this.createInjector(config), new WeakMap([[DialogConfig, config]]));
+    const containerPortal = new ComponentPortal(DialogContainerComponent, null, injector, this.cfr);
+    const containerRef = overlayRef.attach(containerPortal);
+    return containerRef.instance;
+  }
+
+  protected createInjector(config: DialogConfig): Injector {
+    return (config.viewContainerRef && config.viewContainerRef.injector) || this.injector;
+  }
+
+  protected createContent<T>(
+    config: DialogConfig,
+    content: Type<T> | TemplateRef<T>,
+    container: DialogContainerComponent,
+    dialogRef: DialogRef<T>,
+  ) {
+    if (content instanceof TemplateRef) {
+      const portal = this.createTemplatePortal(config, content, dialogRef);
+      container.attachTemplatePortal(portal);
+    } else {
+      const portal = this.createComponentPortal(config, content, dialogRef);
+      dialogRef.componentRef = container.attachComponentPortal(portal);
+
+      if (config.context) {
+        Object.assign(dialogRef.componentRef.instance as any, { ...config.context });
+      }
+    }
+  }
+
+  protected createTemplatePortal<T>(
+    config: DialogConfig,
+    content: TemplateRef<T>,
+    dialogRef: DialogRef<T>,
+  ): TemplatePortal {
+    return new TemplatePortal(
+      content,
+      {} as ViewContainerRef,
+      { $implicit: config.context, dialogRef } as any,
+    );
+  }
+
+  protected createComponentPortal<T>(
+    config: DialogConfig,
+    content: Type<T>,
+    dialogRef: DialogRef<T>,
+  ): ComponentPortal<T> {
+    const injector = this.createInjector(config);
+    const portalInjector = new PortalInjector(injector, new WeakMap([[DialogRef, dialogRef]]));
+    return new ComponentPortal(content, config.viewContainerRef, portalInjector);
+  }
+
+  protected registerCloseListeners<T>(config: DialogConfig, overlayRef: OverlayRef, dialogRef: DialogRef<T>) {
+    if (config.closeOnBackdropClick) {
+      overlayRef.backdropClick().subscribe(() => dialogRef.close());
+    }
+
+    if (config.closeOnEsc) {
+      fromEvent<KeyboardEvent>(this.document, 'keyup')
+        .pipe(
+          filter((event: KeyboardEvent) => event.keyCode === 27),
+          takeUntil(dialogRef.onClose),
+        )
+        .subscribe(() => dialogRef.close());
+    }
+  }
+}

package/src/lib/core/directives/auto-height.directive.ts

@@ -0,0 +1,29 @@
+import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[ddAutoHeight]',
+  standalone: true,
+})
+export class AutoHeightDirective implements OnInit {
+  // уровень до родителя
+  @Input() public ddAutoHeight: number | undefined;
+
+  constructor(private el: ElementRef, private rdr: Renderer2) {}
+
+  public ngOnInit(): void {
+    setTimeout(() => {
+      if (this.ddAutoHeight) {
+        let i = 1;
+        let parent: any;
+        while (i <= this.ddAutoHeight) {
+          parent = parent ? parent.parentNode : this.el.nativeElement.parentNode;
+          i++;
+        }
+        const height = parent.clientHeight;
+        if (height) {
+          this.rdr.setStyle(this.el.nativeElement, 'height', height + 'px');
+        }
+      }
+    }, 0);
+  }
+}

package/src/lib/core/directives/click-outside.directive.ts

@@ -0,0 +1,33 @@
+import { Directive, ElementRef, EventEmitter, HostListener, Input, Output } from '@angular/core';
+
+@Directive({
+  standalone: true,
+  selector: '[ddClickOutside]',
+})
+export class ClickOutsideDirective {
+  @Input() public elements!: string[] | undefined;
+  @Output() public ddClickOutside = new EventEmitter();
+
+  constructor(private el: ElementRef) {}
+
+  @HostListener('document:click', ['$event'])
+  public onClick(targetElement: Event) {
+    let clickedElemInside = false;
+    if (this.elements?.length) {
+      this.elements.forEach(el => {
+        if (el) {
+          const elem = document.getElementById(el) as any;
+          if (elem && !clickedElemInside) {
+            clickedElemInside = elem.contains(targetElement.target);
+          }
+        }
+      });
+    }
+
+    const clickedInside = this.el.nativeElement.contains(targetElement.target);
+
+    if (!clickedElemInside) {
+      this.ddClickOutside.emit(clickedInside);
+    }
+  }
+}