@let tooltipLabel = !popover.isOpen() ? iconDropdownConfig?.tooltipLabel : null;
<div
    class="d-flex justify-content-center icon-container"
    [ngStyle]="{
        '--icon-color': iconColor,
        '--icon-background-color': backgroundColor,
    }"
    [ngbTooltip]="tooltipLabel"
    [mainCaTooltip]="iconDropdownConfig?.tooltipLabel"
    position="bottom"
    [tooltipBackground]="'#424242'"
    tooltipTextAlign="center"
    [ngbPopover]="dropdown"
    #popover="ngbPopover"
    [autoClose]="'outside'"
    [popoverClass]="'dropdown-container-wrapper'"
    [placement]="iconDropdownConfig.placement"
    [container]="'body'"
    (mouseenter)="setHoveredIconState(true)"
    (mouseleave)="setHoveredIconState(false)"
>
    <svg-icon class="icon" [src]="iconDropdownConfig.icon"> </svg-icon>
</div>

<ng-template #dropdown>
    <div class="dropdown-container">
        <div [style.width.px]="iconDropdownConfig?.dropdownWidth">
            <div class="dropdown-content">
                @for (item of iconDropdownConfig?.dropdownItems; track $index) {
                    @let fontWeightClass =
                        item.isSelected ? 'ca-font-bold' : 'ca-font-regular';
                    <div
                        class="d-flex justify-content-between align-items-center list-item"
                        (click)="selectItem(item, popover)"
                    >
                        <div
                            class="label"
                            [style.width.px]="
                                '(iconDropdownConfig?.dropdownWidth - 60)'
                            "
                            [ngClass]="fontWeightClass"
                        >
                            {{ item.label }}
                        </div>
                        @if (item.isSelected) {
                            <div>
                                <svg-icon
                                    class="check-mark"
                                    [src]="iconDropdownSvgRoutes.colorDrop"
                                >
                                </svg-icon>
                            </div>
                        }
                    </div>
                }
            </div>
        </div>
    </div>
</ng-template>