66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
import {Component, ElementRef, Input, ViewChild} from "@angular/core";
|
|
import {MobileDropdownComponent} from "../mobile-dropdown/mobile-dropdown.component";
|
|
|
|
declare var UIkit;
|
|
|
|
@Component({
|
|
selector: 'dropdown-filter',
|
|
template: `
|
|
<button #toggle 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 *ngIf="!isMobile" #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-container *ngTemplateOutlet="content"></ng-container>
|
|
</div>
|
|
</div>
|
|
<mobile-dropdown #mobileDropdown [toggle]="toggle">
|
|
<div [ngClass]="dropdownClass">
|
|
<ng-container *ngTemplateOutlet="content"></ng-container>
|
|
</div>
|
|
</mobile-dropdown>
|
|
<ng-template #content>
|
|
<ng-content></ng-content>
|
|
</ng-template>
|
|
`
|
|
})
|
|
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;
|
|
@Input()
|
|
public isMobile: boolean = false;
|
|
@ViewChild("dropdownElement") dropdownElement: ElementRef;
|
|
@ViewChild("mobileDropdown") mobileDropdown: MobileDropdownComponent;
|
|
|
|
get isOpen() {
|
|
if(this.isMobile) {
|
|
return this.mobileDropdown?.opened;
|
|
} else {
|
|
return (typeof document !== 'undefined') && this.dropdownElement && UIkit.dropdown(this.dropdownElement.nativeElement).isActive();
|
|
}
|
|
}
|
|
|
|
closeDropdown() {
|
|
if(this.isMobile) {
|
|
this.mobileDropdown.close();
|
|
} else {
|
|
UIkit.dropdown(this.dropdownElement.nativeElement).hide();
|
|
}
|
|
}
|
|
}
|