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

package/ng-package.json

@@ -1,24 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/mef-dev-ui-kit",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  },
-  "assets": [
-    "src/lib/styles/*",
-    "src/lib/styles/img/*",
-    "src/lib/styles/fonts/lato/*",
-    "src/lib/styles/fonts/montserrat/*",
-    "src/lib/styles/fonts/pgicon/*",
-    "src/lib/styles/fonts/main-img-font/*",
-    "src/lib/styles/pg/*",
-    "src/lib/styles/pg/vendor/*",
-    "src/lib/styles/pg/modules/*"
-  ],  
-  "allowedNonPeerDependencies": [
-    "ngx-ui-loader",
-    "@angular/cdk",
-    "ngx-bootstrap"
-  ]
-}
-

package/src/lib/markup-kit/card/card/card.component.html

@@ -1,46 +0,0 @@
-
-    <pgcard 
-    MinimalHeader="true" 
-    TimeOut="2500" 
-    [Refresh]="false" 
-    [Close]="false">
-      
-      <ng-template #CardTitle>
-        <ng-template class="card-title body-1" [ngTemplateOutlet]="card_title"></ng-template>
-      </ng-template>
-
-      <div class="plugin-type">           
-        {{ card_type }}
-      </div>
-      
-      <div class="row">
-        <div class="col-12">
-          <div class="m-l-2 card-description">
-            <div *ngIf="!description || description == ''" class="card-no-description"> {{'No plugin description'}}</div>
-            <p>
-              {{description}}
-            </p>                            
-          </div>
-        </div>
-        <div class="col-12 mt-3 text-center card-img">
-          
-          <div *ngIf="!img || img == ''" >
-            <img src="assets/images/md_icon.png"
-            style="max-width: 110px; max-height: 110px;"/>
-          </div>
-          <div *ngIf="img" >
-            <img src="{{img}}" alt="" class="image-responsive-height img-middle"
-              height="110px" 
-              style="max-width: 110px; max-height: 110px;"
-              onclick="imgClick()"
-            />
-          </div>
-
-        </div>
-      </div>
-      <div class="row mb-3 mt-3">
-        <div class="col-12">
-            <ng-template [ngTemplateOutlet]="card_footer"></ng-template> 
-        </div>  
-      </div>
-    </pgcard>

package/src/lib/markup-kit/card/card/card.component.scss

@@ -1,61 +0,0 @@
-@use './../../../styles/designe-colors.scss' as v;
-@use './../../../styles/fonts.scss';
-
-.card-default{
-    background-color: v.$Light-Gray-2;
-    border-radius: 5px;
-}
-
-.card-header{
-    height: 72px;
-}
-
-
-.card-title{
-    width: 70%;
-    span{
-        @extend .body-1;
-    }
-}
-
-.plugin-type{
-    right: 20px;
-    top: 25px;
-    position: absolute;
-    background-color: v.$Red;
-    border-radius: 5px 0px 0px 5px;
-    margin-right: -20px;
-    height: 28px;
-    padding: 5px 15px;
-    @extend .h6;
-    color: v.$White;
-}
-
-
-.card-description{
-    height: 40px; 
-    overflow-y: clip;
-    @extend .body-5;
-    color: v.$Dark-Gray-2;
-}
-
-
-.card-no-description{
-    overflow-y: clip;   
-    height: 60px; 
-    @extend .body-5;
-    color: v.$Light-Gray-1;
-}
-
-.card-img{
-    padding: 0;
-    height: 130px; 
-    background-color: v.$White;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: -webkit-fill-available;
-    margin-right: calc(var(--bs-gutter-x) * .5);
-    margin-left: calc(var(--bs-gutter-x) * .5);
-
-}

package/src/lib/markup-kit/card/card/card.component.ts

