Asymmetrik/ngx-starter

<button
    class="btn btn-text dropdown-toggle dropdown-toggle-hide-caret px-2"
    type="button"
    cdkOverlayOrigin
    #trigger
    (click)="toggle()"
>
    <span
        class="filter fa-solid fa-list"
        container="body"
        ngbTooltip="Apply Filters"
        placement="bottom"
        [hidden]="isFiltered()"
    ></span>
    <span
        class="filter fa-solid fa-filter"
        container="body"
        ngbTooltip="Edit Filters"
        placement="bottom"
        [hidden]="!isFiltered()"
    ></span>
</button>

<ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOpen]="isOpen()"
    [cdkConnectedOverlayOrigin]="trigger"
    (overlayOutsideClick)="handleOutsideClick($event)"
>
    <div class="dropdown-menu px-3" cdkTrapFocus cdkTrapFocusAutoCapture>
        <div class="form-check">
            <input
                class="form-check-input"
                id="date-filter-enabled"
                type="checkbox"
                [(ngModel)]="enabled"
                (ngModelChange)="onFilterChange()"
            />
            <label class="form-check-label" for="date-filter-enabled">Enabled</label>
        </div>

        <div class="form-check form-check-inline mt-2">
            <input
                class="form-check-input"
                id="dir-radio-past"
                type="radio"
                value="past"
                [(ngModel)]="direction"
                [disabled]="isCustom()"
                (ngModelChange)="onDateFilterChange()"
            />
            <label class="form-check-label" for="dir-radio-past">Past</label>
        </div>
        <div class="form-check form-check-inline">
            <input
                class="form-check-input"
                id="dir-radio-next"
                type="radio"
                value="next"
                [(ngModel)]="direction"
                [disabled]="isCustom()"
                (ngModelChange)="onDateFilterChange()"
            />
            <label class="form-check-label" for="dir-radio-next">Next</label>
        </div>

        <div class="input-group">
            <input
                class="form-control"
                id="dateCountInput"
                type="number"
                min="1"
                [(ngModel)]="count"
                [disabled]="isCustom()"
                (ngModelChange)="onDateFilterChange()"
            />
            <div class="input-group-append">
                <ng-select
                    id="dateDurationInput"
                    appendTo="body"
                    [(ngModel)]="duration"
                    [clearable]="false"
                    [disabled]="isCustom()"
                    [items]="['hour', 'day', 'week', 'month', 'year']"
                    [searchable]="false"
                    (click)="$event.stopPropagation()"
                    (ngModelChange)="onDateFilterChange()"
                >
                    <ng-template let-item="item" ng-label-tmp ng-option-tmp>
                        {{ item | titlecase }}{{ count() > 1 ? 's' : '' }}
                    </ng-template>
                </ng-select>
            </div>
        </div>

        <div class="form-check mt-2">
            <input
                class="form-check-input"
                id="custom-date-filter-enabled"
                type="checkbox"
                [(ngModel)]="isCustom"
                (ngModelChange)="onDateFilterChange()"
            />
            <label class="form-check-label" for="custom-date-filter-enabled">Custom Range</label>
        </div>

        <app-datepicker-range-popup
            name="customRange"
            [(ngModel)]="customRange"
            [disabled]="!isCustom()"
            (ngModelChange)="onDateFilterChange()"
        />
    </div>
</ng-template>