@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
157 lines (152 loc) • 12.1 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, Output, HostBinding, Input, Component, NgModule } from '@angular/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { IconDirective, ProductExperienceDirective, C8yTranslatePipe, PRODUCT_EXPERIENCE_EVENT_SOURCE } from '@c8y/ngx-components';
import { ACTIONS_OPERATIONS } from '@c8y/ngx-components/operations/product-experience';
import { BsDropdownDirective, BsDropdownToggleDirective, BsDropdownMenuDirective } from 'ngx-bootstrap/dropdown';
import { NgFor, NgIf, NgClass } from '@angular/common';
class StatusFilterComponent {
constructor() {
this.ACTIONS = ACTIONS_OPERATIONS;
this.statusOptions = [];
this.onFilterChanged = new EventEmitter();
this.isAllButtonSelected = true;
}
/** List of filter options to be displayed */
set options(options) {
this.statusOptions = (Object.values(options) || []).map(option => ({
selected: false,
option
}));
}
/**
* Allows multiple options to be active simultaneosly.
*/
set _multiple(multiple) {
this.multiple = coerceBooleanProperty(multiple);
}
/** Display the filter as a small button group */
set _small(small) {
this.small = coerceBooleanProperty(small);
}
get displaySmall() {
return this.small;
}
changeFilter(option) {
this.isAllButtonSelected = false;
let emitNeeded = false;
if (this.multiple) {
option.selected = !option.selected;
emitNeeded = true;
}
else if (!option.selected) {
option.selected = true;
this.statusOptions.filter(op => op !== option).forEach(op => (op.selected = false));
emitNeeded = true;
}
if (emitNeeded) {
this.emitSelectedOptions();
}
}
removeFilter() {
this.isAllButtonSelected = true;
this.statusOptions.forEach(op => (op.selected = false));
this.emitSelectedOptions();
}
/**
* Allows the filter to be initalliy displayed with some preset filters.
*
* @param filters An `StatusOption` array defining filter options to be preset.
* @param emit (optional) If `true` component will emit `onFilterChanged` event.
*/
preset(filters, emit = true) {
let firstSelected = false;
this.statusOptions.forEach(option => (option.selected = false));
this.statusOptions
.filter(option => (filters || []).map(o => o.label).includes(option.option.label))
.filter(() => {
// only first option passed will be set in single selection mode
const include = this.multiple || !firstSelected;
if (include) {
firstSelected = true;
}
return include;
})
.forEach(option => (option.selected = true));
this.isAllButtonSelected = !(filters && filters.length);
if (emit) {
this.emitSelectedOptions();
}
}
reset() {
this.removeFilter();
}
activeFilters() {
return this.statusOptions.filter(option => option.selected).map(option => option.option);
}
isFilterApplied() {
return this.statusOptions.some(option => option.selected);
}
emitSelectedOptions() {
this.onFilterChanged.emit(this.statusOptions.filter(option => option.selected).map(option => option.option));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: StatusFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: StatusFilterComponent, isStandalone: true, selector: "c8y-status-filter", inputs: { options: "options", _multiple: ["multiple", "_multiple"], _small: ["small", "_small"] }, outputs: { onFilterChanged: "onFilterChanged" }, host: { properties: { "class.btn-group-sm": "this.displaySmall" } }, providers: [
{
provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
useExisting: forwardRef(() => StatusFilterComponent)
}
], ngImport: i0, template: "<div dropdown placement=\"bottom left\" class=\"dropdown c8y-child-assets-selector\">\n <button\n class=\"btn dropdown-toggle d-flex a-i-center c8y-dropdown\"\n type=\"button\"\n title=\"{{ 'Status filter' | translate }}\"\n dropdownToggle\n >\n <span *ngFor=\"let option of statusOptions\" class=\"d-contents\">\n <span class=\"text-truncate\" *ngIf=\"option.selected\">\n <i [c8yIcon]=\"option.option.icon\" [ngClass]=\"option.option.styleClass\"></i>\n <span class=\"m-l-4\">{{ option.option.label | translate }}</span>\n </span>\n </span>\n <span class=\"text-truncate\" *ngIf=\"isAllButtonSelected\">\n <i c8yIcon=\"c8y-energy\" class=\"m-r-4 text-info\"></i>\n {{ 'All statuses' | translate }}\n </span>\n </button>\n <ul\n id=\"dropdown-status-filter\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"status-filter\"\n >\n <li *ngFor=\"let option of statusOptions\" [ngClass]=\"{ active: option.selected }\">\n <button\n type=\"button\"\n [title]=\"option.option.label | translate\"\n (click)=\"changeFilter(option)\"\n c8yProductExperience\n inherit\n [actionData]=\"{\n action: ACTIONS.FILTER,\n filterBy: 'status',\n filterValue: option.option.label\n }\"\n >\n <i [c8yIcon]=\"option.option.icon\" [ngClass]=\"option.option.styleClass\"></i>\n <span class=\"m-l-4\">{{ option.option.label | translate }}</span>\n </button>\n </li>\n <li [ngClass]=\"{ active: isAllButtonSelected }\">\n <button\n type=\"button\"\n title=\"{{ 'All statuses' | translate }}\"\n (click)=\"removeFilter()\"\n c8yProductExperience\n inherit\n [actionData]=\"{\n action: ACTIONS.FILTER,\n filterBy: 'status'\n }\"\n >\n <i c8yIcon=\"c8y-energy\" class=\"m-r-4 text-info\"></i>\n {{ 'All statuses' | translate }}\n </button>\n </li>\n </ul>\n</div>\n", dependencies: [{ kind: "directive", type: BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: StatusFilterComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-status-filter', providers: [
{
provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
useExisting: forwardRef(() => StatusFilterComponent)
}
], imports: [
BsDropdownDirective,
BsDropdownToggleDirective,
NgFor,
NgIf,
IconDirective,
NgClass,
BsDropdownMenuDirective,
ProductExperienceDirective,
C8yTranslatePipe
], template: "<div dropdown placement=\"bottom left\" class=\"dropdown c8y-child-assets-selector\">\n <button\n class=\"btn dropdown-toggle d-flex a-i-center c8y-dropdown\"\n type=\"button\"\n title=\"{{ 'Status filter' | translate }}\"\n dropdownToggle\n >\n <span *ngFor=\"let option of statusOptions\" class=\"d-contents\">\n <span class=\"text-truncate\" *ngIf=\"option.selected\">\n <i [c8yIcon]=\"option.option.icon\" [ngClass]=\"option.option.styleClass\"></i>\n <span class=\"m-l-4\">{{ option.option.label | translate }}</span>\n </span>\n </span>\n <span class=\"text-truncate\" *ngIf=\"isAllButtonSelected\">\n <i c8yIcon=\"c8y-energy\" class=\"m-r-4 text-info\"></i>\n {{ 'All statuses' | translate }}\n </span>\n </button>\n <ul\n id=\"dropdown-status-filter\"\n *dropdownMenu\n class=\"dropdown-menu\"\n role=\"menu\"\n aria-labelledby=\"status-filter\"\n >\n <li *ngFor=\"let option of statusOptions\" [ngClass]=\"{ active: option.selected }\">\n <button\n type=\"button\"\n [title]=\"option.option.label | translate\"\n (click)=\"changeFilter(option)\"\n c8yProductExperience\n inherit\n [actionData]=\"{\n action: ACTIONS.FILTER,\n filterBy: 'status',\n filterValue: option.option.label\n }\"\n >\n <i [c8yIcon]=\"option.option.icon\" [ngClass]=\"option.option.styleClass\"></i>\n <span class=\"m-l-4\">{{ option.option.label | translate }}</span>\n </button>\n </li>\n <li [ngClass]=\"{ active: isAllButtonSelected }\">\n <button\n type=\"button\"\n title=\"{{ 'All statuses' | translate }}\"\n (click)=\"removeFilter()\"\n c8yProductExperience\n inherit\n [actionData]=\"{\n action: ACTIONS.FILTER,\n filterBy: 'status'\n }\"\n >\n <i c8yIcon=\"c8y-energy\" class=\"m-r-4 text-info\"></i>\n {{ 'All statuses' | translate }}\n </button>\n </li>\n </ul>\n</div>\n" }]
}], propDecorators: { options: [{
type: Input
}], _multiple: [{
type: Input,
args: ['multiple']
}], _small: [{
type: Input,
args: ['small']
}], displaySmall: [{
type: HostBinding,
args: ['class.btn-group-sm']
}], onFilterChanged: [{
type: Output
}] } });
/**
* This module provides a component for selecting status filter.
*/
class StatusFilterModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: StatusFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: StatusFilterModule, imports: [StatusFilterComponent], exports: [StatusFilterComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: StatusFilterModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: StatusFilterModule, decorators: [{
type: NgModule,
args: [{
imports: [StatusFilterComponent],
exports: [StatusFilterComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { StatusFilterComponent, StatusFilterModule };
//# sourceMappingURL=c8y-ngx-components-operations-status-filter.mjs.map