@@ -1,31 +0,0 @@
-import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';
-import { Router } from '@angular/router';
-
-@Component({
-  selector: 'mefdev-card',
-  templateUrl: './card.component.html',
-  styleUrls: ['./card.component.scss']
-})
-export class CardComponent implements OnInit {
-
-  @ContentChild("card_title") card_title: TemplateRef<void>; 
-  @ContentChild("card_footer") card_footer: TemplateRef<void>;
-
-  @Input() card_type: string;
-  @Input() img: string;
-  @Input() imgUrl: string;
-  @Input() description: string;
-  
-  
-  constructor(
-    private router: Router
-  ) { }
-
-  ngOnInit(): void {
-  }
-
-  public imgClick(){
-    this.router.navigate(['/', this.imgUrl.toString()])
-  }
-
-}

package/src/lib/markup-kit/card/card-long/card-long.component.html

@@ -1,54 +0,0 @@
-
-    <pgcard 
-    MinimalHeader="true" 
-    TimeOut="2500" 
-    [Refresh]="false" 
-    [Close]="false"
-    >
-      
-      <ng-template #CardTitle>
-        <ng-template class="card-title" [ngTemplateOutlet]="title"></ng-template>
-      </ng-template>
-
-      <ng-template #CardExtraControls>
-        <div class="plugin-type" 
-        [ngClass] = "{
-            'b-color-Light-Gray-1': type_color === 'UNSET',
-            'b-color-Red': type_color === 'RED',
-            'b-color-Green': type_color === 'GREEN'}">
-          {{type_text}}
-        </div>
-      </ng-template>
-
-      <div class="row h-100 m-b-10">
-        <div class="col-lg-3 col-12 card-col">
-          <div class="row">
-            <div class="col-12 card-img m-b-10">
-              <div *ngIf="!img || img == ''" >
-                <img src="assets/images/md_icon.png"
-                style="max-width: 110px; max-height: 110px;"/>
-              </div>
-              <div *ngIf="img">
-                <img src="{{img}}" alt="" class="image-responsive-height img-middle"
-                  height="110px" 
-                  style="max-width: 110px; max-height: 110px;"
-                  onclick="imgClick()"
-                />
-              </div>    
-            </div>
-            <div class="col-12 m-t-2 body-6 text-dark params-block">
-              <ng-template [ngTemplateOutlet]="params"></ng-template> 
-            </div>
-          </div>
-        </div>
-
-        <div class="col-lg-5 col-12 card-col">
-          <ng-template [ngTemplateOutlet]="second_col"></ng-template> 
-        </div>
-        
-        <div class="col-lg-4 col-12 card-col mt-lg-0 mt-5">
-            <ng-template [ngTemplateOutlet]="third_col"></ng-template> 
-        </div>  
-
-      </div>
-    </pgcard>

package/src/lib/markup-kit/card/card-long/card-long.component.scss

@@ -1,72 +0,0 @@
-@use './../../../styles/designe-colors.scss' as v;
-@use './../../../styles/fonts.scss';
-
-
-:host::ng-deep .params-block{
-    .row{
-        margin-top: 0.75em;
-    } 
-    .row:last-child{
-        margin-bottom: 0.75em;
-    } 
-}
-
-:host::ng-deep .card-col{
-    min-height: 220px;
-}
-
-:host::ng-deep .header-link{
-    opacity: 1;
-}
-
-:host::ng-deep .card-default{
-    background-color: v.$Light-Gray-3;
-    border-radius: 5px;
-
-}
-
-:host::ng-deep .card-title{
-    width: 80%;
-    color: black;
-    span{
-        @extend .h3;
-    }
-}
-
-:host::ng-deep .plugin-type{
-    border-radius: 5px 0px 0px 5px;
-    margin-right: -20px;
-    height: 28px;
-    padding: 5px 15px;
-    @extend .h6;
-    color: v.$White;
-}
-
-
-:host::ng-deep .card-description{
-    height: 40px; 
-    overflow-y: clip;
-    @extend .body-5;
-    color: v.$Dark-Gray-2;
-}
-
-
-:host::ng-deep .card-no-description{
-    overflow-y: clip;
-    height: 60px; 
-    @extend .body-5;
-    color: v.$Light-Gray-1;
-}
-
-:host::ng-deep .card-img{
-    padding: 0;
-    height: 130px; 
-    background-color: v.$White;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: -webkit-fill-available;
-    margin-right: calc(var(--bs-gutter-x) * .5);
-    margin-left: calc(var(--bs-gutter-x) * .5);
-
-}

