import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewEncapsulation, Input, Output, Directive, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i3 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion';

class UxToolbarFilterComponent {
    constructor() {
        this.filterValue = '';
        this.e2eAttr = 'ux-a-toolbar-filter';
        this.filter = new EventEmitter();
        this.expandAll = new EventEmitter();
        this.collapseAll = new EventEmitter();
        this._isVisible = false;
        this._isFilterVisible = true;
        this._isToggleVisible = true;
        this._isToggleExpanded = false;
        this._hasLabels = true;
    }
    get isVisible() {
        return this._isVisible;
    }
    set isVisible(value) {
        this._isVisible = coerceBooleanProperty(value);
    }
    get isFilterVisible() {
        return this._isFilterVisible;
    }
    set isFilterVisible(value) {
        this._isFilterVisible = coerceBooleanProperty(value);
    }
    get isToggleVisible() {
        return this._isToggleVisible;
    }
    set isToggleVisible(value) {
        this._isToggleVisible = coerceBooleanProperty(value);
    }
    get isToggleExpanded() {
        return this._isToggleExpanded;
    }
    set isToggleExpanded(value) {
        this._isToggleExpanded = coerceBooleanProperty(value);
    }
    get hasLabels() {
        return this._hasLabels;
    }
    set hasLabels(value) {
        this._hasLabels = coerceBooleanProperty(value);
    }
    ngOnInit() {
        if (this.filterValue !== '' && this.filterValue !== undefined) {
            this.filter.emit(this.filterValue);
        }
    }
    ngOnChanges(c) {
        if (c && c.filterValue && this.filterValue !== undefined) {
            this.filter.emit(this.filterValue);
        }
    }
    onFilter() {
        if (this.filterValue === '') {
            if (!this.isToggleExpanded) {
                this.collapseAll.emit(null);
            }
        }
        this.filter.emit(this.filterValue);
    }
    onExpandAll(event) {
        this.isToggleExpanded = !this.isToggleExpanded;
        this.expandAll.emit(event);
    }
    onCollapseAll(event) {
        this.isToggleExpanded = !this.isToggleExpanded;
        this.collapseAll.emit(event);
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UxToolbarFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UxToolbarFilterComponent, selector: "ux-a-toolbar-filter", inputs: { isVisible: "isVisible", filterLabel: "filterLabel", expandAllLabel: "expandAllLabel", collapseAllLabel: "collapseAllLabel", isFilterVisible: "isFilterVisible", isToggleVisible: "isToggleVisible", isToggleExpanded: "isToggleExpanded", filterValue: "filterValue", hasLabels: "hasLabels", e2eAttr: "e2eAttr" }, outputs: { filter: "filter", expandAll: "expandAll", collapseAll: "collapseAll" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isVisible\" class=\"ux-a-toolbar-filter\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <div class=\"ux-a-toolbar-filter-content\">\n        <div *ngIf=\"isFilterVisible\" class=\"ux-a-toolbar-filter-filter\">\n            <div class=\"ux-input-group\">\n                <span class=\"ux-input-group-prepend\">\n                    <span class=\"ux-input-group-text\">\n                        <span class=\"eui-icon eui-icon-search-m\"></span>\n                    </span>\n                </span>\n                <input\n                    type=\"text\"\n                    class=\"ux-form-control ux-a-toolbar-filter-filter-input\"\n                    placeholder=\"{{ filterLabel ? filterLabel : ('eui.FILTER' | translate) }}\"\n                    [(ngModel)]=\"filterValue\"\n                    (ngModelChange)=\"onFilter($event)\" />\n            </div>\n        </div>\n        <div *ngIf=\"isToggleVisible\" class=\"ux-a-toolbar-filter-trigger-wrapper\">\n            <button\n                *ngIf=\"!isToggleExpanded\"\n                type=\"button\"\n                class=\"ux-a-toolbar-filter-trigger ux-button ux-button--outline ux-button--secondary\"\n                [class.ux-button--icon-only]=\"!hasLabels\"\n                (click)=\"onExpandAll($event)\">\n                <span class=\"eui-icon eui-icon-level-down ux-button__icon\"></span>\n                <span *ngIf=\"hasLabels\">{{ expandAllLabel ? expandAllLabel : ('eui.EXPANDALL' | translate) }}</span>\n            </button>\n            <button\n                *ngIf=\"isToggleExpanded\"\n                type=\"button\"\n                class=\"ux-a-toolbar-filter-trigger ux-button ux-button--outline ux-button--secondary\"\n                [class.ux-button--icon-only]=\"!hasLabels\"\n                (click)=\"onCollapseAll($event)\">\n                <span class=\"eui-icon eui-icon-level-up ux-button__icon\"></span>\n                <span *ngIf=\"hasLabels\">{{ collapseAllLabel ? collapseAllLabel : ('eui.COLLAPSEALL' | translate) }}</span>\n            </button>\n            <ng-content select=\"uxToolbarFilterButtons\"></ng-content>\n        </div>\n\n        <div class=\"ux-a-toolbar-filter-sub-content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [".ux-a-toolbar-filter{display:flex;padding-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.ux-a-toolbar-filter-content{align-items:center;display:flex;flex-grow:1}.ux-a-toolbar-filter-sub-content{margin-left:auto}.ux-a-toolbar-filter-trigger-wrapper{display:flex;flex-shrink:0}.ux-a-toolbar-filter-trigger{margin-right:var(--eui-base-spacing-xs)}.ux-a-toolbar-filter-trigger.ux-button{border-color:var(--eui-base-color-grey-20)!important;box-shadow:none}.eui-t-compact .ux-a-toolbar-filter-trigger.ux-button.ux-button--outline{padding:8px var(--eui-base-spacing-m)}.ux-a-toolbar-filter-trigger .eui-icon{font-size:var(--eui-base-font-size-xl)}.ux-a-toolbar-filter-filter{margin-right:var(--eui-base-spacing-xs);position:relative;width:100%}.ux-a-toolbar-filter-filter .eui-icon{color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size-xl)}.ux-a-toolbar-filter-filter-input{width:100%;width:calc(100% - 36px)!important}.ux-a-toolbar-filter-filter-input-search-icon{position:absolute;right:var(--eui-base-spacing-s);top:var(--eui-base-spacing-s)}.ux-a-toolbar-filter uxtoolbarfilterbuttons .ux-dropdown-button{border:1px solid var(--eui-base-color-grey-20);box-shadow:none}.eui-t-compact .ux-a-toolbar-filter uxtoolbarfilterbuttons .ux-dropdown-button{padding:8px var(--eui-base-spacing-s)}input.ux-form-control,select.ux-form-control{border:1px solid var(--eui-base-color-grey-20);border-radius:var(--eui-base-border-radius);color:var(--eui-base-color-grey-100);font-size:var(--eui-base-font-size);font-style:normal;font-weight:400;height:calc(var(--eui-base-spacing-2xl) + 2px);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}input.ux-form-control:active,input.ux-form-control:focus,select.ux-form-control:active,select.ux-form-control:focus{outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}textarea.ux-form-control{border:1px solid var(--eui-base-color-grey-20);border-radius:var(--eui-base-border-radius);color:var(--eui-base-color-grey-100);font-size:var(--eui-base-font-size);font-style:normal;font-weight:400;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}textarea.ux-form-control:active,textarea.ux-form-control:focus{outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}input::-ms-clear{display:none}.ux-clearable-input-wrapper{display:flex;flex:1 1 0%;position:relative}.ux-clearable-input-wrapper .ux-clearable-input-wrapper__clear{color:var(--eui-base-color-grey-35);cursor:pointer;font-size:var(--eui-base-font-size-xl);font-style:normal;position:absolute;right:var(--eui-base-spacing-xs);top:var(--eui-base-spacing-xs);-webkit-user-select:none;user-select:none;z-index:var(--eui-base-z-index-clearable-icon)}.ux-clearable-input-wrapper .ux-clearable-input-wrapper__clear:hover{color:var(--eui-base-color-danger);opacity:1}.ux-clearable-input-wrapper .ux-clearable-input-wrapper__clear:before{font-family:eui-icons!important}@keyframes borderscale{50%{box-shadow:0 0 0 2px var(--eui-base-color-primary-110)}}select.ux-form-control:not([readonly]){-webkit-appearance:none;appearance:none;background-color:var(--eui-base-color-white);background-image:url('data:image/svg+xml;utf8,<svg viewBox=\"0 0 4 5\" fill=\"black\" xmlns=\"http://www.w3.org/2000/svg\" name=\"arrow-up-down\" aria-label=\"Close menu\" role=\"img\"><path d=\"M2 0L0 2h4zm0 5L0 3h4z\"/></svg>');background-position:calc(100% - var(--eui-base-spacing-s)) center;background-repeat:no-repeat;background-size:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xl)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UxToolbarFilterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ux-a-toolbar-filter', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"isVisible\" class=\"ux-a-toolbar-filter\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <div class=\"ux-a-toolbar-filter-content\">\n        <div *ngIf=\"isFilterVisible\" class=\"ux-a-toolbar-filter-filter\">\n            <div class=\"ux-input-group\">\n                <span class=\"ux-input-group-prepend\">\n                    <span class=\"ux-input-group-text\">\n                        <span class=\"eui-icon eui-icon-search-m\"></span>\n                    </span>\n                </span>\n                <input\n                    type=\"text\"\n                    class=\"ux-form-control ux-a-toolbar-filter-filter-input\"\n                    placeholder=\"{{ filterLabel ? filterLabel : ('eui.FILTER' | translate) }}\"\n                    [(ngModel)]=\"filterValue\"\n                    (ngModelChange)=\"onFilter($event)\" />\n            </div>\n        </div>\n        <div *ngIf=\"isToggleVisible\" class=\"ux-a-toolbar-filter-trigger-wrapper\">\n            <button\n                *ngIf=\"!isToggleExpanded\"\n                type=\"button\"\n                class=\"ux-a-toolbar-filter-trigger ux-button ux-button--outline ux-button--secondary\"\n                [class.ux-button--icon-only]=\"!hasLabels\"\n                (click)=\"onExpandAll($event)\">\n                <span class=\"eui-icon eui-icon-level-down ux-button__icon\"></span>\n                <span *ngIf=\"hasLabels\">{{ expandAllLabel ? expandAllLabel : ('eui.EXPANDALL' | translate) }}</span>\n            </button>\n            <button\n                *ngIf=\"isToggleExpanded\"\n                type=\"button\"\n                class=\"ux-a-toolbar-filter-trigger ux-button ux-button--outline ux-button--secondary\"\n                [class.ux-button--icon-only]=\"!hasLabels\"\n                (click)=\"onCollapseAll($event)\">\n                <span class=\"eui-icon eui-icon-level-up ux-button__icon\"></span>\n                <span *ngIf=\"hasLabels\">{{ collapseAllLabel ? collapseAllLabel : ('eui.COLLAPSEALL' | translate) }}</span>\n            </button>\n            <ng-content select=\"uxToolbarFilterButtons\"></ng-content>\n        </div>\n\n        <div class=\"ux-a-toolbar-filter-sub-content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [".ux-a-toolbar-filter{display:flex;padding-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.ux-a-toolbar-filter-content{align-items:center;display:flex;flex-grow:1}.ux-a-toolbar-filter-sub-content{margin-left:auto}.ux-a-toolbar-filter-trigger-wrapper{display:flex;flex-shrink:0}.ux-a-toolbar-filter-trigger{margin-right:var(--eui-base-spacing-xs)}.ux-a-toolbar-filter-trigger.ux-button{border-color:var(--eui-base-color-grey-20)!important;box-shadow:none}.eui-t-compact .ux-a-toolbar-filter-trigger.ux-button.ux-button--outline{padding:8px var(--eui-base-spacing-m)}.ux-a-toolbar-filter-trigger .eui-icon{font-size:var(--eui-base-font-size-xl)}.ux-a-toolbar-filter-filter{margin-right:var(--eui-base-spacing-xs);position:relative;width:100%}.ux-a-toolbar-filter-filter .eui-icon{color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size-xl)}.ux-a-toolbar-filter-filter-input{width:100%;width:calc(100% - 36px)!important}.ux-a-toolbar-filter-filter-input-search-icon{position:absolute;right:var(--eui-base-spacing-s);top:var(--eui-base-spacing-s)}.ux-a-toolbar-filter uxtoolbarfilterbuttons .ux-dropdown-button{border:1px solid var(--eui-base-color-grey-20);box-shadow:none}.eui-t-compact .ux-a-toolbar-filter uxtoolbarfilterbuttons .ux-dropdown-button{padding:8px var(--eui-base-spacing-s)}input.ux-form-control,select.ux-form-control{border:1px solid var(--eui-base-color-grey-20);border-radius:var(--eui-base-border-radius);color:var(--eui-base-color-grey-100);font-size:var(--eui-base-font-size);font-style:normal;font-weight:400;height:calc(var(--eui-base-spacing-2xl) + 2px);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}input.ux-form-control:active,input.ux-form-control:focus,select.ux-form-control:active,select.ux-form-control:focus{outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}textarea.ux-form-control{border:1px solid var(--eui-base-color-grey-20);border-radius:var(--eui-base-border-radius);color:var(--eui-base-color-grey-100);font-size:var(--eui-base-font-size);font-style:normal;font-weight:400;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}textarea.ux-form-control:active,textarea.ux-form-control:focus{outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}input::-ms-clear{display:none}.ux-clearable-input-wrapper{display:flex;flex:1 1 0%;position:relative}.ux-clearable-input-wrapper .ux-clearable-input-wrapper__clear{color:var(--eui-base-color-grey-35);cursor:pointer;font-size:var(--eui-base-font-size-xl);font-style:normal;position:absolute;right:var(--eui-base-spacing-xs);top:var(--eui-base-spacing-xs);-webkit-user-select:none;user-select:none;z-index:var(--eui-base-z-index-clearable-icon)}.ux-clearable-input-wrapper .ux-clearable-input-wrapper__clear:hover{color:var(--eui-base-color-danger);opacity:1}.ux-clearable-input-wrapper .ux-clearable-input-wrapper__clear:before{font-family:eui-icons!important}@keyframes borderscale{50%{box-shadow:0 0 0 2px var(--eui-base-color-primary-110)}}select.ux-form-control:not([readonly]){-webkit-appearance:none;appearance:none;background-color:var(--eui-base-color-white);background-image:url('data:image/svg+xml;utf8,<svg viewBox=\"0 0 4 5\" fill=\"black\" xmlns=\"http://www.w3.org/2000/svg\" name=\"arrow-up-down\" aria-label=\"Close menu\" role=\"img\"><path d=\"M2 0L0 2h4zm0 5L0 3h4z\"/></svg>');background-position:calc(100% - var(--eui-base-spacing-s)) center;background-repeat:no-repeat;background-size:var(--eui-base-spacing-xs);padding-right:var(--eui-base-spacing-xl)}\n"] }]
        }], propDecorators: { isVisible: [{
                type: Input
            }], filterLabel: [{
                type: Input
            }], expandAllLabel: [{
                type: Input
            }], collapseAllLabel: [{
                type: Input
            }], isFilterVisible: [{
                type: Input
            }], isToggleVisible: [{
                type: Input
            }], isToggleExpanded: [{
                type: Input
            }], filterValue: [{
                type: Input
            }], hasLabels: [{
                type: Input
            }], e2eAttr: [{
                type: Input
            }], filter: [{
                type: Output
            }], expandAll: [{
                type: Output
            }], collapseAll: [{
                type: Output
            }] } });
