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

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

@@ -0,0 +1,9 @@
+<div class="row">
+    <div class="col-12 filter-colum">
+        <ng-template [ngTemplateOutlet]="filter_colum"></ng-template> 
+    </div>
+</div>
+
+<div class="table-responsive" >
+    <ng-content></ng-content>
+</div>

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

@@ -0,0 +1,16 @@
+import { Component, ContentChild, OnInit, TemplateRef } from '@angular/core';
+
+@Component({
+  selector: 'mefdev-table-page',
+  templateUrl: './table-page.component.html',
+  styleUrls: ['./table-page.component.scss']
+})
+export class TablePageComponent implements OnInit {
+  @ContentChild("filter_colum") filter_colum: TemplateRef<void>; 
+  
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/markup-kit/utils/filtered-field/filtered-field-container/filtered-field-container.component.html

@@ -0,0 +1,3 @@
+<div class="item-container">
+    <mefdev-filtered-field-item *ngFor="let item of items" [item]="item" (discard)="onDiscard(item)" (openFilter)="onOpenFilter(item)"></mefdev-filtered-field-item>
+</div>

package/src/lib/markup-kit/utils/filtered-field/filtered-field-container/filtered-field-container.component.scss

@@ -0,0 +1,4 @@
+.item-container{
+    display: flex;
+    cursor: context-menu;
+}

package/src/lib/markup-kit/utils/filtered-field/filtered-field-container/filtered-field-container.component.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+import { FilteredFieldService } from '../filtered-field.service';
+import { FiltredItemModel } from '../filtred-item.model';
+
+@Component({
+  selector: 'mefdev-filtered-field-container',
+  templateUrl: './filtered-field-container.component.html',
+  styleUrls: ['./filtered-field-container.component.scss']
+})
+export class FilteredFieldContainerComponent implements OnInit {
+
+  items: FiltredItemModel[] = [];
+
+  constructor(
+    private service: FilteredFieldService
+    ) { }
+
+  onOpenFilter(item: FiltredItemModel){
+    this.service.sendOpenFilter(item);
+  }
+
+  onDiscard(item: FiltredItemModel){
+    item.discard(item.standartValue);
+    this.items.splice(this.items.findIndex(x => x.id == item.id), 1);
+  }
+
+  ngOnInit(): void {
+    this.service.getNewFilterItem().subscribe(item => {
+      let i = this.items.findIndex(x => x.id == item.id)
+      
+      if(item.newValue == item.standartValue){
+        this.items[i] = item;
+        this.items.splice(i, 1);
+        return;
+      }
+
+      if(i != -1){
+        this.items[i] = item;
+        return;
+      }
+
+      this.items.push(item);
+      
+    })
+  }
+}

package/src/lib/markup-kit/utils/filtered-field/filtered-field-item/filtered-field-item.component.html

@@ -0,0 +1,4 @@
+<div class="item">
+    <i class="fa fa-times" (click)="onDiscard()" style="margin-right: 3px; cursor: pointer;"></i> 
+    <span (click)="onOpenFilter()">{{item.newValue}}</span>
+</div>

package/src/lib/markup-kit/utils/filtered-field/filtered-field-item/filtered-field-item.component.scss

@@ -0,0 +1,12 @@
+@use './../../../../styles/designe-colors.scss' as c;
+
+.item{
+    background-color: c.$Dark-Gray-2;
+    color: c.$White;
+    border-radius: 5px;
+    margin-right: 7px;
+    padding-left: 7px;
+    padding-right: 7px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+}

package/src/lib/markup-kit/utils/filtered-field/filtered-field-item/filtered-field-item.component.ts

@@ -0,0 +1,28 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FiltredItemModel } from '../filtred-item.model';
+
+@Component({
+  selector: 'mefdev-filtered-field-item',
+  templateUrl: './filtered-field-item.component.html',
+  styleUrls: ['./filtered-field-item.component.scss']
+})
+export class FilteredFieldItemComponent implements OnInit {
+
+  @Input() item: FiltredItemModel;
+  @Output() discard = new EventEmitter<FiltredItemModel>();
+  @Output() openFilter = new EventEmitter<any>();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  onOpenFilter(){
+    this.openFilter.next({});
+  }
+
+  onDiscard(){
+    this.discard.next(this.item);
+  }
+
+}

