@libs-ui/components-datetime-picker 0.1.1-1

package/interfaces/calendar-variables.interface.d.ts

@@ -0,0 +1,80 @@
+import { WritableSignal } from '@angular/core';
+import * as dayjs from 'dayjs';
+export interface ICalendarVariables {
+    left: WritableSignal<ICalendarVariablesSide>;
+    right: WritableSignal<ICalendarVariablesSide>;
+}
+interface ICalendarVariablesSide {
+    calCols?: WritableSignal<Array<number>>;
+    calRows?: WritableSignal<Array<number>>;
+    calendar?: ICalendar;
+    classes?: ICalendarVariablesClasses;
+    dayOfWeek?: number;
+    daysInLastMonth?: number;
+    daysInMonth?: number;
+    dropdowns?: WritableSignal<ICalendarVariablesDropdowns>;
+    firstDay?: dayjs.Dayjs;
+    hour?: number;
+    lastDay?: dayjs.Dayjs;
+    lastMonth?: number;
+    lastYear?: number;
+    maxDate?: dayjs.Dayjs;
+    minDate?: dayjs.Dayjs;
+    minute?: number;
+    month?: number;
+    second?: number;
+    year?: number;
+}
+interface ICalendarVariablesClasses {
+    [index: number]: {
+        [index: number]: string;
+        classList?: string;
+    };
+}
+interface ICalendarVariablesDropdowns {
+    currentMonth?: number;
+    currentYear?: number;
+    inMaxYear?: boolean;
+    inMinYear?: boolean;
+    maxYear?: number;
+    minYear?: number;
+    monthArrays?: WritableSignal<Array<number>>;
+    yearArrays?: WritableSignal<Array<number>>;
+}
+export interface ICalendar {
+    [index: number]: Array<dayjs.Dayjs>;
+    firstDay?: dayjs.Dayjs;
+    lastDay?: dayjs.Dayjs;
+}
+type TYPE_DROPDOWN_MONTH_ID = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export interface ICalendarMonthItem {
+    id: TYPE_DROPDOWN_MONTH_ID;
+    label: string;
+    maxDays: number;
+}
+export declare enum SideEnum {
+    left = "left",
+    right = "right"
+}
+export interface IDateRange {
+    id: string;
+    label: string;
+    values?: Array<dayjs.Dayjs>;
+}
+export interface ISplitPickerDate {
+    start: WritableSignal<{
+        month: string | number;
+        year: string | number;
+        day: string | number;
+        hour: string | number;
+        minute: string | number;
+    }>;
+    end: WritableSignal<{
+        month: string | number;
+        year: string | number;
+        day: string | number;
+        hour: string | number;
+        minute: string | number;
+    }>;
+}
+export {};

package/interfaces/function-control.interface.d.ts

@@ -0,0 +1,12 @@
+import dayjs from 'dayjs';
+import { IEmitDateRange, IEmitSingleDate } from './calendar-emit.interface';
+import { TYPE_OBJECT } from '@libs-ui/interfaces-types';
+export interface IDateTimePickerFunctionControlEvent {
+    checkIsValid: () => Promise<boolean>;
+    resetError: (message?: string, interpolateParams?: TYPE_OBJECT) => Promise<void>;
+    reset: (checkIsValid?: boolean, dateRangeSelected?: IEmitDateRange, singleDateReset?: IEmitSingleDate) => Promise<void>;
+}
+export interface ICalendarFunctionControlEvent {
+    buildDefaultRange: (startDate: dayjs.Dayjs, endDate: dayjs.Dayjs) => Promise<void>;
+    applyToSelect: () => Promise<void>;
+}

package/interfaces/index.d.ts

@@ -0,0 +1,6 @@
+export * from './calendar-emit.interface';
+export * from './calendar-variables.interface';
+export * from './function-control.interface';
+export * from './picker.interface';
+export * from './time-variables.interface';
+export * from './valid.interface';

package/interfaces/picker.interface.d.ts

@@ -0,0 +1,26 @@
+import * as dayjs from 'dayjs';
+export interface IChosenDate {
+    selectedLabel?: string;
+    startDate?: dayjs.Dayjs;
+    endDate?: dayjs.Dayjs;
+}
+export interface LocalizationConfig {
+    monthNames: string[];
+    ranges: {
+        [key: string]: string;
+    };
+    daysOfWeek: string[];
+    applyLabel: string;
+    cancelLabel: string;
+    fromLabel: string;
+    toLabel: string;
+    customRangeLabel: string;
+    format?: string;
+    direction?: string;
+    separator?: string;
+    weekLabel?: string;
+    clearLabel?: string;
+    firstDay?: number;
+    displayFormat?: string;
+}
+export type TYPE_RANGE_KEY = 'today' | 'yesterday' | '_7days_ago' | '_30days_ago' | 'this_month' | 'last_month' | '_3months_ago';