/* eslint-disable */
class UxToolbarFilterButtonsTagDirective {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UxToolbarFilterButtonsTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: UxToolbarFilterButtonsTagDirective, selector: "uxToolbarFilterButtons", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UxToolbarFilterButtonsTagDirective, decorators: [{
            type: Directive,
            args: [{ selector: 'uxToolbarFilterButtons' }]
        }] });
/* eslint-enable */
class UxToolbarFilterComponentModule {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UxToolbarFilterComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: UxToolbarFilterComponentModule, declarations: [UxToolbarFilterComponent, UxToolbarFilterButtonsTagDirective], imports: [CommonModule, FormsModule, TranslateModule], exports: [UxToolbarFilterComponent, UxToolbarFilterButtonsTagDirective] }); }
    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UxToolbarFilterComponentModule, imports: [CommonModule, FormsModule, TranslateModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UxToolbarFilterComponentModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, FormsModule, TranslateModule],
                    exports: [UxToolbarFilterComponent, UxToolbarFilterButtonsTagDirective],
                    declarations: [UxToolbarFilterComponent, UxToolbarFilterButtonsTagDirective],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { UxToolbarFilterButtonsTagDirective, UxToolbarFilterComponent, UxToolbarFilterComponentModule };
//# sourceMappingURL=eui-deprecated-ux-a-toolbar-filter.mjs.map
