myrta-ui 17.0.18 → 17.0.20

package/src/lib/pipes/safe/safe.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SafePipe } from "./safe.pipe";
+
+
+
+@NgModule({
+  declarations: [SafePipe],
+  imports: [
+    CommonModule
+  ],
+  exports: [SafePipe]
+})
+export class SafeModule { }

package/src/lib/pipes/safe/safe.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from "@angular/platform-browser";
+
+@Pipe({
+  name: 'safe'
+})
+export class SafePipe implements PipeTransform {
+
+  constructor(private sanitizer:DomSanitizer){}
+
+  transform(html: any) {
+    return this.sanitizer.bypassSecurityTrustHtml(html);
+  }
+}

package/src/lib/pipes/truncate/truncate.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TruncatePipe } from './truncate.pipe';
+
+
+
+@NgModule({
+  declarations: [TruncatePipe],
+  imports: [
+    CommonModule
+  ],
+  exports: [TruncatePipe]
+})
+export class TruncateModule { }

package/src/lib/pipes/truncate/truncate.pipe.ts

@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'truncate'
+})
+
+export class TruncatePipe implements PipeTransform {
+
+  transform(value: string, args: any[]): string {
+    const limit = args.length > 0 ? parseInt(args[0], 10) : 20;
+    const trail = args.length > 1 ? args[1] : '...';
+
+    if (value) {
+      return value.length > limit ? value.substring(0, limit) + trail : value;
+    } else {
+      return ''
+    }
+  }
+}

package/src/lib/services/dialog/components/dialog/dialog.component.html

@@ -0,0 +1,7 @@
+<div class="overlay" (click)="onOverlayClicked($event)">
+  <div class="dialog" (click)="onDialogClicked($event)">
+    <ng-template appInsertion>
+
+    </ng-template>
+  </div>
+</div>

package/src/lib/services/dialog/components/dialog/dialog.component.less

@@ -0,0 +1,22 @@
+.overlay {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  align-items: center;
+  justify-content: center;
+}
+
+.dialog {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  background-color: white;
+  width: 50%;
+  height: 50%;
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+}

package/src/lib/services/dialog/components/dialog/dialog.component.ts

@@ -0,0 +1,55 @@
+import { Component, Type, ComponentFactoryResolver, ViewChild, OnDestroy, ComponentRef, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { Subject } from 'rxjs';
+import { InsertionDirective } from '../../directives/insertion.directive';
+import { DialogRef } from '../../utils/dialog-ref';
+
+@Component({
+  selector: 'app-dialog',
+  templateUrl: './dialog.component.html',
+  styleUrls: ['./dialog.component.less']
+})
+export class DialogComponent implements AfterViewInit, OnDestroy {
+  componentRef!: ComponentRef<any>;
+
+  @ViewChild(InsertionDirective)
+  insertionPoint!: InsertionDirective;
+
+  private readonly _onClose = new Subject<any>();
+  public onClose = this._onClose.asObservable();
+
+  childComponentType!: Type<any>;
+
+  constructor(private componentFactoryResolver: ComponentFactoryResolver, private cd: ChangeDetectorRef, private dialogRef: DialogRef) {}
+
+  ngAfterViewInit() {
+    this.loadChildComponent(this.childComponentType);
+    this.cd.detectChanges();
+  }
+
+  onOverlayClicked(evt: MouseEvent) {
+    this.dialogRef.close();
+  }
+
+  onDialogClicked(evt: MouseEvent) {
+    evt.stopPropagation();
+  }
+
+  loadChildComponent(componentType: Type<any>) {
+    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType);
+
+    let viewContainerRef = this.insertionPoint.viewContainerRef;
+    viewContainerRef.clear();
+
+    this.componentRef = viewContainerRef.createComponent(componentFactory);
+  }
+
+  ngOnDestroy() {
+    if (this.componentRef) {
+      this.componentRef.destroy();
+    }
+  }
+
+  close() {
+    this._onClose.next({});
+  }
+}

package/src/lib/services/dialog/dialog.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DialogComponent } from './components/dialog/dialog.component';
+import { InsertionDirective } from './directives/insertion.directive';
+import { DialogRef } from './utils/dialog-ref';
+
+
+
+@NgModule({
+  declarations: [DialogComponent, InsertionDirective],
+  imports: [
+    CommonModule
+  ],
+  providers: [DialogRef],
+  exports: [
+    DialogComponent
+  ]
+})
+export class DialogModule { }

package/src/lib/services/dialog/directives/insertion.directive.ts