package/interfaces/time-variables.interface.d.ts

@@ -0,0 +1,36 @@
+import { WritableSignal } from '@angular/core';
+import * as dayjs from 'dayjs';
+export interface ITimepickerVariables {
+    left: WritableSignal<ITimepickerVariablesSide>;
+    right: WritableSignal<ITimepickerVariablesSide>;
+}
+export interface ITimepickerVariablesSide {
+    selectedHour: number;
+    selectedMinute: number;
+    hours?: Array<number>;
+    minutes?: Array<number>;
+    minutesLabel?: Array<string>;
+    seconds?: Array<number>;
+    secondsLabel?: Array<number>;
+    disabledHours?: Array<number>;
+    disabledMinutes?: Array<number>;
+    disabledSeconds?: Array<number>;
+    selectedSecond?: number;
+    selected?: dayjs.Dayjs;
+}
+export interface ITimepickerItemValue {
+    lefthour: WritableSignal<number>;
+    leftminute: WritableSignal<number>;
+    righthour: WritableSignal<number>;
+    rightminute: WritableSignal<number>;
+}
+export interface ICheckTimepickerSelected {
+    leftmonth: boolean;
+    leftyear: boolean;
+    rightmonth: boolean;
+    rightyear: boolean;
+}
+export interface ISelectedOld {
+    start?: dayjs.Dayjs | undefined;
+    end?: dayjs.Dayjs | undefined;
+}

package/interfaces/valid.interface.d.ts

