UNPKG

devextreme-angular

Version:

Angular UI and visualization components based on DevExtreme widgets

962 lines (834 loc) 32.1 kB
import * as i0 from '@angular/core'; import { forwardRef, PLATFORM_ID, Component, Inject, Input, Output, HostListener, NgModule } from '@angular/core'; import DxCalendar from 'devextreme/ui/calendar'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import * as i1 from 'devextreme-angular/core'; import { DxComponent, DxTemplateHost, WatcherHelper, NestedOptionHost, IterableDifferHelper, DxIntegrationModule, DxTemplateModule } from 'devextreme-angular/core'; /*! * devextreme-angular * Version: 24.2.6 * Build date: Mon Mar 17 2025 * * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED * * This software may be modified and distributed under the terms * of the MIT license. See the LICENSE file in the root of the project for details. * * https://github.com/DevExpress/devextreme-angular */ /* tslint:disable:max-line-length */ const CUSTOM_VALUE_ACCESSOR_PROVIDER = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DxCalendarComponent), multi: true }; /** * The Calendar is a UI component that displays a calendar and allows an end user to select the required date within a specified date range. */ class DxCalendarComponent extends DxComponent { _watcherHelper; _idh; instance = null; /** * Specifies the shortcut key that sets focus on the UI component. */ get accessKey() { return this._getOption('accessKey'); } set accessKey(value) { this._setOption('accessKey', value); } /** * Specifies whether the UI component changes its visual state as a result of user interaction. */ get activeStateEnabled() { return this._getOption('activeStateEnabled'); } set activeStateEnabled(value) { this._setOption('activeStateEnabled', value); } /** * Specifies a custom template for calendar cells. */ get cellTemplate() { return this._getOption('cellTemplate'); } set cellTemplate(value) { this._setOption('cellTemplate', value); } /** * Specifies the date-time value serialization format. */ get dateSerializationFormat() { return this._getOption('dateSerializationFormat'); } set dateSerializationFormat(value) { this._setOption('dateSerializationFormat', value); } /** * Specifies whether the UI component responds to user interaction. */ get disabled() { return this._getOption('disabled'); } set disabled(value) { this._setOption('disabled', value); } /** * Specifies dates that users cannot select. */ get disabledDates() { return this._getOption('disabledDates'); } set disabledDates(value) { this._setOption('disabledDates', value); } /** * Specifies the global attributes to be attached to the UI component's container element. */ get elementAttr() { return this._getOption('elementAttr'); } set elementAttr(value) { this._setOption('elementAttr', value); } /** * Specifies the first day of a week. */ get firstDayOfWeek() { return this._getOption('firstDayOfWeek'); } set firstDayOfWeek(value) { this._setOption('firstDayOfWeek', value); } /** * Specifies whether the UI component can be focused using keyboard navigation. */ get focusStateEnabled() { return this._getOption('focusStateEnabled'); } set focusStateEnabled(value) { this._setOption('focusStateEnabled', value); } /** * Specifies the UI component's height. */ get height() { return this._getOption('height'); } set height(value) { this._setOption('height', value); } /** * Specifies text for a hint that appears when a user pauses on the UI component. */ get hint() { return this._getOption('hint'); } set hint(value) { this._setOption('hint', value); } /** * Specifies whether the UI component changes its state when a user pauses on it. */ get hoverStateEnabled() { return this._getOption('hoverStateEnabled'); } set hoverStateEnabled(value) { this._setOption('hoverStateEnabled', value); } /** * Specifies whether the component's current value differs from the initial value. */ get isDirty() { return this._getOption('isDirty'); } set isDirty(value) { this._setOption('isDirty', value); } /** * Specifies or indicates whether the editor's value is valid. */ get isValid() { return this._getOption('isValid'); } set isValid(value) { this._setOption('isValid', value); } /** * The latest date the UI component allows to select. */ get max() { return this._getOption('max'); } set max(value) { this._setOption('max', value); } /** * Specifies the maximum zoom level of the calendar. */ get maxZoomLevel() { return this._getOption('maxZoomLevel'); } set maxZoomLevel(value) { this._setOption('maxZoomLevel', value); } /** * The earliest date the UI component allows to select. */ get min() { return this._getOption('min'); } set min(value) { this._setOption('min', value); } /** * Specifies the minimum zoom level of the calendar. */ get minZoomLevel() { return this._getOption('minZoomLevel'); } set minZoomLevel(value) { this._setOption('minZoomLevel', value); } /** * The value to be assigned to the `name` attribute of the underlying HTML element. */ get name() { return this._getOption('name'); } set name(value) { this._setOption('name', value); } /** * Specifies whether the editor is read-only. */ get readOnly() { return this._getOption('readOnly'); } set readOnly(value) { this._setOption('readOnly', value); } /** * Switches the UI component to a right-to-left representation. */ get rtlEnabled() { return this._getOption('rtlEnabled'); } set rtlEnabled(value) { this._setOption('rtlEnabled', value); } /** * Specifies one of three selection modes: single, multiple, or range. */ get selectionMode() { return this._getOption('selectionMode'); } set selectionMode(value) { this._setOption('selectionMode', value); } /** * Specifies whether a user can select a week by clicking on a week number. */ get selectWeekOnClick() { return this._getOption('selectWeekOnClick'); } set selectWeekOnClick(value) { this._setOption('selectWeekOnClick', value); } /** * Specifies whether or not the UI component displays a button that selects the current date. */ get showTodayButton() { return this._getOption('showTodayButton'); } set showTodayButton(value) { this._setOption('showTodayButton', value); } /** * Specifies whether to display a column with week numbers. */ get showWeekNumbers() { return this._getOption('showWeekNumbers'); } set showWeekNumbers(value) { this._setOption('showWeekNumbers', value); } /** * Specifies the number of the element when the Tab key is used for navigating. */ get tabIndex() { return this._getOption('tabIndex'); } set tabIndex(value) { this._setOption('tabIndex', value); } /** * Information on the broken validation rule. Contains the first item from the validationErrors array. */ get validationError() { return this._getOption('validationError'); } set validationError(value) { this._setOption('validationError', value); } /** * An array of the validation rules that failed. */ get validationErrors() { return this._getOption('validationErrors'); } set validationErrors(value) { this._setOption('validationErrors', value); } /** * Specifies how the message about the validation rules that are not satisfied by this editor's value is displayed. */ get validationMessageMode() { return this._getOption('validationMessageMode'); } set validationMessageMode(value) { this._setOption('validationMessageMode', value); } /** * Specifies the position of a validation message relative to the component. The validation message describes the validation rules that this component's value does not satisfy. */ get validationMessagePosition() { return this._getOption('validationMessagePosition'); } set validationMessagePosition(value) { this._setOption('validationMessagePosition', value); } /** * Indicates or specifies the current validation status. */ get validationStatus() { return this._getOption('validationStatus'); } set validationStatus(value) { this._setOption('validationStatus', value); } /** * An object or a value that specifies the date and time selected in the calendar. */ get value() { return this._getOption('value'); } set value(value) { this._setOption('value', value); } /** * Specifies whether the UI component is visible. */ get visible() { return this._getOption('visible'); } set visible(value) { this._setOption('visible', value); } /** * Specifies a week number calculation rule. */ get weekNumberRule() { return this._getOption('weekNumberRule'); } set weekNumberRule(value) { this._setOption('weekNumberRule', value); } /** * Specifies the UI component's width. */ get width() { return this._getOption('width'); } set width(value) { this._setOption('width', value); } /** * Specifies the current calendar zoom level. */ get zoomLevel() { return this._getOption('zoomLevel'); } set zoomLevel(value) { this._setOption('zoomLevel', value); } /** * A function that is executed before the UI component is disposed of. */ onDisposing; /** * A function used in JavaScript frameworks to save the UI component instance. */ onInitialized; /** * A function that is executed after a UI component property is changed. */ onOptionChanged; /** * A function that is executed after the UI component's value is changed. */ onValueChanged; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ accessKeyChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ activeStateEnabledChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ cellTemplateChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ dateSerializationFormatChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ disabledChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ disabledDatesChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ elementAttrChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ firstDayOfWeekChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ focusStateEnabledChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ heightChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ hintChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ hoverStateEnabledChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ isDirtyChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ isValidChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ maxChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ maxZoomLevelChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ minChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ minZoomLevelChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ nameChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ readOnlyChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ rtlEnabledChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ selectionModeChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ selectWeekOnClickChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ showTodayButtonChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ showWeekNumbersChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ tabIndexChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ validationErrorChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ validationErrorsChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ validationMessageModeChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ validationMessagePositionChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ validationStatusChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ valueChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ visibleChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ weekNumberRuleChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ widthChange; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ zoomLevelChange; /** * */ onBlur; change(_) { } touched = (_) => { }; constructor(elementRef, ngZone, templateHost, _watcherHelper, _idh, optionHost, transferState, platformId) { super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId); this._watcherHelper = _watcherHelper; this._idh = _idh; this._createEventEmitters([ { subscribe: 'disposing', emit: 'onDisposing' }, { subscribe: 'initialized', emit: 'onInitialized' }, { subscribe: 'optionChanged', emit: 'onOptionChanged' }, { subscribe: 'valueChanged', emit: 'onValueChanged' }, { emit: 'accessKeyChange' }, { emit: 'activeStateEnabledChange' }, { emit: 'cellTemplateChange' }, { emit: 'dateSerializationFormatChange' }, { emit: 'disabledChange' }, { emit: 'disabledDatesChange' }, { emit: 'elementAttrChange' }, { emit: 'firstDayOfWeekChange' }, { emit: 'focusStateEnabledChange' }, { emit: 'heightChange' }, { emit: 'hintChange' }, { emit: 'hoverStateEnabledChange' }, { emit: 'isDirtyChange' }, { emit: 'isValidChange' }, { emit: 'maxChange' }, { emit: 'maxZoomLevelChange' }, { emit: 'minChange' }, { emit: 'minZoomLevelChange' }, { emit: 'nameChange' }, { emit: 'readOnlyChange' }, { emit: 'rtlEnabledChange' }, { emit: 'selectionModeChange' }, { emit: 'selectWeekOnClickChange' }, { emit: 'showTodayButtonChange' }, { emit: 'showWeekNumbersChange' }, { emit: 'tabIndexChange' }, { emit: 'validationErrorChange' }, { emit: 'validationErrorsChange' }, { emit: 'validationMessageModeChange' }, { emit: 'validationMessagePositionChange' }, { emit: 'validationStatusChange' }, { emit: 'valueChange' }, { emit: 'visibleChange' }, { emit: 'weekNumberRuleChange' }, { emit: 'widthChange' }, { emit: 'zoomLevelChange' }, { emit: 'onBlur' } ]); this._idh.setHost(this); optionHost.setHost(this); } _createInstance(element, options) { return new DxCalendar(element, options); } writeValue(value) { this.eventHelper.lockedValueChangeEvent = true; this.value = value; this.eventHelper.lockedValueChangeEvent = false; } setDisabledState(isDisabled) { this.disabled = isDisabled; } registerOnChange(fn) { this.change = fn; } registerOnTouched(fn) { this.touched = fn; } _createWidget(element) { super._createWidget(element); this.instance.on('focusOut', (e) => { this.eventHelper.fireNgEvent('onBlur', [e]); }); } ngOnDestroy() { this._destroyWidget(); } ngOnChanges(changes) { super.ngOnChanges(changes); this.setupChanges('disabledDates', changes); this.setupChanges('validationErrors', changes); this.setupChanges('value', changes); } setupChanges(prop, changes) { if (!(prop in this._optionsToUpdate)) { this._idh.setup(prop, changes); } } ngDoCheck() { this._idh.doCheck('disabledDates'); this._idh.doCheck('validationErrors'); this._idh.doCheck('value'); this._watcherHelper.checkWatchers(); super.ngDoCheck(); super.clearChangedOptions(); } _setOption(name, value) { let isSetup = this._idh.setupSingle(name, value); let isChanged = this._idh.getChanges(name, value) !== null; if (isSetup || isChanged) { super._setOption(name, value); } } /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DxCalendarComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.DxTemplateHost }, { token: i1.WatcherHelper }, { token: i1.IterableDifferHelper }, { token: i1.NestedOptionHost }, { token: i0.TransferState }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DxCalendarComponent, selector: "dx-calendar", inputs: { accessKey: "accessKey", activeStateEnabled: "activeStateEnabled", cellTemplate: "cellTemplate", dateSerializationFormat: "dateSerializationFormat", disabled: "disabled", disabledDates: "disabledDates", elementAttr: "elementAttr", firstDayOfWeek: "firstDayOfWeek", focusStateEnabled: "focusStateEnabled", height: "height", hint: "hint", hoverStateEnabled: "hoverStateEnabled", isDirty: "isDirty", isValid: "isValid", max: "max", maxZoomLevel: "maxZoomLevel", min: "min", minZoomLevel: "minZoomLevel", name: "name", readOnly: "readOnly", rtlEnabled: "rtlEnabled", selectionMode: "selectionMode", selectWeekOnClick: "selectWeekOnClick", showTodayButton: "showTodayButton", showWeekNumbers: "showWeekNumbers", tabIndex: "tabIndex", validationError: "validationError", validationErrors: "validationErrors", validationMessageMode: "validationMessageMode", validationMessagePosition: "validationMessagePosition", validationStatus: "validationStatus", value: "value", visible: "visible", weekNumberRule: "weekNumberRule", width: "width", zoomLevel: "zoomLevel" }, outputs: { onDisposing: "onDisposing", onInitialized: "onInitialized", onOptionChanged: "onOptionChanged", onValueChanged: "onValueChanged", accessKeyChange: "accessKeyChange", activeStateEnabledChange: "activeStateEnabledChange", cellTemplateChange: "cellTemplateChange", dateSerializationFormatChange: "dateSerializationFormatChange", disabledChange: "disabledChange", disabledDatesChange: "disabledDatesChange", elementAttrChange: "elementAttrChange", firstDayOfWeekChange: "firstDayOfWeekChange", focusStateEnabledChange: "focusStateEnabledChange", heightChange: "heightChange", hintChange: "hintChange", hoverStateEnabledChange: "hoverStateEnabledChange", isDirtyChange: "isDirtyChange", isValidChange: "isValidChange", maxChange: "maxChange", maxZoomLevelChange: "maxZoomLevelChange", minChange: "minChange", minZoomLevelChange: "minZoomLevelChange", nameChange: "nameChange", readOnlyChange: "readOnlyChange", rtlEnabledChange: "rtlEnabledChange", selectionModeChange: "selectionModeChange", selectWeekOnClickChange: "selectWeekOnClickChange", showTodayButtonChange: "showTodayButtonChange", showWeekNumbersChange: "showWeekNumbersChange", tabIndexChange: "tabIndexChange", validationErrorChange: "validationErrorChange", validationErrorsChange: "validationErrorsChange", validationMessageModeChange: "validationMessageModeChange", validationMessagePositionChange: "validationMessagePositionChange", validationStatusChange: "validationStatusChange", valueChange: "valueChange", visibleChange: "visibleChange", weekNumberRuleChange: "weekNumberRuleChange", widthChange: "widthChange", zoomLevelChange: "zoomLevelChange", onBlur: "onBlur" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "valueChange": "change($event)", "onBlur": "touched($event)" } }, providers: [ DxTemplateHost, WatcherHelper, CUSTOM_VALUE_ACCESSOR_PROVIDER, NestedOptionHost, IterableDifferHelper ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DxCalendarComponent, decorators: [{ type: Component, args: [{ selector: 'dx-calendar', template: '', host: { ngSkipHydration: 'true' }, providers: [ DxTemplateHost, WatcherHelper, CUSTOM_VALUE_ACCESSOR_PROVIDER, NestedOptionHost, IterableDifferHelper ] }] }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.DxTemplateHost }, { type: i1.WatcherHelper }, { type: i1.IterableDifferHelper }, { type: i1.NestedOptionHost }, { type: i0.TransferState }, { type: undefined, decorators: [{ type: Inject, args: [PLATFORM_ID] }] }], propDecorators: { accessKey: [{ type: Input }], activeStateEnabled: [{ type: Input }], cellTemplate: [{ type: Input }], dateSerializationFormat: [{ type: Input }], disabled: [{ type: Input }], disabledDates: [{ type: Input }], elementAttr: [{ type: Input }], firstDayOfWeek: [{ type: Input }], focusStateEnabled: [{ type: Input }], height: [{ type: Input }], hint: [{ type: Input }], hoverStateEnabled: [{ type: Input }], isDirty: [{ type: Input }], isValid: [{ type: Input }], max: [{ type: Input }], maxZoomLevel: [{ type: Input }], min: [{ type: Input }], minZoomLevel: [{ type: Input }], name: [{ type: Input }], readOnly: [{ type: Input }], rtlEnabled: [{ type: Input }], selectionMode: [{ type: Input }], selectWeekOnClick: [{ type: Input }], showTodayButton: [{ type: Input }], showWeekNumbers: [{ type: Input }], tabIndex: [{ type: Input }], validationError: [{ type: Input }], validationErrors: [{ type: Input }], validationMessageMode: [{ type: Input }], validationMessagePosition: [{ type: Input }], validationStatus: [{ type: Input }], value: [{ type: Input }], visible: [{ type: Input }], weekNumberRule: [{ type: Input }], width: [{ type: Input }], zoomLevel: [{ type: Input }], onDisposing: [{ type: Output }], onInitialized: [{ type: Output }], onOptionChanged: [{ type: Output }], onValueChanged: [{ type: Output }], accessKeyChange: [{ type: Output }], activeStateEnabledChange: [{ type: Output }], cellTemplateChange: [{ type: Output }], dateSerializationFormatChange: [{ type: Output }], disabledChange: [{ type: Output }], disabledDatesChange: [{ type: Output }], elementAttrChange: [{ type: Output }], firstDayOfWeekChange: [{ type: Output }], focusStateEnabledChange: [{ type: Output }], heightChange: [{ type: Output }], hintChange: [{ type: Output }], hoverStateEnabledChange: [{ type: Output }], isDirtyChange: [{ type: Output }], isValidChange: [{ type: Output }], maxChange: [{ type: Output }], maxZoomLevelChange: [{ type: Output }], minChange: [{ type: Output }], minZoomLevelChange: [{ type: Output }], nameChange: [{ type: Output }], readOnlyChange: [{ type: Output }], rtlEnabledChange: [{ type: Output }], selectionModeChange: [{ type: Output }], selectWeekOnClickChange: [{ type: Output }], showTodayButtonChange: [{ type: Output }], showWeekNumbersChange: [{ type: Output }], tabIndexChange: [{ type: Output }], validationErrorChange: [{ type: Output }], validationErrorsChange: [{ type: Output }], validationMessageModeChange: [{ type: Output }], validationMessagePositionChange: [{ type: Output }], validationStatusChange: [{ type: Output }], valueChange: [{ type: Output }], visibleChange: [{ type: Output }], weekNumberRuleChange: [{ type: Output }], widthChange: [{ type: Output }], zoomLevelChange: [{ type: Output }], onBlur: [{ type: Output }], change: [{ type: HostListener, args: ['valueChange', ['$event']] }], touched: [{ type: HostListener, args: ['onBlur', ['$event']] }] } }); class DxCalendarModule { /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DxCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); /** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DxCalendarModule, declarations: [DxCalendarComponent], imports: [DxIntegrationModule, DxTemplateModule], exports: [DxCalendarComponent, DxTemplateModule] }); /** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DxCalendarModule, imports: [DxIntegrationModule, DxTemplateModule, DxTemplateModule] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DxCalendarModule, decorators: [{ type: NgModule, args: [{ imports: [ DxIntegrationModule, DxTemplateModule ], declarations: [ DxCalendarComponent ], exports: [ DxCalendarComponent, DxTemplateModule ] }] }] }); /** * Generated bundle index. Do not edit. */ export { DxCalendarComponent, DxCalendarModule }; //# sourceMappingURL=devextreme-angular-ui-calendar.mjs.map