@@ -0,0 +1,8 @@
+import { Directive, ViewContainerRef } from '@angular/core';
+
+@Directive({
+  selector: '[appInsertion]'
+})
+export class InsertionDirective {
+  constructor(public viewContainerRef: ViewContainerRef) {}
+}

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

@@ -0,0 +1,68 @@
+import {
+  Injectable,
+  ComponentFactoryResolver,
+  ApplicationRef,
+  Injector,
+  Type,
+  EmbeddedViewRef,
+  ComponentRef,
+  ViewContainerRef
+} from '@angular/core';
+import { DialogModule } from '../dialog.module';
+import { DialogComponent } from '../components/dialog/dialog.component';
+import { DialogConfig } from '../utils/dialog-config';
+import { DialogRef } from '../utils/dialog-ref';
+import { DialogInjector } from '../utils/dialog-injector';
+
+
+@Injectable({
+  providedIn: DialogModule
+})
+export class DialogService {
+  dialogComponentRef!: ComponentRef<DialogComponent>;
+
+  constructor(private componentFactoryResolver: ComponentFactoryResolver, private appRef: ApplicationRef, private injector: Injector, private viewContainerRef: ViewContainerRef) {}
+
+  public open(componentType: Type<any>, config: DialogConfig) {
+    const dialogRef = this.appendDialogComponentToBody(config);
+
+    this.dialogComponentRef.instance.childComponentType = componentType;
+
+    return dialogRef;
+  }
+
+  private appendDialogComponentToBody(config: DialogConfig) {
+    const map = new WeakMap();
+    map.set(DialogConfig, config);
+
+    const dialogRef = new DialogRef();
+    map.set(DialogRef, dialogRef);
+
+    const sub = dialogRef.afterClosed.subscribe(() => {
+      this.removeDialogComponentFromBody();
+      sub.unsubscribe();
+    });
+
+    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DialogComponent);
+    const componentRef = componentFactory.create(new DialogInjector(this.injector, map));
+    const component = this.viewContainerRef.createComponent(DialogComponent);
+
+    this.appRef.attachView(componentRef.hostView);
+
+    const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
+    document.body.appendChild(domElem);
+
+    this.dialogComponentRef = componentRef;
+
+    this.dialogComponentRef.instance.onClose.subscribe(() => {
+      this.removeDialogComponentFromBody();
+    });
+
+    return dialogRef;
+  }
+
+  private removeDialogComponentFromBody() {
+    this.appRef.detachView(this.dialogComponentRef.hostView);
+    this.dialogComponentRef.destroy();
+  }
+}

package/src/lib/services/dialog/utils/dialog-config.ts

@@ -0,0 +1,3 @@
+export class DialogConfig<D = any> {
+  data?: D;
+}

package/src/lib/services/dialog/utils/dialog-injector.ts

@@ -0,0 +1,17 @@
+import { Injector, Type, InjectionToken, InjectFlags } from '@angular/core';
+
+export class DialogInjector implements Injector {
+  constructor(private _parentInjector: Injector, private _additionalTokens: WeakMap<any, any>) {}
+
+  get<T>(token: Type<T> | InjectionToken<T>, notFoundValue?: T, flags?: InjectFlags): T;
+  // get<T>(token: Type<T> | InjectionToken<T>, notFoundValue?: T, options: InjectOptions & { optional?: false; }): T;
+  // @ts-ignore
+  get(token: any, notFoundValue?: any);
+  get(token: any, notFoundValue?: any, flags?: any) {
+    const value = this._additionalTokens.get(token);
+
+    if (value) return value;
+
+    return this._parentInjector.get<any>(token, notFoundValue);
+  }
+}

package/src/lib/services/dialog/utils/dialog-ref.ts

@@ -0,0 +1,12 @@
+import { Observable, Subject } from 'rxjs';
+
+export class DialogRef {
+  constructor() {}
+
+  close(result?: any) {
+    this._afterClosed.next(result);
+  }
+
+  private readonly _afterClosed = new Subject<any>();
+  afterClosed: Observable<any> = this._afterClosed.asObservable();
+}

package/src/lib/services/file-upload/file-upload.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpEvent } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { UploadedResultModel } from '../../models';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FileUploadService {
+
+  constructor(private http: HttpClient) {
+  }
+
+  upload(url: string, file: FormData): Observable<HttpEvent<UploadedResultModel>> {
+    return this.http.post<UploadedResultModel>(url, file, {
+      reportProgress: true,
+      observe: 'events'
+    });
+  }
+
+  delete(url: string): Observable<UploadedResultModel> {
+    return this.http.delete<UploadedResultModel>(url);
+  }
+}

