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

package/src/lib/my-team-subordinates-popup-widget/components/my-team-subordinates-popup/my-team-popup.component.ts

@@ -1,297 +0,0 @@
-import { NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, inject, input, output, signal, ViewChild } from '@angular/core';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import {
-  DxScrollViewComponent,
-  DxTextBoxModule,
-  DxPopupModule,
-  DxScrollViewModule,
-  DxLoadIndicatorModule,
-} from 'devextreme-angular';
-import { firstValueFrom } from 'rxjs';
-import { HighlightPipe } from '@skysoftware-co/sky-components-ui';
-import { SubordinateDTO, EmployeeMainInfo } from '../../../shared/types/common';
-import { EmployeeMainInfoCardComponent } from '../employee-main-info-card/employee-information-card.component';
-import { HRTranslatePipe } from '../../../shared/pipes/translate.pipe';
-import { faEnvelope, faPhone } from '@fortawesome/pro-solid-svg-icons';
-import { MyTeamWidgetsService } from '../../../shared/services/my-team-popup.service';
-
-export const myTeamSubordinatesVisible = signal(false);
-
-export function openMyTeamSubordinatesPopup(): void {
-  myTeamSubordinatesVisible.set(true);
-}
-
-@Component({
-  selector: 'hr-my-team-popup',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    FontAwesomeModule,
-    DxPopupModule,
-    DxTextBoxModule,
-    DxScrollViewModule,
-    DxLoadIndicatorModule,
-    EmployeeMainInfoCardComponent,
-    NgTemplateOutlet,
-    HighlightPipe,
-    HRTranslatePipe,
-  ],
-  templateUrl: './my-team-popup.component.html',
-})
-export class MyTeamPopupComponent {
-  private readonly myTeamWidgetsService = inject(MyTeamWidgetsService);
-  @ViewChild('dataScrollView') dataScrollView?: DxScrollViewComponent;
-
-  readonly baseUrl = input.required<string>();
-
-  readonly isLoadingChanged = output<boolean>();
-  readonly errorOccurred = output<string>();
-  readonly showGrade = input<boolean>(false);
-  readonly showPropertySymbol = input<boolean>(true);
-
-  readonly isPopupVisible = myTeamSubordinatesVisible;
-  readonly showAllSubordinates = signal(false);
-  readonly searchValue = signal('');
-  readonly items = signal<{ adminUnitName: string; employees: SubordinateDTO[] }[]>([]);
-  readonly isDataLoading = signal(false);
-  readonly hasMoreData = signal(true);
-
-  readonly phoneIcon = input(faPhone);
-  readonly emailIcon = input(faEnvelope);
-  readonly headerRowClass = input('d-flex justify-content-between align-items-center mb-2 pe-2');
-  readonly switchContainerClass = input('form-check form-switch d-flex align-items-center custom-switch-dark ps-0');
-  readonly switchInputClass = input('form-check-input text-dark ms-0');
-  readonly switchLabelClass = input('form-check-label mx-2 fs-13');
-  readonly scrollViewClass = input('position-relative');
-  readonly emptyStateClass = input(
-    'position-absolute top-50 start-50 translate-middle w-100 text-center text-dark-gray fs-14',
-  );
-  readonly groupHeaderClass = input('fs-13 text-dark pt-2 pb-1');
-  readonly employeeCardClass = input(
-    'bg-light-gray rounded p-2 mb-2 d-flex align-items-center justify-content-between border-start border-4 border-start-primary',
-  );
-  readonly employeeCardHeight = input<string>('100px');
-  readonly contactContainerClass = input('d-flex flex-column gap-1 border-start border-2 ps-3 w-100');
-  readonly contactTitleClass = input('fs-10 fw-medium mb-1 text-dark');
-  readonly contactRowClass = input('d-flex align-items-center gap-2 fs-12 fw-normal lh-21 text-dark');
-  readonly contactIconClass = input('fs-10 text-light-gray d-inline-flex align-items-center lh-1');
-  readonly emailTextClass = input(
-    'd-inline-block w-100 text-truncate lh-1 link-dark hover-primary text-decoration-none link-underline link-underline-opacity-0 link-underline-opacity-100-hover',
-  );
-  readonly emailPlaceholderClass = input('d-inline-block w-100 lh-1');
-  readonly groupedListClass = input('d-flex flex-column gap-2 pb-2');
-  readonly loadingContainerClass = input('d-flex justify-content-center py-2');
-  readonly loadingIndicatorClass = input('w-30 h-30');
-  readonly employeeRowClass = input('row g-0 w-100 align-items-center flex-nowrap');
-  readonly employeeInfoColumnClass = input('col-8 overflow-hidden pe-2');
-  readonly contactColumnClass = input('col-4 d-flex justify-content-end');
-
-  readonly pageSize = input(100);
-
-  private pageIndex = 0;
-  private totalCount = 0;
-  private loadedCount = 0;
-
-  toEmployeeMainInfo(emp: SubordinateDTO): EmployeeMainInfo {
-    return {
-      EmployeeNumber: emp.EmployeeNumber,
-      EmployeeName: emp.EmployeeName,
-      PhotoKey: emp.PhotoPath,
-      PositionName: emp.PositionName,
-      AdminUnitName: emp.AdminUnitName ?? '-',
-      GradeName: emp.GradeName ?? null,
-      PropertyName: emp.PropertyName ?? '-',
-      PropertySymbol: emp.PropertySymbol ?? '-',
-      EmployeeNameInitials: emp.EmployeeNameInitials,
-    };
-  }
-
-  closePopup(): void {
-    myTeamSubordinatesVisible.set(false);
-    this.showAllSubordinates.set(false);
-    this.searchValue.set('');
-    this.resetState();
-  }
-
-  private normalizeContactValue(value: string | null | undefined): string {
-    const normalizedValue = value?.trim() ?? '';
-    return normalizedValue && normalizedValue !== '-' ? normalizedValue : '';
-  }
-
-  private getEmployeeEmail(employee: SubordinateDTO): string {
-    return this.normalizeContactValue(employee.BusinessEmail) || this.normalizeContactValue(employee.PersonalEmail);
-  }
-
-  private getEmployeePhone(employee: SubordinateDTO): string {
-    return this.normalizeContactValue(employee.MobileNumber);
-  }
-
-  getEmployeeEmailDisplay(employee: SubordinateDTO): string {
-    return this.getEmployeeEmail(employee) || '-';
-  }
-
-  getEmployeePhoneDisplay(employee: SubordinateDTO): string {
-    return this.getEmployeePhone(employee) || '-';
-  }
-
-  hasEmployeeEmail(employee: SubordinateDTO): boolean {
-    return !!this.getEmployeeEmail(employee);
-  }
-
-  hasEmployeePhone(employee: SubordinateDTO): boolean {
-    return !!this.getEmployeePhone(employee);
-  }
-
-  hasAnyContactInfo(employee: SubordinateDTO): boolean {
-    return this.hasEmployeeEmail(employee) || this.hasEmployeePhone(employee);
-  }
-
-  onSearchChanged(value: string): void {
-    const nextSearchValue = (value ?? '').trim();
-    if (nextSearchValue === this.searchValue()) {
-      return;
-    }
-    this.searchValue.set(nextSearchValue);
-    this.loadPage(true);
-  }
-
-  onToggleChange(event: Event): void {
-    const checked = (event.target as HTMLInputElement).checked;
-    this.showAllSubordinates.set(checked);
-    this.searchValue.set('');
-    this.loadPage(true);
-  }
-
-  onReachBottom(event: any): void {
-    if (!this.hasMoreData()) {
-      event?.component?.release?.();
-      return;
-    }
-
-    this.loadPage(false).finally(() => {
-      event?.component?.release?.();
-    });
-  }
-
-  private isScrollContentScrollable(): boolean {
-    const scrollableElement = this.dataScrollView?.instance?.element?.() as HTMLElement | undefined;
-    const scrollableContainer = scrollableElement?.querySelector?.('.dx-scrollable-container') as
-      | HTMLElement
-      | undefined;
-    const scrollableContent = scrollableElement?.querySelector?.('.dx-scrollable-content') as HTMLElement | undefined;
-
-    if (!scrollableContainer || !scrollableContent) {
-      return true;
-    }
-
-    return scrollableContent.scrollHeight > scrollableContainer.clientHeight;
-  }
-
-  private async loadRemainingPagesIfNeeded(): Promise<void> {
-    while (this.hasMoreData() && !this.isScrollContentScrollable()) {
-      await this.loadPage(false);
-    }
-  }
-
-  private resetState(): void {
-    this.items.set([]);
-    this.hasMoreData.set(true);
-    this.pageIndex = 0;
-    this.totalCount = 0;
-    this.loadedCount = 0;
-  }
-
-  private resetScrollPosition(): void {
-    this.dataScrollView?.instance?.scrollTo({ top: 0, left: 0 });
-  }
-
-  private appendEmployees(pageData: SubordinateDTO[]): void {
-    if (!this.showAllSubordinates()) {
-      const existingEmployees = this.items().length > 0 ? this.items()[0].employees : [];
-      const employees = [...existingEmployees, ...pageData];
-
-      if (employees.length === 0) {
-        this.items.set([]);
-        return;
-      }
-
-      this.items.set([
-        {
-          adminUnitName: '',
-          employees,
-        },
-      ]);
-
-      return;
-    }
-
-    const groupedMap = new Map(this.items().map(group => [group.adminUnitName, [...group.employees]]));
-
-    for (const employee of pageData) {
-      const key = employee.AdminUnitName!;
-      const employees = groupedMap.get(key) ?? [];
-      employees.push(employee);
-      groupedMap.set(key, employees);
-    }
-
-    const groups = Array.from(groupedMap.entries()).map(([adminUnitName, employees]) => ({
-      adminUnitName,
-      employees,
-    }));
-
-    this.items.set(groups);
-  }
-
-  async loadPage(reset: boolean): Promise<void> {
-    if (this.isDataLoading() || (!reset && !this.hasMoreData())) {
-      return;
-    }
-
-    if (reset) {
-      this.resetState();
-    }
-
-    this.isDataLoading.set(true);
-    if (reset) {
-      this.isLoadingChanged.emit(true);
-    }
-
-    try {
-      const response = await firstValueFrom(
-        this.myTeamWidgetsService.getSubordinates(this.baseUrl(), {
-          showDirectSubordinatesOnly: !this.showAllSubordinates(),
-          pageIndex: this.pageIndex,
-          pageSize: this.pageSize(),
-          searchValue: this.searchValue(),
-        }),
-      );
-
-      this.totalCount = response.ResponseData.Pagination.TotalCount;
-      const pageData = response.ResponseData.Data;
-
-      if (reset) {
-        this.resetScrollPosition();
-      }
-
-      this.appendEmployees(pageData);
-      this.loadedCount += pageData.length;
-      this.pageIndex += 1;
-      this.dataScrollView?.instance?.update();
-
-      const hasMore = this.loadedCount < this.totalCount && pageData.length > 0;
-      this.hasMoreData.set(hasMore);
-    } catch (err: any) {
-      this.errorOccurred.emit(err?.error?.ResponseData?.Errors?.[0]?.Message);
-    } finally {
-      this.isDataLoading.set(false);
-      if (reset) {
-        this.isLoadingChanged.emit(false);
-      }
-
-      if (!reset) {
-        await this.loadRemainingPagesIfNeeded();
-      }
-    }
-  }
-}

