openaire-library/utils/dropdown-filter/dropdown-filter.component.ts

39 lines
1.1 KiB
TypeScript
Raw Normal View History

2022-07-01 14:44:05 +02:00
import {Component, ElementRef, Input, ViewChild} from "@angular/core";
declare var UIkit;
@Component({
selector: 'dropdown-filter',
template: `
2022-07-01 14:44:05 +02:00
<button class="uk-button uk-button-default uk-flex uk-flex-middle"
[class.uk-disabled]="disabled" [disabled]="disabled">
<span>{{name}}<span *ngIf="count > 0">({{count}})</span></span>
2022-07-01 14:44:05 +02:00
<icon [flex]="true" class="uk-margin-xsmall-left" [name]="'expand_' + (isOpen?'less':'more')"></icon>
</button>
<div #dropdownElement class="uk-dropdown uk-height-max-medium uk-overflow-auto" [ngClass]="dropdownClass" uk-dropdown="mode: click; delay-hide: 0;">
<div>
<ng-content></ng-content>
</div>
</div>
`
})
export class DropdownFilterComponent {
@Input()
public name;
@Input()
public count: number = 0;
@Input()
public dropdownClass: string;
2022-07-01 14:44:05 +02:00
@Input()
public disabled = false;
@ViewChild("dropdownElement") dropdownElement: ElementRef;
2022-07-01 14:44:05 +02:00
get isOpen() {
return this.dropdownElement && UIkit.dropdown(this.dropdownElement.nativeElement).isActive();
}
closeDropdown() {
2022-07-01 14:44:05 +02:00
UIkit.dropdown(this.dropdownElement.nativeElement).hide();
}
}