modal widjet

src/app/_modules/pages/sections/types/basic/cards/items/item/types/persons/cards-item-persons.component.html

@@ -5,4 +5,14 @@
 <div class="subtitle" *ngIf="position">{{position}}</div>
 <div class="phone" *ngIf="phone">{{phone}}</div>
 <div class="email" *ngIf="email">{{email}}</div>
+<div class="details" *ngIf="textOnly" (click)="showModal=true">...</div>
+<modal *ngIf="showModal" (close)="showModal=false">
+  <h4 header>{{name}}</h4>
+  <img  *ngIf="image?.links?.thumb" [src]="image?.links?.thumb" />
+  <div class="subtitle" *ngIf="position">{{position}}</div>
+  <div class="phone" *ngIf="phone">{{phone}}</div>
+  <div class="email" *ngIf="email">{{email}}</div>
+  <div [innerHtml]="html"></div>
+
+</modal>
 

src/app/_modules/pages/sections/types/basic/cards/items/item/types/persons/cards-item-persons.component.ts

@@ -8,6 +8,7 @@ import {ObjectsService} from "@app/_services";
 })
 export class CardsItemPersonsComponent {
   @Input() card: any;
+  public showModal = false;
 
   constructor(private objectsService: ObjectsService) {
   }
@@ -27,6 +28,13 @@ export class CardsItemPersonsComponent {
   get email() {
     return this.objectsService.getValue(this.card, 'contact-email');
   }
+  get html() {
+    return this.objectsService.getValue(this.card, 'html');
+  }
+
+  get textOnly(){
+    return this.html.replace(/<[^>]*>?/gm, '').replace(/\s/g, "").replace(/\&nbsp;/gm,'');
+  }
 
   ngOnInit() {
   }

src/app/_modules/widget/modal/modal.component.html

@@ -0,0 +1 @@
+<p>modal works!</p>

src/app/_modules/widget/modal/modal.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalComponent } from './modal.component';
+
+describe('ModalComponent', () => {
+  let component: ModalComponent;
+  let fixture: ComponentFixture<ModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ModalComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/_modules/widget/modal/modal.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-modal',
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.scss']
+})
+export class ModalComponent {
+
+}

src/app/_modules/widjet/modal/modal.component.html

@@ -0,0 +1,15 @@
+<div class="modal-overlay" (click)="cls()">
+
+</div>
+<div class="modal-bar">
+    <div class="modal-header">
+        <ng-content select="[header]"></ng-content>
+        <ico (click)="cls()"></ico>
+    </div>
+    <div class="modal-body">
+        <ng-content></ng-content>
+    </div>
+    <div class="modal-footer">
+        <ng-content select="[footer]"></ng-content>
+    </div>
+</div>

src/app/_modules/widjet/modal/modal.component.ts

@@ -0,0 +1,25 @@
+import { Component, Output, EventEmitter } from '@angular/core';
+import {WindowScrollingService} from "@app/_services/window-scrolling.service";
+
+@Component({
+  selector: 'modal',
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.scss']
+})
+export class ModalComponent {
+
+  @Output() close = new EventEmitter<string>();
+
+  constructor( private windowScrollingService: WindowScrollingService ){}
+
+  ngOnInit(){
+    this.windowScrollingService.disable();
+  }
+  ngOnDestroy(){
+    this.windowScrollingService.enable();
+  }
+
+  cls(){
+    this.close.emit('close')
+  }
+}

src/app/_modules/widjet/widjet.module.ts

@@ -9,6 +9,7 @@ import { SliderComponent } from './slider/slider.component';
 import { SwitchComponent } from './switch/switch.component';
 import { LocaleComponent } from './locale/locale.component';
 import { FileIcoComponent } from './file-ico/file-ico.component';
+import { ModalComponent } from './modal/modal.component';
 
 
 @NgModule({
@@ -25,6 +26,7 @@ import { FileIcoComponent } from './file-ico/file-ico.component';
         SwitchComponent,
         LocaleComponent,
         FileIcoComponent,
+        ModalComponent,
     ],
     exports: [
         IcoComponent,
@@ -33,7 +35,8 @@ import { FileIcoComponent } from './file-ico/file-ico.component';
         SliderComponent,
         SwitchComponent,
         LocaleComponent,
-        FileIcoComponent
+        FileIcoComponent,
+        ModalComponent
     ]
 })
 export class WidjetModule {

src/assets/css/_basics.scss

@@ -414,3 +414,47 @@ file-ico{
   height: 60px;
   display: inline-flex;
 }
+
+
+modal{
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .modal-overlay{
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    left: 0;
+    top: 0;
+    background-color: rgba(62, 61, 64, 0.7);    
+  }
+  .modal-bar{
+    max-width: 800px;
+    max-height: 100vh;
+    background-color: var(--white);
+    border: 1px solid var(--second-dis);
+    display: flex;
+    flex-direction: column;
+    z-index: 1;
+    .modal-header{
+      display: flex;
+      justify-content: space-between;
+      margin-top: -1px;
+      border-bottom: 1px solid var(--second-dis);
+    }
+    .modal-body{
+
+    }
+    .modal-footer{
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: -1px;
+      border-top: 1px solid var(--second-dis);
+    }
+  }
+}

src/vniigaz-v2/css/_basics.scss

@@ -449,3 +449,56 @@ file-ico{
   height: 60px;
   display: inline-flex;
 }
+
+
+modal{
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .modal-overlay{
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    left: 0;
+    top: 0;
+    background-color: rgba(62, 61, 64, 0.7);    
+  }
+  .modal-bar{
+    max-width: 800px;
+    max-height: 100vh;
+    background-color: var(--white);
+    border: 1px solid var(--second-dis);
+    display: flex;
+    flex-direction: column;
+    z-index: 1;
+    .modal-header{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: -1px;
+      border-bottom: 1px solid var(--second-dis);
+      padding: 14px 24px;
+      h4{
+        margin: 0;
+      }
+    }
+    .modal-body{
+      padding: 36px 24px;
+      overflow-y: auto;
+      img{
+        max-width: 330px;
+      }
+    }
+    .modal-footer{
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: -1px;
+      border-top: 1px solid var(--second-dis);
+    }
+  }
+}