package/src/lib/markup-kit/card/card-long/card-long.component.ts

@@ -1,33 +0,0 @@
-import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';
-import { Router } from '@angular/router';
-import { CartTypeColors } from './cart-type-colors.enum';
-@Component({
-  selector: 'medev-card-long',
-  templateUrl: './card-long.component.html',
-  styleUrls: ['./card-long.component.scss']
-})
-export class CardLongComponent implements OnInit {
-
-  @ContentChild("title") title: TemplateRef<void>;
-  @ContentChild("params") params: TemplateRef<void>; 
-  @ContentChild("second_col") second_col: TemplateRef<void>;
-  @ContentChild("third_col") third_col: TemplateRef<void>;
-
-  @Input() type_text: string;
-  @Input() type_color: CartTypeColors = CartTypeColors.UNSET;
-  @Input() img: string;
-  @Input() imgUrl: string;
-  @Input() description: string;
-  
-  constructor(
-    private router: Router
-  ) { }
-
-  ngOnInit(): void {
-  }
-  
-  public imgClick(){
-    this.router.navigate(['/', this.imgUrl.toString()])
-  }
-
-}

package/src/lib/markup-kit/card/card-long/cart-type-colors.enum.ts

@@ -1,5 +0,0 @@
-export enum CartTypeColors {
-    UNSET = 'UNSET',
-    RED = 'RED',
-    GREEN = 'GREEN'
-  }

package/src/lib/markup-kit/card/card-simple/card-simple.component.html

@@ -1,12 +0,0 @@
-<div class="card-simple" [ngClass]="{ 'unused-block':isDisabled }">
-    <div class="row m-2 body-1" *ngIf="card_title">
-        <div class="col-12">
-            <ng-template [ngTemplateOutlet]="card_title"></ng-template>
-        </div>
-    </div>
-    <div class="row m-2">
-        <div class="col-12">
-            <ng-content></ng-content>
-        </div>
-    </div>
-</div>

package/src/lib/markup-kit/card/card-simple/card-simple.component.scss

@@ -1,12 +0,0 @@
-@use './../../../styles/designe-colors.scss' as c;
-
-.card-simple{
-    background-color: c.$Light-Gray-3;
-    padding: 0.5em;
-    border-radius: 5px;
-}
-
-.unused-block{
-    opacity: 0.6;
-    pointer-events:none;
-}

package/src/lib/markup-kit/card/card-simple/card-simple.component.ts

@@ -1,18 +0,0 @@
-import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';
-
-@Component({
-  selector: 'medev-card-simple',
-  templateUrl: './card-simple.component.html',
-  styleUrls: ['./card-simple.component.scss']
-})
-export class CardSimpleComponent implements OnInit {
-
-  @Input("disabled") isDisabled: boolean = false;
-  @ContentChild("card_title") card_title: TemplateRef<void>; 
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

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

@@ -1,23 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CardComponent } from './card/card.component';
-// import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
-import { PgSelectModule } from '../../pg-components/select/select.module';
-import { pgCardModule } from "./../../pg-components/card/card.module";
-import { MefDevCollapseModule } from '../collapse/collapse.module';
-import { CardLongComponent } from './card-long/card-long.component';
-import { CardSimpleComponent } from './card-simple/card-simple.component';
-
-export const mefDevCardComponents = [CardComponent, CardLongComponent, CardSimpleComponent];
-@NgModule({
-  declarations: mefDevCardComponents,
-  exports: mefDevCardComponents,
-  imports: [
-    CommonModule,
-    MefDevCollapseModule,
-		// PerfectScrollbarModule,
-		PgSelectModule,
-    pgCardModule,
-  ]
-})
-export class MefDevCardModule { }