package/src/lib/my-upcoming-events-widget/components/event-item/event-item.component.html

@@ -1,53 +0,0 @@
-@if (events().length > 0) {
-  <div>
-    @for (event of events(); track event) {
-      <div [class]="'d-flex lh-base ' + (showDates() ? 'my-3' : 'my-1')">
-        <fa-icon
-          [icon]="isBirthday(event) ? cakeCandles : treePalm"
-          [class]="eventIconClass()"
-          [title]="isBirthday(event) ? ('Birthday' | translate) : ('PublicHoliday' | translate)"
-        ></fa-icon>
-
-        <div>
-          @if (isBirthday(event)) {
-            @if (hasPropertyBadge(event)) {
-              <span [class]="propertyBadgeClass()" [title]="event.PropertyName!">{{ event.PropertySymbol }}</span>
-            }
-            @if (isArabic()) {
-              <span>{{ 'Birthday' | translate }}</span>
-              <span [class]="eventNameBoldClass()">{{ ' ' + event.Name + ' ' }}</span>
-              @if (event.IsIn2Days) {
-                <span>{{ 'During' | translate }}</span>
-              }
-            } @else {
-              <span [class]="eventNameBoldClass()">{{ event.Name }}'s</span>
-              <span>
-                {{ ('Birthday' | translate) + ' ' + ((event.IsIn2Days ? ('isIn' | translate) : ('is' | translate)) | lowercase) }}
-              </span>
-            }
-          } @else {
-            @if (isArabic()) {
-              <span [class]="eventNameBoldClass()">{{ event.Name }}</span>
-              <span>{{ ('In' | translate) + ' ' }}</span>
-            } @else {
-              <span [class]="eventNameBoldClass()">{{ event.Name }}</span>
-              <span>{{ ' ' + ('is' | translate | lowercase) }}</span>
-            }
-          }
-
-          <span [class]="eventDescriptionClass()">{{ event.Description | translate }}</span>
-
-          @if (!isBirthday(event) && showDates() && event.StartDate && event.EndDate) {
-            <span>{{ ' (' + (event.StartDate | date: dateFormat()) + ' - ' + (event.EndDate | date: dateFormat()) + ')' }}</span>
-          }
-        </div>
-      </div>
-    }
-  </div>
-} @else {
-  @if (weekendWarningDescription()) {
-    <div [class]="warningTextClass() + (showDates() ? ' pt-5 my-5' : '')">{{ (weekendWarningDescription() ?? undefined) | translate }}</div>
-  } @else {
-    <div [class]="noEventsTextClass() + (showDates() ? ' pt-5 my-5' : '')">{{ 'NoEvents' | translate }}</div>
-  }
-}

