@tapsellorg/angular-material-library/fesm2022/tapsellorg-angular-material-library-src-lib-filter-chips.mjs

Angular library for Tapsell

import * as i0 from '@angular/core';
import { input, Directive, InjectionToken, signal, TemplateRef, ViewChild, ContentChild, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, Injectable, model, output, ContentChildren, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { startWith, map, distinctUntilChanged, takeUntil, debounceTime } from 'rxjs/operators';
import * as i5 from '@angular/forms';
import { UntypedFormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
import { Subject, ReplaySubject, merge } from 'rxjs';
import * as i1$1 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i4 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i6 from '@angular/material/autocomplete';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import * as i2$1 from '@angular/material/menu';
import { MatMenuModule } from '@angular/material/menu';
import * as i3$1 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i2 from '@angular/material/core';
import { MatRippleModule } from '@angular/material/core';
import * as i3 from '@angular/cdk/overlay';
import { OverlayModule } from '@angular/cdk/overlay';
import * as i6$2 from '@tapsellorg/angular-material-library/src/lib/common';
import { withDestroy, ObjectUtils, PghArrayJoinModule } from '@tapsellorg/angular-material-library/src/lib/common';
import * as i4$1 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i6$1 from '@tapsellorg/angular-material-library/src/lib/translate';
import { TranslateModule } from '@tapsellorg/angular-material-library/src/lib/translate';
import * as i3$2 from '@angular/material/select';
import { MatSelectModule } from '@angular/material/select';
import * as i5$1 from '@tapsellorg/angular-material-library/src/lib/select-all-options';
import { PghSelectAllOptionsModule } from '@tapsellorg/angular-material-library/src/lib/select-all-options';

class PghFilterChipsMarkerDirective {
    constructor(template) {
        this.template = template;
        this.filterField = input.required({
            alias: 'pghFilterField',
        });
        this.initValue = input(undefined, {
            alias: 'pghFilterFieldInitValue',
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipsMarkerDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.13", type: PghFilterChipsMarkerDirective, isStandalone: false, selector: "[pghFilterField]", inputs: { filterField: { classPropertyName: "filterField", publicName: "pghFilterField", isSignal: true, isRequired: true, transformFunction: null }, initValue: { classPropertyName: "initValue", publicName: "pghFilterFieldInitValue", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["pghFilterField"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipsMarkerDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[pghFilterField]',
                    exportAs: 'pghFilterField',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: i0.TemplateRef }] });

const PghFilterChipItemsConnector = new InjectionToken('This observable allows filter chip items to connect themselves to their parent filter chips container', { factory: () => ({ directiveConnector$: new Subject() }) });
function filterMarkerConnectorFactory() {
    return { directiveConnector$: new Subject() };
}
const PghFilterChipItemsConnectorProvider = {
    provide: PghFilterChipItemsConnector,
    useFactory: filterMarkerConnectorFactory,
};

class PghFilterChipAutoCompleteComponent {
    constructor(filterChipsMarkerConnector) {
        this.filterChipsMarkerConnector = filterChipsMarkerConnector;
        this.filter = input.required();
        this.initialValue = input();
        this.options = input([]);
        this.isLoadingOptions = input(false);
        this.filteredOptions = signal([]);
    }
    ngAfterViewInit() {
        if (this.filterMarker) {
            this.filterChipsMarkerConnector.directiveConnector$.next(this.filterMarker);
        }
    }
    ngOnChanges(changes) {
        this.filter().filterControl = this.filter().filterControl ?? new UntypedFormControl();
        if (changes.filter) {
            this.filteredOptions.set(this.filter().filterControl.valueChanges.pipe(startWith(''), map(value => this._filter(value))));
        }
        if (changes.options) {
            const filterControlValue = this.filter().filterControl.value;
            this.filteredOptions.set(this._filter(filterControlValue));
        }
    }
    _filter(value) {
        return this.options()?.filter(option => {
            if (option.searchList) {
                return option.searchList.some(item => item.includes(value)) || option.name.includes(value);
            }
            return option.name.includes(value);
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipAutoCompleteComponent, deps: [{ token: PghFilterChipItemsConnector }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: PghFilterChipAutoCompleteComponent, isStandalone: false, selector: "pgh-filter-chip-auto-complete", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, isLoadingOptions: { classPropertyName: "isLoadingOptions", publicName: "isLoadingOptions", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "filterMarker", first: true, predicate: PghFilterChipsMarkerDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form\n  *pghFilterField=\"\n    filter();\n    initValue: initialValue();\n    let closeOverlay = closeOverlay;\n    let setValue = setValue\n  \"\n  (ngSubmit)=\"closeOverlay()\"\n>\n  <mat-form-field class=\"pgh-mat-form-field-no-space-bottom\">\n    <mat-label>{{ filter().name }}</mat-label>\n    <input\n      matInput\n      type=\"search\"\n      [formControl]=\"$any(filter().filterControl)\"\n      [matAutocomplete]=\"auto\"\n    />\n    <mat-autocomplete #auto=\"matAutocomplete\">\n      @if (isLoadingOptions()) {\n      <mat-option>\u062F\u0631 \u062D\u0627\u0644 \u062C\u0633\u062A\u200C\u0648\u200C\u062C\u0648...</mat-option>\n      } @for (item of filteredOptions(); track item) {\n      <mat-option\n        [value]=\"item.value\"\n        (click)=\"closeOverlay(); setValue(item.value, { displayedName: item.name })\"\n      >\n        @if (templateRef) {\n        <ng-template\n          [ngTemplateOutlet]=\"templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\n        ></ng-template>\n        } @else {\n        <span>{{ item.name }}</span>\n        }\n      </mat-option>\n      }\n    </mat-autocomplete>\n  </mat-form-field>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PghFilterChipsMarkerDirective, selector: "[pghFilterField]", inputs: ["pghFilterField", "pghFilterFieldInitValue"], exportAs: ["pghFilterField"] }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipAutoCompleteComponent, decorators: [{
            type: Component,
            args: [{ selector: 'pgh-filter-chip-auto-complete', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<form\n  *pghFilterField=\"\n    filter();\n    initValue: initialValue();\n    let closeOverlay = closeOverlay;\n    let setValue = setValue\n  \"\n  (ngSubmit)=\"closeOverlay()\"\n>\n  <mat-form-field class=\"pgh-mat-form-field-no-space-bottom\">\n    <mat-label>{{ filter().name }}</mat-label>\n    <input\n      matInput\n      type=\"search\"\n      [formControl]=\"$any(filter().filterControl)\"\n      [matAutocomplete]=\"auto\"\n    />\n    <mat-autocomplete #auto=\"matAutocomplete\">\n      @if (isLoadingOptions()) {\n      <mat-option>\u062F\u0631 \u062D\u0627\u0644 \u062C\u0633\u062A\u200C\u0648\u200C\u062C\u0648...</mat-option>\n      } @for (item of filteredOptions(); track item) {\n      <mat-option\n        [value]=\"item.value\"\n        (click)=\"closeOverlay(); setValue(item.value, { displayedName: item.name })\"\n      >\n        @if (templateRef) {\n        <ng-template\n          [ngTemplateOutlet]=\"templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\n        ></ng-template>\n        } @else {\n        <span>{{ item.name }}</span>\n        }\n      </mat-option>\n      }\n    </mat-autocomplete>\n  </mat-form-field>\n</form>\n" }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [PghFilterChipItemsConnector]
                }] }], propDecorators: { templateRef: [{
                type: ContentChild,
                args: [TemplateRef]
            }], filterMarker: [{
                type: ViewChild,
                args: [PghFilterChipsMarkerDirective]
            }] } });

class PghFilterChipsItem {
    get isActive() {
        return this._isActive;
    }
    set isActive(value) {
        if (value === this._isActive)
            return;
        if (!value && this.config.alwaysActive)
            return;
        this._isActive = value;
        if (!value) {
            this.isOverlayOpen = false;
        }
    }
    get isOverlayOpen() {
        return this._isOverlayOpen;
    }
    set isOverlayOpen(value) {
        if (value === this._isOverlayOpen)
            return;
        this._isOverlayOpen = value;
        if (value) {
            this.isActive = true;
        }
    }
    constructor(markerDirective, config, initValue) {
        this.markerDirective = markerDirective;
        this.config = config;
        this._value$ = new ReplaySubject(1);
        this._isActive = false;
        this._isOverlayOpen = false;
        /**
         * Used for submit
         * When a new value is emitted to this observable, The filters are submitted
         */
        this.value$ = this._value$.pipe(distinctUntilChanged());
        this.valueSetter = (value, { closeOverlay, displayedName } = {}) => {
            this.value = value === '' ? undefined : value;
            this.valueDisplayedName = displayedName;
            if (this.filterControl) {
                this.filterControl.setValue(value);
            }
            this.emitUpdatedValue();
            if (closeOverlay === true || this.updateOn === 'closeOverlay') {
                this.closeOverlay();
            }
        };
        this.closeOverlay = () => {
            setTimeout(() => {
                this.isOverlayOpen = false;
                if (this.updateOn === 'closeOverlay') {
                    this.emitUpdatedValue();
                }
            });
        };
        this.markerDirective = markerDirective;
        this.filterControl = config.filterControl;
        this.updateOn = config.updateOn ?? 'closeOverlay';
        this.config.debounceValueChangeDelay = this.config.debounceValueChangeDelay ?? 500;
        this.isActive = !!config.alwaysActive;
        if (Array.isArray(initValue)) {
            if (initValue.length > 0) {
                this.setMultipleValue(initValue);
            }
        }
        else {
            if (initValue?.value) {
                this.setSingleValue(initValue);
            }
        }
        this.initFilterControlSetups();
    }
    setSingleValue(initValue) {
        setTimeout(() => {
            if (this.filterControl) {
                this.filterControl.setValue(initValue.value);
            }
            else {
                this.valueSetter(initValue.value, { displayedName: initValue.name });
            }
            this.isActive = true;
        });
    }
    setMultipleValue(initValue) {
        setTimeout(() => {
            if (this.filterControl) {
                this.filterControl.setValue(initValue.map(val => val.value));
            }
            else {
                this.valueSetter(initValue.map(val => val.value), { displayedName: initValue.map(val => val.name).join(',') });
            }
            this.isActive = true;
        });
    }
    initFilterControlSetups() {
        if (!this.filterControl)
            return;
        this.filterControl.valueChanges.subscribe(value => {
            this.value = value;
            if (this.updateOn === 'valueChange') {
                this.emitUpdatedValue();
            }
        });
    }
    emitUpdatedValue() {
        this._value$.next(this.value);
    }
    onDestroy() {
        this._value$.complete();
    }
    clear() {
        this.isActive = false;
        this.isOverlayOpen = false;
    }
    openOverlay() {
        this.isActive = true;
        this.isOverlayOpen = true;
    }
}

class PghFilterChipsPersistService {
    constructor() { }
    persist(persistId, filterValues) {
        localStorage.setItem(this.getKey(persistId), JSON.stringify(filterValues));
    }
    getKey(persistId) {
        return `pghFilter_${persistId}`;
    }
    getPersistData(persistId) {
        const data = localStorage.getItem(this.getKey(persistId));
        if (!data)
            return;
        try {
            return JSON.parse(data);
        }
        catch (e) {
            return;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipsPersistService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipsPersistService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipsPersistService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root',
                }]
        }], ctorParameters: () => [] });

