@sunbird-cb/consumption 0.0.59 → 0.0.60

package/esm2015/lib/_common/calender/calender-day/calender-day.component.js

@@ -1,90 +1,90 @@
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-import { DatePipe } from '@angular/common';
-import { Component, Input } from '@angular/core';
-export class CalenderDayComponent {
-    /**
-     * @param {?} datePipe
-     */
-    constructor(datePipe) {
-        this.datePipe = datePipe;
-        this.webDisplayDate = "";
-        this.mobileDisplayDate = "";
-        this.currentDate = new Date();
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-        this.currentDate = this.datePipe.transform(this.currentDate, 'y-MM-dd');
-    }
-    /**
-     * @param {?} link
-     * @return {?}
-     */
-    openLink(link) {
-        window.open(link, "_blank");
-    }
-    /**
-     * @param {?} date
-     * @param {?} type
-     * @return {?}
-     */
-    formatDate(date, type) {
-        /** @type {?} */
-        let fDate = new Date(date);
-        if (type === 'web') {
-            return this.datePipe.transform(fDate, 'E, dd LLL');
-        }
-        if (type === 'mob') {
-            return this.datePipe.transform(fDate, 'E dd LLL');
-        }
-    }
-}
-CalenderDayComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sb-uic-calender-day',
-                template: "<div *ngIf=\"layoutType==='grid' && !dataLoading\">\r\n    <div class=\"p-3 event-day my-3\"\r\n        [style.backgroundColor]=\"objectData?.webBackgroundColor\"\r\n        [style.borderColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\">\r\n    \r\n        <div class=\"flex item-top gap-8 {{ day.length ? '' : 'aliginCenter'}}\">\r\n            <div class=\"event-date\">\r\n                <div class=\"currentDay\"\r\n                    [style.backgroundColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\"\r\n                    [style.color]=\"currentDate === eventDate ? objectData?.activeColor: ''\">\r\n                    {{formatDate(eventDate, 'web')}}\r\n                </div>\r\n            </div>\r\n            <div class=\"details w-full\" *ngIf=\"day.length\">\r\n                <div class=\"flex p-4 item-center events-list mb-{{day.length === (i+1) ? '0' : '2'}} gap-20\" [style.backgroundColor]=\"objectData?.eventBackgroundColor\"\r\n                    *ngFor=\"let event of day; let i = index\" >\r\n                    <div>\r\n                        <div class=\"flex flex-row item-center gap-10 pb-2\">\r\n                            <div class=\"flex item-center gap-1 row1 col1 range-width\">\r\n                                <div><mat-icon class=\"icon-web\">schedule</mat-icon> </div>\r\n                                <div>{{event.startTime}} to {{event.endTime}}</div>\r\n                            </div>\r\n                            <div class=\"flex item-center col1 \">{{event.title}}</div>\r\n                        </div>\r\n                        <div class=\"flex flex-row item-center gap-10\">\r\n                            <div class=\"flex item-center gap-1 row1 col1\" *ngIf=\"event.startDate && event.endDate && event.startDate !== event.endDate\">\r\n                                <div><mat-icon class=\"icon-web\">date_range</mat-icon> </div>\r\n                                <div class=\"upcase\">{{event.startDate}} - {{event.endDate}}</div>\r\n                            </div>\r\n                            <div class=\"flex item-center col1\">\r\n                                <div><mat-icon class=\"icon-web\">location_on</mat-icon> </div>\r\n                                <div class=\"flex item-center\">{{event.location}}</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"visit-link flex gap-2\"\r\n                        *ngIf=\"event?.registrationLink\">\r\n                        <div (click)=\"openLink(event?.registrationLink)\">Visit</div>\r\n                        <div (click)=\"openLink(event?.registrationLink)\"><mat-icon class=\"visit-icon\">open_in_new</mat-icon> </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"details w-full\" *ngIf=\"!day.length\">\r\n                No trainings.\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"layoutType==='row' && !dataLoading\">\r\n    <div class=\"pl-5 pr-5 mb-{{day?.length === (rowId+1) ? '0' : '3'}}\"\r\n        >\r\n        <div class=\"flex item-center gap-4\">\r\n            <div class=\"event-date\">\r\n                <div class=\"flex flex-col\">\r\n                    <div> {{formatDate(eventDate, 'mob').split(' ')[0]}}</div>\r\n                    <div class=\"mob-currentDay\"\r\n                        [style.backgroundColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\"\r\n                        [style.color]=\"currentDate === eventDate ? objectData?.activeColor: ''\">\r\n                        {{formatDate(eventDate, 'mob').split(' ')[1]}}\r\n                    </div>\r\n                    <div> {{formatDate(eventDate, 'mob').split(' ')[2]}}</div>\r\n                </div>\r\n            </div>\r\n            <div class=\"details w-full\" *ngIf=\"day.length\">\r\n                <div class=\"flex flex-col mob-events-list p-3 mb-{{day.length === (i+1) ? '0' : '2'}}\"\r\n                    *ngFor=\"let event of day; let i = index\" [style.backgroundColor]=\"objectData?.eventBackgroundColor\">\r\n                    <div>\r\n                        <div class=\"flex pb-2\">{{event.title}}</div>\r\n                        <div class=\"flex pb-1\">\r\n                            <div><mat-icon class=\"mob-icon\">schedule</mat-icon> </div>\r\n                            <div>{{event.startTime}} to {{event.endTime}}</div>\r\n                        </div>\r\n                        <div class=\"flex pb-1\" *ngIf=\"event.startDate && event.endDate && event.startDate !== event.endDate\">\r\n                            <div><mat-icon class=\"mob-icon\">date_range</mat-icon> </div>\r\n                            <div class=\"upcase\">{{event.startDate}} - {{event.endDate}}</div>\r\n                        </div>\r\n                        <div class=\"flex\">\r\n                            <div><mat-icon class=\"mob-icon\">location_on</mat-icon> </div>\r\n                            <div class=\"flex item-center\">{{event.location}}</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"details w-full p-3 flex no-data\" *ngIf=\"!day.length\" \r\n                [style.backgroundColor]=\"objectData?.mobileBackground\">\r\n                No trainings.\r\n            </div>\r\n        </div>        \r\n    </div>    \r\n</div>\r\n\r\n<!-- skeleton  loaders -->\r\n<div *ngIf=\"dataLoading\">\r\n    <div *ngIf=\"layoutType==='grid'\">\r\n        <div class=\"hidden md:block\">\r\n            <div class=\"p-3 event-day my-3\"\r\n                [style.backgroundColor]=\"'#FFF'\">\r\n                <div class=\"flex item-top gap-8\">\r\n                    <div class=\"event-date\">\r\n                        <div class=\"currentDay\">\r\n                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'90px'\"\r\n                                [height]=\"'32px'\"></sb-uic-skeleton-loader>    \r\n                        </div>\r\n                    </div>\r\n                    <div class=\"details w-full\">\r\n                        <div class=\"flex p-4 item-center events-list mb-2 gap-20\">\r\n                            <div>\r\n                                <div class=\"flex flex-row item-center gap-20 pb-2\">\r\n                                    <div class=\"flex item-center gap-2 row1 col1\">\r\n                                        <div>\r\n                                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'50px'\"\r\n                                            [height]=\"'32px'\"></sb-uic-skeleton-loader>\r\n                                        </div>\r\n                                        <div>\r\n                                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\r\n                                            [height]=\"'32px'\"></sb-uic-skeleton-loader>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"flex item-center col1\">\r\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\r\n                                        [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\r\n                                </div>\r\n                                <div class=\"flex flex-row item-center gap-20 pb-2\">\r\n                                    <div class=\"flex item-center gap-2 row1 col1\">\r\n                                        <div>\r\n                                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'50px'\"\r\n                                            [height]=\"'32px'\"></sb-uic-skeleton-loader>\r\n                                        </div>\r\n                                        <div>\r\n                                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\r\n                                            [height]=\"'32px'\"></sb-uic-skeleton-loader>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"flex item-center col1\">\r\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\r\n                                        [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"visit-link flex gap-2\">\r\n                                <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\r\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"layoutType==='row'\">\r\n        <div class=\"block md:hidden\">\r\n            <div class=\"p-5\" \r\n            [style.backgroundColor]=\"'#FFFFFF'\">\r\n            <div class=\"flex item-center gap-4\">\r\n                <div class=\"event-date\">\r\n                    <div class=\"flex flex-col\">\r\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\r\n                                [height]=\"'90px'\"></sb-uic-skeleton-loader> \r\n                    </div>\r\n                </div>\r\n                <div class=\"details w-full\">\r\n                    <div class=\"flex flex-col mob-events-list p-3 mb-2\">\r\n                        <div>\r\n                            <div class=\"flex pb-2\">\r\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'265px'\"\r\n                                [height]=\"'32px'\"></sb-uic-skeleton-loader> \r\n                            </div>\r\n                            <div class=\"flex pb-1 gap-2\">\r\n                                <div>\r\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\r\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\r\n                                </div>\r\n                                <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\r\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"flex pb-1 gap-2\">\r\n                                <div>\r\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\r\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\r\n                                </div>\r\n                                <div>\r\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\r\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"flex gap-2\">\r\n                                <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\r\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\r\n                                </div>\r\n                                <div class=\"flex item-center\">\r\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\r\n                                [height]=\"'32px'\"></sb-uic-skeleton-loader> \r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>    \r\n</div>",
-                styles: [".event-day{border:1px solid #c3c3c3;border-radius:15px}.event-date{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;width:10%;text-transform:uppercase}.events-list{border:1px solid #c3c3c3;border-radius:15px;justify-content:space-between;align-items:center;font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px}.row1{width:235px}.icon-web{font-size:17px;height:17px}.upcase{text-transform:uppercase}.aliginCenter,.col1{align-items:center}.range-width{min-width:234px}.visit-link{cursor:pointer;align-items:center;justify-content:center}.visit-icon{font-size:17px;height:17px;color:#1b4ca1}.currentDay{padding:5px;border-radius:20px}.mob-currentDay{padding:8px;border-radius:20px}.mob-events-list{border:1px solid #e8e6e5;border-radius:10px;justify-content:space-between;font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px}.mob-icon{font-size:17px;height:17px}.no-data{display:flex;align-items:center;border-radius:10px}"]
-            }] }
-];
-/** @nocollapse */
-CalenderDayComponent.ctorParameters = () => [
-    { type: DatePipe }
-];
-CalenderDayComponent.propDecorators = {
-    objectData: [{ type: Input }],
-    layoutType: [{ type: Input }],
-    day: [{ type: Input }],
-    dataLoading: [{ type: Input }],
-    rowId: [{ type: Input }],
-    eventDate: [{ type: Input }]
-};
-if (false) {
-    /** @type {?} */
-    CalenderDayComponent.prototype.objectData;
-    /** @type {?} */
-    CalenderDayComponent.prototype.layoutType;
-    /** @type {?} */
-    CalenderDayComponent.prototype.day;
-    /** @type {?} */
-    CalenderDayComponent.prototype.dataLoading;
-    /** @type {?} */
-    CalenderDayComponent.prototype.rowId;
-    /** @type {?} */
-    CalenderDayComponent.prototype.eventDate;
-    /** @type {?} */
-    CalenderDayComponent.prototype.webDisplayDate;
-    /** @type {?} */
-    CalenderDayComponent.prototype.mobileDisplayDate;
-    /** @type {?} */
-    CalenderDayComponent.prototype.currentDate;
-    /**
-     * @type {?}
-     * @private
-     */
-    CalenderDayComponent.prototype.datePipe;
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FsZW5kZXItZGF5LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BzdW5iaXJkLWNiL2NvbnN1bXB0aW9uLyIsInNvdXJjZXMiOlsibGliL19jb21tb24vY2FsZW5kZXIvY2FsZW5kZXItZGF5L2NhbGVuZGVyLWRheS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMzQyxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQU96RCxNQUFNLE9BQU8sb0JBQW9COzs7O0lBWS9CLFlBQW9CLFFBQWtCO1FBQWxCLGFBQVEsR0FBUixRQUFRLENBQVU7UUFKdEMsbUJBQWMsR0FBVyxFQUFFLENBQUE7UUFDM0Isc0JBQWlCLEdBQVcsRUFBRSxDQUFBO1FBQzlCLGdCQUFXLEdBQVEsSUFBSSxJQUFJLEVBQUUsQ0FBQTtJQUVhLENBQUM7Ozs7SUFFM0MsUUFBUTtRQUNOLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxTQUFTLENBQUMsQ0FBQTtJQUN6RSxDQUFDOzs7OztJQUVELFFBQVEsQ0FBQyxJQUFZO1FBQ25CLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLFFBQVEsQ0FBQyxDQUFBO0lBQzdCLENBQUM7Ozs7OztJQUVELFVBQVUsQ0FBQyxJQUFTLEVBQUUsSUFBWTs7WUFDNUIsS0FBSyxHQUFHLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQztRQUMxQixJQUFJLElBQUksS0FBSyxLQUFLLEVBQUU7WUFDbEIsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVMsQ0FBQyxLQUFLLEVBQUUsV0FBVyxDQUFDLENBQUE7U0FDbkQ7UUFDRCxJQUFJLElBQUksS0FBSyxLQUFLLEVBQUU7WUFDbEIsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVMsQ0FBQyxLQUFLLEVBQUUsVUFBVSxDQUFDLENBQUE7U0FDbEQ7SUFDSCxDQUFDOzs7WUFuQ0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxxQkFBcUI7Z0JBQy9CLDR4WUFBNEM7O2FBRTdDOzs7O1lBUFEsUUFBUTs7O3lCQVVkLEtBQUs7eUJBQ0wsS0FBSztrQkFDTCxLQUFLOzBCQUNMLEtBQUs7b0JBQ0wsS0FBSzt3QkFDTCxLQUFLOzs7O0lBTE4sMENBQXdCOztJQUN4QiwwQ0FBd0I7O0lBQ3hCLG1DQUFpQjs7SUFDakIsMkNBQTZCOztJQUM3QixxQ0FBbUI7O0lBQ25CLHlDQUF1Qjs7SUFDdkIsOENBQTJCOztJQUMzQixpREFBOEI7O0lBQzlCLDJDQUE2Qjs7Ozs7SUFFakIsd0NBQTBCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGF0ZVBpcGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnc2ItdWljLWNhbGVuZGVyLWRheScsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2NhbGVuZGVyLWRheS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vY2FsZW5kZXItZGF5LmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIENhbGVuZGVyRGF5Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcbiAgQElucHV0KCkgb2JqZWN0RGF0YTogYW55XHJcbiAgQElucHV0KCkgbGF5b3V0VHlwZTogYW55XHJcbiAgQElucHV0KCkgZGF5OiBhbnlcclxuICBASW5wdXQoKSBkYXRhTG9hZGluZzogYm9vbGVhblxyXG4gIEBJbnB1dCgpIHJvd0lkOiBhbnlcclxuICBASW5wdXQoKSBldmVudERhdGU6IGFueVxyXG4gIHdlYkRpc3BsYXlEYXRlOiBzdHJpbmcgPSBcIlwiXHJcbiAgbW9iaWxlRGlzcGxheURhdGU6IHN0cmluZyA9IFwiXCJcclxuICBjdXJyZW50RGF0ZTogYW55ID0gbmV3IERhdGUoKVxyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGRhdGVQaXBlOiBEYXRlUGlwZSkgeyB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgdGhpcy5jdXJyZW50RGF0ZSA9IHRoaXMuZGF0ZVBpcGUudHJhbnNmb3JtKHRoaXMuY3VycmVudERhdGUsICd5LU1NLWRkJylcclxuICB9XHJcblxyXG4gIG9wZW5MaW5rKGxpbms6IHN0cmluZykge1xyXG4gICAgd2luZG93Lm9wZW4obGluaywgXCJfYmxhbmtcIilcclxuICB9XHJcblxyXG4gIGZvcm1hdERhdGUoZGF0ZTogYW55LCB0eXBlOiBzdHJpbmcpIHtcclxuICAgIGxldCBmRGF0ZSA9IG5ldyBEYXRlKGRhdGUpXHJcbiAgICBpZiAodHlwZSA9PT0gJ3dlYicpIHtcclxuICAgICAgcmV0dXJuIHRoaXMuZGF0ZVBpcGUudHJhbnNmb3JtKGZEYXRlLCAnRSwgZGQgTExMJylcclxuICAgIH1cclxuICAgIGlmICh0eXBlID09PSAnbW9iJykge1xyXG4gICAgICByZXR1cm4gdGhpcy5kYXRlUGlwZS50cmFuc2Zvcm0oZkRhdGUsICdFIGRkIExMTCcpXHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiJdfQ==
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+import { DatePipe } from '@angular/common';
+import { Component, Input } from '@angular/core';
+export class CalenderDayComponent {
+    /**
+     * @param {?} datePipe
+     */
+    constructor(datePipe) {
+        this.datePipe = datePipe;
+        this.webDisplayDate = "";
+        this.mobileDisplayDate = "";
+        this.currentDate = new Date();
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        this.currentDate = this.datePipe.transform(this.currentDate, 'y-MM-dd');
+    }
+    /**
+     * @param {?} link
+     * @return {?}
+     */
+    openLink(link) {
+        window.open(link, "_blank");
+    }
+    /**
+     * @param {?} date
+     * @param {?} type
+     * @return {?}
+     */
+    formatDate(date, type) {
+        /** @type {?} */
+        let fDate = new Date(date);
+        if (type === 'web') {
+            return this.datePipe.transform(fDate, 'E, dd LLL');
+        }
+        if (type === 'mob') {
+            return this.datePipe.transform(fDate, 'E dd LLL');
+        }
+    }
+}
+CalenderDayComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sb-uic-calender-day',
+                template: "<div *ngIf=\"layoutType==='grid' && !dataLoading\">\n    <div class=\"p-3 event-day my-3\"\n        [style.backgroundColor]=\"objectData?.webBackgroundColor\"\n        [style.borderColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\">\n    \n        <div class=\"flex item-top gap-8 {{ day.length ? '' : 'aliginCenter'}}\">\n            <div class=\"event-date\">\n                <div class=\"currentDay\"\n                    [style.backgroundColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\"\n                    [style.color]=\"currentDate === eventDate ? objectData?.activeColor: ''\">\n                    {{formatDate(eventDate, 'web')}}\n                </div>\n            </div>\n            <div class=\"details w-full\" *ngIf=\"day.length\">\n                <div class=\"flex p-4 item-center events-list mb-{{day.length === (i+1) ? '0' : '2'}} gap-20\" [style.backgroundColor]=\"objectData?.eventBackgroundColor\"\n                    *ngFor=\"let event of day; let i = index\" >\n                    <div>\n                        <div class=\"flex flex-row item-center gap-10 pb-2\">\n                            <div class=\"flex item-center gap-1 row1 col1 range-width\">\n                                <div><mat-icon class=\"icon-web\">schedule</mat-icon> </div>\n                                <div>{{event.startTime}} to {{event.endTime}}</div>\n                            </div>\n                            <div class=\"flex item-center col1 \">{{event.title}}</div>\n                        </div>\n                        <div class=\"flex flex-row item-center gap-10\">\n                            <div class=\"flex item-center gap-1 row1 col1\" *ngIf=\"event.startDate && event.endDate && event.startDate !== event.endDate\">\n                                <div><mat-icon class=\"icon-web\">date_range</mat-icon> </div>\n                                <div class=\"upcase\">{{event.startDate}} - {{event.endDate}}</div>\n                            </div>\n                            <div class=\"flex item-center col1\">\n                                <div><mat-icon class=\"icon-web\">location_on</mat-icon> </div>\n                                <div class=\"flex item-center\">{{event.location}}</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"visit-link flex gap-2\"\n                        *ngIf=\"event?.registrationLink\">\n                        <div (click)=\"openLink(event?.registrationLink)\">Visit</div>\n                        <div (click)=\"openLink(event?.registrationLink)\"><mat-icon class=\"visit-icon\">open_in_new</mat-icon> </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"details w-full\" *ngIf=\"!day.length\">\n                No trainings.\n            </div>\n        </div>\n    </div>\n</div>\n\n<div *ngIf=\"layoutType==='row' && !dataLoading\">\n    <div class=\"pl-5 pr-5 mb-{{day?.length === (rowId+1) ? '0' : '3'}}\"\n        >\n        <div class=\"flex item-center gap-4\">\n            <div class=\"event-date\">\n                <div class=\"flex flex-col\">\n                    <div> {{formatDate(eventDate, 'mob').split(' ')[0]}}</div>\n                    <div class=\"mob-currentDay\"\n                        [style.backgroundColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\"\n                        [style.color]=\"currentDate === eventDate ? objectData?.activeColor: ''\">\n                        {{formatDate(eventDate, 'mob').split(' ')[1]}}\n                    </div>\n                    <div> {{formatDate(eventDate, 'mob').split(' ')[2]}}</div>\n                </div>\n            </div>\n            <div class=\"details w-full\" *ngIf=\"day.length\">\n                <div class=\"flex flex-col mob-events-list p-3 mb-{{day.length === (i+1) ? '0' : '2'}}\"\n                    *ngFor=\"let event of day; let i = index\" [style.backgroundColor]=\"objectData?.eventBackgroundColor\">\n                    <div>\n                        <div class=\"flex pb-2\">{{event.title}}</div>\n                        <div class=\"flex pb-1\">\n                            <div><mat-icon class=\"mob-icon\">schedule</mat-icon> </div>\n                            <div>{{event.startTime}} to {{event.endTime}}</div>\n                        </div>\n                        <div class=\"flex pb-1\" *ngIf=\"event.startDate && event.endDate && event.startDate !== event.endDate\">\n                            <div><mat-icon class=\"mob-icon\">date_range</mat-icon> </div>\n                            <div class=\"upcase\">{{event.startDate}} - {{event.endDate}}</div>\n                        </div>\n                        <div class=\"flex\">\n                            <div><mat-icon class=\"mob-icon\">location_on</mat-icon> </div>\n                            <div class=\"flex item-center\">{{event.location}}</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"details w-full p-3 flex no-data\" *ngIf=\"!day.length\" \n                [style.backgroundColor]=\"objectData?.mobileBackground\">\n                No trainings.\n            </div>\n        </div>        \n    </div>    \n</div>\n\n<!-- skeleton  loaders -->\n<div *ngIf=\"dataLoading\">\n    <div *ngIf=\"layoutType==='grid'\">\n        <div class=\"hidden md:block\">\n            <div class=\"p-3 event-day my-3\"\n                [style.backgroundColor]=\"'#FFF'\">\n                <div class=\"flex item-top gap-8\">\n                    <div class=\"event-date\">\n                        <div class=\"currentDay\">\n                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'90px'\"\n                                [height]=\"'32px'\"></sb-uic-skeleton-loader>    \n                        </div>\n                    </div>\n                    <div class=\"details w-full\">\n                        <div class=\"flex p-4 item-center events-list mb-2 gap-20\">\n                            <div>\n                                <div class=\"flex flex-row item-center gap-20 pb-2\">\n                                    <div class=\"flex item-center gap-2 row1 col1\">\n                                        <div>\n                                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'50px'\"\n                                            [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                        </div>\n                                        <div>\n                                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n                                            [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                        </div>\n                                    </div>\n                                    <div class=\"flex item-center col1\">\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n                                        [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\n                                </div>\n                                <div class=\"flex flex-row item-center gap-20 pb-2\">\n                                    <div class=\"flex item-center gap-2 row1 col1\">\n                                        <div>\n                                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'50px'\"\n                                            [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                        </div>\n                                        <div>\n                                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n                                            [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                        </div>\n                                    </div>\n                                    <div class=\"flex item-center col1\">\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n                                        [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\n                                </div>\n                            </div>\n                            <div class=\"visit-link flex gap-2\">\n                                <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"layoutType==='row'\">\n        <div class=\"block md:hidden\">\n            <div class=\"p-5\" \n            [style.backgroundColor]=\"'#FFFFFF'\">\n            <div class=\"flex item-center gap-4\">\n                <div class=\"event-date\">\n                    <div class=\"flex flex-col\">\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n                                [height]=\"'90px'\"></sb-uic-skeleton-loader> \n                    </div>\n                </div>\n                <div class=\"details w-full\">\n                    <div class=\"flex flex-col mob-events-list p-3 mb-2\">\n                        <div>\n                            <div class=\"flex pb-2\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'265px'\"\n                                [height]=\"'32px'\"></sb-uic-skeleton-loader> \n                            </div>\n                            <div class=\"flex pb-1 gap-2\">\n                                <div>\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                </div>\n                                <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                </div>\n                            </div>\n                            <div class=\"flex pb-1 gap-2\">\n                                <div>\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                </div>\n                                <div>\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                </div>\n                            </div>\n                            <div class=\"flex gap-2\">\n                                <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                </div>\n                                <div class=\"flex item-center\">\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\n                                [height]=\"'32px'\"></sb-uic-skeleton-loader> \n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>    \n</div>",
+                styles: [".event-day{border:1px solid #c3c3c3;border-radius:15px}.event-date{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;width:10%;text-transform:uppercase}.events-list{border:1px solid #c3c3c3;border-radius:15px;justify-content:space-between;align-items:center;font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px}.row1{width:235px}.icon-web{font-size:17px;height:17px}.upcase{text-transform:uppercase}.aliginCenter,.col1{align-items:center}.range-width{min-width:234px}.visit-link{cursor:pointer;align-items:center;justify-content:center}.visit-icon{font-size:17px;height:17px;color:#1b4ca1}.currentDay{padding:5px;border-radius:20px}.mob-currentDay{padding:8px;border-radius:20px}.mob-events-list{border:1px solid #e8e6e5;border-radius:10px;justify-content:space-between;font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px}.mob-icon{font-size:17px;height:17px}.no-data{display:flex;align-items:center;border-radius:10px}"]
+            }] }
+];
+/** @nocollapse */
+CalenderDayComponent.ctorParameters = () => [
+    { type: DatePipe }
+];
+CalenderDayComponent.propDecorators = {
+    objectData: [{ type: Input }],
+    layoutType: [{ type: Input }],
+    day: [{ type: Input }],
+    dataLoading: [{ type: Input }],
+    rowId: [{ type: Input }],
+    eventDate: [{ type: Input }]
+};
+if (false) {
+    /** @type {?} */
+    CalenderDayComponent.prototype.objectData;
+    /** @type {?} */
+    CalenderDayComponent.prototype.layoutType;
+    /** @type {?} */
+    CalenderDayComponent.prototype.day;
+    /** @type {?} */
+    CalenderDayComponent.prototype.dataLoading;
+    /** @type {?} */
+    CalenderDayComponent.prototype.rowId;
+    /** @type {?} */
+    CalenderDayComponent.prototype.eventDate;
+    /** @type {?} */
+    CalenderDayComponent.prototype.webDisplayDate;
+    /** @type {?} */
+    CalenderDayComponent.prototype.mobileDisplayDate;
+    /** @type {?} */
+    CalenderDayComponent.prototype.currentDate;
+    /**
+     * @type {?}
+     * @private
+     */
+    CalenderDayComponent.prototype.datePipe;
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FsZW5kZXItZGF5LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BzdW5iaXJkLWNiL2NvbnN1bXB0aW9uLyIsInNvdXJjZXMiOlsibGliL19jb21tb24vY2FsZW5kZXIvY2FsZW5kZXItZGF5L2NhbGVuZGVyLWRheS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMzQyxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQU96RCxNQUFNLE9BQU8sb0JBQW9COzs7O0lBWS9CLFlBQW9CLFFBQWtCO1FBQWxCLGFBQVEsR0FBUixRQUFRLENBQVU7UUFKdEMsbUJBQWMsR0FBVyxFQUFFLENBQUE7UUFDM0Isc0JBQWlCLEdBQVcsRUFBRSxDQUFBO1FBQzlCLGdCQUFXLEdBQVEsSUFBSSxJQUFJLEVBQUUsQ0FBQTtJQUVhLENBQUM7Ozs7SUFFM0MsUUFBUTtRQUNOLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxTQUFTLENBQUMsQ0FBQTtJQUN6RSxDQUFDOzs7OztJQUVELFFBQVEsQ0FBQyxJQUFZO1FBQ25CLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLFFBQVEsQ0FBQyxDQUFBO0lBQzdCLENBQUM7Ozs7OztJQUVELFVBQVUsQ0FBQyxJQUFTLEVBQUUsSUFBWTs7WUFDNUIsS0FBSyxHQUFHLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQztRQUMxQixJQUFJLElBQUksS0FBSyxLQUFLLEVBQUU7WUFDbEIsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVMsQ0FBQyxLQUFLLEVBQUUsV0FBVyxDQUFDLENBQUE7U0FDbkQ7UUFDRCxJQUFJLElBQUksS0FBSyxLQUFLLEVBQUU7WUFDbEIsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVMsQ0FBQyxLQUFLLEVBQUUsVUFBVSxDQUFDLENBQUE7U0FDbEQ7SUFDSCxDQUFDOzs7WUFuQ0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxxQkFBcUI7Z0JBQy9CLDA0WEFBNEM7O2FBRTdDOzs7O1lBUFEsUUFBUTs7O3lCQVVkLEtBQUs7eUJBQ0wsS0FBSztrQkFDTCxLQUFLOzBCQUNMLEtBQUs7b0JBQ0wsS0FBSzt3QkFDTCxLQUFLOzs7O0lBTE4sMENBQXdCOztJQUN4QiwwQ0FBd0I7O0lBQ3hCLG1DQUFpQjs7SUFDakIsMkNBQTZCOztJQUM3QixxQ0FBbUI7O0lBQ25CLHlDQUF1Qjs7SUFDdkIsOENBQTJCOztJQUMzQixpREFBOEI7O0lBQzlCLDJDQUE2Qjs7Ozs7SUFFakIsd0NBQTBCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGF0ZVBpcGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NiLXVpYy1jYWxlbmRlci1kYXknLFxuICB0ZW1wbGF0ZVVybDogJy4vY2FsZW5kZXItZGF5LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vY2FsZW5kZXItZGF5LmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgQ2FsZW5kZXJEYXlDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gIEBJbnB1dCgpIG9iamVjdERhdGE6IGFueVxuICBASW5wdXQoKSBsYXlvdXRUeXBlOiBhbnlcbiAgQElucHV0KCkgZGF5OiBhbnlcbiAgQElucHV0KCkgZGF0YUxvYWRpbmc6IGJvb2xlYW5cbiAgQElucHV0KCkgcm93SWQ6IGFueVxuICBASW5wdXQoKSBldmVudERhdGU6IGFueVxuICB3ZWJEaXNwbGF5RGF0ZTogc3RyaW5nID0gXCJcIlxuICBtb2JpbGVEaXNwbGF5RGF0ZTogc3RyaW5nID0gXCJcIlxuICBjdXJyZW50RGF0ZTogYW55ID0gbmV3IERhdGUoKVxuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZGF0ZVBpcGU6IERhdGVQaXBlKSB7IH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmN1cnJlbnREYXRlID0gdGhpcy5kYXRlUGlwZS50cmFuc2Zvcm0odGhpcy5jdXJyZW50RGF0ZSwgJ3ktTU0tZGQnKVxuICB9XG5cbiAgb3BlbkxpbmsobGluazogc3RyaW5nKSB7XG4gICAgd2luZG93Lm9wZW4obGluaywgXCJfYmxhbmtcIilcbiAgfVxuXG4gIGZvcm1hdERhdGUoZGF0ZTogYW55LCB0eXBlOiBzdHJpbmcpIHtcbiAgICBsZXQgZkRhdGUgPSBuZXcgRGF0ZShkYXRlKVxuICAgIGlmICh0eXBlID09PSAnd2ViJykge1xuICAgICAgcmV0dXJuIHRoaXMuZGF0ZVBpcGUudHJhbnNmb3JtKGZEYXRlLCAnRSwgZGQgTExMJylcbiAgICB9XG4gICAgaWYgKHR5cGUgPT09ICdtb2InKSB7XG4gICAgICByZXR1cm4gdGhpcy5kYXRlUGlwZS50cmFuc2Zvcm0oZkRhdGUsICdFIGRkIExMTCcpXG4gICAgfVxuICB9XG59XG4iXX0=