package/src/lib/my-upcoming-events-widget/components/event-item/event-item.component.ts

@@ -1,42 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { faCakeCandles, faTreePalm } from '@fortawesome/pro-light-svg-icons';
-import { DatePipe, LowerCasePipe } from '@angular/common';
-import { EventTypeEnum, FilteredUpcomingEvent } from '../../../shared/types/common';
-import { HRTranslatePipe } from '../../../shared/pipes/translate.pipe';
-
-@Component({
-  selector: 'hr-event-item',
-  standalone: true,
-  imports: [FontAwesomeModule, DatePipe, LowerCasePipe, HRTranslatePipe],
-  templateUrl: './event-item.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class HREventItemComponent {
-  readonly events = input<FilteredUpcomingEvent[]>([]);
-  readonly showDates = input<boolean>(false);
-  readonly showProperty = input<boolean>(true);
-  readonly selectedLanguage = input<string>('en');
-  readonly selectedEventType = input<EventTypeEnum | null>(null);
-  readonly weekendWarningDescription = input<string | null>(null);
-  readonly eventIconClass = input<string>('fs-6 text-primary pe-2');
-  readonly eventNameBoldClass = input<string>('fw-medium');
-  readonly eventDescriptionClass = input<string>('text-primary fw-medium');
-  readonly propertyBadgeClass = input<string>('property-badge cursor-pointer me-1');
-  readonly noEventsTextClass = input<string>('text-center my-4 text-light-gray');
-  readonly warningTextClass = input<string>('text-center my-2 text-light-gray');
-  readonly dateFormat = input<string>('dd/MM/yyyy');
-
-  eventTypeEnum = EventTypeEnum;
-  cakeCandles = faCakeCandles;
-  treePalm = faTreePalm;
-
-  readonly isArabic = computed(() => this.selectedLanguage() === 'ar');
-
-  isBirthday(event: FilteredUpcomingEvent): boolean {
-    return event.EventType === EventTypeEnum.Birthdays;
-  }
-  hasPropertyBadge(event: FilteredUpcomingEvent): boolean {
-    return this.showProperty() && !!event.PropertySymbol;
-  }
-}

package/src/lib/my-upcoming-events-widget/components/event-tab-bar/event-tab-bar.component.html

@@ -1,21 +0,0 @@
-<div [class]="containerClass()">
-  @for (tab of tabList; track tab) {
-    <div
-      [class]="tabItemClass() + ' ' + (selectedType() == tab.id ? tabSelectedClass() : tabNotSelectedClass())"
-      [ngClass]="{ 'w-25': selectedLanguage() == 'fr' && !tab?.icon }"
-      (click)="tabSelected.emit(tab.id)"
-    >
-      @if (!tab?.icon) {
-        <span [class]="tabTextClass() + ' ' + (selectedType() == tab.id ? tabTextSelectedClass() : tabTextNotSelectedClass())">
-          {{ getTabText(tab) }}
-        </span>
-      } @else {
-        <fa-icon
-          [icon]="tab.icon!"
-          [class]="tabIconClass() + ' ' + (selectedType() == tab.id ? tabTextSelectedClass() : tabTextNotSelectedClass())"
-          [title]="getTabText(tab)"
-        ></fa-icon>
-      }
-    </div>
-  }
-</div>

package/src/lib/my-upcoming-events-widget/components/event-tab-bar/event-tab-bar.component.ts

@@ -1,44 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject, input, output } from '@angular/core';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { NgClass } from '@angular/common';
-import { EventTypeEnum } from '../../../shared/types/common';
-import { faCakeCandles, faTreePalm } from '@fortawesome/pro-light-svg-icons';
-import { HRTranslatePipe } from '../../../shared/pipes/translate.pipe';
-
-@Component({
-  selector: 'hr-event-tab-bar',
-  standalone: true,
-  imports: [FontAwesomeModule, NgClass],
-  providers: [HRTranslatePipe],
-  templateUrl: './event-tab-bar.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class HREventTabBarComponent {
-  readonly selectedType = input<EventTypeEnum | null>(null);
-  readonly selectedLanguage = input<string>('en');
-  readonly tabSelectedClass = input<string>('selected-event-option');
-  readonly tabNotSelectedClass = input<string>('not-selected-event-option');
-  readonly tabTextSelectedClass = input<string>('text-white');
-  readonly tabTextNotSelectedClass = input<string>('text-primary');
-  readonly containerClass = input<string>('d-flex gap-2 mb-3');
-  readonly tabItemClass = input<string>(
-    'col-1 align-items-center rounded rounded-3 cursor-pointer text-center d-flex justify-content-center py-2 px-3',
-  );
-  readonly tabTextClass = input<string>('fs-16');
-  readonly tabIconClass = input<string>('fs-6');
-  readonly tabSelected = output<EventTypeEnum | null>();
-
-  private readonly translatePipe = inject(HRTranslatePipe);
-
-  tabList = [
-    { id: null, icon: null },
-    { id: EventTypeEnum.Birthdays, icon: faCakeCandles },
-    { id: EventTypeEnum.PublicHolidays, icon: faTreePalm },
-  ];
-
-  getTabText(tab: { id: EventTypeEnum | null }): string {
-    if (tab.id === null) return this.translatePipe.transform('All');
-    if (tab.id === EventTypeEnum.Birthdays) return this.translatePipe.transform('Birthday');
-    return this.translatePipe.transform('PublicHoliday');
-  }
-}

package/src/lib/my-upcoming-events-widget/components/events-popup/events-popup.component.html

@@ -1,67 +0,0 @@
-<dx-popup
-  id="popup"
-  [visible]="popupVisible()"
-  [height]="'400'"
-  [maxHeight]="400"
-  [width]="'650'"
-  shadingColor="rgba(0,0,0,0.4)"
-  contentTemplate="popup-content"
-  [showCloseButton]="true"
-  [title]="popupTitle()"
-  (onHiding)="onPopupClose()"
-  (visibleChange)="onPopupVisibleChanged($event)"
->
-  <div class="text-dark" *dxTemplate="let data of 'popup-content'">
-    <dx-scroll-view
-      #upcomingEventsScrollView
-      id="upcomingEventsScrollView"
-      [scrollByContent]="true"
-      [scrollByThumb]="true"
-      [showScrollbar]="'onScroll'"
-      [bounceEnabled]="false"
-    >
-      @if (hasBirthdays() || hasHolidays()) {
-        <hr-event-tab-bar
-          [selectedType]="selectedEventType()"
-          [selectedLanguage]="selectedLanguage()"
-          [tabSelectedClass]="tabSelectedClass()"
-          [tabNotSelectedClass]="tabNotSelectedClass()"
-          [tabTextSelectedClass]="tabTextSelectedClass()"
-          [tabTextNotSelectedClass]="tabTextNotSelectedClass()"
-          [containerClass]="tabContainerClass()"
-          [tabItemClass]="tabItemClass()"
-          [tabTextClass]="tabTextClass()"
-          [tabIconClass]="tabIconClass()"
-          (tabSelected)="onTabSelected($event)"
-        ></hr-event-tab-bar>
-
-        <hr-event-item
-          [events]="events()"
-          [showDates]="true"
-          [showProperty]="showProperty()"
-          [selectedLanguage]="selectedLanguage()"
-          [selectedEventType]="selectedEventType()"
-          [weekendWarningDescription]="weekendWarningDescription()"
-          [eventIconClass]="eventIconClass()"
-          [eventNameBoldClass]="eventNameBoldClass()"
-          [eventDescriptionClass]="eventDescriptionClass()"
-          [propertyBadgeClass]="propertyBadgeClass()"
-          [noEventsTextClass]="noEventsTextClass()"
-          [warningTextClass]="warningTextClass()"
-          [dateFormat]="dateFormat()"
-        ></hr-event-item>
-      } @else {
-        <div [class]="noEventsTextClass()">{{ 'NoEvents' | translate }}</div>
-      }
-    </dx-scroll-view>
-  </div>
-</dx-popup>
-
-<dx-load-panel
-  shadingColor="rgba(0,0,0,0.4)"
-  [visible]="isLoading()"
-  [showIndicator]="true"
-  [showPane]="true"
-  [shading]="true"
-  [hideOnOutsideClick]="false"
-></dx-load-panel>

package/src/lib/my-upcoming-events-widget/components/events-popup/events-popup.component.ts

@@ -1,74 +0,0 @@
-import { ChangeDetectionStrategy, Component, effect, input, output, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DxLoadPanelModule, DxPopupModule, DxScrollViewModule } from 'devextreme-angular';
-import { EventTypeEnum, FilteredUpcomingEvent } from '../../../shared/types/common';
-import { HRTranslatePipe } from '../../../shared/pipes/translate.pipe';
-import { HREventItemComponent } from '../event-item/event-item.component';
-import { HREventTabBarComponent } from '../event-tab-bar/event-tab-bar.component';
-
-@Component({
-  selector: 'hr-upcoming-events-popup',
-  standalone: true,
-  imports: [
-    CommonModule,
-    DxPopupModule,
-    DxScrollViewModule,
-    DxLoadPanelModule,
-    HREventItemComponent,
-    HREventTabBarComponent,
-    HRTranslatePipe,
-  ],
-  templateUrl: './events-popup.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class HREventsPopupComponent {
-  readonly visible = input<boolean>(false);
-  readonly events = input<FilteredUpcomingEvent[]>([]);
-  readonly hasBirthdays = input<boolean>(false);
-  readonly hasHolidays = input<boolean>(false);
-  readonly isLoading = input<boolean>(false);
-  readonly selectedLanguage = input<string>('en');
-  readonly showProperty = input<boolean>(true);
-  readonly weekendWarningDescription = input<string | null>(null);
-  readonly popupTitle = input<string>('');
-  readonly selectedEventType = input<EventTypeEnum | null>(null);
-  readonly tabSelectedClass = input<string>('selected-event-option');
-  readonly tabNotSelectedClass = input<string>('not-selected-event-option');
-  readonly tabTextSelectedClass = input<string>('text-white');
-  readonly tabTextNotSelectedClass = input<string>('text-primary');
-  readonly tabContainerClass = input<string>('d-flex gap-2 mb-3');
-  readonly tabItemClass = input<string>(
-    'col-1 align-items-center rounded rounded-3 cursor-pointer text-center d-flex justify-content-center py-2 px-3',
-  );
-  readonly tabTextClass = input<string>('fs-16');
-  readonly tabIconClass = input<string>('fs-6');
-  readonly eventIconClass = input<string>('fs-6 text-primary pe-2');
-  readonly eventNameBoldClass = input<string>('fw-medium');
-  readonly eventDescriptionClass = input<string>('text-primary fw-medium');
-  readonly propertyBadgeClass = input<string>('property-badge cursor-pointer me-1');
-  readonly noEventsTextClass = input<string>('text-center my-4 text-light-gray');
-  readonly warningTextClass = input<string>('text-center my-2 text-light-gray');
-  readonly dateFormat = input<string>('dd/MM/yyyy');
-
-  readonly visibleChange = output<boolean>();
-  readonly tabSelected = output<EventTypeEnum | null>();
-  readonly closed = output<void>();
-  readonly popupVisible = signal<boolean>(false);
-
-  private readonly syncVisibleEffect = effect(() => {
-    this.popupVisible.set(this.visible());
-  });
-
-  onTabSelected(eventType: EventTypeEnum | null) {
-    this.tabSelected.emit(eventType);
-  }
-
-  onPopupVisibleChanged(visible: boolean): void {
-    this.popupVisible.set(visible);
-    this.visibleChange.emit(visible);
-  }
-
-  onPopupClose() {
-    this.closed.emit();
-  }
-}

package/src/lib/my-upcoming-events-widget/my-upcoming-events-widget.component.html

@@ -1,74 +0,0 @@
-<!-- Card View -->
-<div [class]="cardClass()">
-  <hr-card-header [icon]="calendarStar" [title]="'UpcomingEvents' | translate"></hr-card-header>
-
-  @if (birthdays().length > 0 || holidays().length > 0) {
-    <hr-event-tab-bar
-      [selectedType]="selectedEventType()"
-      [selectedLanguage]="selectedLanguage()"
-      [tabSelectedClass]="tabSelectedClass()"
-      [tabNotSelectedClass]="tabNotSelectedClass()"
-      [tabTextSelectedClass]="tabTextSelectedClass()"
-      [tabTextNotSelectedClass]="tabTextNotSelectedClass()"
-      [containerClass]="tabContainerClass()"
-      [tabItemClass]="tabItemClass()"
-      [tabTextClass]="tabTextClass()"
-      [tabIconClass]="tabIconClass()"
-      (tabSelected)="onTabClick($event)"
-    ></hr-event-tab-bar>
-
-    <hr-event-item
-      [events]="filteredEvents()"
-      [showDates]="false"
-      [showProperty]="showProperty()"
-      [selectedLanguage]="selectedLanguage()"
-      [selectedEventType]="selectedEventType()"
-      [weekendWarningDescription]="weekendWarning()"
-      [eventIconClass]="eventIconClass()"
-      [eventNameBoldClass]="eventNameBoldClass()"
-      [eventDescriptionClass]="eventDescriptionClass()"
-      [propertyBadgeClass]="propertyBadgeClass()"
-      [noEventsTextClass]="noEventsTextClass()"
-      [warningTextClass]="warningTextClass()"
-      [dateFormat]="dateFormat()"
-    ></hr-event-item>
-
-    <div [class]="viewAllContainerClass()">
-      <a [class]="viewAllLinkClass()" (click)="showPopup()">{{ 'ViewAll' | translate }}</a>
-    </div>
-  } @else {
-    <div [class]="noEventsTextClass()">{{ 'NoEvents' | translate }}</div>
-  }
-</div>
-
-<!-- Popup -->
-<hr-upcoming-events-popup
-  [visible]="popupVisible()"
-  [events]="popupEvents()"
-  [hasBirthdays]="birthdays().length > 0"
-  [hasHolidays]="holidays().length > 0"
-  [isLoading]="false"
-  [selectedLanguage]="selectedLanguage()"
-  [showProperty]="showProperty()"
-  [weekendWarningDescription]="weekendWarning()"
-  [popupTitle]="'UpcomingEvents' | translate"
-  [selectedEventType]="selectedPopupEventType()"
-  [tabSelectedClass]="tabSelectedClass()"
-  [tabNotSelectedClass]="tabNotSelectedClass()"
-  [tabTextSelectedClass]="tabTextSelectedClass()"
-  [tabTextNotSelectedClass]="tabTextNotSelectedClass()"
-  [tabContainerClass]="tabContainerClass()"
-  [tabItemClass]="tabItemClass()"
-  [tabTextClass]="tabTextClass()"
-  [tabIconClass]="tabIconClass()"
-  [eventIconClass]="eventIconClass()"
-  [eventNameBoldClass]="eventNameBoldClass()"
-  [eventDescriptionClass]="eventDescriptionClass()"
-  [propertyBadgeClass]="propertyBadgeClass()"
-  [noEventsTextClass]="noEventsTextClass()"
-  [warningTextClass]="warningTextClass()"
-  [dateFormat]="dateFormat()"
-  (visibleChange)="onPopupVisibleChange($event)"
-  (tabSelected)="onPopupTabClick($event)"
-  (closed)="onPopupClose()"
-></hr-upcoming-events-popup>