package/src/lib/markup-kit/utils/filtered-field/filtered-field.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FilteredFieldContainerComponent } from './filtered-field-container/filtered-field-container.component';
+import { FilteredFieldItemComponent } from './filtered-field-item/filtered-field-item.component';
+
+@NgModule({
+  declarations: [
+    FilteredFieldContainerComponent,
+    FilteredFieldItemComponent,
+  ],
+  exports:[
+    FilteredFieldItemComponent,
+    FilteredFieldContainerComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class MefDevFilteredFieldModule { }

package/src/lib/markup-kit/utils/filtered-field/filtered-field.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { FiltredItemModel } from './filtred-item.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FilteredFieldService {
+
+  private newFilterItem: Subject<FiltredItemModel> = new Subject<FiltredItemModel>();
+  private openFilter: Subject<FiltredItemModel> = new Subject<FiltredItemModel>();
+
+  constructor() {}
+
+  
+  public getOpenFilter(): Observable<FiltredItemModel>{
+    return this.openFilter;
+  }
+
+  public sendOpenFilter(item: FiltredItemModel){
+    this.openFilter.next(item);
+  }
+
+
+  public getNewFilterItem(): Observable<FiltredItemModel>{
+    return this.newFilterItem;
+  }
+
+  public sendNewFilterItem(item: FiltredItemModel){
+    this.newFilterItem.next(item);
+  }
+}

package/src/lib/markup-kit/utils/filtered-field/filtred-item.model.ts

@@ -0,0 +1,15 @@
+export class FiltredItemModel{
+
+
+    constructor(id:string, newValue: string, standartValue: string, discard: (standartValue: string) => any){
+        this.id = id;
+        this.newValue = newValue;
+        this.standartValue = standartValue;
+        this.discard = discard;
+    }
+
+    id:string;
+    newValue: string;
+    standartValue: string;
+    discard: (standartValue: string) => any;
+}

package/src/lib/markup-kit/utils/help-block/help-block.component.html

@@ -0,0 +1,19 @@
+<div class="card-simple" *ngIf="isVisible">
+    <div class="row m-1 body-1" (click)="expanded = !expanded" style="cursor: pointer;">
+        <div class="col-10" style="color: white;">
+            {{ title }}
+        </div>
+        <div class="col-2">
+            <i class="fa fa-window-close" aria-hidden="true" style="float: right; margin-left: 20px;" (click)="isVisible = !isVisible;"></i>
+            
+            <i class="fa fa-angle-down " *ngIf="!expanded" aria-hidden="true" style="float: right;"></i>
+            <i class="fa fa-angle-up" *ngIf="expanded" aria-hidden="true" style="float: right;"></i>      
+        </div>
+    </div>
+
+    <div class="card-body row" [@smothExpand]="expanded ? 'open' : 'close'">
+        <div class="col-12">
+            <ng-content></ng-content>
+        </div>
+    </div>
+</div>

package/src/lib/markup-kit/utils/help-block/help-block.component.scss

@@ -0,0 +1,22 @@
+@use './../../../styles/designe-colors.scss' as c;
+
+.card-simple{
+    opacity: 0.7;
+    background-color: c.$Green;
+    padding: 2px;
+    border-radius: 5px;
+    margin-top: 0.3em;
+    margin-bottom: 0.5em;
+}
+
+.card-body{
+    opacity: 1;
+    margin-left: 2px;
+    margin-right: 2px;
+    margin-bottom: 2px;
+    border-radius: 5px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    background-color: c.$Light-Gray-3;
+    color: black;
+}

package/src/lib/markup-kit/utils/help-block/help-block.component.ts

@@ -0,0 +1,40 @@
+import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition,
+} from '@angular/animations';
+
+@Component({
+  selector: 'mefdev-help-block',
+  templateUrl: './help-block.component.html',
+  styleUrls: ['./help-block.component.scss'],
+  animations:[
+    trigger('smothExpand',[
+      state('close', style({
+        height: '0',
+        margin: '0',
+        padding: '0',
+        opacity: '0',
+        visibility: 'hidden',
+      })),
+      state('open', style({})),
+      transition('close<=>open', animate(200))
+    ])
+  ]
+})
+export class HelpBlockComponent implements OnInit {
+
+  isVisible:boolean = true;
+  expanded:boolean = false;
+
+  @Input('title') title:string = "Help";
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/markup-kit/utils/help-block/hepl-block.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HelpBlockComponent } from './help-block.component';
+import { MefDevCollapseModule } from '../../collapse/collapse.module';
+
+@NgModule({
+  declarations: [HelpBlockComponent],
+  exports: [HelpBlockComponent],
+  imports: [
+    CommonModule,
+    MefDevCollapseModule
+  ]
+})
+export class MefDevHelpBlockModule { }

package/{lib/markup-kit/utils/help-block/index.d.ts → src/lib/markup-kit/utils/help-block/index.ts}

@@ -1,2 +1,2 @@
 export * from './help-block.component';
-export * from './hepl-block.module';
+export * from './hepl-block.module';

package/{lib/markup-kit/utils/loader/index.d.ts → src/lib/markup-kit/utils/loader/index.ts}

@@ -1,4 +1,4 @@
 export * from './loader.service';
 export * from './loader/loader.component';
 export * from './loader.module';
-export * from './request-event.enum';
+export * from './request-event.enum';

package/src/lib/markup-kit/utils/loader/loader/loader.component.html

@@ -0,0 +1 @@
+<ngx-ui-loader></ngx-ui-loader>

package/src/lib/markup-kit/utils/loader/loader/loader.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { NgxUiLoaderService } from 'ngx-ui-loader';
+import { LoaderService } from '../loader.service';
+
+@Component({
+  selector: 'mefdev-loader',
+  templateUrl: './loader.component.html',
+  styleUrls: ['./loader.component.scss']
+})
+export class LoaderComponent implements OnInit {
+
+  constructor(
+    private loaderService: LoaderService,
+    private ngxLoader: NgxUiLoaderService
+  ) {  
+  }
+  
+  ngOnInit(): void {
+    this.loaderService.getLoaderIsShow().subscribe((isEnable) => {
+      if(isEnable){
+        this.ngxLoader.startBackground();
+      }
+      else{
+        this.ngxLoader.stopBackground();
+      }
+    });
+  }
+
+}

package/src/lib/markup-kit/utils/loader/loader.module.ts

@@ -0,0 +1,47 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LoaderService } from './loader.service';
+import { LoaderComponent } from './loader/loader.component';
+import { NgxUiLoaderConfig, NgxUiLoaderModule, PB_DIRECTION, POSITION, SPINNER } from 'ngx-ui-loader';
+
+const ngxUiLoaderConfig: NgxUiLoaderConfig = {
+  "bgsColor": "#CF0106",
+  "fgsColor": "#CF0106",
+  "bgsOpacity": 0.5,
+  "bgsPosition": "center-center",
+  "bgsSize": 50,
+  "bgsType": "ball-spin-clockwise",
+  "blur": 5,
+  "delay": 0,
+  "fastFadeOut": true,
+  "fgsPosition": "center-center",
+  "fgsSize": 60,
+  "fgsType": "ball-spin-clockwise",
+  "gap": 57,
+  "logoPosition": "center-center",
+  "logoSize": 120,
+  "logoUrl": "",
+  "masterLoaderId": "master",
+  "overlayBorderRadius": "0",
+  "overlayColor": "rgba(40, 40, 40, 0.8)",
+  "pbColor": "red",
+  "pbDirection": "ltr",
+  "pbThickness": 3,
+  "hasProgressBar": false,
+  "text": "",
+  "textColor": "#FFFFFF",
+  "textPosition": "center-center",
+  "maxTime": -1,
+  "minTime": 300
+}
+
+@NgModule({
+  declarations: [LoaderComponent],
+  exports: [LoaderComponent],
+  imports: [
+    CommonModule, 
+		NgxUiLoaderModule.forRoot(ngxUiLoaderConfig), 
+  ],
+  providers: [LoaderService]
+})
+export class MefDevLoaderModule { }

