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.25", ngImport: i0, type: StatusFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", 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.25", 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.25", ngImport: i0, type: StatusFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: StatusFilterModule, imports: [StatusFilterComponent], exports: [StatusFilterComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: StatusFilterModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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