class PghFilterChipItemComponent extends withDestroy() {
    constructor() {
        super();
        this.filterItem = model.required();
        this.remove = output();
        this.panelClasses = signal([]);
    }
    openOverlay() {
        this.filterItem().isOverlayOpen = true;
    }
    onRemoveClick() {
        this.filterItem().valueSetter(undefined);
        if (!this.filterItem().config.alwaysActive) {
            this.filterItem().clear();
        }
    }
    ngOnChanges(changes) {
        if (changes.filterItem) {
            this.handleFilterItemChanges();
        }
    }
    onClickOutside() {
        this.filterItem().closeOverlay();
    }
    handleFilterItemChanges() {
        this.panelClasses.set([
            'pgh-filter-chip-overlay',
            ...(this.filterItem().config.panelClass || '').split(' '),
        ]);
    }
    hasValue() {
        return (this.filterItem().valueDisplayedName != null ||
            (this.filterItem().value != null && this.filterItem().value !== ''));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: PghFilterChipItemComponent, isStandalone: false, selector: "pgh-filter-chip-item", inputs: { filterItem: { classPropertyName: "filterItem", publicName: "filterItem", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterItem: "filterItemChange", remove: "remove" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"pgh-filter-chip-item\"\n  matRipple\n  cdkOverlayOrigin\n  #chipOverlayOrigin=\"cdkOverlayOrigin\"\n  (click)=\"openOverlay()\"\n>\n  <div class=\"d-flex align-items-center\">\n    @if (!filterItem().config.chipTemplate) {\n    <div class=\"pgh-filter-chip-preview\">\n      <span class=\"pgh-filter-chip-name\">{{ filterItem().config.name }}</span>\n      <span>:</span>\n      @if (hasValue()) {\n      <span class=\"pgh-filter-chip-value\">\n        {{ filterItem().valueDisplayedName || filterItem().value }}\n      </span>\n      } @if (filterItem().config.alwaysActive && !hasValue()) {\n      <span class=\"pgh-filter-chip-placeholder\">- \u0647\u06CC\u0686\u06CC -</span>\n      }\n    </div>\n    } @if (filterItem().config.chipTemplate) {\n    <ng-container\n      *ngTemplateOutlet=\"filterItem().config.chipTemplate!; context: { value: filterItem().value }\"\n    ></ng-container>\n    } @if ( filterItem().config.noClearButton !== true && !(filterItem().config.alwaysActive &&\n    !hasValue()) ) {\n    <div\n      class=\"pgh-filter-remove text-danger\"\n      (click)=\"onRemoveClick(); $event.stopPropagation()\"\n      matRipple\n    >\n      <mat-icon svgIcon=\"clear\" class=\"square-16\"></mat-icon>\n    </div>\n    }\n  </div>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"chipOverlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"filterItem().isOverlayOpen\"\n  [cdkConnectedOverlayPanelClass]=\"panelClasses()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n  (backdropClick)=\"onClickOutside()\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      filterItem().markerDirective.template;\n      context: {\n        name: filterItem().config.name,\n        field: filterItem().config.field,\n        value: filterItem().value,\n        setValue: filterItem().valueSetter,\n        closeOverlay: filterItem().closeOverlay\n      }\n    \"\n  ></ng-container>\n</ng-template>\n", styles: [".pgh-filter-chip-item{border-radius:25px;padding-block:.25rem;padding-inline:.75rem;font-size:.875rem;min-height:2.125rem;line-height:1.625rem;cursor:pointer;border:1px solid var(--light-border-color)}[dark=true] .pgh-filter-chip-item{background:var(--eee)}.pgh-filter-chip-item:hover{box-shadow:0 2px 6px #0001}.pgh-filter-remove{width:2.25rem;height:2.25rem;margin-block:-.375rem;margin-inline:-.125rem -.75rem;display:inline-flex;justify-content:center;align-items:center;border-radius:25px}.pgh-filter-chip-preview{display:flex;align-items:center}.pgh-filter-chip-value{margin-inline-start:.5rem}.pgh-filter-chip-overlay{background:var(--fff);border-radius:var(--box-radius);padding:.75rem;box-shadow:var(--shadow)}.pgh-filter-chip-placeholder{color:var(--777);margin-inline-start:.375rem;font-style:italic;font-size:.75rem}.pgh-filter-chip-name{color:var(--666);white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'pgh-filter-chip-item', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\n  class=\"pgh-filter-chip-item\"\n  matRipple\n  cdkOverlayOrigin\n  #chipOverlayOrigin=\"cdkOverlayOrigin\"\n  (click)=\"openOverlay()\"\n>\n  <div class=\"d-flex align-items-center\">\n    @if (!filterItem().config.chipTemplate) {\n    <div class=\"pgh-filter-chip-preview\">\n      <span class=\"pgh-filter-chip-name\">{{ filterItem().config.name }}</span>\n      <span>:</span>\n      @if (hasValue()) {\n      <span class=\"pgh-filter-chip-value\">\n        {{ filterItem().valueDisplayedName || filterItem().value }}\n      </span>\n      } @if (filterItem().config.alwaysActive && !hasValue()) {\n      <span class=\"pgh-filter-chip-placeholder\">- \u0647\u06CC\u0686\u06CC -</span>\n      }\n    </div>\n    } @if (filterItem().config.chipTemplate) {\n    <ng-container\n      *ngTemplateOutlet=\"filterItem().config.chipTemplate!; context: { value: filterItem().value }\"\n    ></ng-container>\n    } @if ( filterItem().config.noClearButton !== true && !(filterItem().config.alwaysActive &&\n    !hasValue()) ) {\n    <div\n      class=\"pgh-filter-remove text-danger\"\n      (click)=\"onRemoveClick(); $event.stopPropagation()\"\n      matRipple\n    >\n      <mat-icon svgIcon=\"clear\" class=\"square-16\"></mat-icon>\n    </div>\n    }\n  </div>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"chipOverlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"filterItem().isOverlayOpen\"\n  [cdkConnectedOverlayPanelClass]=\"panelClasses()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n  (backdropClick)=\"onClickOutside()\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      filterItem().markerDirective.template;\n      context: {\n        name: filterItem().config.name,\n        field: filterItem().config.field,\n        value: filterItem().value,\n        setValue: filterItem().valueSetter,\n        closeOverlay: filterItem().closeOverlay\n      }\n    \"\n  ></ng-container>\n</ng-template>\n", styles: [".pgh-filter-chip-item{border-radius:25px;padding-block:.25rem;padding-inline:.75rem;font-size:.875rem;min-height:2.125rem;line-height:1.625rem;cursor:pointer;border:1px solid var(--light-border-color)}[dark=true] .pgh-filter-chip-item{background:var(--eee)}.pgh-filter-chip-item:hover{box-shadow:0 2px 6px #0001}.pgh-filter-remove{width:2.25rem;height:2.25rem;margin-block:-.375rem;margin-inline:-.125rem -.75rem;display:inline-flex;justify-content:center;align-items:center;border-radius:25px}.pgh-filter-chip-preview{display:flex;align-items:center}.pgh-filter-chip-value{margin-inline-start:.5rem}.pgh-filter-chip-overlay{background:var(--fff);border-radius:var(--box-radius);padding:.75rem;box-shadow:var(--shadow)}.pgh-filter-chip-placeholder{color:var(--777);margin-inline-start:.375rem;font-style:italic;font-size:.75rem}.pgh-filter-chip-name{color:var(--666);white-space:nowrap}\n"] }]
        }], ctorParameters: () => [] });

