@sd-angular/core 1.1.87 → 1.1.90

package/bundles/sd-angular-core-grid.umd.js

@@ -2556,7 +2556,7 @@
     SdGridConfig.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-grid-config',
-                    template: "<sd-modal [title]=\"'Configuration' | sdTranslate\" #modal>\r\n  <sd-modal-body *ngIf=\"storage\">\r\n    <div class=\"row\">\r\n      <div class=\"col-md-3 col-6\">\r\n        <sd-input-number [label]=\"'Page size' | sdTranslate\" [(model)]=\"storage.pageSize\" step=\"1\">\r\n        </sd-input-number>\r\n      </div>\r\n    </div>\r\n    <div class=\"sd-box sd-box-primary\">\r\n      <div class=\"sd-box-body p-0\">\r\n        <div class=\"table-responsive\">\r\n          <table class=\"table table-striped table-sm table-hover table-bordered c-table\">\r\n            <thead class=\"thead-light\">\r\n              <tr>\r\n                <th class=\"text-center\" style=\"width: 50px\">#</th>\r\n                <th *sdDesktop class=\"text-center\" style=\"width: 80px\"></th>\r\n                <!-- <th class=\"text-uppercase\" style=\"width: 120px\">Field </th> -->\r\n                <th class=\"text-uppercase\">{{'Title' | sdTranslate}}</th>\r\n                <th *sdDesktop class=\"text-uppercase\" style=\"width: 80px\">{{'Width' | sdTranslate}}</th>\r\n                <th class=\"text-uppercase\" style=\"width: 80px\">{{'Hidden' | sdTranslate}}</th>\r\n                <th *sdDesktop class=\"text-uppercase\" style=\"width: 80px\">{{'Freeze' | sdTranslate}}</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr *ngFor=\"let column of storage.columnConfigs; let idx = index\">\r\n                <td class=\"align-middle text-center\">\r\n                  {{idx+1}}\r\n                </td>\r\n                <td *sdDesktop class=\"align-middle text-center\">\r\n                  <button type=\"button\" [disabled]=\"idx==0\" type=\"button\" class=\"c-btn-icon\" placement=\"top\"\r\n                    matTooltip=\"Up\" (click)=\"moveColumnUp(idx)\">\r\n                    <i class=\"fa fa-arrow-up text-primary\" aria-hidden=\"true\"></i>\r\n                  </button>\r\n                  <button type=\"button\" [disabled]=\"idx==storage.columnConfigs.length-1\" type=\"button\"\r\n                    class=\"c-btn-icon\" placement=\"top\" matTooltip=\"Down\" (click)=\"moveColumnDown(idx)\">\r\n                    <i class=\"fa fa-arrow-down text-primary\" aria-hidden=\"true\"></i>\r\n                  </button>\r\n                </td>\r\n                <!-- <td class=\"align-middle\">{{column.originColumn.field}}</td> -->\r\n                <td class=\"align-middle\">\r\n                  <input type=\"text\" placeholder=\"{{column.originColumn.title}}\" [(ngModel)]=\"column.title\"\r\n                    class=\"form-control form-control-sm\">\r\n                </td>\r\n                <td *sdDesktop class=\"align-middle\">\r\n                  <input type=\"text\" placeholder=\"{{column.originColumn.width}}\" [(ngModel)]=\"column.width\"\r\n                    class=\"form-control form-control-sm\">\r\n                </td>\r\n                <td class=\"align-middle text-center\">\r\n                  <mat-slide-toggle [(ngModel)]=\"column.hidden\" color=\"primary\"></mat-slide-toggle>\r\n                </td>\r\n                <td *sdDesktop class=\"align-middle text-center\">\r\n                  <mat-slide-toggle [(ngModel)]=\"column.fixed\" color=\"primary\"></mat-slide-toggle>\r\n                </td>\r\n              </tr>\r\n          </table>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"reset()\" icon=\"refresh\" [title]=\"'Reset' | sdTranslate\" size=\"sm\"></sd-button>\r\n    <sd-button (action)=\"save()\" icon=\"save\" [title]=\"'Save' | sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"reset()\" icon=\"refresh\" [title]=\"'Reset' | sdTranslate\"\r\n      width=\"100%\" size=\"sm\"></sd-button>\r\n    <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"save()\" icon=\"save\" [title]=\"'Save' | sdTranslate\"\r\n      color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>",
+                    template: "<sd-modal [title]=\"'Configuration' | sdTranslate\" #modal>\r\n  <sd-modal-body *ngIf=\"storage\">\r\n    <div class=\"row\">\r\n      <div class=\"col-md-3 col-6\">\r\n        <sd-input-currency [label]=\"'Page size' | sdTranslate\" [(model)]=\"storage.pageSize\" step=\"1\">\r\n        </sd-input-currency>\r\n      </div>\r\n    </div>\r\n    <div class=\"sd-box sd-box-primary\">\r\n      <div class=\"sd-box-body p-0\">\r\n        <div class=\"table-responsive\">\r\n          <table class=\"table table-striped table-sm table-hover table-bordered c-table\">\r\n            <thead class=\"thead-light\">\r\n              <tr>\r\n                <th class=\"text-center\" style=\"width: 50px\">#</th>\r\n                <th *sdDesktop class=\"text-center\" style=\"width: 80px\"></th>\r\n                <!-- <th class=\"text-uppercase\" style=\"width: 120px\">Field </th> -->\r\n                <th class=\"text-uppercase\">{{'Title' | sdTranslate}}</th>\r\n                <th *sdDesktop class=\"text-uppercase\" style=\"width: 80px\">{{'Width' | sdTranslate}}</th>\r\n                <th class=\"text-uppercase\" style=\"width: 80px\">{{'Hidden' | sdTranslate}}</th>\r\n                <th *sdDesktop class=\"text-uppercase\" style=\"width: 80px\">{{'Freeze' | sdTranslate}}</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr *ngFor=\"let column of storage.columnConfigs; let idx = index\">\r\n                <td class=\"align-middle text-center\">\r\n                  {{idx+1}}\r\n                </td>\r\n                <td *sdDesktop class=\"align-middle text-center\">\r\n                  <button type=\"button\" [disabled]=\"idx==0\" type=\"button\" class=\"c-btn-icon\" placement=\"top\"\r\n                    matTooltip=\"Up\" (click)=\"moveColumnUp(idx)\">\r\n                    <i class=\"fa fa-arrow-up text-primary\" aria-hidden=\"true\"></i>\r\n                  </button>\r\n                  <button type=\"button\" [disabled]=\"idx==storage.columnConfigs.length-1\" type=\"button\"\r\n                    class=\"c-btn-icon\" placement=\"top\" matTooltip=\"Down\" (click)=\"moveColumnDown(idx)\">\r\n                    <i class=\"fa fa-arrow-down text-primary\" aria-hidden=\"true\"></i>\r\n                  </button>\r\n                </td>\r\n                <!-- <td class=\"align-middle\">{{column.originColumn.field}}</td> -->\r\n                <td class=\"align-middle\">\r\n                  <input type=\"text\" placeholder=\"{{column.originColumn.title}}\" [(ngModel)]=\"column.title\"\r\n                    class=\"form-control form-control-sm\">\r\n                </td>\r\n                <td *sdDesktop class=\"align-middle\">\r\n                  <input type=\"text\" placeholder=\"{{column.originColumn.width}}\" [(ngModel)]=\"column.width\"\r\n                    class=\"form-control form-control-sm\">\r\n                </td>\r\n                <td class=\"align-middle text-center\">\r\n                  <mat-slide-toggle [(ngModel)]=\"column.hidden\" color=\"primary\"></mat-slide-toggle>\r\n                </td>\r\n                <td *sdDesktop class=\"align-middle text-center\">\r\n                  <mat-slide-toggle [(ngModel)]=\"column.fixed\" color=\"primary\"></mat-slide-toggle>\r\n                </td>\r\n              </tr>\r\n          </table>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"reset()\" icon=\"refresh\" [title]=\"'Reset' | sdTranslate\" size=\"sm\"></sd-button>\r\n    <sd-button (action)=\"save()\" icon=\"save\" [title]=\"'Save' | sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"reset()\" icon=\"refresh\" [title]=\"'Reset' | sdTranslate\"\r\n      width=\"100%\" size=\"sm\"></sd-button>\r\n    <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"save()\" icon=\"save\" [title]=\"'Save' | sdTranslate\"\r\n      color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>",
                     styles: [".c-btn-icon{background:none!important;border:none;opacity:.8}.c-btn-icon:hover{cursor:pointer;opacity:1}.c-btn-icon:disabled{background:none!important;border:none;cursor:not-allowed;opacity:.3}.table td,.table th{padding:.2rem!important}.c-table.table{margin-bottom:5px}"]
                 },] }
     ];
