@natec/mef-dev-ui-kit 0.0.66 → 0.0.67

package/src/lib/markup-kit/collapse/collapse-set/collapse-set.component.ts

@@ -0,0 +1,58 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { CollapseComponent } from '../collapse/collapse.component';
+
+@Component({
+  selector: 'mefdev-collapse-set',
+  templateUrl: './collapse-set.component.html',
+  styleUrls: ['./collapse-set.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class CollapseSetComponent {
+  
+  private _accordion = false;
+  private _horizontal = true;
+  private _expandAny = true;
+  panels: CollapseComponent[] = [];
+
+  @Input()
+  set expandAny(value: boolean) {
+    this._accordion = value;
+  }
+
+  get expandAny(): boolean {
+    return this._accordion;
+  }
+
+  @Input()
+  set Accordion(value: boolean) {
+    this._accordion = value;
+  }
+
+  get Accordion(): boolean {
+    return this._accordion;
+  }
+
+  @Input()
+  set Horizontal(value: boolean) {
+    this._horizontal = value;
+  }
+
+  get Horizontal(): boolean {
+    return this._horizontal;
+  }
+
+  pgClick(collapse: CollapseComponent): void {
+    if (this.Accordion && !this.expandAny) {
+      this.panels.map((item, index) => {
+        const curIndex = this.panels.indexOf(collapse);
+        if (index !== curIndex) {
+          item.Active = false;
+        }
+      });
+    }
+  }
+
+  addTab(collapse: CollapseComponent): void {
+    this.panels.push(collapse);
+  }
+}

package/src/lib/markup-kit/collapse/collapse.module.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { NgModule,ModuleWithProviders } from '@angular/core';
+import { CollapseSetComponent } from './collapse-set/collapse-set.component';
+import { CollapseComponent } from './collapse/collapse.component';
+
+export const mefDevCollapseModuleComponents = [CollapseSetComponent, CollapseComponent];
+
+@NgModule({
+  declarations: mefDevCollapseModuleComponents,
+  exports     : mefDevCollapseModuleComponents,
+  imports     : [ CommonModule ]
+})
+
+export class MefDevCollapseModule {
+  static forRoot(): ModuleWithProviders<MefDevCollapseModule> {
+    return {
+      ngModule: MefDevCollapseModule
+    };
+  }
+}

package/src/lib/markup-kit/modals/fill/fill.component.html

@@ -0,0 +1,18 @@
+ <div bsModal #fadInModal="bs-modal" class="modal fade fill-in" tabindex="-1" role="dialog" aria-hidden="true" (onHide)="modalIsCloused()">
+    <button type="button" class="close" (click)="fadInModal.hide()" aria-hidden="true">
+      <i class="pg pg-close"></i>
+    </button>
+    <div class="modal-dialog ">
+      <div class="modal-content">
+        <div class="modal-header">
+          <ng-template [ngTemplateOutlet]="modal_header"></ng-template>
+        </div>  
+        <div class="modal-body">
+          <ng-content></ng-content>
+        </div>  
+        <div class="modal-footer">
+          <ng-template [ngTemplateOutlet]="modal_footer"></ng-template>
+        </div>
+      </div>
+    </div>
+  </div>

package/src/lib/markup-kit/modals/fill/fill.component.ts

@@ -0,0 +1,45 @@
+import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
+import { ModalDirective } from 'ngx-bootstrap/modal';
+import { CommonModule } from "@angular/common"; // add for static analizer bug fix
+
+@Component({
+  selector: 'mefdev-fill-modal',
+  templateUrl: './fill.component.html',
+  styleUrls: ['./fill.component.scss']
+})
+export class FillComponent implements OnInit {
+
+  @ContentChild("modal_header") modal_header: TemplateRef<void>; 
+  @ContentChild("modal_footer") modal_footer: TemplateRef<void>;
+  
+  @ViewChild('fadInModal', { static: false }) fadInModal?: ModalDirective;
+    
+  @Input() set show(val: boolean){
+    if(!this.fadInModal){
+      return;
+    }
+    
+    if(val){
+      this.showModal();
+    }
+    else{
+      this.hideModal();
+    }
+  };
+  @Output() isClouse = new EventEmitter<boolean>();
+
+  constructor() { }
+  
+  ngOnInit(): void {
+  }
+
+  modalIsCloused(){
+    this.isClouse.emit(true);
+  }
+  showModal() {
+    this.fadInModal?.show();
+  }
+  public hideModal(){
+    this.fadInModal?.hide();
+  }
+}

package/src/lib/markup-kit/modals/markup-kit.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from "@angular/core";
+import { FillComponent } from './fill/fill.component';
+import { SlideUpComponent } from './slide-up/slide-up.component';
+import { SlideRightComponent } from './slide-right/slide-right.component';
+
+import { ModalModule } from "ngx-bootstrap/modal";
+import { CommonModule } from "@angular/common";
+import { RightFilterComponent } from "./right-filter/right-filter.component";
+import { PgSelectModule } from '../../pg-components/select/select.module';
+
+
+let mefDevModalModuleComponents = [
+  FillComponent,
+  SlideUpComponent,
+  SlideRightComponent,
+  RightFilterComponent
+];
+@NgModule({
+  imports: [
+    ModalModule,
+    CommonModule,
+    PgSelectModule
+  ],
+  exports: mefDevModalModuleComponents,
+  declarations: mefDevModalModuleComponents
+})
+export class MefDevModalModule {}

package/src/lib/markup-kit/modals/modal-size.enum.ts

@@ -0,0 +1,5 @@
+export const enum ModalSize {
+    sm = 'sm',
+    md = 'md',
+    lg = 'lg',
+  }

package/src/lib/markup-kit/modals/right-filter/right-filter.component.html

@@ -0,0 +1,7 @@
+<div class="filter-btn">
+    <button class="btn btn-secondary text-danger" (click)="openModal()"><i class="fa fa-filter" aria-hidden="true"></i></button>
+</div>
+
+<mefdev-slide-right-modal [show]="isOpen" (isClouse)="modalIsCloused()">
+    <ng-content></ng-content>
+</mefdev-slide-right-modal>

package/src/lib/markup-kit/modals/right-filter/right-filter.component.scss

@@ -0,0 +1,6 @@
+.filter-btn{
+    position: fixed;
+    top: 60px;
+    z-index: 450;
+    right: 25px;
+}

package/src/lib/markup-kit/modals/right-filter/right-filter.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { FilteredFieldService } from '../../utils/filtered-field/filtered-field.service';
+
+@Component({
+  selector: 'mefdev-right-filter',
+  templateUrl: './right-filter.component.html',
+  styleUrls: ['./right-filter.component.scss']
+})
+export class RightFilterComponent implements OnInit {
+
+  isOpen: boolean = false;
+
+  constructor(
+    private filteredFieldService: FilteredFieldService,) { }
+
+  ngOnInit(): void {
+    this.filteredFieldService.getOpenFilter().subscribe(() => {
+      this.isOpen = true;
+    });
+  }
+
+  openModal(){
+    this.isOpen = !this.isOpen;
+  }
+
+  modalIsCloused(){
+    this.isOpen = false;
+  }
+  
+}

package/src/lib/markup-kit/modals/slide-right/slide-right.component.html

@@ -0,0 +1,16 @@
+<div bsModal #slideRight="bs-modal" class="modal fade slide-right" tabindex="-1" role="dialog" aria-hidden="true" (onHide)="modalIsCloused()">
+    <div class="modal-dialog modal-{{size}}">
+      <div class="modal-content-wrapper">
+        <div class="modal-content">
+          <div class="modal-header clearfix text-left">
+                <ng-template [ngTemplateOutlet]="modal_header"></ng-template>
+            </div>
+            <div class="modal-body">
+                <ng-content></ng-content>
+            </div>
+            <div class="modal-footer">
+                <ng-template [ngTemplateOutlet]="modal_footer"></ng-template>
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/markup-kit/modals/slide-right/slide-right.component.ts

@@ -0,0 +1,50 @@
+import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
+import { ModalDirective } from 'ngx-bootstrap/modal';
+import { ModalSize } from '../modal-size.enum';
+import { CommonModule } from "@angular/common"; // add for static analizer bug fix
+
+@Component({
+  selector: 'mefdev-slide-right-modal',
+  templateUrl: './slide-right.component.html',
+  styleUrls: ['./slide-right.component.scss']
+})
+export class SlideRightComponent implements OnInit {
+
+  @ContentChild("modal_header") modal_header: TemplateRef<void>; 
+  @ContentChild("modal_footer") modal_footer: TemplateRef<void>;
+  
+  @ViewChild('slideRight', { static: false }) slideRight: ModalDirective;
+  
+  @Input() size:ModalSize = ModalSize.md;
+  
+  @Input() set show(val: boolean){
+    if(!this.slideRight){
+      return;
+    }
+    
+    if(val){
+      this.showModal();
+    }
+    else{
+      this.hideModal();
+    }
+  };
+  @Output() isClouse = new EventEmitter<boolean>();
+
+  constructor() { }
+  
+  ngOnInit(): void {
+  }
+
+  modalIsCloused(){
+    this.isClouse.emit(true);
+  }
+  
+  public showModal(){
+    this.slideRight.show();
+  }
+    
+  public hideModal(){
+    this.slideRight.hide();
+  }
+}

package/src/lib/markup-kit/modals/slide-up/slide-up.component.html

@@ -0,0 +1,16 @@
+<div bsModal #mdSlideUp="bs-modal" class="modal fade slide-up disable-scroll" tabindex="-1" role="dialog" aria-hidden="false" (onHide)="modalIsCloused()">
+    <div class="modal-dialog modal-{{size}}">
+      <div class="modal-content-wrapper">
+        <div class="modal-content">
+          <div class="modal-header clearfix text-left">
+                <ng-template [ngTemplateOutlet]="modal_header"></ng-template>
+            </div>
+            <div class="modal-body">
+                <ng-content></ng-content>
+            </div>
+            <div class="modal-footer">
+                <ng-template [ngTemplateOutlet]="modal_footer"></ng-template>
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/markup-kit/modals/slide-up/slide-up.component.ts

@@ -0,0 +1,50 @@
+import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
+import { ModalDirective } from 'ngx-bootstrap/modal';
+import { ModalSize } from '../modal-size.enum';
+import { CommonModule } from "@angular/common"; // add for static analizer bug fix
+
+@Component({
+  selector: 'mefdev-slide-up-modal',
+  templateUrl: './slide-up.component.html',
+  styleUrls: ['./slide-up.component.scss']
+})
+export class SlideUpComponent implements OnInit {
+  
+  @ContentChild("modal_header") modal_header: TemplateRef<void>; 
+  @ContentChild("modal_footer") modal_footer: TemplateRef<void>;
+  
+  @ViewChild('mdSlideUp', { static: false }) mdSlideUp: ModalDirective;
+  
+  @Input() size:ModalSize = ModalSize.md;
+  
+  @Input() set show(val: boolean){
+    if(!this.mdSlideUp){
+      return;
+    }
+    
+    if(val){
+      this.showModal();
+    }
+    else{
+      this.hideModal();
+    }
+  };
+  @Output() isClouse = new EventEmitter<boolean>();
+
+  constructor() { }
+  
+  ngOnInit(): void {
+  }
+
+  modalIsCloused(){
+    this.isClouse.emit(true);
+  }
+  
+  public showModal(){
+    this.mdSlideUp.show();
+  }
+  
+  public hideModal(){
+    this.mdSlideUp.hide();
+  }
+}

package/src/lib/markup-kit/page-layouts/central-page/central-page.component.html

@@ -0,0 +1,6 @@
+<div class="row align-items-center" style="height: 100%;" [ngStyle]="{'width': width}">
+    <div class="col">
+        <ng-content></ng-content>
+    </div>
+</div>
+  

package/src/lib/markup-kit/page-layouts/central-page/central-page.component.ts

@@ -0,0 +1,26 @@
+import { AfterViewChecked, Component, Input, OnDestroy, OnInit } from '@angular/core';
+@Component({
+  selector: 'mefdev-central-page',
+  templateUrl: './central-page.component.html',
+  styleUrls: ['./central-page.component.scss']
+})
+export class CentralPageComponent implements OnInit, OnDestroy, AfterViewChecked {
+
+  constructor(
+  ) { 
+  }
+
+  @Input() width: string = '100%';
+
+  ngOnDestroy(): void {
+    document.getElementById('dataMainContent')!.style.height = '';
+  }
+
+  ngOnInit(): void {
+  }
+  
+  ngAfterViewChecked(): void {
+    document.getElementById('dataMainContent')!.style.height = '100%'
+  }
+
+}

package/src/lib/markup-kit/page-layouts/central-page-row/central-page-row.component.html

@@ -0,0 +1,3 @@
+<div class="row justify-content-center">
+    <ng-content></ng-content>
+</div>

package/src/lib/markup-kit/page-layouts/central-page-row/central-page-row.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'mefdev-central-page-row',
+  templateUrl: './central-page-row.component.html',
+  styleUrls: ['./central-page-row.component.scss']
+})
+export class CentralPageRowComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/markup-kit/page-layouts/manage-page/manage-page.component.html

