smart-webcomponents-angular

import { Calendar } from './../index'; import { Animation, CalendarMode, DayFormat, CalendarDisplayMode, CalendarDisplayModeView, MonthFormat, ViewLayout, LayoutPosition, CalendarSelectionMode, TooltipPosition, YearFormat } from './../index'; import { AfterViewInit, ElementRef, OnInit, OnChanges, OnDestroy, SimpleChanges, EventEmitter } from '@angular/core'; import { BaseElement } from './smart.element'; import { ControlValueAccessor } from '@angular/forms'; import * as i0 from "@angular/core"; export { Animation, CalendarMode, DayFormat, CalendarDisplayMode, CalendarDisplayModeView, MonthFormat, ViewLayout, LayoutPosition, CalendarSelectionMode, TooltipPosition, YearFormat, ElementRenderMode } from './../index'; export { Smart } from './smart.element'; export { Calendar } from './../index'; export declare class CalendarComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges, ControlValueAccessor { constructor(ref: ElementRef<Calendar>); private eventHandlers; nativeElement: Calendar; /** @description Creates the component on demand. * @param properties An optional object of properties, which will be added to the template binded ones. */ createComponent(properties?: {}): any; /** * @description * The registered callback function called when a change event occurs on the form elements. */ _onChange: (value: any) => void; /** * @description * The registered callback function called when a blur event occurs on the form elements. */ _onTouched: () => any; /** @description Sets or gets the animation mode. Animation is disabled when the property is set to 'none' */ get animation(): Animation | string; set animation(value: Animation | string); /** @description Applies new animation settings when it is enabled. Properties:startSpeed - Determines the initial speed of the animation.easeThreshold - Determines the point at which the animation starts to slow down - the "ease effect".step - Determines the step ( scrolling interval ) at which the animation will run. stepEaseSize - Coefficient that is used to calculated the new step once the threshold has been passed. resetThreshold - Determines the threshold for animation reset. When it's reached the animation will start over. */ get animationSettings(): any; set animationSettings(value: any); /** @description Determines the date controls inside the header of the Calendar. */ get calendarMode(): CalendarMode | string; set calendarMode(value: CalendarMode | string); /** @description Determines the format of the day names located above the days inside the calendar. */ get dayNameFormat(): DayFormat | string; set dayNameFormat(value: DayFormat | string); /** @description A callback that can be used to customize the format of the month name when calendarMode is set to 'default'. */ get dateFormatFunction(): any; set dateFormatFunction(value: any); /** @description Enables or disables the Calendar. */ get disabled(): boolean; set disabled(value: boolean); /** @description Disables auto navigation when the user clicks on a date that's not from the current month in view. */ get disableAutoNavigation(): boolean; set disableAutoNavigation(value: boolean); /** @description Enables or disables the Calendar mouse wheel behavior. */ get disableMouseWheel(): boolean; set disableMouseWheel(value: boolean); /** @description Determines the date view of the calendar when calendarMode is set to 'default' */ get displayMode(): CalendarDisplayMode | string; set displayMode(value: CalendarDisplayMode | string); /** @description Determines the type of the month/year view when calendarMode is set to Default. */ get displayModeView(): CalendarDisplayModeView | string; set displayModeView(value: CalendarDisplayModeView | string); /** @description Determines the height of the month's drop down inside the Calendar. */ get dropDownHeight(): string | number; set dropDownHeight(value: string | number); /** @description Determines the width of the month's drop down inside the Calendar. */ get dropDownWidth(): string | number; set dropDownWidth(value: string | number); /** @description Determines the first day of the week. From 0(Sunday) to 6(Saturday) */ get firstDayOfWeek(): number; set firstDayOfWeek(value: number); /** @description Sets a custom footer template. Accepts the id of an HTMLTemplateElement or a reference ot it. */ get footerTemplate(): any; set footerTemplate(value: any); /** @description Sets custom header template. Accepts the id of an HTMLTemplateElement or a reference ot it. */ get headerTemplate(): any; set headerTemplate(value: any); /** @description Hides the names of the weekdays. */ get hideDayNames(): boolean; set hideDayNames(value: boolean); /** @description Hides the dates from other months. */ get hideOtherMonthDays(): boolean; set hideOtherMonthDays(value: boolean); /** @description Hides the arrow of the tooltip. */ get hideTooltipArrow(): boolean; set hideTooltipArrow(value: boolean); /** @description Sets the dates that will be displayed as important. */ get importantDates(): string[] | Date[]; set importantDates(value: string[] | Date[]); /** @description Sets a template for the important dates. Accepts the id of an HTMLTemplate element inside the DOM of or a reference to it. */ get importantDatesTemplate(): any; set importantDatesTemplate(value: any); /** @description Sets or gets the license which unlocks the product. */ get license(): string; set license(value: string); /** @description Determines the language of the Calendar. */ get locale(): string; set locale(value: string); /** @description Callback used to customize the format of the messages that are returned from the Localization Module. */ get localizeFormatFunction(): any; set localizeFormatFunction(value: any); /** @description Determines the max date for the Calendar. Accepts date objects and valid date string formats. */ get max(): string | Date; set max(value: string | Date); /** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */ get messages(): any; set messages(value: any); /** @description Determines the min date for the Calendar. Accepts date objects and valid date string formats. */ get min(): string | Date; set min(value: string | Date); /** @description Determines the number of months to be displayed inside the calendar. The maximum amount of months that can be shown is 12. By default only 1 month is shown. */ get months(): number; set months(value: number); /** @description Determines the format of the month names in the header when DisplayMode is set to Default or when Months property is greater than 1. */ get monthNameFormat(): MonthFormat | string; set monthNameFormat(value: MonthFormat | string); /** @description Sets or gets the name attribute for the element. Name is used when submiting HTML forms. */ get name(): string; set name(value: string); /** @description If the element is readonly, users cannot interact with it. */ get readonly(): boolean; set readonly(value: boolean); /** @description Sets restricted dates. Restricted dates are dates that cannot be selected/hovered/focused. They are visualy styled as restricted. The dates can be javascript date objects or strings representing a valid date. */ get restrictedDates(): string[] | Date[]; set restrictedDates(value: string[] | Date[]); /** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */ get rightToLeft(): boolean; set rightToLeft(value: boolean); /** @description Determines the direction of the navigation buttons located in the header and the animation. */ get scrollButtonsNavigationMode(): ViewLayout | string; set scrollButtonsNavigationMode(value: ViewLayout | string); /** @description Determines the position of the navigation buttons located inside the header. */ get scrollButtonsPosition(): LayoutPosition | string; set scrollButtonsPosition(value: LayoutPosition | string); /** @description Sets the dates that will be selected. Selected dates are styled differently than the rest. The dates can be Date objects or strings in a valid date format. */ get selectedDates(): string[] | Date[]; set selectedDates(value: string[] | Date[]); /** @description Determines the date selection mode. */ get selectionMode(): CalendarSelectionMode | string; set selectionMode(value: CalendarSelectionMode | string); /** @description Sets the delay between clicks of the date navigation buttons located in the header of the Calendar. */ get spinButtonsDelay(): number; set spinButtonsDelay(value: number); /** @description Determines the initial delay before the action of the date navigation buttons located in the header of the Calendar. */ get spinButtonsInitialDelay(): number; set spinButtonsInitialDelay(value: number); /** @description Determines the theme. Theme defines the look of the element */ get theme(): string; set theme(value: string); /** @description Sets a template for the title section of the Calendar. Accepts the id of an HTMLTemplate element inside the DOM of or a reference it. */ get titleTemplate(): any; set titleTemplate(value: any); /** @description Enables/Disabled the tooltip for the important dates. If enabled when an important date is hovered a tooltip is displayed. */ get tooltip(): boolean; set tooltip(value: boolean); /** @description Show/Hide the arrow of the the tooltip for the important dates. By default the arrow is visible. */ get tooltipArrow(): boolean; set tooltipArrow(value: boolean); /** @description Sets the delay of the tooltip before it appears. */ get tooltipDelay(): number; set tooltipDelay(value: number); /** @description Set's a custom offset to the tooltip's position. Accepts an array of two numbers: the left coordinate and the top coordinate. */ get tooltipOffset(): number[][]; set tooltipOffset(value: number[][]); /** @description Sets the position of the tooltip. */ get tooltipPosition(): TooltipPosition | string; set tooltipPosition(value: TooltipPosition | string); /** @description Sets a template for the tooltip's content. Accepts the id of an HTMLTEmplate element inside the DOM or it's reference. */ get tooltipTemplate(): any; set tooltipTemplate(value: any); /** @description If is set to true, the element cannot be focused. */ get unfocusable(): boolean; set unfocusable(value: boolean); /** @description Determines the orientation of the Calendar. */ get view(): ViewLayout | string; set view(value: ViewLayout | string); /** @description Determines the visible sections of the Calendar. The view sections are : title, header, footer. Multiple sections can be applied at the same time. By default only the 'header' section is visible. */ get viewSections(): string[]; set viewSections(value: string[]); /** @description Enables/Disabled week numbering. If enabled week numbers are displayed infront of each week inside the Calendar. */ get weekNumbers(): boolean; set weekNumbers(value: boolean); /** @description Determines the number of visible weeks. The value of the property ranges from 1 to 6. Where 1 is one week and 6 is a full month ( 6 weeks ). */ get weeks(): number; set weeks(value: number); /** @description Determines the year format in the header when DisplayMode is set to Default or when Months property is greater than 1. */ get yearFormat(): YearFormat | string; set yearFormat(value: YearFormat | string); /** @description This event is triggered when a new date has been selected/unselected. * @param event. The custom event. Custom event was created with: event.detail( value) * value - An array of all currently selected dates. */ onChange: EventEmitter<CustomEvent>; /** @description This event is triggered when the displayMode is about to change. This event allows to cancel the operation by calling event.preventDefault() in the event handler function. * @param event. The custom event. Custom event was created with: event.detail( oldDisplayMode, newDisplayMode) * oldDisplayMode - The previous display mode. * newDisplayMode - The new display mode. */ onDisplayModeChanging: EventEmitter<CustomEvent>; /** @description This event is triggered when the display mode has changed. * @param event. The custom event. */ onDisplayModeChange: EventEmitter<CustomEvent>; /** @description This event is triggered when the view is changing. This navigation can be cancelled by using the preventDefault method. * @param event. The custom event. Custom event was created with: event.detail( value, type) * value - The view's date. * type - The view type - 'month', 'decade' or 'year'. */ onNavigationChanging: EventEmitter<CustomEvent>; /** @description This event is triggered when the view is changed. * @param event. The custom event. Custom event was created with: event.detail( value, type) * value - The view's date. * type - The view type - 'month', 'decade' or 'year'. */ onNavigationChange: EventEmitter<CustomEvent>; /** @description This event is triggered when the tooltip for the important date is opened. * @param event. The custom event. Custom event was created with: event.detail( target, value) * target - The event target - tooltip. * value - The important date of the hovered cell. */ onOpen: EventEmitter<CustomEvent>; /** @description This event is triggered when the tooltip for the important date is closed. * @param event. The custom event. Custom event was created with: event.detail( target, value) * target - The event target - tooltip. * value - The important date of the hovered cell. */ onClose: EventEmitter<CustomEvent>; /** @description Clears the selection. Removes all seleceted dates. */ clearSelection(): void; /** @description Navigates forwards/backwards depending on the argument. * @param {number | Date | string} step. The argument can be the following: <ul><li> number - representing the number of months to scroll. Can be negavtive. If negative it will scroll backwards.</li><li> Date - a date object representing the Date to navigate to.</li><li> string - a string representing a valid Date, e.g. "2020-10-1" </li></ul> * @returns {boolean} */ navigate(step: any): Promise<any>; /** @description Selects or Unselects a date. * @param {Date | string} date. The date to be selected or unselected. The date can be a Date object or a string in valid date format. */ select(date: Date | string): void; /** @description Selects today's date. * @returns {Date} */ today(): Promise<any>; get isRendered(): boolean; ngOnInit(): void; ngAfterViewInit(): void; ngOnDestroy(): void; _initialChange: boolean; get ngValue(): any; set ngValue(value: any); writeValue(value: any): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; ngOnChanges(changes: SimpleChanges): void; /** @description Add event listeners. */ private listen; /** @description Remove event listeners. */ private unlisten; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarComponent, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<CalendarComponent, "smart-calendar, [smart-calendar]", ["smart-calendar"], { "animation": "animation"; "animationSettings": "animationSettings"; "calendarMode": "calendarMode"; "dayNameFormat": "dayNameFormat"; "dateFormatFunction": "dateFormatFunction"; "disabled": "disabled"; "disableAutoNavigation": "disableAutoNavigation"; "disableMouseWheel": "disableMouseWheel"; "displayMode": "displayMode"; "displayModeView": "displayModeView"; "dropDownHeight": "dropDownHeight"; "dropDownWidth": "dropDownWidth"; "firstDayOfWeek": "firstDayOfWeek"; "footerTemplate": "footerTemplate"; "headerTemplate": "headerTemplate"; "hideDayNames": "hideDayNames"; "hideOtherMonthDays": "hideOtherMonthDays"; "hideTooltipArrow": "hideTooltipArrow"; "importantDates": "importantDates"; "importantDatesTemplate": "importantDatesTemplate"; "license": "license"; "locale": "locale"; "localizeFormatFunction": "localizeFormatFunction"; "max": "max"; "messages": "messages"; "min": "min"; "months": "months"; "monthNameFormat": "monthNameFormat"; "name": "name"; "readonly": "readonly"; "restrictedDates": "restrictedDates"; "rightToLeft": "rightToLeft"; "scrollButtonsNavigationMode": "scrollButtonsNavigationMode"; "scrollButtonsPosition": "scrollButtonsPosition"; "selectedDates": "selectedDates"; "selectionMode": "selectionMode"; "spinButtonsDelay": "spinButtonsDelay"; "spinButtonsInitialDelay": "spinButtonsInitialDelay"; "theme": "theme"; "titleTemplate": "titleTemplate"; "tooltip": "tooltip"; "tooltipArrow": "tooltipArrow"; "tooltipDelay": "tooltipDelay"; "tooltipOffset": "tooltipOffset"; "tooltipPosition": "tooltipPosition"; "tooltipTemplate": "tooltipTemplate"; "unfocusable": "unfocusable"; "view": "view"; "viewSections": "viewSections"; "weekNumbers": "weekNumbers"; "weeks": "weeks"; "yearFormat": "yearFormat"; }, { "onChange": "onChange"; "onDisplayModeChanging": "onDisplayModeChanging"; "onDisplayModeChange": "onDisplayModeChange"; "onNavigationChanging": "onNavigationChanging"; "onNavigationChange": "onNavigationChange"; "onOpen": "onOpen"; "onClose": "onClose"; }, never>; }