@@ -2625,7 +2625,7 @@
     SdGridDesktopColumnEdit.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-grid-desktop-column-edit',
-                    template: "<ng-container *ngIf=\"column && item\">\r\n  <div *ngIf=\"column.type === 'string'\">\r\n    <div *ngIf=\"column.editor?.item;else elseUseInput\">\r\n      <sd-select *ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n        [items]=\"item[column.editor?.item?.dependOnField] | sdDynamicItems:dynamicItems\"\r\n        [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n        (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n        [items]=\"item[column.editor?.item?.dependOnField] | sdDynamicItems:dynamicItems\"\r\n        [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n        (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-autocomplete>\r\n    </div>\r\n    <ng-template #elseUseInput>\r\n      <sd-input size=\"sm\" *ngIf=\"column.editor?.click\" [(model)]=\"item[column.field]\"\r\n        (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n        (sdChange)=\"onEditorChange(column,item,item[column.field])\" (sdClick)=\"column.editor.click(item)\"></sd-input>\r\n      <sd-input size=\"sm\" *ngIf=\"!column.editor?.click\" [(model)]=\"item[column.field]\"\r\n        (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n        (sdChange)=\"onEditorChange(column,item,item[column.field])\"></sd-input>\r\n    </ng-template>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'color'\">\r\n    <sd-input size=\"sm\" type=\"color\" [(model)]=\"item[column.field]\"\r\n      (sdChange)=\"onEditorChange(column,item,item[column.field])\">\r\n    </sd-input>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'number'\">\r\n    <sd-input-number size=\"sm\" [(model)]=\"item[column.field]\"\r\n      (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n      (sdChange)=\"onEditorChange(column,item,item[column.field])\"></sd-input-number>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'date'\">\r\n    <sd-date-time size=\"sm\" [(model)]=\"item[column.field]\" type=\"date\"></sd-date-time>\r\n  </div>\r\n  <div class=\"text-center\" *ngIf=\"column.type === 'datetime'\">\r\n    <sd-date-time size=\"sm\" [(model)]=\"item[column.field]\" type=\"datetime\"></sd-date-time>\r\n  </div>\r\n  <div class=\"text-center\" *ngIf=\"column.type === 'time'\">\r\n    <sd-time [(model)]=\"item[column.field]\"></sd-time>\r\n    <!-- <sd-grid-date-picker-control [(model)]=\"item[column.field]\" type=\"time\"></sd-grid-date-picker-control> -->\r\n  </div>\r\n  <div class=\"align-middle text-center\" *ngIf=\"column.type === 'bool'\">\r\n    <sd-switch [(model)]=\"item[column.field]\" (sdChange)=\"onEditorChange(column,item,item[column.field])\">\r\n    </sd-switch>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'values'\">\r\n    <div *ngIf=\"column.editor?.item;else elseUseValues\">\r\n      <sd-select *ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n        [items]=\"item[column.editor?.item?.dependOnField] | sdDynamicItems:dynamicItems\"\r\n        [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n        (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n        [items]=\"item[column.editor?.item?.dependOnField] | sdDynamicItems:dynamicItems\"\r\n        [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n        (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-autocomplete>\r\n    </div>\r\n    <ng-template #elseUseValues>\r\n      <sd-select *ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\" [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n        (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\" [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n      (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-autocomplete>\r\n    </ng-template>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'radio'\">\r\n    <section class=\"mt-5 ml-5\">\r\n      <mat-radio-group class=\"d-flex\" [(ngModel)]=\"item[column.field]\"\r\n        (change)=\"column.editor?.change && column.editor?.change(item)\">\r\n        <mat-radio-button *ngIf=\"!column.editor?.required\" color=\"warn\" class=\"mr-5\" value=\"\">\r\n          {{'Please select' | sdTranslate}}\r\n        </mat-radio-button>\r\n        <mat-radio-button color=\"primary\" class=\"mr-5\" *ngFor=\"let data of column.values\"\r\n          [value]=\"data[column.valueField]\">\r\n          {{data[column.displayField]}}\r\n        </mat-radio-button>\r\n      </mat-radio-group>\r\n    </section>\r\n  </div>\r\n  <div class=\"align-middle text-center\" *ngIf=\"column.type === 'image'\">\r\n    <img [src]=\"item[column.field]\" [width]=\"column.display?.width\" [height]=\"column.display?.height\"\r\n      style=\"margin: 5px 0\" (click)=\"column.click && column.click(item[column.field], item)\">\r\n  </div>\r\n</ng-container>",
+                    template: "<ng-container *ngIf=\"column && item\">\r\n  <div *ngIf=\"column.type === 'string'\">\r\n    <div *ngIf=\"column.editor?.item;else elseUseInput\">\r\n      <sd-select *ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n        [items]=\"item[column.editor?.item?.dependOnField] | sdDynamicItems:dynamicItems\"\r\n        [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n        (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n        [items]=\"item[column.editor?.item?.dependOnField] | sdDynamicItems:dynamicItems\"\r\n        [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n        (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-autocomplete>\r\n    </div>\r\n    <ng-template #elseUseInput>\r\n      <sd-input size=\"sm\" *ngIf=\"column.editor?.click\" [(model)]=\"item[column.field]\"\r\n        (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n        (sdChange)=\"onEditorChange(column,item,item[column.field])\" (sdClick)=\"column.editor.click(item)\"></sd-input>\r\n      <sd-input size=\"sm\" *ngIf=\"!column.editor?.click\" [(model)]=\"item[column.field]\"\r\n        (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n        (sdChange)=\"onEditorChange(column,item,item[column.field])\"></sd-input>\r\n    </ng-template>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'color'\">\r\n    <sd-input size=\"sm\" type=\"color\" [(model)]=\"item[column.field]\"\r\n      (sdChange)=\"onEditorChange(column,item,item[column.field])\">\r\n    </sd-input>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'number'\">\r\n    <sd-input-currency size=\"sm\" [(model)]=\"item[column.field]\"\r\n      (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n      (sdChange)=\"onEditorChange(column,item,item[column.field])\"></sd-input-currency>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'date'\">\r\n    <sd-date-time size=\"sm\" [(model)]=\"item[column.field]\" type=\"date\"></sd-date-time>\r\n  </div>\r\n  <div class=\"text-center\" *ngIf=\"column.type === 'datetime'\">\r\n    <sd-date-time size=\"sm\" [(model)]=\"item[column.field]\" type=\"datetime\"></sd-date-time>\r\n  </div>\r\n  <div class=\"text-center\" *ngIf=\"column.type === 'time'\">\r\n    <sd-time [(model)]=\"item[column.field]\"></sd-time>\r\n    <!-- <sd-grid-date-picker-control [(model)]=\"item[column.field]\" type=\"time\"></sd-grid-date-picker-control> -->\r\n  </div>\r\n  <div class=\"align-middle text-center\" *ngIf=\"column.type === 'bool'\">\r\n    <sd-switch [(model)]=\"item[column.field]\" (sdChange)=\"onEditorChange(column,item,item[column.field])\">\r\n    </sd-switch>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'values'\">\r\n    <div *ngIf=\"column.editor?.item;else elseUseValues\">\r\n      <sd-select *ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n        [items]=\"item[column.editor?.item?.dependOnField] | sdDynamicItems:dynamicItems\"\r\n        [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n        (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n        [items]=\"item[column.editor?.item?.dependOnField] | sdDynamicItems:dynamicItems\"\r\n        [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n        (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-autocomplete>\r\n    </div>\r\n    <ng-template #elseUseValues>\r\n      <sd-select *ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\" [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n        (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\" [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n      (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-autocomplete>\r\n    </ng-template>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'radio'\">\r\n    <section class=\"mt-5 ml-5\">\r\n      <mat-radio-group class=\"d-flex\" [(ngModel)]=\"item[column.field]\"\r\n        (change)=\"column.editor?.change && column.editor?.change(item)\">\r\n        <mat-radio-button *ngIf=\"!column.editor?.required\" color=\"warn\" class=\"mr-5\" value=\"\">\r\n          {{'Please select' | sdTranslate}}\r\n        </mat-radio-button>\r\n        <mat-radio-button color=\"primary\" class=\"mr-5\" *ngFor=\"let data of column.values\"\r\n          [value]=\"data[column.valueField]\">\r\n          {{data[column.displayField]}}\r\n        </mat-radio-button>\r\n      </mat-radio-group>\r\n    </section>\r\n  </div>\r\n  <div class=\"align-middle text-center\" *ngIf=\"column.type === 'image'\">\r\n    <img [src]=\"item[column.field]\" [width]=\"column.display?.width\" [height]=\"column.display?.height\"\r\n      style=\"margin: 5px 0\" (click)=\"column.click && column.click(item[column.field], item)\">\r\n  </div>\r\n</ng-container>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [".c-input-xs{font-size:13px!important;height:28px!important;line-height:1.5!important;padding:3px!important}"]
                 },] }
