@let input = filterInput();
<button
  class="filter-input-button__filter-button"
  [class.open]="open()"
  [class.active]="!isDefaultInputState()"
  (click)="toggle()"
  type="button"
  cdkOverlayOrigin
  data-which="filter-input-button"
  [attr.data-what]="input.label"
  #trigger="cdkOverlayOrigin"
>
  <span
    class="filter-input-button__filter-button-label"
    [class.filter-input-button__filter-button-label-full]="
      label() && isDefaultInputState()
    "
    >{{ label() ?? input.label }}</span
  >
  <ng-icon
    class="filter-input-button__filter-button-icon"
    [name]="open() ? 'isaActionChevronUp' : 'isaActionChevronDown'"
    [attr.data-what]="open() ? 'isaActionChevronUp' : 'isaActionChevronDown'"
    size="1.5rem"
  >
  </ng-icon>
</button>

<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOrigin]="trigger"
  [cdkConnectedOverlayOpen]="open()"
  [cdkConnectedOverlayHasBackdrop]="true"
  [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
  [cdkConnectedOverlayOffsetX]="-10"
  [cdkConnectedOverlayOffsetY]="18"
  cdkConnectedOverlayWidth="18.375rem"
  (backdropClick)="toggle()"
>
  <filter-input-menu
    class="w-full"
    [filterInput]="input"
    (applied)="applied.emit()"
    (reseted)="reseted.emit()"
    [canApply]="canApply()"
  ></filter-input-menu>
</ng-template>
