cax-design-system 2.7.2 → 2.7.4

package/fesm2022/cax-design-system-table.mjs

@@ -3467,7 +3467,7 @@ class ColumnFilterFormElement {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ColumnFilterFormElement, deps: [{ token: Table }, { token: ColumnFilter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: ColumnFilterFormElement, isStandalone: true, selector: "cax-columnFilterFormElement", inputs: { field: "field", type: "type", filterConstraint: "filterConstraint", filterTemplate: "filterTemplate", placeholder: "placeholder", minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], ariaLabel: "ariaLabel" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<ng-container *ngIf=\"filterTemplate; else builtInElement\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            filterTemplate;\r\n            context: {\r\n                $implicit: filterConstraint.value,\r\n                filterCallback: filterCallback,\r\n                type: type,\r\n                field: field,\r\n                filterConstraint: filterConstraint,\r\n                placeholder: placeholder,\r\n                minFractionDigits: minFractionDigits,\r\n                maxFractionDigits: maxFractionDigits,\r\n                prefix: prefix,\r\n                suffix: suffix,\r\n                locale: locale,\r\n                localeMatcher: localeMatcher,\r\n                currency: currency,\r\n                currencyDisplay: currencyDisplay,\r\n                useGrouping: useGrouping,\r\n                showButtons: showButtons\r\n            }\r\n        \"\r\n    ></ng-container>\r\n</ng-container>\r\n<ng-template #builtInElement>\r\n    <ng-container [ngSwitch]=\"type\">\r\n        <input\r\n            *ngSwitchCase=\"'text'\"\r\n            type=\"text\"\r\n            [ariaLabel]=\"ariaLabel\"\r\n            caxInputText\r\n            [value]=\"filterConstraint?.value\"\r\n            (input)=\"onModelChange($event.target.value)\"\r\n            (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\r\n            [attr.placeholder]=\"placeholder\"\r\n        />\r\n        <cax-inputNumber\r\n            *ngSwitchCase=\"'numeric'\"\r\n            [ngModel]=\"filterConstraint?.value\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            (onKeyDown)=\"onNumericInputKeyDown($event)\"\r\n            [showButtons]=\"showButtons\"\r\n            [minFractionDigits]=\"minFractionDigits\"\r\n            [maxFractionDigits]=\"maxFractionDigits\"\r\n            [ariaLabel]=\"ariaLabel\"\r\n            [prefix]=\"prefix\"\r\n            [suffix]=\"suffix\"\r\n            [placeholder]=\"placeholder\"\r\n            [mode]=\"currency ? 'currency' : 'decimal'\"\r\n            [locale]=\"locale\"\r\n            [localeMatcher]=\"localeMatcher\"\r\n            [currency]=\"currency\"\r\n            [currencyDisplay]=\"currencyDisplay\"\r\n            [useGrouping]=\"useGrouping\"\r\n        ></cax-inputNumber>\r\n        <cax-triStateCheckbox [ariaLabel]=\"ariaLabel\" *ngSwitchCase=\"'boolean'\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\"></cax-triStateCheckbox>\r\n        <cax-calendar [ariaLabel]=\"ariaLabel\" *ngSwitchCase=\"'date'\" [placeholder]=\"placeholder\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\" appendTo=\"body\"></cax-calendar>\r\n    </ng-container>\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputtextDirective, selector: "[caxInputText]", inputs: ["placeholder", "disabled", "variant"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i6$1.Calendar, selector: "cax-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "leftIcon", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i7.InputNumber, selector: "cax-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefixIcon", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: TriStateCheckboxModule }, { kind: "component", type: i8.TriStateCheckbox, selector: "cax-triStateCheckbox", inputs: ["disabled", "name", "ariaLabel", "ariaLabelledBy", "variant", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon", "autofocus"], outputs: ["onChange"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: ColumnFilterFormElement, isStandalone: true, selector: "cax-columnFilterFormElement", inputs: { field: "field", type: "type", filterConstraint: "filterConstraint", filterTemplate: "filterTemplate", placeholder: "placeholder", minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], ariaLabel: "ariaLabel" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<ng-container *ngIf=\"filterTemplate; else builtInElement\">\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            filterTemplate;\r\n            context: {\r\n                $implicit: filterConstraint.value,\r\n                filterCallback: filterCallback,\r\n                type: type,\r\n                field: field,\r\n                filterConstraint: filterConstraint,\r\n                placeholder: placeholder,\r\n                minFractionDigits: minFractionDigits,\r\n                maxFractionDigits: maxFractionDigits,\r\n                prefix: prefix,\r\n                suffix: suffix,\r\n                locale: locale,\r\n                localeMatcher: localeMatcher,\r\n                currency: currency,\r\n                currencyDisplay: currencyDisplay,\r\n                useGrouping: useGrouping,\r\n                showButtons: showButtons\r\n            }\r\n        \"\r\n    ></ng-container>\r\n</ng-container>\r\n<ng-template #builtInElement>\r\n    <ng-container [ngSwitch]=\"type\">\r\n        <input\r\n            *ngSwitchCase=\"'text'\"\r\n            type=\"text\"\r\n            [ariaLabel]=\"ariaLabel\"\r\n            caxInputText\r\n            [value]=\"filterConstraint?.value\"\r\n            (input)=\"onModelChange($event.target.value)\"\r\n            (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\r\n            [attr.placeholder]=\"placeholder\"\r\n        />\r\n        <cax-inputNumber\r\n            *ngSwitchCase=\"'numeric'\"\r\n            [ngModel]=\"filterConstraint?.value\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            (onKeyDown)=\"onNumericInputKeyDown($event)\"\r\n            [showButtons]=\"showButtons\"\r\n            [minFractionDigits]=\"minFractionDigits\"\r\n            [maxFractionDigits]=\"maxFractionDigits\"\r\n            [ariaLabel]=\"ariaLabel\"\r\n            [prefix]=\"prefix\"\r\n            [suffix]=\"suffix\"\r\n            [placeholder]=\"placeholder\"\r\n            [mode]=\"currency ? 'currency' : 'decimal'\"\r\n            [locale]=\"locale\"\r\n            [localeMatcher]=\"localeMatcher\"\r\n            [currency]=\"currency\"\r\n            [currencyDisplay]=\"currencyDisplay\"\r\n            [useGrouping]=\"useGrouping\"\r\n        ></cax-inputNumber>\r\n        <cax-triStateCheckbox [ariaLabel]=\"ariaLabel\" *ngSwitchCase=\"'boolean'\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\"></cax-triStateCheckbox>\r\n        <cax-calendar [ariaLabel]=\"ariaLabel\" *ngSwitchCase=\"'date'\" [placeholder]=\"placeholder\" [ngModel]=\"filterConstraint?.value\" (ngModelChange)=\"onModelChange($event)\" appendTo=\"body\"></cax-calendar>\r\n    </ng-container>\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4.InputtextDirective, selector: "[caxInputText]", inputs: ["placeholder", "disabled", "variant"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i6$1.Calendar, selector: "cax-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "leftIcon", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onInlineSaved", "onInlineCancelled", "onShow"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i7.InputNumber, selector: "cax-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefixIcon", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: TriStateCheckboxModule }, { kind: "component", type: i8.TriStateCheckbox, selector: "cax-triStateCheckbox", inputs: ["disabled", "name", "ariaLabel", "ariaLabelledBy", "variant", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon", "autofocus"], outputs: ["onChange"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ColumnFilterFormElement, decorators: [{
             type: Component,
@@ -4254,7 +4254,7 @@ class ColumnFilter {
         this.hide();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ColumnFilter, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: Table }, { token: i0.Renderer2 }, { token: i2.caxConfig }, { token: i2.OverlayService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: ColumnFilter, isStandalone: true, selector: "cax-columnFilter", inputs: { field: "field", type: "type", disabled: "disabled", display: "display", showMenu: ["showMenu", "showMenu", booleanAttribute], matchMode: "matchMode", operator: "operator", showOperator: ["showOperator", "showOperator", booleanAttribute], showClearButton: ["showClearButton", "showClearButton", booleanAttribute], showApplyButton: ["showApplyButton", "showApplyButton", booleanAttribute], showMatchModes: ["showMatchModes", "showMatchModes", booleanAttribute], showAddButton: ["showAddButton", "showAddButton", booleanAttribute], hideOnClear: ["hideOnClear", "hideOnClear", booleanAttribute], placeholder: "placeholder", matchModeOptions: "matchModeOptions", maxConstraints: ["maxConstraints", "maxConstraints", numberAttribute], minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], showButtons: ["showButtons", "showButtons", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true }, { propertyName: "clearButtonViewChild", first: true, predicate: ["clearBtn"], descendants: true }], ngImport: i0, template: "<div\r\n    class=\"cax-column-filter\"\r\n    [ngClass]=\"{ 'cax-column-filter-row': display === 'row' && dt.filterType === 'default', 'cax-column-filter-menu': display === 'menu' && dt.filterType === 'default', 'cax-column-filter-custom':  dt.filterType === 'custom' }\"\r\n>\r\n    <cax-columnFilterFormElement\r\n        *ngIf=\"display === 'row' && dt.filterType === 'default'\"\r\n        class=\"cax-fluid\"\r\n        [type]=\"type\"\r\n        [field]=\"field\"\r\n        [ariaLabel]=\"ariaLabel\"\r\n        [filterConstraint]=\"dt.filters[field]\"\r\n        [filterTemplate]=\"filterTemplate\"\r\n        [placeholder]=\"placeholder\"\r\n        [minFractionDigits]=\"minFractionDigits\"\r\n        [maxFractionDigits]=\"maxFractionDigits\"\r\n        [prefix]=\"prefix\"\r\n        [suffix]=\"suffix\"\r\n        [locale]=\"locale\"\r\n        [localeMatcher]=\"localeMatcher\"\r\n        [currency]=\"currency\"\r\n        [currencyDisplay]=\"currencyDisplay\"\r\n        [useGrouping]=\"useGrouping\"\r\n        [showButtons]=\"showButtons\"\r\n    ></cax-columnFilterFormElement>\r\n    <button\r\n        #icon\r\n        *ngIf=\"showMenuButton\"\r\n        type=\"button\"\r\n        class=\"cax-column-filter-menu-button cax-link\"\r\n        aria-haspopup=\"true\"\r\n        [attr.aria-label]=\"filterMenuButtonAriaLabel\"\r\n        [attr.aria-controls]=\"overlayVisible ? overlayId : null\"\r\n        [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n        [disabled]=\"disabled\"\r\n        [ngClass]=\"{ 'cax-column-filter-menu-button-open': overlayVisible, 'cax-column-filter-menu-button-active': hasFilter() }\"\r\n        (click)=\"toggleMenu()\"\r\n        (keydown)=\"onToggleButtonKeyDown($event)\"\r\n    >\r\n        <i *ngIf=\"!filterIconTemplate\" [styleClass]=\"'pi-filter-icon'\" class=\"cax cax-filter\"></i>\r\n        <span class=\"pi-filter-icon\" *ngIf=\"filterIconTemplate\">\r\n            <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\r\n        </span>\r\n    </button>\r\n    <button\r\n        #icon\r\n        *ngIf=\"showClearButton && display === 'row' && dt.filterType === 'default'\"\r\n        [ngClass]=\"{ 'cax-hidden-space': !hasRowFilter() }\"\r\n        type=\"button\"\r\n        class=\"cax-column-filter-clear-button cax-link\"\r\n        (click)=\"clearFilter()\"\r\n        [attr.aria-label]=\"clearButtonLabel\"\r\n    >\r\n        <FilterSlashIcon *ngIf=\"!clearFilterIconTemplate\" />\r\n        <ng-template *ngTemplateOutlet=\"clearFilterIconTemplate\"></ng-template>\r\n    </button>\r\n    <div\r\n        *ngIf=\"showMenu && overlayVisible\"\r\n        [ngClass]=\"{ 'cax-column-filter-overlay cax-component cax-fluid': true, 'cax-column-filter-overlay-menu': display === 'menu' && dt.filterType === 'default' , 'cax-column-filter-overlay-custom': dt.filterType === 'custom' }\"\r\n        [id]=\"overlayId\"\r\n        [attr.aria-modal]=\"true\"\r\n        role=\"dialog\"\r\n        (click)=\"onContentClick()\"\r\n        [@overlayAnimation]=\"'visible'\"\r\n        (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\r\n        (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\r\n        (keydown.escape)=\"onEscape()\"\r\n    >\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: field }\"></ng-container>\r\n        <ul *ngIf=\"display === 'row' && dt.filterType === 'default'; else menu\" class=\"cax-column-filter-row-items\">\r\n            <li\r\n                class=\"cax-column-filter-row-item\"\r\n                *ngFor=\"let matchMode of matchModes; let i = index\"\r\n                (click)=\"onRowMatchModeChange(matchMode.value)\"\r\n                (keydown)=\"onRowMatchModeKeyDown($event)\"\r\n                (keydown.enter)=\"this.onRowMatchModeChange(matchMode.value)\"\r\n                [ngClass]=\"{ 'cax-highlight': isRowMatchModeSelected(matchMode.value) }\"\r\n                [attr.tabindex]=\"i === 0 ? '0' : null\"\r\n            >\r\n                {{ matchMode.label }}\r\n            </li>\r\n            <li class=\"cax-column-filter-separator\"></li>\r\n            <li class=\"cax-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onRowMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">{{ noFilterLabel }}</li>\r\n        </ul>\r\n        <ng-template #menu>\r\n            <ng-container *ngIf=\"display === 'menu' && dt.filterType === 'default'; else custom\">\r\n                <div class=\"cax-column-filter-operator\" *ngIf=\"isShowOperator\">\r\n                    <cax-dropdown [options]=\"operatorOptions\" [ngModel]=\"operator\" (ngModelChange)=\"onOperatorChange($event)\" styleClass=\"cax-column-filter-operator-dropdown\"></cax-dropdown>\r\n                </div>\r\n                <div class=\"cax-column-filter-constraints\">\r\n                    <div *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\" class=\"cax-column-filter-constraint\">\r\n                        <cax-dropdown\r\n                            *ngIf=\"showMatchModes && matchModes\"\r\n                            [options]=\"matchModes\"\r\n                            [ngModel]=\"fieldConstraint.matchMode\"\r\n                            (ngModelChange)=\"onMenuMatchModeChange($event, fieldConstraint)\"\r\n                            styleClass=\"cax-column-filter-matchmode-dropdown\"\r\n                        ></cax-dropdown>\r\n                        <cax-columnFilterFormElement\r\n                            [type]=\"type\"\r\n                            [field]=\"field\"\r\n                            [filterConstraint]=\"fieldConstraint\"\r\n                            [filterTemplate]=\"filterTemplate\"\r\n                            [placeholder]=\"placeholder\"\r\n                            [minFractionDigits]=\"minFractionDigits\"\r\n                            [maxFractionDigits]=\"maxFractionDigits\"\r\n                            [prefix]=\"prefix\"\r\n                            [suffix]=\"suffix\"\r\n                            [locale]=\"locale\"\r\n                            [localeMatcher]=\"localeMatcher\"\r\n                            [currency]=\"currency\"\r\n                            [currencyDisplay]=\"currencyDisplay\"\r\n                            [useGrouping]=\"useGrouping\"\r\n                        ></cax-columnFilterFormElement>\r\n                        <div>\r\n                            <button\r\n                                *ngIf=\"showRemoveIcon\"\r\n                                type=\"button\"\r\n                                caxButton\r\n                                class=\"cax-column-filter-remove-button cax-button-text cax-button-danger cax-button-sm\"\r\n                                (click)=\"removeConstraint(fieldConstraint)\"\r\n                                pRipple\r\n                                [attr.aria-label]=\"removeRuleButtonLabel\"\r\n                                [label]=\"removeRuleButtonLabel\"\r\n                            >\r\n                                <TrashIcon *ngIf=\"!removeRuleIconTemplate\" [styleClass]=\"'cax-button-icon-left'\" />\r\n                                <ng-template *ngTemplateOutlet=\"removeRuleIconTemplate\"></ng-template>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"cax-column-filter-add-rule\" *ngIf=\"isShowAddConstraint\">\r\n                    <button type=\"button\" caxButton [label]=\"addRuleButtonLabel\" [attr.aria-label]=\"addRuleButtonLabel\" class=\"cax-column-filter-add-button cax-button-text cax-button-sm\" (click)=\"addConstraint()\" pRipple>\r\n                        <PlusIcon *ngIf=\"!addRuleIconTemplate\" [styleClass]=\"'cax-button-icon-left'\" />\r\n                        <ng-template *ngTemplateOutlet=\"addRuleIconTemplate\"></ng-template>\r\n                    </button>\r\n                </div>\r\n                <div class=\"cax-column-filter-buttonbar\" *ngIf=\"showButtons\">\r\n                    <button\r\n                        #clearBtn\r\n                        *ngIf=\"showClearButton\"\r\n                        type=\"button\"\r\n                        caxButton\r\n                        class=\"cax-button-outlined cax-button-danger cax-button-sm\"\r\n                        (click)=\"clearFilter()\"\r\n                        [attr.aria-label]=\"clearButtonLabel\"\r\n                        [label]=\"clearButtonLabel\"\r\n                        pRipple\r\n                    ></button>\r\n                    <button *ngIf=\"showApplyButton\" type=\"button\" caxButton (click)=\"applyFilter()\" class=\"cax-button-sm\" [label]=\"applyButtonLabel\" pRipple [attr.aria-label]=\"applyButtonLabel\"></button>\r\n                </div>\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template #custom>\r\n            <div class=\"cax-column-filter-custom-container\">\r\n                <div>\r\n                    <div class=\"cax-column-filter-custom-list-header\" (click)=\"toggleCustomFilterList()\">\r\n                        <span *ngIf=\"!selectedCustomFilter?.label?.length\">Select a condition</span>\r\n                        <div *ngIf=\"selectedCustomFilter\">{{ selectedCustomFilter.label }}</div>\r\n                        <i class=\"cax cax-alt-arrow-down\"></i>\r\n                    </div>\r\n                    <div class=\"cax-column-filter-custom-list\" *ngIf=\"customFilterListVisible\">\r\n                        <div class=\"cax-column-filter-custom-list-item\" *ngFor=\"let opt of commonFilterOptions\" (click)=\"selectCustomFilter(opt)\">\r\n                            <span>{{ opt.label }}</span>\r\n                        </div>\r\n                        <cax-divider [style]=\"{margin: 0}\"></cax-divider>\r\n                        <div class=\"cax-column-filter-custom-list-item\" *ngFor=\"let opt of stringFilterOptions\" (click)=\"selectCustomFilter(opt)\">\r\n                            <span>{{ opt.label }}</span>\r\n                        </div>\r\n                        <cax-divider [style]=\"{margin: 0}\"></cax-divider>\r\n                        <div class=\"cax-column-filter-custom-list-item\" *ngFor=\"let opt of numberFilterOptions\" (click)=\"selectCustomFilter(opt)\">\r\n                            <span>{{ opt.label }}</span>\r\n                        </div>\r\n                        <cax-divider [style]=\"{margin: 0}\"></cax-divider>\r\n                        <div class=\"cax-column-filter-custom-list-item\" *ngFor=\"let opt of dateFilterOptions\" (click)=\"selectCustomFilter(opt)\">\r\n                            <span>{{ opt.label }}</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"isCustomStringFilterSelected\">\r\n                    <cax-inputtext [(ngModel)]=\"customInputFilter\" [clearIcon]=\"false\"></cax-inputtext>\r\n                </div>\r\n                <div *ngIf=\"isCustomNumberFilterSelected\" style=\"display: flex; gap: 12px\">\r\n                    <cax-inputNumber [(ngModel)]=\"customNumberFilter1\"></cax-inputNumber>\r\n                    <cax-inputNumber [(ngModel)]=\"customNumberFilter2\" *ngIf=\"selectedCustomFilter.key === 'gtlt'\"></cax-inputNumber>\r\n                </div>\r\n                <div *ngIf=\"isCustomDateFilterSelected && selectedCustomFilter.key !== 'today'\">\r\n                    <cax-calendar [(ngModel)]=\"customDateFilter\" [showIcon]=\"true\" iconDisplay=\"input\"></cax-calendar>\r\n                </div>\r\n                <div class=\"cax-column-filter-custom-buttons\">\r\n                    <cax-button (click)=\"onClearCustomFilters()\" [disabled]=\"!selectedCustomFilter\" [label]=\"'Clear'\" [severity]=\"'danger'\" outlined=\"true\"></cax-button>\r\n                    <cax-button (click)=\"onApplyCustomFilters()\" [label]=\"'Apply'\"></cax-button>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n        <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: field }\"></ng-container>\r\n    </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i4$1.Dropdown, selector: "cax-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "labelText", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6$2.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "link"] }, { kind: "component", type: i6$2.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FilterSlashIcon, selector: "FilterSlashIcon" }, { kind: "component", type: PlusIcon, selector: "PlusIcon" }, { kind: "component", type: TrashIcon, selector: "TrashIcon" }, { kind: "component", type: ColumnFilterFormElement, selector: "cax-columnFilterFormElement", inputs: ["field", "type", "filterConstraint", "filterTemplate", "placeholder", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "ariaLabel"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i7$1.Divider, selector: "cax-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: i4.InputTextComponent, selector: "cax-inputtext", inputs: ["value", "placeholder", "disabled", "maxlength", "successText", "errorText", "showLabel", "leftIcon", "rightIcon", "rightIconClickable", "clearIcon", "label", "iconPath", "disabledIcon", "showIcon", "iconClass", "leftIconClass", "rightIconClass", "invalid", "required", "style", "size", "styleClass"], outputs: ["valueChange", "rightIconClick"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i7.InputNumber, selector: "cax-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefixIcon", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i6$1.Calendar, selector: "cax-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "leftIcon", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }], animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]), transition(':leave', [animate('.1s linear', style({ opacity: 0 }))])])], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: ColumnFilter, isStandalone: true, selector: "cax-columnFilter", inputs: { field: "field", type: "type", disabled: "disabled", display: "display", showMenu: ["showMenu", "showMenu", booleanAttribute], matchMode: "matchMode", operator: "operator", showOperator: ["showOperator", "showOperator", booleanAttribute], showClearButton: ["showClearButton", "showClearButton", booleanAttribute], showApplyButton: ["showApplyButton", "showApplyButton", booleanAttribute], showMatchModes: ["showMatchModes", "showMatchModes", booleanAttribute], showAddButton: ["showAddButton", "showAddButton", booleanAttribute], hideOnClear: ["hideOnClear", "hideOnClear", booleanAttribute], placeholder: "placeholder", matchModeOptions: "matchModeOptions", maxConstraints: ["maxConstraints", "maxConstraints", numberAttribute], minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", locale: "locale", localeMatcher: "localeMatcher", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], showButtons: ["showButtons", "showButtons", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true }, { propertyName: "clearButtonViewChild", first: true, predicate: ["clearBtn"], descendants: true }], ngImport: i0, template: "<div\r\n    class=\"cax-column-filter\"\r\n    [ngClass]=\"{ 'cax-column-filter-row': display === 'row' && dt.filterType === 'default', 'cax-column-filter-menu': display === 'menu' && dt.filterType === 'default', 'cax-column-filter-custom':  dt.filterType === 'custom' }\"\r\n>\r\n    <cax-columnFilterFormElement\r\n        *ngIf=\"display === 'row' && dt.filterType === 'default'\"\r\n        class=\"cax-fluid\"\r\n        [type]=\"type\"\r\n        [field]=\"field\"\r\n        [ariaLabel]=\"ariaLabel\"\r\n        [filterConstraint]=\"dt.filters[field]\"\r\n        [filterTemplate]=\"filterTemplate\"\r\n        [placeholder]=\"placeholder\"\r\n        [minFractionDigits]=\"minFractionDigits\"\r\n        [maxFractionDigits]=\"maxFractionDigits\"\r\n        [prefix]=\"prefix\"\r\n        [suffix]=\"suffix\"\r\n        [locale]=\"locale\"\r\n        [localeMatcher]=\"localeMatcher\"\r\n        [currency]=\"currency\"\r\n        [currencyDisplay]=\"currencyDisplay\"\r\n        [useGrouping]=\"useGrouping\"\r\n        [showButtons]=\"showButtons\"\r\n    ></cax-columnFilterFormElement>\r\n    <button\r\n        #icon\r\n        *ngIf=\"showMenuButton\"\r\n        type=\"button\"\r\n        class=\"cax-column-filter-menu-button cax-link\"\r\n        aria-haspopup=\"true\"\r\n        [attr.aria-label]=\"filterMenuButtonAriaLabel\"\r\n        [attr.aria-controls]=\"overlayVisible ? overlayId : null\"\r\n        [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n        [disabled]=\"disabled\"\r\n        [ngClass]=\"{ 'cax-column-filter-menu-button-open': overlayVisible, 'cax-column-filter-menu-button-active': hasFilter() }\"\r\n        (click)=\"toggleMenu()\"\r\n        (keydown)=\"onToggleButtonKeyDown($event)\"\r\n    >\r\n        <i *ngIf=\"!filterIconTemplate\" [styleClass]=\"'pi-filter-icon'\" class=\"cax cax-filter\"></i>\r\n        <span class=\"pi-filter-icon\" *ngIf=\"filterIconTemplate\">\r\n            <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\r\n        </span>\r\n    </button>\r\n    <button\r\n        #icon\r\n        *ngIf=\"showClearButton && display === 'row' && dt.filterType === 'default'\"\r\n        [ngClass]=\"{ 'cax-hidden-space': !hasRowFilter() }\"\r\n        type=\"button\"\r\n        class=\"cax-column-filter-clear-button cax-link\"\r\n        (click)=\"clearFilter()\"\r\n        [attr.aria-label]=\"clearButtonLabel\"\r\n    >\r\n        <FilterSlashIcon *ngIf=\"!clearFilterIconTemplate\" />\r\n        <ng-template *ngTemplateOutlet=\"clearFilterIconTemplate\"></ng-template>\r\n    </button>\r\n    <div\r\n        *ngIf=\"showMenu && overlayVisible\"\r\n        [ngClass]=\"{ 'cax-column-filter-overlay cax-component cax-fluid': true, 'cax-column-filter-overlay-menu': display === 'menu' && dt.filterType === 'default' , 'cax-column-filter-overlay-custom': dt.filterType === 'custom' }\"\r\n        [id]=\"overlayId\"\r\n        [attr.aria-modal]=\"true\"\r\n        role=\"dialog\"\r\n        (click)=\"onContentClick()\"\r\n        [@overlayAnimation]=\"'visible'\"\r\n        (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\r\n        (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\r\n        (keydown.escape)=\"onEscape()\"\r\n    >\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: field }\"></ng-container>\r\n        <ul *ngIf=\"display === 'row' && dt.filterType === 'default'; else menu\" class=\"cax-column-filter-row-items\">\r\n            <li\r\n                class=\"cax-column-filter-row-item\"\r\n                *ngFor=\"let matchMode of matchModes; let i = index\"\r\n                (click)=\"onRowMatchModeChange(matchMode.value)\"\r\n                (keydown)=\"onRowMatchModeKeyDown($event)\"\r\n                (keydown.enter)=\"this.onRowMatchModeChange(matchMode.value)\"\r\n                [ngClass]=\"{ 'cax-highlight': isRowMatchModeSelected(matchMode.value) }\"\r\n                [attr.tabindex]=\"i === 0 ? '0' : null\"\r\n            >\r\n                {{ matchMode.label }}\r\n            </li>\r\n            <li class=\"cax-column-filter-separator\"></li>\r\n            <li class=\"cax-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onRowMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">{{ noFilterLabel }}</li>\r\n        </ul>\r\n        <ng-template #menu>\r\n            <ng-container *ngIf=\"display === 'menu' && dt.filterType === 'default'; else custom\">\r\n                <div class=\"cax-column-filter-operator\" *ngIf=\"isShowOperator\">\r\n                    <cax-dropdown [options]=\"operatorOptions\" [ngModel]=\"operator\" (ngModelChange)=\"onOperatorChange($event)\" styleClass=\"cax-column-filter-operator-dropdown\"></cax-dropdown>\r\n                </div>\r\n                <div class=\"cax-column-filter-constraints\">\r\n                    <div *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\" class=\"cax-column-filter-constraint\">\r\n                        <cax-dropdown\r\n                            *ngIf=\"showMatchModes && matchModes\"\r\n                            [options]=\"matchModes\"\r\n                            [ngModel]=\"fieldConstraint.matchMode\"\r\n                            (ngModelChange)=\"onMenuMatchModeChange($event, fieldConstraint)\"\r\n                            styleClass=\"cax-column-filter-matchmode-dropdown\"\r\n                        ></cax-dropdown>\r\n                        <cax-columnFilterFormElement\r\n                            [type]=\"type\"\r\n                            [field]=\"field\"\r\n                            [filterConstraint]=\"fieldConstraint\"\r\n                            [filterTemplate]=\"filterTemplate\"\r\n                            [placeholder]=\"placeholder\"\r\n                            [minFractionDigits]=\"minFractionDigits\"\r\n                            [maxFractionDigits]=\"maxFractionDigits\"\r\n                            [prefix]=\"prefix\"\r\n                            [suffix]=\"suffix\"\r\n                            [locale]=\"locale\"\r\n                            [localeMatcher]=\"localeMatcher\"\r\n                            [currency]=\"currency\"\r\n                            [currencyDisplay]=\"currencyDisplay\"\r\n                            [useGrouping]=\"useGrouping\"\r\n                        ></cax-columnFilterFormElement>\r\n                        <div>\r\n                            <button\r\n                                *ngIf=\"showRemoveIcon\"\r\n                                type=\"button\"\r\n                                caxButton\r\n                                class=\"cax-column-filter-remove-button cax-button-text cax-button-danger cax-button-sm\"\r\n                                (click)=\"removeConstraint(fieldConstraint)\"\r\n                                pRipple\r\n                                [attr.aria-label]=\"removeRuleButtonLabel\"\r\n                                [label]=\"removeRuleButtonLabel\"\r\n                            >\r\n                                <TrashIcon *ngIf=\"!removeRuleIconTemplate\" [styleClass]=\"'cax-button-icon-left'\" />\r\n                                <ng-template *ngTemplateOutlet=\"removeRuleIconTemplate\"></ng-template>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"cax-column-filter-add-rule\" *ngIf=\"isShowAddConstraint\">\r\n                    <button type=\"button\" caxButton [label]=\"addRuleButtonLabel\" [attr.aria-label]=\"addRuleButtonLabel\" class=\"cax-column-filter-add-button cax-button-text cax-button-sm\" (click)=\"addConstraint()\" pRipple>\r\n                        <PlusIcon *ngIf=\"!addRuleIconTemplate\" [styleClass]=\"'cax-button-icon-left'\" />\r\n                        <ng-template *ngTemplateOutlet=\"addRuleIconTemplate\"></ng-template>\r\n                    </button>\r\n                </div>\r\n                <div class=\"cax-column-filter-buttonbar\" *ngIf=\"showButtons\">\r\n                    <button\r\n                        #clearBtn\r\n                        *ngIf=\"showClearButton\"\r\n                        type=\"button\"\r\n                        caxButton\r\n                        class=\"cax-button-outlined cax-button-danger cax-button-sm\"\r\n                        (click)=\"clearFilter()\"\r\n                        [attr.aria-label]=\"clearButtonLabel\"\r\n                        [label]=\"clearButtonLabel\"\r\n                        pRipple\r\n                    ></button>\r\n                    <button *ngIf=\"showApplyButton\" type=\"button\" caxButton (click)=\"applyFilter()\" class=\"cax-button-sm\" [label]=\"applyButtonLabel\" pRipple [attr.aria-label]=\"applyButtonLabel\"></button>\r\n                </div>\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template #custom>\r\n            <div class=\"cax-column-filter-custom-container\">\r\n                <div>\r\n                    <div class=\"cax-column-filter-custom-list-header\" (click)=\"toggleCustomFilterList()\">\r\n                        <span *ngIf=\"!selectedCustomFilter?.label?.length\">Select a condition</span>\r\n                        <div *ngIf=\"selectedCustomFilter\">{{ selectedCustomFilter.label }}</div>\r\n                        <i class=\"cax cax-alt-arrow-down\"></i>\r\n                    </div>\r\n                    <div class=\"cax-column-filter-custom-list\" *ngIf=\"customFilterListVisible\">\r\n                        <div class=\"cax-column-filter-custom-list-item\" *ngFor=\"let opt of commonFilterOptions\" (click)=\"selectCustomFilter(opt)\">\r\n                            <span>{{ opt.label }}</span>\r\n                        </div>\r\n                        <cax-divider [style]=\"{margin: 0}\"></cax-divider>\r\n                        <div class=\"cax-column-filter-custom-list-item\" *ngFor=\"let opt of stringFilterOptions\" (click)=\"selectCustomFilter(opt)\">\r\n                            <span>{{ opt.label }}</span>\r\n                        </div>\r\n                        <cax-divider [style]=\"{margin: 0}\"></cax-divider>\r\n                        <div class=\"cax-column-filter-custom-list-item\" *ngFor=\"let opt of numberFilterOptions\" (click)=\"selectCustomFilter(opt)\">\r\n                            <span>{{ opt.label }}</span>\r\n                        </div>\r\n                        <cax-divider [style]=\"{margin: 0}\"></cax-divider>\r\n                        <div class=\"cax-column-filter-custom-list-item\" *ngFor=\"let opt of dateFilterOptions\" (click)=\"selectCustomFilter(opt)\">\r\n                            <span>{{ opt.label }}</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"isCustomStringFilterSelected\">\r\n                    <cax-inputtext [(ngModel)]=\"customInputFilter\" [clearIcon]=\"false\"></cax-inputtext>\r\n                </div>\r\n                <div *ngIf=\"isCustomNumberFilterSelected\" style=\"display: flex; gap: 12px\">\r\n                    <cax-inputNumber [(ngModel)]=\"customNumberFilter1\"></cax-inputNumber>\r\n                    <cax-inputNumber [(ngModel)]=\"customNumberFilter2\" *ngIf=\"selectedCustomFilter.key === 'gtlt'\"></cax-inputNumber>\r\n                </div>\r\n                <div *ngIf=\"isCustomDateFilterSelected && selectedCustomFilter.key !== 'today'\">\r\n                    <cax-calendar [(ngModel)]=\"customDateFilter\" [showIcon]=\"true\" iconDisplay=\"input\"></cax-calendar>\r\n                </div>\r\n                <div class=\"cax-column-filter-custom-buttons\">\r\n                    <cax-button (click)=\"onClearCustomFilters()\" [disabled]=\"!selectedCustomFilter\" [label]=\"'Clear'\" [severity]=\"'danger'\" outlined=\"true\"></cax-button>\r\n                    <cax-button (click)=\"onApplyCustomFilters()\" [label]=\"'Apply'\"></cax-button>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n        <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: field }\"></ng-container>\r\n    </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i4$1.Dropdown, selector: "cax-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "labelText", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6$2.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "link"] }, { kind: "component", type: i6$2.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FilterSlashIcon, selector: "FilterSlashIcon" }, { kind: "component", type: PlusIcon, selector: "PlusIcon" }, { kind: "component", type: TrashIcon, selector: "TrashIcon" }, { kind: "component", type: ColumnFilterFormElement, selector: "cax-columnFilterFormElement", inputs: ["field", "type", "filterConstraint", "filterTemplate", "placeholder", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "ariaLabel"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i7$1.Divider, selector: "cax-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: i4.InputTextComponent, selector: "cax-inputtext", inputs: ["value", "placeholder", "disabled", "maxlength", "successText", "errorText", "showLabel", "leftIcon", "rightIcon", "rightIconClickable", "clearIcon", "label", "iconPath", "disabledIcon", "showIcon", "iconClass", "leftIconClass", "rightIconClass", "invalid", "required", "style", "size", "styleClass"], outputs: ["valueChange", "rightIconClick"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i7.InputNumber, selector: "cax-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefixIcon", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i6$1.Calendar, selector: "cax-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "leftIcon", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onInlineSaved", "onInlineCancelled", "onShow"] }], animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]), transition(':leave', [animate('.1s linear', style({ opacity: 0 }))])])], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ColumnFilter, decorators: [{
             type: Component,