ngx-persian-datepicker-element
Version:
Angular wrapper for Persian DatePicker Web Component with signal-based inputs (English/Persian docs)
109 lines (108 loc) • 5.13 kB
TypeScript
import { ElementRef, EventEmitter, InputSignal, OnDestroy, OnInit } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { DateTuple } from './persian-datepicker-types';
import 'persian-datepicker-element/dist/persian-datepicker-element.min.js';
import * as i0 from "@angular/core";
/**
* Angular wrapper for the Persian DatePicker Web Component
*
* This component provides Angular bindings for the native Persian DatePicker web component,
* allowing it to be used with Angular forms (both reactive and template-driven) and
* custom event handling.
*
* Note: The component automatically imports and registers the persian-datepicker-element
* web component, so you don't need to add any scripts to your angular.json file.
*
* @example
* Basic usage:
* ```html
* <ngx-persian-datepicker-element
* placeholderInput="انتخاب تاریخ"
* formatInput="YYYY/MM/DD"
* [showEventsInput]="true"
* (dateChange)="onDateChange($event)">
* </ngx-persian-datepicker-element>
* ```
*
* With Angular forms:
* ```html
* <form [formGroup]="myForm">
* <ngx-persian-datepicker-element formControlName="date"></ngx-persian-datepicker-element>
* </form>
* ```
*/
export declare class NgxPersianDatepickerComponent implements OnInit, OnDestroy, ControlValueAccessor {
private readonly elRef;
private readonly zone;
private readonly injector;
readonly elementSignal: import("@angular/core").WritableSignal<HTMLElement | null>;
private readonly onChangeSignal;
private readonly onTouchSignal;
private readonly valueSignal;
private readonly disabledSignal;
readonly placeholder: InputSignal<string | undefined>;
readonly format: InputSignal<string | undefined>;
readonly showEvents: InputSignal<boolean | undefined>;
readonly eventTypes: InputSignal<string | string[] | undefined>;
readonly rtl: InputSignal<boolean | undefined>;
readonly minDate: InputSignal<DateTuple | undefined>;
readonly maxDate: InputSignal<DateTuple | undefined>;
readonly disabledDates: InputSignal<string | ((year: number, month: number, day: number) => boolean) | undefined>;
readonly rangeMode: InputSignal<boolean | undefined>;
readonly rangeStart: InputSignal<DateTuple | undefined>;
readonly rangeEnd: InputSignal<DateTuple | undefined>;
readonly defaultDate: InputSignal<DateTuple | undefined>;
dateChange: EventEmitter<any>;
/** Reference to the container where the web component will be attached */
containerRef: ElementRef;
constructor();
/**
* Apply theme variables to the datepicker element
* @param variables Object containing CSS variable names and values
*/
applyThemeVariables(variables: Record<string, string>): void;
/**
* Set up effects for all inputs to update attributes/styles when they change
*/
private setupInputEffects;
ngOnInit(): void;
/**
* Create the web component instance
*/
private createWebComponent;
private updateAttribute;
private updateeventTypesAttribute;
ngOnDestroy(): void;
/**
* Handle change events from the web component
*/
private handleChangeEvent;
/**
* Set initial attributes on the web component based on the signals
*/
private setInitialAttributes;
/**
* Write value to the component (used by Angular forms)
*/
writeValue(value: DateTuple | null): void;
/**
* Register change callback (used by Angular forms)
*/
registerOnChange(fn: any): void;
/**
* Register touch callback (used by Angular forms)
*/
registerOnTouched(fn: any): void;
/**
* Set disabled state (used by Angular forms)
*/
setDisabledState(isDisabled: boolean): void;
setRange(start: DateTuple, end: DateTuple): void;
getRange(): {
start: DateTuple | null;
end: DateTuple | null;
};
clear(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxPersianDatepickerComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NgxPersianDatepickerComponent, "ngx-persian-datepicker-element", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "showEvents": { "alias": "showEvents"; "required": false; "isSignal": true; }; "eventTypes": { "alias": "eventTypes"; "required": false; "isSignal": true; }; "rtl": { "alias": "rtl"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "rangeMode": { "alias": "rangeMode"; "required": false; "isSignal": true; }; "rangeStart": { "alias": "rangeStart"; "required": false; "isSignal": true; }; "rangeEnd": { "alias": "rangeEnd"; "required": false; "isSignal": true; }; "defaultDate": { "alias": "defaultDate"; "required": false; "isSignal": true; }; }, { "dateChange": "dateChange"; }, never, never, true, never>;
}