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

package/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/mef-dev-ui-tool-kit'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,24 @@
+{
+  "$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/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@natec/mef-dev-ui-kit",
-  "version": "0.0.66",
+  "version": "0.0.67",
+
   "description": "MEF.DEV UI Kit Library",
   "author": {
     "name": "NATEC"
@@ -10,6 +11,7 @@
     "Plugin",
     "mef.dev"
   ],
+
   "exports": {
     "./styles/core": {
       "sass": "./src/lib/styles/pg/core.scss"
@@ -19,19 +21,9 @@
     },
     "./styles/fonts": {
       "sass": "./src/lib/styles/fonts.scss"
-    },
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./natec-mef-dev-ui-kit.d.ts",
-      "esm2020": "./esm2020/natec-mef-dev-ui-kit.mjs",
-      "es2020": "./fesm2020/natec-mef-dev-ui-kit.mjs",
-      "es2015": "./fesm2015/natec-mef-dev-ui-kit.mjs",
-      "node": "./fesm2015/natec-mef-dev-ui-kit.mjs",
-      "default": "./fesm2020/natec-mef-dev-ui-kit.mjs"
     }
   },
+
   "peerDependencies": {
     "@angular/common": "^13.2.0",
     "@angular/core": "^13.2.0"
@@ -41,12 +33,5 @@
     "ngx-bootstrap": "^8.0.0",
     "ngx-ui-loader": "^13.0.0",
     "tslib": "^2.3.0"
-  },
-  "module": "fesm2015/natec-mef-dev-ui-kit.mjs",
-  "es2020": "fesm2020/natec-mef-dev-ui-kit.mjs",
-  "esm2020": "esm2020/natec-mef-dev-ui-kit.mjs",
-  "fesm2020": "fesm2020/natec-mef-dev-ui-kit.mjs",
-  "fesm2015": "fesm2015/natec-mef-dev-ui-kit.mjs",
-  "typings": "natec-mef-dev-ui-kit.d.ts",
-  "sideEffects": false
-}
+  }
+}

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+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/{lib/markup-kit/card/index.d.ts → src/lib/markup-kit/card/index.ts}

@@ -1,3 +1,4 @@
+
 export * from './card/card.component';
 export * from './card-long/card-long.component';
 export * from './card-long/cart-type-colors.enum';

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

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

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

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

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