@natec/mef-dev-ui-kit 16.2.3 → 16.2.5

package/lib/markup-kit/card/card-long/card-long.component.d.ts

@@ -8,7 +8,7 @@ import * as i0 from "@angular/core";
 * Example of usage:
 *
 * ```
-* <medev-card-long
+* <mefdev-card-long
 *     [type_text]="'Type Text'"
 *     [type_color]="CartTypeColors.RED"
 *     [img]="'path/to/image.jpg'"
@@ -30,7 +30,7 @@ import * as i0 from "@angular/core";
 *     <ng-template #third_col>
 *       <!-- Content for the third column -->
 *     </ng-template>
-* </medev-card-long>
+* </mefdev-card-long>
 * ```
 *
 * <example-url>https://mef.dev/ui_kit_demo/view/card/card-long</example-url>
@@ -40,44 +40,44 @@ export declare class CardLongComponent implements OnInit {
     /**
      * Template for displaying the title of the card.
       * ```
-      * <medev-card-long>
+      * <mefdev-card-long>
       *   <ng-template #title>
       *     <!-- Content for the card title -->
       *   </ng-template>
-      * </medev-card-long>
+      * </mefdev-card-long>
       * ```
      */
     title: TemplateRef<void>;
     /**
    * Template for displaying the parameters of the card.
     * ```
-    * <medev-card-long>
+    * <mefdev-card-long>
     *   <ng-template #params>
     *     <!-- Content for the card params -->
     *   </ng-template>
-    * </medev-card-long>
+    * </mefdev-card-long>
     * ```
    */
     params: TemplateRef<void>;
     /**
       * Template for displaying the content of the second column.
       * ```
-      * <medev-card-long>
+      * <mefdev-card-long>
       *   <ng-template #second_col>
       *     <!-- Content for the card second column -->
       *   </ng-template>
-      * </medev-card-long>
+      * </mefdev-card-long>
       * ```
      */
     second_col: TemplateRef<void>;
     /**
       * Template for displaying the content of the third column.
       * ```
-      * <medev-card-long>
+      * <mefdev-card-long>
       *   <ng-template #third_col>
       *     <!-- Content for the card third column -->
       *   </ng-template>
-      * </medev-card-long>
+      * </mefdev-card-long>
       * ```
      */
     third_col: TemplateRef<void>;
@@ -85,7 +85,7 @@ export declare class CardLongComponent implements OnInit {
      * The text for the card type.
      * @usageNotes
      * ```
-     * <medev-card-long type_text = "'Type'"></<medev-card-long>
+     * <mefdev-card-long type_text = "'Type'"></<mefdev-card-long>
      * ```
      */
     type_text: string;
@@ -93,10 +93,10 @@ export declare class CardLongComponent implements OnInit {
      * The color of the card type.
      * @usageNotes
      * ```
-     * <medev-card-long type_color = "'RED'"></<medev-card-long>
+     * <mefdev-card-long type_color = "'RED'"></<mefdev-card-long>
      * ```
      * Colors: RED, UNSET, GREEN
-     
+  
      */
     type_color: CartTypeColors;
     /**
@@ -131,5 +131,5 @@ export declare class CardLongComponent implements OnInit {
      */
     imgClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CardLongComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CardLongComponent, "medev-card-long", never, { "type_text": { "alias": "type_text"; "required": false; }; "type_color": { "alias": "type_color"; "required": false; }; "img": { "alias": "img"; "required": false; }; "imgUrl": { "alias": "imgUrl"; "required": false; }; "description": { "alias": "description"; "required": false; }; }, {}, ["title", "params", "second_col", "third_col"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardLongComponent, "mefdev-card-long", never, { "type_text": { "alias": "type_text"; "required": false; }; "type_color": { "alias": "type_color"; "required": false; }; "img": { "alias": "img"; "required": false; }; "imgUrl": { "alias": "imgUrl"; "required": false; }; "description": { "alias": "description"; "required": false; }; }, {}, ["title", "params", "second_col", "third_col"], never, false, never>;
 }

package/lib/markup-kit/card/card-simple/card-simple.component.d.ts

@@ -5,11 +5,11 @@ import * as i0 from "@angular/core";
   *
   * Example of usage:
   *```
-  * <medev-card-simple [disabled]="true">
+  * <mefdev-card-simple [disabled]="true">
   *   <ng-template #card_title>
   *     <!-- Content for the card title -->
   *   </ng-template>
-  * </medev-card-simple>
+  * </mefdev-card-simple>
   *```
   *
   * <example-url>https://mef.dev/ui_kit_demo/view/card/card-simple</example-url>
@@ -22,16 +22,16 @@ export declare class CardSimpleComponent implements OnInit {
     /**
      * Template for displaying the title of the card.
      *```
-     * <medev-card-simple>
+     * <mefdev-card-simple>
      *   <ng-template #card_title>
      *     <h3>Card Title</h3>
      *   </ng-template>
-     * </medev-card-simple>
+     * </mefdev-card-simple>
      *```
      */
     card_title: TemplateRef<void>;
     constructor();
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CardSimpleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CardSimpleComponent, "medev-card-simple", never, { "isDisabled": { "alias": "disabled"; "required": false; }; }, {}, ["card_title"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardSimpleComponent, "mefdev-card-simple", never, { "isDisabled": { "alias": "disabled"; "required": false; }; }, {}, ["card_title"], ["*"], false, never>;
 }

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

@@ -1,12 +1,80 @@
 import { ElementRef, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import { StepExecutorComponent } from '../step-executor/step-executor.component';
 import * as i0 from "@angular/core";
+/**
+ * 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>
+ * ```
+ *
+  */
 export declare class MefdevExecutorPageComponent implements OnChanges {
     private _mainExecutor;
     private _elementRef;
+    /**
+     * The title of the step
+     * @usageNotes
+     * ```
+     *  <mefdev-executor-page [title]="'Description of situation 1'"></mefdev-executor-page>
+     * ```
+     */
     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>
+     *
+     * ```
+     */
     isActive: boolean;
+    /**
+     * The input parameter that checks whether the step is completed.
+     *
+     * @usageNotes
+     * ```
+     *  <mefdev-executor-page [isCompleted]="mainExecutor.activePageInd >= 0"></mefdev-executor-page>
+     * ```
+     */
     isCompleted: boolean;
+    /**
+     * 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>
+     * ```
+     */
     isCompletedChange: EventEmitter<boolean>;
     elRef: ElementRef;
     constructor(_mainExecutor: StepExecutorComponent, _elementRef: ElementRef);

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

@@ -1,4 +1,7 @@
 import * as i0 from "@angular/core";
+/**
+ * @ignore
+ */
 export declare class StageComponent {
     currentExecutorStep: number;
     isRightModal: boolean;

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

@@ -1,13 +1,104 @@
 import { AfterViewInit, ElementRef, EventEmitter, Renderer2, TemplateRef } from '@angular/core';
 import { MefdevExecutorPageComponent } from '../mefdev-executor-page/mefdev-executor-page.component';
 import * as i0 from "@angular/core";
+/**
+ * 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>
+ *
+ *```
+ */
 export declare class StepExecutorComponent implements AfterViewInit {
     private renderer;
+    /**
+     * 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>
+     * ```
+     */
     view: string;
+    /**
+     * ViewChild reference to the host executor content.
+     */
     container: ElementRef<HTMLElement>;
+    /**
+     * Template for displaying the content of the executor title.
+     *
+     * @usageNotes
+     * ```
+     * <ng-template #title>
+     *   <!-- Content for the executor title -->
+     * </ng-template>
+     * ```
+     */
     title: TemplateRef<void>;
+    /**
+     * Template for displaying the content of the executor description.
+     *
+     * @usageNotes
+     * ```
+     * <ng-template #description>
+     *  <!-- Content for the executor description -->
+     * </ng-template>
+     * ```
+     */
     description: TemplateRef<void>;
+    /**
+     * Template for displaying the content of the executor footer.
+     *
+     * @usageNotes
+     * ```
+     * <ng-template #footer>
+     *    <!-- Content for the executor footer -->
+     * </ng-template>
+     * ```
+     */
     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>
+     * ```
+     */
     onActivePageChange: EventEmitter<MefdevExecutorPageComponent>;
     _activePageInd: number;
     pages: MefdevExecutorPageComponent[];
@@ -16,13 +107,37 @@ export declare class StepExecutorComponent implements AfterViewInit {
     get activePageInd(): number;
     get activePage(): MefdevExecutorPageComponent | null;
     ngAfterViewInit(): void;
+    /**
+     * Check whether there is a next step of the executor. If we are at the last step - disable the 'next' button
+     */
     nextBtnIsDisabled(): boolean;
+    /**
+     * Check whether there is a next step of the executor. If we are at the last step - disable the 'next' button
+     */
     prev(): void;
+    /**
+     * Go back to the previous step
+     */
     cancel(): void;
+    /**
+     * Go to the next step
+     */
     next(): void;
+    /**
+     * Set a specific active page
+     */
     setActivePage(pageNumber: number): void;
+    /**
+     * Add new page
+     */
     addPage(page: MefdevExecutorPageComponent): void;
+    /**
+     * Delete a specific page
+     */
     removeSpecificPage(page: MefdevExecutorPageComponent): void;
+    /**
+     * Delete a page by its index
+     */
     removePageByIndex(index: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<StepExecutorComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<StepExecutorComponent, "mefdev-step-executor", never, { "view": { "alias": "view"; "required": true; }; }, { "onActivePageChange": "onActivePageChange"; }, ["title", "description", "footer"], never, false, never>;

package/lib/markup-kit/slider/index.d.ts

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

package/lib/markup-kit/slider/slider/slider.component.d.ts

@@ -0,0 +1,93 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Component for a slider that allows selecting a range of values.
+ * @example
+ * <mefdev-slider
+ *  [disabled]="false"
+ *  [range] = "{min: 1, max: 10000}"
+ *  [id]= "'slider1'"
+ *  (valueChange)="onChildValueChange($event)"
+ *  ></mefdev-slider>
+ *
+ * <example-url>https://mef.dev/ui_kit_demo/view/typography/slider</example-url>
+*/
+export declare class MefDevSliderComponent {
+    private _range;
+    /**
+     * Unique id for each slider. Use it, if u need more than one slider independent from another on the same page.
+     * @example
+     * <mefdev-slider
+     *  [id]= "'slider1'"
+     * ></mefdev-slider>
+    */
+    id: string;
+    /**
+     * Input Object {min, max} container of the slider
+     * @example
+     * @interval
+     * <mefdev-slider
+     *  [range] = "{min: 1, max: 10000}"
+     * ></mefdev-slider>
+    */
+    set range(range: {
+        min: number;
+        max: number;
+    });
+    get range(): {
+        min: number;
+        max: number;
+    };
+    /**
+     * The minimum value of the slider.
+    */
+    minValue: number;
+    /**
+     * The maximum value of the slider.
+    */
+    maxValue: number;
+    /**
+     * Property indicating whether the component is disabled.
+     * @example
+     * <mefdev-slider
+     *  [disabled]="true"
+     * ></mefdev-slider>
+    */
+    disabled: boolean;
+    /**
+     * Event emitted when the values of the slider change.
+     * It passes an object with `minValue` and `maxValue` properties.
+     * @event MefDevSliderComponent#valueChange
+     * @type {EventEmitter<{ minValue: number; maxValue: number }>}
+     * @example
+     * <mefdev-slider
+     *  (valueChange)="onChildValueChange($event)"
+     * ></mefdev-slider>
+    */
+    valueChange: EventEmitter<{
+        minValue: number;
+        maxValue: number;
+    }>;
+    /**
+     * Method called when the values of the slider change.
+     * Emits the `valueChange` event and calls methods to handle changes in the minimum and maximum values.
+     * @fires MefDevSliderComponent#valueChange
+    */
+    onValueChange(): void;
+    /**
+     * Method to handle changes in the minimum value.
+     * Converts a string to a number and removes all non-numeric characters.
+     * Then, emits the `valueChange` event and updates the value of the "fromSlider" slider.
+     * @fires MefDevSliderComponent#valueChange
+    */
+    onMinValueChange(): void;
+    /**
+     * Method to handle changes in the maximum value.
+     * Converts a string to a number and removes all non-numeric characters.
+     * Then, emits the `valueChange` event and updates the value of the "toSlider" slider.
+     * @fires MefDevSliderComponent#valueChange
+    */
+    onMaxValueChange(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MefDevSliderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MefDevSliderComponent, "mefdev-slider", never, { "id": { "alias": "id"; "required": false; }; "range": { "alias": "range"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, false, never>;
+}

package/lib/markup-kit/slider/slider.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./slider/slider.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+export declare class MefDevSliderModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MefDevSliderModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MefDevSliderModule, [typeof i1.MefDevSliderComponent], [typeof i2.CommonModule, typeof i3.FormsModule], [typeof i1.MefDevSliderComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MefDevSliderModule>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@natec/mef-dev-ui-kit",
-  "version": "16.2.3",
+  "version": "16.2.5",
   "description": "MEF.DEV UI Kit Library",
   "author": {
     "name": "NATEC"

package/public-api.d.ts

@@ -6,6 +6,7 @@ export * from './lib/markup-kit/card/index';
 export * from './lib/markup-kit/modals/index';
 export * from './lib/markup-kit/page-layouts/index';
 export * from './lib/markup-kit/executors';
+export * from './lib/markup-kit/slider/index';
 export * from './lib/pg-components/card/index';
 export * from './lib/pg-components/progress/index';
 export * from './lib/pg-components/select/index';

package/src/lib/styles/pg/vendor/ng-datatable.scss

@@ -225,6 +225,9 @@
     }
   }
 
+.ngx-datatable.fixed-header .datatable-header .datatable-header-inner{
+  padding: 0;
+}
 
 .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell{
   background-color: c.$Light-Gray-2;
@@ -238,10 +241,9 @@
 
 }
 .ngx-datatable .datatable-header .datatable-header-cell .datatable-header-cell-template-wrap{
-  top: -4px;
-  left: -12px;
+  top: 0;
+  left: -2px;
   overflow-y: auto;
-  width: 120%;
 }
 .ngx-datatable.material .datatable-header{
   border: 0 !important;