@@ -2676,7 +2676,7 @@
     SdGridDesktopInlineFilter.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-grid-desktop-inline-filter',
-                    template: "<ng-container *ngIf=\"filterOption?.multiple !== false\">\r\n  <ng-container *ngIf=\"columns?.length && filterOption?.columnInline === 'outside'\">\r\n    <ng-container *ngFor=\"let item of columns\">\r\n      <ng-container\r\n        *ngIf=\"item.type !== 'children' && item.type !== 'image' && !item?.filter?.disabled && item.priority !== 'low'\">\r\n        <ng-container *ngIf=\"inlineColumn[item.field] || inlineColumn[item.field] === undefined\">\r\n          <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n            <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"filter[item.field]\"\r\n              (keyupEnter)=\"onUpdateFilter()\">\r\n            </sd-input>\r\n            <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"filter[item.field]\"\r\n              (keyupEnter)=\"onUpdateFilter()\">\r\n            </sd-input-number>\r\n            <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.trueValue || 'True' },\r\n          {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n              [(model)]=\"filter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n            </sd-select>\r\n            <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"filter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\">\r\n            </sd-select>\r\n            <sd-select *ngIf=\"item.type === 'values' && !item?.editor?.autocomplete\" [label]=\"item.title\"\r\n              [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\">\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.type === 'values' && item?.editor?.autocomplete\" [items]=\"item.values\"\r\n              valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n            </sd-autocomplete>\r\n            <sd-date-time *ngIf=\"item.type === 'date' || item.type === 'datetime' || item.type === 'time'\"\r\n              [label]=\"item.title\" [(model)]=\"filter[item.field]\" type=\"date\" (sdChange)=\"onUpdateFilter()\">\r\n            </sd-date-time>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container\r\n        *ngIf=\"item.type === 'children' && item.children?.length && !item?.filter?.disabled && item.priority !== 'low'\">\r\n        <ng-container *ngFor=\"let childColumn of item.children\">\r\n          <ng-container\r\n            *ngIf=\"inlineColumn[childColumn.field] && !childColumn?.filter?.disabled && childColumn.priority !== 'low' && childColumn.type !== 'image'\">\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-input [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'string'\" type=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n              </sd-input>\r\n              <sd-input-number [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'number'\"\r\n                [(model)]=\"filter[childColumn.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n              </sd-input-number>\r\n              <sd-select [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'bool'\" [items]=\"[{value:'1',display:childColumn.trueValue || 'True' },\r\n            {value:'0',display:childColumn.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n                [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-select>\r\n              <sd-select [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'radio'\" [items]=\"childColumn.values\"\r\n                [valueField]=\"childColumn.valueField\" [displayField]=\"childColumn.displayField\"\r\n                [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-select>\r\n              <sd-select *ngIf=\"childColumn.type === 'values' && !item?.editor?.autocomplete\"\r\n                [label]=\"childColumn.title\" [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-select>\r\n              <sd-autocomplete *ngIf=\"childColumn.type === 'values' && item?.editor?.autocomplete\"\r\n                [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-autocomplete>\r\n              <sd-date-time\r\n                *ngIf=\"childColumn.type === 'date' || childColumn.type === 'datetime' || childColumn.type === 'time'\"\r\n                [label]=\"childColumn.title\" [(model)]=\"filter[childColumn.field]\" type=\"date\"\r\n                (sdChange)=\"onUpdateFilter()\">\r\n              </sd-date-time>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"filterOption?.externalFilters?.length\">\r\n    <ng-container *ngFor=\"let item of filterOption.externalFilters\">\r\n      <ng-container\r\n        *ngIf=\"(inlineExternal[item.field] || inlineExternal[item.field] === undefined) && item.priority !== 'low'\">\r\n        <div *ngIf=\"item.type !=='daterange' && item.type !=='numberrange';else elseFilterRange\"\r\n          class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n          <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\"\r\n            [(model)]=\"externalFilter[item.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n          </sd-input>\r\n          <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\"\r\n            (keyupEnter)=\"onUpdateFilter()\">\r\n          </sd-input-number>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.trueValue || 'True' },\r\n          {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n            [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n          </sd-select>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n            [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n            (sdChange)=\"onUpdateFilter()\">\r\n          </sd-select>\r\n          <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'custom'\"\r\n            [(model)]=\"externalFilter[displayKey + item.field]\"\r\n            (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.field, displayKey + item.field)\"\r\n            (sdChange)=\"onUpdateFilter()\">\r\n          </sd-input>\r\n          <ng-container *ngIf=\"item.type === 'values'\">\r\n            <sd-select *ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\" multiple=\"true\">\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\">\r\n            </sd-autocomplete>\r\n            <sd-select *ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\" filtered=\"true\" multiple=\"true\">\r\n            </sd-select>\r\n            <sd-select *ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\" [valueField]=\"item.valueField\"\r\n              [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n            </sd-select>\r\n          </ng-container>\r\n          <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date'\" [(model)]=\"externalFilter[item.field]\"\r\n            type=\"date\" (sdChange)=\"onUpdateFilter()\">\r\n          </sd-date-time>\r\n          <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterangefull'\"\r\n            [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n            [max]=\"item.maxDate\" (sdChange)=\"onUpdateFilter()\">\r\n          </sd-date-range>\r\n        </div>\r\n        <ng-template #elseFilterRange>\r\n          <ng-container *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\">\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.field].from\"\r\n                [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n                [maxDate]=\"externalFilter[item.field].to || item.maxDate\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-date-time>\r\n            </div>\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.field].to\"\r\n                [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n                [minDate]=\"item.minDate || externalFilter[item.field].from\" [maxDate]=\"item.maxDate\"\r\n                (sdChange)=\"onUpdateFilter()\">\r\n              </sd-date-time>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"item.type ==='numberrange' && externalFilter[item.field]\">\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].from\"\r\n                (sdChange)=\"onUpdateFilter()\">\r\n              </sd-input>\r\n            </div>\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].to\"\r\n                (sdChange)=\"onUpdateFilter()\">\r\n              </sd-input>\r\n            </div>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>",
+                    template: "<ng-container *ngIf=\"filterOption?.multiple !== false\">\r\n  <ng-container *ngIf=\"columns?.length && filterOption?.columnInline === 'outside'\">\r\n    <ng-container *ngFor=\"let item of columns\">\r\n      <ng-container\r\n        *ngIf=\"item.type !== 'children' && item.type !== 'image' && !item?.filter?.disabled && item.priority !== 'low'\">\r\n        <ng-container *ngIf=\"inlineColumn[item.field] || inlineColumn[item.field] === undefined\">\r\n          <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n            <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"filter[item.field]\"\r\n              (keyupEnter)=\"onUpdateFilter()\">\r\n            </sd-input>\r\n            <sd-input-currency [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"filter[item.field]\"\r\n              (keyupEnter)=\"onUpdateFilter()\">\r\n            </sd-input-currency>\r\n            <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.trueValue || 'True' },\r\n          {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n              [(model)]=\"filter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n            </sd-select>\r\n            <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"filter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\">\r\n            </sd-select>\r\n            <sd-select *ngIf=\"item.type === 'values' && !item?.editor?.autocomplete\" [label]=\"item.title\"\r\n              [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\">\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.type === 'values' && item?.editor?.autocomplete\" [items]=\"item.values\"\r\n              valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n            </sd-autocomplete>\r\n            <sd-date-time *ngIf=\"item.type === 'date' || item.type === 'datetime' || item.type === 'time'\"\r\n              [label]=\"item.title\" [(model)]=\"filter[item.field]\" type=\"date\" (sdChange)=\"onUpdateFilter()\">\r\n            </sd-date-time>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container\r\n        *ngIf=\"item.type === 'children' && item.children?.length && !item?.filter?.disabled && item.priority !== 'low'\">\r\n        <ng-container *ngFor=\"let childColumn of item.children\">\r\n          <ng-container\r\n            *ngIf=\"inlineColumn[childColumn.field] && !childColumn?.filter?.disabled && childColumn.priority !== 'low' && childColumn.type !== 'image'\">\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-input [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'string'\" type=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n              </sd-input>\r\n              <sd-input-currency [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'number'\"\r\n                [(model)]=\"filter[childColumn.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n              </sd-input-currency>\r\n              <sd-select [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'bool'\" [items]=\"[{value:'1',display:childColumn.trueValue || 'True' },\r\n            {value:'0',display:childColumn.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n                [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-select>\r\n              <sd-select [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'radio'\" [items]=\"childColumn.values\"\r\n                [valueField]=\"childColumn.valueField\" [displayField]=\"childColumn.displayField\"\r\n                [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-select>\r\n              <sd-select *ngIf=\"childColumn.type === 'values' && !item?.editor?.autocomplete\"\r\n                [label]=\"childColumn.title\" [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-select>\r\n              <sd-autocomplete *ngIf=\"childColumn.type === 'values' && item?.editor?.autocomplete\"\r\n                [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-autocomplete>\r\n              <sd-date-time\r\n                *ngIf=\"childColumn.type === 'date' || childColumn.type === 'datetime' || childColumn.type === 'time'\"\r\n                [label]=\"childColumn.title\" [(model)]=\"filter[childColumn.field]\" type=\"date\"\r\n                (sdChange)=\"onUpdateFilter()\">\r\n              </sd-date-time>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"filterOption?.externalFilters?.length\">\r\n    <ng-container *ngFor=\"let item of filterOption.externalFilters\">\r\n      <ng-container\r\n        *ngIf=\"(inlineExternal[item.field] || inlineExternal[item.field] === undefined) && item.priority !== 'low'\">\r\n        <div *ngIf=\"item.type !=='daterange' && item.type !=='numberrange';else elseFilterRange\"\r\n          class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n          <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\"\r\n            [(model)]=\"externalFilter[item.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n          </sd-input>\r\n          <sd-input-currency [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\"\r\n            (keyupEnter)=\"onUpdateFilter()\">\r\n          </sd-input-currency>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.trueValue || 'True' },\r\n          {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n            [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n          </sd-select>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n            [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n            (sdChange)=\"onUpdateFilter()\">\r\n          </sd-select>\r\n          <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'custom'\"\r\n            [(model)]=\"externalFilter[displayKey + item.field]\"\r\n            (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.field, displayKey + item.field)\"\r\n            (sdChange)=\"onUpdateFilter()\">\r\n          </sd-input>\r\n          <ng-container *ngIf=\"item.type === 'values'\">\r\n            <sd-select *ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\" multiple=\"true\">\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\">\r\n            </sd-autocomplete>\r\n            <sd-select *ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\" filtered=\"true\" multiple=\"true\">\r\n            </sd-select>\r\n            <sd-select *ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\" [valueField]=\"item.valueField\"\r\n              [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n            </sd-select>\r\n          </ng-container>\r\n          <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date'\" [(model)]=\"externalFilter[item.field]\"\r\n            type=\"date\" (sdChange)=\"onUpdateFilter()\">\r\n          </sd-date-time>\r\n          <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterangefull'\"\r\n            [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n            [max]=\"item.maxDate\" (sdChange)=\"onUpdateFilter()\">\r\n          </sd-date-range>\r\n        </div>\r\n        <ng-template #elseFilterRange>\r\n          <ng-container *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\">\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.field].from\"\r\n                [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n                [maxDate]=\"externalFilter[item.field].to || item.maxDate\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-date-time>\r\n            </div>\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.field].to\"\r\n                [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n                [minDate]=\"item.minDate || externalFilter[item.field].from\" [maxDate]=\"item.maxDate\"\r\n                (sdChange)=\"onUpdateFilter()\">\r\n              </sd-date-time>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"item.type ==='numberrange' && externalFilter[item.field]\">\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].from\"\r\n                (sdChange)=\"onUpdateFilter()\">\r\n              </sd-input>\r\n            </div>\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].to\"\r\n                (sdChange)=\"onUpdateFilter()\">\r\n              </sd-input>\r\n            </div>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>",
                     styles: [""]
                 },] }
     ];