package/src/lib/services/index.ts

@@ -0,0 +1,19 @@
+export * from './mrx-autosave/mrx-autosave.service';
+export * from './file-upload/file-upload.service';
+
+export * from './mrx-form-validator/mrx-form-validator';
+export * from './mrx-form-validator/models';
+
+export * from './save-store/save-store.module';
+export * from './save-store/store/selectors';
+export * from './save-store/store/actions';
+
+export * from './modal-service/modal-service.module';
+export * from './modal-service/models/modal-config.model';
+export * from './modal-service/modal-service.service';
+export * from './modal-service/helpers';
+
+export * from './toaster-service/toaster-service.module';
+export * from './toaster-service/toaster-service.service';
+export * from './toaster-service/models/toaster.model';
+export * from './toaster-service/config';

package/src/lib/services/modal-service/components/alert-modal/alert-modal.component.html

@@ -0,0 +1,20 @@
+<mrx-modal
+  [customClasses]="config.customClasses || ''"
+  [title]="model.title"
+  [message]="model.message"
+  [color]="config.color || 'default'"
+  size="small"
+  (close)="close()"
+  (ok)="ok()"
+>
+  <ng-template #footerContent>
+    <mrx-button
+      [type]="'primary'"
+      [size]="'medium'"
+      [color]="config.color || 'default'"
+      (click)="ok()"
+    >
+      {{ config.okText || 'Ок' }}
+    </mrx-button>
+  </ng-template>
+</mrx-modal>

package/src/lib/services/modal-service/components/alert-modal/alert-modal.component.ts

@@ -0,0 +1,47 @@
+import { Component, Inject } from '@angular/core';
+import { ModalServiceComponent } from '../../helpers/modal.component';
+import { ModalRef } from '../../helpers/modal-ref';
+import { MODAL_CONFIG, MODAL_DATA } from '../../helpers/modal-tokens';
+import { ModalModule } from '../../../../components/modal/modal.module';
+import { ModalCustomConfig } from '../../models/modal-config.model';
+import { ButtonModule } from '../../../../components/button/button.module';
+
+export interface DefaultAlertModalParams {
+  title: string;
+  message: string;
+}
+
+export type DefaultAlertModalResult = boolean | undefined
+
+@Component({
+  selector: 'mrx-default-alert-modal',
+  standalone: true,
+  imports: [
+    ModalModule,
+    ButtonModule
+  ],
+  templateUrl: './alert-modal.component.html',
+  styleUrl: './alert-modal.component.less'
+})
+export class AlertModalComponent extends ModalServiceComponent<DefaultAlertModalParams, DefaultAlertModalResult> {
+  model!: DefaultAlertModalParams;
+
+  constructor(
+    private dialogRef: ModalRef<DefaultAlertModalResult>,
+    @Inject(MODAL_DATA) data: DefaultAlertModalParams,
+    @Inject(MODAL_CONFIG) public config: ModalCustomConfig,
+  ) {
+    super();
+    this.model = data;
+    this.result = this.config.defaultValue || undefined
+  }
+
+  public ok() {
+    this.result = true
+    this.dialogRef.close(this.result);
+  }
+
+  public close() {
+    this.dialogRef.close(this.result);
+  }
+}

package/src/lib/services/modal-service/components/confirm-modal/confirm-modal.component.html

@@ -0,0 +1,29 @@
+<mrx-modal
+  [customClasses]="config.customClasses || ''"
+  [title]="model.title"
+  [message]="model.message"
+  [color]="config.color || 'default'"
+  size="small"
+  (close)="close()"
+  (ok)="ok()"
+>
+  <ng-template #footerContent>
+    <mrx-button
+      [customClasses]="'mr-3'"
+      [type]="'secondary'"
+      [size]="'medium'"
+      [color]="config.color || 'default'"
+      (click)="cancel()"
+    >
+      {{ config.cancelText || 'Отмена' }}
+    </mrx-button>
+    <mrx-button
+      [type]="'primary'"
+      [size]="'medium'"
+      [color]="config.color || 'default'"
+      (click)="ok()"
+    >
+      {{ config.okText || 'Сохранить' }}
+    </mrx-button>
+  </ng-template>
+</mrx-modal>

package/src/lib/services/modal-service/components/confirm-modal/confirm-modal.component.ts