@@ -0,0 +1,10 @@
+<div class="card-tabs">
+    <div class="row body-1 card-header" *ngIf="card_title">
+        <div class="m-2">
+            <ng-template [ngTemplateOutlet]="card_title"></ng-template>
+        </div>
+    </div>
+    <div class="row profile-page-tabs">
+        <ng-content></ng-content>
+    </div>
+</div>

package/src/lib/markup-kit/page-layouts/manage-page/manage-page.component.scss

@@ -0,0 +1,14 @@
+@use './../../../styles/designe-colors.scss' as c;
+
+.card-tabs{
+    .card-header{
+        background-color: c.$Light-Gray-3;
+        padding: 0.5em;
+        border: 0;
+    }    
+}
+
+.profile-page-tabs{
+    background-image: linear-gradient(top, c.$Light-Gray-3 28px, transparent 0%, transparent 100%);
+    background-image: -webkit-linear-gradient(top, c.$Light-Gray-3 28px, transparent 0%, transparent 100%);
+}

package/src/lib/markup-kit/page-layouts/manage-page/manage-page.component.ts

@@ -0,0 +1,20 @@
+import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';
+
+@Component({
+  selector: 'mefdev-manage-page',
+  templateUrl: './manage-page.component.html',
+  styleUrls: ['./manage-page.component.scss']
+})
+export class ManagePageComponent implements OnInit {
+  
+  @ContentChild("card_title") card_title: TemplateRef<void>; 
+  @ContentChild("tabs_block") tabs_block: TemplateRef<void>; 
+
+  @Input() startTabInd = 0;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/markup-kit/page-layouts/page-layouts.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ProfileComponent } from './profile/profile.component';
+import { pgTabsModule } from '../../pg-components/tabs/tabs.module';
+import { CentralPageComponent } from './central-page/central-page.component';
+import { CentralPageRowComponent } from './central-page-row/central-page-row.component';
+import { TablePageComponent } from './table-page/table-page.component';
+import { ManagePageComponent } from './manage-page/manage-page.component';
+
+let mefDevPageLayoutsModuleComponents = [
+  ProfileComponent,
+  CentralPageComponent,
+  CentralPageRowComponent,
+  TablePageComponent,
+  ManagePageComponent
+];
+
+@NgModule({
+  declarations: mefDevPageLayoutsModuleComponents,
+  exports: mefDevPageLayoutsModuleComponents,
+  imports: [
+    CommonModule,
+		pgTabsModule,
+  ],
+})
+export class MefDevPageLayoutsModule { }