@@ -2753,7 +2753,7 @@
     SdGridPopupEditor.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-grid-popup-editor',
-                    template: "<sd-modal [title]=\"(isModified ? 'Edit' : 'Create')\" width=\"sm\" #modal>\r\n  <sd-modal-body *ngIf=\"item && columns?.length\">\r\n    <form #formEditor=\"ngForm\">\r\n      <ng-container *ngFor=\"let column of columns\">\r\n        <div *ngIf=\"column | editorPopupVisible:item\" class=\"row\">\r\n          <div class=\"col-12\">\r\n            <sd-input *ngIf=\"column.type === 'string'\" [(model)]=\"item[column.field]\"></sd-input>\r\n            <sd-input-number *ngIf=\"column.type === 'number'\" [(model)]=\"item[column.field]\">\r\n            </sd-input-number>\r\n            <sd-select *ngIf=\"column.type === 'values'\" [(model)]=\"item[column.field]\" [items]=\"column.values\">\r\n            </sd-select>\r\n            <sd-switch *ngIf=\"column.type === 'boolean'\" [(model)]=\"item[column.field]\">\r\n            </sd-switch>\r\n            <sd-select *ngIf=\"column.type === 'radio'\" [(model)]=\"item[column.field]\" [items]=\"column.values\">\r\n            </sd-select>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </form>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"onCancel()\" icon=\"close\" [title]=\"'Cancel' | sdTranslate\" size=\"sm\">\r\n    </sd-button>\r\n    <sd-button (action)=\"onSave()\" icon=\"save\" [title]=\"'Save' | sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onCancel()\" icon=\"close\" [title]=\"'Cancel' | sdTranslate\"\r\n      width=\"100%\" size=\"sm\"></sd-button>\r\n    <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onSave()\" icon=\"save\" [title]=\"'Save' | sdTranslate\"\r\n      color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>"
+                    template: "<sd-modal [title]=\"(isModified ? 'Edit' : 'Create')\" width=\"sm\" #modal>\r\n  <sd-modal-body *ngIf=\"item && columns?.length\">\r\n    <form #formEditor=\"ngForm\">\r\n      <ng-container *ngFor=\"let column of columns\">\r\n        <div *ngIf=\"column | editorPopupVisible:item\" class=\"row\">\r\n          <div class=\"col-12\">\r\n            <sd-input *ngIf=\"column.type === 'string'\" [(model)]=\"item[column.field]\"></sd-input>\r\n            <sd-input-currency *ngIf=\"column.type === 'number'\" [(model)]=\"item[column.field]\">\r\n            </sd-input-currency>\r\n            <sd-select *ngIf=\"column.type === 'values'\" [(model)]=\"item[column.field]\" [items]=\"column.values\">\r\n            </sd-select>\r\n            <sd-switch *ngIf=\"column.type === 'boolean'\" [(model)]=\"item[column.field]\">\r\n            </sd-switch>\r\n            <sd-select *ngIf=\"column.type === 'radio'\" [(model)]=\"item[column.field]\" [items]=\"column.values\">\r\n            </sd-select>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </form>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"onCancel()\" icon=\"close\" [title]=\"'Cancel' | sdTranslate\" size=\"sm\">\r\n    </sd-button>\r\n    <sd-button (action)=\"onSave()\" icon=\"save\" [title]=\"'Save' | sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onCancel()\" icon=\"close\" [title]=\"'Cancel' | sdTranslate\"\r\n      width=\"100%\" size=\"sm\"></sd-button>\r\n    <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onSave()\" icon=\"save\" [title]=\"'Save' | sdTranslate\"\r\n      color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>"
                 },] }
     ];
     SdGridPopupEditor.ctorParameters = function () { return []; };
