import * as i0 from '@angular/core';
import { input, booleanAttribute, output, Component, model, viewChild, NgModule } from '@angular/core';
import { SiAutoCollapsableListDirective, SiAutoCollapsableListItemDirective, SiAutoCollapsableListOverflowItemDirective, SiAutoCollapsableListAdditionalContentDirective } from '@siemens/element-ng/auto-collapsable-list';
import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
import { NgTemplateOutlet } from '@angular/common';
import { elementCancel } from '@siemens/element-icons';
import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiFilterPillComponent {
    icons = addIcons({ elementCancel });
    /**
     * Settings of the filter pill.
     */
    filter = input.required(...(ngDevMode ? [{ debugName: "filter" }] : []));
    /** @defaultValue false */
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
    /** @defaultValue 0 */
    totalPills = input(0, ...(ngDevMode ? [{ debugName: "totalPills" }] : []));
    /**
     * Output callback event which will provide you the name of the deleted filter
     * pill if a filter was deleted.
     */
    deleteFilters = output();
    deleteClicked() {
        this.deleteFilters.emit(this.filter());
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFilterPillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFilterPillComponent, isStandalone: true, selector: "si-filter-pill", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, totalPills: { classPropertyName: "totalPills", publicName: "totalPills", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteFilters: "deleteFilters" }, ngImport: i0, template: "<div\n  class=\"pill responsive\"\n  [class.pe-0]=\"!disabled()\"\n  [class.disabled]=\"disabled()\"\n  [attr.aria-disabled]=\"disabled()\"\n>\n  <div class=\"wrapper\">\n    @if (filter().title) {\n      <div class=\"name\">{{ filter().title | translate }}</div>\n    }\n    @if (filter().title && filter().description) {\n      <span class=\"name pe-4\">:</span>\n    }\n    <div class=\"value\">{{ filter().description | translate }}</div>\n  </div>\n  @if (!disabled()) {\n    <ng-container *ngTemplateOutlet=\"remove\" />\n  }\n</div>\n<ng-template #remove>\n  <button\n    type=\"button\"\n    class=\"btn-remove btn btn-circle btn-ghost focus-inside ms-0 btn-sm\"\n    role=\"button\"\n    aria-label=\"Remove\"\n    [disabled]=\"disabled()\"\n    (keydown.enter)=\"deleteClicked()\"\n    (click)=\"deleteClicked()\"\n  >\n    <si-icon [icon]=\"icons.elementCancel\" />\n  </button>\n</ng-template>\n", styles: [":host{--filter-pill-background-color: var(--element-base-1)}:host.dark-background{--filter-pill-background-color: var(--element-base-0)}.pill{margin-inline-start:8px;background:var(--filter-pill-background-color)}.wrapper{display:flex;flex-direction:column}.pill.responsive .wrapper{flex-direction:row}.pill.responsive .name{font-weight:600;white-space:nowrap}.pill.responsive .value{color:var(--element-text-primary);white-space:nowrap;margin-inline-end:4px}.pill.responsive.disabled,.pill.responsive.disabled .value{padding-inline-end:2px;color:var(--element-text-disabled)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFilterPillComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-filter-pill', imports: [NgTemplateOutlet, SiIconComponent, SiTranslatePipe], template: "<div\n  class=\"pill responsive\"\n  [class.pe-0]=\"!disabled()\"\n  [class.disabled]=\"disabled()\"\n  [attr.aria-disabled]=\"disabled()\"\n>\n  <div class=\"wrapper\">\n    @if (filter().title) {\n      <div class=\"name\">{{ filter().title | translate }}</div>\n    }\n    @if (filter().title && filter().description) {\n      <span class=\"name pe-4\">:</span>\n    }\n    <div class=\"value\">{{ filter().description | translate }}</div>\n  </div>\n  @if (!disabled()) {\n    <ng-container *ngTemplateOutlet=\"remove\" />\n  }\n</div>\n<ng-template #remove>\n  <button\n    type=\"button\"\n    class=\"btn-remove btn btn-circle btn-ghost focus-inside ms-0 btn-sm\"\n    role=\"button\"\n    aria-label=\"Remove\"\n    [disabled]=\"disabled()\"\n    (keydown.enter)=\"deleteClicked()\"\n    (click)=\"deleteClicked()\"\n  >\n    <si-icon [icon]=\"icons.elementCancel\" />\n  </button>\n</ng-template>\n", styles: [":host{--filter-pill-background-color: var(--element-base-1)}:host.dark-background{--filter-pill-background-color: var(--element-base-0)}.pill{margin-inline-start:8px;background:var(--filter-pill-background-color)}.wrapper{display:flex;flex-direction:column}.pill.responsive .wrapper{flex-direction:row}.pill.responsive .name{font-weight:600;white-space:nowrap}.pill.responsive .value{color:var(--element-text-primary);white-space:nowrap;margin-inline-end:4px}.pill.responsive.disabled,.pill.responsive.disabled .value{padding-inline-end:2px;color:var(--element-text-disabled)}\n"] }]
        }], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], totalPills: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPills", required: false }] }], deleteFilters: [{ type: i0.Output, args: ["deleteFilters"] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiFilterBarComponent {
    /**
     * Custom text if no filters are selected.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_FILTER_BAR.NO_FILTERS:No filters applied`)
     * ```
     */
    filterDefaultText = input(t(() => $localize `:@@SI_FILTER_BAR.NO_FILTERS:No filters applied`), ...(ngDevMode ? [{ debugName: "filterDefaultText" }] : []));
    /**
     * Array of filter items to show
     *
     * @defaultValue []
     */
    filters = model([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
    /**
     * Text for reset button
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_FILTER_BAR.RESET_FILTERS:Reset filters`)
     * ```
     */
    resetText = input(t(() => $localize `:@@SI_FILTER_BAR.RESET_FILTERS:Reset filters`), ...(ngDevMode ? [{ debugName: "resetText" }] : []));
    /**
     * Set false to hide reset filters button
     *
     * @defaultValue true
     */
    allowReset = input(true, { ...(ngDevMode ? { debugName: "allowReset" } : {}), transform: booleanAttribute });
    /**
     * Color to use for component background
     *
     * @defaultValue 'base-1'
     */
    colorVariant = input('base-1', ...(ngDevMode ? [{ debugName: "colorVariant" }] : []));
    /**
     * Set to true to disable component
     *
     * @defaultValue false
     */
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
    /**
     * Custom text for the collapsed filters.
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_FILTER_BAR.COLLAPSED_FILTERS_DESCRIPTION:+ {{count}} filters`)
     * ```
     */
    collapsedFiltersDescription = input(t(() => $localize `:@@SI_FILTER_BAR.COLLAPSED_FILTERS_DESCRIPTION:+ {{count}} filters`), ...(ngDevMode ? [{ debugName: "collapsedFiltersDescription" }] : []));
    /**
     * Output callback to be executed when the reset filter is clicked
     */
    resetFilters = output();
    collapsableListDirective = viewChild.required(SiAutoCollapsableListDirective);
    deleteFilters(deletedPill) {
        this.filters.set(this.filters().filter(filter => filter !== deletedPill));
    }
    onResetFilters() {
        this.filters.set([]);
        this.resetFilters.emit();
    }
    deleteOverflowFilter() {
        this.filters.update(filters => filters.slice(0, this.collapsableListDirective()
            .items()
            .findIndex(item => !item.isVisible())));
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFilterBarComponent, isStandalone: true, selector: "si-filter-bar", inputs: { filterDefaultText: { classPropertyName: "filterDefaultText", publicName: "filterDefaultText", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, resetText: { classPropertyName: "resetText", publicName: "resetText", isSignal: true, isRequired: false, transformFunction: null }, allowReset: { classPropertyName: "allowReset", publicName: "allowReset", isSignal: true, isRequired: false, transformFunction: null }, colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, collapsedFiltersDescription: { classPropertyName: "collapsedFiltersDescription", publicName: "collapsedFiltersDescription", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", resetFilters: "resetFilters" }, host: { properties: { "class.reset": "allowReset()" } }, viewQueries: [{ propertyName: "collapsableListDirective", first: true, predicate: SiAutoCollapsableListDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"responsive py-2\" siAutoCollapsableList>\n  @for (filter of filters(); track $index) {\n    <div class=\"pill-wrapper\" siAutoCollapsableListItem>\n      <si-filter-pill\n        [class.dark-background]=\"colorVariant() === 'base-0'\"\n        [totalPills]=\"$count\"\n        [filter]=\"filter\"\n        [disabled]=\"disabled()\"\n        (deleteFilters)=\"deleteFilters($event)\"\n      />\n    </div>\n  } @empty {\n    <span class=\"list-text\">{{ filterDefaultText() | translate }}</span>\n  }\n  <si-filter-pill\n    #overflowItem=\"siAutoCollapsableListOverflowItem\"\n    siAutoCollapsableListOverflowItem\n    [class.dark-background]=\"colorVariant() === 'base-0'\"\n    [disabled]=\"disabled()\"\n    [filter]=\"{\n      description:\n        collapsedFiltersDescription()\n        | translate\n          : {\n              count: overflowItem.hiddenItemCount\n            },\n      title: '',\n      filterName: ''\n    }\"\n    (deleteFilters)=\"deleteOverflowFilter()\"\n  />\n  @if (allowReset() && this.filters().length) {\n    <button\n      siAutoCollapsableListAdditionalContent\n      type=\"button\"\n      class=\"text-nowrap btn btn-tertiary\"\n      [disabled]=\"disabled()\"\n      (click)=\"onResetFilters()\"\n    >\n      {{ resetText() | translate }}\n    </button>\n  }\n</div>\n", styles: [":host.reset .responsive .list-text{line-height:calc(1rem + 16px)}.list-text{line-height:24px}.pill-wrapper{display:inline-block;vertical-align:middle}.responsive{overflow:hidden;display:flex;align-items:center;gap:8px}.responsive .list-text{color:var(--element-text-disabled)}.responsive .invisible{position:absolute}.responsive si-filter-pill::ng-deep .pill{margin-inline-start:0}\n"], dependencies: [{ kind: "directive", type: SiAutoCollapsableListDirective, selector: "[siAutoCollapsableList]", inputs: ["siAutoCollapsableList", "gap", "siAutoCollapsableListContainerElement"], exportAs: ["siAutoCollapsableList"] }, { kind: "directive", type: SiAutoCollapsableListItemDirective, selector: "[siAutoCollapsableListItem]", inputs: ["forceHide"], exportAs: ["siAutoCollapsableListItem"] }, { kind: "directive", type: SiAutoCollapsableListOverflowItemDirective, selector: "[siAutoCollapsableListOverflowItem]", exportAs: ["siAutoCollapsableListOverflowItem"] }, { kind: "directive", type: SiAutoCollapsableListAdditionalContentDirective, selector: "[siAutoCollapsableListAdditionalContent]" }, { kind: "component", type: SiFilterPillComponent, selector: "si-filter-pill", inputs: ["filter", "disabled", "totalPills"], outputs: ["deleteFilters"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFilterBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-filter-bar', imports: [
                        SiAutoCollapsableListDirective,
                        SiAutoCollapsableListItemDirective,
                        SiAutoCollapsableListOverflowItemDirective,
                        SiAutoCollapsableListAdditionalContentDirective,
                        SiFilterPillComponent,
                        SiTranslatePipe
                    ], host: {
                        '[class.reset]': 'allowReset()'
                    }, template: "<div class=\"responsive py-2\" siAutoCollapsableList>\n  @for (filter of filters(); track $index) {\n    <div class=\"pill-wrapper\" siAutoCollapsableListItem>\n      <si-filter-pill\n        [class.dark-background]=\"colorVariant() === 'base-0'\"\n        [totalPills]=\"$count\"\n        [filter]=\"filter\"\n        [disabled]=\"disabled()\"\n        (deleteFilters)=\"deleteFilters($event)\"\n      />\n    </div>\n  } @empty {\n    <span class=\"list-text\">{{ filterDefaultText() | translate }}</span>\n  }\n  <si-filter-pill\n    #overflowItem=\"siAutoCollapsableListOverflowItem\"\n    siAutoCollapsableListOverflowItem\n    [class.dark-background]=\"colorVariant() === 'base-0'\"\n    [disabled]=\"disabled()\"\n    [filter]=\"{\n      description:\n        collapsedFiltersDescription()\n        | translate\n          : {\n              count: overflowItem.hiddenItemCount\n            },\n      title: '',\n      filterName: ''\n    }\"\n    (deleteFilters)=\"deleteOverflowFilter()\"\n  />\n  @if (allowReset() && this.filters().length) {\n    <button\n      siAutoCollapsableListAdditionalContent\n      type=\"button\"\n      class=\"text-nowrap btn btn-tertiary\"\n      [disabled]=\"disabled()\"\n      (click)=\"onResetFilters()\"\n    >\n      {{ resetText() | translate }}\n    </button>\n  }\n</div>\n", styles: [":host.reset .responsive .list-text{line-height:calc(1rem + 16px)}.list-text{line-height:24px}.pill-wrapper{display:inline-block;vertical-align:middle}.responsive{overflow:hidden;display:flex;align-items:center;gap:8px}.responsive .list-text{color:var(--element-text-disabled)}.responsive .invisible{position:absolute}.responsive si-filter-pill::ng-deep .pill{margin-inline-start:0}\n"] }]
        }], propDecorators: { filterDefaultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterDefaultText", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], resetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetText", required: false }] }], allowReset: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowReset", required: false }] }], colorVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorVariant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], collapsedFiltersDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedFiltersDescription", required: false }] }], resetFilters: [{ type: i0.Output, args: ["resetFilters"] }], collapsableListDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiAutoCollapsableListDirective), { isSignal: true }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiFilterBarModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFilterBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiFilterBarModule, imports: [SiFilterBarComponent], exports: [SiFilterBarComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFilterBarModule, imports: [SiFilterBarComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFilterBarModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [SiFilterBarComponent],
                    exports: [SiFilterBarComponent]
                }]
        }] });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */

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

export { SiFilterBarComponent, SiFilterBarModule, SiFilterPillComponent };
//# sourceMappingURL=siemens-element-ng-filter-bar.mjs.map
