@sd-angular/core 1.3.134 → 1.3.136

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

@@ -1,5 +1,5 @@
 import { SdScrollDirective, SdCommonModule } from '@sd-angular/core/common';
-import { Directive, TemplateRef, Input, InjectionToken, Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, EventEmitter, Output, Injectable, Inject, Optional, Pipe, NgZone, QueryList, ContentChild, ContentChildren, HostListener, NgModule } from '@angular/core';
+import { InjectionToken, Directive, TemplateRef, Input, Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, EventEmitter, Output, Injectable, Inject, Optional, Pipe, NgZone, QueryList, ContentChild, ContentChildren, HostListener, NgModule } from '@angular/core';
 import { __classPrivateFieldGet, __classPrivateFieldSet, __awaiter, __rest } from 'tslib';
 import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort, MatSortModule } from '@angular/material/sort';
@@ -42,6 +42,14 @@ import { SdSideDrawer } from '@sd-angular/core/side-drawer';
 import { SdUtilityService } from '@sd-angular/core/utility';
 import { SdGroupModule } from '@sd-angular/core/group';
 
+const DEFAULT_GRID_MATERIAL_CONFIG = {
+    paginate: {
+        pageSize: 50,
+        pages: [50, 100, 200],
+    },
+};
+const GRID_MATERIAL_CONFIG = new InjectionToken('sd-grid-material.configuration');
+
 class SdMaterialCellDefDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
@@ -125,14 +133,6 @@ SdMaterialSubInformationDefDirective.ctorParameters = () => [
     { type: TemplateRef }
 ];
 
-const DEFAULT_GRID_MATERIAL_CONFIG = {
-    paginate: {
-        pageSize: 50,
-        pages: [50, 100, 200]
-    }
-};
-const GRID_MATERIAL_CONFIG = new InjectionToken('sd-grid-material.configuration');
-
 var _filterRegister;
 class SdPopupFilter {
     constructor(cdRef) {
@@ -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}"]
             },] }
@@ -4024,5 +4062,5 @@ SdGridMaterialModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { SdGridMaterial, SdGridMaterialModule, SdMaterialCellDefDirective, SdMaterialEmptyDataDefDirective, SdMaterialFilterDefDirective, SdMaterialFooterDefDirective, SdMaterialSubInformationDefDirective, MatPaginatorIntlCro as ɵa, SdGridFilter as ɵb, SdCommandIconPipe as ɵba, SdCommandTitlePipe as ɵbb, SdColumnHtmlTemplatePipe as ɵbc, SdColumnTransformPipe as ɵbd, SdColumnTooltipPipe as ɵbe, SdColumnBadgePipe as ɵbf, SdFilterColumnPipe as ɵbg, SdFilterExternalPipe as ɵbh, SdSelectionActionFilterPipe as ɵbi, SdSelectionVisiblePipe as ɵbj, SdSelectionDisablePipe as ɵbk, SdSelectionVisibleSelectAllPipe as ɵbl, SdEditorHandlerRowPipe as ɵbm, SdEditorValidatePipe as ɵbn, SdStyleRowCss as ɵbo, SdCellViewPipe as ɵbp, SdGroupPipe as ɵbq, SdPopupFilter as ɵc, SdPopupExport as ɵd, GRID_MATERIAL_CONFIG as ɵf, SdGridConfigurationService as ɵg, SdColumnValuesPipe as ɵh, SdGridFilterService as ɵi, SdEditorHandlerColumnPipe as ɵj, SdGridQuickAction as ɵk, SdDesktopCell as ɵl, SdDesktopCellEditor as ɵm, SdDesktopEditorValidation as ɵn, SdDesktopCellView as ɵo, SdDesktopCellChildrenView as ɵp, SdDesktopCommand as ɵq, SdColumnInlineFilter as ɵr, SdPopupGridConfiguration as ɵs, SdDynamicColumn as ɵt, SdGeneratedColumnService as ɵu, SdGridConfigurationResultPipe as ɵv, SdColumnChildrenFilterPipe as ɵw, SdColumnTitlePipe as ɵx, SdCommandFilterPipe as ɵy, SdCommandDisablePipe as ɵz };
+export { GRID_MATERIAL_CONFIG, SdGridMaterial, SdGridMaterialModule, SdMaterialCellDefDirective, SdMaterialEmptyDataDefDirective, SdMaterialFilterDefDirective, SdMaterialFooterDefDirective, SdMaterialSubInformationDefDirective, MatPaginatorIntlCro as ɵa, SdGridFilter as ɵb, SdColumnHtmlTemplatePipe as ɵba, SdColumnTransformPipe as ɵbb, SdColumnTooltipPipe as ɵbc, SdColumnBadgePipe as ɵbd, SdFilterColumnPipe as ɵbe, SdFilterExternalPipe as ɵbf, SdSelectionActionFilterPipe as ɵbg, SdSelectionVisiblePipe as ɵbh, SdSelectionDisablePipe as ɵbi, SdSelectionVisibleSelectAllPipe as ɵbj, SdEditorHandlerRowPipe as ɵbk, SdEditorValidatePipe as ɵbl, SdStyleRowCss as ɵbm, SdCellViewPipe as ɵbn, SdGroupPipe as ɵbo, SdPopupFilter as ɵc, SdPopupExport as ɵd, SdGridConfigurationService as ɵe, SdColumnValuesPipe as ɵf, SdGridFilterService as ɵg, SdEditorHandlerColumnPipe as ɵh, SdGridQuickAction as ɵi, SdDesktopCell as ɵj, SdDesktopCellEditor as ɵk, SdDesktopEditorValidation as ɵl, SdDesktopCellView as ɵm, SdDesktopCellChildrenView as ɵn, SdDesktopCommand as ɵo, SdColumnInlineFilter as ɵp, SdPopupGridConfiguration as ɵq, SdDynamicColumn as ɵr, SdGeneratedColumnService as ɵs, SdGridConfigurationResultPipe as ɵt, SdColumnChildrenFilterPipe as ɵu, SdColumnTitlePipe as ɵv, SdCommandFilterPipe as ɵw, SdCommandDisablePipe as ɵx, SdCommandIconPipe as ɵy, SdCommandTitlePipe as ɵz };
 //# sourceMappingURL=sd-angular-core-grid-material.js.map