smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
774 lines (770 loc) • 55.2 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.calendar';
import { __awaiter } from 'tslib';
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, Input, forwardRef, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
class BaseElement {
constructor(ref) {
this.onCreate = new EventEmitter();
this.onReady = new EventEmitter();
this.onAttach = new EventEmitter();
this.onDetach = new EventEmitter();
const that = this;
this.nativeElement = ref.nativeElement;
that.nativeElement.onAttached = () => {
that.onAttach.emit(that.nativeElement);
};
that.nativeElement.onDetached = () => {
that.onDetach.emit(that.nativeElement);
};
}
addEventListener(type, listener, options = false) {
this.nativeElement.addEventListener(type, listener, options);
}
removeEventListener(type, listener, options = false) {
this.nativeElement.removeEventListener(type, listener, options);
}
dispatchEvent(event) {
return this.nativeElement.dispatchEvent(event);
}
blur() {
this.nativeElement.blur();
}
click() {
this.nativeElement.click();
}
focus(options) {
this.nativeElement.focus(options);
}
/** @description Sets or gets the license. */
get license() {
return this.nativeElement ? this.nativeElement.license : undefined;
}
set license(value) {
this.nativeElement ? this.nativeElement.license = value : undefined;
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @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() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
}
BaseElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
BaseElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: BaseElement, inputs: { license: "license", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", rightToLeft: "rightToLeft", theme: "theme" }, outputs: { onCreate: "onCreate", onReady: "onReady", onAttach: "onAttach", onDetach: "onDetach" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onCreate: [{
type: Output
}], onReady: [{
type: Output
}], onAttach: [{
type: Output
}], onDetach: [{
type: Output
}], license: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}] } });
let Smart;
if (typeof window !== "undefined") {
Smart = window.Smart;
}
const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CalendarComponent),
multi: true
};
class CalendarComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/**
* @description
* The registered callback function called when a change event occurs on the form elements.
*/
this._onChange = () => { };
/**
* @description
* The registered callback function called when a blur event occurs on the form elements.
*/
this._onTouched = () => { };
/** @description This event is triggered whenever a user selects or deselects a date. It fires each time the selection state of a date changes, allowing you to respond to both new date selections and the removal of existing selections.
* @param event. The custom event. Custom event was created with: event.detail( value)
* value - An array of all currently selected dates.
*/
this.onChange = new EventEmitter();
/** @description This event is fired immediately before the displayMode changes, providing an opportunity to intercept the transition. Within the event handler, you can call event.preventDefault() to cancel the displayMode change and prevent the update from occurring. This allows developers to implement custom logic or validation before the displayMode actually switches.
* @param event. The custom event. Custom event was created with: event.detail( oldDisplayMode, newDisplayMode)
* oldDisplayMode - The previous display mode.
* newDisplayMode - The new display mode.
*/
this.onDisplayModeChanging = new EventEmitter();
/** @description This event is triggered whenever the display mode of the application is changed (for example, switching between fullscreen, windowed, or split-screen modes). It allows developers to detect and respond to changes in how content is presented to the user.
* @param event. The custom event. */
this.onDisplayModeChange = new EventEmitter();
/** @description This event is triggered whenever the view is about to change, such as during navigation to a different page or section. Developers can intercept this event to perform custom logic before the navigation completes. If necessary, the navigation can be cancelled by calling the preventDefault method within the event handler, stopping the view from changing.
* @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'.
*/
this.onNavigationChanging = new EventEmitter();
/** @description This event is triggered whenever the user navigates to a different view or the current view is updated within the application. It provides an opportunity to execute custom logic in response to view transitions, such as loading new data, updating UI components, or tracking navigation events.
* @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'.
*/
this.onNavigationChange = new EventEmitter();
/** @description This event is triggered each time the tooltip associated with an important date becomes visible to the user, such as when they hover over or click on the date. Use this event to execute custom logic or display additional content whenever the important date's tooltip 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.
*/
this.onOpen = new EventEmitter();
/** @description This event is triggered when a user closes the tooltip associated with an important date. It indicates that the tooltip has been dismissed, either by user interaction (such as clicking outside the tooltip or pressing a close button) or through programmatic means. Use this event to perform actions or update the UI in response to the tooltip being 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.
*/
this.onClose = new EventEmitter();
this._initialChange = true;
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-calendar');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Specifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Setting it to other supported values enables the corresponding animation effects. */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description Enhances the animation behavior by applying new settings when enabled.Properties: startSpeed – Specifies the initial speed at which the animation begins, allowing you to control how quickly the animation starts. easeThreshold – Defines the point during the animation where the "ease effect" starts, meaning the animation begins to slow down for a smoother transition. step – Sets the interval for each frame or update of the animation, effectively controlling how smoothly or incrementally the animation moves. stepEaseSize – A coefficient used to calculate the updated step size once the animation passes the easeThreshold, increasing the ease-in/ease-out effect as the animation decelerates. resetThreshold – Determines the point at which the animation will automatically reset and start from the beginning, allowing for looping or repeated motion. */
get animationSettings() {
return this.nativeElement ? this.nativeElement.animationSettings : undefined;
}
set animationSettings(value) {
this.nativeElement ? this.nativeElement.animationSettings = value : undefined;
}
/** @description Specifies the configuration and behavior of the date selection controls displayed within the header section of the Calendar component, such as navigation buttons, month and year dropdowns, or other tools that allow users to change the visible date range. */
get calendarMode() {
return this.nativeElement ? this.nativeElement.calendarMode : undefined;
}
set calendarMode(value) {
this.nativeElement ? this.nativeElement.calendarMode = value : undefined;
}
/** @description Specifies the display format for the names of the days of the week that appear as headers above the calendar grid. This setting controls whether the day names are shown in full (e.g., "Monday"), as abbreviations (e.g., "Mon"), or as single letters (e.g., "M"). */
get dayNameFormat() {
return this.nativeElement ? this.nativeElement.dayNameFormat : undefined;
}
set dayNameFormat(value) {
this.nativeElement ? this.nativeElement.dayNameFormat = value : undefined;
}
/** @description A callback function that allows you to customize the display format of month names when the calendarMode property is set to 'default'. Use this callback to define how month names should appear (e.g., full name, abbreviation, localization) in the calendar interface. */
get dateFormatFunction() {
return this.nativeElement ? this.nativeElement.dateFormatFunction : undefined;
}
set dateFormatFunction(value) {
this.nativeElement ? this.nativeElement.dateFormatFunction = value : undefined;
}
/** @description Controls whether the Calendar feature is active or inactive. When enabled, the Calendar is accessible to users; when disabled, the Calendar is inactive. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Prevents the calendar from automatically navigating to a different month when the user clicks on a date cell that belongs to a month other than the one currently displayed. This ensures that selecting dates outside the visible month will not change the current view. */
get disableAutoNavigation() {
return this.nativeElement ? this.nativeElement.disableAutoNavigation : undefined;
}
set disableAutoNavigation(value) {
this.nativeElement ? this.nativeElement.disableAutoNavigation = value : undefined;
}
/** @description Configures whether the mouse wheel can be used to navigate or change dates in the Calendar component. When enabled, scrolling the mouse wheel will move between calendar views or dates; when disabled, the mouse wheel will have no effect on the calendar. */
get disableMouseWheel() {
return this.nativeElement ? this.nativeElement.disableMouseWheel : undefined;
}
set disableMouseWheel(value) {
this.nativeElement ? this.nativeElement.disableMouseWheel = value : undefined;
}
/** @description Specifies which date is initially displayed in the calendar when calendarMode is set to 'default'. This property controls the starting visible month or day in the calendar interface, allowing you to set the user's initial view to a specific date. */
get displayMode() {
return this.nativeElement ? this.nativeElement.displayMode : undefined;
}
set displayMode(value) {
this.nativeElement ? this.nativeElement.displayMode = value : undefined;
}
/** @description Specifies the layout style displayed for the month or year view when calendarMode is set to "Default." This setting controls how dates are visually organized and presented to the user, such as showing days within a month grid or listing months within a year, depending on the selected calendar mode. */
get displayModeView() {
return this.nativeElement ? this.nativeElement.displayModeView : undefined;
}
set displayModeView(value) {
this.nativeElement ? this.nativeElement.displayModeView = value : undefined;
}
/** @description Specifies the vertical height, in pixels, of the month selection dropdown within the Calendar component. This setting controls how much space the dropdown occupies when users select a month. Adjusting this value can improve usability and visual consistency with other UI elements. */
get dropDownHeight() {
return this.nativeElement ? this.nativeElement.dropDownHeight : undefined;
}
set dropDownHeight(value) {
this.nativeElement ? this.nativeElement.dropDownHeight = value : undefined;
}
/** @description Specifies the width of the month selection dropdown within the Calendar component. This property controls how wide the dropdown appears, allowing you to adjust its size for better alignment or readability within the Calendar interface. */
get dropDownWidth() {
return this.nativeElement ? this.nativeElement.dropDownWidth : undefined;
}
set dropDownWidth(value) {
this.nativeElement ? this.nativeElement.dropDownWidth = value : undefined;
}
/** @description Specifies which day is considered the start of the week, using a numeric value where 0 represents Sunday, 1 represents Monday, up to 6 for Saturday. For example, setting the value to 1 makes Monday the first day of the week. */
get firstDayOfWeek() {
return this.nativeElement ? this.nativeElement.firstDayOfWeek : undefined;
}
set firstDayOfWeek(value) {
this.nativeElement ? this.nativeElement.firstDayOfWeek = value : undefined;
}
/** @description Defines a custom footer template for the component. You can provide either the ID of an existing '' element in the DOM, or pass a direct reference to an 'HTMLTemplateElement'. The specified template will be used to render the footer section of the component. */
get footerTemplate() {
return this.nativeElement ? this.nativeElement.footerTemplate : undefined;
}
set footerTemplate(value) {
this.nativeElement ? this.nativeElement.footerTemplate = value : undefined;
}
/** @description Defines a custom header template for the component. You can provide either the string ID of an existing HTMLTemplateElement in the DOM or a direct reference to an HTMLTemplateElement. The specified template will be used to render the header section. */
get headerTemplate() {
return this.nativeElement ? this.nativeElement.headerTemplate : undefined;
}
set headerTemplate(value) {
this.nativeElement ? this.nativeElement.headerTemplate = value : undefined;
}
/** @description Conceals the display of weekday names in the user interface, ensuring that the days of the week (e.g., Monday, Tuesday, etc.) are not visible to users. */
get hideDayNames() {
return this.nativeElement ? this.nativeElement.hideDayNames : undefined;
}
set hideDayNames(value) {
this.nativeElement ? this.nativeElement.hideDayNames = value : undefined;
}
/** @description Prevents dates that belong to adjacent months from being displayed, ensuring that only the days within the current month are visible in the calendar view. */
get hideOtherMonthDays() {
return this.nativeElement ? this.nativeElement.hideOtherMonthDays : undefined;
}
set hideOtherMonthDays(value) {
this.nativeElement ? this.nativeElement.hideOtherMonthDays = value : undefined;
}
/** @description Determines whether the tooltip’s arrow indicator is visible. When enabled, the arrow will be hidden and only the tooltip’s content will be displayed. */
get hideTooltipArrow() {
return this.nativeElement ? this.nativeElement.hideTooltipArrow : undefined;
}
set hideTooltipArrow(value) {
this.nativeElement ? this.nativeElement.hideTooltipArrow = value : undefined;
}
/** @description Defines the specific dates that will be visually highlighted or marked as important within the interface. These dates can be used to indicate events, deadlines, holidays, or other noteworthy occasions that should stand out to users when viewing the calendar or date selector component. */
get importantDates() {
return this.nativeElement ? this.nativeElement.importantDates : undefined;
}
set importantDates(value) {
this.nativeElement ? this.nativeElement.importantDates = value : undefined;
}
/** @description Defines a template for displaying important dates. This property accepts either the ID of an HTML '' element present in the DOM, or a direct reference to that template element. The specified template will be used to render each important date in the component. */
get importantDatesTemplate() {
return this.nativeElement ? this.nativeElement.importantDatesTemplate : undefined;
}
set importantDatesTemplate(value) {
this.nativeElement ? this.nativeElement.importantDatesTemplate = value : undefined;
}
/** @description Sets or retrieves the unlockKey, a unique identifier or code used to grant access to the product's locked features or content. */
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
this.nativeElement ? this.nativeElement.unlockKey = value : undefined;
}
/** @description Specifies the language used for displaying all calendar elements, such as month names, day labels, and interface text, ensuring the calendar is localized for the selected language. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback function that allows you to define a custom format for messages returned by the Localization Module, enabling you to modify, wrap, or translate message content before it is delivered to the application. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Specifies the latest selectable date for the Calendar component. Accepts JavaScript Date objects or valid date string formats (e.g., 'YYYY-MM-DD', ISO 8601). Dates beyond this value will be disabled and cannot be selected by the user. */
get max() {
return this.nativeElement ? this.nativeElement.max : undefined;
}
set max(value) {
this.nativeElement ? this.nativeElement.max = value : undefined;
}
/** @description Sets or retrieves an object containing the text strings displayed by the widget, allowing these strings to be customized for different languages and regions. This property is intended for localization and works together with the locale property to support multiple languages in the widget’s user interface. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Specifies the earliest selectable date for the Calendar component. Accepts either JavaScript Date objects or strings in valid date formats (e.g., 'YYYY-MM-DD'). Dates earlier than this value will be disabled and cannot be selected. */
get min() {
return this.nativeElement ? this.nativeElement.min : undefined;
}
set min(value) {
this.nativeElement ? this.nativeElement.min = value : undefined;
}
/** @description Specifies how many months are displayed simultaneously within the calendar interface. You can select any value between 1 and 12, with 12 being the maximum number of months shown at once. If this property is not set, the calendar will display only a single month by default. */
get months() {
return this.nativeElement ? this.nativeElement.months : undefined;
}
set months(value) {
this.nativeElement ? this.nativeElement.months = value : undefined;
}
/** @description Specifies how month names are displayed in the header when DisplayMode is set to "Default" or when the Months property has a value greater than 1. This setting controls whether month names appear in their full, abbreviated, or custom format within the header section, improving readability and user interface customization. */
get monthNameFormat() {
return this.nativeElement ? this.nativeElement.monthNameFormat : undefined;
}
set monthNameFormat(value) {
this.nativeElement ? this.nativeElement.monthNameFormat = value : undefined;
}
/** @description Sets or retrieves the value of the element’s name attribute. This attribute identifies the element when submitting HTML forms, allowing its data to be included with the specified name as part of the form data sent to the server. */
get name() {
return this.nativeElement ? this.nativeElement.name : undefined;
}
set name(value) {
this.nativeElement ? this.nativeElement.name = value : undefined;
}
/** @description When the element is set to "readonly," users can see its content but cannot modify or edit its value. While the element remains focusable, all user input and changes are disabled, preventing any interaction that would alter its contents. */
get readonly() {
return this.nativeElement ? this.nativeElement.readonly : undefined;
}
set readonly(value) {
this.nativeElement ? this.nativeElement.readonly = value : undefined;
}
/** @description Defines a list of restricted dates that the user cannot select, hover over, or focus on within the date picker. These dates will be visually indicated as unavailable or disabled in the interface. Each restricted date can be provided as either a JavaScript Date object or a string in a recognized date format (such as 'YYYY-MM-DD'). Any date included in this list will be unselectable and visually styled to indicate its restricted status. */
get restrictedDates() {
return this.nativeElement ? this.nativeElement.restrictedDates : undefined;
}
set restrictedDates(value) {
this.nativeElement ? this.nativeElement.restrictedDates = value : undefined;
}
/** @description Specifies or retrieves a value that determines whether the element's content alignment supports right-to-left (RTL) languages and scripts, such as Arabic or Hebrew. Enabling this property ensures that text and layout are properly adjusted for locales that require RTL formatting. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Specifies the orientation (horizontal or vertical) of the navigation buttons displayed in the header, and sets the direction in which the accompanying animation plays. */
get scrollButtonsNavigationMode() {
return this.nativeElement ? this.nativeElement.scrollButtonsNavigationMode : undefined;
}
set scrollButtonsNavigationMode(value) {
this.nativeElement ? this.nativeElement.scrollButtonsNavigationMode = value : undefined;
}
/** @description Specifies the alignment and placement of navigation buttons within the header section, controlling whether they appear on the left, center, or right side of the header. */
get scrollButtonsPosition() {
return this.nativeElement ? this.nativeElement.scrollButtonsPosition : undefined;
}
set scrollButtonsPosition(value) {
this.nativeElement ? this.nativeElement.scrollButtonsPosition = value : undefined;
}
/** @description Specifies the dates that should appear as selected within the component. These selected dates are visually distinguished from unselected dates using a different style or highlight. You can provide the selected dates either as JavaScript Date objects or as strings formatted in any valid date representation (e.g., 'YYYY-MM-DD'). */
get selectedDates() {
return this.nativeElement ? this.nativeElement.selectedDates : undefined;
}
set selectedDates(value) {
this.nativeElement ? this.nativeElement.selectedDates = value : undefined;
}
/** @description Specifies how users can select dates in the component, such as choosing a single date, a range of dates, or multiple individual dates. */
get selectionMode() {
return this.nativeElement ? this.nativeElement.selectionMode : undefined;
}
set selectionMode(value) {
this.nativeElement ? this.nativeElement.selectionMode = value : undefined;
}
/** @description Specifies the amount of time (in milliseconds) that must pass between consecutive clicks of the calendar's date navigation buttons in the header. This delay helps prevent users from triggering rapid, repeated navigation actions and can be used to control the responsiveness of date changes in the calendar interface. */
get spinButtonsDelay() {
return this.nativeElement ? this.nativeElement.spinButtonsDelay : undefined;
}
set spinButtonsDelay(value) {
this.nativeElement ? this.nativeElement.spinButtonsDelay = value : undefined;
}
/** @description Specifies the initial delay, in milliseconds, before the date navigation buttons in the Calendar header begin to respond when pressed. This delay applies to the first action after a button is engaged, allowing users control over how quickly navigation starts. */
get spinButtonsInitialDelay() {
return this.nativeElement ? this.nativeElement.spinButtonsInitialDelay : undefined;
}
set spinButtonsInitialDelay(value) {
this.nativeElement ? this.nativeElement.spinButtonsInitialDelay = value : undefined;
}
/** @description Specifies the visual theme applied to the element. The selected theme controls the element's overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel throughout the user interface. */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
/** @description Specifies the template to be used for the calendar's title section. This property accepts either the ID of an HTMLTemplate element present in the DOM or a direct reference to an HTMLTemplate element. The provided template will be rendered in place of the default title section, allowing for custom formatting and content. */
get titleTemplate() {
return this.nativeElement ? this.nativeElement.titleTemplate : undefined;
}
set titleTemplate(value) {
this.nativeElement ? this.nativeElement.titleTemplate = value : undefined;
}
/** @description Controls whether tooltips are shown for important dates. When enabled, hovering over an important date will display a tooltip with additional information. When disabled, no tooltip will appear on hover. */
get tooltip() {
return this.nativeElement ? this.nativeElement.tooltip : undefined;
}
set tooltip(value) {
this.nativeElement ? this.nativeElement.tooltip = value : undefined;
}
/** @description Controls the visibility of the tooltip arrow for important dates. When enabled (default), an arrow is displayed on the tooltip to indicate its reference point. Disabling this option will hide the arrow, resulting in a plain tooltip without a directional indicator. */
get tooltipArrow() {
return this.nativeElement ? this.nativeElement.tooltipArrow : undefined;
}
set tooltipArrow(value) {
this.nativeElement ? this.nativeElement.tooltipArrow = value : undefined;
}
/** @description Specifies the amount of time (in milliseconds) to wait before displaying the tooltip after a user hovers over or focuses on the target element. This controls how quickly the tooltip appears, allowing you to adjust the responsiveness of the tooltip based on user interaction. */
get tooltipDelay() {
return this.nativeElement ? this.nativeElement.tooltipDelay : undefined;
}
set tooltipDelay(value) {
this.nativeElement ? this.nativeElement.tooltipDelay = value : undefined;
}
/** @description Specifies a custom offset for the tooltip's position. Accepts an array containing two numbers: the first value represents the horizontal (left) offset, and the second value represents the vertical (top) offset. These values determine how many pixels the tooltip is shifted from its default position along the X (left) and Y (top) axes, respectively. */
get tooltipOffset() {
return this.nativeElement ? this.nativeElement.tooltipOffset : undefined;
}
set tooltipOffset(value) {
this.nativeElement ? this.nativeElement.tooltipOffset = value : undefined;
}
/** @description Specifies the placement of the tooltip relative to its target element (e.g., top, right, bottom, or left). */
get tooltipPosition() {
return this.nativeElement ? this.nativeElement.tooltipPosition : undefined;
}
set tooltipPosition(value) {
this.nativeElement ? this.nativeElement.tooltipPosition = value : undefined;
}
/** @description Defines the template used for the tooltip's content. You can provide either the ID of an existing '' element in the DOM or a direct reference to an HTMLTemplateElement. The tooltip will render its content based on the markup and structure defined within the specified template. */
get tooltipTemplate() {
return this.nativeElement ? this.nativeElement.tooltipTemplate : undefined;
}
set tooltipTemplate(value) {
this.nativeElement ? this.nativeElement.tooltipTemplate = value : undefined;
}
/** @description When set to true, this property prevents the element from receiving focus, meaning it cannot be selected or activated using keyboard navigation or programmatic focus methods. */
get unfocusable() {
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
}
set unfocusable(value) {
this.nativeElement ? this.nativeElement.unfocusable = value : undefined;
}
/** @description Specifies the display orientation of the Calendar component (horizontal or vertical), affecting how dates and months are arranged within the calendar view. */
get view() {
return this.nativeElement ? this.nativeElement.view : undefined;
}
set view(value) {
this.nativeElement ? this.nativeElement.view = value : undefined;
}
/** @description Specifies which sections of the Calendar component are displayed to the user. Available sections include: 'title', 'header', and 'footer'. You may enable any combination of these sections simultaneously by listing them together. If this setting is not specified, only the 'header' section will be shown by default. */
get viewSections() {
return this.nativeElement ? this.nativeElement.viewSections : undefined;
}
set viewSections(value) {
this.nativeElement ? this.nativeElement.viewSections = value : undefined;
}
/** @description Controls the display of week numbers within the calendar. When enabled, a week number is shown at the start of each week row, allowing users to easily reference and distinguish weeks. If disabled, week numbers are hidden, and only the standard calendar dates are displayed. */
get weekNumbers() {
return this.nativeElement ? this.nativeElement.weekNumbers : undefined;
}
set weekNumbers(value) {
this.nativeElement ? this.nativeElement.weekNumbers = value : undefined;
}
/** @description Specifies how many weeks are displayed in the calendar view. This property accepts integer values from 1 to 6, where 1 displays a single week and 6 displays six weeks, representing a full month view. */
get weeks() {
return this.nativeElement ? this.nativeElement.weeks : undefined;
}
set weeks(value) {
this.nativeElement ? this.nativeElement.weeks = value : undefined;
}
/** @description Specifies the format in which the year is displayed in the header when the DisplayMode property is set to "Default" or when the Months property has a value greater than 1. This setting controls how the year appears (e.g., "2024", "24") in the header section of the component. */
get yearFormat() {
return this.nativeElement ? this.nativeElement.yearFormat : undefined;
}
set yearFormat(value) {
this.nativeElement ? this.nativeElement.yearFormat = value : undefined;
}
/** @description Clears the current selection by removing all selected dates from the calendar. This action resets the calendar to its default unselected state, ensuring that no dates remain highlighted or chosen.
*/
clearSelection() {
if (this.nativeElement.isRendered) {
this.nativeElement.clearSelection();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.clearSelection();
});
}
}
/** @description Determines the navigation direction based on the provided argument: navigates forward if the argument is positive or "next," and navigates backward if the argument is negative or "previous."
* @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) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.navigate(step);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
navigateSync(step) {
if (this.nativeElement.isRendered) {
return this.nativeElement.navigate(step);
}
return null;
}
/** @description Allows the user to select a date or deselect a previously selected date, updating the selection state accordingly.
* @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) {
if (this.nativeElement.isRendered) {
this.nativeElement.select(date);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.select(date);
});
}
}
/** @description Selects the current date based on the user's system settings.
* @returns {Date}
*/
today() {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.today();
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
todaySync() {
if (this.nativeElement.isRendered) {
return this.nativeElement.today();
}
return null;
}
get isRendered() {
return this.nativeElement ? this.nativeElement.isRendered : false;
}
ngOnInit() {
}
ngAfterViewInit() {
const that = this;
that.onCreate.emit(that.nativeElement);
if (Smart)
Smart.Render();
this.nativeElement.classList.add('smart-angular');
if (this.nativeElement.whenRendered)
this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
this.listen();
}
ngOnDestroy() {
this.unlisten();
}
get ngValue() {
if (!this.nativeElement) {
return null;
}
if (this.selectedDates && this.selectedDates.length > 0) {
const value = this.nativeElement.selectedDates.length === 1 ? this.nativeElement.selectedDates[0] : this.nativeElement.selectedDates;
return value;
}
return null;
}
set ngValue(value) {
if (this.nativeElement) {
this.writeValue(value);
}
}
writeValue(value) {
const that = this;
const normalizedValue = value == null ? '' : value;
that.nativeElement.whenRendered(() => {
that.nativeElement.isInitialized = that._initialChange ? false : true;
that.clearSelection();
if (Array.isArray(normalizedValue)) {
value.forEach((currentValue) => this.select(currentValue));
}
else {
that.select(normalizedValue);
}
that.nativeElement.isInitialized = true;
if (that._initialChange === false) {
if (that.selectedDates && that.selectedDates.length > 1) {
that._onChange(that.selectedDates);
}
else {
that._onChange((that.selectedDates && that.selectedDates.length > 0) ? that.selectedDates[0] : null);
;
}
}
});
}
registerOnChange(fn) {
this._onChange = fn;
}
registerOnTouched(fn) {
this._onTouched = fn;
}
ngOnChanges(changes) {
if (this.nativeElement && this.nativeElement.isRendered) {
for (const propName in changes) {
if (changes.hasOwnProperty(propName)) {
this.nativeElement[propName] = changes[propName].currentValue;
}
}
}
}
/** @description Add event listeners. */
listen() {
const that = this;
that.eventHandlers['changeHandler'] = (event) => { that.onChange.emit(event); };
that.nativeElement.addEventListener('change', that.eventHandlers['changeHandler']);
that.eventHandlers['displayModeChangingHandler'] = (event) => { that.onDisplayModeChanging.emit(event); };
that.nativeElement.addEventListener('displayModeChanging', that.eventHandlers['displayModeChangingHandler']);
that.eventHandlers['displayModeChangeHandler'] = (event) => { that.onDisplayModeChange.emit(event); };
that.nativeElement.addEventListener('displayModeChange', that.eventHandlers['displayModeChangeHandler']);
that.eventHandlers['navigationChangingHandler'] = (event) => { that.onNavigationChanging.emit(event); };
that.nativeElement.addEventListener('navigationChanging', that.eventHandlers['navigationChangingHandler']);
that.eventHandlers['navigationChangeHandler'] = (event) => { that.onNavigationChange.emit(event); };
that.nativeElement.addEventListener('navigationChange', that.eventHandlers['navigationChangeHandler']);
that.eventHandlers['openHandler'] = (event) => { that.onOpen.emit(event); };
that.nativeElement.addEventListener('open', that.eventHandlers['openHandler']);
that.eventHandlers['closeHandler'] = (event) => { that.onClose.emit(event); };
that.nativeElement.addEventListener('close', that.eventHandlers['closeHandler']);
that.eventHandlers['changeModelHandler'] = (event) => {
that._initialChange = false;
that._onChange(that.nativeElement.selectedDates.length > 0 ? (that.nativeElement.selectedDates.length > 1 ? that.nativeElement.selectedDates : that.nativeElement.selectedDates[0]) : null);
};
that.eventHandlers['blurModelHandler'] = (event) => {
that._onTouched();
};
that.nativeElement.whenRendered(() => {
if (that.nativeElement.querySelector('input')) {
that.eventHandlers['keyupModelHandler'] = (event) => {
setTimeout(() => { that.eventHandlers['changeModelHandler'](event); }, 50);
};
that.nativeElement.querySelector('input').addEventListener('keyup', that.eventHandlers['keyupModelHandler']);
}
});
that.nativeElement.addEventListener('change', that.eventHandlers['changeModelHandler']);
that.nativeElement.addEventListener('blur', that.eventHandlers['blurModelHandler']);
}
/** @description Remove event listeners. */
unlisten() {
const that = this;
if (that.eventHandlers['changeHandler']) {
that.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']);
}
if (that.eventHandlers['displayModeChangingHandler']) {
that.nativeElement.removeEventListener('displayModeChanging', that.eventHandlers['displayModeChangingHandler']);
}
if (that.eventHandlers['displayModeChangeHandler']) {
that.nativeElement.removeEventListener('displayModeChange', that.eventHandlers['displayModeChangeHandler']);
}
if (that.eventHandlers['navigationChangingHandler']) {
that.nativeElement.removeEventListener('navigationChanging', that.eventHandlers['navigationChangingHandler']);
}
if (that.eventHandlers['navigationChangeHandler']) {
that.nativeElement.removeEventListener('navigationChange', that.eventHandlers['navigationChangeHandler']);
}
if (that.eventHandlers['openHandler']) {
that.nativeElement.removeEventListener('open', that.eventHandlers['openHandler']);
}
if (that.eventHandlers['closeHandler']) {
that.nativeElement.removeEventListener('close', that.eventHandlers['closeHandler']);
}
if (that.eventHandlers['changeModelHandler']) {
that.nativeElement.removeEventListener('change', that.eventHandlers['changeModelHandler']);
if (that.nativeElement.querySelector('input')) {
that.nativeElement.querySelector('input').removeEventListener('keyup', that.eventHandlers['keyupModelHandler']);
}
}
if (that.eventHandlers['blurModelHandler']) {
that.nativeElement.removeEventListener('blur', that.eventHandlers['blurModelHandler']);
}
}
}
CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CalendarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
CalendarComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: CalendarComponent, selector: "smart-calendar, [smart-calendar]", inputs: { 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", unlockKey: "unlockKey", 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" }, outputs: { onChange: "onChange", onDisplayModeChanging: "onDisplayModeChanging", onDisplayModeChange: "onDisplayModeChange", onNavigationChanging: "onNavigationChanging", onNavigationChange: "onNavigationChange", onOpen: "onOpen", onClose: "onClose" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], exportAs: ["smart-calendar"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CalendarComponent, decorators: [{
type: Directive,