Dropdown Desktop / Dialog Mobile

@if (!isMobile) {
  <app-dropdown [appendTo]="'body'">
    <app-running-ads-dropdown />
  </app-dropdown>
} @else {
  <app-button
    [label]="'SHARED.RUNNING_ADS' | transloco"
    [buttonType]="ButtonType.SECONDARY"
    [buttonGroup]="ButtonGroup.TEXT"
    [buttonIcon]="ButtonIcon.ICON_RIGHT"
    [icon]="'icon-chevron-down-2'"
    [isWide]="true"
    [isDisabled]="false"
    [isDarkmode]="true"
    (click)="onClickRunningAds($event)"
  />
}

public onClickRunningAds(event: Event): void {
    event.preventDefault();
    const dialogRef = this._dialogService.open(RunningAdsDialogComponent);
    dialogRef.afterClosed$().subscribe(() => {});
    this._cdr.markForCheck();
  }

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { CheckboxComponent } from '@app/shared/components/checkbox/checkbox.component';

@Component({
  selector: 'app-running-ads-dropdown',
  standalone: true,
  imports: [CommonModule, CheckboxComponent],
  templateUrl: './running-ads-dropdown.component.html',
  styleUrl: './running-ads-dropdown.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class RunningAdsDropdownComponent {
  public activeIndex: number | null = null;
  public checkboxArchivedAds: string[] = ['Szűrés az archivált hirdetésekre is  '];

  public checkboxRunningAds: string[] = [
    'Futó hirdetések',
    'Elszámolás alatt levő hirdetések',
    'Leállított hirdetések',
    'Befejeződött hirdetések'
  ];

  public selectedTitles: { [key: string]: boolean } = {
    'Szűrés az archivált hirdetésekre is': true
  };

  public setActiveIndex(index: number): void {
    this.activeIndex = index;
  }

  public isChecked(title: string): boolean {
    return !!this.selectedTitles[title];
  }

  public generateId(index: number): string {
    return `checkbox-${index}`;
  }

  public onCheckboxChange(title: string): void {
    this.selectedTitles[title] = !this.selectedTitles[title];
  }
}

<div class="running-ads-dropdown">
  <app-checkbox
    *ngFor="let item of checkboxArchivedAds; let i = index"
    [id]="'archived-ads'"
    [isBorder]="true"
    [htmlTitle]="item"
    [isChecked]="isChecked(item)"
    [ngClass]="{ checked: isChecked(item) }"
    (checkedChange)="onCheckboxChange(item)"
  />
  <div class="divider"></div>
  <app-checkbox
    *ngFor="let item of checkboxRunningAds; let i = index"
    [id]="generateId(i)"
    [isBorder]="true"
    [htmlTitle]="item"
    [isChecked]="isChecked(item)"
    [ngClass]="{ checked: isChecked(item) }"
    (checkedChange)="onCheckboxChange(item)"
  />
</div>

import { CommonModule } from '@angular/common';
import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  Inject,
  inject,
  OnDestroy,
  OnInit
} from '@angular/core';
import { DeviceService, DIALOG_DATA, DialogRef } from '@app/core/services';
import { FieldType } from '@app/shared/components/field/field.enum';
import { ModalComponent } from '@app/shared/components/modal/modal.component';
import { TranslocoPipe } from '@jsverse/transloco';
import { Subject, takeUntil } from 'rxjs';

import { RunningAdsDropdownComponent } from '../running-ads-dropdown/running-ads-dropdown.component';

@Component({
  selector: 'app-running-ads-dialog',
  standalone: true,
  imports: [CommonModule, ModalComponent, RunningAdsDropdownComponent, TranslocoPipe],
  templateUrl: './running-ads-dialog.component.html',
  styleUrl: './running-ads-dialog.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class RunningAdsDialogComponent implements OnInit, OnDestroy {
  private readonly _deviceService = inject(DeviceService);
  private readonly _cdr = inject(ChangeDetectorRef);
  private readonly _destroy$ = new Subject<void>();
  public isMobile: boolean = false;
  public data: string;
  public FieldType = FieldType;

  public constructor(
    @Inject(DIALOG_DATA) dialogData: string,
    private readonly _dialogRef: DialogRef<unknown>
  ) {
    this.data = dialogData;
  }

  public ngOnInit(): void {
    this._deviceService.isMobileObs$.pipe(takeUntil(this._destroy$)).subscribe((isMobile) => {
      this.isMobile = isMobile;
      this._cdr.markForCheck();
    });
  }

  public ngOnDestroy(): void {
    this._destroy$.next();
    this._destroy$.complete();
  }

  public onClose(): void {
    if (this._dialogRef) {
      this._dialogRef.close(null);
    }
  }
}

<app-modal
  [isVisible]="true"
  [header]="'ADS.STATS_FILTER' | transloco"
  [btnPrimaryLabel]="'ADS.FILTER' | transloco"
  [btnSecondaryLabel]="'SHARED.CANCEL' | transloco"
  [isMobile]="isMobile"
  [isBtnPrimaryVisible]="true"
  [isBtnSecondaryVisible]="true"
  (btnPrimaryClick)="onClose()"
  (closeClick)="onClose()"
>
  <div body>
    <div class="dialog-content">
      <app-running-ads-dropdown />
    </div>
  </div>
</app-modal>