package/src/lib/markup-kit/utils/loader/loader.service.ts

@@ -0,0 +1,55 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { setInterval } from 'timers';
+import { RequestEvent } from './request-event.enum';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoaderService {
+
+  private stream: Subject<RequestEvent> = new Subject<RequestEvent>();
+  private loaderIsShow: Subject<boolean> = new Subject<boolean>();
+  private _lastVal: boolean = false;
+  private requestCnt: number = 0;
+
+  constructor() {
+    this.stream.subscribe(e => {
+      switch (e) {
+        case RequestEvent.TX:
+          this.requestCnt++;
+          break;
+        case RequestEvent.RX_OK:
+        case RequestEvent.RX_ERR:
+          this.requestCnt-=0.5;     
+          // console.log('LoaderService request', this.requestCnt) 
+          break;
+      }
+      
+      if(this.requestCnt < 0){
+        this.requestCnt = 0;
+      }
+  
+      let isZero = this.requestCnt == 0;
+
+      if(this._lastVal != isZero){
+        this._lastVal = isZero;
+        
+        this.loaderIsShow.next(!isZero);
+      } 
+      
+    });
+  }
+
+  newEvent(e: RequestEvent){
+    this.stream.next(e);
+  }
+
+  getLoaderIsShow():Observable<boolean>{
+    return this.loaderIsShow;
+  }
+
+  update(){
+    this.requestCnt = 0;
+  }
+}

package/src/lib/markup-kit/utils/loader/request-event.enum.ts

@@ -0,0 +1 @@
+export enum RequestEvent { TX, RX_OK, RX_ERR }

package/src/lib/pg-components/card/card.components.html

@@ -0,0 +1,66 @@
+<div class="card card-{{ _type }} {{ _additionalClasses }}" *ngIf="!_close_card" [class.card-collapsed]="_isCollapsed"
+  [class.card-maximized]="_isMaximixed" #hostContent class="col-sm-12 col-md-6 col-lg-4"
+  [ngStyle]="{'border': _card_border_style}">
+  <div class="card-header {{ _extraHeaderClass }}">
+    <div class="card-title">
+      <ng-template [ngTemplateOutlet]="CardTitle"></ng-template>
+    </div>
+    <div class="card-controls" *ngIf="_showTools == true">
+      <ng-template [ngTemplateOutlet]="CardExtraControls"></ng-template>
+      <ul *ngIf="_minimalHeader == false; else minimalBlock">
+        <li *ngIf="_toggle == true">
+          <a href="javascript:void(0);" data-toggle class="card-collapse" (click)="toggle()"><i
+              class="pg pg-arrow_maximize" [class.pg-arrow_minimize]="_isCollapsed"></i></a>
+        </li>
+        <li *ngIf="_refresh == true">
+          <a href="javascript:void(0);" data-toggle class="card-refresh" (click)="refresh()"><i
+              class="card-icon card-icon-refresh"></i></a>
+        </li>
+        <li *ngIf="_maximize == true">
+          <a href="javascript:void(0);" data-toggle class="card-maximize" (click)="maximize()"><i
+              class="card-icon card-icon-maximize"></i></a>
+        </li>
+        <li *ngIf="_close == true">
+          <a href="javascript:void(0);" data-toggle class="card-close" (click)="close()"><i
+              class="card-icon card-icon-close"></i></a>
+        </li>
+      </ul>
+       <!-- <ng-template #minimalBlock>
+        <ul>
+          <li>
+            <a href="javascript:void(0);" (click)="refresh()" class="card-refresh minimal"
+              [class.refreshing]="_isLoading">
+              <i #minimalCircleLoadingTrigger class="card-icon card-icon-refresh-lg-{{
+                  _refreshColor == 'light' ? 'white' : 'master'
+                }}" [class.fade]="_isLoading"></i>
+             <i #minimalCircleLoading class="card-icon-refresh-lg-white-animated"
+                style="position: absolute;top:0;left:0" [class.active]="_isLoading"
+                [class.hide]="_isLoading != true"></i>
+            </a>
+          </li>
+        </ul>
+      </ng-template> -->
+    </div>
+  </div>
+  <div class="card-body {{ _extraBodyClass }}" [@collapseState]="_isCollapsed == true ? 'inactive' : 'active'">
+    <ng-content></ng-content>
+  </div>
+  <div *ngIf="_messageVisible == true" class="pgn-wrapper" data-position="top">
+    <div class="pgn pgn-bar push-on-sidebar-open">
+      <div class="alert alert-danger">
+        <span>{{ _message }}</span><button class="close" (click)="alertDismiss()" type="button">
+          <span aria-hidden="true">×</span><span class="sr-only">{{ 'Close' }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div *ngIf="_messageVisible == true" class="card-progress" [style.backgroundColor]="
+      _minimalHeader ? 'rgba(0,0,0, 0.6)' : 'rgba(255, 255, 255, 0.8)'
+    " style=" display: block;"></div>
+  <div [@fadeAnimation]="_isLoading" class="card-progress" [style.backgroundColor]="
+      _minimalHeader ? 'rgba(0,0,0, 0.6)' : 'rgba(255, 255, 255, 0.8)'
+    " style="display: block;pointer-events: none">
+    <pg-progress *ngIf="_minimalHeader == false" type="{{ _progressType }}" color="{{ _progressColor }}"
+      indeterminate="true" class=""></pg-progress>
+  </div>
+</div>