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

package/src/lib/markup-kit/modals/slide-right/slide-right.component.ts

@@ -1,121 +0,0 @@
-import { Component, ContentChild, ElementRef, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
-import { ModalSize } from '../modal-size.enum';
-import { CommonModule } from "@angular/common"; // add for static analizer bug fix
-import { animate, style, transition, trigger } from '@angular/animations';
-
-
-/**
-   * A component representing a slide-right modal window.
-  *
-  * Example of usage:
-  *
-  * ```
-  * <mefdev-slide-right-modal [size]="ModalSize.lg" [show]="showModal">
-  *   <ng-template #modal_header>
-  *     <h4>Modal Header</h4>
-  *   </ng-template>
-  *   <ng-template #modal_footer>
-  *     <button (click)="closeModal()">Close</button>
-  *   </ng-template>
-  *   <div class="modal-body">
-  *     Content goes here...
-  *   </div>
-  * </mefdev-slide-right-modal>
-  * ```
-  * <example-url>https://platform.mef.dev/ui_kit_demo/view/page_components/modals/slide_right</example-url>
-  */
-@Component({
-    selector: 'mefdev-slide-right-modal',
-    templateUrl: './slide-right.component.html',
-    styleUrls: ['./slide-right.component.scss'],
-    animations: [
-        trigger('dialog', [
-            transition('void => *', [
-                style({ transform: 'translate3d(100%,0,0)' }),
-                animate(100)
-            ]),
-            transition('* => void', [
-                animate(100, style({ transform: 'translate3d(100%, 0, 0)' }))
-            ])
-        ])
-    ],
-    standalone: false
-})
-export class SlideRightComponent implements OnInit {
-  protected visible: boolean = false;
-
-  @ViewChild('dialog') protected dialog: ElementRef;
-
-  /**
-   * Reference to the template for the modal header.
-   * Use this template to customize the header of the modal.
-   */
-  @ContentChild("modal_header") modal_header: TemplateRef<void>;
-
-  /**
-   * Reference to the template for the modal footer.
-   * Use this template to customize the footer of the modal.
-   */
-  @ContentChild("modal_footer") modal_footer: TemplateRef<void>;
-
-  /**
-   * Size of the modal.
-   * Defaults to `ModalSize.md`.
-   * Possible values: `ModalSize.sm`, `ModalSize.md`, `ModalSize.lg`, `ModalSize.xl`.
-   */
-  @Input() size:ModalSize = ModalSize.md;
-
-  /**
-   * Flag indicating whether the modal should be shown or hidden.
-   * Set it to `true` to show the modal and `false` to hide it.
-   */
-  @Input() set show(val: boolean){
-    if(val){
-      this.showModal();
-    }
-    else{
-      this.hideModal();
-    }
-  };
-
-  /**
-   * Event emitted when the modal is change state.
-   * Emits a boolean value indicating if the modal is closed(false), or open(true).
-   * Example:
-   * ```
-   * <mefdev-fill-modal (visibleChange)="onModalClosed($event)"></mefdev-fill-modal>
-   * ```
-   */
-  @Output() visibleChange = new EventEmitter<boolean>();
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-  /**
-   * Shows the modal state.
-   * Return a boolean value indicating if the modal is closed(false), or open(true)
-   */
-  getModalState(): boolean{
-    return this.visible;
-  }
-
-  /**
-   * Shows the modal.
-   * Call this method to open the modal window.
-   */
-  public showModal(){
-    this.visible = true;
-    this.visibleChange.emit(this.visible);
-  }
-
-  /**
-   * Hides the modal.
-   * Call this method to close the modal window.
-   */
-  public hideModal(){
-    this.visible = false;
-    this.visibleChange.emit(this.visible);
-  }
-}

package/src/lib/markup-kit/modals/slide-up/slide-up.component.html

@@ -1,15 +0,0 @@
-<div [@dialog] *ngIf="visible" class="dialog">
-	<button (click)="hideModal()" aria-label="Close" class="dialog__close-btn">X</button>
-	<div class="modal-content">
-    <div class="modal-header clearfix text-left">
-          <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 *ngIf="visible" class="overlay" (click)="hideModal()"></div>

package/src/lib/markup-kit/modals/slide-up/slide-up.component.scss

@@ -1,47 +0,0 @@
-.overlay {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 999;
-}
-
-.dialog {
-  z-index: 1000;
-  position: fixed;
-  right: 0;
-  left: 0;
-  top: 50%;
-  bottom: 50%;
-  margin: auto;
-  min-height: 200px;
-  max-height: 90%;
-  min-width: 520px;
-  max-width: 90%;
-  width: fit-content;
-  height: fit-content;
-  overflow: auto;
-  background-color: #fff;
-  padding: 12px;
-  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
-}
-
-.dialog__close-btn {
-  border: 0;
-  background: none;
-  color: #2d2d2d;
-  position: absolute;
-  z-index: 10002;
-  top: 8px;
-  right: 8px;
-  font-size: 1.2em;
-}
-
-.modal-content{
-  .modal-body{
-    min-height: 120px;
-    padding-bottom: 10px;
-  }
-}

package/src/lib/markup-kit/modals/slide-up/slide-up.component.ts

@@ -1,105 +0,0 @@
-import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
-import { ModalSize } from '../modal-size.enum';
-import { CommonModule } from "@angular/common"; // add for static analizer bug fix
-import { animate, style, transition, trigger } from '@angular/animations';
-
-  /**
-  * A component representing a slide-up modal window.
-  *
-  * Example of usage:
-  *
-  * ```
-  * <mefdev-slide-up-modal [show]="showModal">
-  *   <ng-template #modal_header>
-  *     <h4>Modal Header</h4>
-  *   </ng-template>
-  *   <ng-template #modal_footer>
-  *     <button (click)="closeModal()">Close</button>
-  *   </ng-template>
-  *   <div class="modal-body">
-  *     Content goes here...
-  *   </div>
-  * </mefdev-slide-up-modal>
-  * ```
-  * <example-url>https://platform.mef.dev/ui_kit_demo/view/page_components/modals/slide_up</example-url>
-  */
-@Component({
-    selector: 'mefdev-slide-up-modal',
-    templateUrl: './slide-up.component.html',
-    styleUrls: ['./slide-up.component.scss'],
-    animations: [
-        trigger('dialog', [
-            transition('void => *', [
-                style({ transform: 'scale3d(.3, .3, .3)' }),
-                animate(100)
-            ]),
-            transition('* => void', [
-                animate(100, style({ transform: 'scale3d(.0, .0, .0)' }))
-            ])
-        ])
-    ],
-    standalone: false
-})
-export class SlideUpComponent implements OnInit {
-  protected visible: boolean = false;
-  /**
-   * Reference to the template for the modal header.
-   * Use this template to customize the header of the modal.
-   */
-  @ContentChild("modal_header") modal_header: TemplateRef<void>;
-
-  /**
-   * Reference to the template for the modal footer.
-   * Use this template to customize the footer of the modal.
-   */
-  @ContentChild("modal_footer") modal_footer: TemplateRef<void>;
-  /**
-   * Flag indicating whether the modal should be shown or hidden.
-   * Set it to `true` to show the modal and `false` to hide it.
-   */
-  @Input() set show(val: boolean){
-    if(val){
-      this.showModal();
-    }
-    else{
-      this.hideModal();
-    }
-  };
-
-  /**
-   * Event emitted when the modal is change state.
-   * Emits a boolean value indicating if the modal is closed(false), or open(true).
-   */
-  @Output() visibleChange = new EventEmitter<boolean>();
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-  /**
-   * Shows the modal state.
-   * Return a boolean value indicating if the modal is closed(false), or open(true)
-   */
-  getModalState(): boolean{
-    return this.visible;
-  }
-
-  /**
-   * Shows the modal.
-   * Call this method to open the modal window.
-   */
-  public showModal(){
-    this.visible = true;
-    this.visibleChange.emit(this.visible);
-  }
-
-  /**
-   * Hides the modal.
-   * Call this method to close the modal window.
-   */
-  public hideModal(){
-    this.visible = false;
-    this.visibleChange.emit(this.visible);
-  }
-}

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

@@ -1,6 +0,0 @@
-<div class="central-page-container" [ngStyle]="{'width': width}">
-    <div class="central-page-content">
-        <ng-content></ng-content>
-    </div>
-</div>
-  

package/src/lib/markup-kit/page-layouts/central-page/central-page.component.scss

@@ -1,10 +0,0 @@
-.central-page-container {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-}
-
-.central-page-content {
-  flex: 1;
-}

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

@@ -1,58 +0,0 @@
-import { AfterViewChecked, Component, Input, OnDestroy, OnInit } from '@angular/core';
-
-/**
-  * A component representing a central page layout.
-  *
-  * Example of usage:
-  *
-  * ```
-  * <mefdev-central-page [width]="'80%'">
-  *   Content goes here...
-  * </mefdev-central-page>
-  * ```
-  *
-  * <example-url>https://platform.mef.dev/ui_kit_demo/view/page_layouts/central_page</example-url>
-  */
-@Component({
-    selector: 'mefdev-central-page',
-    templateUrl: './central-page.component.html',
-    styleUrls: ['./central-page.component.scss'],
-    standalone: false
-})
-export class CentralPageComponent implements OnInit, OnDestroy, AfterViewChecked {
-
-  constructor(
-  ) {
-  }
-
-  /**
-   * The width of the central page.
-   * Defaults to '100%'.
-   * You can specify the width using CSS units (e.g., '80%', '500px').
-   */
-  @Input() width: string = '100%';
-
-  /**
-   * Lifecycle hook called just before the component is destroyed.
-   * Removes the height style from the main content element.
-   */
-  ngOnDestroy(): void {
-    try{
-      document.getElementById('dataMainContent')!.style.height = '';
-    }catch(ex){};
-  }
-
-  ngOnInit(): void {
-  }
-
-   /**
-   * Lifecycle hook called after the component's view has been checked.
-   * Sets the height of the main content element to '100%'.
-   */
-  ngAfterViewChecked(): void {
-    try{
-      document.getElementById('dataMainContent')!.style.height = '100%'
-    }catch(ex){};
-  }
-
-}

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

@@ -1,3 +0,0 @@
-<div class="central-page-row-container">
-    <ng-content></ng-content>
-</div>

package/src/lib/markup-kit/page-layouts/central-page-row/central-page-row.component.scss

@@ -1,5 +0,0 @@
-.central-page-row-container {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}

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

@@ -1,30 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-
-/**
- * A component representing a central page layout.
- *
- * Example of usage:
- * 
- * ```
- * <mefdev-central-page>
- *   <mefdev-central-page-row>
- *     Content goes here...
- *   </mefdev-central-page-row>
- * </mefdev-central-page>
- * ```
-*/
-@Component({
-    selector: 'mefdev-central-page-row',
-    templateUrl: './central-page-row.component.html',
-    styleUrls: ['./central-page-row.component.scss'],
-    standalone: false
-})
-export class CentralPageRowComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

package/src/lib/markup-kit/page-layouts/index.ts

@@ -1,6 +0,0 @@
-export * from './profile/profile.component';
-export * from './central-page/central-page.component';
-export * from './central-page-row/central-page-row.component';
-export * from './table-page/table-page.component';
-export * from './manage-page/manage-page.component';
-export * from './page-layouts.module';

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

@@ -1,10 +0,0 @@
-<div class="card-tabs">
-    <div class="card-tabs-header" *ngIf="card_title">
-        <div class="card-tabs-title">
-            <ng-template [ngTemplateOutlet]="card_title"></ng-template>
-        </div>
-    </div>
-    <div class="profile-page-tabs card-tabs-content">
-        <ng-content></ng-content>
-    </div>
-</div>

package/src/lib/markup-kit/page-layouts/manage-page/manage-page.component.scss

@@ -1,33 +0,0 @@
-
-@use './../../../styles/vars.scss' as v;
-@use './../../../styles/fonts.scss' as f;
-
-.card-tabs {
-    border-radius: 0px;
-    background: #fff;
-    overflow: hidden;
-}
-
-.card-tabs-header {
-    background-color: v.$Light-Gray-3;
-    padding: 16px 16px;
-    margin-bottom: 0;
-    display: flex;
-    align-items: center;
-}
-
-.card-tabs-title {
-    @extend .h2;
-
-    margin: 0;
-    padding: 0;
-}
-
-.card-tabs-content {
-    padding: 0px 16px;
-}
-
-.profile-page-tabs {
-    background-image: linear-gradient(to bottom, v.$Light-Gray-3 28px, transparent 0%, transparent 100%);
-    background-image: -webkit-linear-gradient(to bottom, v.$Light-Gray-3 28px, transparent 0%, transparent 100%);
-}

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

@@ -1,70 +0,0 @@
-import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';
-
-
-  /**
-  * A component representing a manage page layout.
-  *
-  * Example of usage:
-  * 
-  * ```
-  * <mefdev-manage-page [startTabInd]="0">
-  *   <ng-template #card_title>
-  *     Title of the card
-  *   </ng-template>
-  *   <ng-template #tabs_block>
-  *     Content of the tabs block
-  *   </ng-template>
-  * </mefdev-manage-page>
-  * ```
-  *
-  * Example of usage:
-  * <example-url>https://platform.mef.dev/ui_kit_demo/view/page_layouts/manage_page</example-url>
-  */
-@Component({
-    selector: 'mefdev-manage-page',
-    templateUrl: './manage-page.component.html',
-    styleUrls: ['./manage-page.component.scss'],
-    standalone: false
-})
-export class ManagePageComponent implements OnInit {
-
-  /**
-   * The template reference to the card title.
-   * ```
-   * <mefdev-manage-page>
-   *   <ng-template #card_title>
-   *     Title of the card
-   *   </ng-template>
-   * </mefdev-manage-page>
-   * ```
-   */
-  @ContentChild("card_title") card_title: TemplateRef<void>;
-
-  /**
-   * The template reference to the tabs block.
-   * ```
-   * <mefdev-manage-page>
-   *   <ng-template #tabs_block>
-   *     Content of the tabs block
-   *   </ng-template>
-   * </mefdev-manage-page>
-   * ```
-   */
-  @ContentChild("tabs_block") tabs_block: TemplateRef<void>;
-
-  /**
-   * The index of the starting tab.
-   * ```
-   * <mefdev-manage-page [startTabInd]="0">
-   *      Content goes here...
-   * </mefdev-manage-page>
-   * ```
-   */
-  @Input() startTabInd = 0;
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

package/src/lib/markup-kit/page-layouts/page-layouts.module.ts

@@ -1,26 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ProfileComponent } from './profile/profile.component';
-// import { pgTabsModule } from '../../pg-components/tabs/tabs.module';
-import { CentralPageComponent } from './central-page/central-page.component';
-import { CentralPageRowComponent } from './central-page-row/central-page-row.component';
-import { TablePageComponent } from './table-page/table-page.component';
-import { ManagePageComponent } from './manage-page/manage-page.component';
-
-let mefDevPageLayoutsModuleComponents = [
-  ProfileComponent,
-  CentralPageComponent,
-  CentralPageRowComponent,
-  TablePageComponent,
-  ManagePageComponent
-];
-
-@NgModule({
-  declarations: mefDevPageLayoutsModuleComponents,
-  exports: mefDevPageLayoutsModuleComponents,
-  imports: [
-    CommonModule,
-		// pgTabsModule,
-  ],
-})
-export class MefDevPageLayoutsModule { }

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

@@ -1,31 +0,0 @@
-
-<div class="profile-page">
-    <div class="profile-header">
-        {{header}}
-    </div>
-    <div class="profile-content">
-        <div class="profile-img-wrapper">
-            <img *ngIf="!img || img == ''" src="assets/images/md_icon.png" class="profile-img" />
-            <img *ngIf="img" [src]="img" alt="" class="profile-img custom-img" [ngStyle]="sizeStyle" />
-        </div>
-        <div class="profile-info">
-            <div class="profile-name">
-                {{name}}
-            </div>
-            <div class="profile-description">
-                {{shortDescription}}
-            </div>
-        </div>
-        <div class="profile-column">
-            <ng-template [ngTemplateOutlet]="first_colum"></ng-template>
-        </div>
-        <div class="profile-column">
-            <ng-template [ngTemplateOutlet]="second_colum"></ng-template>
-        </div>
-    </div>
-</div>
-<div class="profile-footer-wrapper">
-    <div class="profile-page-tabs">
-        <ng-template [ngTemplateOutlet]="footer"></ng-template>
-    </div>
-</div>

package/src/lib/markup-kit/page-layouts/profile/profile.component.scss

@@ -1,99 +0,0 @@
-
-/* Clear CSS for ProfileComponent, no Bootstrap or external libraries */
-@use '../../../styles/fonts.scss' as *;
-
-:host {
-    display: block;
-}
-
-.profile-page {
-    background-color: #f5f5f5;
-    color: #222;
-    padding: 24px 24px 0 24px;
-    border-radius: 5px;
-}
-
-.profile-header {
-    @extend .h2;
-}
-
-.profile-content {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 24px;
-    align-items: flex-start;
-    overflow-y: hidden;
-    max-height: 150px;
-}
-
-.profile-img-wrapper {
-    flex: 0 0 224px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 180px;
-    height: -webkit-fill-available;
-}
-
-.profile-img {
-    width: 100%;
-}
-
-.profile-info {
-    flex: 1 1 220px;
-    min-width: 180px;
-}
-
-.profile-name {
-    overflow-y: clip;
-    @extend .body-2;
-}
-
-.profile-description {
-    @extend .body-3;
-    word-break: break-all;
-    overflow-y: clip;
-    margin-bottom: 8px;
-}
-
-.profile-column {
-    flex: 1 1 180px;
-    min-width: 160px;
-    margin-bottom: 8px;
-}
-
-.profile-footer-wrapper {
-    position: relative;
-}
-.profile-data-item {
-    @extend .body-3;
-
-    & > .profile-data-item-value {
-        display: inline;
-        font-weight: bold;
-    }
-}
-
-.profile-page-tabs {
-    background: linear-gradient(to bottom, #f5f5f5 53px, transparent 100%);
-    padding-top: 25px;
-    border-radius: 0 0 8px 8px;
-}
-
-@media (max-width: 900px) {
-    .profile-content {
-        flex-direction: column;
-        gap: 16px;
-    }
-    .profile-img-wrapper, .profile-info, .profile-column {
-        min-width: 0;
-        margin-right: 0;
-    }
-}
-
-@media (max-width: 720px) {
-    .profile-page-tabs {
-        background: linear-gradient(to bottom, #f5f5f5 63px, transparent 100%);
-        padding-top: 35px;
-    }
-}