@farris/ui-list-filter 0.1.22 → 0.1.23

package/bundles/farris-ui-list-filter.umd.js

@@ -2275,6 +2275,7 @@
                 dropdowncontrol.isExtend = filedSchema.control.hasOwnProperty('isExtend') ? filedSchema.control.isExtend : false;
                 dropdowncontrol.showLabel = filedSchema.control.hasOwnProperty('showLabel') ? filedSchema.control.showLabel : true;
                 dropdowncontrol.required = filedSchema.control.hasOwnProperty('required') ? filedSchema.control.required : false;
+                dropdowncontrol.editable = filedSchema.control.hasOwnProperty('editable') ? filedSchema.control.editable : false;
                 if (filedSchema.control.valueType == "1") {
                     dropdowncontrol.valueType = EnumType.StringType;
                     dropdowncontrol.enumValues = ( /** @type {?} */(filedSchema.control.enumValues));
@@ -2610,18 +2611,18 @@
     }());
 
     /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation. All rights reserved.
-    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-    this file except in compliance with the License. You may obtain a copy of the
-    License at http://www.apache.org/licenses/LICENSE-2.0
+    Copyright (c) Microsoft Corporation.
 
-    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-    MERCHANTABLITY OR NON-INFRINGEMENT.
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
 
-    See the Apache Version 2.0 License for specific language governing permissions
-    and limitations under the License.
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
     var __assign = function () {
         __assign = Object.assign || function __assign(t) {
@@ -3471,36 +3472,17 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    // import { FrameContext } from '@farris/devkit';
-    // import { IQuerySolutionHandler } from './IQuerySolutionHandler';
-    // import { FrameworkSessionService } from '@farris/bef';
     var QuerySolutionService = /** @class */ (function () {
         function QuerySolutionService() {
         }
-        // private frameContext: FrameContext,
-        // private frameworkSessionService: FrameworkSessionService
-        // getUserSessionId(): string {
-        //     return this.frameworkSessionService.getUserSessionId();
-        // }
-        // private frameContext: FrameContext,
-        // private frameworkSessionService: FrameworkSessionService
-        // getUserSessionId(): string {
-        //     return this.frameworkSessionService.getUserSessionId();
-        // }
         /**
          * @param {?} params
          * @return {?}
          */
-        QuerySolutionService.prototype.setFilterConditions =
-            // private frameContext: FrameContext,
-            // private frameworkSessionService: FrameworkSessionService
-            // getUserSessionId(): string {
-            //     return this.frameworkSessionService.getUserSessionId();
-            // }
-            /**
-             * @param {?} params
-             * @return {?}
-             */
+        QuerySolutionService.prototype.setFilterConditions = /**
+         * @param {?} params
+         * @return {?}
+         */
             function (params) {
                 /** @type {?} */
                 var queryConditionHandler;
@@ -4240,6 +4222,12 @@
             this.filterPaddingNone = false;
             // 默认值是空值时执行查询，兼容旧方式
             this.defaultEmptyValueSearch = true;
+            // 按钮位置 top顶部 bottom 底部
+            this.buttonPosition = 'top';
+            // 查询按钮文本
+            this.filterText = '';
+            // 清空按钮文本
+            this.clearButtonText = '';
             this.query = new i0.EventEmitter();
             this.clear = new i0.EventEmitter();
             this.searchChange = new i0.EventEmitter();
@@ -4307,6 +4295,7 @@
                 this.listfilterHandler = this.injector.get(LISTFILTER_HANDLER_TOKEN, null, i0.InjectFlags.Optional);
                 this.idService = this.injector.get(uiCommon.IdService);
                 this.overLayService = this.injector.get(uiCommon.OverLayHiddenService, null);
+                this.localeService = this.injector.get(uiLocale.LocaleService);
             }
             if (!this.overLayService) {
                 this.overLayService = new uiCommon.OverLayHiddenService();
@@ -4365,6 +4354,12 @@
                 // } else {
                 //     this.isControlInline = true;
                 // }
+                if (!this.filterText || this.filterText.trim() === '筛选' || this.filterText.trim() === '篩選') {
+                    this.filterText = this.localeService.getValue('listFilter.filter');
+                }
+                if (!this.clearButtonText || this.clearButtonText.trim() === '清空') {
+                    this.clearButtonText = this.localeService.getValue('listFilter.clear');
+                }
                 this.canShowMoreIcon();
             };
         /**
@@ -5268,9 +5263,9 @@
         ListFilterComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'farris-list-filter',
-                        template: "<app-filter-common></app-filter-common>\r\n<div class=\"f-list-filter position-relative\"\r\n    [ngClass]=\"{'list-filter-padding': showMoreIcon,'list-filter-autoWidth': autoWidth,'list-filter-paddingnone': filterPaddingNone}\">\r\n    <ng-container *ngIf=\"filterType === 'list';else filterLayout\">\r\n        <div class=\"filter-inputs-main filter-inputs-main-list f-form-layout farris-form farris-form-controls-inline\">\r\n            <ng-container *ngFor=\"let formItem of listFilterConditions;let last = last;\">\r\n                <div class=\"col-12\"\r\n                    [ngClass]=\"{'filter-list-item': showFilterList && showFilterList.length && showFilterList[showFilterList.length-1]['id'] == formItem.id}\"\r\n                    *ngIf=\"!formItem.control.isExtend\">\r\n                    <div class=\"filter-input-list farris-group-wrap\"\r\n                        [ngClass]=\"{'filter-input-list-autolabel': autoLabel,'filter-input-list-checkbox': getControlType(formItem) === 'checkboxgroup'}\"\r\n                        [id]=\"'filter-'+formItem.id\">\r\n                        <ng-container [ngTemplateOutlet]=\"filterInputTemplate\"\r\n                            [ngTemplateOutletContext]=\"{ item: formItem }\"></ng-container>\r\n                        <div class=\"filter-search-btn\"\r\n                            *ngIf=\"!liveSearch && showFilterList && showFilterList.length && showFilterList[showFilterList.length-1]['id'] == formItem.id\">\r\n                            <button class=\"btn btn-primary\" [ngClass]=\"{'disabled': disabled || !canSubmit}\"\r\n                                (click)=\"filterClick()\">{{ 'listFilter.filter' | locale }}</button>\r\n                            <button class=\"btn btn-secondary filter-search-btn-reset\" *ngIf=\"!showMoreIcon\"\r\n                                (click)=\"resetSearch()\">\r\n                                <span class=\"f-icon f-icon-remove\"></span>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-template #filterLayout>\r\n        <ng-container *ngIf=\"autoWidth;else gridLayout\">\r\n            <div class=\"filter-inputs-main-basis-wrapper\"\r\n                [ngClass]=\"{'list-filter-wrapper-show-btn': !liveSearch,'list-filter-wrapper-show-btn-remove': !liveSearch && !showMoreIcon}\">\r\n                <div class=\"filter-inputs-main-basis-wrapper-inner\">\r\n                    <div class=\"filter-inputs-main filter-inputs-main-basis farris-form d-flex\"\r\n                        [ngClass]=\"{'justify-content-end': !alLeft,'farris-form-controls-inline':isControlInline}\"\r\n                        #filterMainBasis>\r\n                        <ng-container *ngFor=\"let formItem of listFilterConditions\">\r\n                            <div *ngIf=\"!formItem.control.isExtend\" class=\"filter-input-list farris-group-wrap\"\r\n                                [ngClass]=\"{'filter-input-list-autolabel': autoLabel,'filter-input-list-checkbox': getControlType(formItem) === 'checkboxgroup', 'filter-input-list-expand':formExpand,'filter-input-list-left': alLeft,'filter-input-list-radio': getControlType(formItem) === 'radio','filter-input-list-hasrange':getControlType(formItem).indexOf('range')>-1}\"\r\n                                [id]=\"'filter-'+formItem.id\">\r\n                                <ng-container [ngTemplateOutlet]=\"filterInputTemplate\"\r\n                                    [ngTemplateOutletContext]=\"{ item: formItem }\"></ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n                <div class=\"filter-search-btn\" [ngClass]=\"{'filter-search-btn-remove': !showMoreIcon}\"\r\n                    *ngIf=\"!liveSearch\">\r\n                    <button class=\"btn btn-primary\" [ngClass]=\"{'disabled': disabled || !canSubmit}\"\r\n                        (click)=\"filterClick()\">{{ 'listFilter.filter' | locale }}</button>\r\n                    <button class=\"btn btn-secondary filter-search-btn-reset\" *ngIf=\"!showMoreIcon\"\r\n                        (click)=\"resetSearch()\">\r\n                        <span class=\"f-icon f-icon-remove\"></span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #gridLayout>\r\n            <div class=\"filter-inputs-main f-form-layout farris-form\" [ngClass]=\"\r\n                {'list-filter-type-1': getShowLength() === 1,\r\n                'list-filter-type-2': getShowLength() === 2,\r\n                'list-filter-type-3': getShowLength() === 3,\r\n                'list-filter-type-4': getShowLength() === 4,\r\n                'list-filter-type-5': getShowLength() === 5,\r\n                'list-filter-type-6': getShowLength() >= 6,\r\n                'list-filter-custom-type': this.filterClass,\r\n                'list-filter-show-reset': !showMoreIcon,\r\n                'list-filter-padding-none': liveSearch,\r\n                'farris-form-controls-inline':isControlInline}\">\r\n                <ng-container *ngFor=\"let formItem of listFilterConditions\">\r\n                    <div [ngClass]=\"getStyle(formItem)\" *ngIf=\"!formItem.control.isExtend\">\r\n                        <div class=\"filter-input-list farris-group-wrap\"\r\n                            [ngClass]=\"{'filter-input-list-autolabel': autoLabel,'filter-input-list-checkbox': getControlType(formItem) === 'checkboxgroup'}\"\r\n                            [id]=\"'filter-'+formItem.id\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterInputTemplate\"\r\n                                [ngTemplateOutletContext]=\"{ item: formItem }\"></ng-container>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"filter-search-btn\" [ngClass]=\"{\r\n                    'filter-search-btn-type-1': getShowLength() === 1,\r\n                    'filter-search-btn-type-2': getShowLength() === 2,\r\n                    'filter-search-btn-type-3': getShowLength() === 3,\r\n                    'filter-search-btn-type-4': getShowLength() === 4,\r\n                    'filter-search-btn-type-5': getShowLength() === 5,\r\n                    'filter-search-custom-type': this.filterClass,\r\n                    'filter-search-btn-type-6': getShowLength() >= 6}\" *ngIf=\"!liveSearch\">\r\n                    <button class=\"btn btn-primary\" [ngClass]=\"{'disabled': disabled || !canSubmit}\"\r\n                        (click)=\"filterClick()\">{{ 'listFilter.filter' | locale }}</button>\r\n                    <button class=\"btn btn-secondary filter-search-btn-reset\" *ngIf=\"!showMoreIcon\"\r\n                        (click)=\"resetSearch()\">\r\n                        <span class=\"f-icon f-icon-remove\"></span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n    </ng-template>\r\n    <div class=\"filter-expand position-absolute\" [class.active]=\"showFilter\" (click)=\"floatFilterOpen($event)\"\r\n        *ngIf=\"showMoreIcon\">\r\n        <span class=\"f-icon f-icon-filtrate\"></span>\r\n        <span class=\"filter-expand-tag\" *ngIf=\"showExpandTag\"></span>\r\n    </div>\r\n    <div class=\"filter-inputs-extend position-absolute\" [hidden]=\"!showFilter\" *ngIf=\"showMoreIcon\" #floatPanel>\r\n        <div class=\"filter-typelist-arrow\"></div>\r\n        <div class=\"farris-form farris-form-auto\" [ngClass]=\"{'farris-form-controls-inline':isControlInline}\">\r\n            <fieldset class=\"f-section-formgroup\">\r\n                <div class=\"f-section-formgroup-inputs\">\r\n                    <div class=\"col-12\">\r\n                        <ng-container *ngFor=\"let formItem of listFilterConditions\">\r\n                            <div class=\"filter-input-list farris-group-wrap\" *ngIf=\"formItem.control.isExtend\">\r\n                                <ng-container [ngTemplateOutlet]=\"filterInputTemplate\"\r\n                                    [ngTemplateOutletContext]=\"{ item: formItem }\"></ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </fieldset>\r\n            <!-- bugNum:456508 -->\r\n            <div class=\"filter-form-btns text-right\">\r\n                <button class=\"btn btn-link filter-form-btn-reset\" (click)=\"resetSearch()\">{{ 'listFilter.reset' |\r\n                    locale }}</button>\r\n                <button class=\"btn btn-secondary\" (click)=\"listSearchCancel()\">{{ 'listFilter.cancel' | locale\r\n                    }}</button>\r\n                <button class=\"btn btn-primary\" [ngClass]=\"{'disabled': disabled || !canSubmit}\"\r\n                    (click)=\"listSearch()\">{{ 'listFilter.confirm' | locale }}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #filterInputTemplate let-item=\"item\">\r\n    <ng-container [ngSwitch]=\"item | controlType\">\r\n        <div class=\"filter-input-item filter-type-input\" *ngSwitchCase=\"'input'\">\r\n            <app-filter-input [item]=\"item\" [autoLabel]=\"autoLabel\" [disabled]=\"disabled\"\r\n                (searchHandle)=\"onSearch($event,item)\" class=\"form-group farris-form-group\"></app-filter-input>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-search\" *ngSwitchCase=\"'search'\">\r\n            <app-filter-search [item]=\"item\" [autoLabel]=\"autoLabel\" [disabled]=\"disabled\"\r\n                (searchHandle)=\"onSearch($event,item)\" class=\"form-group farris-form-group\"></app-filter-search>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-date\" *ngSwitchCase=\"'date'\">\r\n            <app-filter-date [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" (searchHandle)=\"onSearch($event,item)\" class=\"form-group farris-form-group\">\r\n            </app-filter-date>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-year\" *ngSwitchCase=\"'year'\">\r\n            <app-filter-date [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" [showType]=\"'3'\" (searchHandle)=\"onSearch($event,item)\"\r\n                class=\"form-group farris-form-group\"></app-filter-date>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-month\" *ngSwitchCase=\"'month'\">\r\n            <app-filter-date [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" [showType]=\"'2'\" (searchHandle)=\"onSearch($event,item)\"\r\n                class=\"form-group farris-form-group\"></app-filter-date>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-date\" *ngSwitchCase=\"'daterange'\">\r\n            <app-filter-daterange [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" (searchHandle)=\"onSearch($event,item)\" class=\"form-group farris-form-group\">\r\n            </app-filter-daterange>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-date\" *ngSwitchCase=\"'daterangetime'\">\r\n            <app-filter-daterange [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" [showTime]=\"true\" (searchHandle)=\"onSearch($event,item)\"\r\n                class=\"form-group farris-form-group\"></app-filter-daterange>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-monthrange\" *ngSwitchCase=\"'monthrange'\">\r\n            <app-filter-daterange [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" [showType]=\"'2'\" (searchHandle)=\"onSearch($event,item)\"\r\n                class=\"form-group farris-form-group\"></app-filter-daterange>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-yearrange\" *ngSwitchCase=\"'yearrange'\">\r\n            <app-filter-daterange [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" [showType]=\"'3'\" (searchHandle)=\"onSearch($event,item)\"\r\n                class=\"form-group farris-form-group\"></app-filter-daterange>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-dropdown\" *ngSwitchCase=\"'dropdown'\">\r\n            <app-filter-dropdown [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" (searchHandle)=\"onSearch($event,item)\" [enableClear]=\"item?.control?.enableClear\" class=\"form-group farris-form-group\">\r\n            </app-filter-dropdown>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-number\" *ngSwitchCase=\"'number'\">\r\n            <app-filter-number [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" (searchHandle)=\"onSearch($event,item)\" class=\"form-group farris-form-group\">\r\n            </app-filter-number>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-help\" *ngSwitchCase=\"'help'\">\r\n            <app-filter-help [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [instanceId]=\"buildSmartHelpKey(item.fieldCode)\"\r\n                [disabled]=\"disabled\" [hostRef]=\"this\" (searchHandle)=\"onSearch($event,item)\"\r\n                class=\"form-group farris-form-group\"></app-filter-help>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-checkboxgroup\" *ngSwitchCase=\"'checkboxgroup'\">\r\n            <app-filter-checkbox [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" (searchHandle)=\"onSearch($event,item)\" class=\"form-group farris-form-group\"\r\n                style=\"white-space: nowrap;\"></app-filter-checkbox>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-radio\" *ngSwitchCase=\"'radio'\">\r\n            <app-filter-radio [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" (searchHandle)=\"onSearch($event,item)\" class=\"form-group farris-form-group\"\r\n                style=\"white-space: nowrap;\"></app-filter-radio>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-input-group\" *ngSwitchCase=\"'input-group'\">\r\n            <app-filter-inputgroup [item]=\"item\" [autoLabel]=\"autoLabel\" [disabled]=\"disabled\"\r\n                (searchHandle)=\"onSearch($event,item)\" class=\"form-group farris-form-group\">\r\n            </app-filter-inputgroup>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-default\" *ngSwitchDefault>\r\n            <app-filter-input [item]=\"item\" [autoLabel]=\"autoLabel\" [disabled]=\"disabled\"\r\n                (searchHandle)=\"onSearch($event,item)\" class=\"form-group farris-form-group\"></app-filter-input>\r\n        </div>\r\n    </ng-container>\r\n</ng-template>",
+                        template: "<app-filter-common></app-filter-common>\r\n<div class=\"f-list-filter position-relative\"\r\n    [ngClass]=\"{'list-filter-padding': showMoreIcon,'list-filter-autoWidth': autoWidth,'list-filter-paddingnone': filterPaddingNone,'list-filter-button-position-bottom':buttonPosition==='bottom'&&!liveSearch }\">\r\n    <ng-container *ngIf=\"filterType === 'list';else filterLayout\">\r\n        <div class=\"filter-inputs-main filter-inputs-main-list f-form-layout farris-form farris-form-controls-inline\">\r\n            <ng-container *ngFor=\"let formItem of listFilterConditions;let last = last;\">\r\n                <div class=\"col-12\"\r\n                    [ngClass]=\"{'filter-list-item': showFilterList && showFilterList.length && showFilterList[showFilterList.length-1]['id'] == formItem.id}\"\r\n                    *ngIf=\"!formItem.control.isExtend\">\r\n                    <div class=\"filter-input-list farris-group-wrap\"\r\n                        [ngClass]=\"{'filter-input-list-autolabel': autoLabel,'filter-input-list-checkbox': getControlType(formItem) === 'checkboxgroup'}\"\r\n                        [id]=\"'filter-'+formItem.id\">\r\n                        <ng-container [ngTemplateOutlet]=\"filterInputTemplate\"\r\n                            [ngTemplateOutletContext]=\"{ item: formItem }\"></ng-container>\r\n                        <div class=\"filter-search-btn\"\r\n                            *ngIf=\"!liveSearch && showFilterList && showFilterList.length && showFilterList[showFilterList.length-1]['id'] == formItem.id&&buttonPosition!=='bottom'\">\r\n                            <button class=\"btn btn-primary\" [ngClass]=\"{'disabled': disabled || !canSubmit}\"\r\n                                (click)=\"filterClick()\">{{ 'listFilter.filter' | locale }}</button>\r\n                            <button class=\"btn btn-secondary filter-search-btn-reset\" *ngIf=\"!showMoreIcon\"\r\n                                (click)=\"resetSearch()\">\r\n                                <span class=\"f-icon f-icon-remove\"></span>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-template #filterLayout>\r\n        <ng-container *ngIf=\"autoWidth;else gridLayout\">\r\n            <div class=\"filter-inputs-main-basis-wrapper\"\r\n                [ngClass]=\"{'list-filter-wrapper-show-btn': !liveSearch,'list-filter-wrapper-show-btn-remove': !liveSearch && !showMoreIcon}\">\r\n                <div class=\"filter-inputs-main-basis-wrapper-inner\">\r\n                    <div class=\"filter-inputs-main filter-inputs-main-basis farris-form d-flex\"\r\n                        [ngClass]=\"{'justify-content-end': !alLeft,'farris-form-controls-inline':isControlInline}\"\r\n                        #filterMainBasis>\r\n                        <ng-container *ngFor=\"let formItem of listFilterConditions\">\r\n                            <div *ngIf=\"!formItem.control.isExtend\" class=\"filter-input-list farris-group-wrap\"\r\n                                [ngClass]=\"{'filter-input-list-autolabel': autoLabel,'filter-input-list-checkbox': getControlType(formItem) === 'checkboxgroup', 'filter-input-list-expand':formExpand,'filter-input-list-left': alLeft,'filter-input-list-radio': getControlType(formItem) === 'radio','filter-input-list-hasrange':getControlType(formItem).indexOf('range')>-1}\"\r\n                                [id]=\"'filter-'+formItem.id\">\r\n                                <ng-container [ngTemplateOutlet]=\"filterInputTemplate\"\r\n                                    [ngTemplateOutletContext]=\"{ item: formItem }\"></ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n                <div class=\"filter-search-btn\" [ngClass]=\"{'filter-search-btn-remove': !showMoreIcon}\"\r\n                    *ngIf=\"!liveSearch&&buttonPosition!=='bottom'\">\r\n                    <button class=\"btn btn-primary\" [ngClass]=\"{'disabled': disabled || !canSubmit}\"\r\n                        (click)=\"filterClick()\">{{ 'listFilter.filter' | locale }}</button>\r\n                    <button class=\"btn btn-secondary filter-search-btn-reset\" *ngIf=\"!showMoreIcon\"\r\n                        (click)=\"resetSearch()\">\r\n                        <span class=\"f-icon f-icon-remove\"></span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #gridLayout>\r\n            <div class=\"filter-inputs-main f-form-layout farris-form\" [ngClass]=\"\r\n                {'list-filter-type-1': getShowLength() === 1,\r\n                'list-filter-type-2': getShowLength() === 2,\r\n                'list-filter-type-3': getShowLength() === 3,\r\n                'list-filter-type-4': getShowLength() === 4,\r\n                'list-filter-type-5': getShowLength() === 5,\r\n                'list-filter-type-6': getShowLength() >= 6,\r\n                'list-filter-custom-type': this.filterClass,\r\n                'list-filter-show-reset': !showMoreIcon,\r\n                'list-filter-padding-none': liveSearch,\r\n                'farris-form-controls-inline':isControlInline}\">\r\n                <ng-container *ngFor=\"let formItem of listFilterConditions\">\r\n                    <div [ngClass]=\"getStyle(formItem)\" *ngIf=\"!formItem.control.isExtend\">\r\n                        <div class=\"filter-input-list farris-group-wrap\"\r\n                            [ngClass]=\"{'filter-input-list-autolabel': autoLabel,'filter-input-list-checkbox': getControlType(formItem) === 'checkboxgroup'}\"\r\n                            [id]=\"'filter-'+formItem.id\">\r\n                            <ng-container [ngTemplateOutlet]=\"filterInputTemplate\"\r\n                                [ngTemplateOutletContext]=\"{ item: formItem }\"></ng-container>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"filter-search-btn\" [ngClass]=\"{\r\n                    'filter-search-btn-type-1': getShowLength() === 1,\r\n                    'filter-search-btn-type-2': getShowLength() === 2,\r\n                    'filter-search-btn-type-3': getShowLength() === 3,\r\n                    'filter-search-btn-type-4': getShowLength() === 4,\r\n                    'filter-search-btn-type-5': getShowLength() === 5,\r\n                    'filter-search-custom-type': this.filterClass,\r\n                    'filter-search-btn-type-6': getShowLength() >= 6}\" *ngIf=\"!liveSearch&&buttonPosition!=='bottom'\">\r\n                    <button class=\"btn btn-primary\" [ngClass]=\"{'disabled': disabled || !canSubmit}\"\r\n                        (click)=\"filterClick()\">{{ 'listFilter.filter' | locale }}</button>\r\n                    <button class=\"btn btn-secondary filter-search-btn-reset\" *ngIf=\"!showMoreIcon\"\r\n                        (click)=\"resetSearch()\">\r\n                        <span class=\"f-icon f-icon-remove\"></span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n    </ng-template>\r\n    <div class=\"filter-expand position-absolute\" [class.active]=\"showFilter\" (click)=\"floatFilterOpen($event)\"\r\n        *ngIf=\"showMoreIcon\">\r\n        <span class=\"f-icon f-icon-filtrate\"></span>\r\n        <span class=\"filter-expand-tag\" *ngIf=\"showExpandTag\"></span>\r\n    </div>\r\n    <div class=\"filter-inputs-extend position-absolute\" [hidden]=\"!showFilter\" *ngIf=\"showMoreIcon\" #floatPanel>\r\n        <div class=\"filter-typelist-arrow\"></div>\r\n        <div class=\"farris-form farris-form-auto\" [ngClass]=\"{'farris-form-controls-inline':isControlInline}\">\r\n            <fieldset class=\"f-section-formgroup\">\r\n                <div class=\"f-section-formgroup-inputs\">\r\n                    <div class=\"col-12\">\r\n                        <ng-container *ngFor=\"let formItem of listFilterConditions\">\r\n                            <div class=\"filter-input-list farris-group-wrap\" *ngIf=\"formItem.control.isExtend\">\r\n                                <ng-container [ngTemplateOutlet]=\"filterInputTemplate\"\r\n                                    [ngTemplateOutletContext]=\"{ item: formItem }\"></ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </fieldset>\r\n            <!-- bugNum:456508 -->\r\n            <div class=\"filter-form-btns text-right\">\r\n                <button class=\"btn btn-link filter-form-btn-reset\" (click)=\"resetSearch()\">{{ 'listFilter.reset' |\r\n                    locale }}</button>\r\n                <button class=\"btn btn-secondary\" (click)=\"listSearchCancel()\">{{ 'listFilter.cancel' | locale\r\n                    }}</button>\r\n                <button class=\"btn btn-primary\" [ngClass]=\"{'disabled': disabled || !canSubmit}\"\r\n                    (click)=\"listSearch()\">{{ 'listFilter.confirm' | locale }}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"filter-inputs-footer text-right mt-2\" *ngIf=\"!liveSearch&&listFilterConditions&&listFilterConditions.length>0&&buttonPosition=='bottom'\">\r\n    <button class=\"btn btn-secondary mr-2\"  (click)=\"resetSearch()\">{{clearButtonText}}</button>\r\n    <button class=\"btn btn-primary\" [ngClass]=\"{'disabled': disabled || !canSubmit}\"\r\n        (click)=\"filterClick()\">{{ filterText }}</button>\r\n</div>\r\n<ng-template #filterInputTemplate let-item=\"item\">\r\n    <ng-container [ngSwitch]=\"item | controlType\">\r\n        <div class=\"filter-input-item filter-type-input\" *ngSwitchCase=\"'input'\">\r\n            <app-filter-input [item]=\"item\" [autoLabel]=\"autoLabel\" [disabled]=\"disabled\"\r\n                (searchHandle)=\"onSearch($event,item)\" class=\"form-group farris-form-group\"></app-filter-input>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-search\" *ngSwitchCase=\"'search'\">\r\n            <app-filter-search [item]=\"item\" [autoLabel]=\"autoLabel\" [disabled]=\"disabled\"\r\n                (searchHandle)=\"onSearch($event,item)\" class=\"form-group farris-form-group\"></app-filter-search>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-date\" *ngSwitchCase=\"'date'\">\r\n            <app-filter-date [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" (searchHandle)=\"onSearch($event,item)\" class=\"form-group farris-form-group\">\r\n            </app-filter-date>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-year\" *ngSwitchCase=\"'year'\">\r\n            <app-filter-date [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" [showType]=\"'3'\" (searchHandle)=\"onSearch($event,item)\"\r\n                class=\"form-group farris-form-group\"></app-filter-date>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-month\" *ngSwitchCase=\"'month'\">\r\n            <app-filter-date [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" [showType]=\"'2'\" (searchHandle)=\"onSearch($event,item)\"\r\n                class=\"form-group farris-form-group\"></app-filter-date>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-date\" *ngSwitchCase=\"'daterange'\">\r\n            <app-filter-daterange [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" (searchHandle)=\"onSearch($event,item)\" class=\"form-group farris-form-group\">\r\n            </app-filter-daterange>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-date\" *ngSwitchCase=\"'daterangetime'\">\r\n            <app-filter-daterange [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" [showTime]=\"true\" (searchHandle)=\"onSearch($event,item)\"\r\n                class=\"form-group farris-form-group\"></app-filter-daterange>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-monthrange\" *ngSwitchCase=\"'monthrange'\">\r\n            <app-filter-daterange [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" [showType]=\"'2'\" (searchHandle)=\"onSearch($event,item)\"\r\n                class=\"form-group farris-form-group\"></app-filter-daterange>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-yearrange\" *ngSwitchCase=\"'yearrange'\">\r\n            <app-filter-daterange [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" [showType]=\"'3'\" (searchHandle)=\"onSearch($event,item)\"\r\n                class=\"form-group farris-form-group\"></app-filter-daterange>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-dropdown\" *ngSwitchCase=\"'dropdown'\">\r\n            <app-filter-dropdown [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" (searchHandle)=\"onSearch($event,item)\" [enableClear]=\"item?.control?.enableClear\" class=\"form-group farris-form-group\">\r\n            </app-filter-dropdown>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-number\" *ngSwitchCase=\"'number'\">\r\n            <app-filter-number [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" (searchHandle)=\"onSearch($event,item)\" class=\"form-group farris-form-group\">\r\n            </app-filter-number>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-help\" *ngSwitchCase=\"'help'\">\r\n            <app-filter-help [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [instanceId]=\"buildSmartHelpKey(item.fieldCode)\"\r\n                [disabled]=\"disabled\" [hostRef]=\"this\" (searchHandle)=\"onSearch($event,item)\"\r\n                class=\"form-group farris-form-group\"></app-filter-help>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-checkboxgroup\" *ngSwitchCase=\"'checkboxgroup'\">\r\n            <app-filter-checkbox [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" (searchHandle)=\"onSearch($event,item)\" class=\"form-group farris-form-group\"\r\n                style=\"white-space: nowrap;\"></app-filter-checkbox>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-radio\" *ngSwitchCase=\"'radio'\">\r\n            <app-filter-radio [changeFields]=\"fieldCodeOfClearFields\" [item]=\"item\" [autoLabel]=\"autoLabel\"\r\n                [disabled]=\"disabled\" (searchHandle)=\"onSearch($event,item)\" class=\"form-group farris-form-group\"\r\n                style=\"white-space: nowrap;\"></app-filter-radio>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-input-group\" *ngSwitchCase=\"'input-group'\">\r\n            <app-filter-inputgroup [item]=\"item\" [autoLabel]=\"autoLabel\" [disabled]=\"disabled\"\r\n                (searchHandle)=\"onSearch($event,item)\" class=\"form-group farris-form-group\">\r\n            </app-filter-inputgroup>\r\n        </div>\r\n        <div class=\"filter-input-item filter-type-default\" *ngSwitchDefault>\r\n            <app-filter-input [item]=\"item\" [autoLabel]=\"autoLabel\" [disabled]=\"disabled\"\r\n                (searchHandle)=\"onSearch($event,item)\" class=\"form-group farris-form-group\"></app-filter-input>\r\n        </div>\r\n    </ng-container>\r\n</ng-template>",
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        styles: ["::-webkit-scrollbar{width:6px;height:6px;background-color:#eee}::-webkit-scrollbar-track{border-radius:0}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);-webkit-transition:.2s;transition:.2s;border-radius:6px}::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.45)}.filter-search-btn-col{flex-basis:0;-webkit-box-flex:1;flex-grow:1;max-width:100%}.filter-search-btn-absoulte{position:absolute;right:0;top:0}.f-list-filter .filter-inputs-main-basis-wrapper{width:100%;overflow:hidden}.f-list-filter .filter-inputs-main-basis-wrapper.list-filter-wrapper-show-btn{position:relative;padding-right:84px}.f-list-filter .filter-inputs-main-basis-wrapper.list-filter-wrapper-show-btn.list-filter-wrapper-show-btn-remove{padding-right:124px}.f-list-filter .filter-inputs-main-basis-wrapper.list-filter-wrapper-show-btn .filter-search-btn{position:absolute;right:0;top:0}.f-list-filter .filter-inputs-main-basis-wrapper.list-filter-wrapper-show-btn .filter-search-btn .btn{margin-left:6px}.f-list-filter .filter-inputs-main-basis-wrapper.list-filter-wrapper-show-btn .filter-search-btn .btn:first-child{margin-left:0}.f-list-filter .filter-inputs-main-basis-wrapper .filter-inputs-main-basis-wrapper-inner{width:100%;overflow:auto}.f-list-filter .filter-inputs-main-basis-wrapper .filter-inputs-main-basis-wrapper-inner .filter-inputs-main-basis.justify-content-end{margin-left:auto}.f-list-filter.list-filter-padding{padding-right:45px}.f-list-filter.list-filter-autoWidth{padding-bottom:8px}.f-list-filter.list-filter-autoWidth.list-filter-paddingnone{padding-bottom:0}@media (min-width:768px){.f-list-filter .list-filter-type-1{position:static;padding-right:0}.f-list-filter .list-filter-type-2,.f-list-filter .list-filter-type-3{position:relative;padding-right:70px}}@media (max-width:767px){.f-list-filter .list-filter-type-1{position:relative;padding-right:70px}.f-list-filter .list-filter-type-1.list-filter-show-reset{padding-right:110px}.f-list-filter .list-filter-type-2,.f-list-filter .list-filter-type-3{position:relative;padding-right:70px}.f-list-filter .list-filter-type-2.list-filter-show-reset,.f-list-filter .list-filter-type-3.list-filter-show-reset{position:relative;padding-right:110px}}@media (min-width:1200px){.f-list-filter .list-filter-type-2,.f-list-filter .list-filter-type-3{position:static;padding-right:0}.f-list-filter .list-filter-type-4,.f-list-filter .list-filter-type-5{position:relative;padding-right:70px}}@media (max-width:767px){.f-list-filter .list-filter-type-4,.f-list-filter .list-filter-type-5{position:relative;padding-right:70px}.f-list-filter .list-filter-type-4.list-filter-show-reset,.f-list-filter .list-filter-type-5.list-filter-show-reset{position:relative;padding-right:110px}}@media (min-width:768px){.f-list-filter .list-filter-type-2.list-filter-show-reset,.f-list-filter .list-filter-type-3.list-filter-show-reset{position:relative;padding-right:110px}.f-list-filter .list-filter-type-4,.f-list-filter .list-filter-type-5{position:relative;padding-right:70px}.f-list-filter .list-filter-type-4.list-filter-show-reset,.f-list-filter .list-filter-type-5.list-filter-show-reset{position:relative;padding-right:110px}}@media (min-width:1690px){.f-list-filter .list-filter-type-4,.f-list-filter .list-filter-type-5{position:static;padding-right:0}}@media (min-width:1200px){.f-list-filter .list-filter-type-4.list-filter-show-reset,.f-list-filter .list-filter-type-5.list-filter-show-reset{position:relative;padding-right:110px}}.f-list-filter .list-filter-custom-type,.f-list-filter .list-filter-type-6{position:relative;padding-right:70px}.f-list-filter .list-filter-custom-type.list-filter-show-reset,.f-list-filter .list-filter-type-6.list-filter-show-reset{padding-right:110px}.f-list-filter .list-filter-padding-none{padding-right:0}.f-list-filter .filter-inputs-main{width:100%;overflow:hidden}.f-list-filter .filter-inputs-main .col-12{padding-left:0}.f-list-filter .filter-inputs-main.filter-inputs-main-padding{padding-right:70px;position:relative}.f-list-filter .filter-inputs-main .filter-input-list.filter-input-list-autolabel{padding-right:14px}.f-list-filter .filter-inputs-main .filter-input-list.filter-input-list-autolabel:last-child{padding-right:0}.f-list-filter .filter-inputs-main .filter-input-list.filter-input-list-checkbox{max-width:none;-webkit-box-flex:inherit;flex:inherit}@media (max-width:767px){.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-1{position:absolute;right:0;top:0}}@media (min-width:768px){.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-1{flex-basis:0;-webkit-box-flex:1;flex-grow:1;max-width:100%;position:static}.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-2,.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-3{position:absolute;right:0;top:0}}@media (max-width:767px){.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-2,.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-3{position:absolute;right:0;top:0}}@media (min-width:1200px){.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-2,.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-3{flex-basis:0;-webkit-box-flex:1;flex-grow:1;max-width:100%;position:static}.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-4,.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-5{position:absolute;right:0;top:0}}@media (max-width:767px){.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-4,.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-5{position:absolute;right:0;top:0}}@media (min-width:768px){.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-4,.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-5{position:absolute;right:0;top:0}}@media (min-width:1690px){.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-4,.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-5{flex-basis:0;-webkit-box-flex:1;flex-grow:1;max-width:100%;position:static}}.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-6,.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-custom-type{position:absolute;right:0;top:0}.f-list-filter .filter-inputs-main .filter-search-btn .btn{margin-left:6px}.f-list-filter .filter-inputs-main .filter-search-btn .btn:first-child{margin-left:0}.f-list-filter .filter-inputs-main.filter-inputs-main-basis .filter-input-list{min-width:200px}.f-list-filter .filter-inputs-main.filter-inputs-main-basis .filter-input-list .filter-input-item .form-group{margin-bottom:0}.f-list-filter .filter-inputs-main.filter-inputs-main-basis .filter-input-list.filter-input-list-left{-webkit-box-flex:1;flex:1 1 auto;width:0}.f-list-filter .filter-inputs-main.filter-inputs-main-basis .filter-input-list.filter-input-list-expand{max-width:none}.f-list-filter .filter-inputs-main.filter-inputs-main-basis .filter-input-list-hasrange.filter-input-list-left,.f-list-filter .filter-inputs-main.filter-inputs-main-basis .filter-input-list-radio.filter-input-list-left{width:auto}.f-list-filter .filter-inputs-main.filter-inputs-main-basis.justify-content-end .filter-input-list:not(.filter-input-list-checkbox){-webkit-box-flex:1;flex:auto}.f-list-filter .filter-expand{right:0;top:0;width:24px;margin-left:21px;height:24px;line-height:24px;cursor:pointer}.f-list-filter .filter-expand.active{border-radius:2px}.f-list-filter .filter-expand .f-icon{display:block;line-height:24px;margin:0 auto;font-size:18px}.f-list-filter .filter-expand .filter-expand-tag{position:absolute;right:0;top:0;display:block;width:6px;height:6px;border-radius:50%}.f-list-filter .filter-inputs-extend{width:429px;right:0;top:34px;background-color:#fff;box-shadow:0 2px 3px 0 rgba(0,0,0,.15);z-index:900;padding:20px 0}.f-list-filter .filter-inputs-extend .filter-typelist-arrow{display:block;position:absolute;right:7px;top:-4px;width:8.48528137px;height:8.48528137px;background:0 0;border-style:solid;border-width:4.24264069px;box-shadow:-2px -2px 5px rgba(0,0,0,.08);-webkit-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg);border-color:#fff transparent transparent #fff}.f-list-filter .filter-inputs-extend .filter-form-btns{margin-top:6px;padding:0 14px}.f-list-filter .filter-inputs-extend .filter-form-btns .btn{margin-left:6px}.f-list-filter .filter-inputs-extend .filter-form-btns .filter-form-btn-reset{position:relative;padding-right:10px;margin-right:4px}.f-list-filter .filter-inputs-extend .filter-form-btns .filter-form-btn-reset::after{content:'';position:absolute;right:0;top:50%;width:1px;height:16px;margin-top:-8px;background:#d9d9d9}.f-list-filter .filter-search-btn-reset{padding-left:4px;padding-right:4px;color:rgba(0,0,0,.65)}.f-list-filter .filter-input-list .form-group{display:block}.f-list-filter .farris-form-controls-inline .filter-input-list .form-group{display:-webkit-box;display:flex}.f-list-filter .filter-inputs-main-list .filter-input-item .farris-form-group{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.f-list-filter .filter-inputs-main-list .filter-list-item{padding-right:100px}.f-list-filter .filter-inputs-main-list .filter-list-item .filter-input-list{position:relative}.f-list-filter .filter-inputs-main-list .filter-list-item .filter-search-btn{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;position:absolute;top:50%;left:calc(100% + 20px);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.filter-expand-simulate{opacity:0;display:inline-block;width:24px;height:24px;padding-left:21px}.filter-expand-simulate .f-icon{font-size:24px}"]
+                        styles: ["::-webkit-scrollbar{width:6px;height:6px;background-color:#eee}::-webkit-scrollbar-track{border-radius:0}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);transition:.2s;border-radius:6px}::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.45)}.filter-search-btn-col{flex-basis:0;flex-grow:1;max-width:100%}.filter-search-btn-absoulte{position:absolute;right:0;top:0}.f-list-filter .filter-inputs-main-basis-wrapper{width:100%;overflow:hidden}.f-list-filter .filter-inputs-main-basis-wrapper.list-filter-wrapper-show-btn{position:relative;padding-right:84px}.f-list-filter .filter-inputs-main-basis-wrapper.list-filter-wrapper-show-btn.list-filter-wrapper-show-btn-remove{padding-right:124px}.f-list-filter .filter-inputs-main-basis-wrapper.list-filter-wrapper-show-btn .filter-search-btn{position:absolute;right:0;top:0}.f-list-filter .filter-inputs-main-basis-wrapper.list-filter-wrapper-show-btn .filter-search-btn .btn{margin-left:6px}.f-list-filter .filter-inputs-main-basis-wrapper.list-filter-wrapper-show-btn .filter-search-btn .btn:first-child{margin-left:0}.f-list-filter .filter-inputs-main-basis-wrapper .filter-inputs-main-basis-wrapper-inner{width:100%;overflow:auto}.f-list-filter .filter-inputs-main-basis-wrapper .filter-inputs-main-basis-wrapper-inner .filter-inputs-main-basis.justify-content-end{margin-left:auto}.f-list-filter.list-filter-padding{padding-right:45px}.f-list-filter.list-filter-autoWidth{padding-bottom:8px}.f-list-filter.list-filter-autoWidth.list-filter-paddingnone{padding-bottom:0}@media (min-width:768px){.f-list-filter .list-filter-type-1{position:static;padding-right:0}.f-list-filter .list-filter-type-2,.f-list-filter .list-filter-type-3{position:relative;padding-right:70px}}@media (max-width:767px){.f-list-filter .list-filter-type-1{position:relative;padding-right:70px}.f-list-filter .list-filter-type-1.list-filter-show-reset{padding-right:110px}.f-list-filter .list-filter-type-2,.f-list-filter .list-filter-type-3{position:relative;padding-right:70px}.f-list-filter .list-filter-type-2.list-filter-show-reset,.f-list-filter .list-filter-type-3.list-filter-show-reset{position:relative;padding-right:110px}}@media (min-width:1200px){.f-list-filter .list-filter-type-2,.f-list-filter .list-filter-type-3{position:static;padding-right:0}.f-list-filter .list-filter-type-4,.f-list-filter .list-filter-type-5{position:relative;padding-right:70px}}@media (max-width:767px){.f-list-filter .list-filter-type-4,.f-list-filter .list-filter-type-5{position:relative;padding-right:70px}.f-list-filter .list-filter-type-4.list-filter-show-reset,.f-list-filter .list-filter-type-5.list-filter-show-reset{position:relative;padding-right:110px}}@media (min-width:768px){.f-list-filter .list-filter-type-2.list-filter-show-reset,.f-list-filter .list-filter-type-3.list-filter-show-reset{position:relative;padding-right:110px}.f-list-filter .list-filter-type-4,.f-list-filter .list-filter-type-5{position:relative;padding-right:70px}.f-list-filter .list-filter-type-4.list-filter-show-reset,.f-list-filter .list-filter-type-5.list-filter-show-reset{position:relative;padding-right:110px}}@media (min-width:1690px){.f-list-filter .list-filter-type-4,.f-list-filter .list-filter-type-5{position:static;padding-right:0}}@media (min-width:1200px){.f-list-filter .list-filter-type-4.list-filter-show-reset,.f-list-filter .list-filter-type-5.list-filter-show-reset{position:relative;padding-right:110px}}.f-list-filter .list-filter-custom-type,.f-list-filter .list-filter-type-6{position:relative;padding-right:70px}.f-list-filter .list-filter-custom-type.list-filter-show-reset,.f-list-filter .list-filter-type-6.list-filter-show-reset{padding-right:110px}.f-list-filter .list-filter-padding-none{padding-right:0}.f-list-filter .filter-inputs-main{width:100%;overflow:hidden}.f-list-filter .filter-inputs-main .col-12{padding-left:0}.f-list-filter .filter-inputs-main.filter-inputs-main-padding{padding-right:70px;position:relative}.f-list-filter .filter-inputs-main .filter-input-list.filter-input-list-autolabel{padding-right:14px}.f-list-filter .filter-inputs-main .filter-input-list.filter-input-list-autolabel:last-child{padding-right:0}.f-list-filter .filter-inputs-main .filter-input-list.filter-input-list-checkbox{max-width:none;flex:inherit}@media (max-width:767px){.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-1{position:absolute;right:0;top:0}}@media (min-width:768px){.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-1{flex-basis:0;flex-grow:1;max-width:100%;position:static}.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-2,.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-3{position:absolute;right:0;top:0}}@media (max-width:767px){.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-2,.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-3{position:absolute;right:0;top:0}}@media (min-width:1200px){.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-2,.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-3{flex-basis:0;flex-grow:1;max-width:100%;position:static}.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-4,.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-5{position:absolute;right:0;top:0}}@media (max-width:767px){.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-4,.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-5{position:absolute;right:0;top:0}}@media (min-width:768px){.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-4,.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-5{position:absolute;right:0;top:0}}@media (min-width:1690px){.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-4,.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-5{flex-basis:0;flex-grow:1;max-width:100%;position:static}}.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-btn-type-6,.f-list-filter .filter-inputs-main .filter-search-btn.filter-search-custom-type{position:absolute;right:0;top:0}.f-list-filter .filter-inputs-main .filter-search-btn .btn{margin-left:6px}.f-list-filter .filter-inputs-main .filter-search-btn .btn:first-child{margin-left:0}.f-list-filter .filter-inputs-main.filter-inputs-main-basis .filter-input-list{min-width:200px}.f-list-filter .filter-inputs-main.filter-inputs-main-basis .filter-input-list .filter-input-item .form-group{margin-bottom:0}.f-list-filter .filter-inputs-main.filter-inputs-main-basis .filter-input-list.filter-input-list-left{flex:1 1 auto;width:0}.f-list-filter .filter-inputs-main.filter-inputs-main-basis .filter-input-list.filter-input-list-expand{max-width:none}.f-list-filter .filter-inputs-main.filter-inputs-main-basis .filter-input-list-hasrange.filter-input-list-left,.f-list-filter .filter-inputs-main.filter-inputs-main-basis .filter-input-list-radio.filter-input-list-left{width:auto}.f-list-filter .filter-inputs-main.filter-inputs-main-basis.justify-content-end .filter-input-list:not(.filter-input-list-checkbox){flex:auto}.f-list-filter .filter-expand{right:0;top:0;width:24px;margin-left:21px;height:24px;line-height:24px;cursor:pointer}.f-list-filter .filter-expand.active{border-radius:2px}.f-list-filter .filter-expand .f-icon{display:block;line-height:24px;margin:0 auto;font-size:18px}.f-list-filter .filter-expand .filter-expand-tag{position:absolute;right:0;top:0;display:block;width:6px;height:6px;border-radius:50%}.f-list-filter .filter-inputs-extend{width:429px;right:0;top:34px;background-color:#fff;box-shadow:0 2px 3px 0 rgba(0,0,0,.15);z-index:900;padding:20px 0}.f-list-filter .filter-inputs-extend .filter-typelist-arrow{display:block;position:absolute;right:7px;top:-4px;width:8.48528137px;height:8.48528137px;background:0 0;border-style:solid;border-width:4.24264069px;box-shadow:-2px -2px 5px rgba(0,0,0,.08);transform:translateX(-50%) rotate(45deg);border-color:#fff transparent transparent #fff}.f-list-filter .filter-inputs-extend .filter-form-btns{margin-top:6px;padding:0 14px}.f-list-filter .filter-inputs-extend .filter-form-btns .btn{margin-left:6px}.f-list-filter .filter-inputs-extend .filter-form-btns .filter-form-btn-reset{position:relative;padding-right:10px;margin-right:4px}.f-list-filter .filter-inputs-extend .filter-form-btns .filter-form-btn-reset::after{content:'';position:absolute;right:0;top:50%;width:1px;height:16px;margin-top:-8px;background:#d9d9d9}.f-list-filter .filter-search-btn-reset{padding-left:4px;padding-right:4px;color:rgba(0,0,0,.65)}.f-list-filter .filter-input-list .form-group{display:block}.f-list-filter .farris-form-controls-inline .filter-input-list .form-group{display:flex}.f-list-filter .filter-inputs-main-list .filter-input-item .farris-form-group{display:flex;align-items:center;flex-direction:row}.f-list-filter .filter-inputs-main-list .filter-list-item{padding-right:100px}.f-list-filter .filter-inputs-main-list .filter-list-item .filter-input-list{position:relative}.f-list-filter .filter-inputs-main-list .filter-list-item .filter-search-btn{display:flex;align-items:center;position:absolute;top:50%;left:calc(100% + 20px);transform:translateY(-50%)}.filter-expand-simulate{opacity:0;display:inline-block;width:24px;height:24px;padding-left:21px}.filter-expand-simulate .f-icon{font-size:24px}.list-filter-button-position-bottom .list-filter-custom-type,.list-filter-button-position-bottom .list-filter-type-1,.list-filter-button-position-bottom .list-filter-type-2,.list-filter-button-position-bottom .list-filter-type-3,.list-filter-button-position-bottom .list-filter-type-4,.list-filter-button-position-bottom .list-filter-type-5,.list-filter-button-position-bottom .list-filter-type-6,.list-filter-button-position-bottom .list-filter-wrapper-show-btn,.list-filter-button-position-bottom .list-filter-wrapper-show-btn-remove{padding-right:0!important}"]
                     }] }
         ];
         /** @nocollapse */
@@ -5297,6 +5292,9 @@
             filterType: [{ type: i0.Input }],
             defaultEmptyValueSearch: [{ type: i0.Input }],
             defaultValue: [{ type: i0.Input }],
+            buttonPosition: [{ type: i0.Input }],
+            filterText: [{ type: i0.Input }],
+            clearButtonText: [{ type: i0.Input }],
             query: [{ type: i0.Output }],
             clear: [{ type: i0.Output }],
             searchChange: [{ type: i0.Output }],
@@ -6171,6 +6169,7 @@
     var DropDownComponent = /** @class */ (function () {
         function DropDownComponent(solutionService) {
             this.solutionService = solutionService;
+            this.editable = false;
             this.enableClear = true;
             this.searchHandle = new i0.EventEmitter();
             this.dropDownListDataSource = new Array();
@@ -6227,6 +6226,9 @@
                     else {
                         this.placeholder = this.item.placeHolder;
                     }
+                    if (this.item.control && this.item.control.hasOwnProperty('editable')) {
+                        this.editable = this.item.control.editable;
+                    }
                 }
                 this.getDataSource();
                 /** @type {?} */
@@ -6374,7 +6376,7 @@
         DropDownComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'app-filter-dropdown',
-                        template: "<label class=\"col-form-label\" *ngIf=\"item && showlabel\" title=\"{{getConditionItemTitle(item)}}\">\r\n    <span class=\"farris-label-info text-danger\" *ngIf=\"item.control.required\">*</span>\r\n    <span class=\"farris-label-text\">{{item.fieldName}}</span>\r\n</label>\r\n<div class=\"farris-input-wrap\" *ngIf=\"item\">\r\n    <farris-combo-list\r\n        [idField]=\"'value'\"\r\n        [textField]=\"'name'\"\r\n        [data]=\"dropDownListDataSource\"\r\n        [(ngModel)]=\"selectedItemId\"\r\n        [readonly]=\"disabled\"\r\n        [editable]=\"false\"\r\n        (selectChange)=\"onSearch($event)\"\r\n        (clear)=\"onClear($event)\"\r\n        [placeholder]=\"placeholder\"\r\n        [enableClear]=\"enableClear\"\r\n    ></farris-combo-list>\r\n\r\n</div>\r\n\r\n<!-- (valueChange)=\"onSearch($event)\" -->"
+                        template: "<label class=\"col-form-label\" *ngIf=\"item && showlabel\" title=\"{{getConditionItemTitle(item)}}\">\r\n    <span class=\"farris-label-info text-danger\" *ngIf=\"item.control.required\">*</span>\r\n    <span class=\"farris-label-text\">{{item.fieldName}}</span>\r\n</label>\r\n<div class=\"farris-input-wrap\" *ngIf=\"item\">\r\n    <farris-combo-list\r\n        [idField]=\"'value'\"\r\n        [textField]=\"'name'\"\r\n        [data]=\"dropDownListDataSource\"\r\n        [(ngModel)]=\"selectedItemId\"\r\n        [readonly]=\"disabled\"\r\n        [editable]=\"editable\"   \r\n        (selectChange)=\"onSearch($event)\"\r\n        (clear)=\"onClear($event)\"\r\n        [placeholder]=\"placeholder\"\r\n        [enableClear]=\"enableClear\"\r\n    ></farris-combo-list>\r\n</div>"
                     }] }
         ];
         /** @nocollapse */
@@ -6387,6 +6389,7 @@
             item: [{ type: i0.Input }],
             autoLabel: [{ type: i0.Input }],
             disabled: [{ type: i0.Input }],
+            editable: [{ type: i0.Input }],
             enableClear: [{ type: i0.Input }],
             searchHandle: [{ type: i0.Output, args: ['searchHandle',] }],
             isExtend: [{ type: i0.HostBinding, args: ['class.filter-item-wrap',] }],
@@ -7149,7 +7152,7 @@
                         selector: 'app-filter-common',
                         template: "",
                         encapsulation: i0.ViewEncapsulation.None,
-                        styles: [".filter-item-wrap .col-form-label{width:auto!important;max-width:6rem}.filter-item-hiddenlabel{padding-left:14px}.f-list-filter .filter-inputs-main .filter-input-list:first-child .filter-item-hiddenlabel{padding-left:0}.filter-item-checbox-wrap .farris-checkradio-hor{flex-wrap:nowrap!important}.filter-item-checbox-wrap .farris-checkradio-hor .custom-control{flex-shrink:0}.filter-item-checbox-wrap .farris-checkradio-hor .custom-checkbox{max-width:177px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter-item-checbox-wrap .farris-checkradio-hor .custom-checkbox:last-child{padding-right:0}.filter-item-checbox-wrap .farris-input-wrap{overflow:auto}.filter-item-checbox-wrap .farris-input-wrap::-webkit-scrollbar{width:6px;height:6px}.filter-item-checbox-wrap .farris-input-wrap::-webkit-scrollbar-track{border-radius:0}.filter-item-checbox-wrap .farris-input-wrap::-webkit-scrollbar-thumb{-webkit-transition:.2s;transition:.2s;border-radius:6px}.filter-inputs-main-list.farris-form-controls-inline .farris-group-wrap .col-form-label{-webkit-box-pack:start!important;justify-content:flex-start!important;width:8rem}.filter-inputs-main-list.farris-form-controls-inline .farris-group-wrap .form-group{margin-bottom:1rem}.filter-inputs-main-list.farris-form-controls-inline .filter-list-item .farris-group-wrap .form-group{margin-bottom:0}"]
+                        styles: [".filter-item-wrap .col-form-label{width:auto!important;max-width:6rem}.filter-item-hiddenlabel{padding-left:14px}.f-list-filter .filter-inputs-main .filter-input-list:first-child .filter-item-hiddenlabel{padding-left:0}.filter-item-checbox-wrap .farris-checkradio-hor{flex-wrap:nowrap!important}.filter-item-checbox-wrap .farris-checkradio-hor .custom-control{flex-shrink:0}.filter-item-checbox-wrap .farris-checkradio-hor .custom-checkbox{max-width:177px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter-item-checbox-wrap .farris-checkradio-hor .custom-checkbox:last-child{padding-right:0}.filter-item-checbox-wrap .farris-input-wrap{overflow:auto}.filter-item-checbox-wrap .farris-input-wrap::-webkit-scrollbar{width:6px;height:6px}.filter-item-checbox-wrap .farris-input-wrap::-webkit-scrollbar-track{border-radius:0}.filter-item-checbox-wrap .farris-input-wrap::-webkit-scrollbar-thumb{transition:.2s;border-radius:6px}.filter-inputs-main-list.farris-form-controls-inline .farris-group-wrap .col-form-label{justify-content:flex-start!important;width:8rem}.filter-inputs-main-list.farris-form-controls-inline .farris-group-wrap .form-group{margin-bottom:1rem}.filter-inputs-main-list.farris-form-controls-inline .filter-list-item .farris-group-wrap .form-group{margin-bottom:0}"]
                     }] }
         ];
         return ListFilterCommonComponent;