@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
56 lines • 13.1 kB
JavaScript
import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, inject, Input, Output } from '@angular/core';
import { Subject } from 'rxjs';
import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
import { FilterService } from './filter.service';
import * as i0 from "@angular/core";
import * as i1 from "../../directives/accessibility/focus-indicator/default-focus-indicator.directive";
import * as i2 from "@angular/common";
import * as i3 from "../tooltip/tooltip.directive";
export class FilterContainerComponent {
/** Allow filters to set from outside the component */
set filters(filters) {
this.filterService.filters$.next(filters);
}
constructor() {
this.filterService = inject(FilterService);
/** Defines the aria-label for the clear all button */
this.clearAriaLabel = 'Clear All Filters';
/** Emit when the active filters chance */
this.filtersChange = new EventEmitter();
/** Emit when a specific event occurs */
this.events = new EventEmitter();
/** Unsubscribe from the subscriptions on destroy */
this._onDestroy = new Subject();
// subscribe to changes to the active filters
this.filterService.filters$.pipe(distinctUntilChanged(), takeUntil(this._onDestroy))
.subscribe(filters => this.filtersChange.emit(filters));
// relay any events to the event emitter
this.filterService.events$.pipe(takeUntil(this._onDestroy))
.subscribe(event => this.events.emit(event));
}
/** Destroy all subscriptions */
ngOnDestroy() {
this._onDestroy.next();
this._onDestroy.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FilterContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: FilterContainerComponent, selector: "ux-filter-container", inputs: { filters: "filters", clearTooltip: "clearTooltip", clearAriaLabel: "clearAriaLabel" }, outputs: { filtersChange: "filtersChange", events: "events" }, providers: [FilterService], queries: [{ propertyName: "clearAllTemplate", first: true, predicate: ["clearAllTemplate"], descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n\n<!-- Add a Clear Button -->\n@if ((filterService.filters$ | async).length > 0) {\n <button type=\"button\"\n class=\"btn btn-link btn-secondary m-l-xs\"\n [class.table-filter-clear]=\"clearAllTemplate\"\n [class.btn-icon]=\"!clearAllTemplate\"\n tabindex=\"0\"\n [attr.aria-label]=\"clearAriaLabel\"\n [uxTooltip]=\"clearTooltip || 'Clear All'\"\n (click)=\"filterService.removeAll()\">\n <ng-container [ngTemplateOutlet]=\"clearAllTemplate || defaultClearAllTemplate\">\n </ng-container>\n </button>\n}\n\n<ng-template #defaultClearAllTemplate>\n <svg class=\"filter-selected-clear-graphic\" width=\"100%\" viewBox=\"0 0 19 12\" shape-rendering=\"geometricPrecision\">\n <rect class=\"light-grey\" x=\"0\" y=\"2\" width=\"7\" height=\"2\"></rect>\n <rect class=\"dark-grey\" x=\"0\" y=\"5\" width=\"9\" height=\"2\"></rect>\n <rect class=\"light-grey\" x=\"0\" y=\"8\" width=\"7\" height=\"2\"></rect>\n <path class=\"dark-grey\" d=\"M9,1 h1 l9,9 v1 h-1 l-9,-9 v-1 Z\"></path>\n <path class=\"dark-grey\" d=\"M9,11 v-1 l9,-9 h1 v1 l-9,9 h-1 Z\"></path>\n </svg>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.DefaultFocusIndicatorDirective, selector: ".btn:not([uxFocusIndicator]):not([uxMenuNavigationToggle]):not([uxMenuTriggerFor]), a[href]:not([uxFocusIndicator]):not([uxMenuNavigationToggle]):not([uxMenuTriggerFor])" }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TooltipDirective, selector: "[uxTooltip]", inputs: ["uxTooltip", "tooltipDisabled", "tooltipClass", "tooltipRole", "tooltipContext", "tooltipDelay", "isOpen", "placement", "fallbackPlacement", "alignment", "showTriggers", "hideTriggers"], outputs: ["shown", "hidden", "isOpenChange"], exportAs: ["ux-tooltip"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FilterContainerComponent, decorators: [{
type: Component,
args: [{ selector: 'ux-filter-container', providers: [FilterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n\n<!-- Add a Clear Button -->\n@if ((filterService.filters$ | async).length > 0) {\n <button type=\"button\"\n class=\"btn btn-link btn-secondary m-l-xs\"\n [class.table-filter-clear]=\"clearAllTemplate\"\n [class.btn-icon]=\"!clearAllTemplate\"\n tabindex=\"0\"\n [attr.aria-label]=\"clearAriaLabel\"\n [uxTooltip]=\"clearTooltip || 'Clear All'\"\n (click)=\"filterService.removeAll()\">\n <ng-container [ngTemplateOutlet]=\"clearAllTemplate || defaultClearAllTemplate\">\n </ng-container>\n </button>\n}\n\n<ng-template #defaultClearAllTemplate>\n <svg class=\"filter-selected-clear-graphic\" width=\"100%\" viewBox=\"0 0 19 12\" shape-rendering=\"geometricPrecision\">\n <rect class=\"light-grey\" x=\"0\" y=\"2\" width=\"7\" height=\"2\"></rect>\n <rect class=\"dark-grey\" x=\"0\" y=\"5\" width=\"9\" height=\"2\"></rect>\n <rect class=\"light-grey\" x=\"0\" y=\"8\" width=\"7\" height=\"2\"></rect>\n <path class=\"dark-grey\" d=\"M9,1 h1 l9,9 v1 h-1 l-9,-9 v-1 Z\"></path>\n <path class=\"dark-grey\" d=\"M9,11 v-1 l9,-9 h1 v1 l-9,9 h-1 Z\"></path>\n </svg>\n</ng-template>\n" }]
}], ctorParameters: () => [], propDecorators: { filters: [{
type: Input
}], clearTooltip: [{
type: Input
}], clearAriaLabel: [{
type: Input
}], filtersChange: [{
type: Output
}], events: [{
type: Output
}], clearAllTemplate: [{
type: ContentChild,
args: ['clearAllTemplate', { static: false }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsdGVyLWNvbnRhaW5lci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9maWx0ZXJzL2ZpbHRlci1jb250YWluZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvZmlsdGVycy9maWx0ZXItY29udGFpbmVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFhLE1BQU0sRUFBZSxNQUFNLGVBQWUsQ0FBQztBQUM5SSxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQy9CLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUVqRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0JBQWtCLENBQUM7Ozs7O0FBU2pELE1BQU0sT0FBTyx3QkFBd0I7SUFHakMsc0RBQXNEO0lBQ3RELElBQWEsT0FBTyxDQUFDLE9BQWlCO1FBQ2xDLElBQUksQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUM5QyxDQUFDO0lBb0JEO1FBekJTLGtCQUFhLEdBQUcsTUFBTSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBVS9DLHNEQUFzRDtRQUM3QyxtQkFBYyxHQUFXLG1CQUFtQixDQUFDO1FBRXRELDBDQUEwQztRQUNoQyxrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFZLENBQUM7UUFFdkQsd0NBQXdDO1FBQzlCLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBZSxDQUFDO1FBS25ELG9EQUFvRDtRQUNuQyxlQUFVLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztRQUk5Qyw2Q0FBNkM7UUFDN0MsSUFBSSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLG9CQUFvQixFQUFFLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQzthQUMvRSxTQUFTLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDO1FBRTVELHdDQUF3QztRQUN4QyxJQUFJLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQzthQUN0RCxTQUFTLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO0lBQ3JELENBQUM7SUFFRCxnQ0FBZ0M7SUFDaEMsV0FBVztRQUNQLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUMvQixDQUFDOytHQXpDUSx3QkFBd0I7bUdBQXhCLHdCQUF3Qiw2TUFIdEIsQ0FBQyxhQUFhLENBQUMsNElDVjlCLHFvQ0EwQkE7OzRGRGJhLHdCQUF3QjtrQkFOcEMsU0FBUzsrQkFDSSxxQkFBcUIsYUFFcEIsQ0FBQyxhQUFhLENBQUMsbUJBQ1QsdUJBQXVCLENBQUMsTUFBTTt3REFNbEMsT0FBTztzQkFBbkIsS0FBSztnQkFLRyxZQUFZO3NCQUFwQixLQUFLO2dCQUdHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBR0ksYUFBYTtzQkFBdEIsTUFBTTtnQkFHRyxNQUFNO3NCQUFmLE1BQU07Z0JBRzhDLGdCQUFnQjtzQkFBcEUsWUFBWTt1QkFBQyxrQkFBa0IsRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBDb250ZW50Q2hpbGQsIEV2ZW50RW1pdHRlciwgaW5qZWN0LCBJbnB1dCwgT25EZXN0cm95LCBPdXRwdXQsIFRlbXBsYXRlUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBkaXN0aW5jdFVudGlsQ2hhbmdlZCwgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgRmlsdGVyRXZlbnQgfSBmcm9tICcuL2V2ZW50cy9maWx0ZXItZXZlbnQnO1xuaW1wb3J0IHsgRmlsdGVyU2VydmljZSB9IGZyb20gJy4vZmlsdGVyLnNlcnZpY2UnO1xuaW1wb3J0IHsgRmlsdGVyIH0gZnJvbSAnLi9pbnRlcmZhY2VzL2ZpbHRlci5pbnRlcmZhY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3V4LWZpbHRlci1jb250YWluZXInLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9maWx0ZXItY29udGFpbmVyLmNvbXBvbmVudC5odG1sJyxcbiAgICBwcm92aWRlcnM6IFtGaWx0ZXJTZXJ2aWNlXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBGaWx0ZXJDb250YWluZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuICAgIHJlYWRvbmx5IGZpbHRlclNlcnZpY2UgPSBpbmplY3QoRmlsdGVyU2VydmljZSk7XG5cbiAgICAvKiogQWxsb3cgZmlsdGVycyB0byBzZXQgZnJvbSBvdXRzaWRlIHRoZSBjb21wb25lbnQgKi9cbiAgICBASW5wdXQoKSBzZXQgZmlsdGVycyhmaWx0ZXJzOiBGaWx0ZXJbXSkge1xuICAgICAgICB0aGlzLmZpbHRlclNlcnZpY2UuZmlsdGVycyQubmV4dChmaWx0ZXJzKTtcbiAgICB9XG5cbiAgICAvKiogRGVmaW5lIHRoZSB0b29sdGlwIHRleHQgKi9cbiAgICBASW5wdXQoKSBjbGVhclRvb2x0aXA6IHN0cmluZztcblxuICAgIC8qKiBEZWZpbmVzIHRoZSBhcmlhLWxhYmVsIGZvciB0aGUgY2xlYXIgYWxsIGJ1dHRvbiAqL1xuICAgIEBJbnB1dCgpIGNsZWFyQXJpYUxhYmVsOiBzdHJpbmcgPSAnQ2xlYXIgQWxsIEZpbHRlcnMnO1xuXG4gICAgLyoqIEVtaXQgd2hlbiB0aGUgYWN0aXZlIGZpbHRlcnMgY2hhbmNlICovXG4gICAgQE91dHB1dCgpIGZpbHRlcnNDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPEZpbHRlcltdPigpO1xuXG4gICAgLyoqIEVtaXQgd2hlbiBhIHNwZWNpZmljIGV2ZW50IG9jY3VycyAqL1xuICAgIEBPdXRwdXQoKSBldmVudHMgPSBuZXcgRXZlbnRFbWl0dGVyPEZpbHRlckV2ZW50PigpO1xuXG4gICAgLyoqIEFsbG93IHRoZSBjb250ZW50IG9mIHRoZSBjbGVhciBhbGwgYnV0dG9uIHRvIGJlIGN1c3RvbWl6ZWQgKi9cbiAgICBAQ29udGVudENoaWxkKCdjbGVhckFsbFRlbXBsYXRlJywgeyBzdGF0aWM6IGZhbHNlIH0pIGNsZWFyQWxsVGVtcGxhdGU6IFRlbXBsYXRlUmVmPHZvaWQ+O1xuXG4gICAgLyoqIFVuc3Vic2NyaWJlIGZyb20gdGhlIHN1YnNjcmlwdGlvbnMgb24gZGVzdHJveSAqL1xuICAgIHByaXZhdGUgcmVhZG9ubHkgX29uRGVzdHJveSA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcblxuICAgICAgICAvLyBzdWJzY3JpYmUgdG8gY2hhbmdlcyB0byB0aGUgYWN0aXZlIGZpbHRlcnNcbiAgICAgICAgdGhpcy5maWx0ZXJTZXJ2aWNlLmZpbHRlcnMkLnBpcGUoZGlzdGluY3RVbnRpbENoYW5nZWQoKSwgdGFrZVVudGlsKHRoaXMuX29uRGVzdHJveSkpXG4gICAgICAgICAgICAuc3Vic2NyaWJlKGZpbHRlcnMgPT4gdGhpcy5maWx0ZXJzQ2hhbmdlLmVtaXQoZmlsdGVycykpO1xuXG4gICAgICAgIC8vIHJlbGF5IGFueSBldmVudHMgdG8gdGhlIGV2ZW50IGVtaXR0ZXJcbiAgICAgICAgdGhpcy5maWx0ZXJTZXJ2aWNlLmV2ZW50cyQucGlwZSh0YWtlVW50aWwodGhpcy5fb25EZXN0cm95KSlcbiAgICAgICAgICAgIC5zdWJzY3JpYmUoZXZlbnQgPT4gdGhpcy5ldmVudHMuZW1pdChldmVudCkpO1xuICAgIH1cblxuICAgIC8qKiBEZXN0cm95IGFsbCBzdWJzY3JpcHRpb25zICovXG4gICAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgICAgIHRoaXMuX29uRGVzdHJveS5uZXh0KCk7XG4gICAgICAgIHRoaXMuX29uRGVzdHJveS5jb21wbGV0ZSgpO1xuICAgIH1cbn1cbiIsIjxuZy1jb250ZW50PjwvbmctY29udGVudD5cblxuPCEtLSBBZGQgYSBDbGVhciBCdXR0b24gLS0+XG5AaWYgKChmaWx0ZXJTZXJ2aWNlLmZpbHRlcnMkIHwgYXN5bmMpLmxlbmd0aCA+IDApIHtcbiAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCJcbiAgICBjbGFzcz1cImJ0biBidG4tbGluayBidG4tc2Vjb25kYXJ5IG0tbC14c1wiXG4gICAgW2NsYXNzLnRhYmxlLWZpbHRlci1jbGVhcl09XCJjbGVhckFsbFRlbXBsYXRlXCJcbiAgICBbY2xhc3MuYnRuLWljb25dPVwiIWNsZWFyQWxsVGVtcGxhdGVcIlxuICAgIHRhYmluZGV4PVwiMFwiXG4gICAgW2F0dHIuYXJpYS1sYWJlbF09XCJjbGVhckFyaWFMYWJlbFwiXG4gICAgW3V4VG9vbHRpcF09XCJjbGVhclRvb2x0aXAgfHwgJ0NsZWFyIEFsbCdcIlxuICAgIChjbGljayk9XCJmaWx0ZXJTZXJ2aWNlLnJlbW92ZUFsbCgpXCI+XG4gICAgPG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJjbGVhckFsbFRlbXBsYXRlIHx8IGRlZmF1bHRDbGVhckFsbFRlbXBsYXRlXCI+XG4gICAgPC9uZy1jb250YWluZXI+XG4gIDwvYnV0dG9uPlxufVxuXG48bmctdGVtcGxhdGUgI2RlZmF1bHRDbGVhckFsbFRlbXBsYXRlPlxuICA8c3ZnIGNsYXNzPVwiZmlsdGVyLXNlbGVjdGVkLWNsZWFyLWdyYXBoaWNcIiB3aWR0aD1cIjEwMCVcIiB2aWV3Qm94PVwiMCAwIDE5IDEyXCIgc2hhcGUtcmVuZGVyaW5nPVwiZ2VvbWV0cmljUHJlY2lzaW9uXCI+XG4gICAgPHJlY3QgY2xhc3M9XCJsaWdodC1ncmV5XCIgeD1cIjBcIiB5PVwiMlwiIHdpZHRoPVwiN1wiIGhlaWdodD1cIjJcIj48L3JlY3Q+XG4gICAgPHJlY3QgY2xhc3M9XCJkYXJrLWdyZXlcIiB4PVwiMFwiIHk9XCI1XCIgd2lkdGg9XCI5XCIgaGVpZ2h0PVwiMlwiPjwvcmVjdD5cbiAgICA8cmVjdCBjbGFzcz1cImxpZ2h0LWdyZXlcIiB4PVwiMFwiIHk9XCI4XCIgd2lkdGg9XCI3XCIgaGVpZ2h0PVwiMlwiPjwvcmVjdD5cbiAgICA8cGF0aCBjbGFzcz1cImRhcmstZ3JleVwiIGQ9XCJNOSwxIGgxIGw5LDkgdjEgaC0xIGwtOSwtOSB2LTEgWlwiPjwvcGF0aD5cbiAgICA8cGF0aCBjbGFzcz1cImRhcmstZ3JleVwiIGQ9XCJNOSwxMSB2LTEgbDksLTkgaDEgdjEgbC05LDkgaC0xIFpcIj48L3BhdGg+XG4gIDwvc3ZnPlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==