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

66 lines
2.1 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 *ngIf="isMobile" #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();
}
}
}