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

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

@@ -1,53 +0,0 @@
-<mefdev-inner-card
-  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>
-</mefdev-inner-card>

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

@@ -1,72 +0,0 @@
-@use './../../../styles/vars.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,158 +0,0 @@
-import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';
-import { Router } from '@angular/router';
-import { CartTypeColors } from './cart-type-colors.enum';
-
-  /**
-  * Component for displaying a long card with a title, parameters, and description.
-  *
-  * Example of usage:
-  *
-  * ```
-  * <mefdev-card-long
-  *     [type_text]="'Type Text'"
-  *     [type_color]="CartTypeColors.RED"
-  *     [img]="'path/to/image.jpg'"
-  *     [imgUrl]="'path/to/image'"
-  *     [description]="'Card description'">
-  *
-  *     <ng-template #title>
-  *       <!-- Content for the card title -->
-  *     </ng-template>
-
-  *     <ng-template #params>
-  *       <!-- Content for the card parameters -->
-  *     </ng-template>
-
-  *     <ng-template #second_col>
-  *       <!-- Content for the second column -->
-  *     </ng-template>
-
-  *     <ng-template #third_col>
-  *       <!-- Content for the third column -->
-  *     </ng-template>
-  * </mefdev-card-long>
-  * ```
-  *
-  * <example-url>https://platform.mef.dev/ui_kit_demo/view/page_components/card/card_long</example-url>
-  */
-
-@Component({
-    selector: 'mefdev-card-long',
-    templateUrl: './card-long.component.html',
-    styleUrls: ['./card-long.component.scss'],
-    standalone: false
-})
-export class CardLongComponent implements OnInit {
-
-  /**
-   * Template for displaying the title of the card.
-    * ```
-    * <mefdev-card-long>
-    *   <ng-template #title>
-    *     <!-- Content for the card title -->
-    *   </ng-template>
-    * </mefdev-card-long>
-    * ```
-   */
-  @ContentChild("title") title: TemplateRef<void>;
-
-    /**
-   * Template for displaying the parameters of the card.
-    * ```
-    * <mefdev-card-long>
-    *   <ng-template #params>
-    *     <!-- Content for the card params -->
-    *   </ng-template>
-    * </mefdev-card-long>
-    * ```
-   */
-  @ContentChild("params") params: TemplateRef<void>;
-
-  /**
-    * Template for displaying the content of the second column.
-    * ```
-    * <mefdev-card-long>
-    *   <ng-template #second_col>
-    *     <!-- Content for the card second column -->
-    *   </ng-template>
-    * </mefdev-card-long>
-    * ```
-   */
-  @ContentChild("second_col") second_col: TemplateRef<void>;
-
-  /**
-    * Template for displaying the content of the third column.
-    * ```
-    * <mefdev-card-long>
-    *   <ng-template #third_col>
-    *     <!-- Content for the card third column -->
-    *   </ng-template>
-    * </mefdev-card-long>
-    * ```
-   */
-  @ContentChild("third_col") third_col: TemplateRef<void>;
-
-
-  /**
-   * The text for the card type.
-   * @usageNotes
-   * ```
-   * <mefdev-card-long type_text = "'Type'"></<mefdev-card-long>
-   * ```
-   */
-  @Input() type_text: string;
-
-  /**
-   * The color of the card type.
-   * @usageNotes
-   * ```
-   * <mefdev-card-long type_color = "'RED'"></<mefdev-card-long>
-   * ```
-   * Colors: RED, UNSET, GREEN
-
-   */
-  @Input() type_color: CartTypeColors = CartTypeColors.UNSET;
-
-  /**
-   * The path to the image.
-   * @usageNotes
-   * ```
-   * <mefdev-card-long [img] = "'img/path/img.png'"></mefdev-card-long>
-   * ```
-   */
-  @Input() img: string;
-
-   /**
-   * The path, where user goes after click at the image.
-   * @usageNotes
-   * ```
-   * <mefdev-card-long [imgUrl] = "'Img.url'"></mefdev-card-long>
-   * ```
-   */
-  @Input() imgUrl: string;
-
-  /**
-   * The description of the card.
-   * @usageNotes
-   * ```
-   * <mefdev-card-long [description] = "'description'"></mefdev-card-long>
-   * ```
-   */
-  @Input() description: string;
-
-  constructor(
-    private router: Router
-  ) { }
-
-  ngOnInit(): void {
-  }
-
-  /**
-   * Event handler for image click.
-   * Navigates to the specified URL.
-   */
-  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/vars.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,48 +0,0 @@
-import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';
-
-
-/**
-  * Component for displaying a simple card with a title.
-  *
-  * Example of usage:
-  *```
-  * <mefdev-card-simple [disabled]="true">
-  *   <ng-template #card_title>
-  *     <!-- Content for the card title -->
-  *   </ng-template>
-  * </mefdev-card-simple>
-  *```
-  *
-  * <example-url>https://platform.mef.dev/ui_kit_demo/view/page_components/card/card_simple</example-url>
-  */
-@Component({
-    selector: 'mefdev-card-simple',
-    templateUrl: './card-simple.component.html',
-    styleUrls: ['./card-simple.component.scss'],
-    standalone: false
-})
-export class CardSimpleComponent implements OnInit {
-
-  /**
-   * Determines whether the card is disabled or not.
-   */
-  @Input("disabled") isDisabled: boolean = false;
-
-  /**
-   * Template for displaying the title of the card.
-   *```
-   * <mefdev-card-simple>
-   *   <ng-template #card_title>
-   *     <h3>Card Title</h3>
-   *   </ng-template>
-   * </mefdev-card-simple>
-   *```
-   */
-  @ContentChild("card_title") card_title: TemplateRef<void>;
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

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

@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CardComponent } from './card/card.component';
-import { MefDevSelectModule } from '../../pg-components/select/select.module';
-import { MefdevInnerCardModule } 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,
-		MefDevSelectModule,
-    MefdevInnerCardModule,
-  ]
-})
-export class MefDevCardModule { }

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