@@ -3613,7 +3613,7 @@
     SdGridPopupFilter.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-grid-popup-filter',
-                    template: "<sd-modal width=\"sm\" [title]=\"'Filter' | sdTranslate\" #modal>\r\n  <sd-modal-body>\r\n    <div\r\n      *ngIf=\"key && filterOption?.multiple !== false && (!filterOption?.quickFilterVisibility || filterOption?.quickFilterVisibility === 'popup')\">\r\n      <mat-form-field class=\"sd-md\" appearance=\"outline\">\r\n        <mat-label>{{'Quick filters' | sdTranslate}}</mat-label>\r\n        <mat-select [(ngModel)]=\"selectedCode\" (selectionChange)=\"onSelectionChange($event)\" #matSelect>\r\n          <mat-option value=\"\">{{'Please select' | sdTranslate}}</mat-option>\r\n          <mat-option *ngFor=\"let quickFilter of quickFilters\" [value]=\"quickFilter.code\">\r\n            <div style=\"display:flex; justify-content: space-between\">\r\n              <span>{{quickFilter.code}}</span>\r\n              <div>\r\n                <mat-icon class=\"mr-1 c-fa-icon\" (click)=\"onEditQuickFilter($event, quickFilter)\" fontSet=\"fa\"\r\n                  fontIcon=\"fa-pencil\"></mat-icon>\r\n                <mat-icon class=\"mr-0 c-fa-icon\" (click)=\"onDeleteQuickFilter($event, quickFilter)\" fontSet=\"fa\"\r\n                  fontIcon=\"fa-trash-o\"></mat-icon>\r\n              </div>\r\n            </div>\r\n          </mat-option>\r\n          <mat-option [value]=\"newQuickFilter\">\r\n            <div (click)=\"onCreateQuickFilter($event)\">\r\n              <mat-icon class=\"mr-1\" fontSet=\"material-icons-outlined\">add</mat-icon>\r\n              <span>{{'Create quick filter' | sdTranslate}}</span>\r\n            </div>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <ng-container *ngIf=\"filterOption?.multiple === false\">\r\n      <mat-form-field appearance=\"outline\">\r\n        <mat-label>{{'Select field' | sdTranslate}}</mat-label>\r\n        <mat-select [(ngModel)]=\"selectedField\">\r\n          <mat-option value=\"\">{{'Please select' | sdTranslate}}</mat-option>\r\n          <mat-option *ngFor=\"let item of externalFilters\" [value]=\"'external' + item.field\">\r\n            {{item.title}}\r\n          </mat-option>\r\n          <ng-container *ngFor=\"let item of columns\">\r\n            <mat-option *ngIf=\"item.type !== 'children'\" [value]=\"'column' + item.field\">\r\n              {{item.title}}\r\n            </mat-option>\r\n            <ng-container *ngIf=\"item.type === 'children' && item.children?.length\">\r\n              <ng-container *ngFor=\"let childColumn of item.children\">\r\n                <mat-option [value]=\"'column' + childColumn.field\">\r\n                  {{childColumn.title}}\r\n                </mat-option>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let item of externalFilters\">\r\n      <div *ngIf=\"filterOption?.multiple !== false || selectedField === 'external' + item.field\"\r\n        class=\"d-flex align-items-baseline\">\r\n        <ng-container *ngIf=\"filterOption?.multiple !== false\">\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <sd-switch [(model)]=\"inlineExternal[item.field]\" (sdChange)=\"onInlineChange()\">\r\n            </sd-switch>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\"\r\n            [(model)]=\"externalFilter[item.field]\">\r\n          </sd-input>\r\n          <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\">\r\n          </sd-input-number>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\" [{value:'1',display:item.trueValue || 'True' },\r\n                {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n            [(model)]=\"externalFilter[item.field]\">\r\n          </sd-select>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n            [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n          </sd-select>\r\n          <ng-container *ngIf=\"item.type === 'values'\">\r\n            <sd-select *ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              multiple=\"true\">\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n            </sd-autocomplete>\r\n            <sd-select *ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              filtered=\"true\" multiple=\"true\">\r\n            </sd-select>\r\n            <sd-select *ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\" [valueField]=\"item.valueField\"\r\n              [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n            </sd-select>\r\n          </ng-container>\r\n          <sd-input *ngIf=\"item.type === 'custom'\" [label]=\"item.title\"\r\n            [(model)]=\"externalFilter[displayKey + item.field]\"\r\n            (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.field, displayKey + item.field)\">\r\n          </sd-input>\r\n          <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date'\" [(model)]=\"externalFilter[item.field]\"\r\n            type=\"date\">\r\n          </sd-date-time>\r\n          <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterangefull'\"\r\n            [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n            [max]=\"item.maxDate\">\r\n          </sd-date-range>\r\n          <ng-container *ngIf=\"item.type ==='daterange'\">\r\n            <div class=\"row\">\r\n              <div class=\"col-6\">\r\n                <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.field].from\"\r\n                  [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n                  [maxDate]=\"externalFilter[item.field].to || item.maxDate\">\r\n                </sd-date-time>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.field].to\"\r\n                  [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n                  [minDate]=\"item.minDate || externalFilter[item.field].from\" [maxDate]=\"item.maxDate\">\r\n                </sd-date-time>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <div class=\"row\" *ngIf=\"item.type ==='numberrange'\">\r\n            <div class=\"col-6\">\r\n              <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].from\">\r\n              </sd-input>\r\n            </div>\r\n            <div class=\"col-6\">\r\n              <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].to\">\r\n              </sd-input>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let column of columns\">\r\n      <div class=\"d-flex align-items-baseline\"\r\n        *ngIf=\"column.type !== 'children' && (filterOption?.multiple !== false || selectedField === 'column' + column.field)\">\r\n        <ng-container *ngIf=\"filterOption?.multiple !== false\">\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <sd-switch [(model)]=\"inlineColumn[column.field]\" (sdChange)=\"onInlineChange()\">\r\n            </sd-switch>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input *ngIf=\"column.type === 'string'\" [label]=\"column.title\" type=\"text\"\r\n            [(model)]=\"filter[column.field]\">\r\n          </sd-input>\r\n          <sd-input *ngIf=\"column.type === 'number'\" [label]=\"column.title\" type=\" number\"\r\n            [(model)]=\"filter[column.field]\">\r\n          </sd-input>\r\n          <sd-select *ngIf=\"column.type === 'bool'\" [label]=\"column.title\" [items]=\"[{value:'1',display:column.trueValue || 'True' },\r\n              {value:'0',display:column.falseValue || 'False' }]\" [(model)]=\"filter[column.field]\">\r\n          </sd-select>\r\n          <sd-select *ngIf=\"column.type === 'radio'\" [label]=\"column.title\" [items]=\"column.values\"\r\n            [valueField]=\"column.valueField\" [displayField]=\"column.displayField\" [(model)]=\"filter[column.field]\">\r\n          </sd-select>\r\n          <sd-select *ngIf=\"column.type === 'values' && !column?.editor?.autocomplete\" [label]=\"column.title\"\r\n            [items]=\"column.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[column.field]\">\r\n          </sd-select>\r\n          <sd-autocomplete *ngIf=\"column.type === 'values' && column?.editor?.autocomplete\" [label]=\"column.title\"\r\n            [items]=\"column.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[column.field]\">\r\n          </sd-autocomplete>\r\n          <sd-date-time *ngIf=\"column.type ==='date' || column.type==='datetime' ||\r\n              column.type==='time'\" [label]=\"column.title\" [(model)]=\" filter[column.field]\" type=\"date\">\r\n          </sd-date-time>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"column.type === 'children' && column.children?.length\">\r\n        <ng-container *ngFor=\"let childColumn of column.children\">\r\n          <div class=\"d-flex align-items-baseline\"\r\n            *ngIf=\"filterOption?.multiple !== false || selectedField === 'column' + childColumn.field\">\r\n            <ng-container *ngIf=\"filterOption?.multiple !== false\">\r\n              <div *sdDesktop class=\"c-checkable\">\r\n                <sd-switch [(model)]=\"inlineColumn[childColumn.field]\" (sdChange)=\"onInlineChange()\">\r\n                </sd-switch>\r\n              </div>\r\n            </ng-container>\r\n            <div class=\"c-filterable\">\r\n              <sd-input [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'string'\" type=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-input>\r\n              <sd-input [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'number'\" type=\" number\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-input>\r\n              <sd-select [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'bool'\" [items]=\"[{value:'1',display:column.trueValue || 'True' },\r\n                {value:'0',display:childColumn.falseValue || 'False' }]\" [(model)]=\"filter[childColumn.field]\">\r\n              </sd-select>\r\n              <sd-select [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'radio'\" [items]=\"childColumn.values\"\r\n                [valueField]=\"childColumn.valueField\" [displayField]=\"childColumn.displayField\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-select>\r\n              <sd-autocomplete [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'values'\"\r\n                [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-autocomplete>\r\n              <sd-date-time [label]=\"childColumn.title\" *ngIf=\"childColumn.type ==='date' || childColumn.type==='datetime' ||\r\n                childColumn.type==='time'\" [(model)]=\" filter[childColumn.field]\" type=\"date\">\r\n              </sd-date-time>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"onClear()\" icon=\"clear\" [title]=\"'Clear filter' | sdTranslate\" size=\"sm\">\r\n    </sd-button>\r\n    <sd-button (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onClear()\" icon=\"clear\"\r\n      [title]=\"'Clear filter' | sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n    <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\"\r\n      color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n<sd-grid-popup-quick-filter-detail #popupQuickFilterDetail (accept)=\"onAcceptQuickFilter($event)\">\r\n</sd-grid-popup-quick-filter-detail>",
+                    template: "<sd-modal width=\"sm\" [title]=\"'Filter' | sdTranslate\" #modal>\r\n  <sd-modal-body>\r\n    <div\r\n      *ngIf=\"key && filterOption?.multiple !== false && (!filterOption?.quickFilterVisibility || filterOption?.quickFilterVisibility === 'popup')\">\r\n      <mat-form-field class=\"sd-md\" appearance=\"outline\">\r\n        <mat-label>{{'Quick filters' | sdTranslate}}</mat-label>\r\n        <mat-select [(ngModel)]=\"selectedCode\" (selectionChange)=\"onSelectionChange($event)\" #matSelect>\r\n          <mat-option value=\"\">{{'Please select' | sdTranslate}}</mat-option>\r\n          <mat-option *ngFor=\"let quickFilter of quickFilters\" [value]=\"quickFilter.code\">\r\n            <div style=\"display:flex; justify-content: space-between\">\r\n              <span>{{quickFilter.code}}</span>\r\n              <div>\r\n                <mat-icon class=\"mr-1 c-fa-icon\" (click)=\"onEditQuickFilter($event, quickFilter)\" fontSet=\"fa\"\r\n                  fontIcon=\"fa-pencil\"></mat-icon>\r\n                <mat-icon class=\"mr-0 c-fa-icon\" (click)=\"onDeleteQuickFilter($event, quickFilter)\" fontSet=\"fa\"\r\n                  fontIcon=\"fa-trash-o\"></mat-icon>\r\n              </div>\r\n            </div>\r\n          </mat-option>\r\n          <mat-option [value]=\"newQuickFilter\">\r\n            <div (click)=\"onCreateQuickFilter($event)\">\r\n              <mat-icon class=\"mr-1\" fontSet=\"material-icons-outlined\">add</mat-icon>\r\n              <span>{{'Create quick filter' | sdTranslate}}</span>\r\n            </div>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <ng-container *ngIf=\"filterOption?.multiple === false\">\r\n      <mat-form-field appearance=\"outline\">\r\n        <mat-label>{{'Select field' | sdTranslate}}</mat-label>\r\n        <mat-select [(ngModel)]=\"selectedField\">\r\n          <mat-option value=\"\">{{'Please select' | sdTranslate}}</mat-option>\r\n          <mat-option *ngFor=\"let item of externalFilters\" [value]=\"'external' + item.field\">\r\n            {{item.title}}\r\n          </mat-option>\r\n          <ng-container *ngFor=\"let item of columns\">\r\n            <mat-option *ngIf=\"item.type !== 'children'\" [value]=\"'column' + item.field\">\r\n              {{item.title}}\r\n            </mat-option>\r\n            <ng-container *ngIf=\"item.type === 'children' && item.children?.length\">\r\n              <ng-container *ngFor=\"let childColumn of item.children\">\r\n                <mat-option [value]=\"'column' + childColumn.field\">\r\n                  {{childColumn.title}}\r\n                </mat-option>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let item of externalFilters\">\r\n      <div *ngIf=\"filterOption?.multiple !== false || selectedField === 'external' + item.field\"\r\n        class=\"d-flex align-items-baseline\">\r\n        <ng-container *ngIf=\"filterOption?.multiple !== false\">\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <sd-switch [(model)]=\"inlineExternal[item.field]\" (sdChange)=\"onInlineChange()\">\r\n            </sd-switch>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\"\r\n            [(model)]=\"externalFilter[item.field]\">\r\n          </sd-input>\r\n          <sd-input-currency [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\">\r\n          </sd-input-currency>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\" [{value:'1',display:item.trueValue || 'True' },\r\n                {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n            [(model)]=\"externalFilter[item.field]\">\r\n          </sd-select>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n            [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n          </sd-select>\r\n          <ng-container *ngIf=\"item.type === 'values'\">\r\n            <sd-select *ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              multiple=\"true\">\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n            </sd-autocomplete>\r\n            <sd-select *ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              filtered=\"true\" multiple=\"true\">\r\n            </sd-select>\r\n            <sd-select *ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\" [valueField]=\"item.valueField\"\r\n              [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n            </sd-select>\r\n          </ng-container>\r\n          <sd-input *ngIf=\"item.type === 'custom'\" [label]=\"item.title\"\r\n            [(model)]=\"externalFilter[displayKey + item.field]\"\r\n            (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.field, displayKey + item.field)\">\r\n          </sd-input>\r\n          <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date'\" [(model)]=\"externalFilter[item.field]\"\r\n            type=\"date\">\r\n          </sd-date-time>\r\n          <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterangefull'\"\r\n            [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n            [max]=\"item.maxDate\">\r\n          </sd-date-range>\r\n          <ng-container *ngIf=\"item.type ==='daterange'\">\r\n            <div class=\"row\">\r\n              <div class=\"col-6\">\r\n                <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.field].from\"\r\n                  [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n                  [maxDate]=\"externalFilter[item.field].to || item.maxDate\">\r\n                </sd-date-time>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.field].to\"\r\n                  [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n                  [minDate]=\"item.minDate || externalFilter[item.field].from\" [maxDate]=\"item.maxDate\">\r\n                </sd-date-time>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <div class=\"row\" *ngIf=\"item.type ==='numberrange'\">\r\n            <div class=\"col-6\">\r\n              <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].from\">\r\n              </sd-input>\r\n            </div>\r\n            <div class=\"col-6\">\r\n              <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].to\">\r\n              </sd-input>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let column of columns\">\r\n      <div class=\"d-flex align-items-baseline\"\r\n        *ngIf=\"column.type !== 'children' && (filterOption?.multiple !== false || selectedField === 'column' + column.field)\">\r\n        <ng-container *ngIf=\"filterOption?.multiple !== false\">\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <sd-switch [(model)]=\"inlineColumn[column.field]\" (sdChange)=\"onInlineChange()\">\r\n            </sd-switch>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input *ngIf=\"column.type === 'string'\" [label]=\"column.title\" type=\"text\"\r\n            [(model)]=\"filter[column.field]\">\r\n          </sd-input>\r\n          <sd-input *ngIf=\"column.type === 'number'\" [label]=\"column.title\" type=\" number\"\r\n            [(model)]=\"filter[column.field]\">\r\n          </sd-input>\r\n          <sd-select *ngIf=\"column.type === 'bool'\" [label]=\"column.title\" [items]=\"[{value:'1',display:column.trueValue || 'True' },\r\n              {value:'0',display:column.falseValue || 'False' }]\" [(model)]=\"filter[column.field]\">\r\n          </sd-select>\r\n          <sd-select *ngIf=\"column.type === 'radio'\" [label]=\"column.title\" [items]=\"column.values\"\r\n            [valueField]=\"column.valueField\" [displayField]=\"column.displayField\" [(model)]=\"filter[column.field]\">\r\n          </sd-select>\r\n          <sd-select *ngIf=\"column.type === 'values' && !column?.editor?.autocomplete\" [label]=\"column.title\"\r\n            [items]=\"column.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[column.field]\">\r\n          </sd-select>\r\n          <sd-autocomplete *ngIf=\"column.type === 'values' && column?.editor?.autocomplete\" [label]=\"column.title\"\r\n            [items]=\"column.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[column.field]\">\r\n          </sd-autocomplete>\r\n          <sd-date-time *ngIf=\"column.type ==='date' || column.type==='datetime' ||\r\n              column.type==='time'\" [label]=\"column.title\" [(model)]=\" filter[column.field]\" type=\"date\">\r\n          </sd-date-time>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"column.type === 'children' && column.children?.length\">\r\n        <ng-container *ngFor=\"let childColumn of column.children\">\r\n          <div class=\"d-flex align-items-baseline\"\r\n            *ngIf=\"filterOption?.multiple !== false || selectedField === 'column' + childColumn.field\">\r\n            <ng-container *ngIf=\"filterOption?.multiple !== false\">\r\n              <div *sdDesktop class=\"c-checkable\">\r\n                <sd-switch [(model)]=\"inlineColumn[childColumn.field]\" (sdChange)=\"onInlineChange()\">\r\n                </sd-switch>\r\n              </div>\r\n            </ng-container>\r\n            <div class=\"c-filterable\">\r\n              <sd-input [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'string'\" type=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-input>\r\n              <sd-input [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'number'\" type=\" number\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-input>\r\n              <sd-select [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'bool'\" [items]=\"[{value:'1',display:column.trueValue || 'True' },\r\n                {value:'0',display:childColumn.falseValue || 'False' }]\" [(model)]=\"filter[childColumn.field]\">\r\n              </sd-select>\r\n              <sd-select [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'radio'\" [items]=\"childColumn.values\"\r\n                [valueField]=\"childColumn.valueField\" [displayField]=\"childColumn.displayField\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-select>\r\n              <sd-autocomplete [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'values'\"\r\n                [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-autocomplete>\r\n              <sd-date-time [label]=\"childColumn.title\" *ngIf=\"childColumn.type ==='date' || childColumn.type==='datetime' ||\r\n                childColumn.type==='time'\" [(model)]=\" filter[childColumn.field]\" type=\"date\">\r\n              </sd-date-time>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"onClear()\" icon=\"clear\" [title]=\"'Clear filter' | sdTranslate\" size=\"sm\">\r\n    </sd-button>\r\n    <sd-button (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onClear()\" icon=\"clear\"\r\n      [title]=\"'Clear filter' | sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n    <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\"\r\n      color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n<sd-grid-popup-quick-filter-detail #popupQuickFilterDetail (accept)=\"onAcceptQuickFilter($event)\">\r\n</sd-grid-popup-quick-filter-detail>",
                     encapsulation: core.ViewEncapsulation.None,
                     styles: [".c-fa-icon{color:grey;font-size:20px}.c-checkable{width:50px}.c-filterable{flex:1}"]
                 },] }
