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

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

@@ -1,20 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule,ModuleWithProviders } from '@angular/core';
-import { CollapseSetComponent } from './collapse-set/collapse-set.component';
-import { CollapseComponent } from './collapse/collapse.component';
-
-export const mefDevCollapseModuleComponents = [CollapseSetComponent, CollapseComponent];
-
-@NgModule({
-  declarations: mefDevCollapseModuleComponents,
-  exports     : mefDevCollapseModuleComponents,
-  imports     : [ CommonModule ]
-})
-
-export class MefDevCollapseModule {
-  static forRoot(): ModuleWithProviders<MefDevCollapseModule> {
-    return {
-      ngModule: MefDevCollapseModule
-    };
-  }
-}

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

@@ -1,3 +0,0 @@
-export * from './collapse-set/collapse-set.component';
-export * from './collapse/collapse.component';
-export * from './collapse.module';

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

@@ -1,4 +0,0 @@
-export * from './stage/stage.component';
-export * from './step-executor/step-executor.component';
-export * from './mefdev-executor-page/mefdev-executor-page.component';
-export * from './step-executor.module';

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

@@ -1,111 +0,0 @@
-import {
-  Component, ElementRef, EventEmitter, Host,
-  Input, OnChanges, Output, SimpleChanges
-} from '@angular/core';
-import { StepExecutorComponent } from '../step-executor/step-executor.component';
-
-/**
- * A component that allows us to create a content page - a step in our executor.
- * Each individual step can have different styles, content and settings.
- *
- * Example of usage:
- *
- * ```
- *  <mefdev-executor-page
- *     [title]="'Executor title 1'"
- *     [isActive]="mainExecutor.activePageInd === 0"
- *     [isCompleted]="mainExecutor.activePageInd >= 0"
- *     class="yourClass">
- *      <!-- Content of the first executor step -->
- *  </mefdev-executor-page>
- *  <mefdev-executor-page
- *     [title]="'Executor title 2'"
- *     [isActive]="mainExecutor.activePageInd === 1"
- *     [isCompleted]="mainExecutor.activePageInd >= 1"
- *     class="yourClass">
- *      <!-- Content of the second executor step -->
- *  </mefdev-executor-page>
- *  <mefdev-executor-page
- *     [title]="'Executor title 3'"
- *     [isActive]="mainExecutor.activePageInd === 2"
- *     [isCompleted]="mainExecutor.activePageInd >= 2"
- *     class="yourClass">
- *      <!-- Content of the third executor step -->
- *  </mefdev-executor-page>
- * ```
- *
-  */
-
-@Component({
-    selector: 'mefdev-executor-page',
-    template: '<ng-content></ng-content>',
-    standalone: false
-})
-
-export class MefdevExecutorPageComponent implements OnChanges {
-
-  /**
-   * The title of the step
-   * @usageNotes
-   * ```
-   *  <mefdev-executor-page [title]="'Description of situation 1'"></mefdev-executor-page>
-   * ```
-   */
-  @Input() title: string;
-
-  /**
-   * The input parameter that corresponds to whether the current step matches the respective page.
-   * The value of the active page is passed by reference from the specific component StepExecutorComponent.
-   *
-   * @usageNotes
-   * ```
-   *  <mefdev-step-executor #mainExecutor>
-   *    <mefdev-executor-page [isActive]="mainExecutor.activePageInd === 0">
-   *    <mefdev-executor-page [isActive]="mainExecutor.activePageInd === 1">
-   *    <mefdev-executor-page [isActive]="mainExecutor.activePageInd === 2">
-   *  </<mefdev-step-executor>
-   *
-   * ```
-   */
-  @Input() isActive: boolean = false;
-
-
-  /**
-   * The input parameter that checks whether the step is completed.
-   *
-   * @usageNotes
-   * ```
-   *  <mefdev-executor-page [isCompleted]="mainExecutor.activePageInd >= 0"></mefdev-executor-page>
-   * ```
-   */
-  @Input() isCompleted: boolean = false;
-
-  /**
-   * The output parameter that emits a boolean value indicating whether our completed step has changed.
-   *
-   * @usageNotes
-   * ```
-   *  <mefdev-executor-page (isCompletedChange)="onStepChanged($event)"></mefdev-executor-page>
-   * ```
-   */
-  @Output() isCompletedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-  public elRef: ElementRef;
-
-  constructor(
-      @Host() private _mainExecutor: StepExecutorComponent,
-      private _elementRef: ElementRef
-  ) {
-    this.elRef = _elementRef;
-    _mainExecutor.pages.push(this);
-    if (_mainExecutor.activePageInd == -1) {
-      _mainExecutor.activePageInd = 0;
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    this.isCompletedChange.emit(changes['isCompleted']?.currentValue);
-  }
-
-
-}

package/src/lib/markup-kit/executors/stage/stage.component.html

@@ -1,23 +0,0 @@
-<div class="step">
-    <ng-container *ngIf="!isCompleted else done">
-        <svg width="36" height="36" viewBox="0 0 36 36" [ngStyle]="isRightModal ? { 'fill': '#FFFFFF' } : { 'fill': '#F3F3F3' }">
-            <rect width="36" height="36" rx="18" />
-            <text class="body-3" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="16" fill="black">
-                {{ currentExecutorStep }}
-            </text>
-        </svg>
-        <div class="body-6 descriptionStepText" *ngIf="!isRightModal">
-            {{ title }}
-        </div>
-    </ng-container>
-</div>
-<ng-template #done>
-    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <rect x="0.5" y="0.5" width="35" height="35" rx="17.5" stroke="#929292"/>
-        <path d="M24.7373 10L14.5466 20.3769L11.2415 17.0114L8 20.3122L11.3051 23.6777L14.5678 27L17.8093 23.6992L28 13.3224L24.7373 10Z"
-              fill="#28B446"/>
-    </svg>
-    <span class="body-6 descriptionStepText" *ngIf="!isRightModal">
-        {{ title }}
-    </span>
-</ng-template>

package/src/lib/markup-kit/executors/stage/stage.component.scss

@@ -1,9 +0,0 @@
-.step {
-    display: flex;
-    align-items: center;
-    column-gap: 11px;
-
-    .descriptionStepText {
-      width: 77px;
-    }
-}

package/src/lib/markup-kit/executors/stage/stage.component.ts

@@ -1,21 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-/**
- * @ignore
- */
-
-@Component({
-    selector: 'mefdev-stage',
-    templateUrl: './stage.component.html',
-    styleUrls: ['./stage.component.scss'],
-    standalone: false
-})
-
-export class StageComponent {
-
-  @Input() currentExecutorStep: number;
-  @Input() isRightModal: boolean;
-  @Input() isCompleted: boolean;
-  @Input() title: string;
-
-}

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

@@ -1,127 +0,0 @@
-<!--view == regular-->
-
-<div class="stepExecutorBlock" *ngIf="view === 'regular'">
-  <header class="stepExecutorHeader">
-    <div class="stepExecutorHeaderText">
-      <h1 class="title">
-        <ng-container [ngTemplateOutlet]="title"></ng-container>
-      </h1>
-      <p class="body-5">
-        <ng-container [ngTemplateOutlet]="description"></ng-container>
-      </p>
-    </div>
-    <div class="steps">
-      <mefdev-stage *ngFor="let page of pages; let pageIndex = index"
-                    [isRightModal]="false"
-                    [title]="page.title"
-                    [currentExecutorStep]="pageIndex + 1"
-                    [isCompleted]="page.isCompleted">
-      </mefdev-stage>
-    </div>
-  </header>
-
-  <div *ngIf="activePage" class="executorChangeContent">
-    <div #container></div>
-  </div>
-
-  <div class="footerButtons">
-    <ng-container [ngTemplateOutlet]="footer"></ng-container>
-  </div>
-</div>
-
-
-<!--view == modal-->
-
-<mefdev-slide-up-modal [show]="show" (visibleChange)="modalStepExecutorVisibleChange($event)" *ngIf="view === 'modal'">
-  <div class="modalStepExecutor">
-
-    <header class="modalHeader">
-      <div class="headerModalText">
-        <div class="textAndCloseButton">
-          <h1 class="title">
-            <ng-container [ngTemplateOutlet]="title"></ng-container>
-          </h1>
-          <p class="body-5">
-            <ng-container [ngTemplateOutlet]="description"></ng-container>
-          </p>
-        </div>
-        <article class="closeBtn" (click)="closeExecutor()">
-          <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd"
-                  d="M6.26735 7.68135L0.610352 2.02435L2.02435 0.610352L7.68135 6.26735L13.3384 0.610352L14.7524 2.02435L9.09535 7.68135L14.7524 13.3384L13.3384 14.7524L7.68135 9.09535L2.02435 14.7524L0.610352 13.3384L6.26735 7.68135Z"
-                  fill="#4D4D4D"/>
-          </svg>
-        </article>
-      </div>
-      <div class="modalSteps">
-        <mefdev-stage *ngFor="let page of pages; let pageIndex = index"
-                      [isRightModal]="false"
-                      [title]="page.title"
-                      [currentExecutorStep]="pageIndex + 1"
-                      [isCompleted]="page.isCompleted">
-        </mefdev-stage>
-      </div>
-    </header>
-
-    <main *ngIf="activePage" class="modalExecutorMainContent">
-      <div #container></div>
-    </main>
-
-    <footer class="modalFooter">
-      <ng-container [ngTemplateOutlet]="footer"></ng-container>
-    </footer>
-
-  </div>
-</mefdev-slide-up-modal>
-
-<!--view == right-->
-
-<mefdev-slide-right-modal [show]="show" (visibleChange)="rightStepExecutorVisibleChange($event)" *ngIf="view === 'right'">
-  <div class="rightExecutorBlock">
-
-    <header class="rightExecutorHeader">
-      <div class="rightExecutorTextAndCloseButton">
-      <span class="body-1">
-        <ng-container [ngTemplateOutlet]="title"></ng-container>
-      </span>
-        <p class="body-5">
-          <ng-container [ngTemplateOutlet]="description"></ng-container>
-        </p>
-      </div>
-      <div class="closeButton" (click)="closeExecutor()">
-        <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" clip-rule="evenodd"
-                d="M16.0566 1.59971L14.6566 0.199707L8.05664 6.79971L1.45664 0.199707L0.0566406 1.59971L6.65664 8.19971L0.0566406 14.7997L1.45664 16.1997L8.05664 9.59971L14.6566 16.1997L16.0566 14.7997L9.45664 8.19971L16.0566 1.59971Z"
-                fill="#525252"/>
-        </svg>
-      </div>
-    </header>
-
-    <div class="line">
-      <svg width="100%" height="1" xmlns="http://www.w3.org/2000/svg">
-        <rect width="100%" height="1" fill="#4D4D4D"></rect>
-      </svg>
-    </div>
-
-    <div class="contentExecutor">
-      <div class="rightChangeContent">
-        <div *ngIf="activePage" class="executorChangeContent">
-          <div #container></div>
-        </div>
-        <div class="rightSteps">
-          <mefdev-stage *ngFor="let page of pages; let pageIndex = index"
-                        [isRightModal]="true"
-                        [title]="page.title"
-                        [currentExecutorStep]="pageIndex + 1"
-                        [isCompleted]="page.isCompleted">
-          </mefdev-stage>
-        </div>
-      </div>
-    </div>
-
-    <footer class="rightFooter">
-      <ng-container [ngTemplateOutlet]="footer"></ng-container>
-    </footer>
-
-  </div>
-</mefdev-slide-right-modal>

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

@@ -1,225 +0,0 @@
-.stepExecutorBlock {
-  height: auto;
-  display: flex;
-  flex-direction: column;
-
-  .stepExecutorHeader {
-    padding: 49px 71px 40px 154px;
-    display: flex;
-    flex-direction: column;
-    row-gap: 23px;
-
-    .stepExecutorHeaderText {
-      display: flex;
-      flex-direction: column;
-      row-gap: 8px;
-
-      .title {
-        color: #4D4D4D;
-      }
-
-      p {
-        display: block;
-        width: 234px;
-        height: auto;
-        color: #4D4D4D;
-      }
-    }
-
-    .steps {
-      display: flex;
-      flex-wrap: wrap;
-      column-gap: 23px;
-      row-gap: 17px;
-    }
-
-  }
-
-  .executorChangeContent {
-    padding: 46px 31px 57px 154px;
-    width: 100%;
-    min-height: 359px;
-    height: auto;
-    background-color: #F3F3F3;
-  }
-
-  .footerButtons {
-    margin-top: 46px;
-    padding-left: 154px;
-    padding-bottom: 74px;
-  }
-
-}
-
-.modalStepExecutor {
-  min-width: 898px;
-  max-width: 898px;
-  width: auto;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.11);
-
-  .modalHeader {
-    height: auto;
-    padding: 36px 25px 32px 33px;
-    display: flex;
-    flex-direction: column;
-    row-gap: 13px;
-
-    .headerModalText {
-      display: flex;
-      justify-content: space-between;
-
-      .textAndCloseButton {
-        display: flex;
-        column-gap: 23px;
-      }
-
-      .closeBtn {
-        width: 33px;
-        height: 33px;
-        border-radius: 5px;
-        background-color: #F3F3F3;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-
-        &:hover {
-          svg path {
-            fill: #CF0106;
-          }
-        }
-      }
-
-      p {
-        width: 235px;
-        color: #4D4D4D;
-      }
-    }
-
-    .modalSteps {
-
-      max-width: 724px;
-      width: auto;
-      display: flex;
-      flex-wrap: wrap;
-      column-gap: 23px;
-    }
-  }
-
-  .modalExecutorMainContent {
-    padding: 29px 45px 31px 33px;
-    background-color: #F3F3F3;
-    min-height: 345px;
-    height: auto;
-  }
-
-  .modalFooter {
-    padding: 32px 0 35px 33px;
-    display: flex;
-    column-gap: 17px;
-  }
-}
-
-.rightExecutorBlock {
-  position: relative;
-  padding: 25px 19px 43px;
-  width: 100%;
-  min-height: 100vh;
-  height: auto;
-  background-color: #F3F3F3;
-  border-radius: 5px;
-
-  .rightExecutorHeader {
-    display: flex;
-    justify-content: space-between;
-
-    .rightExecutorTextAndCloseButton {
-      display: flex;
-      flex-direction: column;
-      row-gap: 8px;
-
-      span, p {
-        height: auto;
-        width: 225px;
-      }
-
-      p {
-        color: #4D4D4D;
-      }
-    }
-
-    .closeButton svg {
-      cursor: pointer;
-
-      &:hover {
-        path {
-          fill: #CF0106;
-        }
-      }
-    }
-  }
-
-  .line {
-    margin-top: 9px;
-    margin-bottom: 37px;
-  }
-
-  .contentExecutor {
-    .rightChangeContent {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 25px;
-
-      .executorChangeContent {
-        width: 100%;
-        max-width: 75%;
-        height: auto;
-      }
-      .rightSteps {
-        display: flex;
-        flex-direction: column;
-        row-gap: 22px;
-      }
-    }
-  }
-
-  .rightFooter {
-    margin-top: 15px;
-    position: absolute;
-    bottom: 15px;
-    right: 15px;
-    display: flex;
-    column-gap: 16px;
-  }
-
-}
-
-@media screen and (max-width: 768px) {
-  .stepExecutorBlock {
-    .stepExecutorHeader {
-      padding: 21px 41px;
-    }
-
-    .executorChangeContent {
-      padding: 46px 31px 57px 54px;
-    }
-
-    .footerButtons {
-      padding: 41px;
-    }
-  }
-
-  .modalStepExecutor {
-    .modalHeader {
-
-      .headerModalText .textAndCloseButton {
-        display: flex;
-        flex-direction: column;
-      }
-
-      .modalSteps {
-        row-gap: 21px;
-      }
-    }
-  }
-}