46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import {Component, ElementRef, Input, ViewChild} from "@angular/core";
|
|
|
|
declare var UIkit;
|
|
|
|
@Component({
|
|
selector: 'dropdown-filter',
|
|
template: `
|
|
<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>
|
|
<icon [flex]="true" class="uk-margin-xsmall-left" [name]="'expand_' + (isOpen?'less':'more')"></icon>
|
|
</button>
|
|
<div #dropdownElement class="uk-dropdown"
|
|
[class.uk-height-max-large]="overflow" [class.uk-overflow-auto]="overflow"
|
|
[ngStyle]="dropdownMinWidth?{'min-width.px': dropdownMinWidth}:''"
|
|
[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;
|
|
@Input()
|
|
public dropdownMinWidth: number;
|
|
@Input()
|
|
public overflow: boolean = true;
|
|
@Input()
|
|
public disabled = false;
|
|
@ViewChild("dropdownElement") dropdownElement: ElementRef;
|
|
|
|
get isOpen() {
|
|
return (typeof document !== 'undefined') && this.dropdownElement && UIkit.dropdown(this.dropdownElement.nativeElement).isActive();
|
|
}
|
|
|
|
closeDropdown() {
|
|
UIkit.dropdown(this.dropdownElement.nativeElement).hide();
|
|
}
|
|
}
|