package/src/lib/markup-kit/page-layouts/profile/profile.component.html

@@ -0,0 +1,42 @@
+<div class="row profile-page">
+    <div class="col-12 h3 mt-3">
+        {{header}}
+    </div>
+    <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12">
+        <div *ngIf="!img || img == ''" >
+            <img src="assets/images/md_icon.png" height="124" width="220" />
+        </div>
+        <div *ngIf="img" >
+            <img src="{{img}}" alt="" class="custom-img" [ngStyle]="sizeStyle"
+            />
+        </div>
+    </div>
+            
+    <div class="col-xl-3 col-lg-4 col-md-5 col-sm-12 mt-4 mt-md-0" >
+        <div class="row profile-name">
+            <div class="col">
+                {{name}}
+            </div>
+        </div>
+        <div class="row">
+            <div class="col profile-description">
+                {{shortDescription}}
+            </div>
+        </div>
+    </div>
+
+    <div class="col-xl-3 col-lg-4 col-md-5 col-sm-12 body-6 mt-4 mt-md-0">
+        <ng-template [ngTemplateOutlet]="first_colum"></ng-template> 
+    </div>
+
+    <div class="col-xl-3 col-lg-4 col-md-5 col-sm-12 body-6 mt-4 mt-md-0" >
+        <ng-template [ngTemplateOutlet]="second_colum"></ng-template> 
+    </div>
+
+</div>
+<div style="position: relative;">
+    <div class="row profile-page-tabs">
+        <ng-template [ngTemplateOutlet]="footer">
+        </ng-template> 
+    </div>    
+</div>

