@sd-angular/core 1.3.137 → 1.3.138

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

@@ -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, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+            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, _5, _6, _7;
             // Init pagination
             option.paginate = {
                 hidden: (_a = option === null || option === void 0 ? void 0 : option.paginate) === null || _a === void 0 ? void 0 : _a.hidden,
@@ -1457,8 +1457,11 @@ class SdGridMaterial {
                     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 === 'values') {
+                        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.defaultListValues) || [];
+                    }
                     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) || [];
+                        column.filter.operator.list = ((_7 = (_6 = (_5 = this.configuration) === null || _5 === void 0 ? void 0 : _5.filter) === null || _6 === void 0 ? void 0 : _6.operator) === null || _7 === void 0 ? void 0 : _7.defaultListDate) || [];
                     }
                 }
             }
@@ -3545,9 +3548,9 @@ const SdFilterOperators = [
 
 var _valueChanges, _subcription;
 class SdColumnInlineFilter {
-    constructor() {
+    constructor(ref) {
+        this.ref = ref;
         this.columnOperator = {};
-        this.columnSymbol = 'filter_alt';
         this.columnFilter = {};
         this.operators = [];
         this.filterChange = new EventEmitter();
@@ -3556,6 +3559,15 @@ class SdColumnInlineFilter {
         this.onFilterChange = () => {
             this.filterChange.emit();
         };
+        this.onChangeOperator = (operator) => {
+            if (operator) {
+                this.columnOperator[this.column.field] = operator.value;
+            }
+            else {
+                this.columnOperator[this.column.field] = null;
+            }
+            this.ref.markForCheck();
+        };
     }
     _value(value) {
         this.value = value;
@@ -3594,17 +3606,23 @@ class SdColumnInlineFilter {
     ngOnDestroy() {
         __classPrivateFieldGet(this, _subcription).unsubscribe();
     }
+    get columnSymbol() {
+        var _a;
+        return ((_a = SdFilterOperators.find(e => { var _a, _b; return e.value === ((_a = this.columnOperator) === null || _a === void 0 ? void 0 : _a[(_b = this.column) === null || _b === void 0 ? void 0 : _b.field]); })) === null || _a === void 0 ? void 0 : _a.symbol) || 'filter_alt';
+    }
 }
 _valueChanges = new WeakMap(), _subcription = new WeakMap();
 SdColumnInlineFilter.decorators = [
     { type: Component, args: [{
                 selector: 'sd-column-inline-filter',
-                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",
+                template: "<div class=\"d-flex c-inline-column align-items-end\">\r\n  <ng-container *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\"\r\n        [matMenuTriggerFor]=\"menu\" type=\"link\"> </sd-button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <button *ngFor=\"let operator of operators\" (click)=\"onChangeOperator(operator)\" mat-menu-item 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 *ngIf=\"column.type === 'string'\" style=\"flex: 1\" size=\"sm\" type=\"text\"\r\n      [(model)]=\"columnFilter[column.field]\" (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n    </sd-input>\r\n    <sd-input-number *ngIf=\"column.type === 'number'\" style=\"flex: 1\" size=\"sm\" [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n    </sd-input-number>\r\n    <sd-select *ngIf=\"column.type === 'bool'\" style=\"flex: 1\" size=\"sm\" [items]=\"[\r\n        { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n        { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n      ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"columnFilter[column.field]\" (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'\">\r\n        </sd-badge>\r\n        <sd-badge *ngIf=\"item.value === '0'\" color=\"danger\" [title]=\"column.option?.displayOnFalse || 'False'\">\r\n        </sd-badge>\r\n      </ng-template>\r\n    </sd-select>\r\n    <sd-select *ngIf=\"column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\" style=\"flex: 1\"\r\n      size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (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 *ngIf=\"column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\" style=\"flex: 1\"\r\n      size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (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 *ngIf=\"!column.option?.useFilterDate\" style=\"flex: 1\" size=\"sm\"\r\n        [(from)]=\"columnFilter[column.field].from\" [(to)]=\"columnFilter[column.field].to\" (sdChange)=\"onFilterChange()\"\r\n        [disabled]=\"column.filter?.disabled\">\r\n      </sd-date-range>\r\n      <sd-date-time *ngIf=\"column.option?.useFilterDate\" style=\"flex: 1\" type=\"date\" size=\"sm\"\r\n        [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\" [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>",
                 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}"]
             },] }
 ];
-SdColumnInlineFilter.ctorParameters = () => [];
+SdColumnInlineFilter.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
 SdColumnInlineFilter.propDecorators = {
     _value: [{ type: Input, args: ['value',] }],
     _columnOperator: [{ type: Input, args: ['columnOperator',] }],