@@ -3823,7 +3823,7 @@
     SdGridPopupQuickFilterDetail.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-grid-popup-quick-filter-detail',
-                    template: "<sd-modal width=\"sm\" [title]=\"(page === 1 ? 'Select filtered fields':'Input filtered fields') | sdTranslate\" #modal>\r\n  <sd-modal-body>\r\n    <div class=\"row\">\r\n      <ng-container *ngIf=\"page === 1\">\r\n        <div *ngFor=\"let field of selectableFields\" class=\"col-12\">\r\n          <sd-switch [(model)]=\"selectedField[field.id]\" [label]=\"field.title\" (sdChange)=\"onSelectFields()\">\r\n          </sd-switch>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"page === 2\">\r\n        <div class=\"col-12\" *ngFor=\"let item of fields\">\r\n          <ng-container *ngIf=\"item.group === 'external'\">\r\n            <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\"\r\n              [(model)]=\"externalFilter[item.code]\">\r\n            </sd-input>\r\n            <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.code]\">\r\n            </sd-input-number>\r\n            <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\" [{value:'1',display:item.trueValue || 'True' },\r\n              {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n              [(model)]=\"externalFilter[item.code]\">\r\n            </sd-select>\r\n            <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n            </sd-select>\r\n            <ng-container *ngIf=\"item.type === 'values'\">\r\n              <sd-select *ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n                [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\"\r\n                multiple=\"true\">\r\n              </sd-select>\r\n              <sd-autocomplete *ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n                [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n              </sd-autocomplete>\r\n              <sd-select *ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n                [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\"\r\n                filtered=\"true\" multiple=\"true\">\r\n              </sd-select>\r\n              <sd-select *ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\"\r\n                [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n              </sd-select>\r\n            </ng-container>\r\n            <sd-input *ngIf=\"item.type === 'custom'\" [label]=\"item.title\"\r\n              [(model)]=\"externalFilter[displayKey + item.code]\"\r\n              (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.code, displayKey + item.code)\">\r\n            </sd-input>\r\n            <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date'\" [(model)]=\"externalFilter[item.code]\"\r\n              type=\"date\">\r\n            </sd-date-time>\r\n            <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterangefull'\"\r\n              [(from)]=\"externalFilter[item.code].from\" [(to)]=\"externalFilter[item.code].to\" [min]=\"item.minDate\"\r\n              [max]=\"item.maxDate\">\r\n            </sd-date-range>\r\n            <ng-container *ngIf=\"item.type ==='daterange'\">\r\n              <div class=\"row\">\r\n                <div class=\"col-6\">\r\n                  <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.code].from\"\r\n                    [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n                    [maxDate]=\"externalFilter[item.code].to || item.maxDate\">\r\n                  </sd-date-time>\r\n                </div>\r\n                <div class=\"col-6\">\r\n                  <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.code].to\"\r\n                    [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n                    [minDate]=\"item.minDate || externalFilter[item.code].from\" [maxDate]=\"item.maxDate\">\r\n                  </sd-date-time>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n            <div class=\"row\" *ngIf=\"item.type ==='numberrange'\">\r\n              <div class=\"col-6\">\r\n                <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.code].from\">\r\n                </sd-input>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.code].to\">\r\n                </sd-input>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"item.group === 'column'\">\r\n            <sd-input *ngIf=\"item.type === 'string'\" [label]=\"item.title\" type=\"text\" [(model)]=\"filter[item.code]\">\r\n            </sd-input>\r\n            <sd-input *ngIf=\"item.type === 'number'\" [label]=\"item.title\" type=\" number\" [(model)]=\"filter[item.code]\">\r\n            </sd-input>\r\n            <sd-select *ngIf=\"item.type === 'bool'\" [label]=\"item.title\" [items]=\"[{value:'1',display:item.trueValue || 'True' },\r\n            {value:'0',display:item.falseValue || 'False' }]\" [(model)]=\"filter[item.code]\">\r\n            </sd-select>\r\n            <sd-select *ngIf=\"item.type === 'radio'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"filter[item.code]\">\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.type === 'values' && item.editor?.autocomplete\" [label]=\"item.title\"\r\n              [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.code]\">\r\n            </sd-autocomplete>\r\n            <sd-select *ngIf=\"item.type === 'values' && !item.editor?.autocomplete\" [label]=\"item.title\"\r\n              [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.code]\">\r\n            </sd-select>\r\n            <sd-date-time *ngIf=\"item.type ==='date' || item.type==='datetime' ||\r\n            item.type==='time'\" [label]=\"item.title\" [(model)]=\" filter[item.code]\" type=\"date\">\r\n            </sd-date-time>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </sd-modal-body>\r\n  <ng-container *ngIf=\"page === 1\">\r\n    <sd-modal-footer *sdDesktop>\r\n      <sd-button class=\"mr-auto\" (action)=\"onCancel()\" icon=\"clear\" [title]=\"'Cancel' | sdTranslate\" size=\"sm\">\r\n      </sd-button>\r\n      <sd-button (action)=\"page = 2\" icon=\"arrow_forward\" [title]=\"'Next' | sdTranslate\" color=\"primary\"\r\n        iconSuffix=\"true\" [disabled]=\"!fields.length\" size=\"sm\"></sd-button>\r\n    </sd-modal-footer>\r\n    <sd-modal-footer *sdMobileTablet>\r\n      <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onCancel()\" icon=\"clear\"\r\n        [title]=\"'Cancel' | sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n      <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"page = 2\" icon=\"arrow_forward\"\r\n        [title]=\"'Next' | sdTranslate\" color=\"primary\" width=\"100%\" iconSuffix=\"true\" [disabled]=\"!fields.length\"\r\n        size=\"sm\">\r\n      </sd-button>\r\n    </sd-modal-footer>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"page === 2\">\r\n    <sd-modal-footer *sdDesktop>\r\n      <sd-button class=\"mr-auto\" (action)=\"page = 1\" icon=\"arrow_back\" [title]=\"'Back' | sdTranslate\" size=\"sm\">\r\n      </sd-button>\r\n      <sd-button (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\" color=\"primary\" size=\"sm\">\r\n      </sd-button>\r\n    </sd-modal-footer>\r\n    <sd-modal-footer *sdMobileTablet>\r\n      <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"page = 1\" icon=\"arrow_back\"\r\n        [title]=\"'Back' | sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n      <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\"\r\n        color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n    </sd-modal-footer>\r\n  </ng-container>\r\n</sd-modal>",
+                    template: "<sd-modal width=\"sm\" [title]=\"(page === 1 ? 'Select filtered fields':'Input filtered fields') | sdTranslate\" #modal>\r\n  <sd-modal-body>\r\n    <div class=\"row\">\r\n      <ng-container *ngIf=\"page === 1\">\r\n        <div *ngFor=\"let field of selectableFields\" class=\"col-12\">\r\n          <sd-switch [(model)]=\"selectedField[field.id]\" [label]=\"field.title\" (sdChange)=\"onSelectFields()\">\r\n          </sd-switch>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"page === 2\">\r\n        <div class=\"col-12\" *ngFor=\"let item of fields\">\r\n          <ng-container *ngIf=\"item.group === 'external'\">\r\n            <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\"\r\n              [(model)]=\"externalFilter[item.code]\">\r\n            </sd-input>\r\n            <sd-input-currency [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.code]\">\r\n            </sd-input-currency>\r\n            <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\" [{value:'1',display:item.trueValue || 'True' },\r\n              {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n              [(model)]=\"externalFilter[item.code]\">\r\n            </sd-select>\r\n            <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n            </sd-select>\r\n            <ng-container *ngIf=\"item.type === 'values'\">\r\n              <sd-select *ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n                [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\"\r\n                multiple=\"true\">\r\n              </sd-select>\r\n              <sd-autocomplete *ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n                [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n              </sd-autocomplete>\r\n              <sd-select *ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n                [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\"\r\n                filtered=\"true\" multiple=\"true\">\r\n              </sd-select>\r\n              <sd-select *ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\"\r\n                [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n              </sd-select>\r\n            </ng-container>\r\n            <sd-input *ngIf=\"item.type === 'custom'\" [label]=\"item.title\"\r\n              [(model)]=\"externalFilter[displayKey + item.code]\"\r\n              (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.code, displayKey + item.code)\">\r\n            </sd-input>\r\n            <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date'\" [(model)]=\"externalFilter[item.code]\"\r\n              type=\"date\">\r\n            </sd-date-time>\r\n            <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterangefull'\"\r\n              [(from)]=\"externalFilter[item.code].from\" [(to)]=\"externalFilter[item.code].to\" [min]=\"item.minDate\"\r\n              [max]=\"item.maxDate\">\r\n            </sd-date-range>\r\n            <ng-container *ngIf=\"item.type ==='daterange'\">\r\n              <div class=\"row\">\r\n                <div class=\"col-6\">\r\n                  <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.code].from\"\r\n                    [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n                    [maxDate]=\"externalFilter[item.code].to || item.maxDate\">\r\n                  </sd-date-time>\r\n                </div>\r\n                <div class=\"col-6\">\r\n                  <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.code].to\"\r\n                    [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n                    [minDate]=\"item.minDate || externalFilter[item.code].from\" [maxDate]=\"item.maxDate\">\r\n                  </sd-date-time>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n            <div class=\"row\" *ngIf=\"item.type ==='numberrange'\">\r\n              <div class=\"col-6\">\r\n                <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.code].from\">\r\n                </sd-input>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.code].to\">\r\n                </sd-input>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"item.group === 'column'\">\r\n            <sd-input *ngIf=\"item.type === 'string'\" [label]=\"item.title\" type=\"text\" [(model)]=\"filter[item.code]\">\r\n            </sd-input>\r\n            <sd-input *ngIf=\"item.type === 'number'\" [label]=\"item.title\" type=\" number\" [(model)]=\"filter[item.code]\">\r\n            </sd-input>\r\n            <sd-select *ngIf=\"item.type === 'bool'\" [label]=\"item.title\" [items]=\"[{value:'1',display:item.trueValue || 'True' },\r\n            {value:'0',display:item.falseValue || 'False' }]\" [(model)]=\"filter[item.code]\">\r\n            </sd-select>\r\n            <sd-select *ngIf=\"item.type === 'radio'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"filter[item.code]\">\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.type === 'values' && item.editor?.autocomplete\" [label]=\"item.title\"\r\n              [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.code]\">\r\n            </sd-autocomplete>\r\n            <sd-select *ngIf=\"item.type === 'values' && !item.editor?.autocomplete\" [label]=\"item.title\"\r\n              [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.code]\">\r\n            </sd-select>\r\n            <sd-date-time *ngIf=\"item.type ==='date' || item.type==='datetime' ||\r\n            item.type==='time'\" [label]=\"item.title\" [(model)]=\" filter[item.code]\" type=\"date\">\r\n            </sd-date-time>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </sd-modal-body>\r\n  <ng-container *ngIf=\"page === 1\">\r\n    <sd-modal-footer *sdDesktop>\r\n      <sd-button class=\"mr-auto\" (action)=\"onCancel()\" icon=\"clear\" [title]=\"'Cancel' | sdTranslate\" size=\"sm\">\r\n      </sd-button>\r\n      <sd-button (action)=\"page = 2\" icon=\"arrow_forward\" [title]=\"'Next' | sdTranslate\" color=\"primary\"\r\n        iconSuffix=\"true\" [disabled]=\"!fields.length\" size=\"sm\"></sd-button>\r\n    </sd-modal-footer>\r\n    <sd-modal-footer *sdMobileTablet>\r\n      <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onCancel()\" icon=\"clear\"\r\n        [title]=\"'Cancel' | sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n      <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"page = 2\" icon=\"arrow_forward\"\r\n        [title]=\"'Next' | sdTranslate\" color=\"primary\" width=\"100%\" iconSuffix=\"true\" [disabled]=\"!fields.length\"\r\n        size=\"sm\">\r\n      </sd-button>\r\n    </sd-modal-footer>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"page === 2\">\r\n    <sd-modal-footer *sdDesktop>\r\n      <sd-button class=\"mr-auto\" (action)=\"page = 1\" icon=\"arrow_back\" [title]=\"'Back' | sdTranslate\" size=\"sm\">\r\n      </sd-button>\r\n      <sd-button (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\" color=\"primary\" size=\"sm\">\r\n      </sd-button>\r\n    </sd-modal-footer>\r\n    <sd-modal-footer *sdMobileTablet>\r\n      <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"page = 1\" icon=\"arrow_back\"\r\n        [title]=\"'Back' | sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n      <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\"\r\n        color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n    </sd-modal-footer>\r\n  </ng-container>\r\n</sd-modal>",
                     styles: [""]
                 },] }
     ];