@obliczeniowo/elementary/fesm2022/obliczeniowo-elementary-filters.mjs

Library made in Angular version 20

import * as i0 from '@angular/core';
import { Injectable, input, EventEmitter, computed, Output, Component, effect, ViewChild, Input, HostBinding, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@obliczeniowo/elementary/dropdown-select';
import { DropdownSelectModule } from '@obliczeniowo/elementary/dropdown-select';
import * as i2 from '@obliczeniowo/elementary/input';
import { InputModule } from '@obliczeniowo/elementary/input';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { cloneDeep } from 'lodash';
import { keys, keysValues } from '@obliczeniowo/elementary/objects';
import * as i4 from '@obliczeniowo/elementary/buttons';
import { ButtonsModule } from '@obliczeniowo/elementary/buttons';
import * as i5$1 from '@angular/cdk/overlay';
import { OverlayModule } from '@angular/cdk/overlay';
import * as i6$1 from '@angular/cdk/drag-drop';
import { DragDropModule } from '@angular/cdk/drag-drop';
import * as i7 from '@obliczeniowo/elementary/badge';
import { BadgeDirective } from '@obliczeniowo/elementary/badge';
import * as i5 from '@obliczeniowo/elementary/switcher';
import { SwitcherModule } from '@obliczeniowo/elementary/switcher';
import * as i6 from '@obliczeniowo/elementary/text-pipes';
import { TextPipesModule } from '@obliczeniowo/elementary/text-pipes';

/* eslint-disable @typescript-eslint/no-unsafe-argument */
class FiltersService {
    checkItemCondition(item, filters) {
        let condition;
        if (filters?.filters?.length) {
            filters.filters.forEach((filter) => {
                const checked = filter.filters?.length
                    ? this.checkItemCondition(item, filter)
                    : this.operation(filter, item);
                if (filters?.filterType === 'or') {
                    condition = condition !== undefined ? condition || checked : checked;
                }
                else if (filters?.filterType === 'and') {
                    condition = condition !== undefined ? condition && checked : checked;
                }
                else {
                    condition = checked;
                }
            });
            return condition;
        }
        else {
            return true;
        }
    }
    operation(filter, item) {
        const value = item[filter.valueName];
        const filterValue = filter.filterValue;
        switch (filter.filterType) {
            case 'less':
                return value < +filterValue;
            case 'more':
                return value > +filterValue;
            case 'more-eq':
                return value >= +filterValue;
            case 'less-eq':
                return value <= +filterValue;
            case 'eq':
                return value.toString() === filterValue.toString();
            case 'not-eq':
                return value.toString() !== filterValue.toString();
            case 'like':
                return value?.includes(filterValue) || false;
            case 'regex':
                {
                    const reg = new RegExp(filterValue.toString(), 'g');
                    return !!value?.toString().match(reg);
                }
            case 'not-regex':
                {
                    const reg = new RegExp(filterValue.toString(), 'g');
                    return !value?.toString().match(reg);
                }
            default:
                return false;
        }
    }
    filter(input, filters) {
        return input.filter((item) => this.checkItemCondition(item, filters));
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FiltersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FiltersService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FiltersService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root',
                }]
        }] });