@@ -0,0 +1,5 @@
+export interface IDateTimeValid {
+    message?: string;
+    interpolateParams?: Record<string, any>;
+    ignoreMessage?: boolean;
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@libs-ui/components-datetime-picker",
+  "version": "0.1.1-1",
+  "peerDependencies": {
+    "@angular/core": ">=18.0.0",
+    "@libs-ui/components-buttons-button": "0.1.1-1",
+    "@libs-ui/components-dropdown": "0.1.1-1",
+    "@libs-ui/components-inputs-input": "0.1.1-1",
+    "@libs-ui/components-list": "0.1.1-1",
+    "@libs-ui/components-popover": "0.1.1-1",
+    "@libs-ui/interfaces-types": "0.1.1-1",
+    "@libs-ui/services-http-request": "0.1.1-1",
+    "@libs-ui/utils": "0.1.1-1",
+    "@ngx-translate/core": "^15.0.0",
+    "dayjs": "1.11.5",
+    "@libs-ui/components-label": "0.1.1-1"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/libs-ui-components-datetime-picker.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/libs-ui-components-datetime-picker.mjs",
+      "esm": "./esm2022/libs-ui-components-datetime-picker.mjs",
+      "default": "./fesm2022/libs-ui-components-datetime-picker.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/picker.component.d.ts

@@ -0,0 +1,89 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import { ILabel } from '@libs-ui/components-label';
+import { IFlagMouse, IPopoverFunctionControlEvent, TYPE_POPOVER_DIRECTION, TYPE_POPOVER_EVENT } from '@libs-ui/components-popover';
+import { Dayjs } from 'dayjs';
+import { IEmitDateRange, IEmitSingleDate } from './interfaces/calendar-emit.interface';
+import { IDateRange } from './interfaces/calendar-variables.interface';
+import { IDateTimePickerFunctionControlEvent } from './interfaces/function-control.interface';
+import { IChosenDate, LocalizationConfig, TYPE_RANGE_KEY } from './interfaces/picker.interface';
+import { IDateTimeValid } from './interfaces/valid.interface';
+import * as i0 from "@angular/core";
+export declare class LibsUiComponentsDatetimePickerComponent implements OnInit, OnDestroy {
+    /** PROPERTY */
+    protected readonly ERROR_MESSAGE_EMPTY_VALID = "i18n_valid_empty_message";
+    protected showRangesPopup: import("@angular/core").WritableSignal<boolean>;
+    protected width: import("@angular/core").Signal<number | undefined>;
+    protected singleError: import("@angular/core").WritableSignal<IDateTimeValid>;
+    protected chosenDateFromRanges: import("@angular/core").WritableSignal<IChosenDate>;
+    protected selectedDateFromCalendar: {
+        start?: Dayjs;
+        end?: Dayjs;
+    };
+    protected displayRangeTitle: import("@angular/core").Signal<TYPE_RANGE_KEY | undefined>;
+    private popoverFunctionControlEvent;
+    /** INPUT */
+    readonly dateOptions: import("@angular/core").InputSignalWithTransform<LocalizationConfig, LocalizationConfig | undefined>;
+    readonly showCustomRangeLabel: import("@angular/core").InputSignalWithTransform<boolean, boolean>;
+    readonly labelConfig: import("@angular/core").InputSignal<ILabel | undefined>;
+    readonly disable: import("@angular/core").InputSignal<boolean>;
+    readonly readonly: import("@angular/core").InputSignal<boolean>;
+    readonly classInclude: import("@angular/core").InputSignal<string>;
+    readonly classPickerInclude: import("@angular/core").InputSignal<string>;
+    readonly classPickerContentInclude: import("@angular/core").InputSignal<string>;
+    readonly ignoreBorderQuickRange: import("@angular/core").InputSignal<boolean>;
+    readonly useColorModeExist: import("@angular/core").InputSignal<boolean>;
+    readonly hasTimePicker: import("@angular/core").InputSignal<boolean>;
+    readonly allowReset: import("@angular/core").InputSignal<boolean>;
+    readonly widthByLabel: import("@angular/core").InputSignalWithTransform<boolean, boolean>;
+    readonly directionPopover: import("@angular/core").InputSignalWithTransform<TYPE_POPOVER_DIRECTION, TYPE_POPOVER_DIRECTION | undefined>;
+    readonly defaultWidth: import("@angular/core").InputSignal<number | undefined>;
+    readonly isSingle: import("@angular/core").InputSignal<boolean>;
+    readonly extendRanges: import("@angular/core").InputSignal<IDateRange[]>;
+    readonly isBorderError: import("@angular/core").InputSignal<boolean>;
+    readonly minDate: import("@angular/core").InputSignal<string | Dayjs | undefined>;
+    readonly maxDate: import("@angular/core").InputSignal<string | Dayjs | undefined>;
+    readonly placeholder: import("@angular/core").InputSignal<string | undefined>;
+    readonly listYearHiddenInputSearch: import("@angular/core").InputSignalWithTransform<boolean, boolean | undefined>;
+    readonly validRequired: import("@angular/core").InputSignal<IDateTimeValid | undefined>;
+    readonly ignoreStopPropagationEvent: import("@angular/core").InputSignal<boolean>;
+    readonly flagMouse: import("@angular/core").ModelSignal<IFlagMouse>;
+    readonly widthByParent: import("@angular/core").InputSignal<boolean>;
+    readonly zIndex: import("@angular/core").InputSignalWithTransform<number, number>;
+    readonly rangesPopoverPosition: import("@angular/core").InputSignalWithTransform<"start" | "end" | "center", "start" | "end" | "center">;
+    readonly rangesPopoverPositionDistance: import("@angular/core").InputSignalWithTransform<number, number>;
+    readonly isNgContent: import("@angular/core").InputSignal<boolean>;
+    readonly classIncludeCustomRanges: import("@angular/core").InputSignal<string>;
+    readonly autoApply: import("@angular/core").InputSignal<boolean>;
+    readonly positionQuickRanges: import("@angular/core").InputSignal<"left" | "right">;
+    readonly trackDateRageUpdateLabel: import("@angular/core").InputSignal<boolean>;
+    readonly singleDateSelected: import("@angular/core").ModelSignal<IEmitSingleDate | undefined>;
+    readonly dateRangeSelected: import("@angular/core").ModelSignal<IEmitDateRange | undefined>;
+    /** OUTPUT */
+    readonly outChangStageFlagMouse: import("@angular/core").OutputEmitterRef<IFlagMouse>;
+    readonly outReset: import("@angular/core").OutputEmitterRef<IEmitSingleDate | IEmitDateRange | undefined>;
+    readonly outSelectSingleDate: import("@angular/core").OutputEmitterRef<IEmitSingleDate>;
+    readonly outSelectDateRange: import("@angular/core").OutputEmitterRef<IEmitDateRange>;
+    readonly outFunctionsControl: import("@angular/core").OutputEmitterRef<IDateTimePickerFunctionControlEvent>;
+    constructor();
+    ngOnInit(): void;
+    get FunctionsControl(): IDateTimePickerFunctionControlEvent;
+    protected handlerSelectRanges(event: Event): void;
+    protected handlerChangStageFlagMouse(flagMouse: IFlagMouse): void;
+    protected handlerChangStagePopoverFlagMouse(flagMouse: IFlagMouse): void;
+    protected handlerFunctionControl(event: IPopoverFunctionControlEvent): void;
+    protected handlerPopoverEvent(event: TYPE_POPOVER_EVENT): void;
+    protected handlerPickerSingleDate(data: IEmitSingleDate): Promise<void>;
+    protected handlerPickerDateRange(data: IEmitDateRange): Promise<void>;
+    private updateChosenDateFromRangesFromDateRangeSelected;
+    protected handlerReset(event?: Event): Promise<void>;
+    private reset;
+    protected handlerUpdateWidth(): void;
+    protected handlerCancel(): void;
+    private checkIsValid;
+    private validate;
+    private resetError;
+    private computedWidth;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsDatetimePickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsDatetimePickerComponent, "libs_ui-components-datetime-picker", never, { "dateOptions": { "alias": "dateOptions"; "required": false; "isSignal": true; }; "showCustomRangeLabel": { "alias": "showCustomRangeLabel"; "required": false; "isSignal": true; }; "labelConfig": { "alias": "labelConfig"; "required": false; "isSignal": true; }; "disable": { "alias": "disable"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "classInclude": { "alias": "classInclude"; "required": false; "isSignal": true; }; "classPickerInclude": { "alias": "classPickerInclude"; "required": false; "isSignal": true; }; "classPickerContentInclude": { "alias": "classPickerContentInclude"; "required": false; "isSignal": true; }; "ignoreBorderQuickRange": { "alias": "ignoreBorderQuickRange"; "required": false; "isSignal": true; }; "useColorModeExist": { "alias": "useColorModeExist"; "required": false; "isSignal": true; }; "hasTimePicker": { "alias": "hasTimePicker"; "required": false; "isSignal": true; }; "allowReset": { "alias": "allowReset"; "required": false; "isSignal": true; }; "widthByLabel": { "alias": "widthByLabel"; "required": false; "isSignal": true; }; "directionPopover": { "alias": "directionPopover"; "required": false; "isSignal": true; }; "defaultWidth": { "alias": "defaultWidth"; "required": false; "isSignal": true; }; "isSingle": { "alias": "isSingle"; "required": false; "isSignal": true; }; "extendRanges": { "alias": "extendRanges"; "required": false; "isSignal": true; }; "isBorderError": { "alias": "isBorderError"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "listYearHiddenInputSearch": { "alias": "listYearHiddenInputSearch"; "required": false; "isSignal": true; }; "validRequired": { "alias": "validRequired"; "required": false; "isSignal": true; }; "ignoreStopPropagationEvent": { "alias": "ignoreStopPropagationEvent"; "required": false; "isSignal": true; }; "flagMouse": { "alias": "flagMouse"; "required": false; "isSignal": true; }; "widthByParent": { "alias": "widthByParent"; "required": false; "isSignal": true; }; "zIndex": { "alias": "zIndex"; "required": false; "isSignal": true; }; "rangesPopoverPosition": { "alias": "rangesPopoverPosition"; "required": false; "isSignal": true; }; "rangesPopoverPositionDistance": { "alias": "rangesPopoverPositionDistance"; "required": false; "isSignal": true; }; "isNgContent": { "alias": "isNgContent"; "required": false; "isSignal": true; }; "classIncludeCustomRanges": { "alias": "classIncludeCustomRanges"; "required": false; "isSignal": true; }; "autoApply": { "alias": "autoApply"; "required": false; "isSignal": true; }; "positionQuickRanges": { "alias": "positionQuickRanges"; "required": false; "isSignal": true; }; "trackDateRageUpdateLabel": { "alias": "trackDateRageUpdateLabel"; "required": false; "isSignal": true; }; "singleDateSelected": { "alias": "singleDateSelected"; "required": false; "isSignal": true; }; "dateRangeSelected": { "alias": "dateRangeSelected"; "required": false; "isSignal": true; }; }, { "flagMouse": "flagMouseChange"; "singleDateSelected": "singleDateSelectedChange"; "dateRangeSelected": "dateRangeSelectedChange"; "outChangStageFlagMouse": "outChangStageFlagMouse"; "outReset": "outReset"; "outSelectSingleDate": "outSelectSingleDate"; "outSelectDateRange": "outSelectDateRange"; "outFunctionsControl": "outFunctionsControl"; }, never, ["*"], true, never>;
+}