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

package/src/lib/markup-kit/executors/step-executor/step-executor.component.ts

@@ -1,295 +0,0 @@
-import {
-  AfterViewInit, ChangeDetectorRef, Component,
-  ContentChild, ElementRef, EventEmitter,
-  Input, Output, Renderer2,
-  TemplateRef, ViewChild
-} from '@angular/core';
-import { MefdevExecutorPageComponent } from '../mefdev-executor-page/mefdev-executor-page.component';
-
-/**
- * Wrapper component that represents a specific encapsulated executor.
- *
- * Example of usage:
- *```
- * <mefdev-step-executor #mainExecutor [view]="'regular'">
- *
- *  <ng-template #title>
- *    <!-- Content for the executor title -->
- *  </ng-template>
- *  <ng-template #description>
- *    <!-- Content for the executor description -->
- *  </ng-template>
- *
- *  <mefdev-executor-page
- *     [title]="'Description of situation 1'"
- *     [isActive]="mainExecutor.activePageInd === 0"
- *     [isCompleted]="mainExecutor.activePageInd >= 0">
- *      <!-- Content of the first executor step -->
- *  </mefdev-executor-page>
- *  <mefdev-executor-page
- *    [title]="'Description of situation 2'"
- *    [isActive]="mainExecutor.activePageInd === 1"
- *    [isCompleted]="mainExecutor.activePageInd >= 1">
- *     <!-- Content of the second executor step -->
- *  </mefdev-executor-page>
- *  <mefdev-executor-page
- *    [title]="'Description of situation 3'"
- *    [isActive]="mainExecutor.activePageInd === 2"
- *    [isCompleted]="mainExecutor.activePageInd >= 2">
- *      <!-- Content of the third executor step -->
- *  </mefdev-executor-page>
- *
- *  <ng-template #footer>
- *    <!-- Content for the executor footer -->
- *  <ng-template>
- *
- * </mefdev-step-executor>
- *
- *```
- * <example-url>https://platform.mef.dev/ui_kit_demo/view/utils/main_executor</example-url>
- */
-
-@Component({
-    selector: 'mefdev-step-executor',
-    templateUrl: './step-executor.component.html',
-    styleUrls: ['./step-executor.component.scss'],
-    standalone: false
-})
-
-export class StepExecutorComponent implements AfterViewInit {
-
-    /**
-     * Mandatory input parameter that specifies the type of the step-by-step wizard.
-     * It can have three options: regular, modal, right.
-     *
-     * @usageNotes
-     * ```
-     *  <mefdev-step-executor #mainExecutor [view]="'regular'"></mefdev-step-executor>
-     * ```
-     */
-    @Input({required: true}) view: string;
-
-
-    /**
-     * An optional input parameter that specifies whether to show your executor.
-     * Usually used when you have a slideup or right executor view
-     *
-     * @usageNotes
-     * ```
-     *  <mefdev-step-executor [show]="true" [view]="'right'" #mainExecutor></mefdev-step-executor>
-     * ```
-     */
-    @Input() show: boolean;
-
-
-    /**
-     * ViewChild reference to the host executor content.
-     */
-    @ViewChild('container') container: ElementRef<HTMLElement>;
-
-    /**
-     * Template for displaying the content of the executor title.
-     *
-     * @usageNotes
-     * ```
-     * <ng-template #title>
-     *   <!-- Content for the executor title -->
-     * </ng-template>
-     * ```
-     */
-    @ContentChild('title') title: TemplateRef<void>;
-
-    /**
-     * Template for displaying the content of the executor description.
-     *
-     * @usageNotes
-     * ```
-     * <ng-template #description>
-     *  <!-- Content for the executor description -->
-     * </ng-template>
-     * ```
-     */
-    @ContentChild('description') description: TemplateRef<void>;
-
-    /**
-     * Template for displaying the content of the executor footer.
-     *
-     * @usageNotes
-     * ```
-     * <ng-template #footer>
-     *    <!-- Content for the executor footer -->
-     * </ng-template>
-     * ```
-     */
-    @ContentChild('footer') footer: TemplateRef<void>;
-
-    /**
-     * The output parameter that emits the class of the active page - active step.
-     *
-     * @usageNotes
-     * ```
-     *  <mefdev-step-executor #mainExecutor (onActivePageChange)="getActiveStep($event)"></mefdev-step-executor>
-     * ```
-     */
-    @Output() onActivePageChange: EventEmitter<MefdevExecutorPageComponent> = new EventEmitter<MefdevExecutorPageComponent>();
-
-    /**
-     * An output parameter that conveys the current state of the stepper in modal view
-     *
-     * @usageNotes
-     * ```
-     * <mefdev-step-executor [view]="'modal'" (modalStepExecutorStateChange)="getModalExecutorStateValue($event)" #modalExecutor></mefdev-step-executor>
-     * ```
-     */
-    @Output() modalStepExecutorStateChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-    /**
-     * An output parameter that conveys the current state of the stepper in right view
-     *
-     * @usageNotes
-     * ```
-     * <mefdev-step-executor [view]="'right'" (modalStepExecutorStateChange)="getModalExecutorStateValue($event)" #rightExecutor></mefdev-step-executor>
-     * ```
-     */
-    @Output() rightStepExecutorStateChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-    public _activePageInd: number = 0;
-    public pages: MefdevExecutorPageComponent[] = [];
-
-    constructor(private renderer: Renderer2, private changeDetectorRef: ChangeDetectorRef) {}
-
-    public set activePageInd(activePageNumber: number) {
-        this._activePageInd = activePageNumber;
-        if (activePageNumber >= 0 && this.container) {
-            if (this.container.nativeElement.innerHTML != '') {
-                this.container.nativeElement.innerHTML = '';
-            }
-            this.renderer.appendChild(this.container.nativeElement, this.activePage?.elRef.nativeElement);
-            this.onActivePageChange.emit(this.pages.find((el: MefdevExecutorPageComponent) => el.isActive));
-        }
-    }
-
-    public get activePageInd(): number {
-        return this._activePageInd;
-    }
-
-    get activePage(): MefdevExecutorPageComponent | null {
-        return this.activePageInd == -1 ? null : this.pages[this.activePageInd];
-    }
-
-    ngAfterViewInit(): void {
-        this.renderer?.appendChild(this.container.nativeElement, this.activePage?.elRef.nativeElement);
-        this.onActivePageChange.emit(this.pages.find((el: MefdevExecutorPageComponent) => el.isActive));
-    }
-
-    /**
-     * A function that is allows to track the status of your executor in the modal view
-     */
-    modalStepExecutorVisibleChange(value: boolean) {
-        if (this.view === 'modal') {
-          this.show = value;
-          this.modalStepExecutorStateChange.emit(value);
-        }
-    }
-
-
-    /**
-     * A function that is allows to track the status of your executor in the right view
-     */
-    rightStepExecutorVisibleChange(value: boolean) {
-      if (this.view === 'right') {
-        this.show = value;
-        this.rightStepExecutorStateChange.emit(value);
-      }
-    }
-
-    /**
-     * A function that allows you to close your executor
-     */
-    closeExecutor() {
-      this.show = false;
-      this.changeDetectorRef.detectChanges();
-    }
-
-    /**
-     * Check whether there is a next step of the executor. If we are at the last step - disable the 'next' button
-     */
-    nextBtnIsDisabled(): boolean {
-        return this._activePageInd === this.pages.length - 1;
-    }
-
-    /**
-     * Check whether there is a next step of the executor. If we are at the last step - disable the 'next' button
-     */
-    prev(): void {
-        const newPageInd = this.activePageInd - 1;
-        if (newPageInd >= 0) {
-            this.activePageInd = newPageInd;
-        }
-    }
-
-    /**
-     * Go back to the previous step
-     */
-    cancel(): void {
-        this.activePageInd = 0;
-        const newPageInd = this.activePageInd - 1;
-        if (newPageInd >= 0) {
-            this.activePageInd = newPageInd;
-        }
-    }
-
-    /**
-     * Go to the next step
-     */
-    next(): void {
-        const newPageInd = this.activePageInd + 1;
-        if (newPageInd < this.pages.length) {
-            this.activePageInd = newPageInd;
-        }
-    }
-
-    /**
-     * Set a specific active page
-     */
-    setActivePage(pageNumber: number): void {
-        pageNumber -= 1;
-        if (pageNumber < this.pages.length && pageNumber >= 0) {
-            this.activePageInd = pageNumber;
-        }
-    }
-
-    /**
-     * Add new page
-     */
-    addPage(page: MefdevExecutorPageComponent): void {
-        this.pages.push(page);
-    }
-
-    /**
-     * Delete a specific page
-     */
-    removeSpecificPage(page: MefdevExecutorPageComponent): void {
-        const index: number = this.pages.indexOf(page);
-        if (index !== -1) {
-            this.pages.splice(index, 1);
-            if (index === this.activePageInd) {
-                this.prev();
-            }
-        }
-    }
-
-    /**
-     * Delete a page by its index
-     */
-    removePageByIndex(index: number): void {
-        if (index >= 0 && index < this.pages.length) {
-            this.pages.splice(index, 1);
-            if (index === this.activePageInd) {
-                this.prev();
-            }
-        }
-    }
-
-
-}

