@wavemaker-ai/app-ng-runtime 1.0.0-rc.309

package/components/input/calendar/bundles/index.umd.js

@@ -0,0 +1,655 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@wm/core'), require('@wm/components/base'), require('lodash-es'), require('moment'), require('@fullcalendar/core'), require('@fullcalendar/daygrid'), require('@fullcalendar/timegrid'), require('@fullcalendar/list'), require('@fullcalendar/interaction'), require('@fullcalendar/core/locales-all')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@wm/core', '@wm/components/base', 'lodash-es', 'moment', '@fullcalendar/core', '@fullcalendar/daygrid', '@fullcalendar/timegrid', '@fullcalendar/list', '@fullcalendar/interaction', '@fullcalendar/core/locales-all'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = global.wm.components.input || {}, global.wm.components.input.calendar = {}), global.ng.core, global.wm.core, global.wm.components.base, global._, global.momentLib, global.core, global.dayGridPlugin, global.timeGridPlugin, global.listPlugin, global.interactionPlugin, global.allLocales));
+})(this, (function (exports, i0, i1, base, lodashEs, momentLib, core, dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin, allLocales) { 'use strict';
+
+    function _interopNamespaceDefault(e) {
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n.default = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+    var momentLib__namespace = /*#__PURE__*/_interopNamespaceDefault(momentLib);
+
+    const registerProps = () => {
+        const props = new Map([
+            ['calendartype', { value: 'basic', ...base.PROP_STRING }],
+            ['class', base.PROP_STRING],
+            ['tabindex', { value: 0, ...base.PROP_NUMBER }],
+            ['controls', { value: 'navigation, today, year, month, week, day', ...base.PROP_STRING }],
+            ['dataset', base.PROP_ANY],
+            ['datavalue', base.PROP_STRING],
+            ['eventallday', base.PROP_STRING],
+            ['eventclass', base.PROP_STRING],
+            ['eventend', base.PROP_STRING],
+            ['eventstart', base.PROP_STRING],
+            ['eventtitle', base.PROP_STRING],
+            ['name', base.PROP_STRING],
+            ['show', { value: true, ...base.PROP_BOOLEAN }],
+            ['showindevice', { displayType: 'inline-block', value: 'all', ...base.PROP_STRING }],
+            ['view', base.PROP_STRING],
+            ['selectionmode', base.PROP_STRING]
+        ]);
+        base.register('wm-calendar', props);
+    };
+
+    const moment = momentLib__namespace.default || window['moment'];
+    const DEFAULT_CLS = 'app-calendar';
+    const defaultHeaderOptions = {
+        start: 'prev next today',
+        center: 'title',
+        end: 'dayGridMonth dayGridWeek dayGridDay'
+    };
+    const VIEW_TYPES = {
+        BASIC: 'basic',
+        LIST: 'list'
+    };
+    const BUTTON_TEXT = {
+        YEAR: 'Year',
+        MONTH: 'Month',
+        WEEK: 'Week',
+        DAY: 'Day',
+        TODAY: 'Today'
+    };
+    const SELECTION_MODES = {
+        NONE: 'none',
+        SINGLE: 'single'};
+    const NEXT_DAY_THRESHOLD = {
+        START: '00:00',
+        END: '24:00'
+    };
+    const getUTCDateTime = (dateObj) => {
+        dateObj = moment(dateObj);
+        const year = dateObj.format('YYYY'), 
+        // javascript starts the month count from '0' where as moment returns the human count
+        month = dateObj.format('MM') - 1, day = dateObj.format('DD'), hours = dateObj.format('HH'), minutes = dateObj.format('mm'), seconds = dateObj.format('ss');
+        return new Date(year, month, day, hours, minutes, seconds);
+    };
+    const WIDGET_CONFIG = { widgetType: 'wm-calendar', hostClass: DEFAULT_CLS };
+    const dateFormat = 'YYYY/MM/DD';
+    class CalendarComponent extends base.StylableComponent {
+        static { this.initializeProps = registerProps(); }
+        // this function selects the default date given for the calendar
+        selectDate() {
+            let start, end;
+            // checks if datavalue is an object and not a Date object
+            if (lodashEs.isObject(this.datavalue) && !lodashEs.isDate(this.datavalue)) {
+                // @ts-ignore
+                start = moment(this.datavalue.start);
+                // @ts-ignore
+                end = moment(this.datavalue.end);
+            }
+            else {
+                start = moment(this.datavalue);
+                end = moment(this.datavalue).add(1, 'day').startOf('day');
+            }
+            this.$fullCalendar.gotoDate(moment(start)._d); // after selecting the date go to the date.
+            this.$fullCalendar.select(start.valueOf(), end.valueOf());
+        }
+        // changes the calendar view to the default date given for the calendar.
+        gotoDate() {
+            this.$fullCalendar.gotoDate(moment(this.datavalue)._d);
+        }
+        // this function takes the calendar view to the a year ahead
+        gotoNextYear() {
+            this.$fullCalendar.nextYear();
+        }
+        // this function takes the calendar view to the a year before
+        gotoPrevYear() {
+            this.$fullCalendar.prevYear();
+        }
+        /**
+         * this function takes the calendar view to the specified month
+         * @param monthVal, 1-12 value of month
+         */
+        gotoMonth(monthVal) {
+            let presentDay = this.$fullCalendar.getDate();
+            const presentMonthVal = presentDay.getMonth();
+            presentDay = moment(presentDay);
+            if (presentMonthVal < monthVal) {
+                this.$fullCalendar.gotoDate(presentDay.add(monthVal - presentMonthVal - 1, 'M').valueOf());
+            }
+            else {
+                this.$fullCalendar.gotoDate(presentDay.subtract(presentMonthVal - monthVal + 1, 'M').valueOf());
+            }
+        }
+        // this function takes the calendar view to the a month ahead
+        gotoNextMonth() {
+            const presentDay = moment(this.$fullCalendar.getDate());
+            this.$fullCalendar.gotoDate(presentDay.add(1, 'M').valueOf());
+        }
+        // this function takes the calendar view to the a month before
+        gotoPrevMonth() {
+            const presentDay = moment(this.$fullCalendar.getDate());
+            this.$fullCalendar.gotoDate(presentDay.subtract(1, 'M').valueOf());
+        }
+        // this function re-renders the events assigned to the calendar.
+        rerenderEvents() {
+            this.$fullCalendar.render();
+        }
+        setSelectedData(start, end) {
+            let dataset = this.dataset;
+            if (!dataset) {
+                return;
+            }
+            const filteredDates = [];
+            const eventStartKey = this.eventstart || 'start';
+            const eventEndKey = this.eventend || 'end';
+            const startDate = moment(new Date(start)).format('MM/DD/YYYY');
+            const endDate = moment(new Date(end)).subtract(1, 'days').format('MM/DD/YYYY');
+            dataset = dataset.data || dataset;
+            dataset.forEach((value) => {
+                if (!value[eventStartKey]) {
+                    return;
+                }
+                const eventStartDate = moment(new Date(value[eventStartKey])).format('MM/DD/YYYY');
+                const eventEndDate = moment(new Date(value[eventEndKey] || value[eventStartKey])).format('MM/DD/YYYY');
+                const eventExists = moment(eventStartDate).isSameOrAfter(startDate) && moment(eventEndDate).isSameOrBefore(endDate);
+                if (eventExists) {
+                    filteredDates.push(value);
+                }
+            });
+            return filteredDates;
+        }
+        eventDrop(eventDropInfo) {
+            let newDataObj = this.convertEventObjForOldAndNewData(eventDropInfo.event);
+            let oldDataObj = this.convertEventObjForOldAndNewData(eventDropInfo.oldEvent);
+            this.invokeEventCallback('eventdrop', { $event: eventDropInfo.jsEvent, $newData: newDataObj, $oldData: oldDataObj, $delta: eventDropInfo.delta, $revertFunc: eventDropInfo.revert, $ui: {}, $view: eventDropInfo.view });
+        }
+        // Returns the default date when the datavalue is provided
+        getDefaultDate() {
+            if (this.datavalue) {
+                return new Date(this.datavalue);
+            }
+        }
+        getDefaultOptions() {
+            return this.calendarOptions;
+        }
+        getLib() {
+            return 'fullcalendar';
+        }
+        select($selectionInfo) {
+            this.selecteddates = { start: getUTCDateTime($selectionInfo.start), end: getUTCDateTime($selectionInfo.end) };
+            this.selecteddata = this.setSelectedData($selectionInfo.start, $selectionInfo.end);
+            this.invokeEventCallback('select', { $start: $selectionInfo.start.valueOf(), $end: $selectionInfo.end.valueOf(), $view: $selectionInfo.view, $data: this.selecteddata });
+        }
+        /**
+         *  this functions unselects all the selections in calendar
+         */
+        unselect() {
+            this.$fullCalendar.unselect();
+        }
+        /**
+         * this function is to add extendedProps data to the data object.
+         * this is done for backward compatibility
+         * @param eventObj event object as per new version (v5)
+         * @returns _eventMetadata event object as per the old version (v3)
+         */
+        convertEventObj(eventObj) {
+            if (!eventObj.extendedProps._eventMetadata) {
+                return eventObj;
+            }
+            const _eventMetadata = eventObj.extendedProps._eventMetadata;
+            Object.setPrototypeOf(_eventMetadata, eventObj);
+            return _eventMetadata;
+        }
+        /**
+         *  this function is to add extendedProps data to the data object exluding start end title allDay objects if the key name matches.
+         * * this is done for backward compatibility
+         * @param eventObj event object as per new version (v5)
+         * @returns data event object as per the old version (v3)
+         */
+        convertEventObjForOldAndNewData(eventObj) {
+            const _eventMetadata = eventObj.extendedProps;
+            lodashEs.extend(eventObj, _eventMetadata);
+            return eventObj;
+        }
+        eventResize(eventResizeInfo) {
+            let newDataObj = this.convertEventObjForOldAndNewData(eventResizeInfo.event);
+            let oldDataObj = this.convertEventObjForOldAndNewData(eventResizeInfo.oldEvent);
+            this.invokeEventCallback('eventresize', { $event: eventResizeInfo.jsEvent, $newData: newDataObj, $oldData: oldDataObj, $delta: eventResizeInfo.delta, $revertFunc: eventResizeInfo.revert, $ui: {}, $view: eventResizeInfo.view });
+        }
+        onEventChangeStart(event) {
+            this.oldData = i1.getClonedObject(event);
+        }
+        eventClick(eventClickInfo) {
+            let eventObj = this.convertEventObj(eventClickInfo.event);
+            this.invokeEventCallback('eventclick', { $event: eventClickInfo.jsEvent, $data: eventObj, $view: eventClickInfo.view });
+        }
+        eventDidMount(event) {
+            let eventObj = this.convertEventObj(event.event);
+            if (this.calendartype === VIEW_TYPES.LIST) {
+                this.$element.find('.fc-list-table').addClass('table');
+            }
+            this.invokeEventCallback('eventrender', { $event: event.el, $data: eventObj, $view: event.view });
+        }
+        viewDidMount($view) {
+            if (this.calendartype === VIEW_TYPES.LIST) {
+                this.$element.find('.fc-list-table').addClass('table');
+            }
+            this.invokeEventCallback('viewrender', { $view: $view });
+        }
+        /**
+         * This function gets called when the view of the calendar changes.
+         * @param data contains the start end data of the calendar view.
+         */
+        datesSet(data) {
+            this.currentview = { start: moment(data.start).format("YYYY-MM-DD"), end: moment(data.end).format("YYYY-MM-DD") };
+        }
+        dateClick($info) {
+            const dateInfo = getUTCDateTime($info.date).valueOf();
+            this.invokeEventCallback('dateclick', { $dateInfo: dateInfo });
+        }
+        // update the calendar header options once the controls changes
+        updateCalendarHeaderOptions() {
+            const ctrls = this.controls, viewType = this.calendartype, regEx = new RegExp('\\bday\\b', 'g');
+            let left = '', right = '';
+            if (ctrls && viewType) {
+                if (lodashEs.includes(ctrls, 'navigation')) {
+                    left += ' prev next';
+                }
+                if (lodashEs.includes(ctrls, 'today')) {
+                    left += ' today';
+                }
+                if (lodashEs.includes(ctrls, 'year')) {
+                    right += (viewType === VIEW_TYPES.LIST) ? 'listYear' : '';
+                }
+                if (lodashEs.includes(ctrls, 'month')) {
+                    right += (viewType === VIEW_TYPES.LIST) ? ' listMonth' : ' dayGridMonth';
+                }
+                if (lodashEs.includes(ctrls, 'week')) {
+                    right += (viewType === VIEW_TYPES.BASIC) ? ' dayGridWeek' : (viewType === VIEW_TYPES.LIST) ? ' listWeek' : ' timeGridWeek';
+                }
+                if (regEx.test(ctrls)) {
+                    right += (viewType === VIEW_TYPES.BASIC) ? ' dayGridDay' : (viewType === VIEW_TYPES.LIST) ? ' listDay' : ' timeGridDay';
+                }
+                if (left.charAt(0) === ' ') {
+                    left = left.substring(1);
+                }
+                if (right.charAt(0) === ' ') {
+                    right = right.substring(1);
+                }
+                lodashEs.extend(this.calendarOptions.calendar.headerToolbar, { 'start': left, 'end': right });
+            }
+        }
+        constructor(inj, i18nService, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
+            this.controls = 'navigation, today, year, month, week, day';
+            this.eventSources = [];
+            this.dataSetEvents = {
+                events: []
+            };
+            this.changesStack = [];
+            // calendarOptions to the calendar
+            this.calendarOptions = {
+                calendar: {
+                    height: 600,
+                    eventSources: this.eventSources,
+                    editable: true,
+                    locale: i1.getSessionStorageItem('selectedLocale') || 'en',
+                    selectable: false,
+                    longPressDelay: i1.isMobile() ? 1 : 1000,
+                    headerToolbar: defaultHeaderOptions,
+                    nextDayThreshold: NEXT_DAY_THRESHOLD,
+                    views: {
+                        month: {
+                            dayMaxEventsRow: true
+                        }
+                    },
+                    unselectAuto: false,
+                    eventDrop: this.eventDrop.bind(this),
+                    eventResizeStart: this.onEventChangeStart.bind(this),
+                    eventDragStart: this.onEventChangeStart.bind(this),
+                    eventResize: this.eventResize.bind(this),
+                    eventClick: this.eventClick.bind(this),
+                    select: this.select.bind(this),
+                    eventDidMount: this.eventDidMount.bind(this),
+                    viewDidMount: this.viewDidMount.bind(this),
+                    datesSet: this.datesSet.bind(this),
+                    dateClick: this.dateClick.bind(this)
+                }
+            };
+            this.dayClass = [];
+            this.eventSources.push(this.dataSetEvents);
+            let FullCalendar = window['FullCalendar'] ? window['FullCalendar'] : core.Calendar;
+            if (!FullCalendar.__wm_locale_initialized) {
+                i18nService.initCalendarLocale();
+                FullCalendar.__wm_locale_initialized = true;
+            }
+            this.cancelLocaleChangeSubscription = this.getAppInstance().subscribe("locale-changed", (libLocale) => {
+                this.setLocale();
+                this.applyCalendarOptions('option', 'locale', libLocale.fullCalendar || 'en');
+                this.redraw();
+            });
+        }
+        ngOnInit() {
+            super.ngOnInit();
+            base.styler(this.nativeElement, this, base.APPLY_STYLES_TYPE.CONTAINER, ['height']);
+            this.setLocale();
+        }
+        onStyleChange(key, nv, ov) {
+            super.onStyleChange(key, nv, ov);
+            if (key === 'height') {
+                this.calendarOptions.calendar.height = this.calculateHeight(nv);
+                this.updateCalendarOptions('option', 'height', this.calendarOptions.calendar.height);
+            }
+        }
+        onPropertyChange(key, nv, ov) {
+            super.onPropertyChange(key, nv, ov);
+            switch (key) {
+                case 'selectionmode':
+                    if (nv !== SELECTION_MODES.NONE) {
+                        this.calendarOptions.calendar.selectable = true;
+                        this.updateCalendarOptions('option', 'selectable', true);
+                        if (nv === SELECTION_MODES.SINGLE) {
+                            this.calendarOptions.calendar.selectConstraint = {
+                                startTime: '00:00',
+                                endTime: '24:00'
+                            };
+                            this.updateCalendarOptions('option', 'selectConstraint', this.calendarOptions.calendar.selectConstraint);
+                        }
+                        else {
+                            this.updateCalendarOptions('option', 'selectConstraint', {});
+                        }
+                    }
+                    else {
+                        this.calendarOptions.calendar.selectable = false;
+                        this.updateCalendarOptions('option', 'selectable', false);
+                    }
+                    break;
+                case 'view':
+                    if (nv !== 'month' || this.calendartype === VIEW_TYPES.LIST) {
+                        this.calendarOptions.calendar.defaultView = this.calendartype + lodashEs.capitalize(nv);
+                    }
+                    else {
+                        this.calendarOptions.calendar.defaultView = nv;
+                    }
+                    this.updateCalendarOptions('changeView', this.calendarOptions.calendar.defaultView);
+                    break;
+                case 'calendartype':
+                    this.calendartype = nv || 'dayGrid';
+                case 'controls':
+                    this.updateCalendarHeaderOptions();
+                    break;
+                case 'dataset':
+                    let dataSet;
+                    this.dataset = nv;
+                    dataSet = base.createArrayFrom(i1.getClonedObject(nv));
+                    dataSet = this.constructCalendarDataset(dataSet);
+                    this.dataSetEvents.events = dataSet.filter((event) => {
+                        event.start = event.start || event.end;
+                        if (event.start) {
+                            return true;
+                        }
+                    });
+                    this.renderEventDataSet();
+                    break;
+                case 'show':
+                    this.$fullCalendar?.changeView(this.getViewType(this.view ? this.view : 'dayGridMonth'));
+            }
+        }
+        // to calculate the height for the event limit and parsing the value when it is percentage based.
+        calculateHeight(height) {
+            const $parent = $(this.nativeElement).parent(), elHeight = height || '650px';
+            let parentHeight = $parent.css('height'), computedHeight;
+            if (lodashEs.includes(elHeight, '%')) {
+                if (lodashEs.includes(parentHeight, '%')) {
+                    parentHeight = $parent.height();
+                }
+                computedHeight = (parseInt(parentHeight, 10) * Number(elHeight.replace(/\%/g, ''))) / 100;
+            }
+            else {
+                computedHeight = parseInt(elHeight, 10);
+            }
+            this.calendarOptions.calendar.views.month.eventLimit = parseInt('' + computedHeight / 200, 10) + 1;
+            return computedHeight;
+        }
+        ngAfterViewInit() {
+            super.ngAfterViewInit();
+            const calendarEl = this._calendar.nativeElement;
+            let FullCalendar;
+            if (window['FullCalendar'])
+                FullCalendar = window['FullCalendar'].Calendar;
+            else {
+                FullCalendar = core.Calendar;
+                this.calendarOptions.calendar = { ...this.calendarOptions.calendar, plugins: [dayGridPlugin, timeGridPlugin, listPlugin, listPlugin, interactionPlugin], locales: allLocales };
+            }
+            const calendar = new FullCalendar(calendarEl, this.calendarOptions.calendar);
+            this.$fullCalendar = calendar;
+            this.invokeEventCallback('beforerender', { '$event': {} });
+            calendar.render();
+            // if the changes are already stacked before calendar renders then execute them when needed
+            if (this.changesStack.length) {
+                this.changesStack.forEach((changeObj) => {
+                    this.applyCalendarOptions(changeObj.operationType, changeObj.argumentKey, changeObj.argumentValue);
+                });
+                this.changesStack.length = 0;
+            }
+            $(".fc-prev-button").attr("aria-label", "prev");
+            $(".fc-next-button").attr("aria-label", "next");
+            $(".fc-today-button").attr("aria-label", "today");
+            //WMS-22412 : change calender's view based on the configuration set from studio
+            setTimeout(() => {
+                this.$fullCalendar.changeView(this.getViewType(this.view ? this.view : 'dayGridMonth'));
+            }, 50);
+        }
+        // constructs the calendar dataset by mapping the eventstart, eventend, eventtitle etc.,
+        constructCalendarDataset(eventSource) {
+            const properties = {
+                title: this.eventtitle || 'title',
+                allDay: this.eventallday || 'allday',
+                start: this.eventstart || 'start',
+                end: this.eventend || 'end',
+                className: this.eventclass || 'className'
+            };
+            eventSource.forEach((obj) => {
+                obj._eventMetadata = lodashEs.clone(obj);
+                if (lodashEs.isEmpty(obj._eventMetadata.url)) {
+                    delete obj._eventMetadata.url;
+                }
+                if (lodashEs.isEmpty(obj.url)) {
+                    delete obj.url;
+                }
+                lodashEs.mapKeys(properties, (value, key) => {
+                    let objVal;
+                    if (key === 'title') {
+                        objVal = base.getEvaluatedData(obj, { expression: value }, this.viewParent);
+                    }
+                    else if (key === 'allDay') {
+                        objVal = !!lodashEs.get(obj, value);
+                    }
+                    else {
+                        objVal = lodashEs.get(obj, value);
+                    }
+                    if (!objVal) {
+                        return;
+                    }
+                    obj[key] = objVal;
+                });
+            });
+            return eventSource;
+        }
+        setLocale() {
+            const year = lodashEs.get(this.appLocale, 'LABEL_CALENDAR_YEAR') || BUTTON_TEXT.YEAR;
+            const month = lodashEs.get(this.appLocale, 'LABEL_CALENDAR_MONTH') || BUTTON_TEXT.MONTH;
+            const week = lodashEs.get(this.appLocale, 'LABEL_CALENDAR_WEEK') || BUTTON_TEXT.WEEK;
+            const day = lodashEs.get(this.appLocale, 'LABEL_CALENDAR_DAY') || BUTTON_TEXT.DAY;
+            const today = lodashEs.get(this.appLocale, 'LABEL_CALENDAR_TODAY') || BUTTON_TEXT.TODAY;
+            this.calendarOptions.calendar.buttonText = { year, month, week, day, today,
+                'listYear': year,
+                'listMonth': month,
+                'listWeek': week,
+                'listDay': day
+            };
+        }
+        /**
+         * override the default calendar options with the newSet of options
+         * @param options
+         */
+        overrideDefaults(options) {
+            if (lodashEs.isObject(options)) {
+                Object.entries(options).map(option => this.$fullCalendar.setOption(option[0], option[1]));
+            }
+        }
+        /**
+         * if the operations are performed before the calendar renders, the changes are pushed into changesStack and will be executed after the calendar gets rendered
+         * if the calendar is already rendered, then the specific operation will be performed according to the operation type
+         * @param operationType
+         * @param argumentKey
+         * @param argumentValue
+         */
+        updateCalendarOptions(operationType, argumentKey, argumentValue) {
+            if (!this.$fullCalendar) {
+                this.changesStack.push({
+                    operationType: operationType,
+                    argumentKey: argumentKey,
+                    argumentValue: argumentValue
+                });
+                return;
+            }
+            this.applyCalendarOptions(operationType, argumentKey, argumentValue);
+        }
+        redraw() {
+            this.updateCalendarOptions('render');
+            this.$fullCalendar?.changeView(this.getViewType(this.view ? this.view : 'dayGridMonth'));
+        }
+        // on date change invoke the select event, and if date has event on it then invoke the event click.
+        onValueChange(value) {
+            this.proxyModel = value;
+            const selectedDate = this.proxyModel && moment(this.proxyModel).startOf('day').format(dateFormat), selectedEventData = this.eventData[selectedDate], start = moment(this.proxyModel), end = moment(this.proxyModel).endOf('day');
+            this.selecteddata = selectedEventData;
+            this.selecteddates = {
+                'start': moment(selectedDate).valueOf(),
+                'end': moment(selectedDate).endOf('day').valueOf()
+            };
+            this.calendarOptions.calendar.select(start.valueOf(), end.valueOf(), {}, this, selectedEventData);
+            if (selectedEventData) {
+                this.calendarOptions.calendar.eventClick(selectedEventData, {}, this);
+            }
+        }
+        /**
+         * This function will receive an object containing source of calendar, apikey and calendarId and will integrate the respective calendar with fullcalendar.
+         * @param eventObject
+         */
+        addEventSource(eventObject) {
+            if (lodashEs.isEmpty(eventObject)) {
+                console.warn('addEventSource method requires an object as a parameter.');
+                return;
+            }
+            if (eventObject.source === 'google') {
+                if (!eventObject.googleCalendarApiKey || !eventObject.googleCalendarId) {
+                    console.warn('For google calendar integration, \'googleCalendarApiKey\' and \'googleCalendarId\' should be passed in the parameter object.');
+                    return;
+                }
+                this.$fullCalendar.setOption('googleCalendarApiKey', eventObject.googleCalendarApiKey);
+                this.$fullCalendar.addEventSource({
+                    googleCalendarId: eventObject.googleCalendarId
+                });
+            }
+        }
+        /**
+         * get the viewTypeKey according to the calendarType and viewType selected
+         * @param viewKey
+         */
+        getViewType(viewKey) {
+            const calendarType = this.calendartype;
+            const view = this.view;
+            let result;
+            if (view === 'month') {
+                result = (calendarType === VIEW_TYPES.LIST) ? 'listMonth' : 'dayGridMonth';
+            }
+            else if (view === 'week') {
+                result = (calendarType === VIEW_TYPES.BASIC) ? 'dayGridWeek' : (calendarType === VIEW_TYPES.LIST) ? 'listWeek' : 'timeGridWeek';
+            }
+            else if (view === 'day') {
+                result = (calendarType === VIEW_TYPES.BASIC) ? 'dayGridDay' : (calendarType === VIEW_TYPES.LIST) ? 'listDay' : 'timeGridDay';
+            }
+            else if (view === 'year') {
+                result = (calendarType === VIEW_TYPES.LIST) ? 'listYear' : '';
+            }
+            else {
+                result = viewKey;
+            }
+            return result;
+        }
+        /**
+         * @param operationType
+         * @param argumentKey
+         * @param argumentValue
+         * Handle various operations like Rendering Calendar, changing the calendar viewType, setting the calendarOptions according to the operationType.
+         */
+        applyCalendarOptions(operationType, argumentKey, argumentValue) {
+            switch (operationType) {
+                case 'render':
+                    this.$fullCalendar.render();
+                    break;
+                case 'option':
+                    this.$fullCalendar.setOption(argumentKey, argumentValue);
+                    break;
+                case 'changeView':
+                    const view = this.getViewType(argumentKey);
+                    this.$fullCalendar.changeView(view);
+                    break;
+            }
+        }
+        /**
+         * Adds the new eventsDataSet to the calendar object with addEvent Method and re-renders the calendar
+         */
+        renderEventDataSet() {
+            const self = this;
+            this.$fullCalendar.batchRendering(function () {
+                const events = self.$fullCalendar.getEvents();
+                lodashEs.each(events, function (event) {
+                    const eventData = self.$fullCalendar.getEventById(event.id);
+                    eventData.remove();
+                });
+                lodashEs.each(self.dataSetEvents.events, function (event) {
+                    self.$fullCalendar.addEvent(event);
+                });
+            });
+        }
+        ngOnDestroy() {
+            if (this.cancelLocaleChangeSubscription) {
+                this.cancelLocaleChangeSubscription();
+            }
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: CalendarComponent, deps: [{ token: i0__namespace.Injector }, { token: i1__namespace.AbstractI18nService }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: CalendarComponent, isStandalone: true, selector: "[wmCalendar]", providers: [
+                base.provideAsWidgetRef(CalendarComponent)
+            ], viewQueries: [{ propertyName: "_calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "_datepicker", first: true, predicate: ["datepicker"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div #calendar></div>\n", encapsulation: i0__namespace.ViewEncapsulation.None }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: CalendarComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, selector: '[wmCalendar]', providers: [
+                            base.provideAsWidgetRef(CalendarComponent)
+                        ], encapsulation: i0.ViewEncapsulation.None, template: "<div #calendar></div>\n" }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: i1__namespace.AbstractI18nService }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { _calendar: [{
+                    type: i0.ViewChild,
+                    args: ['calendar']
+                }], _datepicker: [{
+                    type: i0.ViewChild,
+                    args: ['datepicker']
+                }] } });
+
+    exports.CalendarComponent = CalendarComponent;
+
+}));