@natec/mef-dev-ui-kit 16.2.0 → 16.2.2

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

@@ -0,0 +1,421 @@
+import { ElementRef, OnChanges, OnInit, EventEmitter } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import * as i0 from "@angular/core";
+/**
+  * 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
+  *   [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://mef.dev/ui_kit_demo/view/utils/datepicker</example-url>
+*/
+export declare class DatepickerComponent implements OnChanges, OnInit {
+    private datePipe;
+    private elementRef;
+    /**
+     * Flag to determine if the calendar is open or closed.
+     * Default value: false (closed).
+    */
+    isCalendarOpen: boolean;
+    /**
+     * Flag to determine if the component is in editing mode.
+     * Default value: false (not in editing mode).
+    */
+    isEditing: boolean;
+    /**
+     * The currently selected date.
+     * Default value: Today's date.
+    */
+    selectedDate: 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;
+    /**
+     * Flag to determine if the year dropdown is open or closed.
+     * Default value: true (open).
+    */
+    isYearDropdownOpen: boolean;
+    /**
+     * The selected month (0-11).
+     * Default value: The month of the selected date.
+    */
+    selectedDateMonth: number;
+    /**
+     * The selected year.
+     * Default value: The year of the selected date.
+    */
+    selectedDateYear: number;
+    /**
+    * An array of years for the year dropdown.
+    * Default value: An array of years within the specified range.
+   */
+    years: number[];
+    /**
+     * The language/locale for the datepicker.
+     * Default value: 'en' (English).
+     * @example
+     * <mefdev-datepicker
+     *   [lang] = "'uk'">
+     * </mefdev-datepicker>
+    */
+    lang: string;
+    /**
+     * The date format for displaying the selected date.
+     * Default value: 'EEE MMM dd yyyy'.
+     * @example
+     * <mefdev-datepicker
+     *   [dateFormat]="'dd/MM/yyyy'">
+     * </mefdev-datepicker>
+    */
+    dateFormat: string;
+    /**
+     * 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>
+    */
+    yearsRange: {
+        startYear: number;
+        toYear: number;
+    };
+    /**
+     * Whether the datepicker is disabled or not.
+     * Default value: false (enabled).
+     * @example
+     * <mefdev-datepicker
+     *   [disabled]="false">
+     * </mefdev-datepicker>
+    */
+    disabled: boolean;
+    /**
+     * The top offset for positioning the datepicker.
+     * Default value: '20'.
+     * @example
+     * <mefdev-datepicker
+     *   [topOffset]="'20'">
+     * </mefdev-datepicker>
+    */
+    topOffset: string;
+    /**
+     * The left offset for positioning the datepicker.
+     * Default value: '10'.
+     * @example
+     * <mefdev-datepicker
+     *   [leftOffset]="'10'">
+     * </mefdev-datepicker>
+    */
+    leftOffset: string;
+    /**
+     * 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>
+    */
+    dateChanged: 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;
+    /**
+     * 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.
+     * - If the click occurred outside the calendar and input, it closes the calendar.
+     * @param event The MouseEvent object representing the click event.
+    */
+    onClick(event: MouseEvent): void;
+    /**
+     * 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(datePipe: DatePipe, elementRef: ElementRef);
+    /**
+     * Lifecycle hook called after the component is initialized.
+     * It initializes the years for the year select dropdown.
+    */
+    ngOnInit(): void;
+    /**
+     * Lifecycle hook called whenever the input properties of the component change.
+     * It updates the input value.
+    */
+    ngOnChanges(): void;
+    /**
+     * An array of month names based on the selected language.
+     * It provides localized month names for display in the datepicker.
+    */
+    private get months();
+    /**
+     * An array of weekday names based on the selected language.
+     * It provides localized weekday names for display in the datepicker.
+    */
+    private get weekdays();
+    /**
+     * 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;
+    /**
+     * Toggle the editing mode for the date input. When enabled, the user can edit the date directly in the input field.
+     * This method sets the 'isEditing' flag to true and stores the current formatted date for editing.
+    */
+    toggleEdit(): void;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * Toggle the visibility of the calendar component. When called, this method changes the 'isCalendarOpen' flag
+     * to show or hide the calendar interface.
+     * ```
+     * // Toggle the visibility of the calendar
+     * this.toggleCalendar();
+     * ```
+    */
+    private toggleCalendar;
+    /**
+     * 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;
+    /**
+      * 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);
+      * ```
+    */
+    private onDateInput;
+    /**
+     * 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;
+    /**
+      * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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): void;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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();
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * Check if a date string is valid based on the specified date format.
+     * @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;
+    /**
+     * 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;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatepickerComponent, "mefdev-datepicker", never, { "lang": { "alias": "lang"; "required": false; }; "dateFormat": { "alias": "dateFormat"; "required": false; }; "yearsRange": { "alias": "range"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "topOffset": { "alias": "topOffset"; "required": false; }; "leftOffset": { "alias": "leftOffset"; "required": false; }; }, { "dateChanged": "dateChanged"; }, never, never, false, never>;
+}

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

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./datepicker/datepicker.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "../../../pg-components/select/select.module";
+export declare class MefDevDatepickerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MefDevDatepickerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MefDevDatepickerModule, [typeof i1.DatepickerComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i2.DatePipe, typeof i4.MefDevSelectModule], [typeof i1.DatepickerComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MefDevDatepickerModule>;
+}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@natec/mef-dev-ui-kit",
-  "version": "16.2.0",
+  "version": "16.2.2",
   "description": "MEF.DEV UI Kit Library",
   "author": {
     "name": "NATEC"
@@ -33,8 +33,8 @@
   "peerDependencies": {
     "@angular/cdk": "^16.1.5",
     "@angular/common": "^16.1.5",
-    "@angular/forms": "^16.1.5",
-    "@angular/core": "^16.1.5"
+    "@angular/core": "^16.1.5",
+    "@angular/forms": "^16.1.5"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/public-api.d.ts

@@ -1,6 +1,7 @@
 export * from './lib/markup-kit/collapse/index';
 export * from './lib/markup-kit/utils/filtered-field/index';
 export * from './lib/markup-kit/utils/help-block/index';
+export * from './lib/markup-kit/utils/datepicker/index';
 export * from './lib/markup-kit/card/index';
 export * from './lib/markup-kit/modals/index';
 export * from './lib/markup-kit/page-layouts/index';