/* eslint-disable @typescript-eslint/consistent-type-assertions */
class FilterComponent {
    filter = input({});
    names = input([]);
    haveParent = input(true);
    mode = input('removing');
    translations = input({});
    suffix = input();
    labelAnimation = input(false);
    filtersType = input('full');
    /** filters changed */
    changed = new EventEmitter();
    /** filter added */
    add = new EventEmitter();
    /** filter remove */
    remove = new EventEmitter();
    expanded = true;
    nameItems = [];
    filtersItems = [];
    group = ['and', 'or'];
    numeric = ['less', 'less-eq', 'eq', 'not-eq', 'more-eq', 'more'];
    text = computed(() => {
        switch (this.filtersType()) {
            case 'no-regex': {
                return ['like', 'eq', 'not-eq'];
            }
            default: {
                return ['like', 'eq', 'not-eq', 'regex', 'not-regex'];
            }
        }
    });
    ngOnChanges(changes) {
        if (changes.names && this.names()) {
            this.nameItems = this.names().map((name) => ({
                id: name.name,
                text: name.text,
                templateData: name,
            }));
            if (this.nameItems.length) {
                const selected = this.nameItems.find((name) => name.id === this.filter().valueName);
                if (selected) {
                    const map = {
                        number: this.numeric,
                        text: this.text(),
                        group: this.group,
                    };
                    this.filtersItems = map[selected.templateData?.type || 'group'].map((type) => ({
                        id: type,
                        text: this.translations()[type] || type,
                    }));
                }
            }
        }
    }
    setName(name) {
        this.filter().valueName = name.id;
        const map = {
            number: this.numeric,
            text: this.text(),
            group: this.group,
        };
        const nameItem = this.nameItems.find((item) => item.id === this.filter().valueName);
        if (name.templateData?.type === 'number') {
            this.filter().filterValue = 0;
        }
        this.filtersItems = map[nameItem?.templateData?.type || 'group'].map((type) => ({
            id: type,
            text: this.translations()[type] || type,
        }));
        if (this.filter().valueName &&
            this.filter().filterType &&
            this.filter().filterValue) {
            this.changed.emit(this.filter());
        }
    }
    setFilter(filter) {
        this.filter().filterType = filter.id;
        if (this.filter().valueName &&
            this.filter().filterType &&
            this.filter().filterValue) {
            this.changed.emit(this.filter());
        }
    }
    setValue = (value) => {
        const nameItem = this.nameItems.find((item) => item.id === this.filter().valueName);
        if (nameItem?.templateData?.type === 'number' &&
            typeof value === 'string') {
            value = parseFloat(value);
        }
        this.filter().filterValue = value;
        this.changed.emit();
    };
    action() {
        if (this.filter().valueName &&
            this.filter()?.filterType &&
            this.filter().filterValue !== null) {
            if (this.mode() === 'adding') {
                this.add.emit({ ...this.filter() });
            }
            else {
                this.remove.emit({ ...this.filter() });
            }
        }
    }
    onRemove(filter) {
        this.filter().filters = (this.filter().filters || []).filter((f) => f.id !== filter.id);
        this.filter().filters?.forEach((filter, index) => (filter.id = index));
        this.changed.emit(this.filter());
    }
    onAdd(filter) {
        if (filter.id === undefined) {
            filter.id = new Date().getTime();
        }
        this.filter().filters = [...(this.filter().filters || []), filter];
        this.changed.emit(this.filter());
    }
    addGroup() {
        this.filter().filters?.unshift({
            id: this.filter().filters?.length || 0,
            valueName: `group ${this.filter().filters?.length}`,
            filterValue: 0,
            filterType: 'and',
            filters: [],
        });
        this.filter().filters?.forEach((f, i) => (f.id = i));
        this.changed.emit();
    }
    setGroupType(orAnd) {
        this.filter().filterType = orAnd ? 'and' : 'or';
        this.changed.emit();
    }
    removeGroup() {
        this.remove.emit(this.filter());
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: FilterComponent, isStandalone: false, selector: "obl-filter", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, names: { classPropertyName: "names", publicName: "names", isSignal: true, isRequired: false, transformFunction: null }, haveParent: { classPropertyName: "haveParent", publicName: "haveParent", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, translations: { classPropertyName: "translations", publicName: "translations", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, labelAnimation: { classPropertyName: "labelAnimation", publicName: "labelAnimation", isSignal: true, isRequired: false, transformFunction: null }, filtersType: { classPropertyName: "filtersType", publicName: "filtersType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", add: "add", remove: "remove" }, usesOnChanges: true, ngImport: i0, template: "@if (!filter().filters) {\n  <div class=\"row record\">\n    <div class=\"row\">\n      <obl-dropdown-select\n        [label]=\"'Filter by' | oblTranslation : translations()\"\n        [labelAnimation]=\"labelAnimation()\"\n        [items]=\"nameItems\"\n        [select]=\"filter().valueName || ''\"\n        (changed)=\"setName($event)\"\n        #name\n      ></obl-dropdown-select>\n\n      <obl-dropdown-select\n        [label]=\"'Filter type' | oblTranslation : translations()\"\n        [labelAnimation]=\"labelAnimation()\"\n        [items]=\"filtersItems\"\n        [select]=\"filter().filterType || ''\"\n        (changed)=\"setFilter($event)\"\n      ></obl-dropdown-select>\n\n      @if (name.selected) {\n        <obl-input-wrapper\n          [label]=\"'Value' | oblTranslation : translations()\"\n          [labelAnimation]=\"labelAnimation()\"\n          [step]=\"name.selected.templateData.options?.step\"\n        >\n          <input\n            oblInput\n            [type]=\"name.selected.templateData.type\"\n            [min]=\"name.selected.templateData.options?.min\"\n            [max]=\"name.selected.templateData.options?.max\"\n            [value]=\"\n              filter().filterValue ??\n              (name.selected.templateData.type === 'text' ? '' : 0)\n            \"\n            (change)=\"setValue(value.value)\"\n            #value\n          />\n          @if(suffix()) {\n            <ng-container\n              suffix\n              *ngTemplateOutlet=\"\n                suffix()!;\n                context: {\n                  value:\n                    (filter().filterValue ??\n                    name.selected.templateData.options?.default) ||\n                      (name.selected.templateData.type === 'text' ? '' : 0),\n                  type: name.selected.templateData.type,\n                  valueName: filter().valueName,\n                  setValue\n                }\n              \"\n            ></ng-container>\n          }\n        </obl-input-wrapper>\n      }\n    </div>\n\n    <button\n      oblButton\n      [icon]=\"mode() === 'adding' ? 'add' : 'subtract'\"\n      (click)=\"action()\"\n    ></button>\n  </div>\n} @else {\n  <div>\n    <div class=\"head\">\n      <span\n        >{{ 'Start of group name:' | oblTranslation : translations() }}\n        {{ filter().valueName }}</span\n      >\n      <div class=\"row\">\n        <obl-switcher\n          on=\"And\"\n          off=\"Or\"\n          [value]=\"filter().filterType === 'and'\"\n          (valueChanged)=\"setGroupType($event)\"\n        ></obl-switcher>\n        <button\n          oblButton\n          icon=\"add\"\n          [title]=\"'Add group' | oblTranslation : translations()\"\n          (click)=\"addGroup()\"\n        ></button>\n        @if (haveParent()) {\n          <button\n            oblButton\n            icon=\"subtract\"\n            [title]=\"'Remove group' | oblTranslation : translations()\"\n            title=\"Remove group\"\n            (click)=\"removeGroup()\"\n          ></button>\n        }\n        <obl-expand-button\n          [isOpen]=\"expanded\"\n          (click)=\"expanded = !expanded\"\n        ></obl-expand-button>\n      </div>\n    </div>\n\n    @if (filter().filters) {\n      <div class=\"filters\" [class.expanded]=\"expanded\">\n        @for (filter of filter().filters; track filter.id) {\n          <obl-filter\n            [filter]=\"filter\"\n            [names]=\"names()\"\n            [translations]=\"translations()\"\n            [suffix]=\"suffix()\"\n            [labelAnimation]=\"labelAnimation()\"\n            [filtersType]=\"filtersType()\"\n            (remove)=\"onRemove($event)\"\n            (changed)=\"changed.emit(filter)\"\n          ></obl-filter>\n        }\n\n        <obl-filter\n          class=\"adding\"\n          [names]=\"names()\"\n          [translations]=\"translations()\"\n          [suffix]=\"suffix()\"\n          [labelAnimation]=\"labelAnimation()\"\n          [filtersType]=\"filtersType()\"\n          mode=\"adding\"\n          (add)=\"onAdd($event)\"\n        ></obl-filter>\n\n        <div class=\"head\">\n          {{ 'End of group name:' | oblTranslation : translations() }}\n          {{ filter().valueName }}\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [".row{display:flex;flex-wrap:nowrap;--obl-switcher-color: #3d3d3d;--obl-switcher-border-color: #3d3d3d;--obl-switcher-height: 1rem;--obl-switcher-width: 3rem}.row obl-switcher{margin-right:5px}.row::ng-deep .btn-text{height:25px}.record{justify-content:space-between}.record button{margin-top:7px;border-radius:5px}obl-dropdown-select{width:150px}.head{padding:2px 5px;margin:5px 0 0;background-color:#ccc;display:flex;justify-content:space-between;align-items:center}.head .row{align-items:center}.head button{--obl-default-button-padding: 5px}.adding{margin-top:10px;display:block}.filters{height:0;overflow:hidden}.filters.expanded{height:fit-content}obl-input-wrapper{width:290px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.DropdownSelectComponent, selector: "obl-dropdown-select", inputs: ["model", "items", "label", "labelAnimation", "templateSuffix", "templatePrefix", "search", "regExp", "select", "disabled"], outputs: ["changed"] }, { kind: "directive", type: i2.InputDirective, selector: "input[oblInput]", inputs: ["outlined"], exportAs: ["oblInput"] }, { kind: "component", type: i2.InputWrapperComponent, selector: "obl-input-wrapper", inputs: ["label", "display", "cancellable", "step", "errors", "translations", "labelAnimation", "small"], outputs: ["loaded"] }, { kind: "component", type: i4.ExpandButtonComponent, selector: "obl-expand-button", inputs: ["isOpen"] }, { kind: "directive", type: i4.ButtonDirective, selector: "oblButton, [oblButton]", inputs: ["oblButton", "icon", "blockWhenLoading", "loading", "toggle", "selected", "link", "target"], exportAs: ["oblButton"] }, { kind: "component", type: i5.SwitcherComponent, selector: "obl-switcher", inputs: ["value", "on", "off", "onIcon", "offIcon", "disabled", "loading"], outputs: ["valueChanged"] }, { kind: "component", type: FilterComponent, selector: "obl-filter", inputs: ["filter", "names", "haveParent", "mode", "translations", "suffix", "labelAnimation", "filtersType"], outputs: ["changed", "add", "remove"] }, { kind: "pipe", type: i6.TranslationPipe, name: "oblTranslation" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FilterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'obl-filter', standalone: false, template: "@if (!filter().filters) {\n  <div class=\"row record\">\n    <div class=\"row\">\n      <obl-dropdown-select\n        [label]=\"'Filter by' | oblTranslation : translations()\"\n        [labelAnimation]=\"labelAnimation()\"\n        [items]=\"nameItems\"\n        [select]=\"filter().valueName || ''\"\n        (changed)=\"setName($event)\"\n        #name\n      ></obl-dropdown-select>\n\n      <obl-dropdown-select\n        [label]=\"'Filter type' | oblTranslation : translations()\"\n        [labelAnimation]=\"labelAnimation()\"\n        [items]=\"filtersItems\"\n        [select]=\"filter().filterType || ''\"\n        (changed)=\"setFilter($event)\"\n      ></obl-dropdown-select>\n\n      @if (name.selected) {\n        <obl-input-wrapper\n          [label]=\"'Value' | oblTranslation : translations()\"\n          [labelAnimation]=\"labelAnimation()\"\n          [step]=\"name.selected.templateData.options?.step\"\n        >\n          <input\n            oblInput\n            [type]=\"name.selected.templateData.type\"\n            [min]=\"name.selected.templateData.options?.min\"\n            [max]=\"name.selected.templateData.options?.max\"\n            [value]=\"\n              filter().filterValue ??\n              (name.selected.templateData.type === 'text' ? '' : 0)\n            \"\n            (change)=\"setValue(value.value)\"\n            #value\n          />\n          @if(suffix()) {\n            <ng-container\n              suffix\n              *ngTemplateOutlet=\"\n                suffix()!;\n                context: {\n                  value:\n                    (filter().filterValue ??\n                    name.selected.templateData.options?.default) ||\n                      (name.selected.templateData.type === 'text' ? '' : 0),\n                  type: name.selected.templateData.type,\n                  valueName: filter().valueName,\n                  setValue\n                }\n              \"\n            ></ng-container>\n          }\n        </obl-input-wrapper>\n      }\n    </div>\n\n    <button\n      oblButton\n      [icon]=\"mode() === 'adding' ? 'add' : 'subtract'\"\n      (click)=\"action()\"\n    ></button>\n  </div>\n} @else {\n  <div>\n    <div class=\"head\">\n      <span\n        >{{ 'Start of group name:' | oblTranslation : translations() }}\n        {{ filter().valueName }}</span\n      >\n      <div class=\"row\">\n        <obl-switcher\n          on=\"And\"\n          off=\"Or\"\n          [value]=\"filter().filterType === 'and'\"\n          (valueChanged)=\"setGroupType($event)\"\n        ></obl-switcher>\n        <button\n          oblButton\n          icon=\"add\"\n          [title]=\"'Add group' | oblTranslation : translations()\"\n          (click)=\"addGroup()\"\n        ></button>\n        @if (haveParent()) {\n          <button\n            oblButton\n            icon=\"subtract\"\n            [title]=\"'Remove group' | oblTranslation : translations()\"\n            title=\"Remove group\"\n            (click)=\"removeGroup()\"\n          ></button>\n        }\n        <obl-expand-button\n          [isOpen]=\"expanded\"\n          (click)=\"expanded = !expanded\"\n        ></obl-expand-button>\n      </div>\n    </div>\n\n    @if (filter().filters) {\n      <div class=\"filters\" [class.expanded]=\"expanded\">\n        @for (filter of filter().filters; track filter.id) {\n          <obl-filter\n            [filter]=\"filter\"\n            [names]=\"names()\"\n            [translations]=\"translations()\"\n            [suffix]=\"suffix()\"\n            [labelAnimation]=\"labelAnimation()\"\n            [filtersType]=\"filtersType()\"\n            (remove)=\"onRemove($event)\"\n            (changed)=\"changed.emit(filter)\"\n          ></obl-filter>\n        }\n\n        <obl-filter\n          class=\"adding\"\n          [names]=\"names()\"\n          [translations]=\"translations()\"\n          [suffix]=\"suffix()\"\n          [labelAnimation]=\"labelAnimation()\"\n          [filtersType]=\"filtersType()\"\n          mode=\"adding\"\n          (add)=\"onAdd($event)\"\n        ></obl-filter>\n\n        <div class=\"head\">\n          {{ 'End of group name:' | oblTranslation : translations() }}\n          {{ filter().valueName }}\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [".row{display:flex;flex-wrap:nowrap;--obl-switcher-color: #3d3d3d;--obl-switcher-border-color: #3d3d3d;--obl-switcher-height: 1rem;--obl-switcher-width: 3rem}.row obl-switcher{margin-right:5px}.row::ng-deep .btn-text{height:25px}.record{justify-content:space-between}.record button{margin-top:7px;border-radius:5px}obl-dropdown-select{width:150px}.head{padding:2px 5px;margin:5px 0 0;background-color:#ccc;display:flex;justify-content:space-between;align-items:center}.head .row{align-items:center}.head button{--obl-default-button-padding: 5px}.adding{margin-top:10px;display:block}.filters{height:0;overflow:hidden}.filters.expanded{height:fit-content}obl-input-wrapper{width:290px}\n"] }]
        }], propDecorators: { changed: [{
                type: Output
            }], add: [{
                type: Output
            }], remove: [{
                type: Output
            }] } });

class FiltersComponent {
    filtersService;
    globalSettings;
    touchedDragBar = false;
    settingsItems = [];
    errors = {};
    /** define if list is opened */
    isOpen = false;
    /** define if element is touched */
    touched = false;
    filters;
    settings;
    translations = input({});
    names = input([]);
    input = input();
    suffix = input();
    /**
     * Enable type text animation for label
     */
    labelAnimation = false;
    disabled = false;
    filtersType = input('full');
    settingsChanged = new EventEmitter();
    changed = new EventEmitter();
    output = new EventEmitter();
    selected;
    settingsName;
    constructor(filtersService, globalSettings) {
        this.filtersService = filtersService;
        this.globalSettings = globalSettings;
        effect(() => {
            this.filterInput();
        });
        this.labelAnimation = this.globalSettings.labelAnimation.filters;
    }
    ngOnChanges(changes) {
        if (changes.settings) {
            if (this.settings) {
                this.updateSettingsItems();
            }
            else {
                this.settingsItems = [];
            }
        }
    }
    toggle(event, touched = this.touchedDragBar) {
        if (touched) {
            return;
        }
        event.stopPropagation();
        this.touchedDragBar = false;
        if (this.isOpen) {
            this.isOpen = false;
        }
        else {
            this.open();
        }
    }
    close(touched = this.touchedDragBar) {
        if (!touched) {
            this.isOpen = false;
            this.touchedDragBar = false;
        }
        else {
            this.touchedDragBar = touched;
        }
    }
    open() {
        if (!this.isOpen) {
            this.isOpen = true;
            this.touchedDragBar = false;
            setTimeout(() => {
                this.checkSettingSelection();
            });
        }
    }
    onChange = (value) => { };
    onTouched = () => { };
    onTouchedDragBar(touched, element) {
        this.touchedDragBar = touched;
        element.parentElement.style.width = 0;
    }
    checkSettingSelection() {
        if (this.selected?.selected &&
            JSON.stringify(this.selected.selected.templateData) !==
                JSON.stringify(this.filters)) {
            this.selected.selected = undefined;
        }
    }
    writeValue(value) {
        this.filters = value;
    }
    registerOnChange(onChange) {
        this.onChange = onChange;
    }
    registerOnTouched(onTouched) {
        this.onTouched = onTouched;
    }
    setDisabledState(disabled) {
        this.disabled = disabled;
    }
    saveSettings(input) {
        const name = input.value;
        if (name && name !== '' && this.filters) {
            if (!keys(this.settings || {}).find((key) => key === name)) {
                this.settings = {
                    ...(this.settings || {}),
                    [name]: cloneDeep(this.filters),
                };
            }
            else {
                if (this.settings) {
                    this.settings[name] = cloneDeep(this.filters);
                }
            }
            this.updateSettingsItems();
            this.settingsChanged.emit(this.settings);
            setTimeout(() => {
                if (this.selected) {
                    this.selected.selected = this.selected.items.find((item) => item.id === name);
                }
            });
        }
        else {
            this.errors.settingsName = {
                settingsNameError: !name || name === '',
            };
            input.classList.add('ng-touched');
        }
    }
    check() {
        const value = this.settingsName?.nativeElement.value;
        const err = !value || value === '';
        this.errors.settingsName =
            (err && {
                settingsNameError: !value || value === '',
            }) ||
                null;
    }
    onChanged() {
        this.checkSettingSelection();
        this.changed.emit(this.filters);
        this.filterInput();
    }
    setSettings(item) {
        if (item.templateData) {
            this.filters = cloneDeep(item.templateData);
            if (this.settingsName) {
                this.settingsName.nativeElement.value = item.id.toString();
            }
            this.changed.emit(this.filters);
        }
    }
    removeSettings(name) {
        if (name && this.settings?.[name]) {
            // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
            delete this.settings[name];
            this.updateSettingsItems();
            this.settingsChanged.emit(this.settings);
        }
    }
    filterInput() {
        const input = this.input();
        if (input) {
            const filtered = this.filters
                ? this.filtersService.filter(input, this.filters)
                : input;
            this.output.emit(filtered);
        }
    }
    updateSettingsItems() {
        this.settingsItems = keysValues(this.settings || {}).map(([key, value]) => ({
            id: key,
            text: key,
            templateData: value,
        }));
        this.filterInput();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FiltersComponent, deps: [{ token: FiltersService }, { token: i2.InputWrappersDefaultSettingsService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: FiltersComponent, isStandalone: false, selector: "obl-filters", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: false, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: false, isRequired: false, transformFunction: null }, translations: { classPropertyName: "translations", publicName: "translations", isSignal: true, isRequired: false, transformFunction: null }, names: { classPropertyName: "names", publicName: "names", isSignal: true, isRequired: false, transformFunction: null }, input: { classPropertyName: "input", publicName: "input", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, labelAnimation: { classPropertyName: "labelAnimation", publicName: "labelAnimation", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, filtersType: { classPropertyName: "filtersType", publicName: "filtersType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { settingsChanged: "settingsChanged", changed: "changed", output: "output" }, host: { properties: { "class.disabled": "this.disabled" } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                multi: true,
                useExisting: FiltersComponent,
            },
        ], viewQueries: [{ propertyName: "selected", first: true, predicate: ["selectedSetting"], descendants: true }, { propertyName: "settingsName", first: true, predicate: ["settingsName"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<button\n  oblButton\n  icon=\"filter\"\n  cdkOverlayOrigin\n  [disabled]=\"disabled\"\n  oblBadge\n  [show]=\"!!filters?.filters?.length\"\n  #dropDown=\"cdkOverlayOrigin\"\n  (click)=\"toggle($event, false)\"\n  #parent\n></button>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"dropDown\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayOffsetX]=\"2\"\n  (overlayOutsideClick)=\"toggle($event)\"\n>\n  <div\n    class=\"dropdown-list\"\n    [style.min-width.px]=\"647\"\n    [style.max-width]=\"'100vw'\"\n    #list\n    cdkDrag\n  >\n    <obl-drag-bar\n      (onTouched)=\"onTouchedDragBar($event, list)\"\n      (onClose)=\"close(false)\"\n      cdkDragHandle\n      #dragbar\n    ></obl-drag-bar>\n    @if (filters) {\n      <div class=\"list\">\n        @if (settings) {\n          <div class=\"row\">\n            @if (settingsItems.length) {\n              <obl-dropdown-select\n                [label]=\"'Saved filters:' | oblTranslation : translations()\"\n                [labelAnimation]=\"labelAnimation\"\n                [items]=\"settingsItems\"\n                (changed)=\"setSettings($event)\"\n                #selectedSetting\n              >\n                @if (selectedSetting.selected) {\n                  <ng-container suffix>\n                    <button\n                      oblButton\n                      icon=\"subtract\"\n                      (click)=\"removeSettings(selectedSetting?.selected?.id)\"\n                    ></button>\n                  </ng-container>\n                }\n              </obl-dropdown-select>\n            }\n            <obl-input-wrapper\n              [label]=\"'Setting name:' | oblTranslation : translations()\"\n              [labelAnimation]=\"labelAnimation\"\n              [errors]=\"errors['settingsName']\"\n              [translations]=\"translations()\"\n            >\n              <input\n                oblInput\n                type=\"text\"\n                [required]=\"errors['settingsName']\"\n                (change)=\"check()\"\n                #settingsName\n              />\n              <button\n                suffix\n                oblButton\n                icon=\"save\"\n                (click)=\"saveSettings(settingsName)\"\n              ></button>\n            </obl-input-wrapper>\n          </div>\n        }\n        <obl-filter\n          [filter]=\"filters\"\n          [labelAnimation]=\"labelAnimation\"\n          [names]=\"names()\"\n          [haveParent]=\"false\"\n          [translations]=\"translations()\"\n          [suffix]=\"suffix()\"\n          [filtersType]=\"filtersType()\"\n          (changed)=\"onChanged()\"\n        ></obl-filter>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:root{--obl-spinner-width: 30px;--obl-font-size: 14px}.dropdown-list{background-color:var(--default-background-color);border-radius:5px;border:1px solid var(--default-border-color);display:flex;flex-direction:column;width:100%;max-width:100vw}.dropdown-list.disabled{color:var(--disabled-color)}.dropdown-list>app-filter{margin:5px}.dropdown-list .list{padding:5px;display:flex;flex-direction:column;max-height:300px;overflow:auto;scrollbar-width:thin}.dropdown-list .list::-webkit-scrollbar{width:9px}.dropdown-list .list::-webkit-scrollbar-track{background:transparent}.dropdown-list .list::-webkit-scrollbar-thumb{background-color:#9b9b9b80;border-radius:20px;border:transparent}:host button{--obl-icon-width: 15px}.cdk-drag-preview{background-color:var(--default-background-color);z-index:10000!important}.row{display:flex}.row button{--obl-default-button-padding: 5px}.row button:first-of-type{border-top-left-radius:5px;border-bottom-left-radius:5px}.row button:last-of-type{border-top-right-radius:5px;border-bottom-right-radius:5px}.row obl-dropdown-select,.row obl-input-wrapper{width:100%}\n"], dependencies: [{ kind: "component", type: i3.DropdownSelectComponent, selector: "obl-dropdown-select", inputs: ["model", "items", "label", "labelAnimation", "templateSuffix", "templatePrefix", "search", "regExp", "select", "disabled"], outputs: ["changed"] }, { kind: "component", type: i3.DragBarComponent, selector: "obl-drag-bar", outputs: ["onTouched", "onClose"] }, { kind: "directive", type: i2.InputDirective, selector: "input[oblInput]", inputs: ["outlined"], exportAs: ["oblInput"] }, { kind: "component", type: i2.InputWrapperComponent, selector: "obl-input-wrapper", inputs: ["label", "display", "cancellable", "step", "errors", "translations", "labelAnimation", "small"], outputs: ["loaded"] }, { kind: "directive", type: i4.ButtonDirective, selector: "oblButton, [oblButton]", inputs: ["oblButton", "icon", "blockWhenLoading", "loading", "toggle", "selected", "link", "target"], exportAs: ["oblButton"] }, { kind: "directive", type: i5$1.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: i5$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i6$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i7.BadgeDirective, selector: "[oblBadge]", inputs: ["show"] }, { kind: "component", type: FilterComponent, selector: "obl-filter", inputs: ["filter", "names", "haveParent", "mode", "translations", "suffix", "labelAnimation", "filtersType"], outputs: ["changed", "add", "remove"] }, { kind: "pipe", type: i6.TranslationPipe, name: "oblTranslation" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FiltersComponent, decorators: [{
            type: Component,
            args: [{ selector: 'obl-filters', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            multi: true,
                            useExisting: FiltersComponent,
                        },
                    ], standalone: false, template: "<button\n  oblButton\n  icon=\"filter\"\n  cdkOverlayOrigin\n  [disabled]=\"disabled\"\n  oblBadge\n  [show]=\"!!filters?.filters?.length\"\n  #dropDown=\"cdkOverlayOrigin\"\n  (click)=\"toggle($event, false)\"\n  #parent\n></button>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"dropDown\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayOffsetX]=\"2\"\n  (overlayOutsideClick)=\"toggle($event)\"\n>\n  <div\n    class=\"dropdown-list\"\n    [style.min-width.px]=\"647\"\n    [style.max-width]=\"'100vw'\"\n    #list\n    cdkDrag\n  >\n    <obl-drag-bar\n      (onTouched)=\"onTouchedDragBar($event, list)\"\n      (onClose)=\"close(false)\"\n      cdkDragHandle\n      #dragbar\n    ></obl-drag-bar>\n    @if (filters) {\n      <div class=\"list\">\n        @if (settings) {\n          <div class=\"row\">\n            @if (settingsItems.length) {\n              <obl-dropdown-select\n                [label]=\"'Saved filters:' | oblTranslation : translations()\"\n                [labelAnimation]=\"labelAnimation\"\n                [items]=\"settingsItems\"\n                (changed)=\"setSettings($event)\"\n                #selectedSetting\n              >\n                @if (selectedSetting.selected) {\n                  <ng-container suffix>\n                    <button\n                      oblButton\n                      icon=\"subtract\"\n                      (click)=\"removeSettings(selectedSetting?.selected?.id)\"\n                    ></button>\n                  </ng-container>\n                }\n              </obl-dropdown-select>\n            }\n            <obl-input-wrapper\n              [label]=\"'Setting name:' | oblTranslation : translations()\"\n              [labelAnimation]=\"labelAnimation\"\n              [errors]=\"errors['settingsName']\"\n              [translations]=\"translations()\"\n            >\n              <input\n                oblInput\n                type=\"text\"\n                [required]=\"errors['settingsName']\"\n                (change)=\"check()\"\n                #settingsName\n              />\n              <button\n                suffix\n                oblButton\n                icon=\"save\"\n                (click)=\"saveSettings(settingsName)\"\n              ></button>\n            </obl-input-wrapper>\n          </div>\n        }\n        <obl-filter\n          [filter]=\"filters\"\n          [labelAnimation]=\"labelAnimation\"\n          [names]=\"names()\"\n          [haveParent]=\"false\"\n          [translations]=\"translations()\"\n          [suffix]=\"suffix()\"\n          [filtersType]=\"filtersType()\"\n          (changed)=\"onChanged()\"\n        ></obl-filter>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:root{--obl-spinner-width: 30px;--obl-font-size: 14px}.dropdown-list{background-color:var(--default-background-color);border-radius:5px;border:1px solid var(--default-border-color);display:flex;flex-direction:column;width:100%;max-width:100vw}.dropdown-list.disabled{color:var(--disabled-color)}.dropdown-list>app-filter{margin:5px}.dropdown-list .list{padding:5px;display:flex;flex-direction:column;max-height:300px;overflow:auto;scrollbar-width:thin}.dropdown-list .list::-webkit-scrollbar{width:9px}.dropdown-list .list::-webkit-scrollbar-track{background:transparent}.dropdown-list .list::-webkit-scrollbar-thumb{background-color:#9b9b9b80;border-radius:20px;border:transparent}:host button{--obl-icon-width: 15px}.cdk-drag-preview{background-color:var(--default-background-color);z-index:10000!important}.row{display:flex}.row button{--obl-default-button-padding: 5px}.row button:first-of-type{border-top-left-radius:5px;border-bottom-left-radius:5px}.row button:last-of-type{border-top-right-radius:5px;border-bottom-right-radius:5px}.row obl-dropdown-select,.row obl-input-wrapper{width:100%}\n"] }]
        }], ctorParameters: () => [{ type: FiltersService }, { type: i2.InputWrappersDefaultSettingsService }], propDecorators: { filters: [{
                type: Input
            }], settings: [{
                type: Input
            }], labelAnimation: [{
                type: Input
            }], disabled: [{
                type: Input
            }, {
                type: HostBinding,
                args: ['class.disabled']
            }], settingsChanged: [{
                type: Output
            }], changed: [{
                type: Output
            }], output: [{
                type: Output
            }], selected: [{
                type: ViewChild,
                args: ['selectedSetting']
            }], settingsName: [{
                type: ViewChild,
                args: ['settingsName']
            }] } });

class FiltersModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FiltersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: FiltersModule, declarations: [FiltersComponent,
            FilterComponent], imports: [CommonModule,
            DropdownSelectModule,
            InputModule,
            ButtonsModule,
            SwitcherModule,
            OverlayModule,
            DragDropModule,
            TextPipesModule,
            BadgeDirective], exports: [FiltersComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FiltersModule, imports: [CommonModule,
            DropdownSelectModule,
            InputModule,
            ButtonsModule,
            SwitcherModule,
            OverlayModule,
            DragDropModule,
            TextPipesModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: FiltersModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        FiltersComponent,
                        FilterComponent
                    ],
                    imports: [
                        CommonModule,
                        DropdownSelectModule,
                        InputModule,
                        ButtonsModule,
                        SwitcherModule,
                        OverlayModule,
                        DragDropModule,
                        TextPipesModule,
                        BadgeDirective
                    ],
                    exports: [
                        FiltersComponent
                    ]
                }]
        }] });

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

export { FiltersComponent, FiltersModule, FiltersService };
//# sourceMappingURL=obliczeniowo-elementary-filters.mjs.map