@@ -1,6 +0,0 @@
-
-export * from './card/card.component';
-export * from './card-long/card-long.component';
-export * from './card-long/cart-type-colors.enum';
-export * from './card-simple/card-simple.component';
-export * from './card.module';

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

@@ -1,17 +0,0 @@
-<div class="row w-100 mt-2 card-title" [attr.aria-expanded]="_active" (click)="clickHeader($event)" role="tab"
-href="javascript:;" [ngClass]="{'collapsed':!_active}">
-  <div class="col">
-    <ng-template [ngTemplateOutlet]="CardTitle"></ng-template>
-  </div>
-  <div class="col">
-    <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 *ngIf="_active"
-     class="card-body mb-3">
-      <ng-content></ng-content>
-    </div>
-</div>

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

@@ -1,17 +0,0 @@
-@use './../../../styles/vars.scss' as c;
-@use './../../../styles/fonts.scss';
-
-:host{
-  background-color: transparent;
-}
-
-.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,131 +0,0 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Component, ContentChild, ElementRef, EventEmitter, Host, HostBinding, Input, Output, TemplateRef } from '@angular/core';
-import { CollapseSetComponent } from '../collapse-set/collapse-set.component';
-
-
-/**
-  * Component for displaying a collapsible content.
-  *
-  *
-  * Example of usage:
-  *```
-  * <mefdev-collapse [Disabled]="false" [Active]="true" (stateChange)="onStateChange($event)">
-  *   <ng-template #CardTitle>
-  *     <!-- Content for the card title -->
-  *     <h3>Card Title</h3>
-  *   </ng-template>
-  *   
-  *   <!-- Content for the collapsible section -->
-  *   <div>
-        Content inside collapse
-  *   </div>
-  * </mefdev-collapse>
-  *
-  *```
-    * <example-url>https://platform.mef.dev/ui_kit_demo/view/page_components/collapse</example-url>
-
-  */
-@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'
-    },
-    standalone: false
-})
-export class CollapseComponent {
-
-  private _disabled = false;
-  _active = false;
-  _el;
-
-  /**
-   * ContentChild for the template of the card title.
-   *
-   * Example:
-   * ```
-   * <ng-template #CardTitle>
-   *   <h3>Card Title</h3>
-   * </ng-template>
-   * ```
-   */
-  @ContentChild("CardTitle") CardTitle: TemplateRef<void>;
-
-  /**
-   * Indicates whether the collapse is disabled.
-   * Set this to `true` to disable the collapse. Defaults to `false`.
-   */
-  @Input()
-  @HostBinding('class.disabled')
-  set Disabled(value: boolean) {
-    this._disabled = value;
-  }
-
-  get Disabled(): boolean {
-    return this._disabled;
-  }
-
-   /**
-   * Indicates whether the collapse is active or not.
-   */
-  @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;
-  }
-
-  /**
-   * Event emitter for the state change of the collapse.
-   * Emits a boolean value indicating whether the collapse is active or not.
-   *
-   * Example:
-   * ```
-   * <mefdev-collapse (stateChange)="onStateChange($event)"></mefdev-collapse>
-   * ```
-   */
-  @Output() stateChange = new EventEmitter<boolean>();
-
-  /**
-   * Event handler for the header click event.
-   * Toggles the active state of the collapse and emits the state change event.
-   *
-   * @param $event The mouse event object.
-   */
-  clickHeader($event: MouseEvent): void {
-    this.Active = !this.Active;
-    this.stateChange.next(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,110 +0,0 @@
-import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { CollapseComponent } from '../collapse/collapse.component';
-
-
-/**
-* Component representing a set of collapsible panels.
-*
-* Example of usage:
-*
-*```
-* <mefdev-collapse-set [Accordion]="true" [Horizontal]="true" [expandAny]="false">
-*   <mefdev-collapse [Disabled]="false" [Active]="true">
-*       <!-- Content for the collapse panel -->
-*       <h3>Panel 1</h3>
-*       <p>Panel 1 content...</p>
-*   </mefdev-collapse>
-
-*   <mefdev-collapse [Disabled]="false" [Active]="false">
-*       <!-- Content for the collapse panel -->
-*       <h3>Panel 2</h3>
-*       <p>Panel 2 content...</p>
-*   </mefdev-collapse>
-
-*   <mefdev-collapse [Disabled]="false" [Active]="false">
-*       <!-- Content for the collapse panel -->
-*       <h3>Panel 3</h3>
-*       <p>Panel 3 content...</p>
-*   </mefdev-collapse>
-* </mefdev-collapse-set>
-*```
-*/
-@Component({
-    selector: 'mefdev-collapse-set',
-    templateUrl: './collapse-set.component.html',
-    styleUrls: ['./collapse-set.component.scss'],
-    encapsulation: ViewEncapsulation.None,
-    standalone: false
-})
-export class CollapseSetComponent {
-  
-  private _accordion = false;
-  private _horizontal = true;
-  private _expandAny = true;
-  panels: CollapseComponent[] = [];
-
-  /**
-   * Indicates whether multiple panels can be expanded simultaneously.
-   * Set this to `true` to allow multiple panels to be expanded. Defaults to `false`.
-   */
-  @Input()
-  set expandAny(value: boolean) {
-    this._accordion = value;
-  }
-
-  get expandAny(): boolean {
-    return this._accordion;
-  }
-
-  /**
-   * Indicates whether the collapse set operates as an accordion.
-   * Set this to `true` to enable accordion behavior. Defaults to `false`.
-   */
-  @Input()
-  set Accordion(value: boolean) {
-    this._accordion = value;
-  }
-
-  get Accordion(): boolean {
-    return this._accordion;
-  }
-
-  /**
-   * Indicates whether the collapse set is displayed horizontally or vertically.
-   * Set this to `true` for horizontal display and `false` for vertical display. Defaults to `true`.
-   */
-  @Input()
-  set Horizontal(value: boolean) {
-    this._horizontal = value;
-  }
-
-  get Horizontal(): boolean {
-    return this._horizontal;
-  }
-
-  /**
-   * Event handler for the click event on a collapse panel.
-   * Closes other panels if the collapse set is an accordion and does not allow multiple expansions.
-   *
-   * @param collapse The clicked collapse component.
-   */
-  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;
-        }
-      });
-    }
-  }
-
-  /**
-   * Adds a collapse panel to the collapse set.
-   *
-   * @param collapse The collapse component to be added.
-   */
-  addTab(collapse: CollapseComponent): void {
-    this.panels.push(collapse);
-  }
-}