@skysoftware-co/bayan-hr-widgets-ui 2.0.18 → 2.0.20

package/src/lib/services/hr-self-widgets.service.ts

@@ -0,0 +1,624 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable, catchError, map, shareReplay, throwError } from 'rxjs';
+import {
+  Degree,
+  Dependent,
+  DependentDocumentGroup,
+  DocumentRow,
+  EntitlementsIndemnity,
+  EntitlementsMedicalInsurance,
+  EntitlementsTicket,
+  EntitlementsVacation,
+  EventOption,
+  Experience,
+  JobInformationContract,
+  JobInformationMain,
+  JobInformationSalary,
+  JobInformationServiceCharge,
+  MyBankInfo,
+  PersonalInfoAddressDetails,
+  PersonalInfoContactDetails,
+  PersonalInfoMainDetails,
+} from '../shared/types/common';
+import { BankInformationCacheService } from '../shared/services/bank-information-cache.service';
+import { EntitlementsCacheService } from '../shared/services/entitlements-cache.service';
+import { JobInformationCacheService } from '../shared/services/job-information-cache.service';
+import { PersonalInformationCacheService } from '../shared/services/personal-information-cache.service';
+import { QualificationsCacheService } from '../shared/services/qualifications-cache.service';
+import { ProfileEmployeeDependentsCach } from '../shared/services/profile-employee-dependents-cach';
+import { ProfileDocumentsCacheService } from '../shared/services/profile-documents-cache-service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HRSelfWidgetsService {
+  private readonly headers = { 'api-version': '1' };
+
+  constructor(
+    private http: HttpClient,
+    private readonly bankInformationCacheService: BankInformationCacheService,
+    private readonly entitlementsCacheService: EntitlementsCacheService,
+    private readonly jobInformationCacheService: JobInformationCacheService,
+    private readonly personalInformationCacheService: PersonalInformationCacheService,
+    private readonly qualificationsCacheService: QualificationsCacheService,
+    private readonly profileEmployeeDependentsCachService: ProfileEmployeeDependentsCach,
+    private readonly profileDocumentsCacheService: ProfileDocumentsCacheService,
+  ) {}
+
+  getMainDetails(baseUrl: string): Observable<any> {
+    return this.http.get<any>(`${baseUrl}/hr/widgets/me/main-details`, {
+      headers: this.headers,
+    });
+  }
+
+  getUpcomingEvents(baseUrl: string, eventOption: EventOption): Observable<any> {
+    const params = new HttpParams().set('EventOption', eventOption);
+    return this.http.get<any>(`${baseUrl}/hr/widgets/me/upcoming-events`, {
+      params,
+      headers: this.headers,
+    });
+  }
+
+  getCalendar(baseUrl: string, month: number, year: number, monthsCount: number): Observable<any> {
+    const params = new HttpParams().set('Month', month).set('Year', year).set('MonthsCount', monthsCount);
+
+    return this.http.get<any>(`${baseUrl}/hr/widgets/me/calendar`, {
+      params,
+      headers: this.headers,
+    });
+  }
+
+  getBankInformation(baseUrl: string, forceRefresh = false): Observable<MyBankInfo[]> {
+    if (!forceRefresh) {
+      const cachedRequest$ = this.bankInformationCacheService.get(baseUrl);
+      if (cachedRequest$) {
+        return cachedRequest$;
+      }
+    }
+
+    const request$ = this.http
+      .get<{ ResponseData: MyBankInfo[] }>(`${baseUrl}/hr/widgets/me/profile/banks`, {
+        headers: this.headers,
+      })
+      .pipe(
+        map(response => response?.ResponseData ?? []),
+        shareReplay(1),
+        catchError(error => {
+          this.bankInformationCacheService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.bankInformationCacheService.set(baseUrl, request$);
+    return request$;
+  }
+
+  getPersonalInfoMainDetails(baseUrl: string, forceRefresh = false): Observable<PersonalInfoMainDetails> {
+    if (!forceRefresh) {
+      const cachedRequest$ = this.personalInformationCacheService.getMainDetails(baseUrl);
+      if (cachedRequest$) {
+        return cachedRequest$;
+      }
+    }
+
+    const request$ = this.http
+      .get<{ ResponseData: PersonalInfoMainDetails }>(`${baseUrl}/hr/widgets/me/profile/personal-information/main`, {
+        headers: this.headers,
+      })
+      .pipe(
+        map(response => response?.ResponseData ?? (response as unknown as PersonalInfoMainDetails)),
+        shareReplay(1),
+        catchError(error => {
+          this.personalInformationCacheService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.personalInformationCacheService.setMainDetails(baseUrl, request$);
+    return request$;
+  }
+
+  getPersonalInfoContactDetails(baseUrl: string, forceRefresh = false): Observable<PersonalInfoContactDetails> {
+    if (!forceRefresh) {
+      const cachedRequest$ = this.personalInformationCacheService.getContactDetails(baseUrl);
+      if (cachedRequest$) {
+        return cachedRequest$;
+      }
+    }
+
+    const request$ = this.http
+      .get<{ ResponseData: PersonalInfoContactDetails }>(
+        `${baseUrl}/hr/widgets/me/profile/personal-information/contact`,
+        {
+          headers: this.headers,
+        },
+      )
+      .pipe(
+        map(response => response?.ResponseData ?? (response as unknown as PersonalInfoContactDetails)),
+        shareReplay(1),
+        catchError(error => {
+          this.personalInformationCacheService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.personalInformationCacheService.setContactDetails(baseUrl, request$);
+    return request$;
+  }
+
+  getPersonalInfoAddressDetails(baseUrl: string, forceRefresh = false): Observable<PersonalInfoAddressDetails> {
+    if (!forceRefresh) {
+      const cachedRequest$ = this.personalInformationCacheService.getAddressDetails(baseUrl);
+      if (cachedRequest$) {
+        return cachedRequest$;
+      }
+    }
+
+    const request$ = this.http
+      .get<{ ResponseData: PersonalInfoAddressDetails }>(
+        `${baseUrl}/hr/widgets/me/profile/personal-information/address`,
+        {
+          headers: this.headers,
+        },
+      )
+      .pipe(
+        map(response => response?.ResponseData ?? (response as unknown as PersonalInfoAddressDetails)),
+        shareReplay(1),
+        catchError(error => {
+          this.personalInformationCacheService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.personalInformationCacheService.setAddressDetails(baseUrl, request$);
+    return request$;
+  }
+
+  getPersonalInfoLanguages(baseUrl: string, forceRefresh = false): Observable<string[]> {
+    if (!forceRefresh) {
+      const cachedRequest$ = this.personalInformationCacheService.getLanguages(baseUrl);
+      if (cachedRequest$) {
+        return cachedRequest$;
+      }
+    }
+
+    const request$ = this.http
+      .get<{ ResponseData: string[] }>(`${baseUrl}/hr/widgets/me/profile/personal-information/languages`, {
+        headers: this.headers,
+      })
+      .pipe(
+        map(response => response?.ResponseData ?? (response as unknown as string[]) ?? []),
+        shareReplay(1),
+        catchError(error => {
+          this.personalInformationCacheService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.personalInformationCacheService.setLanguages(baseUrl, request$);
+    return request$;
+  }
+
+  getPersonalInfoOtherNationalities(baseUrl: string, forceRefresh = false): Observable<string[]> {
+    if (!forceRefresh) {
+      const cachedRequest$ = this.personalInformationCacheService.getOtherNationalities(baseUrl);
+      if (cachedRequest$) {
+        return cachedRequest$;
+      }
+    }
+
+    const request$ = this.http
+      .get<{ ResponseData: string[] }>(`${baseUrl}/hr/widgets/me/profile/personal-information/other-nationalities`, {
+        headers: this.headers,
+      })
+      .pipe(
+        map(response => response?.ResponseData ?? (response as unknown as string[]) ?? []),
+        shareReplay(1),
+        catchError(error => {
+          this.personalInformationCacheService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.personalInformationCacheService.setOtherNationalities(baseUrl, request$);
+    return request$;
+  }
+
+  getJobInformationMain(baseUrl: string, forceRefresh = false): Observable<JobInformationMain | null> {
+    if (!forceRefresh) {
+      const cachedRequest$ = this.jobInformationCacheService.getMainDetails(baseUrl);
+      if (cachedRequest$) {
+        return cachedRequest$;
+      }
+    }
+
+    const request$ = this.http
+      .get<{ ResponseData: JobInformationMain }>(`${baseUrl}/hr/widgets/me/profile/job-information/main`, {
+        headers: this.headers,
+      })
+      .pipe(
+        map(response => response?.ResponseData ?? null),
+        shareReplay(1),
+        catchError(error => {
+          this.jobInformationCacheService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.jobInformationCacheService.setMainDetails(baseUrl, request$);
+    return request$;
+  }
+
+  getJobInformationContract(baseUrl: string, forceRefresh = false): Observable<JobInformationContract | null> {
+    if (!forceRefresh) {
+      const cachedRequest$ = this.jobInformationCacheService.getContractDetails(baseUrl);
+      if (cachedRequest$) {
+        return cachedRequest$;
+      }
+    }
+
+    const request$ = this.http
+      .get<{ ResponseData: JobInformationContract }>(`${baseUrl}/hr/widgets/me/profile/job-information/contract`, {
+        headers: this.headers,
+      })
+      .pipe(
+        map(response => response?.ResponseData ?? null),
+        shareReplay(1),
+        catchError(error => {
+          this.jobInformationCacheService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.jobInformationCacheService.setContractDetails(baseUrl, request$);
+    return request$;
+  }
+
+  getJobInformationSalary(baseUrl: string, forceRefresh = false): Observable<JobInformationSalary | null> {
+    if (!forceRefresh) {
+      const cachedRequest$ = this.jobInformationCacheService.getSalaryDetails(baseUrl);
+      if (cachedRequest$) {
+        return cachedRequest$;
+      }
+    }
+
+    const request$ = this.http
+      .get<{ ResponseData: JobInformationSalary }>(`${baseUrl}/hr/widgets/me/profile/job-information/salary`, {
+        headers: this.headers,
+      })
+      .pipe(
+        map(response => response?.ResponseData ?? null),
+        shareReplay(1),
+        catchError(error => {
+          this.jobInformationCacheService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.jobInformationCacheService.setSalaryDetails(baseUrl, request$);
+    return request$;
+  }
+
+  getJobInformationServiceCharge(
+    baseUrl: string,
+    forceRefresh = false,
+  ): Observable<JobInformationServiceCharge | null> {
+    if (!forceRefresh) {
+      const cachedRequest$ = this.jobInformationCacheService.getServiceChargeDetails(baseUrl);
+      if (cachedRequest$) {
+        return cachedRequest$;
+      }
+    }
+
+    const request$ = this.http
+      .get<{ ResponseData: JobInformationServiceCharge }>(
+        `${baseUrl}/hr/widgets/me/profile/job-information/service-charge`,
+        {
+          headers: this.headers,
+        },
+      )
+      .pipe(
+        map(response => response?.ResponseData ?? null),
+        shareReplay(1),
+        catchError(error => {
+          this.jobInformationCacheService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.jobInformationCacheService.setServiceChargeDetails(baseUrl, request$);
+    return request$;
+  }
+
+  clearPersonalInformationCache(): void {
+    this.personalInformationCacheService.clear();
+  }
+
+  clearJobInformationCache(): void {
+    this.jobInformationCacheService.clear();
+  }
+
+  getVacationSummary(baseUrl: string): Observable<any> {
+    const params = new HttpParams().set('ShowDirectSubordinatesOnly', 'false');
+    return this.http.get<any>(`${baseUrl}/hr/widgets/me/team/next-week-vacation-insights/summary`, {
+      params,
+      headers: this.headers,
+    });
+  }
+
+  getEntitlementsVacations(baseUrl: string, forceRefresh = false): Observable<EntitlementsVacation[] | null> {
+    if (!forceRefresh) {
+      const cachedRequest$ = this.entitlementsCacheService.getVacationDetails(baseUrl);
+      if (cachedRequest$) {
+        return cachedRequest$;
+      }
+    }
+
+    const request$ = this.http
+      .get<{ ResponseData: EntitlementsVacation[] | null }>(`${baseUrl}/hr/widgets/me/profile/entitlements/vacations`, {
+        headers: this.headers,
+      })
+      .pipe(
+        map(response => response?.ResponseData ?? null),
+        shareReplay(1),
+        catchError(error => {
+          this.entitlementsCacheService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.entitlementsCacheService.setVacationDetails(baseUrl, request$);
+    return request$;
+  }
+
+  getEntitlementsIndemnity(baseUrl: string, forceRefresh = false): Observable<EntitlementsIndemnity | null> {
+    if (!forceRefresh) {
+      const cachedRequest$ = this.entitlementsCacheService.getIndemnityDetails(baseUrl);
+      if (cachedRequest$) {
+        return cachedRequest$;
+      }
+    }
+
+    const request$ = this.http
+      .get<{ ResponseData: EntitlementsIndemnity | null }>(`${baseUrl}/hr/widgets/me/profile/entitlements/indemnity`, {
+        headers: this.headers,
+      })
+      .pipe(
+        map(response => response?.ResponseData ?? null),
+        shareReplay(1),
+        catchError(error => {
+          this.entitlementsCacheService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.entitlementsCacheService.setIndemnityDetails(baseUrl, request$);
+    return request$;
+  }
+
+  getEntitlementsTicket(baseUrl: string, forceRefresh = false): Observable<EntitlementsTicket | null> {
+    if (!forceRefresh) {
+      const cachedRequest$ = this.entitlementsCacheService.getTicketDetails(baseUrl);
+      if (cachedRequest$) {
+        return cachedRequest$;
+      }
+    }
+
+    const request$ = this.http
+      .get<{ ResponseData: EntitlementsTicket | null }>(`${baseUrl}/hr/widgets/me/profile/entitlements/ticket`, {
+        headers: this.headers,
+      })
+      .pipe(
+        map(response => response?.ResponseData ?? null),
+        shareReplay(1),
+        catchError(error => {
+          this.entitlementsCacheService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.entitlementsCacheService.setTicketDetails(baseUrl, request$);
+    return request$;
+  }
+
+  getEntitlementsMedicalInsurance(
+    baseUrl: string,
+    forceRefresh = false,
+  ): Observable<EntitlementsMedicalInsurance | null> {
+    if (!forceRefresh) {
+      const cachedRequest$ = this.entitlementsCacheService.getMedicalInsuranceDetails(baseUrl);
+      if (cachedRequest$) {
+        return cachedRequest$;
+      }
+    }
+
+    const request$ = this.http
+      .get<{ ResponseData: EntitlementsMedicalInsurance | null }>(
+        `${baseUrl}/hr/widgets/me/profile/entitlements/medical-insurance`,
+        {
+          headers: this.headers,
+        },
+      )
+      .pipe(
+        map(response => response?.ResponseData ?? null),
+        shareReplay(1),
+        catchError(error => {
+          this.entitlementsCacheService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.entitlementsCacheService.setMedicalInsuranceDetails(baseUrl, request$);
+    return request$;
+  }
+
+  getEntitlementsOvertime(baseUrl: string, forceRefresh = false): Observable<any> {
+    if (!forceRefresh) {
+      const cachedRequest$ = this.entitlementsCacheService.getOvertimeDetails(baseUrl);
+      if (cachedRequest$) {
+        return cachedRequest$;
+      }
+    }
+
+    const request$ = this.http
+      .get<any>(`${baseUrl}/hr/widgets/me/profile/entitlements/overtime`, {
+        headers: this.headers,
+      })
+      .pipe(
+        shareReplay(1),
+        catchError(error => {
+          this.entitlementsCacheService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.entitlementsCacheService.setOvertimeDetails(baseUrl, request$);
+    return request$;
+  }
+
+  getEntitlementsSocialSecurity(baseUrl: string, forceRefresh = false): Observable<any> {
+    if (!forceRefresh) {
+      const cachedRequest$ = this.entitlementsCacheService.getSocialSecurityDetails(baseUrl);
+      if (cachedRequest$) {
+        return cachedRequest$;
+      }
+    }
+
+    const request$ = this.http
+      .get<any>(`${baseUrl}/hr/widgets/me/profile/entitlements/social-security`, {
+        headers: this.headers,
+      })
+      .pipe(
+        shareReplay(1),
+        catchError(error => {
+          this.entitlementsCacheService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.entitlementsCacheService.setSocialSecurityDetails(baseUrl, request$);
+    return request$;
+  }
+
+  getEmployeeDegrees(baseUrl: string, forceRefresh = false): Observable<Degree[]> {
+    if (!forceRefresh) {
+      const cachedRequest$ = this.qualificationsCacheService.getDegrees(baseUrl);
+      if (cachedRequest$) {
+        return cachedRequest$;
+      }
+    }
+
+    const request$ = this.http
+      .get<{
+        ResponseData: Degree[];
+      }>(`${baseUrl}/hr/widgets/me/profile/qualifications/degrees`, { headers: this.headers })
+      .pipe(
+        map(response => response?.ResponseData ?? []),
+        shareReplay(1),
+        catchError(error => {
+          this.qualificationsCacheService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.qualificationsCacheService.setDegrees(baseUrl, request$);
+
+    return request$;
+  }
+
+  getEmployeeDependents(baseUrl: string, forceRefresh = false): Observable<Dependent[]> {
+    if (!forceRefresh) {
+      const cachedRequest$ = this.profileEmployeeDependentsCachService.getDependents(baseUrl);
+      if (cachedRequest$) {
+        return cachedRequest$;
+      }
+    }
+
+    const request$ = this.http
+      .get<{ ResponseData: Dependent[] }>(`${baseUrl}/hr/widgets/me/profile/dependents`, { headers: this.headers })
+      .pipe(
+        map(response => response?.ResponseData ?? []),
+        shareReplay(1),
+        catchError(error => {
+          this.profileEmployeeDependentsCachService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.profileEmployeeDependentsCachService.setDependents(baseUrl, request$);
+
+    return request$;
+  }
+
+  getEmployeeExperiences(baseUrl: string, forceRefresh = false): Observable<Experience[]> {
+    if (!forceRefresh) {
+      const cached = this.qualificationsCacheService.getExperiences(baseUrl);
+      if (cached) return cached;
+    }
+
+    const request$ = this.http
+      .get<{
+        ResponseData: Experience[];
+      }>(`${baseUrl}/hr/widgets/me/profile/qualifications/experiences`, { headers: this.headers })
+      .pipe(
+        map(res => res?.ResponseData ?? []),
+        shareReplay(1),
+        catchError(error => {
+          this.qualificationsCacheService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.qualificationsCacheService.setExperiences(baseUrl, request$);
+
+    return request$;
+  }
+
+  getDependentDocuments(baseUrl: string, forceRefresh = false): Observable<DependentDocumentGroup[]> {
+    if (!forceRefresh) {
+      const cached$ = this.profileDocumentsCacheService.getDependentDocuments(baseUrl);
+      if (cached$) return cached$;
+    }
+
+    const request$ = this.http
+      .get<{
+        ResponseData: DependentDocumentGroup[];
+      }>(`${baseUrl}/hr/widgets/me/profile/documents/dependents`, { headers: this.headers })
+      .pipe(
+        map(res => res?.ResponseData ?? []),
+        shareReplay(1),
+        catchError(error => {
+          this.profileDocumentsCacheService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.profileDocumentsCacheService.setDependentDocuments(baseUrl, request$);
+
+    return request$;
+  }
+
+  getPersonalDocuments(baseUrl: string, forceRefresh = false): Observable<DocumentRow[]> {
+    if (!forceRefresh) {
+      const cached$ = this.profileDocumentsCacheService.getPersonalDocuments(baseUrl);
+      if (cached$) return cached$;
+    }
+
+    const request$ = this.http
+      .get<{
+        ResponseData: DocumentRow[];
+      }>(`${baseUrl}/hr/widgets/me/profile/documents/personal`, { headers: this.headers })
+      .pipe(
+        map(res => res?.ResponseData ?? []),
+        shareReplay(1),
+        catchError(error => {
+          this.profileDocumentsCacheService.clear();
+          return throwError(() => error);
+        }),
+      );
+
+    this.profileDocumentsCacheService.setPersonalDocuments(baseUrl, request$);
+    return request$;
+  }
+}

package/src/lib/shared/components/card-header/card-header.component.html

@@ -0,0 +1,4 @@
+<div [class]="containerClass()">
+  <fa-icon [icon]="icon()" [class]="iconClass()"></fa-icon>
+  <span [class]="titleClass()">{{ title() }}</span>
+</div>

package/src/lib/shared/components/card-header/card-header.component.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+@Component({
+  selector: 'hr-card-header',
+  standalone: true,
+  imports: [FontAwesomeModule],
+  templateUrl: './card-header.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HRCardHeaderComponent {
+  readonly icon = input.required<IconDefinition>();
+  readonly title = input.required<string>();
+  readonly containerClass = input<string>('d-flex align-items-center mb-2');
+  readonly iconClass = input<string>('fs-6 text-primary pe-2');
+  readonly titleClass = input<string>('text-center table-header-lg fw-medium');
+}

package/src/lib/shared/components/hr-employee-calendar/hr-employee-calendar.component.html

@@ -0,0 +1,47 @@
+<div [class]="legendContainerClass()">
+  <div [class]="legendRowClass()">
+    <div [class]="legendItemClass() + ' me-4'">
+      <div [class]="legendDotClass() + ' ' + publicHolidayDotClass()"></div>
+      <div [class]="legendLabelClass()">
+        <p>{{ 'PublicHoliday' | translate }}</p>
+      </div>
+    </div>
+    <div [class]="legendItemClass()">
+      <div [class]="legendDotClass() + ' ' + dayOffDotClass()"></div>
+      <div [class]="legendLabelClass()">
+        <p>{{ 'DayOff' | translate }}</p>
+      </div>
+    </div>
+    @if (showEvents()) {
+      <div [class]="legendItemClass() + ' ms-4'">
+        <div [class]="legendDotClass() + ' ' + eventsDotClass()"></div>
+        <div [class]="legendLabelClass()">
+          <p>{{ 'Events' | translate }}</p>
+        </div>
+      </div>
+    }
+  </div>
+  @if (showUpComingVacations()) {
+    <div [class]="vacationsContainerClass()">
+      <div [class]="vacationsItemClass()">
+        <fa-icon [icon]="squreCheckIcon" [class]="vacationsIconClass()"></fa-icon>
+        <div [class]="legendLabelClass()">
+          <p>{{ 'ScheduledVacations' | translate }}</p>
+        </div>
+      </div>
+    </div>
+  }
+</div>
+
+<div [class]="calendarContainerClass()">
+  <dx-calendar
+    #calendar
+    [class]="calendarClass()"
+    [selectionMode]="'multiple'"
+    [cellTemplate]="customCellTemplate"
+    [showWeekNumbers]="false"
+    [min]="minDate()"
+    [max]="maxDate()"
+    (onValueChanged)="preventInteraction($event)"
+  ></dx-calendar>
+</div>