cps-ui-kit 0.107.0 → 0.109.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4739,10 +4739,10 @@ class TableColumnFilterConstraintComponent {
4739
4739
  this.categories = [];
4740
4740
  this._tableInstance = dt || tt;
4741
4741
  }
4742
- ngOnInit() {
4743
- this._initCategories();
4742
+ ngOnChanges() {
4743
+ this._updateCategories();
4744
4744
  }
4745
- _initCategories() {
4745
+ _updateCategories() {
4746
4746
  if (this.type !== 'category')
4747
4747
  return;
4748
4748
  if (this.categoryOptions.length > 0) {
@@ -4785,7 +4785,7 @@ class TableColumnFilterConstraintComponent {
4785
4785
  }
4786
4786
  }
4787
4787
  TableColumnFilterConstraintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterConstraintComponent, deps: [{ token: i1$2.Table, optional: true }, { token: i1$3.TreeTable, optional: true }], target: i0.ɵɵFactoryTarget.Component });
4788
- TableColumnFilterConstraintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumnFilterConstraintComponent, isStandalone: true, selector: "table-column-filter-constraint", inputs: { type: "type", field: "field", filterConstraint: "filterConstraint", categoryOptions: "categoryOptions", placeholder: "placeholder", hasApplyButton: "hasApplyButton" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n <cps-input\n *ngSwitchCase=\"'text'\"\n [placeholder]=\"placeholder\"\n [hideDetails]=\"true\"\n (keydown.enter)=\"onEnterKeyDown($event)\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n type=\"text\"></cps-input>\n\n <cps-input\n *ngSwitchCase=\"'number'\"\n [hideDetails]=\"true\"\n [placeholder]=\"placeholder\"\n (keydown.enter)=\"onEnterKeyDown($event)\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n type=\"number\"></cps-input>\n\n <div class=\"cps-table-col-filter-constraint-boolean\">\n <cps-button-toggle\n *ngSwitchCase=\"'boolean'\"\n [options]=\"booleanOptions\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n [mandatory]=\"false\">\n </cps-button-toggle>\n </div>\n\n <cps-datepicker\n *ngSwitchCase=\"'date'\"\n [openOnInputFocus]=\"true\"\n [hideDetails]=\"true\"\n [placeholder]=\"placeholder\"\n [value]=\"filterConstraint?.value\"\n (keydown.enter)=\"onEnterKeyDown($event)\"\n (valueChanged)=\"onValueChange($event)\">\n </cps-datepicker>\n\n <cps-autocomplete\n class=\"cps-table-col-filter-category-autocomplete\"\n *ngSwitchCase=\"'category'\"\n [placeholder]=\"placeholder\"\n [options]=\"categories\"\n [hideDetails]=\"true\"\n [clearable]=\"true\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n [returnObject]=\"false\"\n [multiple]=\"true\"></cps-autocomplete>\n</ng-container>\n", styles: [":host .cps-table-col-filter-constraint-boolean{display:flex;justify-content:center}:host .cps-table-col-filter-category-autocomplete{min-width:200px;max-width:400px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsDatepickerComponent, selector: "cps-datepicker", inputs: ["label", "disabled", "width", "placeholder", "hint", "clearable", "hideDetails", "persistentClear", "showTodayButton", "openOnInputFocus", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "minDate", "maxDate", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "emptyMessage", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "value"], outputs: ["valueChanged"] }] });
4788
+ TableColumnFilterConstraintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumnFilterConstraintComponent, isStandalone: true, selector: "table-column-filter-constraint", inputs: { type: "type", field: "field", filterConstraint: "filterConstraint", categoryOptions: "categoryOptions", placeholder: "placeholder", hasApplyButton: "hasApplyButton" }, usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n <cps-input\n *ngSwitchCase=\"'text'\"\n [placeholder]=\"placeholder\"\n [hideDetails]=\"true\"\n (keydown.enter)=\"onEnterKeyDown($event)\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n type=\"text\"></cps-input>\n\n <cps-input\n *ngSwitchCase=\"'number'\"\n [hideDetails]=\"true\"\n [placeholder]=\"placeholder\"\n (keydown.enter)=\"onEnterKeyDown($event)\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n type=\"number\"></cps-input>\n\n <div class=\"cps-table-col-filter-constraint-boolean\">\n <cps-button-toggle\n *ngSwitchCase=\"'boolean'\"\n [options]=\"booleanOptions\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n [mandatory]=\"false\">\n </cps-button-toggle>\n </div>\n\n <cps-datepicker\n *ngSwitchCase=\"'date'\"\n [openOnInputFocus]=\"true\"\n [hideDetails]=\"true\"\n [placeholder]=\"placeholder\"\n [value]=\"filterConstraint?.value\"\n (keydown.enter)=\"onEnterKeyDown($event)\"\n (valueChanged)=\"onValueChange($event)\">\n </cps-datepicker>\n\n <cps-autocomplete\n class=\"cps-table-col-filter-category-autocomplete\"\n *ngSwitchCase=\"'category'\"\n [placeholder]=\"placeholder\"\n [options]=\"categories\"\n [hideDetails]=\"true\"\n [clearable]=\"true\"\n [value]=\"filterConstraint?.value\"\n (valueChanged)=\"onValueChange($event)\"\n [returnObject]=\"false\"\n [multiple]=\"true\"></cps-autocomplete>\n</ng-container>\n", styles: [":host .cps-table-col-filter-constraint-boolean{display:flex;justify-content:center}:host .cps-table-col-filter-category-autocomplete{min-width:200px;max-width:400px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsDatepickerComponent, selector: "cps-datepicker", inputs: ["label", "disabled", "width", "placeholder", "hint", "clearable", "hideDetails", "persistentClear", "showTodayButton", "openOnInputFocus", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "minDate", "maxDate", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "emptyMessage", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "value"], outputs: ["valueChanged"] }] });
4789
4789
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterConstraintComponent, decorators: [{
4790
4790
  type: Component,
4791
4791
  args: [{ selector: 'table-column-filter-constraint', standalone: true, imports: [
@@ -4845,18 +4845,18 @@ class TableColumnFilterComponent {
4845
4845
  this.dt = dt;
4846
4846
  this.tt = tt;
4847
4847
  this.type = 'text';
4848
+ this.persistent = false;
4848
4849
  this.showClearButton = true;
4849
4850
  this.showApplyButton = true;
4850
4851
  this.showCloseButton = false;
4851
- this.persistent = false;
4852
+ this.showMatchModes = true;
4852
4853
  this.matchModes = [];
4853
- this.hideOnClear = false;
4854
+ this.showOperator = true;
4854
4855
  this.maxConstraints = 2;
4856
+ this.hideOnClear = false;
4855
4857
  this.categoryOptions = [];
4856
4858
  this.placeholder = '';
4857
4859
  this.operator = FilterOperator.AND;
4858
- this.showMatchModes = true;
4859
- this.showOperator = true;
4860
4860
  this.operatorOptions = [
4861
4861
  { label: 'Match All', value: FilterOperator.AND, info: 'AND' },
4862
4862
  { label: 'Match Any', value: FilterOperator.OR, info: 'OR' }
@@ -5082,7 +5082,7 @@ class TableColumnFilterComponent {
5082
5082
  }
5083
5083
  }
5084
5084
  TableColumnFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.Table, optional: true }, { token: i1$3.TreeTable, optional: true }], target: i0.ɵɵFactoryTarget.Component });
5085
- TableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumnFilterComponent, isStandalone: true, selector: "table-column-filter", inputs: { field: "field", type: "type", showClearButton: "showClearButton", showApplyButton: "showApplyButton", showCloseButton: "showCloseButton", persistent: "persistent", matchModes: "matchModes", hideOnClear: "hideOnClear", maxConstraints: "maxConstraints", categoryOptions: "categoryOptions", placeholder: "placeholder" }, host: { listeners: { "click": "onClick($event)" } }, viewQueries: [{ propertyName: "columnFilterMenu", first: true, predicate: ["columnFilterMenu"], descendants: true }], ngImport: i0, template: "<div class=\"cps-table-col-filter\">\n <cps-menu\n #columnFilterMenu\n [withArrow]=\"false\"\n [persistent]=\"persistent\"\n (menuShown)=\"onMenuShown()\"\n (menuHidden)=\"onMenuHidden()\"\n (beforeMenuHidden)=\"onBeforeMenuHidden()\">\n <div class=\"cps-table-col-filter-menu-content\">\n <div\n class=\"cps-table-col-filter-menu-content-header\"\n *ngIf=\"showCloseButton\">\n <cps-icon icon=\"close-x\" (click)=\"onCloseClick()\"></cps-icon>\n </div>\n <div\n class=\"cps-table-col-filter-menu-content-operator\"\n *ngIf=\"isShowOperator\">\n <cps-select\n [hideDetails]=\"true\"\n [disabled]=\"!fieldConstraints || fieldConstraints.length < 2\"\n [returnObject]=\"false\"\n [options]=\"operatorOptions\"\n [ngModel]=\"operator\"\n (valueChanged)=\"onOperatorChange($event)\"></cps-select>\n </div>\n <div class=\"cps-table-col-filter-menu-content-constraints\">\n <div\n *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\"\n class=\"cps-table-col-filter-menu-content-constraint\">\n <cps-select\n *ngIf=\"showMatchModes && currentMatchModes\"\n class=\"cps-table-col-filter-match-mode-select\"\n [hideDetails]=\"true\"\n [returnObject]=\"false\"\n [options]=\"currentMatchModes\"\n [ngModel]=\"fieldConstraint.matchMode\"\n (valueChanged)=\"\n onMenuMatchModeChange($event, fieldConstraint)\n \"></cps-select>\n <table-column-filter-constraint\n [type]=\"type\"\n [field]=\"field\"\n [categoryOptions]=\"categoryOptions\"\n [filterConstraint]=\"fieldConstraint\"\n [hasApplyButton]=\"showApplyButton\"\n [placeholder]=\"placeholder\">\n </table-column-filter-constraint>\n <div\n class=\"cps-table-col-filter-remove-rule-btn\"\n *ngIf=\"showRemoveIcon\">\n <cps-button\n type=\"borderless\"\n width=\"100%\"\n size=\"small\"\n color=\"prepared\"\n icon=\"delete\"\n (clicked)=\"removeConstraint(fieldConstraint)\"\n label=\"Remove condition\">\n </cps-button>\n </div>\n </div>\n </div>\n <div\n class=\"cps-table-col-filter-add-rule-btn\"\n *ngIf=\"isShowAddConstraint\">\n <cps-button\n label=\"Add condition\"\n type=\"borderless\"\n width=\"100%\"\n size=\"small\"\n color=\"surprise\"\n icon=\"add\"\n (clicked)=\"addConstraint()\">\n </cps-button>\n </div>\n <div class=\"cps-table-col-filter-buttonbar\">\n <cps-button\n *ngIf=\"showClearButton\"\n (clicked)=\"clearFilter()\"\n type=\"borderless\"\n color=\"prepared\"\n size=\"small\"\n label=\"Clear\"></cps-button>\n <cps-button\n *ngIf=\"showApplyButton\"\n (clicked)=\"applyFilter()\"\n color=\"prepared\"\n size=\"small\"\n label=\"Apply\"></cps-button>\n </div>\n </div>\n </cps-menu>\n <cps-icon\n icon=\"filter-funnel\"\n size=\"13\"\n (click)=\"columnFilterMenu.toggle($event)\"\n class=\"cps-table-col-filter-menu-button\"\n [ngClass]=\"{\n 'cps-table-col-filter-menu-button-active': hasFilter()\n }\"\n >>\n </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:12px;padding-right:4px}:host .cps-table-col-filter .cps-table-col-filter-menu-button:not(.cps-table-col-filter-menu-button-active):hover{color:var(--cps-color-text-dark)}:host .cps-table-col-filter .cps-table-col-filter-menu-button-active{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content{padding-bottom:12px;min-width:200px;max-height:500px;overflow:auto}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header{height:32px;padding:8px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon{float:right;cursor:pointer}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon:hover{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-operator{padding:12px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint{border-bottom:1px solid var(--cps-color-line-mid);padding:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint .cps-table-col-filter-match-mode-select{margin-bottom:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint:last-child{border-bottom:none}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-remove-rule-btn{padding-top:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-add-rule-btn{padding:8px 12px}.cps-table-col-filter-menu-content .cps-table-col-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }, { kind: "component", type: TableColumnFilterConstraintComponent, selector: "table-column-filter-constraint", inputs: ["type", "field", "filterConstraint", "categoryOptions", "placeholder", "hasApplyButton"] }] });
5085
+ TableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumnFilterComponent, isStandalone: true, selector: "table-column-filter", inputs: { field: "field", type: "type", persistent: "persistent", showClearButton: "showClearButton", showApplyButton: "showApplyButton", showCloseButton: "showCloseButton", showMatchModes: "showMatchModes", matchModes: "matchModes", showOperator: "showOperator", maxConstraints: "maxConstraints", hideOnClear: "hideOnClear", categoryOptions: "categoryOptions", placeholder: "placeholder" }, host: { listeners: { "click": "onClick($event)" } }, viewQueries: [{ propertyName: "columnFilterMenu", first: true, predicate: ["columnFilterMenu"], descendants: true }], ngImport: i0, template: "<div class=\"cps-table-col-filter\">\n <cps-menu\n #columnFilterMenu\n [withArrow]=\"false\"\n [persistent]=\"persistent\"\n (menuShown)=\"onMenuShown()\"\n (menuHidden)=\"onMenuHidden()\"\n (beforeMenuHidden)=\"onBeforeMenuHidden()\">\n <div class=\"cps-table-col-filter-menu-content\">\n <div\n class=\"cps-table-col-filter-menu-content-header\"\n *ngIf=\"showCloseButton\">\n <cps-icon icon=\"close-x\" (click)=\"onCloseClick()\"></cps-icon>\n </div>\n <div\n class=\"cps-table-col-filter-menu-content-operator\"\n *ngIf=\"isShowOperator\">\n <cps-select\n [hideDetails]=\"true\"\n [disabled]=\"!fieldConstraints || fieldConstraints.length < 2\"\n [returnObject]=\"false\"\n [options]=\"operatorOptions\"\n [ngModel]=\"operator\"\n (valueChanged)=\"onOperatorChange($event)\"></cps-select>\n </div>\n <div class=\"cps-table-col-filter-menu-content-constraints\">\n <div\n *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\"\n class=\"cps-table-col-filter-menu-content-constraint\">\n <cps-select\n *ngIf=\"showMatchModes && currentMatchModes\"\n class=\"cps-table-col-filter-match-mode-select\"\n [hideDetails]=\"true\"\n [returnObject]=\"false\"\n [options]=\"currentMatchModes\"\n [ngModel]=\"fieldConstraint.matchMode\"\n (valueChanged)=\"\n onMenuMatchModeChange($event, fieldConstraint)\n \"></cps-select>\n <table-column-filter-constraint\n [type]=\"type\"\n [field]=\"field\"\n [categoryOptions]=\"categoryOptions\"\n [filterConstraint]=\"fieldConstraint\"\n [hasApplyButton]=\"showApplyButton\"\n [placeholder]=\"placeholder\">\n </table-column-filter-constraint>\n <div\n class=\"cps-table-col-filter-remove-rule-btn\"\n *ngIf=\"showRemoveIcon\">\n <cps-button\n type=\"borderless\"\n width=\"100%\"\n size=\"small\"\n color=\"prepared\"\n icon=\"delete\"\n (clicked)=\"removeConstraint(fieldConstraint)\"\n label=\"Remove condition\">\n </cps-button>\n </div>\n </div>\n </div>\n <div\n class=\"cps-table-col-filter-add-rule-btn\"\n *ngIf=\"isShowAddConstraint\">\n <cps-button\n label=\"Add condition\"\n type=\"borderless\"\n width=\"100%\"\n size=\"small\"\n color=\"surprise\"\n icon=\"add\"\n (clicked)=\"addConstraint()\">\n </cps-button>\n </div>\n <div class=\"cps-table-col-filter-buttonbar\">\n <cps-button\n *ngIf=\"showClearButton\"\n (clicked)=\"clearFilter()\"\n type=\"borderless\"\n color=\"prepared\"\n size=\"small\"\n label=\"Clear\"></cps-button>\n <cps-button\n *ngIf=\"showApplyButton\"\n (clicked)=\"applyFilter()\"\n color=\"prepared\"\n size=\"small\"\n label=\"Apply\"></cps-button>\n </div>\n </div>\n </cps-menu>\n <cps-icon\n icon=\"filter-funnel\"\n size=\"13\"\n (click)=\"columnFilterMenu.toggle($event)\"\n class=\"cps-table-col-filter-menu-button\"\n [ngClass]=\"{\n 'cps-table-col-filter-menu-button-active': hasFilter()\n }\"\n >>\n </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:12px;padding-right:4px}:host .cps-table-col-filter .cps-table-col-filter-menu-button:not(.cps-table-col-filter-menu-button-active):hover{color:var(--cps-color-text-dark)}:host .cps-table-col-filter .cps-table-col-filter-menu-button-active{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content{padding-bottom:12px;min-width:200px;max-height:500px;overflow:auto}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header{height:32px;padding:8px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon{float:right;cursor:pointer}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon:hover{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-operator{padding:12px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint{border-bottom:1px solid var(--cps-color-line-mid);padding:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint .cps-table-col-filter-match-mode-select{margin-bottom:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint:last-child{border-bottom:none}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-remove-rule-btn{padding-top:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-add-rule-btn{padding:8px 12px}.cps-table-col-filter-menu-content .cps-table-col-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }, { kind: "component", type: TableColumnFilterConstraintComponent, selector: "table-column-filter-constraint", inputs: ["type", "field", "filterConstraint", "categoryOptions", "placeholder", "hasApplyButton"] }] });
5086
5086
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterComponent, decorators: [{
5087
5087
  type: Component,
5088
5088
  args: [{ selector: 'table-column-filter', standalone: true, imports: [
@@ -5102,20 +5102,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
5102
5102
  type: Input
5103
5103
  }], type: [{
5104
5104
  type: Input
5105
+ }], persistent: [{
5106
+ type: Input
5105
5107
  }], showClearButton: [{
5106
5108
  type: Input
5107
5109
  }], showApplyButton: [{
5108
5110
  type: Input
5109
5111
  }], showCloseButton: [{
5110
5112
  type: Input
5111
- }], persistent: [{
5113
+ }], showMatchModes: [{
5112
5114
  type: Input
5113
5115
  }], matchModes: [{
5114
5116
  type: Input
5115
- }], hideOnClear: [{
5117
+ }], showOperator: [{
5116
5118
  type: Input
5117
5119
  }], maxConstraints: [{
5118
5120
  type: Input
5121
+ }], hideOnClear: [{
5122
+ type: Input
5119
5123
  }], categoryOptions: [{
5120
5124
  type: Input
5121
5125
  }], placeholder: [{
@@ -5133,13 +5137,15 @@ class CpsTableColumnFilterDirective {
5133
5137
  this.elementRef = elementRef;
5134
5138
  this.viewContainerRef = viewContainerRef;
5135
5139
  this.filterType = 'text';
5140
+ this.filterPersistent = false;
5136
5141
  this.filterShowClearButton = true;
5137
5142
  this.filterShowApplyButton = true;
5138
5143
  this.filterShowCloseButton = false;
5139
- this.filterPersistent = false;
5144
+ this.filterShowMatchModes = true;
5140
5145
  this.filterMatchModes = [];
5141
- this.filterHideOnClear = false;
5146
+ this.filterShowOperator = true;
5142
5147
  this.filterMaxConstraints = 2;
5148
+ this.filterHideOnClear = false;
5143
5149
  this.filterCategoryOptions = [];
5144
5150
  this.filterPlaceholder = '';
5145
5151
  this.filterCompRef = this.viewContainerRef.createComponent(TableColumnFilterComponent);
@@ -5147,13 +5153,15 @@ class CpsTableColumnFilterDirective {
5147
5153
  ngOnInit() {
5148
5154
  this.filterCompRef.setInput('field', this.field);
5149
5155
  this.filterCompRef.setInput('type', this.filterType);
5156
+ this.filterCompRef.setInput('persistent', this.filterPersistent);
5150
5157
  this.filterCompRef.setInput('showClearButton', this.filterShowClearButton);
5151
5158
  this.filterCompRef.setInput('showApplyButton', this.filterShowApplyButton);
5152
5159
  this.filterCompRef.setInput('showCloseButton', this.filterShowCloseButton);
5153
- this.filterCompRef.setInput('persistent', this.filterPersistent);
5160
+ this.filterCompRef.setInput('showMatchModes', this.filterShowMatchModes);
5154
5161
  this.filterCompRef.setInput('matchModes', this.filterMatchModes);
5155
- this.filterCompRef.setInput('hideOnClear', this.filterHideOnClear);
5162
+ this.filterCompRef.setInput('showOperator', this.filterShowOperator);
5156
5163
  this.filterCompRef.setInput('maxConstraints', this.filterMaxConstraints);
5164
+ this.filterCompRef.setInput('hideOnClear', this.filterHideOnClear);
5157
5165
  this.filterCompRef.setInput('categoryOptions', this.filterCategoryOptions);
5158
5166
  this.filterCompRef.setInput('placeholder', this.filterPlaceholder || this._getDefaultPlaceholder());
5159
5167
  this.elementRef.nativeElement.firstChild.after(this.filterCompRef.location.nativeElement);
@@ -5178,7 +5186,7 @@ class CpsTableColumnFilterDirective {
5178
5186
  }
5179
5187
  }
5180
5188
  CpsTableColumnFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableColumnFilterDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
5181
- CpsTableColumnFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTableColumnFilterDirective, isStandalone: true, selector: "[cpsTColFilter]", inputs: { field: ["cpsTColFilter", "field"], filterType: "filterType", filterShowClearButton: "filterShowClearButton", filterShowApplyButton: "filterShowApplyButton", filterShowCloseButton: "filterShowCloseButton", filterPersistent: "filterPersistent", filterMatchModes: "filterMatchModes", filterHideOnClear: "filterHideOnClear", filterMaxConstraints: "filterMaxConstraints", filterCategoryOptions: "filterCategoryOptions", filterPlaceholder: "filterPlaceholder" }, ngImport: i0 });
5189
+ CpsTableColumnFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTableColumnFilterDirective, isStandalone: true, selector: "[cpsTColFilter]", inputs: { field: ["cpsTColFilter", "field"], filterType: "filterType", filterPersistent: "filterPersistent", filterShowClearButton: "filterShowClearButton", filterShowApplyButton: "filterShowApplyButton", filterShowCloseButton: "filterShowCloseButton", filterShowMatchModes: "filterShowMatchModes", filterMatchModes: "filterMatchModes", filterShowOperator: "filterShowOperator", filterMaxConstraints: "filterMaxConstraints", filterHideOnClear: "filterHideOnClear", filterCategoryOptions: "filterCategoryOptions", filterPlaceholder: "filterPlaceholder" }, ngImport: i0 });
5182
5190
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableColumnFilterDirective, decorators: [{
5183
5191
  type: Directive,
5184
5192
  args: [{
@@ -5190,20 +5198,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
5190
5198
  args: ['cpsTColFilter']
5191
5199
  }], filterType: [{
5192
5200
  type: Input
5201
+ }], filterPersistent: [{
5202
+ type: Input
5193
5203
  }], filterShowClearButton: [{
5194
5204
  type: Input
5195
5205
  }], filterShowApplyButton: [{
5196
5206
  type: Input
5197
5207
  }], filterShowCloseButton: [{
5198
5208
  type: Input
5199
- }], filterPersistent: [{
5209
+ }], filterShowMatchModes: [{
5200
5210
  type: Input
5201
5211
  }], filterMatchModes: [{
5202
5212
  type: Input
5203
- }], filterHideOnClear: [{
5213
+ }], filterShowOperator: [{
5204
5214
  type: Input
5205
5215
  }], filterMaxConstraints: [{
5206
5216
  type: Input
5217
+ }], filterHideOnClear: [{
5218
+ type: Input
5207
5219
  }], filterCategoryOptions: [{
5208
5220
  type: Input
5209
5221
  }], filterPlaceholder: [{
@@ -6118,11 +6130,13 @@ class CpsTreeTableColumnFilterDirective {
6118
6130
  this.elementRef = elementRef;
6119
6131
  this.viewContainerRef = viewContainerRef;
6120
6132
  this.filterType = 'text';
6133
+ this.filterPersistent = false;
6121
6134
  this.filterShowClearButton = true;
6122
6135
  this.filterShowApplyButton = true;
6123
6136
  this.filterShowCloseButton = false;
6124
- this.filterPersistent = false;
6137
+ this.filterShowMatchModes = true;
6125
6138
  this.filterMatchModes = [];
6139
+ this.filterShowOperator = true;
6126
6140
  this.filterHideOnClear = false;
6127
6141
  this.filterCategoryOptions = [];
6128
6142
  this.filterPlaceholder = '';
@@ -6131,13 +6145,15 @@ class CpsTreeTableColumnFilterDirective {
6131
6145
  ngOnInit() {
6132
6146
  this.filterCompRef.setInput('field', this.field);
6133
6147
  this.filterCompRef.setInput('type', this.filterType);
6148
+ this.filterCompRef.setInput('persistent', this.filterPersistent);
6134
6149
  this.filterCompRef.setInput('showClearButton', this.filterShowClearButton);
6135
6150
  this.filterCompRef.setInput('showApplyButton', this.filterShowApplyButton);
6136
6151
  this.filterCompRef.setInput('showCloseButton', this.filterShowCloseButton);
6137
- this.filterCompRef.setInput('persistent', this.filterPersistent);
6152
+ this.filterCompRef.setInput('showMatchModes', this.filterShowMatchModes);
6138
6153
  this.filterCompRef.setInput('matchModes', this.filterMatchModes);
6139
- this.filterCompRef.setInput('hideOnClear', this.filterHideOnClear);
6154
+ this.filterCompRef.setInput('showOperator', this.filterShowOperator);
6140
6155
  this.filterCompRef.setInput('maxConstraints', 1);
6156
+ this.filterCompRef.setInput('hideOnClear', this.filterHideOnClear);
6141
6157
  this.filterCompRef.setInput('categoryOptions', this.filterCategoryOptions);
6142
6158
  this.filterCompRef.setInput('placeholder', this.filterPlaceholder || this._getDefaultPlaceholder());
6143
6159
  this.elementRef.nativeElement.firstChild.after(this.filterCompRef.location.nativeElement);
@@ -6162,7 +6178,7 @@ class CpsTreeTableColumnFilterDirective {
6162
6178
  }
6163
6179
  }
6164
6180
  CpsTreeTableColumnFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableColumnFilterDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
6165
- CpsTreeTableColumnFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeTableColumnFilterDirective, isStandalone: true, selector: "[cpsTTColFilter]", inputs: { field: ["cpsTTColFilter", "field"], filterType: "filterType", filterShowClearButton: "filterShowClearButton", filterShowApplyButton: "filterShowApplyButton", filterShowCloseButton: "filterShowCloseButton", filterPersistent: "filterPersistent", filterMatchModes: "filterMatchModes", filterHideOnClear: "filterHideOnClear", filterCategoryOptions: "filterCategoryOptions", filterPlaceholder: "filterPlaceholder" }, ngImport: i0 });
6181
+ CpsTreeTableColumnFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeTableColumnFilterDirective, isStandalone: true, selector: "[cpsTTColFilter]", inputs: { field: ["cpsTTColFilter", "field"], filterType: "filterType", filterPersistent: "filterPersistent", filterShowClearButton: "filterShowClearButton", filterShowApplyButton: "filterShowApplyButton", filterShowCloseButton: "filterShowCloseButton", filterShowMatchModes: "filterShowMatchModes", filterMatchModes: "filterMatchModes", filterShowOperator: "filterShowOperator", filterHideOnClear: "filterHideOnClear", filterCategoryOptions: "filterCategoryOptions", filterPlaceholder: "filterPlaceholder" }, ngImport: i0 });
6166
6182
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableColumnFilterDirective, decorators: [{
6167
6183
  type: Directive,
6168
6184
  args: [{
@@ -6174,16 +6190,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
6174
6190
  args: ['cpsTTColFilter']
6175
6191
  }], filterType: [{
6176
6192
  type: Input
6193
+ }], filterPersistent: [{
6194
+ type: Input
6177
6195
  }], filterShowClearButton: [{
6178
6196
  type: Input
6179
6197
  }], filterShowApplyButton: [{
6180
6198
  type: Input
6181
6199
  }], filterShowCloseButton: [{
6182
6200
  type: Input
6183
- }], filterPersistent: [{
6201
+ }], filterShowMatchModes: [{
6184
6202
  type: Input
6185
6203
  }], filterMatchModes: [{
6186
6204
  type: Input
6205
+ }], filterShowOperator: [{
6206
+ type: Input
6187
6207
  }], filterHideOnClear: [{
6188
6208
  type: Input
6189
6209
  }], filterCategoryOptions: [{