class PghFilterChipsComponent extends withDestroy() {
    get allFilterMarkers() {
        return [...(this.filterMarkers ?? []), ...this.connectedFilterMarkersViaConnectorProvider];
    }
    constructor(filterChipsPersistService, filterChipsMarkerConnector) {
        super();
        this.filterChipsPersistService = filterChipsPersistService;
        this.connectedFilterMarkersViaConnectorProvider = [];
        this.showSearchButton = input(false);
        this.persistId = input(null);
        this.search = output();
        this.filterItems = signal([]);
        filterChipsMarkerConnector.directiveConnector$
            .pipe(takeUntil(this._destroyed$))
            .subscribe(data => {
            this.connectedFilterMarkersViaConnectorProvider.push(data);
            setTimeout(() => {
                this.handleFilterMarkersChange();
            });
        });
    }
    getPersistedData() {
        return this.filterChipsPersistService.getPersistData(this.getPersistId());
    }
    ngAfterContentInit() {
        if (!this.filterMarkers?.length)
            return;
        this.handleFilterMarkersChange();
        this.filterMarkers.changes.subscribe(() => {
            this.handleFilterMarkersChange();
        });
    }
    get hasNoInactiveFilter() {
        return this.filterItems().every(f => f.isActive);
    }
    handleFilterMarkersChange() {
        const persistedData = this.getPersistedData() ?? {};
        this.filterItems.set(this.allFilterMarkers.map(directive => new PghFilterChipsItem(directive, { ...directive.filterField() }, persistedData[directive.filterField().field] ?? directive.initValue())));
        this.setupFilterValueChangesListener();
    }
    setupFilterValueChangesListener() {
        if (this.showSearchButton()) {
            setTimeout(() => {
                this.emitFilterValues(); // Emit initial values event if SearchButton is displayed
            });
            return;
        }
        merge(...this.filterItems().map(f => f.value$))
            .pipe(takeUntil(this._destroyed$), debounceTime(5))
            .subscribe(() => {
            this.emitFilterValues();
        });
    }
    onSelectFilterItem(filterItem) {
        if (filterItem.isActive)
            return;
        filterItem.openOverlay();
    }
    emitFilterValues() {
        let filterValues = this.filterItems().reduce((res, f) => ({ ...res, [f.config.field]: f.value }), {});
        filterValues = ObjectUtils.removeNullKeysFromObject(filterValues);
        this.search.emit(filterValues);
        this.persistData();
    }
    persistData() {
        let filterValueNames = this.filterItems().reduce((res, f) => ({
            ...res,
            [f.config.field]: f.value ? { value: f.value, name: f.valueDisplayedName } : undefined,
        }), {});
        filterValueNames = ObjectUtils.removeNullKeysFromObject(filterValueNames);
        this.filterChipsPersistService.persist(this.getPersistId(), filterValueNames);
    }
    onClickSearch() {
        this.emitFilterValues();
    }
    ngOnDestroy() {
        this.filterItems().forEach(f => f.onDestroy());
    }
    getPersistId() {
        const persistId = this.persistId();
        if (persistId)
            return persistId;
        if (!this.allFilterMarkers?.length) {
            throw new Error('pgh-filter-chips must have at least one *pghFilterField');
        }
        return this.allFilterMarkers.map(directive => directive.filterField().field).join('-');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipsComponent, deps: [{ token: PghFilterChipsPersistService }, { token: PghFilterChipItemsConnector }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: PghFilterChipsComponent, isStandalone: false, selector: "pgh-filter-chips", inputs: { showSearchButton: { classPropertyName: "showSearchButton", publicName: "showSearchButton", isSignal: true, isRequired: false, transformFunction: null }, persistId: { classPropertyName: "persistId", publicName: "persistId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "search" }, providers: [PghFilterChipItemsConnectorProvider], queries: [{ propertyName: "filterMarkers", predicate: PghFilterChipsMarkerDirective }], usesInheritance: true, ngImport: i0, template: "<div class=\"pgh-filter-chips\">\n  <div\n    class=\"pgh-filter-chips-icon\"\n    (click)=\"!hasNoInactiveFilter && addFilterMenuTrigger?.openMenu()\"\n  >\n    <mat-icon svgIcon=\"filter_list\"></mat-icon>\n  </div>\n\n  <div class=\"pgh-filter-chips-list pgh-emulated-flex-gap\" style=\"--gap: 4px\">\n    @for (f of filterItems(); track f) { @if (f.isActive) {\n    <pgh-filter-chip-item [filterItem]=\"f\"></pgh-filter-chip-item>\n    } }\n\n    <div [hidden]=\"hasNoInactiveFilter\">\n      <button\n        mat-button\n        color=\"primary\"\n        [matMenuTriggerFor]=\"addFilterMenuRef\"\n        #addFilterMenuTrigger=\"matMenuTrigger\"\n      >\n        <mat-icon svgIcon=\"add\" class=\"square-16 me-1\"></mat-icon>\n        <span>{{ 'FILTER_CHIPS_NEW_FILTER_BUTTON' | translate }}</span>\n      </button>\n      <mat-menu #addFilterMenuRef=\"matMenu\" [overlapTrigger]=\"true\">\n        @for (f of filterItems(); track f) { @if (!f.isActive) {\n        <button mat-menu-item (click)=\"onSelectFilterItem(f)\">\n          {{ f.config.name }}\n        </button>\n        } }\n      </mat-menu>\n    </div>\n\n    @if (showSearchButton()) {\n    <div class=\"pgh-filter-chips-submit\">\n      <button mat-flat-button color=\"primary\" (click)=\"onClickSearch()\">\n        <mat-icon svgIcon=\"search\" class=\"square-16\"></mat-icon>\n        <span class=\"ms-1\">{{ 'FILTER_CHIPS_SEARCH_BUTTON' | translate }}</span>\n      </button>\n    </div>\n    }\n  </div>\n</div>\n", styles: [".pgh-filters-wrapper{display:flex;align-items:center;justify-content:space-between;padding-block:.5rem;padding-inline:1rem;min-height:3.75rem;border-bottom:1px solid var(--light-border-color)}.pgh-filter-chips{display:flex;align-items:center}.pgh-filter-chips-icon{flex:0 0 auto;margin-inline-end:.75rem;display:flex;align-items:center}.pgh-filter-chips-list{flex:1 0 0;display:flex;align-items:center;min-width:0}.pgh-filter-add-icon{margin-inline:-.5rem .25rem}.pgh-filter-chips-submit{margin-inline-start:auto}\n"], dependencies: [{ kind: "component", type: i2$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PghFilterChipItemComponent, selector: "pgh-filter-chip-item", inputs: ["filterItem"], outputs: ["filterItemChange", "remove"] }, { kind: "pipe", type: i6$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'pgh-filter-chips', encapsulation: ViewEncapsulation.None, providers: [PghFilterChipItemsConnectorProvider], standalone: false, template: "<div class=\"pgh-filter-chips\">\n  <div\n    class=\"pgh-filter-chips-icon\"\n    (click)=\"!hasNoInactiveFilter && addFilterMenuTrigger?.openMenu()\"\n  >\n    <mat-icon svgIcon=\"filter_list\"></mat-icon>\n  </div>\n\n  <div class=\"pgh-filter-chips-list pgh-emulated-flex-gap\" style=\"--gap: 4px\">\n    @for (f of filterItems(); track f) { @if (f.isActive) {\n    <pgh-filter-chip-item [filterItem]=\"f\"></pgh-filter-chip-item>\n    } }\n\n    <div [hidden]=\"hasNoInactiveFilter\">\n      <button\n        mat-button\n        color=\"primary\"\n        [matMenuTriggerFor]=\"addFilterMenuRef\"\n        #addFilterMenuTrigger=\"matMenuTrigger\"\n      >\n        <mat-icon svgIcon=\"add\" class=\"square-16 me-1\"></mat-icon>\n        <span>{{ 'FILTER_CHIPS_NEW_FILTER_BUTTON' | translate }}</span>\n      </button>\n      <mat-menu #addFilterMenuRef=\"matMenu\" [overlapTrigger]=\"true\">\n        @for (f of filterItems(); track f) { @if (!f.isActive) {\n        <button mat-menu-item (click)=\"onSelectFilterItem(f)\">\n          {{ f.config.name }}\n        </button>\n        } }\n      </mat-menu>\n    </div>\n\n    @if (showSearchButton()) {\n    <div class=\"pgh-filter-chips-submit\">\n      <button mat-flat-button color=\"primary\" (click)=\"onClickSearch()\">\n        <mat-icon svgIcon=\"search\" class=\"square-16\"></mat-icon>\n        <span class=\"ms-1\">{{ 'FILTER_CHIPS_SEARCH_BUTTON' | translate }}</span>\n      </button>\n    </div>\n    }\n  </div>\n</div>\n", styles: [".pgh-filters-wrapper{display:flex;align-items:center;justify-content:space-between;padding-block:.5rem;padding-inline:1rem;min-height:3.75rem;border-bottom:1px solid var(--light-border-color)}.pgh-filter-chips{display:flex;align-items:center}.pgh-filter-chips-icon{flex:0 0 auto;margin-inline-end:.75rem;display:flex;align-items:center}.pgh-filter-chips-list{flex:1 0 0;display:flex;align-items:center;min-width:0}.pgh-filter-add-icon{margin-inline:-.5rem .25rem}.pgh-filter-chips-submit{margin-inline-start:auto}\n"] }]
        }], ctorParameters: () => [{ type: PghFilterChipsPersistService }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [PghFilterChipItemsConnector]
                }] }], propDecorators: { filterMarkers: [{
                type: ContentChildren,
                args: [PghFilterChipsMarkerDirective]
            }] } });

class PghFilterChipsModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipsModule, declarations: [PghFilterChipsComponent,
            PghFilterChipItemComponent,
            PghFilterChipsMarkerDirective], imports: [CommonModule,
            MatMenuModule,
            MatButtonModule,
            MatRippleModule,
            OverlayModule,
            MatIconModule,
            TranslateModule], exports: [PghFilterChipsComponent, PghFilterChipItemComponent, PghFilterChipsMarkerDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipsModule, imports: [CommonModule,
            MatMenuModule,
            MatButtonModule,
            MatRippleModule,
            OverlayModule,
            MatIconModule,
            TranslateModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipsModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        PghFilterChipsComponent,
                        PghFilterChipItemComponent,
                        PghFilterChipsMarkerDirective,
                    ],
                    imports: [
                        CommonModule,
                        MatMenuModule,
                        MatButtonModule,
                        MatRippleModule,
                        OverlayModule,
                        MatIconModule,
                        TranslateModule,
                    ],
                    exports: [PghFilterChipsComponent, PghFilterChipItemComponent, PghFilterChipsMarkerDirective],
                }]
        }] });

class PghFilterChipAutoCompleteModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipAutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipAutoCompleteModule, declarations: [PghFilterChipAutoCompleteComponent], imports: [CommonModule,
            PghFilterChipsModule,
            MatFormFieldModule,
            MatInputModule,
            ReactiveFormsModule,
            MatAutocompleteModule,
            FormsModule], exports: [PghFilterChipAutoCompleteComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipAutoCompleteModule, imports: [CommonModule,
            PghFilterChipsModule,
            MatFormFieldModule,
            MatInputModule,
            ReactiveFormsModule,
            MatAutocompleteModule,
            FormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipAutoCompleteModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [PghFilterChipAutoCompleteComponent],
                    imports: [
                        CommonModule,
                        PghFilterChipsModule,
                        MatFormFieldModule,
                        MatInputModule,
                        ReactiveFormsModule,
                        MatAutocompleteModule,
                        FormsModule,
                    ],
                    exports: [PghFilterChipAutoCompleteComponent],
                }]
        }] });