package/src/lib/markup-kit/collapse/collapse/collapse.component.html

@@ -1,16 +0,0 @@
-<div class="row mt-2 card-title" [attr.aria-expanded]="_active" (click)="clickHeader($event)" role="tab"
-href="javascript:;" [ngClass]="{'collapsed':!_active}">
-  <div class="col-11">
-    <ng-template [ngTemplateOutlet]="CardTitle"></ng-template>
-  </div>
-  <div class="col-1 align-self-center">
-    <i class="fa fa-angle-down float-end " aria-hidden="true" *ngIf="!_active"></i>
-    <i class="fa fa-angle-up float-end " aria-hidden="true" *ngIf="_active"></i>
-  </div>
-</div>
-
-<div class="collapse" [ngClass]="{'show':true,'active':_active,'inactive':!_active}" [@collapseState]="_active?'active':'inactive'">
-    <div class="card-body">
-      <ng-content></ng-content>
-    </div>
-</div>

package/src/lib/markup-kit/collapse/collapse/collapse.component.scss

@@ -1,13 +0,0 @@
-@use './../../../styles/designe-colors.scss' as c;
-@use './../../../styles/fonts.scss';
-
-.card-title{
-    background-color: c.$Light-Gray-3;
-    padding: 17px;
-    margin: 0;
-    @extend .h3;
-    color: black;
-}
-.collapse{
-    background-color: c.$Light-Gray-3;
-}

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

@@ -1,78 +0,0 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Component, ContentChild, ElementRef, Host, HostBinding, Input, TemplateRef } from '@angular/core';
-import { CollapseSetComponent } from '../collapse-set/collapse-set.component';
-
-@Component({
-  selector: 'mefdev-collapse',
-  templateUrl: './collapse.component.html',
-  styleUrls: ['./collapse.component.scss'],
-  animations: [
-    trigger('collapseState', [
-      state(
-        'inactive',
-        style({
-          opacity: '0',
-          height: 0
-        })
-      ),
-      state(
-        'active',
-        style({
-          opacity: '1',
-          height: '*'
-        })
-      ),
-      transition('inactive => active', animate('125ms ease-in')),
-      transition('active => inactive', animate('125ms ease-out'))
-    ])
-  ], 
-  host: {
-    '[class.card]': 'true',
-    '[class.card-default]': 'true',
-    '[class.m-b-0]': 'true'
-  }
-})
-export class CollapseComponent {
-
-  private _disabled = false;
-  _active = false;
-  _el;
-
-  @ContentChild("CardTitle") CardTitle: TemplateRef<void>;
-
-  @Input()
-  @HostBinding('class.disabled')
-  set Disabled(value: boolean) {
-    this._disabled = value;
-  }
-
-  get Disabled(): boolean {
-    return this._disabled;
-  }
-
-  @Input()
-  set Active(value: boolean) {
-    const active = value;
-    if (this._active === active) {
-      return;
-    }
-    if (!this.Disabled) {
-      this._active = active;
-    }
-  }
-
-  get Active(): boolean {
-    return this._active;
-  }
-
-  clickHeader($event: MouseEvent): void {
-    this.Active = !this.Active;
-    /** trigger host collapseSet click event */
-    this._collapseSet.pgClick(this);
-  }
-
-  constructor(@Host() private _collapseSet: CollapseSetComponent, private _elementRef: ElementRef) {
-    this._el = this._elementRef.nativeElement;
-    this._collapseSet.addTab(this);
-  }
-}

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

@@ -1,3 +0,0 @@
-<div class="card-group" [class.horizontal]="Horizontal">
-    <ng-content></ng-content>
-</div>

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

@@ -1,58 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,18 +0,0 @@
- <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

@@ -1,45 +0,0 @@
-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();
-  }
-}