@sd-angular/core 1.3.134 → 1.3.135

package/fesm2015/sd-angular-core-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-button.js","sources":["../../../../projects/sd-core/button/src/lib/button.component.ts","../../../../projects/sd-core/button/src/lib/button.module.ts","../../../../projects/sd-core/button/src/public-api.ts","../../../../projects/sd-core/button/sd-angular-core-button.ts"],"sourcesContent":["import {\r\n  Component,\r\n  Input,\r\n  Output,\r\n  EventEmitter,\r\n  ChangeDetectorRef,\r\n  OnInit,\r\n  AfterViewInit,\r\n  ViewChild,\r\n  ElementRef,\r\n  ChangeDetectionStrategy,\r\n} from '@angular/core';\r\nimport { Subscription, fromEvent } from 'rxjs';\r\nimport { debounceTime } from 'rxjs/operators';\r\nimport { MatButton } from '@angular/material/button';\r\n\r\n@Component({\r\n  selector: 'sd-button',\r\n  templateUrl: './button.component.html',\r\n  styleUrls: ['./button.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    '[attr.disabled]': 'isDisabled ? true : null'\r\n  }\r\n})\r\n\r\nexport class SdButton implements OnInit, AfterViewInit {\r\n  @ViewChild('button') button: MatButton;\r\n  #disabled = false;\r\n  #initialized = false;\r\n  isDisabled = false;\r\n  type: 'fill' | 'light' | 'outline' | 'link' = 'light';\r\n  @Input('type') set _type(type: 'fill' | 'light' | 'outline' | 'link') {\r\n    this.type = type || 'light';\r\n  }\r\n  color: 'primary' | 'accent' | 'warn' | 'info' | 'success' | 'warning' | 'danger' | 'secondary' = 'secondary';\r\n  @Input('color') set _color(color: 'primary' | 'accent' | 'warn' | 'info' | 'success' | 'warning' | 'danger' | 'secondary') {\r\n    this.color = color || 'secondary';\r\n  }\r\n  @Input() title: string;\r\n  @Input() icon: string;\r\n  @Input() width: string;\r\n  @Input() size: 'sm' | 'lg';\r\n  @Input() tooltip: string;\r\n  @Input() iconSuffix = false;\r\n  @Input() fontSet: 'material-icons' |\r\n    'material-icons-outlined' |\r\n    'material-icons-round' |\r\n    'material-icons-sharp' = 'material-icons';\r\n  @Input() set disabled(value: boolean) {\r\n    this.#disabled = value || false;\r\n    if (this.#initialized) {\r\n      this.#onChanges();\r\n    }\r\n  }\r\n  @Input() loading = false;\r\n  @Output() action = new EventEmitter();\r\n  #subscription = new Subscription();\r\n  constructor(private ref: ChangeDetectorRef) {\r\n  }\r\n\r\n  ngOnInit() {\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n    this.#onChanges();\r\n    this.#subscription.add(fromEvent(this.button._elementRef.nativeElement, 'click').pipe(debounceTime(200)).subscribe($event => {\r\n      if (this.loading) {\r\n        return;\r\n      }\r\n      this.action.emit($event);\r\n    }));\r\n    this.#initialized = true;\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.#subscription.unsubscribe();\r\n  }\r\n\r\n  #onChanges = () => {\r\n    this.isDisabled = this.#disabled;\r\n    this.ref.detectChanges();\r\n  }\r\n\r\n  onClick = ($event: any) => {\r\n    if (this.loading) {\r\n      return;\r\n    }\r\n    this.action.emit($event);\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdButton } from './button.component';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\r\n\r\n@NgModule({\r\n  imports: [\r\n    CommonModule,\r\n    MatIconModule,\r\n    MatButtonModule,\r\n    MatProgressSpinnerModule,\r\n    MatTooltipModule\r\n  ],\r\n  declarations: [\r\n    SdButton\r\n  ],\r\n  exports: [\r\n    SdButton\r\n  ]\r\n})\r\nexport class SdButtonModule { }\r\n","/*\r\n * Public API Surface of superdev-angular-core\r\n */\r\n\r\nexport { SdButtonModule } from './lib/button.module';\r\nexport * from './lib/button.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;MA0Ba,QAAQ;IAgCnB,YAAoB,GAAsB;QAAtB,QAAG,GAAH,GAAG,CAAmB;QA9B1C,oBAAY,KAAK,EAAC;QAClB,uBAAe,KAAK,EAAC;QACrB,eAAU,GAAG,KAAK,CAAC;QACnB,SAAI,GAA0C,OAAO,CAAC;QAItD,UAAK,GAA4F,WAAW,CAAC;QASpG,eAAU,GAAG,KAAK,CAAC;QACnB,YAAO,GAGW,gBAAgB,CAAC;QAOnC,YAAO,GAAG,KAAK,CAAC;QACf,WAAM,GAAG,IAAI,YAAY,EAAE,CAAC;QACtC,wBAAgB,IAAI,YAAY,EAAE,EAAC;QAsBnC,qBAAa;YACX,IAAI,CAAC,UAAU,0CAAiB,CAAC;YACjC,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;SAC1B,EAAA;QAED,YAAO,GAAG,CAAC,MAAW;YACpB,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,OAAO;aACR;YACD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAC1B,CAAA;KA9BA;IA3BD,IAAmB,KAAK,CAAC,IAA2C;QAClE,IAAI,CAAC,IAAI,GAAG,IAAI,IAAI,OAAO,CAAC;KAC7B;IAED,IAAoB,MAAM,CAAC,KAA8F;QACvH,IAAI,CAAC,KAAK,GAAG,KAAK,IAAI,WAAW,CAAC;KACnC;IAWD,IAAa,QAAQ,CAAC,KAAc;QAClC,uBAAA,IAAI,aAAa,KAAK,IAAI,KAAK,EAAC;QAChC,gDAAuB;YACrB,8CAAA,IAAI,CAAa,CAAC;SACnB;KACF;IAOD,QAAQ;KACP;IAED,eAAe;QACb,8CAAA,IAAI,CAAa,CAAC;QAClB,4CAAmB,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM;YACvH,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,OAAO;aACR;YACD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAC1B,CAAC,CAAC,CAAC;QACJ,uBAAA,IAAI,gBAAgB,IAAI,EAAC;KAC1B;IAED,WAAW;QACT,4CAAmB,WAAW,EAAE,CAAC;KAClC;;;;YA7DF,SAAS,SAAC;gBACT,QAAQ,EAAE,WAAW;gBACrB,w5EAAsC;gBAEtC,eAAe,EAAE,uBAAuB,CAAC,MAAM;gBAC/C,IAAI,EAAE;oBACJ,iBAAiB,EAAE,0BAA0B;iBAC9C;;aACF;;;YAnBC,iBAAiB;;;qBAsBhB,SAAS,SAAC,QAAQ;oBAKlB,KAAK,SAAC,MAAM;qBAIZ,KAAK,SAAC,OAAO;oBAGb,KAAK;mBACL,KAAK;oBACL,KAAK;mBACL,KAAK;sBACL,KAAK;yBACL,KAAK;sBACL,KAAK;uBAIL,KAAK;sBAML,KAAK;qBACL,MAAM;;;MCjCI,cAAc;;;YAf1B,QAAQ,SAAC;gBACR,OAAO,EAAE;oBACP,YAAY;oBACZ,aAAa;oBACb,eAAe;oBACf,wBAAwB;oBACxB,gBAAgB;iBACjB;gBACD,YAAY,EAAE;oBACZ,QAAQ;iBACT;gBACD,OAAO,EAAE;oBACP,QAAQ;iBACT;aACF;;;ACtBD;;;;ACAA;;;;;;"}
+{"version":3,"file":"sd-angular-core-button.js","sources":["../../../../projects/sd-core/button/src/lib/button.component.ts","../../../../projects/sd-core/button/src/lib/button.module.ts","../../../../projects/sd-core/button/src/public-api.ts","../../../../projects/sd-core/button/sd-angular-core-button.ts"],"sourcesContent":["import {\r\n  Component,\r\n  Input,\r\n  Output,\r\n  EventEmitter,\r\n  ChangeDetectorRef,\r\n  OnInit,\r\n  AfterViewInit,\r\n  ViewChild,\r\n  ElementRef,\r\n  ChangeDetectionStrategy,\r\n} from '@angular/core';\r\nimport { Subscription, fromEvent } from 'rxjs';\r\nimport { debounceTime } from 'rxjs/operators';\r\nimport { MatButton } from '@angular/material/button';\r\n\r\n@Component({\r\n  selector: 'sd-button',\r\n  templateUrl: './button.component.html',\r\n  styleUrls: ['./button.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    '[attr.disabled]': 'isDisabled ? true : null'\r\n  }\r\n})\r\n\r\nexport class SdButton implements OnInit, AfterViewInit {\r\n  @ViewChild('button') button: MatButton;\r\n  #disabled = false;\r\n  #initialized = false;\r\n  isDisabled = false;\r\n  type: 'fill' | 'light' | 'outline' | 'link' = 'light';\r\n  @Input('type') set _type(type: 'fill' | 'light' | 'outline' | 'link') {\r\n    this.type = type || 'light';\r\n  }\r\n  color: 'primary' | 'accent' | 'warn' | 'info' | 'success' | 'warning' | 'danger' | 'secondary' = 'secondary';\r\n  @Input('color') set _color(color: 'primary' | 'accent' | 'warn' | 'info' | 'success' | 'warning' | 'danger' | 'secondary') {\r\n    this.color = color || 'secondary';\r\n  }\r\n  @Input() title: string;\r\n  @Input() icon: string;\r\n  @Input() width: string;\r\n  @Input() size: 'sm' | 'lg';\r\n  @Input() tooltip: string;\r\n  @Input() iconSuffix = false;\r\n  @Input() fontSet: 'material-icons' |\r\n    'material-icons-outlined' |\r\n    'material-icons-round' |\r\n    'material-icons-sharp' |\r\n    'material-symbols-outlined' = 'material-icons';\r\n  @Input() set disabled(value: boolean) {\r\n    this.#disabled = value || false;\r\n    if (this.#initialized) {\r\n      this.#onChanges();\r\n    }\r\n  }\r\n  @Input() loading = false;\r\n  @Output() action = new EventEmitter();\r\n  #subscription = new Subscription();\r\n  constructor(private ref: ChangeDetectorRef) {\r\n  }\r\n\r\n  ngOnInit() {\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n    this.#onChanges();\r\n    this.#subscription.add(fromEvent(this.button._elementRef.nativeElement, 'click').pipe(debounceTime(200)).subscribe($event => {\r\n      if (this.loading) {\r\n        return;\r\n      }\r\n      this.action.emit($event);\r\n    }));\r\n    this.#initialized = true;\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.#subscription.unsubscribe();\r\n  }\r\n\r\n  #onChanges = () => {\r\n    this.isDisabled = this.#disabled;\r\n    this.ref.detectChanges();\r\n  }\r\n\r\n  onClick = ($event: any) => {\r\n    if (this.loading) {\r\n      return;\r\n    }\r\n    this.action.emit($event);\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdButton } from './button.component';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\r\n\r\n@NgModule({\r\n  imports: [\r\n    CommonModule,\r\n    MatIconModule,\r\n    MatButtonModule,\r\n    MatProgressSpinnerModule,\r\n    MatTooltipModule\r\n  ],\r\n  declarations: [\r\n    SdButton\r\n  ],\r\n  exports: [\r\n    SdButton\r\n  ]\r\n})\r\nexport class SdButtonModule { }\r\n","/*\r\n * Public API Surface of superdev-angular-core\r\n */\r\n\r\nexport { SdButtonModule } from './lib/button.module';\r\nexport * from './lib/button.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;MA0Ba,QAAQ;IAiCnB,YAAoB,GAAsB;QAAtB,QAAG,GAAH,GAAG,CAAmB;QA/B1C,oBAAY,KAAK,EAAC;QAClB,uBAAe,KAAK,EAAC;QACrB,eAAU,GAAG,KAAK,CAAC;QACnB,SAAI,GAA0C,OAAO,CAAC;QAItD,UAAK,GAA4F,WAAW,CAAC;QASpG,eAAU,GAAG,KAAK,CAAC;QACnB,YAAO,GAIgB,gBAAgB,CAAC;QAOxC,YAAO,GAAG,KAAK,CAAC;QACf,WAAM,GAAG,IAAI,YAAY,EAAE,CAAC;QACtC,wBAAgB,IAAI,YAAY,EAAE,EAAC;QAsBnC,qBAAa;YACX,IAAI,CAAC,UAAU,0CAAiB,CAAC;YACjC,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;SAC1B,EAAA;QAED,YAAO,GAAG,CAAC,MAAW;YACpB,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,OAAO;aACR;YACD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAC1B,CAAA;KA9BA;IA5BD,IAAmB,KAAK,CAAC,IAA2C;QAClE,IAAI,CAAC,IAAI,GAAG,IAAI,IAAI,OAAO,CAAC;KAC7B;IAED,IAAoB,MAAM,CAAC,KAA8F;QACvH,IAAI,CAAC,KAAK,GAAG,KAAK,IAAI,WAAW,CAAC;KACnC;IAYD,IAAa,QAAQ,CAAC,KAAc;QAClC,uBAAA,IAAI,aAAa,KAAK,IAAI,KAAK,EAAC;QAChC,gDAAuB;YACrB,8CAAA,IAAI,CAAa,CAAC;SACnB;KACF;IAOD,QAAQ;KACP;IAED,eAAe;QACb,8CAAA,IAAI,CAAa,CAAC;QAClB,4CAAmB,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM;YACvH,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,OAAO;aACR;YACD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAC1B,CAAC,CAAC,CAAC;QACJ,uBAAA,IAAI,gBAAgB,IAAI,EAAC;KAC1B;IAED,WAAW;QACT,4CAAmB,WAAW,EAAE,CAAC;KAClC;;;;YA9DF,SAAS,SAAC;gBACT,QAAQ,EAAE,WAAW;gBACrB,w5EAAsC;gBAEtC,eAAe,EAAE,uBAAuB,CAAC,MAAM;gBAC/C,IAAI,EAAE;oBACJ,iBAAiB,EAAE,0BAA0B;iBAC9C;;aACF;;;YAnBC,iBAAiB;;;qBAsBhB,SAAS,SAAC,QAAQ;oBAKlB,KAAK,SAAC,MAAM;qBAIZ,KAAK,SAAC,OAAO;oBAGb,KAAK;mBACL,KAAK;oBACL,KAAK;mBACL,KAAK;sBACL,KAAK;yBACL,KAAK;sBACL,KAAK;uBAKL,KAAK;sBAML,KAAK;qBACL,MAAM;;;MClCI,cAAc;;;YAf1B,QAAQ,SAAC;gBACR,OAAO,EAAE;oBACP,YAAY;oBACZ,aAAa;oBACb,eAAe;oBACf,wBAAwB;oBACxB,gBAAgB;iBACjB;gBACD,YAAY,EAAE;oBACZ,QAAQ;iBACT;gBACD,OAAO,EAAE;oBACP,QAAQ;iBACT;aACF;;;ACtBD;;;;ACAA;;;;;;"}

package/fesm2015/sd-angular-core-grid-material.js

@@ -128,8 +128,8 @@ SdMaterialSubInformationDefDirective.ctorParameters = () => [
 const DEFAULT_GRID_MATERIAL_CONFIG = {
     paginate: {
         pageSize: 50,
-        pages: [50, 100, 200]
-    }
+        pages: [50, 100, 200],
+    },
 };
 const GRID_MATERIAL_CONFIG = new InjectionToken('sd-grid-material.configuration');
 
@@ -1441,7 +1441,7 @@ class SdGridMaterial {
             };
         });
         _initConfiguration$1.set(this, (option) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
             // Init pagination
             option.paginate = {
                 hidden: (_a = option === null || option === void 0 ? void 0 : option.paginate) === null || _a === void 0 ? void 0 : _a.hidden,
@@ -1449,6 +1449,19 @@ class SdGridMaterial {
                 pages: (_m = (_j = (_h = option === null || option === void 0 ? void 0 : option.paginate) === null || _h === void 0 ? void 0 : _h.pages) !== null && _j !== void 0 ? _j : (_l = (_k = this.configuration) === null || _k === void 0 ? void 0 : _k.paginate) === null || _l === void 0 ? void 0 : _l.pages) !== null && _m !== void 0 ? _m : (_o = DEFAULT_GRID_MATERIAL_CONFIG.paginate) === null || _o === void 0 ? void 0 : _o.pages,
                 showFirstLastButtons: (_q = (_p = option === null || option === void 0 ? void 0 : option.paginate) === null || _p === void 0 ? void 0 : _p.showFirstLastButtons) !== null && _q !== void 0 ? _q : false,
             };
+            for (const column of option.columns || []) {
+                if (((_s = (_r = column.filter) === null || _r === void 0 ? void 0 : _r.operator) === null || _s === void 0 ? void 0 : _s.enable) && !((_v = (_u = (_t = column.filter) === null || _t === void 0 ? void 0 : _t.operator) === null || _u === void 0 ? void 0 : _u.list) === null || _v === void 0 ? void 0 : _v.length)) {
+                    if (column.type === 'string') {
+                        column.filter.operator.list = ((_y = (_x = (_w = this.configuration) === null || _w === void 0 ? void 0 : _w.filter) === null || _x === void 0 ? void 0 : _x.operator) === null || _y === void 0 ? void 0 : _y.defaultListString) || [];
+                    }
+                    if (column.type === 'number') {
+                        column.filter.operator.list = ((_1 = (_0 = (_z = this.configuration) === null || _z === void 0 ? void 0 : _z.filter) === null || _0 === void 0 ? void 0 : _0.operator) === null || _1 === void 0 ? void 0 : _1.defaultListNumber) || [];
+                    }
+                    if (column.type === 'date' || column.type === 'datetime') {
+                        column.filter.operator.list = ((_4 = (_3 = (_2 = this.configuration) === null || _2 === void 0 ? void 0 : _2.filter) === null || _3 === void 0 ? void 0 : _3.operator) === null || _4 === void 0 ? void 0 : _4.defaultListDate) || [];
+                    }
+                }
+            }
             return option;
         });
         _loadFilterRegister.set(this, () => {
@@ -3470,39 +3483,63 @@ SdDesktopEditorValidation.propDecorators = {
 const SdFilterOperators = [
     {
         value: 'EQUAL',
-        display: '=',
+        symbol: '=',
+        display: 'Bằng',
     },
     {
         value: 'NOT_EQUAL',
-        display: '!=',
+        symbol: '!=',
+        display: 'Không bằng',
     },
     {
-        value: 'CONTAIN',
-        display: 'oOo',
+        value: 'GREATER_THAN',
+        symbol: '>',
+        display: 'Lớn hơn',
     },
     {
-        value: 'START_WITH',
-        display: 'Ooo'
+        value: 'LESS_THAN',
+        symbol: '<',
+        display: 'Nhỏ hơn',
     },
     {
-        value: 'END_WITH',
-        display: 'ooO'
+        value: 'GREATER_OR_EQUAL',
+        symbol: '>=',
+        display: 'Lớn hơn, hoặc bằng'
     },
     {
-        value: 'GREATER_THAN',
-        display: '>',
+        value: 'LESS_OR_EQUAL',
+        symbol: '<=',
+        display: 'Nhỏ hơn, hoặc bằng'
     },
     {
-        value: 'LESS_THAN',
-        display: '<',
+        value: 'CONTAIN',
+        symbol: 'join_inner',
+        display: 'Chứa',
     },
     {
-        value: 'GREATER_OR_EQUAL',
-        display: '>=',
+        value: 'NOT_CONTAIN',
+        symbol: 'join',
+        display: 'Không chứa',
     },
     {
-        value: 'LESS_OR_EQUAL',
-        display: '<=',
+        value: 'START_WITH',
+        symbol: 'line_start_circle',
+        display: 'Bắt đầu bởi'
+    },
+    {
+        value: 'END_WITH',
+        symbol: 'line_end_circle',
+        display: 'Kết thúc bởi'
+    },
+    {
+        value: 'IN',
+        symbol: 'checklist_rtl',
+        display: 'Nằm trong'
+    },
+    {
+        value: 'NOT_IN',
+        symbol: 'event_list',
+        display: 'Không nằm trong'
     },
 ];
 
@@ -3510,6 +3547,7 @@ var _valueChanges, _subcription;
 class SdColumnInlineFilter {
     constructor() {
         this.columnOperator = {};
+        this.columnSymbol = 'filter_alt';
         this.columnFilter = {};
         this.operators = [];
         this.filterChange = new EventEmitter();
@@ -3561,7 +3599,7 @@ _valueChanges = new WeakMap(), _subcription = new WeakMap();
 SdColumnInlineFilter.decorators = [
     { type: Component, args: [{
                 selector: 'sd-column-inline-filter',
-                template: "<div class=\"d-flex c-inline-column\">\r\n  <ng-container\r\n    *ngIf=\"\r\n      column.type === 'string' ||\r\n        column.type === 'number' ||\r\n        column.type === 'bool' ||\r\n        column.type === 'values' ||\r\n        column.type === 'date' ||\r\n        column.type === 'datetime' ||\r\n        column.type === 'time';\r\n      else noFilter\r\n    \">\r\n    <sd-select\r\n      *ngIf=\"operators.length\"\r\n      style=\"width: 60px; margin-right: 4px\"\r\n      size=\"sm\"\r\n      [items]=\"operators\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      [(model)]=\"columnOperator[column.field]\"></sd-select>\r\n    <sd-input\r\n      *ngIf=\"column.type === 'string'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      type=\"text\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-input>\r\n    <sd-input-number\r\n      *ngIf=\"column.type === 'number'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-input-number>\r\n    <sd-select\r\n      *ngIf=\"column.type === 'bool'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"[\r\n        { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n        { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n      ]\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n      <ng-template sdSelectDisplayDef let-item=\"item\">\r\n        <sd-badge *ngIf=\"item.value === '1'\" color=\"success\" [title]=\"column.option?.displayOnTrue || 'True'\"> </sd-badge>\r\n        <sd-badge *ngIf=\"item.value === '0'\" color=\"danger\" [title]=\"column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n      </ng-template>\r\n    </sd-select>\r\n    <sd-select\r\n      *ngIf=\"column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"column.option.items\"\r\n      [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\"\r\n      [multiple]=\"column?.option?.selection === 'MULTIPLE' || column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n      [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n    </sd-select>\r\n    <sd-autocomplete\r\n      *ngIf=\"column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"column.option.items\"\r\n      [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-autocomplete>\r\n    <ng-container *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\">\r\n      <sd-date-range\r\n        *ngIf=\"!column.option?.useFilterDate\"\r\n        style=\"flex: 1\"\r\n        size=\"sm\"\r\n        [(from)]=\"columnFilter[column.field].from\"\r\n        [(to)]=\"columnFilter[column.field].to\"\r\n        (sdChange)=\"onFilterChange()\"\r\n        [disabled]=\"column.filter?.disabled\">\r\n      </sd-date-range>\r\n      <sd-date-time\r\n        *ngIf=\"column.option?.useFilterDate\"\r\n        style=\"flex: 1\"\r\n        type=\"date\"\r\n        size=\"sm\"\r\n        [(model)]=\"columnFilter[column.field]\"\r\n        (sdChange)=\"onFilterChange()\"\r\n        [disabled]=\"column.filter?.disabled\">\r\n      </sd-date-time>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #noFilter>\r\n    <sd-input type=\"text\" size=\"sm\" disabled> </sd-input>\r\n  </ng-template>\r\n</div>\r\n",
+                template: "<div class=\"d-flex c-inline-column align-items-end\">\r\n  <ng-container\r\n    *ngIf=\"\r\n      column.type === 'string' ||\r\n        column.type === 'number' ||\r\n        column.type === 'bool' ||\r\n        column.type === 'values' ||\r\n        column.type === 'date' ||\r\n        column.type === 'datetime' ||\r\n        column.type === 'time';\r\n      else noFilter\r\n    \">\r\n    <ng-container *ngIf=\"operators.length\">\r\n      <!-- <div style=\"width: 60px; margin-right: 4px\" [matMenuTriggerFor]=\"menu\">\r\n        <span>=</span>\r\n      </div> -->\r\n      <sd-button class=\"mr-2\" fontSet=\"material-symbols-outlined\" [icon]=\"columnSymbol\" size=\"sm\" [matMenuTriggerFor]=\"menu\" type=\"link\"> </sd-button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <button\r\n          *ngFor=\"let operator of operators\"\r\n          (click)=\"columnOperator[column.field] = operator.value; columnSymbol = operator.symbol\"\r\n          mat-menu-item\r\n          type=\"button\">\r\n          <mat-icon fontSet=\"material-symbols-outlined\">{{ operator.symbol }}</mat-icon>\r\n          <span> {{ operator.display }}</span>\r\n        </button>\r\n      </mat-menu>\r\n    </ng-container>\r\n    <!-- <sd-select\r\n      *ngIf=\"operators.length\"\r\n      style=\"width: 60px; margin-right: 4px\"\r\n      size=\"sm\"\r\n      [items]=\"operators\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      [(model)]=\"columnOperator[column.field]\"></sd-select> -->\r\n    <sd-input\r\n      *ngIf=\"column.type === 'string'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      type=\"text\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-input>\r\n    <sd-input-number\r\n      *ngIf=\"column.type === 'number'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-input-number>\r\n    <sd-select\r\n      *ngIf=\"column.type === 'bool'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"[\r\n        { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n        { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n      ]\"\r\n      valueField=\"value\"\r\n      displayField=\"display\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n      <ng-template sdSelectDisplayDef let-item=\"item\">\r\n        <sd-badge *ngIf=\"item.value === '1'\" color=\"success\" [title]=\"column.option?.displayOnTrue || 'True'\"> </sd-badge>\r\n        <sd-badge *ngIf=\"item.value === '0'\" color=\"danger\" [title]=\"column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n      </ng-template>\r\n    </sd-select>\r\n    <sd-select\r\n      *ngIf=\"column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"column.option.items\"\r\n      [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\"\r\n      [multiple]=\"column?.option?.selection === 'MULTIPLE' || column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n      [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n    </sd-select>\r\n    <sd-autocomplete\r\n      *ngIf=\"column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\"\r\n      style=\"flex: 1\"\r\n      size=\"sm\"\r\n      [items]=\"column.option.items\"\r\n      [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\"\r\n      [(model)]=\"columnFilter[column.field]\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-autocomplete>\r\n    <ng-container *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\">\r\n      <sd-date-range\r\n        *ngIf=\"!column.option?.useFilterDate\"\r\n        style=\"flex: 1\"\r\n        size=\"sm\"\r\n        [(from)]=\"columnFilter[column.field].from\"\r\n        [(to)]=\"columnFilter[column.field].to\"\r\n        (sdChange)=\"onFilterChange()\"\r\n        [disabled]=\"column.filter?.disabled\">\r\n      </sd-date-range>\r\n      <sd-date-time\r\n        *ngIf=\"column.option?.useFilterDate\"\r\n        style=\"flex: 1\"\r\n        type=\"date\"\r\n        size=\"sm\"\r\n        [(model)]=\"columnFilter[column.field]\"\r\n        (sdChange)=\"onFilterChange()\"\r\n        [disabled]=\"column.filter?.disabled\">\r\n      </sd-date-time>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #noFilter>\r\n    <sd-input type=\"text\" size=\"sm\" disabled> </sd-input>\r\n  </ng-template>\r\n</div>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [":host ::ng-deep .c-inline-column .mat-form-field-wrapper{background-color:#fff;border-radius:8px;margin:8px 0 0!important;padding:0!important}"]
             },] }