package/src/lib/markup-kit/executors/step-executor.module.ts

@@ -1,27 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { StepExecutorComponent } from './step-executor/step-executor.component';
-import { StageComponent } from './stage/stage.component';
-import { FormsModule } from '@angular/forms';
-import { MefdevExecutorPageComponent } from './mefdev-executor-page/mefdev-executor-page.component';
-import { MefDevModalModule } from '../modals';
-
-@NgModule({
-    declarations: [
-        StepExecutorComponent,
-        MefdevExecutorPageComponent,
-        StageComponent
-    ],
-    exports: [
-        StepExecutorComponent,
-        MefdevExecutorPageComponent,
-        StageComponent,
-    ],
-    imports: [
-        MefDevModalModule,
-        CommonModule,
-        FormsModule,
-    ]
-})
-
-export class MefDevStepExecutorModule { }

package/src/lib/markup-kit/modals/fill/fill.component.html

@@ -1,15 +0,0 @@
-<button *ngIf="visible" (click)="hideModal()" aria-label="Close" class="dialog__close-btn">X</button>
-<div [@dialog] *ngIf="visible" class="dialog" #dialog>
-	<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/fill/fill.component.scss

@@ -1,42 +0,0 @@
-.overlay {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: #ffffffd9;
-  z-index: 999;
-}
-
-.dialog {
-  z-index: 1000;
-  position: fixed;
-  right: 0;
-  left: 0;
-  top: 0;
-  margin-left: auto;
-  margin-right: auto;
-  height: 100%;
-  min-height: 200px;
-  min-width: 520px;
-  max-width: 90%;
-  width: fit-content;
-  padding: 12px;
-  overflow-y: auto;
-  display: flex;
-  align-items: center;
-}
-
-.dialog__close-btn {
-  border: 0;
-  background: none;
-  color: #2d2d2d;
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  font-size: 1.2em;
-  z-index: 1001;
-}
-.modal-footer{
-  padding-top: 10px;
-}