@@ -0,0 +1,51 @@
+import { Component, Inject } from '@angular/core';
+import { ModalRef } from '../../helpers/modal-ref';
+import { MODAL_CONFIG, MODAL_DATA } from '../../helpers/modal-tokens';
+import { ModalCustomConfig } from '../../models/modal-config.model';
+import { ModalServiceComponent } from '../../helpers/modal.component';
+import { ButtonModule } from '../../../../components/button/button.module';
+import { ModalModule } from '../../../../components/modal/modal.module';
+
+export interface DefaultConfirmModalParams {
+  title: string;
+  message: string;
+}
+
+export type DefaultConfirmModalResult = boolean | undefined
+
+@Component({
+  selector: 'mrx-confirm-modal',
+  standalone: true,
+  imports: [
+    ButtonModule,
+    ModalModule
+  ],
+  templateUrl: './confirm-modal.component.html',
+  styleUrl: './confirm-modal.component.less'
+})
+export class ConfirmModalComponent extends ModalServiceComponent<DefaultConfirmModalParams, DefaultConfirmModalResult> {
+  model!: DefaultConfirmModalParams
+  constructor(
+    private dialogRef: ModalRef<DefaultConfirmModalResult>,
+    @Inject(MODAL_DATA) data: DefaultConfirmModalParams,
+    @Inject(MODAL_CONFIG) public config: ModalCustomConfig,
+  ) {
+    super();
+    this.model = data
+    this.result = this.config.defaultValue || undefined;
+  }
+
+  public ok() {
+    this.result = true
+    this.dialogRef.close(this.result)
+  }
+
+  cancel() {
+    this.result = false
+    this.dialogRef.close(this.result)
+  }
+
+  public close() {
+    this.dialogRef.close(this.result)
+  }
+}

package/src/lib/services/modal-service/helpers/index.ts

@@ -0,0 +1,4 @@
+export * from './modal-tokens';
+export * from './modal.component';
+export * from './modal-default-config';
+export * from './modal-ref';

package/src/lib/services/modal-service/helpers/modal-default-config.ts

@@ -0,0 +1,16 @@
+import { ModalConfig, ModalCustomConfig } from '../models/modal-config.model';
+
+export const defaultConfig: ModalConfig = {
+  closeOnEscape: false,
+  closeOnClickOutside: false,
+  panelClass: [],
+  hasBackdrop: true
+};
+
+export const defaultCustomConfig: ModalCustomConfig = {
+  color: 'default',
+  closeOnEscape: false,
+  closeOnClickOutside: false,
+  panelClass: [],
+  hasBackdrop: true
+};

package/src/lib/services/modal-service/helpers/modal-ref.ts

@@ -0,0 +1,36 @@
+import { OverlayRef } from '@angular/cdk/overlay';
+import { Subject, Observable, filter } from 'rxjs';
+import { ModalConfig } from '../models/modal-config.model';
+
+export class ModalRef<T1> {
+  private afterClosedSubject = new Subject<any>();
+
+  constructor(
+    private overlayRef: OverlayRef,
+    private config: ModalConfig
+  ) {
+    if (config.closeOnClickOutside) {
+      this.overlayRef.backdropClick().subscribe(() => {
+        this.close(undefined);
+      });
+    }
+
+    if (config.closeOnEscape) {
+      this.overlayRef.keydownEvents().pipe(
+        filter(event => event.key === 'Escape')
+      ).subscribe(() => {
+        this.close(undefined);
+      });
+    }
+  }
+
+  public close(result?: T1) {
+    this.overlayRef.dispose();
+    this.afterClosedSubject.next(result);
+    this.afterClosedSubject.complete();
+  }
+
+  public afterClosed(): Observable<T1> {
+    return this.afterClosedSubject.asObservable();
+  }
+}

package/src/lib/services/modal-service/helpers/modal-tokens.ts

@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+
+export const MODAL_DATA = new InjectionToken<any>('MODAL_DATA');
+export const MODAL_CONFIG = new InjectionToken<any>('MODAL_CONFIG');

package/src/lib/services/modal-service/helpers/modal.component.ts

@@ -0,0 +1,3 @@
+export class ModalServiceComponent<DataInput, DataOutput> {
+  result!: DataOutput;
+}

package/src/lib/services/modal-service/modal-service.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AlertModalComponent } from './components/alert-modal/alert-modal.component';
+import { ConfirmModalComponent } from './components/confirm-modal/confirm-modal.component';
+
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    AlertModalComponent,
+    ConfirmModalComponent
+  ]
+})
+export class ModalServiceModule { }