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

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

@@ -1,643 +0,0 @@
-import {
-  Component,
-  ElementRef,
-  HostListener,
-  Input,
-  OnChanges,
-  OnInit,
-  Output,
-  EventEmitter,
-} from '@angular/core';
-import { DatePipe } from '@angular/common';
-
-/**
- * Datepicker Component for selecting dates.
- *
- * This component allows users to pick a date from a calendar interface.
- * It supports various configuration options such as language, date format, and date range.
- *
- * @example
- * <mefdev-datepicker
- *   [labelContentText]="'Select your date'"
- *   [lang]="'uk'"
- *   [dateFormat]="'dd/MM/yyyy'"
- *   [range]="{startYear: 1900, toYear: 300}"
- *   [disabled]="false"
- *   (dateChanged)="onDateChanged($event)"
- *   [topOffset]="'20'"
- *   [leftOffset]="'10'">
- * </mefdev-datepicker>
- *
- * <example-url>https://platform.mef.dev/ui_kit_demo/view/utils/datepicker</example-url>
- */
-
-@Component({
-    selector: 'mefdev-datepicker',
-    templateUrl: './datepicker.component.html',
-    styleUrls: ['./datepicker.component.scss'],
-    standalone: false
-})
-
-export class DatepickerComponent implements  OnChanges, OnInit {
-
-  /**
-   * A flag that checks whether a valid date has been entered and whether the entered date exists.
-   * If the two previous conditions are not true, the datepicker will be highlighted in red
-   */
-  isUserDateValid: boolean = true;
-
-  /**
-   * Flag to determine if the calendar is open or closed.
-   * Default value: false (closed).
-   */
-  isCalendarOpen: boolean = false;
-
-  /**
-   * The currently selected date.
-   * Default value: Today's date.
-   */
-  selectedDate: Date = new Date();
-
-  /**
-   * The formatted date for display in the input.
-   * Default value: Formatted representation of the selected date.
-   */
-  formattedDate: any ;
-
-  /**
-   * Track the edited date separately when in editing mode.
-   * Default value: An empty string.
-   */
-  editedDate: string = '';
-
-  /**
-   * Flag to determine if the month dropdown is open or closed.
-   * Default value: true (open).
-   */
-  isMonthDropdownOpen: boolean = true;
-
-  /**
-   * Flag to determine if the year dropdown is open or closed.
-   * Default value: true (open).
-   */
-  isYearDropdownOpen: boolean = true;
-
-  /**
-   * The selected month (0-11).
-   * Default value: The month of the selected date.
-   */
-  selectedDateMonth: number = this.selectedDate.getMonth();
-
-  /**
-   * The selected year.
-   * Default value: The year of the selected date.
-   */
-  selectedDateYear: number = this.selectedDate.getFullYear();
-
-  /**
-   * An array of years for the year dropdown.
-   * Default value: An array of years within the specified range.
-   */
-  years: number[]
-
-  /**
-   * Label text for the datepicker.
-   * Default value: 'en' (English).
-   * @example
-   * <mefdev-datepicker
-   *   [labelContentText] = "'Chose your date'">
-   * </mefdev-datepicker>
-   */
-  @Input() labelContentText: string;
-
-  /**
-   * The language/locale for the datepicker.
-   * Default value: 'en' (English).
-   * @example
-   * <mefdev-datepicker
-   *   [lang] = "'uk'">
-   * </mefdev-datepicker>
-   */
-  @Input() lang: string = 'en';
-
-  /**
-   * The date format for displaying the selected date.
-   * Default value: 'EEE MMM dd yyyy'.
-   * @example
-   * <mefdev-datepicker
-   *   [dateFormat]="'dd/MM/yyyy'">
-   * </mefdev-datepicker>
-   */
-  @Input() dateFormat: string = 'EEE MMM dd yyyy';
-
-  /**
-   * The range of years available in the year dropdown.
-   * Default value: { startYear: 1900, toYear: 300 }.
-   * @example
-   * <mefdev-datepicker
-   *   [range]="{startYear: 1900, toYear: 300}">
-   * </mefdev-datepicker>
-   */
-  @Input('range') yearsRange:{startYear:number, toYear:number} = {startYear:1900, toYear:300};
-
-  /**
-   * Whether the datepicker is disabled or not.
-   * Default value: false (enabled).
-   * @example
-   * <mefdev-datepicker
-   *   [disabled]="false">
-   * </mefdev-datepicker>
-   */
-  @Input() disabled: boolean = false;
-
-  /**
-   * The top offset for positioning the datepicker.
-   * Default value: '20'.
-   * @example
-   * <mefdev-datepicker
-   *   [topOffset]="'20'">
-   * </mefdev-datepicker>
-   */
-  @Input() topOffset: string = '20';
-
-  /**
-   * The left offset for positioning the datepicker.
-   * Default value: '10'.
-   * @example
-   * <mefdev-datepicker
-   *   [leftOffset]="'10'">
-   * </mefdev-datepicker>
-   */
-  @Input() leftOffset: string = '10'; //Default value
-
-  /**
-   * Event emitted when the selected date in the datepicker changes.
-   * It emits a `Date` object representing the selected date.
-   * @example
-   * <mefdev-datepicker
-   *   (dateChanged)="onDateChanged($event)">
-   * </mefdev-datepicker>
-   */
-  @Output() dateChanged: EventEmitter<Date> = new EventEmitter<Date>();
-
-  /**
-   * Regular expression to validate user input for date in the format "dd/MM/yyyy".
-   * - The day (dd) should be between 01 and 31.
-   * - The month (MM) should be between 01 and 12.
-   * - The year (yyyy) should be a 4-digit number.
-   */
-  private dateRegExp: RegExp = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/;
-
-  /**
-   * The string entered by the user for date input.
-   * This variable stores the user's input as they type in the date field.
-   */
-  userInput: string = '';
-
-  /**
-   * Host listener for document click events to handle calendar interaction.
-   * This function checks if a click event occurred within the calendar or input elements.
-   * - If the click occurred within the calendar, no action is taken.
-   * - If the click occurred within the input element and the component is not in editing mode,
-   *   it opens the calendar.
-   * @param event The MouseEvent object representing the click event.
-   */
-  @HostListener('document:click', ['$event'])
-  onClick(event: MouseEvent) {
-    const targetElement = event.target as HTMLElement;
-    const datepickerContainer = this.elementRef.nativeElement.querySelector('.datepicker-container');
-    const calendar = this.elementRef.nativeElement.querySelector('.calendar');
-    const monthDropdown = this.elementRef.nativeElement.querySelector('.monthDropdown');
-    const yearDropdown = this.elementRef.nativeElement.querySelector('.yearDropdown');
-    const inputElement = this.elementRef.nativeElement.querySelector('input');
-
-    if (datepickerContainer && datepickerContainer.contains(calendar)) {
-      if (calendar && calendar.contains(targetElement)) return;
-      if (this.isMonthDropdownOpen && !calendar.contains(targetElement)) return;
-      if (this.isYearDropdownOpen && !calendar.contains(targetElement)) return;
-      if ((monthDropdown && monthDropdown.contains(targetElement)) && (yearDropdown && yearDropdown.contains(targetElement))) {
-        this.toggleMonthDropdown(event)
-        this.toggleYearDropdown(event)
-      }
-    }
-  }
-
-  /**
-   * Constructor for the DatepickerComponent class.
-   * @param datePipe A service for formatting and parsing dates.
-   * @param elementRef A reference to the element on which this component is attached.
-   * It is used to access DOM elements.
-   */
-  constructor(private datePipe: DatePipe, private elementRef: ElementRef) {
-    this.updateInputValue()
-  }
-
-  /**
-   * Lifecycle hook called after the component is initialized.
-   * It initializes the years for the year select dropdown.
-   */
-  ngOnInit(){
-    this.initializeYears();
-  }
-
-  /**
-   * Lifecycle hook called whenever the input properties of the component change.
-   * It updates the input value.
-   */
-  ngOnChanges() {
-    this.updateInputValue();
-  }
-
-  /**
-   * An array of month names based on the selected language.
-   * It provides localized month names for display in the datepicker.
-   */
-  private get months(){
-    return this.getMonthList(this.lang);
-  }
-
-  /**
-   * An array of weekday names based on the selected language.
-   * It provides localized weekday names for display in the datepicker.
-   */
-  private get weekdays() {
-    return this.getWeekdayList(this.lang);
-  }
-
-  /**
-   * Initialize the list of years to be displayed in the year dropdown.
-   * This method populates the 'years' array with a range of years based on the provided 'yearsRange' configuration.
-   * @example
-   * ```
-   * // Assuming 'yearsRange' is { startYear: 1900, toYear: 300 }
-   * // After calling initializeYears(), 'years' might contain [1900, 1901, ..., 300]
-   * this.initializeYears();
-   * ```
-   */
-  private initializeYears() {
-    this.years = Array.from({ length: this.yearsRange.toYear }, (_, index) => index + this.yearsRange.startYear);
-  }
-
-  /**
-   * Toggle the editing mode for the date input. When enabled, the user can edit the date directly in the input field.
-   */
-  toggleEdit() {
-    this.editedDate = this.formatSelectedDate(); // Store the current formatted date for editing
-    this.isCalendarOpen = false;
-  }
-
-  /**
-   * Get a list of month names in the specified language and format.
-   * @param locales - An optional parameter specifying the locale or locales to use for formatting.
-   * @param format - The format for month names, either "long" (default) or "short".
-   * @returns An array of month names based on the provided format and locale.
-   * ```
-   * // Get a list of month names in the default language and long format
-   * const months = this.getMonthList(this.lang);
-   * ```
-   */
-  private getMonthList(  locales?: string | string[],  format: "long" | "short" = "long"): string[] {
-    const year = new Date().getFullYear();
-    const monthList = [...Array(12).keys()];
-    const formatter = new Intl.DateTimeFormat(locales, {    month: format  });
-    const getMonthName = (monthIndex: number) => formatter.format(new Date(year, monthIndex));
-    return monthList.map(getMonthName);
-  }
-
-  /**
-   * Get a list of weekday names in the specified language and format.
-   * @param locales - An optional parameter specifying the locale or locales to use for formatting.
-   * @param format - The format for weekday names, either "short" (default) or "long".
-   * @returns An array of weekday names based on the provided format and locale.
-   * ```
-   * // Get a list of weekday names in the default language and short format
-   * const weekdays = this.getWeekdayList();
-   * ```
-   */
-  private getWeekdayList(locales?: string | string[], format: "short" | "long" = "short"): string[] {
-    const weekdays = [...Array(7).keys()];
-    const mondayIndex = weekdays.indexOf(0);
-    weekdays.splice(mondayIndex, 1);
-    weekdays.push(0);
-    const formatter = new Intl.DateTimeFormat(locales, { weekday: format });
-    const getWeekdayName = (weekdayIndex: number) => {
-      return formatter.format(new Date(2023, 9, weekdayIndex + 1));
-    };
-    return weekdays.map(getWeekdayName);
-  }
-
-  /**
-   * Save the edited date input by the user, provided it matches the specified date format.
-   * This method checks if the entered date is in a valid format, disables the editing mode, and applies
-   * the edited date to the 'selectedDate'. It then reformats the selected date and closes the calendar.
-   * ```
-   * // Save the edited date and update the selected date
-   * this.saveEditedDate();
-   * ```
-   */
-  private saveEditedDate() {
-    if (this.isDateValid(this.editedDate)) {
-      const [day, month, year] = this.editedDate.split('/');
-      this.selectedDate = new Date(+year, +month - 1, +day);
-      this.formatDate();
-    }
-  }
-
-  /**
-   * Handle user input in the editable input field for date editing. This method captures the input value
-   * and stores it in the 'editedDate' variable. If the input matches the valid date format, it updates
-   * 'selectedDateMonth' and 'selectedDateYear' accordingly.
-   * @param event - The input event containing the user's input.
-   * ```
-   * // Handle user input in the editable input field
-   * this.onDateInput(event);
-   * ```
-   */
-  public onDateInput(event: any) {
-    const inputDate: string = event.target.value;
-    if (this.isDateValid(inputDate)) {
-      this.editedDate = inputDate;
-      const parsedDate = inputDate.split('/');
-      this.selectedDateMonth = +parsedDate[1] - 1;
-      this.selectedDateYear = +parsedDate[2];
-      this.selectedDate = new Date(+parsedDate[2], +parsedDate[1] - 1, +parsedDate[0]);
-      this.calculateFirstDayOfCalendar();
-    }
-    this.isUserDateValid = this.isDateValid(inputDate);
-  }
-
-  /**
-   * Toggle the visibility of the month dropdown in the calendar interface.
-   * This method is used to open or close the dropdown for selecting months.
-   * @param event - The event triggering the toggle action (e.g., a click event).
-   * ```
-   * // Toggle the visibility of the month dropdown
-   * this.toggleMonthDropdown(event);
-   * ```
-   */
-  private toggleMonthDropdown(event: Event) {
-    this.isMonthDropdownOpen = !this.isMonthDropdownOpen;
-  }
-
-  /**
-   * Toggle the visibility of the year dropdown in the calendar interface.
-   * This method is used to open or close the dropdown for selecting years.
-   * @param event - The event triggering the toggle action (e.g., a click event).
-   * ```
-   * // Toggle the visibility of the year dropdown
-   * this.toggleYearDropdown(event);
-   * ```
-   */
-  private toggleYearDropdown(event: Event) {
-    this.isYearDropdownOpen = !this.isYearDropdownOpen;
-  }
-
-  /**
-   * Handle the change of the selected month in the calendar interface.
-   * This method updates the input value, sets the selected date to the first day of the chosen month,
-   * and recalculates the calendar display accordingly.
-   * ```
-   * // Handle the change of the selected month
-   * this.onMonthChange();
-   * ```
-   */
-  private onMonthChange() {
-    this.updateInputValue();
-    this.selectedDate = new Date(this.selectedDateYear, this.selectedDateMonth, 1);
-    this.formatDate();
-    this.calculateFirstDayOfCalendar();
-  }
-
-  /**
-   * Handle the change of the selected year in the calendar interface.
-   * This method updates the input value, sets the selected date to the first day of the chosen year,
-   * reformats the selected date, and recalculates the calendar display.
-   * ```
-   * // Handle the change of the selected year
-   * this.onYearChange();
-   * ```
-   */
-  private onYearChange() {
-    this.updateInputValue();
-    this.selectedDate = new Date(this.selectedDateYear, this.selectedDateMonth, 1);
-    this.formatDate();
-    this.calculateFirstDayOfCalendar();
-  }
-
-
-  /**
-   * Select a date in the calendar interface and perform necessary updates.
-   * This method sets the selected date, formats it, closes the calendar, and emits a dateChanged event.
-   * It also updates the selected month and year dropdown values.
-   * @param date - The date to be selected in the calendar.
-   */
-  selectDate(date: Date) {
-    this.selectedDate = date;
-    this.formatDate();
-    this.isCalendarOpen = false;
-    this.dateChanged.next(this.selectedDate);
-    this.selectedDateMonth = this.selectedDate.getMonth();
-    this.selectedDateYear = this.selectedDate.getFullYear();
-  }
-
-  /**
-   * Format the selected date based on the chosen date format and language.
-   * This method uses the Angular DatePipe to format the selected date and updates the formattedDate variable.
-   * ```
-   * // Format the selected date
-   * this.formatDate();
-   * ```
-   */
-  private formatDate() {
-    this.formattedDate = this.datePipe.transform(this.selectedDate, this.dateFormat) || '';
-  }
-
-  /**
-   * Format the selected date based on the chosen date format, language, and locale.
-   * This method uses the Angular DatePipe to format the selected date with the specified language and updates the formatted date as a string.
-   * @returns A formatted date string.
-   * ```
-   * // Format the selected date with language
-   * const formatted = this.formatSelectedDate();
-   * ```
-   */
-  private formatSelectedDate(): string {
-    return this.datePipe.transform(this.selectedDate, this.dateFormat, this.lang) || '';
-  }
-
-  /**
-   * Update the input value displayed in the calendar interface.
-   * This method updates the input value to either the edited date or the formatted selected date,
-   * depending on whether the user is in edit mode or not.
-   * ```
-   * // Update the input value
-   * this.updateInputValue();
-   * ```
-   */
-  private updateInputValue() {
-    this.formattedDate = this.isCalendarOpen ? this.editedDate : this.formatSelectedDate();
-  }
-
-  /**
-   * Get an array of arrays representing the days of the current month.
-   * Each sub-array contains the day data for a week, and each day data object includes the date and whether it belongs to the current month.
-   * @returns An array of arrays representing the days of the current month.
-   * ```
-   * // Get an array of arrays representing the days of the current month
-   * const calendar = this.calendarDays;
-   * ```
-   */
-  private get calendarDays() {
-    return this.calculateFirstDayOfCalendar();
-  }
-
-  /**
-   * Get the date of the previous month to display in empty cells of the current month.
-   * This method returns the date of the previous month if the provided date is not in the current month.
-   * If the provided date is in the current month, it returns the date's day as a string.
-   * @param date - The date to evaluate.
-   * @returns The date of the previous month or a day string.
-   * ```
-   * // Get the previous month's date to display in empty cells
-   * const previousMonthDate = this.getPreviousMonthDate(new Date(2023, 8, 1));
-   * ```
-   */
-  private getPreviousMonthDate(date: Date): any {
-    if (!date) {
-      return '';
-    }
-    const currentDate = new Date();
-    if (date.getMonth() === currentDate.getMonth() && date.getFullYear() === currentDate.getFullYear()) {
-      return date.getDate().toString();
-    } else {
-      return this.datePipe.transform(date, 'dd');
-    }
-  }
-
-
-  /**
-   * Navigate to the previous month in the calendar interface.
-   * This method updates the selectedDate, formats it, and recalculates the first day of the calendar.
-   * ```
-   * // Navigate to the previous month
-   * this.getPreviousMonth();
-   * ```
-   */
-  private getPreviousMonth() {
-    const currentMonth = this.selectedDate.getMonth();
-    this.selectedDate = new Date(this.selectedDate.getFullYear(), currentMonth - 1, 1);
-    this.formatDate();
-    this.calculateFirstDayOfCalendar();
-  }
-
-  /**
-   * Navigate to the next month in the calendar interface.
-   * This method updates the selectedDate, formats it, and recalculates the first day of the calendar.
-   * ```
-   * // Navigate to the next month
-   * this.getNextMonth();
-   * ```
-   */
-  private getNextMonth() {
-    const currentMonth = this.selectedDate.getMonth();
-    this.selectedDate = new Date(this.selectedDate.getFullYear(), currentMonth + 1, 1);
-    this.formatDate();
-    this.calculateFirstDayOfCalendar();
-  }
-
-
-  /**
-   * Get the number of days in a given month of a specific year.
-   * @param year - The year for which you want to determine the number of days.
-   * @param month - The month (0-based index) for which you want to determine the number of days.
-   * @returns The number of days in the specified month of the given year.
-   */
-  private daysInMonth(year: number, month: number): number {
-    return new Date(year, month + 1, 0).getDate();
-  }
-
-  /**
-   * Calculate the structure of days in a month for the calendar display.
-   * This method generates a matrix of day data objects representing the days in the calendar.
-   * Each day data object contains the date and whether it belongs to the current month.
-   * @returns A matrix of day data objects for the calendar display.
-   */
-  private calculateFirstDayOfCalendar() {
-    const year = this.selectedDate.getFullYear();
-    const month = this.selectedDate.getMonth();
-    const firstDayOfMonth = new Date(year, month, 1);
-    const firstWeekday = firstDayOfMonth.getDay();
-    const startDay = firstWeekday === 0 ? -5 : 2 - firstWeekday;
-    const calendarDays = [];
-    let currentDay = startDay;
-    for (let i = 0; i < 6; i++) {
-      const week = [];
-      for (let j = 0; j < 7; j++) {
-        const day = new Date(year, month, currentDay);
-        const dayData = {
-          date: day,
-          isCurrentMonth: currentDay >= 1 && currentDay <= this.daysInMonth(year, month),
-        };
-        week.push(dayData);
-        currentDay++;
-      }
-      calendarDays.push(week);
-    }
-    return calendarDays;
-  }
-
-  /**
-   * Check if a given date is the currently selected date in the calendar.
-   * @param date - The date to check.
-   * @returns `true` if the provided date matches the selected date, otherwise `false`.
-   * ```
-   * // Check if a date is selected
-   * const isSelected = this.isDateSelected(someDate);
-   * ```
-   */
-  private isDateSelected(date: Date) {
-    return date.toDateString() === this.selectedDate.toDateString();
-  }
-
-  /**
-   * Check if a date string is valid based on the specified date format.
-   * It also checks whether the specified number, month is correct and whether the specified one exists among calendar years
-   * @param inputDate - The date string to validate.
-   * @returns `true` if the input date string is valid, otherwise `false`.
-   * ```
-   * // Check if a date string is valid
-   * const isValidDate = this.isDateValid('05/25/2023');
-   * ```
-   */
-  private isDateValid(inputDate: string) {
-    if (!this.dateRegExp.test(inputDate)) {
-      return false;
-    }
-
-    const parts = inputDate.split('/');
-    const day = parseInt(parts[0], 10);
-    const month = parseInt(parts[1], 10);
-    const year = parseInt(parts[2], 10);
-
-    if (year > this.years[this.years.length - 1] || year < this.years[0]) {
-      return false
-    }
-
-    const daysInMonth = new Date(year, month, 0).getDate();
-    return day <= daysInMonth;
-  }
-
-  /**
-   * Check if a given date is today's date.
-   * @param date - The date to check.
-   * @returns `true` if the provided date is today's date, otherwise `false`.
-   * ```
-   * // Check if a date is today's date
-   * const isToday = this.isDateToday(someDate);
-   * ```
-   */
-  private isDateToday(date: Date) {
-    const today = new Date();
-    return date.toDateString() === today.toDateString();
-  }
-}

package/src/lib/markup-kit/utils/datepicker/datepicker.module.ts

@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule, DatePipe } from '@angular/common';
-import { DatepickerComponent } from './datepicker/datepicker.component';
-import { FormsModule } from '@angular/forms';
-import { MefDevSelectModule } from '../../../pg-components/select';
-
-
-
-@NgModule({
-  declarations: [DatepickerComponent],
-  exports: [DatepickerComponent],
-  imports: [CommonModule, FormsModule, DatePipe, MefDevSelectModule],
-  providers:[DatePipe]
-})
-export class MefDevDatepickerModule { }

package/src/lib/markup-kit/utils/datepicker/index.ts

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

package/src/lib/markup-kit/utils/filtered-field/filtered-field-container/filtered-field-container.component.html

@@ -1,3 +0,0 @@
-<div class="item-container">
-    <mefdev-filtered-field-item *ngFor="let item of items" [item]="item" (discard)="onDiscard(item)" (openFilter)="onOpenFilter(item)"></mefdev-filtered-field-item>
-</div>

package/src/lib/markup-kit/utils/filtered-field/filtered-field-container/filtered-field-container.component.scss

@@ -1,4 +0,0 @@
-.item-container{
-    display: flex;
-    cursor: context-menu;
-}