package/src/lib/markup-kit/modals/fill/fill.component.ts

@@ -1,126 +0,0 @@
-import { Component, ContentChild, ElementRef, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
-import { CommonModule } from "@angular/common"; // add for static analizer bug fix
-import { animate, style, transition, trigger } from '@angular/animations';
-
-
-/**
-  * Fill Component for a modal window.
-  *
-  * Example of usage:
-  * ```
-  * <mefdev-fill-modal #pin_modal>
-  *   <!-- Modal header content -->
-  *   <ng-template #modal_header>
-  *     <!-- Header content goes here -->
-  *   </ng-template>
-  *
-  *   <!-- Modal footer content -->
-  *   <ng-template #modal_footer>
-  *     <!-- Footer content goes here -->
-  *   </ng-template>
-  * </mefdev-fill-modal>
-  * ```
-  *
-  * <example-url>https://platform.mef.dev/ui_kit_demo/view/page_components/modals/fill</example-url>
-  */
-@Component({
-    selector: 'mefdev-fill-modal',
-    templateUrl: './fill.component.html',
-    styleUrls: ['./fill.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 FillComponent implements OnInit {
-  protected visible: boolean = false;
-
-  @ViewChild('dialog', { static: false }) protected dialog?: ElementRef;
-
-
-  /**
-  * The header template of the modal window.
-  * ```
-  * <mefdev-fill-modal #pin_modal>
-   *   <ng-template #modal_header>
-   *     <!-- Header content goes here -->
-   *   </ng-template>
-   * </mefdev-fill-modal>
-  * ```
-  */
-  @ContentChild("modal_header") modal_header: TemplateRef<void>;
-
-  /**
-  * The footer template of the modal window.
-  * ```
-  * <mefdev-fill-modal #pin_modal>
-   *   <ng-template #modal_footer>
-   *     <!-- Footer content goes here -->
-   *   </ng-template>
-   * </mefdev-fill-modal>
-  * ```
-  */
-  @ContentChild("modal_footer") modal_footer: TemplateRef<void>;
-
-  /**
-   * Input parameter that determines whether to show the modal window.
-   */
-  @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/index.ts

@@ -1,6 +0,0 @@
-export * from './fill/fill.component';
-export * from './slide-up/slide-up.component';
-export * from './slide-right/slide-right.component';
-export * from "./right-filter/right-filter.component";
-export * from "./markup-kit.module";
-export * from "./modal-size.enum";

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

@@ -1,25 +0,0 @@
-import { NgModule } from "@angular/core";
-import { FillComponent } from './fill/fill.component';
-import { SlideUpComponent } from './slide-up/slide-up.component';
-import { SlideRightComponent } from './slide-right/slide-right.component';
-
-import { CommonModule } from "@angular/common";
-import { RightFilterComponent } from "./right-filter/right-filter.component";
-import { MefDevSelectModule } from '../../pg-components/select/select.module';
-
-
-let mefDevModalModuleComponents = [
-  FillComponent,
-  SlideUpComponent,
-  SlideRightComponent,
-  RightFilterComponent
-];
-@NgModule({
-  imports: [
-    CommonModule,
-    MefDevSelectModule
-  ],
-  exports: mefDevModalModuleComponents,
-  declarations: mefDevModalModuleComponents
-})
-export class MefDevModalModule {}

package/src/lib/markup-kit/modals/modal-size.enum.ts

@@ -1,5 +0,0 @@
-export const enum ModalSize {
-    sm = 'sm',
-    md = 'md',
-    lg = 'lg',
-  }

package/src/lib/markup-kit/modals/right-filter/right-filter.component.html

@@ -1,11 +0,0 @@
-<div 
-*ngIf="showStandartOpenButton"
-class="filter-btn" 
-(click)="openModal()"
->
-    <i class="fa fa-filter" aria-hidden="true"></i>
-</div>
-
-<mefdev-slide-right-modal [show]="isOpen" (isClouse)="modalIsCloused()">
-    <ng-content></ng-content>
-</mefdev-slide-right-modal>

package/src/lib/markup-kit/modals/right-filter/right-filter.component.scss

@@ -1,15 +0,0 @@
-.filter-btn{
-    box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1019607843);
-    border-radius: 3px;
-    width: 36px;
-    height: 26px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: fixed;
-    z-index: 2;
-    background-color: white;
-    right: 56px;
-    top: 50px;
-    cursor: pointer;
-}

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

@@ -1,49 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { FilteredFieldService } from '../../utils/filtered-field/filtered-field.service';
-
-
-/**
- * Component representing the right filter.
- */
-@Component({
-    selector: 'mefdev-right-filter',
-    templateUrl: './right-filter.component.html',
-    styleUrls: ['./right-filter.component.scss'],
-    standalone: false
-})
-export class RightFilterComponent implements OnInit {
-
-  /**
-   * Flag indicating whether the right filter is open or closed.
-   */
-  isOpen: boolean = false;
-  
-  @Input() showStandartOpenButton: boolean = true;
-
-  constructor(
-    private filteredFieldService: FilteredFieldService,) { }
-
-  ngOnInit(): void {
-    // Subscribe to the open filter event from the FilteredFieldService
-    // and update the isOpen flag accordingly.
-    this.filteredFieldService.getOpenFilter().subscribe(() => {
-      this.isOpen = true;
-    });
-  }
-
-  /**
-   * Opens or closes the right filter modal.
-   */
-  openModal(){
-    this.isOpen = !this.isOpen;
-  }
-
-  /**
-   * Event handler for when the modal is closed.
-   * Sets the isOpen flag to false.
-   */
-  modalIsCloused(){
-    this.isOpen = false;
-  }
-  
-}

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

@@ -1,14 +0,0 @@
-<div [@dialog] *ngIf="visible" class="dialog" #dialog>
-
-  <div *ngIf="modal_header" class="header">
-      <ng-template [ngTemplateOutlet]="modal_header"></ng-template>
-  </div>
-  <div class="body">
-      <ng-content></ng-content>
-  </div>
-  <div *ngIf="modal_footer" class="footer">
-      <ng-template [ngTemplateOutlet]="modal_footer"></ng-template>
-  </div>
-</div>
-
-<div *ngIf="visible" class="overlay" (click)="hideModal()"></div>

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

@@ -1,42 +0,0 @@
-.overlay {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.2);
-  z-index: 999;
-}
-
-.dialog {
-  z-index: 1000;
-  position: fixed;
-  right: 0;
-  top: 0;
-  height: 100%;
-  width: 500px;
-  background-color: #fff;
-  padding: 16px;
-  overflow-y: auto;
-}
-
-@media (max-width: 768px) {
-  .dialog {
-    width: 300px;
-  }
-}
-
-.dialog__close-btn {
-  border: 0;
-  background: none;
-  color: #2d2d2d;
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  font-size: 1.2em;
-  z-index: 1001;
-}
-
-.footer{
-
-}