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

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

@@ -1,129 +0,0 @@
-import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';
-
-
-/**
- * A component representing a user profile.
- *
- * Example of usage:
- * 
- * ```
- * <mefdev-profile
- *   [name]="'John Doe'"
- *   [img]="'assets/profile.png'"
- *   [shortDescription]="'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'"
- *   [header]="'User Profile'"
- *   [circleImg]="'true'">
- *   <ng-template #first_colum>
- *     <!-- Content for the first column -->
- *   </ng-template>
- *   <ng-template #second_colum>
- *     <!-- Content for the second column -->
- *   </ng-template>
- *   <ng-template #footer>
- *     <!-- Content for the footer -->
- *   </ng-template>
- * </mefdev-profile>
- * ```
- *
-  * <example-url>https://platform.mef.dev/ui_kit_demo/view/page_layouts/profile</example-url>
-  */
-@Component({
-    selector: 'mefdev-profile',
-    templateUrl: './profile.component.html',
-    styleUrls: ['./profile.component.scss'],
-    standalone: false
-})
-export class ProfileComponent implements OnInit {
-
-  /**
-  * The template reference to the content of the first column.
-  *```
-  *   <ng-template #first_colum>
-  *     <!-- Content for the first column -->
-  *   </ng-template>
-  *```
-  */
-  @ContentChild("first_colum") first_colum: TemplateRef<void>;
-
-  /**
-   * The template reference to the content of the second column.
-  *```
-  *   <ng-template #second_colum>
-  *     <!-- Content for the second column -->
-  *   </ng-template>
-  *```
-   */
-  @ContentChild("second_colum") second_colum: TemplateRef<void>;
-
-    /**
-  * The template reference to the content of the footer.
-  *```
-  *   <ng-template #footer>
-  *     <!-- Content for the footer -->
-  *   </ng-template>
-  *```
-  */
-  @ContentChild("footer") footer: TemplateRef<void>;
-
-  /**
-   * The name of the user.
-   * ```
-   * <mefdev-profile [name]="'John Doe'"></mefdev-profile>
-   * ```
-   */
-  @Input() name:string;
-
-   /**
-   * The URL of the user's profile image.
-   * ```
-   * <mefdev-profile [img]="'assets/profile.png'"></mefdev-profile>
-   * ```
-   */
-  @Input() img: string = '';
-
-  /**
-   * A short description of the user.
-   * ```
-   * <mefdev-profile [shortDescription]="'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'"></mefdev-profile>
-   * ```
-   */
-  @Input() shortDescription: string;
-
-  /**
-   * The header title of the profile component.
-   * ```
-   * <mefdev-profile [header]="'User Profile'"></mefdev-profile>
-   * ```
-   */
-  @Input() header: string;
-
-  /**
-   * A flag indicating whether to display the profile image as a circle. Default "false".
-   * ```
-   * <mefdev-profile [circleImg]="'true'"></mefdev-profile>
-   * ```
-   */
-  @Input() circleImg: boolean = false;
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-  get sizeStyle(){
-    // return { 'width.px': this.width, 'height.px': this.height };
-    /**
-   * Returns the CSS style for the profile image size and shape.
-   */
-    if(!this.circleImg){
-      return {};
-    }
-
-    return {
-      'border-top-left-radius': `50%`,
-      'border-top-right-radius': `50%`,
-      'border-bottom-right-radius': `50%`,
-      'border-bottom-left-radius': `50%`,
-    };
-  }
-}

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

@@ -1,9 +0,0 @@
-<div class="row">
-    <div class="col-12 filter-colum">
-        <ng-template [ngTemplateOutlet]="filter_colum"></ng-template> 
-    </div>
-</div>
-
-<div class="table-responsive" >
-    <ng-content></ng-content>
-</div>

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