class PghFilterChipInputComponent {
    get isLive() {
        return this.filter().updateOn !== 'valueChange';
    }
    constructor(filterChipsMarkerConnector) {
        this.filterChipsMarkerConnector = filterChipsMarkerConnector;
        this.filter = input.required();
        this.initialValue = input();
        this.inputFormControl = new UntypedFormControl();
    }
    ngOnChanges(changes) {
        if (changes.filter && this.filter()) {
            this.filter().filterControl = this.filter().filterControl ?? new UntypedFormControl();
        }
    }
    ngAfterViewInit() {
        if (this.filterMarker) {
            this.filterChipsMarkerConnector.directiveConnector$.next(this.filterMarker);
        }
    }
    ngOnInit() {
        this.handleInputControlChanges();
    }
    handleInputControlChanges() {
        if (!this.isLive)
            return;
        this.inputFormControl.valueChanges.subscribe(change => {
            this.filter().filterControl?.setValue(change);
        });
    }
    onSubmit() {
        if (this.isLive)
            return;
        this.filter().filterControl?.setValue(this.inputFormControl.value.trim());
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipInputComponent, deps: [{ token: PghFilterChipItemsConnector }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: PghFilterChipInputComponent, isStandalone: false, selector: "pgh-filter-chip-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "filterMarker", first: true, predicate: PghFilterChipsMarkerDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form\n  *pghFilterField=\"filter(); initValue: { value: initialValue() }; let closeOverlay = closeOverlay\"\n  [class.d-flex]=\"!isLive\"\n  (ngSubmit)=\"closeOverlay(); onSubmit()\"\n>\n  <mat-form-field class=\"pgh-mat-form-field-no-space-bottom\">\n    <mat-label>{{ filter().name }}</mat-label>\n    <input matInput type=\"search\" [formControl]=\"inputFormControl\" />\n  </mat-form-field>\n  @if (!isLive) {\n  <button mat-flat-button color=\"primary\" type=\"submit\" class=\"pgh-same-height-mat-form-field ms-2\">\n    \u062B\u0628\u062A\n  </button>\n  }\n</form>\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: PghFilterChipsMarkerDirective, selector: "[pghFilterField]", inputs: ["pghFilterField", "pghFilterFieldInitValue"], exportAs: ["pghFilterField"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipInputComponent, decorators: [{
            type: Component,
            args: [{ selector: 'pgh-filter-chip-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<form\n  *pghFilterField=\"filter(); initValue: { value: initialValue() }; let closeOverlay = closeOverlay\"\n  [class.d-flex]=\"!isLive\"\n  (ngSubmit)=\"closeOverlay(); onSubmit()\"\n>\n  <mat-form-field class=\"pgh-mat-form-field-no-space-bottom\">\n    <mat-label>{{ filter().name }}</mat-label>\n    <input matInput type=\"search\" [formControl]=\"inputFormControl\" />\n  </mat-form-field>\n  @if (!isLive) {\n  <button mat-flat-button color=\"primary\" type=\"submit\" class=\"pgh-same-height-mat-form-field ms-2\">\n    \u062B\u0628\u062A\n  </button>\n  }\n</form>\n" }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [PghFilterChipItemsConnector]
                }] }], propDecorators: { filterMarker: [{
                type: ViewChild,
                args: [PghFilterChipsMarkerDirective]
            }] } });

class PghFilterChipInputModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipInputModule, declarations: [PghFilterChipInputComponent], imports: [CommonModule,
            MatFormFieldModule,
            PghFilterChipsModule,
            FormsModule,
            MatButtonModule,
            MatInputModule,
            ReactiveFormsModule], exports: [PghFilterChipInputComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipInputModule, imports: [CommonModule,
            MatFormFieldModule,
            PghFilterChipsModule,
            FormsModule,
            MatButtonModule,
            MatInputModule,
            ReactiveFormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFilterChipInputModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [PghFilterChipInputComponent],
                    imports: [
                        CommonModule,
                        MatFormFieldModule,
                        PghFilterChipsModule,
                        FormsModule,
                        MatButtonModule,
                        MatInputModule,
                        ReactiveFormsModule,
                    ],
                    exports: [PghFilterChipInputComponent],
                }]
        }] });

class PghFilterChipSelectComponent {
    constructor(filterChipsMarkerConnector) {
        this.filterChipsMarkerConnector = filterChipsMarkerConnector;
        this.filter = input.required();
        this.options = input([]);
        this.initialValue = input();
    }
    ngOnChanges(changes) {
        if (changes.filter) {
            this.filter().panelClass = `p-0 ${this.filter().panelClass ?? ''}`;
        }
    }
    ngAfterViewInit() {
        if (this.filterMarker) {
            this.filterChipsMarkerConnector.directiveConnector$.next(this.filterMarker);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "