@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-filter.mjs

@@ -0,0 +1,680 @@
+import * as i0 from '@angular/core';
+import { Pipe, Injectable, inject, computed, signal, output, input, model, effect, untracked, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { ButtonGroupComponent } from '@nanahoshi/mona-ui/button-group';
+import { DatePickerComponent } from '@nanahoshi/mona-ui/date-picker';
+import { DropdownListComponent } from '@nanahoshi/mona-ui/dropdown-list';
+import { NumericTextBoxComponent } from '@nanahoshi/mona-ui/numeric-text-box';
+import { TextBoxComponent } from '@nanahoshi/mona-ui/text-box';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { cva } from 'class-variance-authority';
+
+class OperatorFilterPipe {
+    transform(value, visibleOperators) {
+        if (!visibleOperators) {
+            return value;
+        }
+        const operators = Array.from(visibleOperators);
+        if (!operators.length) {
+            return value;
+        }
+        return value
+            .filter(item => operators.includes(item.value))
+            .sort((a, b) => {
+            return operators.indexOf(a.value) - operators.indexOf(b.value);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OperatorFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: OperatorFilterPipe, isStandalone: true, name: "operatorFilter" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OperatorFilterPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "operatorFilter"
+                }]
+        }] });
+
+class ValuelessOperatorPipe {
+    transform(value) {
+        return (value === "isnull" ||
+            value === "isnotnull" ||
+            value === "isempty" ||
+            value === "isnotempty" ||
+            value === "isnullorempty" ||
+            value === "isnotnullorempty");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ValuelessOperatorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: ValuelessOperatorPipe, isStandalone: true, name: "valuelessOperator" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ValuelessOperatorPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "valuelessOperator"
+                }]
+        }] });
+
+class FilterService {
+    constructor() {
+        this.booleanFilterMenuItems = [
+            { text: "Is true", value: "istrue" },
+            { text: "Is false", value: "isfalse" },
+            { text: "Is null", value: "isnull" },
+            { text: "Is not null", value: "isnotnull" }
+        ];
+        this.dateFilterMenuItems = [
+            { text: "Is equal to", value: "eq" },
+            { text: "Is not equal to", value: "neq" },
+            { text: "Is after", value: "gt" },
+            { text: "Is after or equal to", value: "gte" },
+            { text: "Is before", value: "lt" },
+            { text: "Is before or equal to", value: "lte" },
+            { text: "Is null", value: "isnull" },
+            { text: "Is not null", value: "isnotnull" }
+        ];
+        // TODO: Add null and empty filter operators
+        this.numericFilterMenuItems = [
+            { text: "Is equal to", value: "eq" },
+            { text: "Is not equal to", value: "neq" },
+            { text: "Is greater than", value: "gt" },
+            { text: "Is greater than or equal to", value: "gte" },
+            { text: "Is less than", value: "lt" },
+            { text: "Is less than or equal to", value: "lte" },
+            { text: "Is null", value: "isnull" },
+            { text: "Is not null", value: "isnotnull" }
+        ];
+        this.stringFilterMenuItems = [
+            { text: "Contains", value: "contains" },
+            { text: "Does not contain", value: "doesnotcontain" },
+            { text: "Ends with", value: "endswith" },
+            { text: "Starts with", value: "startswith" },
+            { text: "Is equal to", value: "eq" },
+            { text: "Is not equal to", value: "neq" },
+            { text: "Is empty", value: "isempty" },
+            { text: "Is not empty", value: "isnotempty" },
+            { text: "Is null", value: "isnull" },
+            { text: "Is not null", value: "isnotnull" },
+            { text: "Is null or empty", value: "isnullorempty" },
+            { text: "Is not null or empty", value: "isnotnullorempty" }
+        ];
+    }
+    buildBooleanFilterDescriptor(args) {
+        const descriptors = [];
+        const descriptor1 = this.getBooleanDescriptor(args.operator1, args.field);
+        if (descriptor1) {
+            descriptors.push(descriptor1);
+        }
+        if (args.logic) {
+            const descriptor2 = this.getBooleanDescriptor(args.operator2, args.field);
+            if (descriptor2) {
+                descriptors.push(descriptor2);
+            }
+        }
+        return {
+            logic: args.logic || "and",
+            filters: descriptors
+        };
+    }
+    buildDateFilterDescriptor(args) {
+        const descriptors = [];
+        const descriptor1 = this.getDateDescriptor(args.operator1, args.field, args.value1);
+        if (descriptor1) {
+            descriptors.push(descriptor1);
+        }
+        if (args.logic) {
+            const descriptor2 = this.getDateDescriptor(args.operator2, args.field, args.value2);
+            if (descriptor2) {
+                descriptors.push(descriptor2);
+            }
+        }
+        return {
+            logic: args.logic || "and",
+            filters: descriptors
+        };
+    }
+    buildNumberFilterDescriptor(args) {
+        const descriptors = [];
+        const descriptor1 = this.getNumberDescriptor(args.operator1, args.field, args.value1);
+        if (descriptor1) {
+            descriptors.push(descriptor1);
+        }
+        if (args.logic) {
+            const descriptor2 = this.getNumberDescriptor(args.operator2, args.field, args.value2);
+            if (descriptor2) {
+                descriptors.push(descriptor2);
+            }
+        }
+        return {
+            logic: args.logic || "and",
+            filters: descriptors
+        };
+    }
+    buildStringFilterDescriptor(args) {
+        const descriptors = [];
+        const descriptor1 = this.getStringDescriptor(args.operator1, args.field, args.value1);
+        if (descriptor1) {
+            descriptors.push(descriptor1);
+        }
+        if (args.logic) {
+            const descriptor2 = this.getStringDescriptor(args.operator2, args.field, args.value2);
+            if (descriptor2) {
+                descriptors.push(descriptor2);
+            }
+        }
+        return {
+            logic: args.logic || "and",
+            filters: descriptors
+        };
+    }
+    getBooleanDescriptor(operator, field) {
+        if (operator === "isnotnull" || operator === "isnull") {
+            return { field, operator };
+        }
+        else if (operator === "istrue") {
+            return { field, operator };
+        }
+        else if (operator === "isfalse") {
+            return { field, operator };
+        }
+        return null;
+    }
+    getDateDescriptor(operator, field, value) {
+        if (operator === "isnotnull" || operator === "isnull") {
+            return { field, operator };
+        }
+        else if (value != null) {
+            return { field, operator, value };
+        }
+        return null;
+    }
+    getNumberDescriptor(operator, field, value) {
+        if (operator === "isnotnull" || operator === "isnull") {
+            return { field, operator };
+        }
+        else if (value != null) {
+            return { field, operator, value };
+        }
+        return null;
+    }
+    getStringDescriptor(operator, field, value) {
+        if (operator === "isnotnull" || operator === "isnull") {
+            return { field, operator };
+        }
+        else if (operator === "isempty" || operator === "isnotempty") {
+            return { field, operator };
+        }
+        else if (operator === "isnullorempty" || operator === "isnotnullorempty") {
+            return { field, operator };
+        }
+        else if (value != null) {
+            return { field, operator, value };
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FilterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FilterService, decorators: [{
+            type: Injectable
+        }] });
+
+const filterMenuBaseVariants = cva(`
+        w-full flex flex-col
+        p-1 gap-2
+        bg-background-dark border border-border
+        shadow-lg
+    `, {
+    variants: {
+        rounded: {
+            none: "rounded-none",
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg"
+        },
+        size: {
+            small: "",
+            medium: "",
+            large: ""
+        }
+    }
+});
+const filterMenuItemVariants = cva(`
+        flex flex-col gap-1
+        [&>mona-button-group>button]:flex-1
+    `);
+const filterMenuActionVariants = cva(`
+        flex flex-row
+        items-center justify-center
+        gap-1 [&>button]:flex-1
+    `);
+
+const filterMenuBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return filterMenuBaseVariants;
+        default:
+            return filterMenuBaseVariants;
+    }
+};
+const filterMenuActionsThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return filterMenuActionVariants;
+        default:
+            return filterMenuActionVariants;
+    }
+};
+const filterMenuItemThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return filterMenuItemVariants;
+        default:
+            return filterMenuItemVariants;
+    }
+};
+
+class FilterMenuComponent {
+    #booleanFilterValues;
+    #filterService;
+    #themeService;
+    constructor() {
+        this.#booleanFilterValues = [null, null];
+        this.#filterService = inject(FilterService);
+        this.#themeService = inject(ThemeService);
+        this.applyDisabled = computed(() => {
+            if (!this.firstFilterValid()) {
+                return true;
+            }
+            return !!(this.selectedConnectorItem() && !this.secondFilterValid());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "applyDisabled" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return filterMenuBaseThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.booleanFilterMenuDataItems = this.#filterService.booleanFilterMenuItems;
+        this.connectorDataItems = [
+            { text: "AND", value: "and" },
+            { text: "OR", value: "or" }
+        ];
+        this.dateFilterMenuDataItems = this.#filterService.dateFilterMenuItems;
+        this.dateFilterValues = signal([null, null], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dateFilterValues" }] : /* istanbul ignore next */ []));
+        this.effectiveDateOptions = computed(() => {
+            const type = this.type();
+            const dateOptions = this.dateOptions();
+            if (type !== "date") {
+                return dateOptions;
+            }
+            if (dateOptions.type === type) {
+                return dateOptions;
+            }
+            return {
+                format: this.getDefaultDateFormat(type),
+                type
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveDateOptions" }] : /* istanbul ignore next */ []));
+        this.filterMenuActionsClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return filterMenuActionsThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterMenuActionsClass" }] : /* istanbul ignore next */ []));
+        this.filterMenuItemClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return filterMenuItemThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterMenuItemClass" }] : /* istanbul ignore next */ []));
+        this.firstFilterValid = computed(() => {
+            const operator = this.selectedFilterMenuDataItemList()[0]?.value;
+            const type = this.type();
+            const stringFilterValues = this.stringFilterValues();
+            const numberFilterValues = this.numberFilterValues();
+            const dateFilterValues = this.dateFilterValues();
+            if (!operator) {
+                return false;
+            }
+            if (operator === "isnull" || operator === "isnotnull") {
+                return true;
+            }
+            switch (type) {
+                case "string":
+                    if (operator === "isempty" ||
+                        operator === "isnotempty" ||
+                        operator === "isnullorempty" ||
+                        operator === "isnotnullorempty") {
+                        return true;
+                    }
+                    return stringFilterValues[0] !== "";
+                case "number":
+                    return numberFilterValues[0] !== null;
+                case "date":
+                    return dateFilterValues[0] !== null;
+                case "boolean":
+                    return true;
+                default:
+                    return false;
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "firstFilterValid" }] : /* istanbul ignore next */ []));
+        this.numberFilterValues = signal([null, null], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "numberFilterValues" }] : /* istanbul ignore next */ []));
+        this.numericFilterMenuDataItems = this.#filterService.numericFilterMenuItems;
+        this.secondFilterValid = computed(() => {
+            const operator = this.selectedFilterMenuDataItemList()[1]?.value;
+            const type = this.type();
+            const stringFilterValues = this.stringFilterValues();
+            const numberFilterValues = this.numberFilterValues();
+            const dateFilterValues = this.dateFilterValues();
+            if (!operator) {
+                return false;
+            }
+            if (operator === "isnull" || operator === "isnotnull") {
+                return true;
+            }
+            switch (type) {
+                case "string":
+                    if (operator === "isempty" ||
+                        operator === "isnotempty" ||
+                        operator === "isnullorempty" ||
+                        operator === "isnotnullorempty") {
+                        return true;
+                    }
+                    return stringFilterValues[1] !== "";
+                case "number":
+                    return numberFilterValues[1] !== null;
+                case "date":
+                    return dateFilterValues[1] !== null;
+                case "boolean":
+                    return true;
+                default:
+                    return false;
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "secondFilterValid" }] : /* istanbul ignore next */ []));
+        this.selectedConnectorItem = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedConnectorItem" }] : /* istanbul ignore next */ []));
+        this.selectedFilterMenuDataItemList = signal([
+            undefined,
+            undefined
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedFilterMenuDataItemList" }] : /* istanbul ignore next */ []));
+        this.stringFilterMenuDataItems = this.#filterService.stringFilterMenuItems;
+        this.stringFilterValues = signal(["", ""], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stringFilterValues" }] : /* istanbul ignore next */ []));
+        this.apply = output();
+        this.dateOptions = input({
+            format: "dd/MM/yyyy",
+            type: "date"
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dateOptions" }] : /* istanbul ignore next */ []));
+        this.field = model("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+        this.operators = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "operators" }] : /* istanbul ignore next */ []));
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.type = model("string", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.value = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const value = this.value();
+            if (value) {
+                untracked(() => {
+                    this.setFilterValues(value);
+                });
+            }
+        });
+    }
+    onConnectorChange(item, selected) {
+        if (selected) {
+            this.selectedConnectorItem.set(item);
+        }
+        else if (item.value === this.selectedConnectorItem()?.value) {
+            this.selectedConnectorItem.set(null);
+        }
+    }
+    onFilterApply() {
+        if (!this.selectedConnectorItem()) {
+            this.clearSecondFilterValues();
+        }
+        if (this.type() === "string") {
+            this.applyStringFilters();
+        }
+        else if (this.type() === "number") {
+            this.applyNumberFilters();
+        }
+        else if (this.type() === "date") {
+            this.applyDateFilters();
+        }
+        else if (this.type() === "boolean") {
+            this.applyBooleanFilters();
+        }
+    }
+    onFilterClear() {
+        this.numberFilterValues.set([null, null]);
+        this.stringFilterValues.set(["", ""]);
+        this.dateFilterValues.set([null, null]);
+        this.#booleanFilterValues = [null, null];
+        this.selectedFilterMenuDataItemList.set([undefined, undefined]);
+        this.selectedConnectorItem.set(null);
+        this.apply.emit({
+            logic: "and",
+            filters: []
+        });
+    }
+    onFilterOperatorChange(index, item) {
+        this.selectedFilterMenuDataItemList.update(list => {
+            list[index] = item;
+            return [...list];
+        });
+    }
+    getFilterValues() {
+        const filterValue = (target) => {
+            return {
+                operator1: this.selectedFilterMenuDataItemList()[0]?.value,
+                value1: target[0],
+                logic: this.selectedConnectorItem()?.value,
+                operator2: this.selectedFilterMenuDataItemList()[1]?.value,
+                value2: target[1]
+            };
+        };
+        switch (this.type()) {
+            case "string":
+                return filterValue(this.stringFilterValues());
+            case "number":
+                return filterValue(this.numberFilterValues());
+            case "date":
+                return filterValue(this.dateFilterValues());
+            case "boolean":
+                return filterValue(this.#booleanFilterValues);
+            default:
+                return {
+                    operator1: undefined,
+                    value1: null,
+                    logic: undefined,
+                    operator2: undefined,
+                    value2: null
+                };
+        }
+    }
+    applyBooleanFilters() {
+        const operator1 = this.selectedFilterMenuDataItemList()[0]?.value;
+        const operator2 = this.selectedFilterMenuDataItemList()[1]?.value;
+        const field = this.field();
+        const logic = this.selectedConnectorItem()?.value ?? null;
+        const descriptor = this.#filterService.buildBooleanFilterDescriptor({
+            field,
+            logic,
+            operator1,
+            operator2,
+            value1: true,
+            value2: true
+        });
+        this.apply.emit(descriptor);
+    }
+    applyDateFilters() {
+        const value1 = this.dateFilterValues()[0];
+        const value2 = this.dateFilterValues()[1];
+        const operator1 = this.selectedFilterMenuDataItemList()[0]?.value;
+        const operator2 = this.selectedFilterMenuDataItemList()[1]?.value;
+        const field = this.field();
+        const logic = this.selectedConnectorItem()?.value ?? null;
+        const descriptor = this.#filterService.buildDateFilterDescriptor({
+            field,
+            logic,
+            operator1,
+            operator2,
+            value1,
+            value2
+        });
+        this.apply.emit(descriptor);
+    }
+    applyNumberFilters() {
+        const value1 = this.numberFilterValues()[0];
+        const value2 = this.numberFilterValues()[1];
+        const operator1 = this.selectedFilterMenuDataItemList()[0]?.value;
+        const operator2 = this.selectedFilterMenuDataItemList()[1]?.value;
+        const field = this.field();
+        const logic = this.selectedConnectorItem()?.value ?? null;
+        const descriptor = this.#filterService.buildNumberFilterDescriptor({
+            field,
+            logic,
+            operator1,
+            operator2,
+            value1,
+            value2
+        });
+        this.apply.emit(descriptor);
+    }
+    applyStringFilters() {
+        const value1 = this.stringFilterValues()[0];
+        const value2 = this.stringFilterValues()[1];
+        const operator1 = this.selectedFilterMenuDataItemList()[0]?.value;
+        const operator2 = this.selectedFilterMenuDataItemList()[1]?.value;
+        const field = this.field();
+        const logic = this.selectedConnectorItem()?.value ?? null;
+        const descriptor = this.#filterService.buildStringFilterDescriptor({
+            field,
+            logic,
+            operator1,
+            operator2,
+            value1,
+            value2
+        });
+        this.apply.emit(descriptor);
+    }
+    clearSecondFilterValues() {
+        this.selectedFilterMenuDataItemList.set([this.selectedFilterMenuDataItemList()[0], undefined]);
+        switch (this.type()) {
+            case "string":
+                this.stringFilterValues.set([this.stringFilterValues()[0], ""]);
+                break;
+            case "number":
+                this.numberFilterValues.set([this.numberFilterValues()[0], null]);
+                break;
+            case "date":
+                this.dateFilterValues.set([this.dateFilterValues()[0], null]);
+                break;
+            case "boolean":
+                this.#booleanFilterValues[1] = null;
+                break;
+            default:
+                break;
+        }
+    }
+    setFilterValues(values) {
+        let filterMenuDataItems;
+        let filterValues;
+        switch (this.type()) {
+            case "string":
+                filterMenuDataItems = this.stringFilterMenuDataItems;
+                filterValues = [values.value1 ?? "", values.value2 ?? ""];
+                break;
+            case "number":
+                filterMenuDataItems = this.numericFilterMenuDataItems;
+                filterValues = [values.value1 ?? null, values.value2 ?? null];
+                break;
+            case "date":
+            case "boolean":
+                filterMenuDataItems =
+                    this.type() !== "boolean" ? this.dateFilterMenuDataItems : this.booleanFilterMenuDataItems;
+                filterValues = [values.value1 ?? null, values.value2 ?? null];
+                break;
+            default:
+                filterMenuDataItems = [];
+                filterValues = [null, null];
+                break;
+        }
+        this.selectedFilterMenuDataItemList.set([
+            filterMenuDataItems.find(f => f.value === values.operator1) ?? undefined,
+            filterMenuDataItems.find(f => f.value === values.operator2) ?? undefined
+        ]);
+        switch (this.type()) {
+            case "string":
+                this.stringFilterValues.set(filterValues);
+                break;
+            case "number":
+                this.numberFilterValues.set(filterValues);
+                break;
+            case "date":
+                this.dateFilterValues.set(filterValues);
+                break;
+            case "boolean":
+                this.#booleanFilterValues = filterValues;
+                break;
+            default:
+                break;
+        }
+        const selectedConnectorItem = values.operator2 && values.logic
+            ? (this.connectorDataItems.find(c => c.value === values.logic) ?? null)
+            : null;
+        this.selectedConnectorItem.set(selectedConnectorItem);
+    }
+    getDefaultDateFormat(type) {
+        switch (type) {
+            case "datetime":
+                return "dd/MM/yyyy HH:mm";
+            case "time":
+                return "HH:mm";
+            case "date":
+                return "dd/MM/yyyy";
+            default:
+                return "dd/MM/yyyy";
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FilterMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: FilterMenuComponent, isStandalone: true, selector: "mona-filter-menu", inputs: { dateOptions: { classPropertyName: "dateOptions", publicName: "dateOptions", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, operators: { classPropertyName: "operators", publicName: "operators", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", field: "fieldChange", operators: "operatorsChange", type: "typeChange", value: "valueChange" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "<div [class]=\"filterMenuItemClass()\">\r\n    @if (type() === \"string\") {\r\n        <mona-dropdown-list\r\n            [data]=\"stringFilterMenuDataItems | operatorFilter: operators()\"\r\n            textField=\"text\"\r\n            valueField=\"value\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\r\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\r\n        <mona-text-box\r\n            [ngModel]=\"stringFilterValues()[0]\"\r\n            (ngModelChange)=\"stringFilterValues.set([$event, stringFilterValues()[1]])\"\r\n            [size]=\"size()\"\r\n            [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-text-box>\r\n    }\r\n\r\n    @if (type() === \"number\") {\r\n        <mona-dropdown-list\r\n            [data]=\"numericFilterMenuDataItems | operatorFilter: operators()\"\r\n            textField=\"text\"\r\n            valueField=\"value\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\r\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\r\n        <mona-numeric-text-box\r\n            [ngModel]=\"numberFilterValues()[0]\"\r\n            (ngModelChange)=\"numberFilterValues.set([$event, numberFilterValues()[1]])\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-numeric-text-box>\r\n    }\r\n\r\n    @if (type() === \"date\") {\r\n        <mona-dropdown-list\r\n            [data]=\"dateFilterMenuDataItems | operatorFilter: operators()\"\r\n            textField=\"text\"\r\n            valueField=\"value\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\r\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\r\n\r\n        @if (type() === \"date\") {\r\n            <mona-date-picker\r\n                [ngModel]=\"dateFilterValues()[0]\"\r\n                (ngModelChange)=\"dateFilterValues.set([$event, dateFilterValues()[1]])\"\r\n                [format]=\"effectiveDateOptions().format\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-date-picker>\r\n        }\r\n    }\r\n\r\n    @if (type() === \"boolean\") {\r\n        <mona-dropdown-list\r\n            [data]=\"booleanFilterMenuDataItems | operatorFilter: operators()\"\r\n            textField=\"text\"\r\n            valueField=\"value\"\r\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\r\n    }\r\n</div>\r\n@if (firstFilterValid()) {\r\n    <div [class]=\"filterMenuItemClass()\">\r\n        <mona-button-group selection=\"single\" [size]=\"size()\" [rounded]=\"rounded()\" [disabled]=\"!firstFilterValid()\">\r\n            @for (item of connectorDataItems; track item) {\r\n                <button\r\n                    monaButton\r\n                    [selected]=\"item.value === selectedConnectorItem()?.value\"\r\n                    (selectedChange)=\"onConnectorChange(item, $event)\">\r\n                    {{ item.text }}\r\n                </button>\r\n            }\r\n        </mona-button-group>\r\n    </div>\r\n}\r\n@if (!!selectedConnectorItem()) {\r\n    <div [class]=\"filterMenuItemClass()\">\r\n        @if (type() === \"string\") {\r\n            <mona-dropdown-list\r\n                [data]=\"stringFilterMenuDataItems | operatorFilter: operators()\"\r\n                textField=\"text\"\r\n                valueField=\"value\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\r\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\r\n            <mona-text-box\r\n                [ngModel]=\"stringFilterValues()[1]\"\r\n                (ngModelChange)=\"stringFilterValues.set([stringFilterValues()[0], $event])\"\r\n                [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-text-box>\r\n        }\r\n\r\n        @if (type() === \"number\") {\r\n            <mona-dropdown-list\r\n                [data]=\"numericFilterMenuDataItems | operatorFilter: operators()\"\r\n                textField=\"text\"\r\n                valueField=\"value\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\r\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\r\n\r\n            <mona-numeric-text-box\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [ngModel]=\"numberFilterValues()[1]\"\r\n                (ngModelChange)=\"numberFilterValues.set([numberFilterValues()[0], $event])\"\r\n                [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-numeric-text-box>\r\n        }\r\n\r\n        @if (type() === \"date\") {\r\n            <mona-dropdown-list\r\n                [data]=\"dateFilterMenuDataItems | operatorFilter: operators()\"\r\n                textField=\"text\"\r\n                valueField=\"value\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\r\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\r\n\r\n            @if (type() === \"date\") {\r\n                <mona-date-picker\r\n                    [ngModel]=\"dateFilterValues()[1]\"\r\n                    (ngModelChange)=\"dateFilterValues.set([dateFilterValues()[0], $event])\"\r\n                    [format]=\"effectiveDateOptions().format\"\r\n                    [size]=\"size()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-date-picker>\r\n            }\r\n        }\r\n\r\n        @if (type() === \"boolean\") {\r\n            <mona-dropdown-list\r\n                [data]=\"booleanFilterMenuDataItems | operatorFilter: operators()\"\r\n                textField=\"text\"\r\n                valueField=\"value\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\r\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\r\n        }\r\n    </div>\r\n}\r\n<div [class]=\"`${filterMenuItemClass()} ${filterMenuActionsClass()}`\">\r\n    <button\r\n        monaButton\r\n        (click)=\"onFilterApply()\"\r\n        [look]=\"'primary'\"\r\n        [size]=\"size()\"\r\n        [rounded]=\"rounded()\"\r\n        [disabled]=\"applyDisabled()\">\r\n        Apply\r\n    </button>\r\n    <button monaButton (click)=\"onFilterClear()\" [look]=\"'default'\" [size]=\"size()\" [rounded]=\"rounded()\">Clear</button>\r\n</div>\r\n", dependencies: [{ kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "itemDisabled", "invalid", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "valueField", "value"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "maxValue", "minValue", "nullable", "readonly", "required", "invalid", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "component", type: DatePickerComponent, selector: "mona-date-picker", inputs: ["disabled", "disabledDates", "firstDay", "format", "invalid", "max", "min", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "readonlyInput", "required", "rounded", "showClearButton", "size", "touched", "class", "value", "weekNumber"], outputs: ["close", "closed", "open", "opened", "touch", "valueChange"] }, { kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "pipe", type: ValuelessOperatorPipe, name: "valuelessOperator" }, { kind: "pipe", type: OperatorFilterPipe, name: "operatorFilter" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FilterMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-filter-menu", imports: [
+                        DropdownListComponent,
+                        FormsModule,
+                        TextBoxComponent,
+                        NumericTextBoxComponent,
+                        DatePickerComponent,
+                        ButtonGroupComponent,
+                        ButtonDirective,
+                        ValuelessOperatorPipe,
+                        OperatorFilterPipe
+                    ], host: {
+                        "[class]": "baseClass()"
+                    }, template: "<div [class]=\"filterMenuItemClass()\">\r\n    @if (type() === \"string\") {\r\n        <mona-dropdown-list\r\n            [data]=\"stringFilterMenuDataItems | operatorFilter: operators()\"\r\n            textField=\"text\"\r\n            valueField=\"value\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\r\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\r\n        <mona-text-box\r\n            [ngModel]=\"stringFilterValues()[0]\"\r\n            (ngModelChange)=\"stringFilterValues.set([$event, stringFilterValues()[1]])\"\r\n            [size]=\"size()\"\r\n            [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-text-box>\r\n    }\r\n\r\n    @if (type() === \"number\") {\r\n        <mona-dropdown-list\r\n            [data]=\"numericFilterMenuDataItems | operatorFilter: operators()\"\r\n            textField=\"text\"\r\n            valueField=\"value\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\r\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\r\n        <mona-numeric-text-box\r\n            [ngModel]=\"numberFilterValues()[0]\"\r\n            (ngModelChange)=\"numberFilterValues.set([$event, numberFilterValues()[1]])\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-numeric-text-box>\r\n    }\r\n\r\n    @if (type() === \"date\") {\r\n        <mona-dropdown-list\r\n            [data]=\"dateFilterMenuDataItems | operatorFilter: operators()\"\r\n            textField=\"text\"\r\n            valueField=\"value\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\r\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\r\n\r\n        @if (type() === \"date\") {\r\n            <mona-date-picker\r\n                [ngModel]=\"dateFilterValues()[0]\"\r\n                (ngModelChange)=\"dateFilterValues.set([$event, dateFilterValues()[1]])\"\r\n                [format]=\"effectiveDateOptions().format\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-date-picker>\r\n        }\r\n    }\r\n\r\n    @if (type() === \"boolean\") {\r\n        <mona-dropdown-list\r\n            [data]=\"booleanFilterMenuDataItems | operatorFilter: operators()\"\r\n            textField=\"text\"\r\n            valueField=\"value\"\r\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\r\n    }\r\n</div>\r\n@if (firstFilterValid()) {\r\n    <div [class]=\"filterMenuItemClass()\">\r\n        <mona-button-group selection=\"single\" [size]=\"size()\" [rounded]=\"rounded()\" [disabled]=\"!firstFilterValid()\">\r\n            @for (item of connectorDataItems; track item) {\r\n                <button\r\n                    monaButton\r\n                    [selected]=\"item.value === selectedConnectorItem()?.value\"\r\n                    (selectedChange)=\"onConnectorChange(item, $event)\">\r\n                    {{ item.text }}\r\n                </button>\r\n            }\r\n        </mona-button-group>\r\n    </div>\r\n}\r\n@if (!!selectedConnectorItem()) {\r\n    <div [class]=\"filterMenuItemClass()\">\r\n        @if (type() === \"string\") {\r\n            <mona-dropdown-list\r\n                [data]=\"stringFilterMenuDataItems | operatorFilter: operators()\"\r\n                textField=\"text\"\r\n                valueField=\"value\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\r\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\r\n            <mona-text-box\r\n                [ngModel]=\"stringFilterValues()[1]\"\r\n                (ngModelChange)=\"stringFilterValues.set([stringFilterValues()[0], $event])\"\r\n                [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-text-box>\r\n        }\r\n\r\n        @if (type() === \"number\") {\r\n            <mona-dropdown-list\r\n                [data]=\"numericFilterMenuDataItems | operatorFilter: operators()\"\r\n                textField=\"text\"\r\n                valueField=\"value\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\r\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\r\n\r\n            <mona-numeric-text-box\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [ngModel]=\"numberFilterValues()[1]\"\r\n                (ngModelChange)=\"numberFilterValues.set([numberFilterValues()[0], $event])\"\r\n                [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-numeric-text-box>\r\n        }\r\n\r\n        @if (type() === \"date\") {\r\n            <mona-dropdown-list\r\n                [data]=\"dateFilterMenuDataItems | operatorFilter: operators()\"\r\n                textField=\"text\"\r\n                valueField=\"value\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\r\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\r\n\r\n            @if (type() === \"date\") {\r\n                <mona-date-picker\r\n                    [ngModel]=\"dateFilterValues()[1]\"\r\n                    (ngModelChange)=\"dateFilterValues.set([dateFilterValues()[0], $event])\"\r\n                    [format]=\"effectiveDateOptions().format\"\r\n                    [size]=\"size()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-date-picker>\r\n            }\r\n        }\r\n\r\n        @if (type() === \"boolean\") {\r\n            <mona-dropdown-list\r\n                [data]=\"booleanFilterMenuDataItems | operatorFilter: operators()\"\r\n                textField=\"text\"\r\n                valueField=\"value\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\r\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\r\n        }\r\n    </div>\r\n}\r\n<div [class]=\"`${filterMenuItemClass()} ${filterMenuActionsClass()}`\">\r\n    <button\r\n        monaButton\r\n        (click)=\"onFilterApply()\"\r\n        [look]=\"'primary'\"\r\n        [size]=\"size()\"\r\n        [rounded]=\"rounded()\"\r\n        [disabled]=\"applyDisabled()\">\r\n        Apply\r\n    </button>\r\n    <button monaButton (click)=\"onFilterClear()\" [look]=\"'default'\" [size]=\"size()\" [rounded]=\"rounded()\">Clear</button>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { apply: [{ type: i0.Output, args: ["apply"] }], dateOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateOptions", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }, { type: i0.Output, args: ["fieldChange"] }], operators: [{ type: i0.Input, args: [{ isSignal: true, alias: "operators", required: false }] }, { type: i0.Output, args: ["operatorsChange"] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }, { type: i0.Output, args: ["typeChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/filter
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FilterMenuComponent, FilterService };
+//# sourceMappingURL=nanahoshi-mona-ui-filter.mjs.map