@@ -1,42 +0,0 @@
-import { Component, ContentChild, OnInit, TemplateRef } from '@angular/core';
-
-
-  /**
-  * A component representing a table page layout.
-  *
-  * Example of usage:
-  * 
-  * ```
-  * <mefdev-table-page>
-  *   <ng-template #filter_colum>
-  *     <!-- Content for the filter column -->
-  *   </ng-template>
-  * </mefdev-table-page>
-  * ```
-  *  
-  * <example-url>https://platform.mef.dev/ui_kit_demo/view/page_layouts/table_page</example-url>
-  */
-@Component({
-    selector: 'mefdev-table-page',
-    templateUrl: './table-page.component.html',
-    styleUrls: ['./table-page.component.scss'],
-    standalone: false
-})
-export class TablePageComponent implements OnInit {
-
-  /**
-    * The template reference to the content of the filter column.
-    * ```
-    *   <ng-template #filter_colum>
-    *     <!-- Content for the filter column -->
-    *   </ng-template>
-    * ```
-  */
-  @ContentChild("filter_colum") filter_colum: TemplateRef<void>;
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

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

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

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

@@ -1,11 +0,0 @@
-<div class="range_container row">
-    <div class="inputs_control ">
-      <input class="form_control_container__time__input h3"  [(ngModel)]="minValue" [disabled]="disabled" (ngModelChange)="onMinValueChange()">
-      <input class="form_control_container__time__input h3"  [(ngModel)]="maxValue" [disabled]="disabled" (ngModelChange)="onMaxValueChange()">
-    </div>
-    <div class="sliders_control">
-      <input id="fromSlider" type="range"  [(ngModel)]="minValue" [min]="range.min" [max]="range.max" (ngModelChange)="onValueChange()">
-      <input id="toSlider" type="range"  [(ngModel)]="maxValue" [min]="range.min" [max]="range.max" (ngModelChange)="onValueChange()" 
-          [style]="{'--minValue': minValue,  '--maxValue': maxValue, '--minFromValue': range.min, '--maxToValue': range.max}">
-    </div>
-</div>

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

@@ -1,106 +0,0 @@
-@use '../../../styles/vars.scss' as c;
-
-.sliders_control {
-  position: relative;
-  min-height: 50px;
-}
-
-.inputs_control {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  font-size: 24px;
-  color: #635a5a;
-
-  .form_control_container__time__input{
-    width: 80px;
-    height: 28px;
-    border-radius: 5px;
-    border: none;
-    background: #FFF;
-    text-align: center;
-    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.10);
-  }
-}
-/* Для WebKit (Chrome, Safari) */
-// Лівий слайдер
-#fromSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  pointer-events: all;
-  width: 16px;
-  height: 16px;
-  background-color: c.$Red;
-  border-radius: 50%;
-  cursor: pointer;
-  margin-top: 13px;
-}
-// Правий слайдер
-#toSlider::-webkit-slider-thumb{
--webkit-appearance: none;
-  pointer-events: all;
-  width: 16px;
-  height: 16px;
-  background-color: c.$Red;
-  border-radius: 50%;
-  cursor: pointer;
-  margin-top: -7px;
-}
-/* Для Mozilla Firefox */
-input[type=range]::-moz-range-thumb {
-  pointer-events: all;
-  width: 16px;
-  height: 16px;
-  background-color: c.$Red;
-  border-radius: 50%;
-  cursor: pointer;
-}
-/* Для WebKit (Chrome, Safari) */
-input[type=range]::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, c.$Light-Gray-1 0%, c.$Light-Gray-1 calc(((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue))) * 100%), transparent calc(((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue))) * 100%), transparent calc(((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue))) * 100%), c.$Light-Gray-1 calc(((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue))) * 100%), c.$Light-Gray-1 100%);
-  height: 3px;
-}
-
-/* Для Mozilla Firefox */
-input[type=range]::-moz-range-track {
-  background: linear-gradient(to right, c.$Light-Gray-1 0%, c.$Light-Gray-1 calc(((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue))) * 100%), transparent calc(((var(--minValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue))) * 100%), transparent calc(((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue))) * 100%), c.$Light-Gray-1 calc(((var(--maxValue) - var(--minFromValue)) / (var(--maxToValue) - var(--minFromValue))) * 100%), c.$Light-Gray-1 100%);
-  height: 3px;
-}
-
-input[type=range]::-webkit-slider-thumb:active {
-  box-shadow: inset 0 0 3px c.$Red, 0 0 9px c.$Red;
-  -webkit-box-shadow: inset 0 0 3px c.$Red, 0 0 9px c.$Red;
-}
-
-input[type=number] {
-  color: red;
-  width: 50px;
-  height: 30px;
-  font-size: 20px;
-  border: none;
-}
-
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button {
-   opacity: 0.2;
-}
-
-input[type="range"] {
-  -webkit-appearance: none;
-  appearance: none;
-  height: 3px;
-  width: 100%;
-  position: relative;
-  background-color: c.$Red;
-  pointer-events: none;
-}
-
-/* Зробимо сіру риску коротше, щоб вона не виходила на червоний слайдер зверху */
-input[type=range]::-moz-range-progress {
-  background-color: transparent;
-  height: 3px;
-}
-
-#fromSlider {
-  height: 0;
-  z-index: 9999;
-}

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

@@ -1,124 +0,0 @@
-import { Component, Input, Output, EventEmitter } 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://platform.mef.dev/ui_kit_demo/view/controls/slider</example-url>    
-*/
-@Component({
-    selector: 'mefdev-slider',
-    templateUrl: './slider.component.html',
-    styleUrls: ['./slider.component.scss'],
-    standalone: false
-})
-export class MefDevSliderComponent {
-
-  private _range = { min: 1, max: 1000 };
-
-  /**
-   * 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>
-  */
-  @Input() id: string;
-
-
-  /**
-   * Input Object {min, max} container of the slider
-   * @example
-   * @interval
-   * <mefdev-slider
-   *  [range] = "{min: 1, max: 10000}"
-   * ></mefdev-slider>
-  */
-  @Input('range')
-  
-  set range(range: { min: number, max: number }) {
-    this._range = range;
-    this.minValue = range.min;
-    this.maxValue = range.max;
-  }
-  public get range(): { min: number, max: number } {
-    return this._range;
-  }
-
-  /**
-   * The minimum value of the slider.
-  */
-  minValue:number = this.range.min
-
-  /**
-   * The maximum value of the slider.
-  */
-  maxValue:number = this.range.max
-
-  
-
-  /**
-   * Property indicating whether the component is disabled.
-   * @example
-   * <mefdev-slider
-   *  [disabled]="true"
-   * ></mefdev-slider>
-  */
-  @Input() disabled : boolean= false;
-
-  /**
-   * 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>
-  */
-  @Output() valueChange: EventEmitter<{ minValue: number; maxValue: number }> = new EventEmitter();
-
-  /**
-   * 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() {
-    this.valueChange.emit({ minValue: this.minValue, maxValue: this.maxValue });
-    this.minValue = this.minValue
-    this.onMinValueChange()
-    this.onMaxValueChange()
-  }
-
-  /**
-   * 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() {
-    const numericValue = parseFloat(this.minValue.toString().replace(/[^\d.]/g, ''));
-    this.minValue = isNaN(numericValue) ? 0 : numericValue; 
-    this.valueChange.emit({ minValue: this.minValue, maxValue: this.maxValue });
-    const fromSlider = document.getElementById(`fromSlider-${this.id}`) as HTMLInputElement;
-  }
-
-  /**
-   * 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() {
-    const numericValue = parseFloat(this.maxValue.toString().replace(/[^\d.]/g, ''));
-    this.maxValue = isNaN(numericValue) ? 0 : numericValue; // Перевірка на NaN і присвоєння 0, якщо не вдалося конвертувати в число
-    this.valueChange.emit({ minValue: this.minValue, maxValue: this.maxValue });
-    const toSlider = document.getElementById(`toSlider-${this.id}`) as HTMLInputElement;
-  }
-}

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

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MefDevSliderComponent } from './slider/slider.component';
-import { FormsModule } from '@angular/forms';
-
-
-
-@NgModule({
-  declarations: [
-    MefDevSliderComponent
-  ],
-  exports: [
-    MefDevSliderComponent
-  ],
-  imports: [
-    CommonModule,
-    FormsModule,
-  ]
-})
-export class MefDevSliderModule { }

package/src/lib/markup-kit/utils/datepicker/datepicker/datepicker.component.html

@@ -1,87 +0,0 @@
-<div class="datepicker-container" [class.disabled]="disabled">
-
-  <!-- Input, save & edit buttons -->
-    <div class="input-container form-group">
-        <label *ngIf="labelContentText" class="form-label"> {{ labelContentText }} </label>
-        <input
-          [ngClass]="{ 'calendarNotOpened': !isCalendarOpen }"
-          [ngStyle]="{ 'border-color': isUserDateValid ? '' : 'red' }"
-          type="text"
-          class="form-control"
-          (input)="onDateInput($event)"
-          (click)="isCalendarOpen = true"
-          [value]="formattedDate"
-          [readOnly]="!isCalendarOpen"
-        >
-    </div>
-
-  <!-- Calendar(Dropdowns, dates) -->
-  <div *ngIf="isCalendarOpen" class="calendar" #calendarContainer
-       [style.top]="topOffset"
-       [style.left]="leftOffset">
-    <div class="calendar-header">
-      <div class="monthButtonContainer">
-        <!-- Month dropdown -->
-        <ng-container *ngIf="isMonthDropdownOpen; else monthLabel">
-          <mefdev-select
-            class="monthDropdown"
-            [(ngModel)]="selectedDateMonth"
-            (ngModelChange)="onMonthChange()"
-            [PlaceHolder]="'month'"
-          >
-            <mefdev-option
-              *ngFor="let month of months; let i = index"
-              [Value]="i"
-              [Label]="month"
-              style="z-index: 1"
-            >{{ month }}</mefdev-option>
-          </mefdev-select>
-        </ng-container>
-        <ng-template #monthLabel>
-          <span (click)="toggleMonthDropdown($event)"></span>
-        </ng-template>
-
-        <!-- Year dropdown -->
-        <ng-container *ngIf="isYearDropdownOpen; else yearLabel">
-          <mefdev-select
-            class="yearDropdown"
-            [(ngModel)]="selectedDateYear"
-            (ngModelChange)="onYearChange()"
-            [PlaceHolder]="'year'"
-          >
-            <mefdev-option
-              *ngFor="let year of years"
-              [Label]="year"
-              [Value]="year"
-            >{{year}}</mefdev-option>
-          </mefdev-select>
-        </ng-container>
-        <ng-template #yearLabel>
-          <span (click)="toggleYearDropdown($event)">{{ selectedDateYear }}</span>
-        </ng-template>
-      </div>
-      <!-- Calendar exit button -->
-      <div>
-        <i class="fa fa-times toggleCalendarButton" (click)="isCalendarOpen = false" aria-hidden="true"></i>
-      </div>
-    </div>
-
-    <div class="calendar-body">
-      <table>
-        <tr>
-          <th class="text-center" *ngFor="let weekday of weekdays">{{ weekday }}</th>
-        </tr>
-        <tr *ngFor="let week of calendarDays">
-          <td *ngFor="let dayData of week"
-              (click)="selectDate(dayData.date)"
-              [ngClass]="{ 'selected': isDateSelected(dayData.date), 'prev-month': !dayData.isCurrentMonth }">
-
-            <span class="date" [class.prev-month]="!dayData.isCurrentMonth">
-              {{ dayData.date.getDate() }}
-            </span>
-          </td>
-        </tr>
-      </table>
-    </div>
-  </div>
-</div>

package/src/lib/markup-kit/utils/datepicker/datepicker/datepicker.component.scss

@@ -1,132 +0,0 @@
-@use './../../../../styles/vars.scss' as c;
-
-.datepicker-container {
-  position: relative;
-  display: inline-block;
-
-  &.disabled {
-    pointer-events: none;
-    opacity: 0.8;
-  }
-}
-
-.input-container {
-  position: relative;
-  display: inline-block;
-
-  input[type="text"] {
-    padding: 5px 5px 5px 15px;
-    border: 1px solid c.$Light-Gray-1;
-  }
-
-  .calendarNotOpened {
-    cursor: pointer;
-  }
-}
-
-.calendar {
-  position: absolute;
-  border: 1px solid c.$Light-Gray-1;
-  background-color: c.$Light-Gray-2;
-  z-index: 1;
-
-  .calendar-header {
-    background-color: c.$White;
-    text-align: center;
-    justify-content: space-between;
-    display: flex;
-    padding: 5px 0px;
-
-    i.fa {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 30px;
-      height: 30px;
-      font-size: 20px;
-      border-radius: 50%;
-      cursor: pointer;
-      background-color: transparent;
-      border: none;
-      color: c.$Red;
-    }
-
-    .monthButtonContainer {
-      padding-left: 10px;
-      height: 45px;
-      min-width: 140px;
-      display: flex;
-      align-items: center;
-    }
-
-    .monthDropdown,
-    .yearDropdown {
-      height: 45px;
-      width: 105px;
-      cursor: pointer;
-      display: inline-block;
-      padding: 6px 5px;
-      border: 1px solid c.$Light-Gray-2;
-      border-radius: 4px;
-      background-color: c.$White;
-      color: c.$Dark-Gray-2;
-    }
-
-    .monthDropdown {
-      margin: 0px 8px 0 0;
-      width: 130px;
-    }
-
-    .monthDropdown:hover,
-    .yearDropdown:hover {
-      border-color: c.$Light-Gray-3;
-    }
-  }
-
-
-  .calendar-body {
-    padding: 5px;
-
-    table {
-      width: 100%;
-    }
-
-    td {
-      padding: 10px;
-      position: relative;
-    }
-
-    td.selected {
-      position: relative;
-      color: c.$White;
-    }
-
-    td.selected::before {
-      content: "";
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      border-radius: 20%;
-      background-color: c.$Red;
-      z-index: -1;
-      width: 30px;
-      height: 30px;
-      color: c.$White;
-      border: 1px solid c.$Dark-Gray-1;
-    }
-
-    td:hover {
-      color: c.$White;
-      font-weight: bold;
-      background-color: c.$Light-Gray-1;
-      border-radius: 20%;
-      cursor: pointer;
-    }
-
-    .date {
-      display: flex;
-      justify-content: center;
-    }
-  }
-}