mwlClick does not work on custom events

[jairmedeiros]

Describe the bug

In production environment, the mwlClick does not work. I have custom events with cellTemplate and openDayEventsTemplate. Locally, these works, but in production not.

Minimal reproduction of the problem with instructions

Some code:

<!-- calendar-month-cell -->
<ng-template
  #statusTemplate
  let-day="day"
  let-openDay="openDay"
  let-locale="locale"
  let-tooltipPlacement="tooltipPlacement"
  let-highlightDay="highlightDay"
  let-unhighlightDay="unhighlightDay"
  let-eventClicked="eventClicked"
  let-tooltipTemplate="tooltipTemplate"
  let-tooltipAppendToBody="tooltipAppendToBody"
  let-tooltipDelay="tooltipDelay"
  let-trackByEventId="trackByEventId"
  let-validateDrag="validateDrag"
>
  <div
    class="cal-cell-top"
    [attr.aria-label]="
  { day: day, locale: locale } | calendarA11y: 'monthCell'
"
  >
    <span aria-hidden="true">
      <span class="cal-day-total" *ngIf="day.badgeTotal > 0">
        <div style="font-size: 10px;">
          Total:
        </div>
        <div>
          {{ day.badgeTotal }} {{ day.badgeTotal > 1 ?
          'atividades': 'atividade' }}
        </div>
      </span>
      <span class="cal-day-number"
        >{{ day.date | calendarDate:'monthViewDayNumber':locale
        }}</span
      >
    </span>
  </div>
  <div
    class="cal-events-group"
    style="margin: 0 10px 18px 10px !important;"
    *ngIf="day.events.length > 0"
  >
    <div
      class="cal-event-group"
      [ngClass]="group.key"
      *ngFor="let group of groupedEvents(day.events); trackBy: trackByEventId"
      (mwlClick)="eventClicked.emit({sourceEvent: {group: group.key, day: day}})"
    >
      {{ group.elements.length }}
    </div>
  </div>
</ng-template>
<!-- calendar-month-cell -->

<!-- calendar-open-day-events -->
<ng-template
  #openDayTemplate
  let-events="events"
  let-eventClicked="eventClicked"
  let-isOpen="isOpen"
  let-trackByEventId="trackByEventId"
  let-validateDrag="validateDrag"
>
  <div
    [@collapse]
    *ngIf="groupClicked && isOpen && events.length > 0"
    class="cal-open-day-events-general"
    [ngClass]="groupClicked"
    role="application"
  >
    <ng-container [ngSwitch]="groupClicked">
      <ng-container *ngSwitchCase="'event-ok-later'">
        <span class="cal-title-group-open-day">
          Atividades com manutenção realizada fora da garantia
        </span>
      </ng-container>
      <ng-container *ngSwitchCase="'event-expired'">
        <span class="cal-title-group-open-day">
          Atividades vencidas
        </span>
      </ng-container>
      <ng-container *ngSwitchCase="'event-warning'">
        <span class="cal-title-group-open-day">
          Atividades próximas do vencimento
        </span>
      </ng-container>
      <ng-container *ngSwitchCase="'event-approved'">
        <span class="cal-title-group-open-day">
          Atividades com manutenção aprovada
        </span>
      </ng-container>
      <ng-container *ngSwitchCase="'event-suspended'">
        <span class="cal-title-group-open-day">
          Atividades aguardando aprovação
        </span>
      </ng-container>
      <ng-container *ngSwitchCase="'event-rejected'">
        <span class="cal-title-group-open-day">
          Atividades com evidências rejeitadas
        </span>
      </ng-container>
      <ng-container *ngSwitchCase="'event-ok'">
        <span class="cal-title-group-open-day">
          Atividades futuras
        </span>
      </ng-container>
    </ng-container>
    <div
      *ngFor="let event of filteredEvents(groupClicked, events)"
      class="cal-open-day-group-events"
    >
      <mwl-calendar-event-title
        [event]="event"
        view="month"
        tabindex="0"
        (mwlClick)="eventClicked.emit({ event: event, sourceEvent: $event })"
        (mwlKeydownEnter)="
          eventClicked.emit({ event: event, sourceEvent: $event })
        "
      >
      </mwl-calendar-event-title>
      &ngsp;
      <mwl-calendar-event-actions [event]="event">
      </mwl-calendar-event-actions>
    </div>
  </div>
  <div
    [@collapse]
    *ngIf="!groupClicked && isOpen && events.length > 0"
    class="cal-open-day-events-general"
    style="background-color: #555;"
    role="application"
  >
    <ng-container *ngFor="let group of groupedEvents(events)">
      <ng-container [ngSwitch]="group.key">
        <ng-container *ngSwitchCase="'event-ok-later'">
          <span
            class="cal-title-group-open-day"
            style="color: #10264a;"
          >
            Atividades com manutenção realizada fora da garantia
          </span>
        </ng-container>
        <ng-container *ngSwitchCase="'event-expired'">
          <span
            class="cal-title-group-open-day"
            style="color: #f4516c;"
          >
            Atividades vencidas
          </span>
        </ng-container>
        <ng-container *ngSwitchCase="'event-warning'">
          <span
            class="cal-title-group-open-day"
            style="color: #ffb822"
          >
            Atividades próximas do vencimento
          </span>
        </ng-container>
        <ng-container *ngSwitchCase="'event-approved'">
          <span
            class="cal-title-group-open-day"
            style="color: #34bfa3"
          >
            Atividades com manutenção aprovada
          </span>
        </ng-container>
        <ng-container *ngSwitchCase="'event-suspended'">
          <span
            class="cal-title-group-open-day"
            style="color: #a4a5a8"
          >
            Atividades aguardando aprovação
          </span>
        </ng-container>
        <ng-container *ngSwitchCase="'event-rejected'">
          <span
            class="cal-title-group-open-day"
            style="color: #ba68c8"
          >
            Atividades com evidências rejeitadas
          </span>
        </ng-container>
        <ng-container *ngSwitchCase="'event-ok'">
          <span
            class="cal-title-group-open-day"
            style="color: #4fa9f8"
          >
            Atividades futuras
          </span>
        </ng-container>
      </ng-container>
      <div
        *ngFor="let event of group.elements"
        class="cal-open-day-group-events"
      >
        <mwl-calendar-event-title
          [event]="event"
          view="month"
          (mwlClick)="eventClicked.emit({ event: event, sourceEvent: $event })"
          (mwlKeydownEnter)="
            eventClicked.emit({ event: event, sourceEvent: $event })
          "
          tabindex="0"
        >
        </mwl-calendar-event-title>
        &ngsp;
        <mwl-calendar-event-actions [event]="event">
        </mwl-calendar-event-actions>
      </div>
    </ng-container>
  </div>
</ng-template>
<!-- calendar-open-day-events -->

Are my ng-templates wrongs?

Versions

• @angular/core: ~7.2.0
• angular-calendar: ^0.28.22
• Browser name and version: Firefox 86.0

[matts-bot]

Thanks so much for opening an issue! If you'd like me to give priority to answering your issue or would just like to support this project, then please consider sponsoring me