@natec/mef-dev-ui-kit 20.0.0-beta.1 → 20.0.1

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

@@ -1,79 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FilteredFieldService } from '../filtered-field.service';
-import { FiltredItemModel } from '../filtred-item.model';
-
-  /**
-  * A container component for filtered fields.
-  *
-  * Example of usage:
-  * ```
-  * <mefdev-filtered-field-container>
-  * 
-  * <mefdev-filtered-field-item [item]="filterItem" (discard)="onDiscardFilter($event)" (openFilter)="onOpenFilter()">
-  * </mefdev-filtered-field-item>
-  *
-  * </mefdev-filtered-field-container>
-  * ```
-  * Example of usage:
-  * <example-url>https://platform.mef.dev/ui_kit_demo/view/utils/filtered_field</example-url>
-  */
-@Component({
-    selector: 'mefdev-filtered-field-container',
-    templateUrl: './filtered-field-container.component.html',
-    styleUrls: ['./filtered-field-container.component.scss'],
-    standalone: false
-})
-export class FilteredFieldContainerComponent implements OnInit {
-
-  /**
-   * An array of filtered item models.
-   */
-  items: FiltredItemModel[] = [];
-
-  constructor(
-    private service: FilteredFieldService
-    ) { }
-
-  /**
-   * Event handler for opening the filter.
-   *
-   * @param item The filtered item model.
-   */
-  onOpenFilter(item: FiltredItemModel){
-    this.service.sendOpenFilter(item);
-  }
-
-    /**
-   * Event handler for discarding the filter.
-   *
-   * @param item The filtered item model.
-   */
-  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(i != -1 && item.newValue == item.standartValue){
-        this.items[i] = item;
-        this.items.splice(i, 1);
-        return;
-      }
-
-      if(i == -1 && (item.newValue == item.standartValue || item.newValue == '') ){
-        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

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

@@ -1,12 +0,0 @@
-@use './../../../../styles/vars.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

@@ -1,75 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FiltredItemModel } from '../filtred-item.model';
-
-/**
-  * Component representing a filtered field item.
-  * 
-  * Example of usage:
-  * ```
-  * <mefdev-filtered-field-item [item]="filterItem" (discard)="onDiscardFilter($event)" (openFilter)="onOpenFilter()">
-  * </mefdev-filtered-field-item>
-  *``` 
-  *
-*/
-@Component({
-    selector: 'mefdev-filtered-field-item',
-    templateUrl: './filtered-field-item.component.html',
-    styleUrls: ['./filtered-field-item.component.scss'],
-    standalone: false
-})
-export class FilteredFieldItemComponent implements OnInit {
-
-  /**
-   * The filtered item model.
-   * ```
-   * <mefdev-filtered-field-item [item]="filterItem">
-   * Content goes here...
-   * </mefdev-filtered-field-item>
-   * ```
-   */
-  @Input() item: FiltredItemModel;
-
-  /**
-   * Event emitted when the filter is discarded.
-   * ```
-   * <mefdev-filtered-field-item (discard)="onDiscardFilter($event)">
-   * Content goes here...
-   * </mefdev-filtered-field-item>
-   * ```
-   */
-  @Output() discard = new EventEmitter<FiltredItemModel>();
-
-  /**
-   * Event emitted when the filter is opened.
-   * ```
-   * <mefdev-filtered-field-item (openFilter)="onOpenFilter()">
-   * Content goes here...
-   * </mefdev-filtered-field-item>
-   * ```
-   */
-  @Output() openFilter = new EventEmitter<any>();
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-  
-  /**
-   * Event handler for opening the filter.
-   * Emits the `openFilter` event.
-   */
-  onOpenFilter(){
-    this.openFilter.next({});
-  }
-
-
-  /**
-   * Event handler for discarding the filter.
-   * Emits the `discard` event with the `item` as the payload.
-   */
-  onDiscard(){
-    this.discard.next(this.item);
-  }
-
-}

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

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

@@ -1,44 +0,0 @@
-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() {}
-
-    /**
-   * Returns an observable that emits the open filter events.
-   */
-  public getOpenFilter(): Observable<FiltredItemModel>{
-    return this.openFilter;
-  }
-
-    /**
-   * Sends an open filter event with the specified item.
-   * @param item The filtered item model.
-   */
-  public sendOpenFilter(item: FiltredItemModel){
-    this.openFilter.next(item);
-  }
-
-    /**
-   * Returns an observable that emits the new filter item events.
-   */
-  public getNewFilterItem(): Observable<FiltredItemModel>{
-    return this.newFilterItem;
-  }
-
-    /**
-   * Sends a new filter item event with the specified item.
-   * @param item The filtered item model.
-   */
-  public sendNewFilterItem(item: FiltredItemModel){
-    this.newFilterItem.next(item);
-  }
-}

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

@@ -1,15 +0,0 @@
-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/filtered-field/index.ts

@@ -1,5 +0,0 @@
-export * from './filtered-field-container/filtered-field-container.component';
-export * from './filtered-field-item/filtered-field-item.component';
-export * from './filtered-field.module';
-export * from './filtered-field.service';
-export * from './filtred-item.model';

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

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

@@ -1,22 +0,0 @@
-@use './../../../styles/vars.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

@@ -1,70 +0,0 @@
-import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';
-import {
-  trigger,
-  state,
-  style,
-  animate,
-  transition,
-} from '@angular/animations';
-
-
-  /**
-  * A component representing a help block with smooth expand animation.
-  *
-  *  Example of usage:
-  *```
-  * <mefdev-help-block [title]="'Help'">
-  *  Content goes here...
-  *    <ng-content></ng-content>
-  * </mefdev-help-block>
-  *```
-  * <example-url>https://platform.mef.dev/ui_kit_demo/view/utils/help_block</example-url>
- */
-@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))
-        ])
-    ],
-    standalone: false
-})
-export class HelpBlockComponent implements OnInit {
-
-  /**
-   * Indicates whether the help block is visible.
-   */
-  isVisible:boolean = true;
-
-  /**
-    * Indicates whether the help block is expanded.
-  */
-  expanded:boolean = false;
-
-
-  /**
-    * The title of the help block.
-    *```
-    * <mefdev-help-block [title]="'Help Block'">
-    *    Content goes here...
-    * </mefdev-help-block>
-    *```
-    */
-  @Input('title') title:string = "Help";
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

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

@@ -1,14 +0,0 @@
-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/src/lib/markup-kit/utils/help-block/index.ts

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

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

@@ -1,66 +0,0 @@
-<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">
-    <mefdev-progress *ngIf="_minimalHeader == false" type="{{ _progressType }}" color="{{ _progressColor }}"
-      indeterminate="true" class=""></mefdev-progress>
-  </div>
-</div>