package/src/lib/markup-kit/page-layouts/profile/profile.component.scss

@@ -0,0 +1,72 @@
+@use './../../../styles/designe-colors.scss' as v;
+@use './../../../styles/fonts.scss';
+
+:host::ng-deep .profile-page{
+    background-color: v.$Light-Gray-3;
+    padding-left: 10px;
+    color: black;
+}
+
+:host::ng-deep .profile-description{
+    height: 7em; 
+    word-break: break-all;
+    overflow-y: clip;
+    margin-right: 40px; 
+    @extend .body-6;
+}
+
+:host::ng-deep .profile-name{
+    height: 2em; 
+    overflow-y: clip;    
+    @extend .body-1;
+}
+
+:host::ng-deep .tab-content-wrapper{
+    background-color: v.$White;
+}
+
+:host::ng-deep .profile-data-item{
+    display: flex;
+    margin: 10px;
+}
+
+:host::ng-deep .profile-data-item{
+    display: flex;
+    margin: 10px;
+}
+
+:host::ng-deep .profile-data-item-value{
+    font-weight: bold;
+    margin-left: 0.25em;
+}
+
+:host::ng-deep .profile-page-tabs{
+    background-image: linear-gradient(top, v.$Light-Gray-3 53px, transparent 0%, transparent 100%);
+    background-image: -webkit-linear-gradient(top, v.$Light-Gray-3 53px, transparent 0%, transparent 100%);
+    padding-top: 25px;
+    @media (max-width: 720px) {
+        background-image: linear-gradient(top, v.$Light-Gray-3 63px, transparent 0%, transparent 100%);
+        background-image: -webkit-linear-gradient(top, v.$Light-Gray-3 63px, transparent 0%, transparent 100%);
+        padding-top: 35px;
+    }
+}
+
+:host::ng-deep .custom-img{
+    max-width: 224px; 
+    max-height: 128px;
+    
+    margin-right: calc(var(--bs-gutter-x) * .5);
+    margin-left: calc(var(--bs-gutter-x) * .5);
+}
+
+:host::ng-deep .card-img{
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: calc(var(--bs-gutter-x) * .5);
+    margin-left: calc(var(--bs-gutter-x) * .5);
+
+    width: 224px; 
+    height: 128px;
+}

package/src/lib/markup-kit/page-layouts/profile/profile.component.ts

@@ -0,0 +1,38 @@
+import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';
+
+@Component({
+  selector: 'mefdev-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.scss']
+})
+export class ProfileComponent implements OnInit {
+
+  @ContentChild("first_colum") first_colum: TemplateRef<void>; 
+  @ContentChild("second_colum") second_colum: TemplateRef<void>; 
+  @ContentChild("footer") footer: TemplateRef<void>; 
+
+  @Input() name:string;
+  @Input() img: string = '';
+  @Input() shortDescription: string;
+  @Input() header: string;
+  @Input() circleImg: boolean = false;
+  
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  get sizeStyle(){
+    // return { 'width.px': this.width, 'height.px': this.height };
+    if(!this.circleImg){
+      return {};
+    }
+
+    return { 
+      'border-top-left-radius': `50%`,
+      'border-top-right-radius': `50%`,
+      'border-bottom-right-radius': `50%`,
+      'border-bottom-left-radius': `50%`,
+    };
+  }
+}