npm - @sd-angular/core - Versions diffs - 19.0.0-beta.1 → 19.0.0-beta.10 - Mend

@sd-angular/core 19.0.0-beta.1 → 19.0.0-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (82) hide show

package/fesm2022/sd-angular-core-components-table.mjs CHANGED Viewed

@@ -227,7 +227,7 @@ class ColumnFilterComponent {
         this.ref.markForCheck();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ColumnFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ColumnFilterComponent, isStandalone: true, selector: "column-filter", inputs: { _autoId: ["autoId", "_autoId"], _value: ["value", "_value"], _inlineOperator: ["inlineOperator", "_inlineOperator"], _columnFilter: ["columnFilter", "_columnFilter"], cacheValues: "cacheValues", _column: ["column", "_column"] }, outputs: { inlineOperatorChange: "inlineOperatorChange", operatorChange: "operatorChange", filterChange: "filterChange" }, ngImport: i0, template: "<div class=\"d-flex c-inline-column align-items-end\">\r\n  @if (\r\n    column.type === 'string' ||\r\n    column.type === 'number' ||\r\n    column.type === 'boolean' ||\r\n    column.type === 'values' ||\r\n    column.type === 'lazy-values' ||\r\n    column.type === 'date' ||\r\n    column.type === 'datetime' ||\r\n    column.type === 'time'\r\n  ) {\r\n    <div class=\"d-flex align-items-center\" *ngIf=\"operators.length\">\r\n      <!-- Only number column icon broken. add mb when not default symbol -->\r\n      <sd-button\r\n        class=\"{{ column.type === 'number' && inlineSymbol !== 'filter_alt' ? 'mb-4 mr-2 ' : 'mr-2 ' }}\"\r\n        fontSet=\"material-symbols-outlined\"\r\n        [prefixIcon]=\"inlineSymbol\"\r\n        [matMenuTriggerFor]=\"menu\"\r\n        type=\"link\">\r\n      </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\" class=\"{{ column.type === 'number' ? 'mb-8 ' : '' }}\">{{\r\n            operator.symbol\r\n          }}</mat-icon>\r\n          <span> {{ operator.display }}</span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n    @if (column.type === 'string') {\r\n      <sd-input\r\n        *ngIf=\"column.type === 'string'\"\r\n        [autoId]=\"autoId + column.field\"\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        hideInlineError>\r\n      </sd-input>\r\n    } @else if (column.type === 'number') {\r\n      @if (!column.filter?.type) {\r\n        <sd-input-number\r\n          [autoId]=\"autoId + column.field\"\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          hideInlineError>\r\n        </sd-input-number>\r\n      } @else if (column.filter?.type === 'split-number') {\r\n        <div class=\"d-flex align-items-center\">\r\n          <sd-input-number\r\n            [autoId]=\"autoId + '-from-' + column.field\"\r\n            style=\"flex: 1\"\r\n            size=\"sm\"\r\n            [(model)]=\"columnFilter[column.field].from\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-input-number>\r\n          <div class=\"mx-4\">-</div>\r\n          <sd-input-number\r\n            [autoId]=\"autoId + '-to-' + column.field\"\r\n            style=\"flex: 1\"\r\n            size=\"sm\"\r\n            [(model)]=\"columnFilter[column.field].to\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-input-number>\r\n        </div>\r\n      }\r\n    } @else if (column.type === 'boolean') {\r\n      <sd-select\r\n        *ngIf=\"column.type === 'boolean'\"\r\n        [autoId]=\"autoId + column.field\"\r\n        [style.flex]=\"1\"\r\n        [style.width]=\"'100%'\"\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        hideInlineError>\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=\"error\" [title]=\"column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n        </ng-template>\r\n      </sd-select>\r\n    } @else if (column.type === 'values') {\r\n      <sd-select\r\n        *ngIf=\"column.option?.selection !== 'AUTOCOMPLETE'\"\r\n        [autoId]=\"autoId + column.field\"\r\n        [style.flex]=\"1\"\r\n        [style.width]=\"'100%'\"\r\n        size=\"sm\"\r\n        [items]=\"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        hideInlineError>\r\n      </sd-select>\r\n      <sd-autocomplete\r\n        *ngIf=\"column.option?.selection === 'AUTOCOMPLETE'\"\r\n        [autoId]=\"autoId + column.field\"\r\n        style=\"flex: 1\"\r\n        size=\"sm\"\r\n        [items]=\"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        hideInlineError>\r\n      </sd-autocomplete>\r\n    } @else if (column.type === 'lazy-values') {\r\n      <sd-select\r\n        *ngIf=\"column.option?.selection === 'MULTIPLE'\"\r\n        [autoId]=\"autoId + column.field\"\r\n        [style.flex]=\"1\"\r\n        [style.width]=\"'100%'\"\r\n        size=\"sm\"\r\n        [items]=\"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\r\n        hideInlineError>\r\n      </sd-select>\r\n      <sd-autocomplete\r\n        *ngIf=\"!column.option?.selection\"\r\n        [autoId]=\"autoId + column.field\"\r\n        style=\"flex: 1\"\r\n        size=\"sm\"\r\n        [items]=\"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        hideInlineError>\r\n      </sd-autocomplete>\r\n    } @else if (column.type === 'date' || column.type === 'datetime' || column.type === 'time') {\r\n      @if (!column.filter?.type || column.filter?.type === 'daterange') {\r\n        <sd-date-range\r\n          style=\"flex: 1\"\r\n          size=\"sm\"\r\n          [(model)]=\"columnFilter[column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"column.filter?.disabled\"\r\n          hideInlineError>\r\n        </sd-date-range>\r\n      } @else if (column.filter?.type === 'date') {\r\n        <sd-date\r\n          [autoId]=\"autoId + column.field\"\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          hideInlineError>\r\n        </sd-date>\r\n      } @else if (column.filter?.type === 'split-date') {\r\n        <div class=\"d-flex align-items-center\">\r\n          <sd-date\r\n            [autoId]=\"autoId + '-from-' + column.field\"\r\n            style=\"flex: 1\"\r\n            type=\"date\"\r\n            size=\"sm\"\r\n            [(model)]=\"columnFilter[column.field].from\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-date>\r\n          <div class=\"mx-4\">-</div>\r\n          <sd-date\r\n            [autoId]=\"autoId + '-to-' + column.field\"\r\n            style=\"flex: 1\"\r\n            type=\"date\"\r\n            size=\"sm\"\r\n            [(model)]=\"columnFilter[column.field].to\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-date>\r\n        </div>\r\n      }\r\n    }\r\n  } @else {\r\n    <sd-input [autoId]=\"autoId + column.field\" type=\"text\" size=\"sm\" disabled></sd-input>\r\n  }\r\n</div>\r\n", styles: [":host ::ng-deep .c-inline-column .mat-mdc-text-field-wrapper{background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "model", "required", "type", "precision", "readonly", "min", "max", "validator", "inlineError", "disabled", "appearance"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "appearance", "hideInlineError", "size", "form", "label", "helperText", "placeholder", "model", "items", "valueField", "displayField", "disabledField", "cacheChecksum", "required", "validator", "inlineError", "disabled", "multiple", "limit"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdAutocomplete, selector: "sd-autocomplete", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "valueField", "displayField", "disabledField", "placeholder", "items", "limit", "cacheChecksum", "model", "addable", "disabled", "required", "validator", "inlineError", "hideInlineError"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "appearance", "hideInlineError", "min", "max", "size", "form", "disabled", "required", "inlineError", "label", "helperText", "placeholder", "minDate", "maxDate", "model"], outputs: ["sdChange", "sdFocus", "modelChange"] }, { kind: "component", type: SdDateRange, selector: "sd-date-range", inputs: ["autoId", "name", "appearance", "size", "form", "disabled", "required", "label", "helperText", "hideInlineError", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["sdClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ColumnFilterComponent, isStandalone: true, selector: "column-filter", inputs: { _autoId: ["autoId", "_autoId"], _value: ["value", "_value"], _inlineOperator: ["inlineOperator", "_inlineOperator"], _columnFilter: ["columnFilter", "_columnFilter"], cacheValues: "cacheValues", _column: ["column", "_column"] }, outputs: { inlineOperatorChange: "inlineOperatorChange", operatorChange: "operatorChange", filterChange: "filterChange" }, ngImport: i0, template: "<div class=\"d-flex c-inline-column align-items-end\">\r\n  @if (\r\n    column.type === 'string' ||\r\n    column.type === 'number' ||\r\n    column.type === 'boolean' ||\r\n    column.type === 'values' ||\r\n    column.type === 'lazy-values' ||\r\n    column.type === 'date' ||\r\n    column.type === 'datetime' ||\r\n    column.type === 'time'\r\n  ) {\r\n    <div class=\"d-flex align-items-center\" *ngIf=\"operators.length\">\r\n      <!-- Only number column icon broken. add mb when not default symbol -->\r\n      <sd-button\r\n        class=\"{{ column.type === 'number' && inlineSymbol !== 'filter_alt' ? 'mb-4 mr-2 ' : 'mr-2 ' }}\"\r\n        fontSet=\"material-symbols-outlined\"\r\n        [prefixIcon]=\"inlineSymbol\"\r\n        [matMenuTriggerFor]=\"menu\"\r\n        type=\"link\">\r\n      </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\" class=\"{{ column.type === 'number' ? 'mb-8 ' : '' }}\">{{\r\n            operator.symbol\r\n          }}</mat-icon>\r\n          <span> {{ operator.display }}</span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n    @if (column.type === 'string') {\r\n      <sd-input\r\n        *ngIf=\"column.type === 'string'\"\r\n        [autoId]=\"autoId + column.field\"\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        hideInlineError>\r\n      </sd-input>\r\n    } @else if (column.type === 'number') {\r\n      @if (!column.filter?.type) {\r\n        <sd-input-number\r\n          [autoId]=\"autoId + column.field\"\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          hideInlineError>\r\n        </sd-input-number>\r\n      } @else if (column.filter?.type === 'split-number') {\r\n        <div class=\"d-flex align-items-center\">\r\n          <sd-input-number\r\n            [autoId]=\"autoId + '-from-' + column.field\"\r\n            style=\"flex: 1\"\r\n            size=\"sm\"\r\n            [(model)]=\"columnFilter[column.field].from\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-input-number>\r\n          <div class=\"mx-4\">-</div>\r\n          <sd-input-number\r\n            [autoId]=\"autoId + '-to-' + column.field\"\r\n            style=\"flex: 1\"\r\n            size=\"sm\"\r\n            [(model)]=\"columnFilter[column.field].to\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-input-number>\r\n        </div>\r\n      }\r\n    } @else if (column.type === 'boolean') {\r\n      <sd-select\r\n        *ngIf=\"column.type === 'boolean'\"\r\n        [autoId]=\"autoId + column.field\"\r\n        [style.flex]=\"1\"\r\n        [style.width]=\"'100%'\"\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        hideInlineError>\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=\"error\" [title]=\"column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n        </ng-template>\r\n      </sd-select>\r\n    } @else if (column.type === 'values') {\r\n      <sd-select\r\n        *ngIf=\"column.option?.selection !== 'AUTOCOMPLETE'\"\r\n        [autoId]=\"autoId + column.field\"\r\n        [style.flex]=\"1\"\r\n        [style.width]=\"'100%'\"\r\n        size=\"sm\"\r\n        [items]=\"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        hideInlineError>\r\n      </sd-select>\r\n      <sd-autocomplete\r\n        *ngIf=\"column.option?.selection === 'AUTOCOMPLETE'\"\r\n        [autoId]=\"autoId + column.field\"\r\n        style=\"flex: 1\"\r\n        size=\"sm\"\r\n        [items]=\"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        hideInlineError>\r\n      </sd-autocomplete>\r\n    } @else if (column.type === 'lazy-values') {\r\n      <sd-select\r\n        *ngIf=\"column.option?.selection === 'MULTIPLE'\"\r\n        [autoId]=\"autoId + column.field\"\r\n        [style.flex]=\"1\"\r\n        [style.width]=\"'100%'\"\r\n        size=\"sm\"\r\n        [items]=\"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\r\n        hideInlineError>\r\n      </sd-select>\r\n      <sd-autocomplete\r\n        *ngIf=\"!column.option?.selection\"\r\n        [autoId]=\"autoId + column.field\"\r\n        style=\"flex: 1\"\r\n        size=\"sm\"\r\n        [items]=\"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        hideInlineError>\r\n      </sd-autocomplete>\r\n    } @else if (column.type === 'date' || column.type === 'datetime' || column.type === 'time') {\r\n      @if (!column.filter?.type || column.filter?.type === 'daterange') {\r\n        <sd-date-range\r\n          style=\"flex: 1\"\r\n          size=\"sm\"\r\n          [(model)]=\"columnFilter[column.field]\"\r\n          (sdChange)=\"onFilterChange()\"\r\n          [disabled]=\"column.filter?.disabled\"\r\n          hideInlineError>\r\n        </sd-date-range>\r\n      } @else if (column.filter?.type === 'date') {\r\n        <sd-date\r\n          [autoId]=\"autoId + column.field\"\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          hideInlineError>\r\n        </sd-date>\r\n      } @else if (column.filter?.type === 'split-date') {\r\n        <div class=\"d-flex align-items-center\">\r\n          <sd-date\r\n            [autoId]=\"autoId + '-from-' + column.field\"\r\n            style=\"flex: 1\"\r\n            type=\"date\"\r\n            size=\"sm\"\r\n            [(model)]=\"columnFilter[column.field].from\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-date>\r\n          <div class=\"mx-4\">-</div>\r\n          <sd-date\r\n            [autoId]=\"autoId + '-to-' + column.field\"\r\n            style=\"flex: 1\"\r\n            type=\"date\"\r\n            size=\"sm\"\r\n            [(model)]=\"columnFilter[column.field].to\"\r\n            (sdChange)=\"onFilterChange()\"\r\n            [disabled]=\"column.filter?.disabled\"\r\n            hideInlineError>\r\n          </sd-date>\r\n        </div>\r\n      }\r\n    }\r\n  } @else {\r\n    <sd-input [autoId]=\"autoId + column.field\" type=\"text\" size=\"sm\" disabled></sd-input>\r\n  }\r\n</div>\r\n", styles: [":host ::ng-deep .c-inline-column .mat-mdc-text-field-wrapper{background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "viewed", "hyperlink", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "model", "required", "type", "precision", "readonly", "min", "max", "validator", "inlineError", "disabled", "viewed", "hyperlink", "appearance"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "appearance", "hideInlineError", "size", "form", "label", "helperText", "placeholder", "model", "items", "valueField", "displayField", "disabledField", "cacheChecksum", "required", "validator", "inlineError", "disabled", "viewed", "hyperlink", "multiple", "limit"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdAutocomplete, selector: "sd-autocomplete", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "valueField", "displayField", "disabledField", "placeholder", "items", "limit", "cacheChecksum", "model", "addable", "disabled", "viewed", "hyperlink", "required", "validator", "inlineError", "hideInlineError"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "appearance", "hideInlineError", "min", "max", "size", "form", "disabled", "viewed", "hyperlink", "required", "inlineError", "label", "helperText", "placeholder", "minDate", "maxDate", "model"], outputs: ["sdChange", "sdFocus", "modelChange"] }, { kind: "component", type: SdDateRange, selector: "sd-date-range", inputs: ["autoId", "name", "appearance", "size", "form", "disabled", "required", "label", "helperText", "hideInlineError", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdBadge, selector: "sd-badge", inputs: ["type", "color", "primary", "secondary", "success", "info", "warning", "error", "fontSet", "title", "description", "tooltip", "icon", "size"], outputs: ["sdClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ColumnFilterComponent, decorators: [{
             type: Component,
@@ -422,7 +422,7 @@ class ExternalFilterComponent {
         });
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ExternalFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ExternalFilterComponent, isStandalone: true, selector: "external-filter", inputs: { _autoId: ["autoId", "_autoId"], _filter: ["filter", "_filter"], _externalFilters: ["externalFilters", "_externalFilters"], _filterRegister: ["filterRegister", "_filterRegister"] }, ngImport: i0, template: "@if (!filter?.disabled) {\r\n  @if (!isMobileOrTablet && externalFilters.length) {\r\n    <sd-section [hideHeader]=\"filter?.hideExternalFilterToolbar\" icon=\"filter_alt\" iconColor=\"secondary\" title=\"B\u1ED9 l\u1ECDc\" collapsable>\r\n      <div class=\"d-flex mr-4\" sdHeaderRight>\r\n        <sd-button\r\n          [autoId]=\"autoId + 'clearFilter'\"\r\n          [disabled]=\"!filtered\"\r\n          type=\"link\"\r\n          prefixIcon=\"cleaning_services\"\r\n          tooltip=\"X\u00F3a l\u1EF1a ch\u1ECDn\"\r\n          (click)=\"$event.stopPropagation(); clearFilter($event)\"></sd-button>\r\n        <sd-button\r\n          [autoId]=\"autoId + 'setting'\"\r\n          type=\"link\"\r\n          prefixIcon=\"settings\"\r\n          tooltip=\"T\u00F9y ch\u1EC9nh\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"></sd-button>\r\n        <mat-menu #menu=\"matMenu\" class=\"sd-custom-panel-filter-configuration\">\r\n          @for (externalFilter of externalFilters; track externalFilter.field) {\r\n            <button mat-menu-item (click)=\"onCheckboxChange($event, externalFilter)\" [disabled]=\"externalFilter.required\">\r\n              <sd-checkbox\r\n                [label]=\"externalFilter.title\"\r\n                [model]=\"inlineExternal[externalFilter.field]\"\r\n                [disabled]=\"externalFilter.required\" />\r\n            </button>\r\n          }\r\n        </mat-menu>\r\n      </div>\r\n      <div class=\"row mx-0\" style=\"row-gap: 16px\">\r\n        @for (item of externalFilters; track item.field) {\r\n          @if (inlineExternal[item.field]) {\r\n            <div class=\"col-md-3 col-sm-6 px-8\" [class.col-lg-2]=\"col === 2\" [class.col-lg-3]=\"col === 3\">\r\n              @if (item.type === 'string') {\r\n                <sd-input\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  type=\"text\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (keyupEnter)=\"onKeyupEnter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-input>\r\n              } @else if (item.type === 'number') {\r\n                <sd-input-number\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (keyupEnter)=\"onKeyupEnter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-input-number>\r\n              } @else if (item.type === 'boolean') {\r\n                <sd-select\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [items]=\"[\r\n                    { value: true, display: item.option?.displayOnTrue || 'True' },\r\n                    { value: false, display: item.option?.displayOnFalse || 'False' }\r\n                  ]\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-select>\r\n              } @else if (item.type === 'date') {\r\n                <sd-date\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  hideInlineError>\r\n                </sd-date>\r\n              } @else if (item.type === 'datetime') {\r\n                <sd-datetime\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  hideInlineError>\r\n                </sd-datetime>\r\n              } @else if (item.type === 'daterange') {\r\n                <sd-date-range\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter()\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  appearance=\"outline\"\r\n                  hideInlineError>\r\n                </sd-date-range>\r\n              } @else if (item.type === 'values') {\r\n                @if (item.option.selection === 'MULTIPLE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (item.option.selection === 'AUTOCOMPLETE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (item.option.selection === 'MULTIPLEAUTOCOMPLETE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                }\r\n              } @else if (item.type === 'lazy-values') {\r\n                @if (item.option.selection === 'MULTIPLE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                }\r\n              } @else if (item.type === 'custom' && item.filterDef) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    item.filterDef;\r\n                    context: { form: form, externalFilter: externalFilter, autoId: autoId + item.field }\r\n                  \"></ng-container>\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n      @if (filter?.manualFilter) {\r\n        <div class=\"d-flex justify-content-end mt-16 px-8\">\r\n          <sd-button\r\n            [autoId]=\"autoId + 'onSubmit'\"\r\n            [disabled]=\"form.invalid\"\r\n            type=\"fill\"\r\n            color=\"primary\"\r\n            title=\"T\u00ECm ki\u1EBFm\"\r\n            prefixIcon=\"filter_alt\"\r\n            (click)=\"onSubmit()\">\r\n          </sd-button>\r\n        </div>\r\n      }\r\n    </sd-section>\r\n  }\r\n  <!-- <sd-popup-filter [filterRegister]=\"filterRegister!\" [columns]=\"columns\" [externalFilters]=\"externalFilters\">\r\n  </sd-popup-filter> -->\r\n}\r\n", styles: [":host{display:block;padding-left:0;padding-right:0}::ng-deep .sd-custom-panel-filter-configuration{width:240px;max-height:550px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "model", "required", "type", "precision", "readonly", "min", "max", "validator", "inlineError", "disabled", "appearance"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "appearance", "hideInlineError", "size", "form", "label", "helperText", "placeholder", "model", "items", "valueField", "displayField", "disabledField", "cacheChecksum", "required", "validator", "inlineError", "disabled", "multiple", "limit"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "appearance", "hideInlineError", "min", "max", "size", "form", "disabled", "required", "inlineError", "label", "helperText", "placeholder", "minDate", "maxDate", "model"], outputs: ["sdChange", "sdFocus", "modelChange"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "appearance", "hideInlineError", "min", "max", "size", "form", "disabled", "required", "inlineError", "label", "helperText", "placeholder", "minDate", "maxDate", "model"], outputs: ["sdChange", "sdFocus", "modelChange"] }, { kind: "component", type: SdDateRange$1, selector: "sd-date-range", inputs: ["autoId", "name", "appearance", "size", "form", "disabled", "required", "label", "helperText", "hideInlineError", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "component", type: SdCheckbox, selector: "sd-checkbox", inputs: ["autoId", "name", "form", "label", "color", "disabled", "model", "inlineError"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ExternalFilterComponent, isStandalone: true, selector: "external-filter", inputs: { _autoId: ["autoId", "_autoId"], _filter: ["filter", "_filter"], _externalFilters: ["externalFilters", "_externalFilters"], _filterRegister: ["filterRegister", "_filterRegister"] }, ngImport: i0, template: "@if (!filter?.disabled) {\r\n  @if (!isMobileOrTablet && externalFilters.length) {\r\n    <sd-section [hideHeader]=\"filter?.hideExternalFilterToolbar\" icon=\"filter_alt\" iconColor=\"secondary\" title=\"B\u1ED9 l\u1ECDc\" collapsable>\r\n      <div class=\"d-flex mr-4\" sdHeaderRight>\r\n        <sd-button\r\n          [autoId]=\"autoId + 'clearFilter'\"\r\n          [disabled]=\"!filtered\"\r\n          type=\"link\"\r\n          prefixIcon=\"cleaning_services\"\r\n          tooltip=\"X\u00F3a l\u1EF1a ch\u1ECDn\"\r\n          (click)=\"$event.stopPropagation(); clearFilter($event)\"></sd-button>\r\n        <sd-button\r\n          [autoId]=\"autoId + 'setting'\"\r\n          type=\"link\"\r\n          prefixIcon=\"settings\"\r\n          tooltip=\"T\u00F9y ch\u1EC9nh\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"></sd-button>\r\n        <mat-menu #menu=\"matMenu\" class=\"sd-custom-panel-filter-configuration\">\r\n          @for (externalFilter of externalFilters; track externalFilter.field) {\r\n            <button mat-menu-item (click)=\"onCheckboxChange($event, externalFilter)\" [disabled]=\"externalFilter.required\">\r\n              <sd-checkbox\r\n                [label]=\"externalFilter.title\"\r\n                [model]=\"inlineExternal[externalFilter.field]\"\r\n                [disabled]=\"externalFilter.required\" />\r\n            </button>\r\n          }\r\n        </mat-menu>\r\n      </div>\r\n      <div class=\"row mx-0\" style=\"row-gap: 16px\">\r\n        @for (item of externalFilters; track item.field) {\r\n          @if (inlineExternal[item.field]) {\r\n            <div class=\"col-md-3 col-sm-6 px-8\" [class.col-lg-2]=\"col === 2\" [class.col-lg-3]=\"col === 3\">\r\n              @if (item.type === 'string') {\r\n                <sd-input\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  type=\"text\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (keyupEnter)=\"onKeyupEnter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-input>\r\n              } @else if (item.type === 'number') {\r\n                <sd-input-number\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (keyupEnter)=\"onKeyupEnter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-input-number>\r\n              } @else if (item.type === 'boolean') {\r\n                <sd-select\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [items]=\"[\r\n                    { value: true, display: item.option?.displayOnTrue || 'True' },\r\n                    { value: false, display: item.option?.displayOnFalse || 'False' }\r\n                  ]\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-select>\r\n              } @else if (item.type === 'date') {\r\n                <sd-date\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  hideInlineError>\r\n                </sd-date>\r\n              } @else if (item.type === 'datetime') {\r\n                <sd-datetime\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  hideInlineError>\r\n                </sd-datetime>\r\n              } @else if (item.type === 'daterange') {\r\n                <sd-date-range\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter()\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  appearance=\"outline\"\r\n                  hideInlineError>\r\n                </sd-date-range>\r\n              } @else if (item.type === 'values') {\r\n                @if (item.option.selection === 'MULTIPLE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (item.option.selection === 'AUTOCOMPLETE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (item.option.selection === 'MULTIPLEAUTOCOMPLETE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                }\r\n              } @else if (item.type === 'lazy-values') {\r\n                @if (item.option.selection === 'MULTIPLE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                }\r\n              } @else if (item.type === 'custom' && item.filterDef) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    item.filterDef;\r\n                    context: { form: form, externalFilter: externalFilter, autoId: autoId + item.field }\r\n                  \"></ng-container>\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n      @if (filter?.manualFilter) {\r\n        <div class=\"d-flex justify-content-end mt-16 px-8\">\r\n          <sd-button\r\n            [autoId]=\"autoId + 'onSubmit'\"\r\n            [disabled]=\"form.invalid\"\r\n            type=\"fill\"\r\n            color=\"primary\"\r\n            title=\"T\u00ECm ki\u1EBFm\"\r\n            prefixIcon=\"filter_alt\"\r\n            (click)=\"onSubmit()\">\r\n          </sd-button>\r\n        </div>\r\n      }\r\n    </sd-section>\r\n  }\r\n  <!-- <sd-popup-filter [filterRegister]=\"filterRegister!\" [columns]=\"columns\" [externalFilters]=\"externalFilters\">\r\n  </sd-popup-filter> -->\r\n}\r\n", styles: [":host{display:block;padding-left:0;padding-right:0}::ng-deep .sd-custom-panel-filter-configuration{width:240px;max-height:550px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "viewed", "hyperlink", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "model", "required", "type", "precision", "readonly", "min", "max", "validator", "inlineError", "disabled", "viewed", "hyperlink", "appearance"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "appearance", "hideInlineError", "size", "form", "label", "helperText", "placeholder", "model", "items", "valueField", "displayField", "disabledField", "cacheChecksum", "required", "validator", "inlineError", "disabled", "viewed", "hyperlink", "multiple", "limit"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "appearance", "hideInlineError", "min", "max", "size", "form", "disabled", "viewed", "hyperlink", "required", "inlineError", "label", "helperText", "placeholder", "minDate", "maxDate", "model"], outputs: ["sdChange", "sdFocus", "modelChange"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "appearance", "hideInlineError", "min", "max", "size", "form", "disabled", "viewed", "hyperlink", "required", "inlineError", "label", "helperText", "placeholder", "minDate", "maxDate", "model"], outputs: ["sdChange", "sdFocus", "modelChange"] }, { kind: "component", type: SdDateRange$1, selector: "sd-date-range", inputs: ["autoId", "name", "appearance", "size", "form", "disabled", "required", "label", "helperText", "hideInlineError", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "component", type: SdCheckbox, selector: "sd-checkbox", inputs: ["autoId", "name", "form", "label", "color", "disabled", "model", "inlineError"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ExternalFilterComponent, decorators: [{
             type: Component,
@@ -767,7 +767,7 @@ class ConfigComponent {
         this.dragDisabled = true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfigComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.SdConfirmService }, { token: ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ConfigComponent, isStandalone: true, selector: "config", inputs: { tableOption: "tableOption" }, host: { listeners: { "window:mouseup": "mouseUp($event)" } }, providers: [ConfigService], viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: "<sd-modal width=\"sm\" [title]=\"'Thi\u1EBFt l\u1EADp b\u1EA3ng'\" #modal>\r\n  @if (configuration) {\r\n    <div class=\"c-container\">\r\n      <div class=\"c-table\" style=\"max-height: 70vh\">\r\n        <table\r\n          #table\r\n          mat-table\r\n          [dataSource]=\"configuration.columns!\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"configuration.columns\"\r\n          (cdkDropListDropped)=\"dropTable($event)\">\r\n          >\r\n          <!-- <ng-container matColumnDef=\"stt\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 50px\">#</th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item; let idx = index\"></td>\r\n          </ng-container> -->\r\n          <ng-container matColumnDef=\"invisible\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 96px\">\r\n              {{ 'Hi\u1EC3n th\u1ECB' }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\r\n              <div class=\"d-flex\" style=\"gap: 8px\">\r\n                <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#5f6368\">\r\n                    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n                    <path\r\n                      d=\"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" />\r\n                  </svg>\r\n                </div>\r\n                <sd-switch [model]=\"!item.invisible\" (modelChange)=\"item.invisible = !item.invisible\" />\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"title\">\r\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef>\r\n              {{ 'Ti\u00EAu \u0111\u1EC1 c\u1ED9t' }}\r\n            </th>\r\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input class=\"pb-5\" [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" hideInlineError></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"width\">\r\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef style=\"width: 80px\">\r\n              {{ 'R\u1ED9ng' }}\r\n            </th>\r\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input class=\"pb-5\" [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" hideInlineError></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"fixed\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 80px\">\r\n              {{ 'C\u1ED1 \u0111\u1ECBnh' }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-switch [(model)]=\"item.fixed\" />\r\n            </td>\r\n          </ng-container>\r\n          <tr mat-header-row *matHeaderRowDef=\"['invisible', 'title', 'width', 'fixed']; sticky: true\"></tr>\r\n          <tr\r\n            mat-row\r\n            *matRowDef=\"let row; columns: ['invisible', 'title', 'width', 'fixed']\"\r\n            cdkDrag\r\n            [cdkDragData]=\"row\"\r\n            cdkDragLockAxis=\"y\"\r\n            [cdkDragDisabled]=\"dragDisabled\"></tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  }\r\n  <ng-container sdFooter>\r\n    <sd-button class=\"mr-8\" (click)=\"close()\" title=\"B\u1ECF qua\" color=\"secondary\"> </sd-button>\r\n    <sd-button class=\"mr-8\" (click)=\"onReset()\" title=\"M\u1EB7c \u0111\u1ECBnh\" color=\"primary\"> </sd-button>\r\n    <sd-button (click)=\"onSave()\" title=\"\u00C1p d\u1EE5ng\" type=\"fill\" color=\"primary\"> </sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n", styles: [".c-table{position:relative;overflow:auto}.c-table table{width:100%}.c-table .c-th{font-weight:500;font-size:14px;line-height:20px;color:#000}.c-container{position:relative;min-height:200px}.c-handle{color:#ccc;cursor:move}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: CdkTableModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "lazyLoadContent"], outputs: ["sdClosed"] }, { kind: "component", type: SdSwitch, selector: "sd-switch", inputs: ["autoId", "name", "size", "form", "label", "color", "disabled", "model", "hideInlineError", "required"], outputs: ["modelChange", "sdChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ConfigComponent, isStandalone: true, selector: "config", inputs: { tableOption: "tableOption" }, host: { listeners: { "window:mouseup": "mouseUp($event)" } }, providers: [ConfigService], viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: "<sd-modal width=\"sm\" [title]=\"'Thi\u1EBFt l\u1EADp b\u1EA3ng'\" #modal>\r\n  @if (configuration) {\r\n    <div class=\"c-container\">\r\n      <div class=\"c-table\" style=\"max-height: 70vh\">\r\n        <table\r\n          #table\r\n          mat-table\r\n          [dataSource]=\"configuration.columns!\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"configuration.columns\"\r\n          (cdkDropListDropped)=\"dropTable($event)\">\r\n          >\r\n          <!-- <ng-container matColumnDef=\"stt\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 50px\">#</th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item; let idx = index\"></td>\r\n          </ng-container> -->\r\n          <ng-container matColumnDef=\"invisible\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 96px\">\r\n              {{ 'Hi\u1EC3n th\u1ECB' }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\r\n              <div class=\"d-flex\" style=\"gap: 8px\">\r\n                <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#5f6368\">\r\n                    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n                    <path\r\n                      d=\"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" />\r\n                  </svg>\r\n                </div>\r\n                <sd-switch [model]=\"!item.invisible\" (modelChange)=\"item.invisible = !item.invisible\" />\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"title\">\r\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef>\r\n              {{ 'Ti\u00EAu \u0111\u1EC1 c\u1ED9t' }}\r\n            </th>\r\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input class=\"pb-5\" [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" hideInlineError></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"width\">\r\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef style=\"width: 80px\">\r\n              {{ 'R\u1ED9ng' }}\r\n            </th>\r\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input class=\"pb-5\" [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" hideInlineError></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"fixed\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 80px\">\r\n              {{ 'C\u1ED1 \u0111\u1ECBnh' }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-switch [(model)]=\"item.fixed\" />\r\n            </td>\r\n          </ng-container>\r\n          <tr mat-header-row *matHeaderRowDef=\"['invisible', 'title', 'width', 'fixed']; sticky: true\"></tr>\r\n          <tr\r\n            mat-row\r\n            *matRowDef=\"let row; columns: ['invisible', 'title', 'width', 'fixed']\"\r\n            cdkDrag\r\n            [cdkDragData]=\"row\"\r\n            cdkDragLockAxis=\"y\"\r\n            [cdkDragDisabled]=\"dragDisabled\"></tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  }\r\n  <ng-container sdFooter>\r\n    <sd-button class=\"mr-8\" (click)=\"close()\" title=\"B\u1ECF qua\" color=\"secondary\"> </sd-button>\r\n    <sd-button class=\"mr-8\" (click)=\"onReset()\" title=\"M\u1EB7c \u0111\u1ECBnh\" color=\"primary\"> </sd-button>\r\n    <sd-button (click)=\"onSave()\" title=\"\u00C1p d\u1EE5ng\" type=\"fill\" color=\"primary\"> </sd-button>\r\n  </ng-container>\r\n</sd-modal>\r\n", styles: [".c-table{position:relative;overflow:auto}.c-table table{width:100%}.c-table .c-th{font-weight:500;font-size:14px;line-height:20px;color:#000}.c-container{position:relative;min-height:200px}.c-handle{color:#ccc;cursor:move}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: CdkTableModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "viewed", "hyperlink", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "lazyLoadContent"], outputs: ["sdClosed"] }, { kind: "component", type: SdSwitch, selector: "sd-switch", inputs: ["autoId", "name", "size", "form", "label", "color", "disabled", "model", "hideInlineError", "required"], outputs: ["modelChange", "sdChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfigComponent, decorators: [{
             type: Component,
@@ -1371,7 +1371,7 @@ class SdPopupExport {
         return '';
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdPopupExport, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SdLoadingService }, { token: i1$1.SdExcelService }, { token: i1$1.SdNotifyService }, { token: i1$1.SdConfirmService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdPopupExport, isStandalone: true, selector: "sd-popup-export", inputs: { _tableOption: ["tableOption", "_tableOption"], configuration: "configuration" }, outputs: { export: "export" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }, { propertyName: "listGroups", first: true, predicate: ["listGroups"], descendants: true }], ngImport: i0, template: "<sd-modal width=\"907px\" [title]=\"'Exported template'\" #modal>\n  <div class=\"row\">\n    <div *ngIf=\"!files?.length\" class=\"col-12\">\n      <div class=\"c-empty\">\n        <img class=\"c-empty-image\" alt=\"empty-image\" />\n        <div class=\"T14R\">{{ 'There are no exported templates' }}</div>\n      </div>\n    </div>\n    <ng-container *ngIf=\"files?.length\">\n      <div class=\"col-12\">\n        <div class=\"c-table\" style=\"max-height: 50vh\">\n          <table mat-table [dataSource]=\"files\">\n            <ng-container matColumnDef=\"stt\">\n              <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 50px\">#</th>\n              <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\n                {{ idx + 1 }}\n              </td>\n            </ng-container>\n            <ng-container matColumnDef=\"fileName\">\n              <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>\n                {{ 'File name' }}\n              </th>\n              <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\n                {{ item.fileName }}\n              </td>\n            </ng-container>\n            <ng-container matColumnDef=\"action\">\n              <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\"></th>\n              <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\n                <div class=\"d-flex\">\n                  <button mat-icon-button aria-label=\"delete\" (click)=\"removeFile(item)\">\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                  <button mat-icon-button aria-label=\"download\" (click)=\"onExport(item)\">\n                    <mat-icon>download</mat-icon>\n                  </button>\n                </div>\n              </td>\n            </ng-container>\n            <tr mat-header-row *matHeaderRowDef=\"['stt', 'fileName', 'action']; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: ['stt', 'fileName', 'action']\"></tr>\n          </table>\n        </div>\n      </div>\n      <div *ngIf=\"files.length < 5\" class=\"col-12 mt-10\">\n        <sd-button class=\"mr-4\" [title]=\"'New template'\" (click)=\"enableCreating = true\" color=\"info\" [disabled]=\"enableCreating\">\n        </sd-button>\n        <sd-button *ngIf=\"exportOption?.enableUpload\" [title]=\"'Upload template'\" (click)=\"uploadTemplate()\" type=\"outline\">\n        </sd-button>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"enableCreating || !files?.length\">\n      <div class=\"col-12 mt-20\">\n        <div class=\"T14R\">{{ 'Select columns for creating template' }}:</div>\n      </div>\n      <div class=\"col-12\">\n        <mat-chip-listbox selectable=\"true\" multiple=\"true\">\n          <ng-container *ngFor=\"let column of columns\">\n            <mat-chip-option [selected]=\"selected[column.field]\" (click)=\"selected[column.field] = !selected[column.field]\">\n              {{ column.title }}\n            </mat-chip-option>\n          </ng-container>\n        </mat-chip-listbox>\n      </div>\n      <div class=\"col-12 row\">\n        <div class=\"col-10\">\n          <sd-input [form]=\"form\" [label]=\"'Template name'\" [(model)]=\"templateName\" [validator]=\"templateNameValidator\"></sd-input>\n        </div>\n        <div class=\"col-2 mt-8\">\n          <sd-button width=\"100%\" [title]=\"'Save'\" color=\"info\" (click)=\"createTemplate()\"> </sd-button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</sd-modal>\n", styles: [".c-radio-group{display:flex;flex-direction:column;margin:15px 0}.c-radio-button{margin:5px}.c-empty{display:flex;flex-direction:column;justify-content:center;align-items:center;position:static;height:116px;background:#f6f6f6;border-radius:4px}.c-empty .c-empty-image{content:url(data:image/png;base64,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)}.c-table{position:relative;overflow:auto}.c-table table{width:100%}.c-table .c-th{font-weight:500;font-size:14px;line-height:20px;color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i5.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "lazyLoadContent"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdPopupExport, isStandalone: true, selector: "sd-popup-export", inputs: { _tableOption: ["tableOption", "_tableOption"], configuration: "configuration" }, outputs: { export: "export" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }, { propertyName: "listGroups", first: true, predicate: ["listGroups"], descendants: true }], ngImport: i0, template: "<sd-modal width=\"907px\" [title]=\"'Exported template'\" #modal>\n  <div class=\"row\">\n    <div *ngIf=\"!files?.length\" class=\"col-12\">\n      <div class=\"c-empty\">\n        <img class=\"c-empty-image\" alt=\"empty-image\" />\n        <div class=\"T14R\">{{ 'There are no exported templates' }}</div>\n      </div>\n    </div>\n    <ng-container *ngIf=\"files?.length\">\n      <div class=\"col-12\">\n        <div class=\"c-table\" style=\"max-height: 50vh\">\n          <table mat-table [dataSource]=\"files\">\n            <ng-container matColumnDef=\"stt\">\n              <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 50px\">#</th>\n              <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\n                {{ idx + 1 }}\n              </td>\n            </ng-container>\n            <ng-container matColumnDef=\"fileName\">\n              <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>\n                {{ 'File name' }}\n              </th>\n              <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\n                {{ item.fileName }}\n              </td>\n            </ng-container>\n            <ng-container matColumnDef=\"action\">\n              <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\"></th>\n              <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\n                <div class=\"d-flex\">\n                  <button mat-icon-button aria-label=\"delete\" (click)=\"removeFile(item)\">\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                  <button mat-icon-button aria-label=\"download\" (click)=\"onExport(item)\">\n                    <mat-icon>download</mat-icon>\n                  </button>\n                </div>\n              </td>\n            </ng-container>\n            <tr mat-header-row *matHeaderRowDef=\"['stt', 'fileName', 'action']; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: ['stt', 'fileName', 'action']\"></tr>\n          </table>\n        </div>\n      </div>\n      <div *ngIf=\"files.length < 5\" class=\"col-12 mt-10\">\n        <sd-button class=\"mr-4\" [title]=\"'New template'\" (click)=\"enableCreating = true\" color=\"info\" [disabled]=\"enableCreating\">\n        </sd-button>\n        <sd-button *ngIf=\"exportOption?.enableUpload\" [title]=\"'Upload template'\" (click)=\"uploadTemplate()\" type=\"outline\">\n        </sd-button>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"enableCreating || !files?.length\">\n      <div class=\"col-12 mt-20\">\n        <div class=\"T14R\">{{ 'Select columns for creating template' }}:</div>\n      </div>\n      <div class=\"col-12\">\n        <mat-chip-listbox selectable=\"true\" multiple=\"true\">\n          <ng-container *ngFor=\"let column of columns\">\n            <mat-chip-option [selected]=\"selected[column.field]\" (click)=\"selected[column.field] = !selected[column.field]\">\n              {{ column.title }}\n            </mat-chip-option>\n          </ng-container>\n        </mat-chip-listbox>\n      </div>\n      <div class=\"col-12 row\">\n        <div class=\"col-10\">\n          <sd-input [form]=\"form\" [label]=\"'Template name'\" [(model)]=\"templateName\" [validator]=\"templateNameValidator\"></sd-input>\n        </div>\n        <div class=\"col-2 mt-8\">\n          <sd-button width=\"100%\" [title]=\"'Save'\" color=\"info\" (click)=\"createTemplate()\"> </sd-button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</sd-modal>\n", styles: [".c-radio-group{display:flex;flex-direction:column;margin:15px 0}.c-radio-button{margin:5px}.c-empty{display:flex;flex-direction:column;justify-content:center;align-items:center;position:static;height:116px;background:#f6f6f6;border-radius:4px}.c-empty .c-empty-image{content:url(data:image/png;base64,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)}.c-table{position:relative;overflow:auto}.c-table table{width:100%}.c-table .c-th{font-weight:500;font-size:14px;line-height:20px;color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i5.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "viewed", "hyperlink", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["title", "color", "width", "height", "view", "lazyLoadContent"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdPopupExport, decorators: [{
             type: Component,
@@ -2096,7 +2096,8 @@ class SdTable extends SdBaseSecureComponent {
         option.filter.hideInlineFilter = option?.filter?.hideInlineFilter ?? this.tableConfiguration?.filter?.hideInlineFilter;
         option.filter.externalFilterPerRow = option?.filter?.externalFilterPerRow ?? this.tableConfiguration?.filter?.externalFilterPerRow;
         option.filter.manualFilter = option?.filter?.manualFilter ?? this.tableConfiguration?.filter?.manualFilter;
-        option.filter.hideExternalFilterToolbar = option?.filter?.hideExternalFilterToolbar ?? this.tableConfiguration?.filter?.hideExternalFilterToolbar;
+        option.filter.hideExternalFilterToolbar =
+            option?.filter?.hideExternalFilterToolbar ?? this.tableConfiguration?.filter?.hideExternalFilterToolbar;
         for (const column of option.columns || []) {
             if (column.filter?.operator?.enable) {
                 if (!column.filter?.operator?.list?.length) {
@@ -2358,7 +2359,8 @@ class SdTable extends SdBaseSecureComponent {
                     total: 0,
                 };
             }
-            const data = await items(filterReq).catch(err => {
+            const pagingReq = this.#convertPagingReq(filterReq);
+            const data = await items(filterReq, pagingReq).catch(err => {
                 console.error(err);
                 return {
                     items: [],
@@ -2431,9 +2433,10 @@ class SdTable extends SdBaseSecureComponent {
             return await result;
         }
         else {
-            const filterInfo = this.#filterExportInfo(pageNumber, pageSize);
+            const filterReq = this.#filterExportInfo(pageNumber, pageSize);
             if (this.tableOption.type === 'server') {
-                const result = this.tableOption.items(filterInfo);
+                const pagingReq = this.#convertPagingReq(filterReq);
+                const result = this.tableOption.items(filterReq, pagingReq);
                 return await result;
             }
             else {
@@ -2450,7 +2453,7 @@ class SdTable extends SdBaseSecureComponent {
                 else {
                     exportedItems = this.tableOption.items;
                 }
-                return this.#filterLocal(exportedItems, filterInfo);
+                return this.#filterLocal(exportedItems, filterReq);
             }
         }
     };
@@ -2882,22 +2885,124 @@ class SdTable extends SdBaseSecureComponent {
             }
         }
     };
+    #getNestedValue = (obj, path) => {
+        if (!path || !obj)
+            return undefined;
+        const keys = path.split('.');
+        let result = obj;
+        for (const key of keys) {
+            if (result === null || result === undefined) {
+                return undefined;
+            }
+            result = result[key];
+        }
+        return result;
+    };
     #format = async (rawItems, columns) => {
         const items = rawItems.map(MapToSdTableItem);
+        // Cache for parsed field paths
+        const fieldPathCache = new Map();
+        /**
+         * Get nested property value from object using dot notation
+         */
+        const getNestedValue = (obj, path) => {
+            if (!path || obj == null)
+                return undefined;
+            let keys = fieldPathCache.get(path);
+            if (!keys) {
+                keys = path.split('.');
+                fieldPathCache.set(path, keys);
+            }
+            if (keys.length === 1)
+                return obj[keys[0]];
+            let result = obj;
+            for (const key of keys) {
+                if (result == null)
+                    return undefined;
+                result = result[key];
+            }
+            return result;
+        };
+        /**
+         * Format date display based on column type
+         */
+        const formatDateDisplay = (value, type) => {
+            const date = DateUtilities.toFormat(value, 'dd/MM/yyyy');
+            const time = DateUtilities.toFormat(value, 'HH:mm:ss');
+            if (type === 'datetime') {
+                return time && date ? `<div class="T14R">${date}<span class="T14R text-black400 ml-4">${time}</span></div>` : '';
+            }
+            if (type === 'date')
+                return date || '';
+            if (type === 'time')
+                return time || '';
+            return '';
+        };
+        /**
+         * Process values display (supports arrays)
+         */
+        const processValuesDisplay = (value, rowData, column, field) => {
+            if (column.type === 'lazy-values' && typeof column.option.mapValue === 'function') {
+                const val = column.option.mapValue(value, rowData);
+                const vals = (Array.isArray(val) ? val : [val]).filter(e => e?.toString());
+                return vals.map(val => this.#cacheObjValues[field]?.[val]?.[column.option.displayField] || val).join(', ');
+            }
+            const vals = (Array.isArray(value) ? value : [value]).filter(e => e?.toString());
+            return vals.map(val => this.#cacheObjValues[field]?.[val]?.[column.option.displayField] || val).join(', ');
+        };
+        /**
+         * Create badge configuration
+         */
+        const createBadge = (column, value, rowData) => {
+            if (column.useBadge) {
+                const badge = column.useBadge(value, rowData);
+                if (badge) {
+                    return {
+                        badge: {
+                            type: badge.type ?? 'round',
+                            color: badge.color,
+                            icon: badge.icon,
+                        },
+                        title: badge.title,
+                    };
+                }
+                return undefined;
+            }
+            if ((column.type === 'string' || column.type === 'number' || column.type === 'values') && column.badge) {
+                return {
+                    badge: {
+                        type: column.badgeType || 'icon',
+                        color: column.badge(value, rowData),
+                        icon: column.badgeIcon?.(value, rowData),
+                    },
+                    title: null,
+                };
+            }
+            if (column.type === 'boolean') {
+                return {
+                    badge: {
+                        type: 'round',
+                        color: value ? 'success' : 'error',
+                    },
+                };
+            }
+            return undefined;
+        };
         const execute = async (column) => {
-            // Clickable
             const { field, click, tooltip, htmlTemplate, transform } = column;
+            // Load lazy-values
             if (!transform && !htmlTemplate && column.type === 'lazy-values' && typeof column.option.views === 'function') {
-                const { option: { views, mapValue }, } = column;
+                const { option: { views, mapValue, valueField, displayField }, } = column;
                 this.#cacheObjValues[field] = this.#cacheObjValues[field] || {};
                 const values = ArrayUtilities.distinct(items
                     .map(item => {
+                    const value = getNestedValue(item.data, field);
                     if (typeof mapValue === 'function') {
-                        return mapValue(item.data?.[field], item.data);
+                        return mapValue(value, item.data);
                     }
-                    return item.data?.[field];
+                    return value;
                 })
-                    .filter(val => !!val?.toString())
+                    .filter(val => val?.toString())
                     .reduce((current, next) => [...current, ...(Array.isArray(next) ? next : [next])], [])
                     .filter(val => !Object.keys(this.#cacheObjValues[field]).includes(val)));
                 if (values.length) {
@@ -2905,17 +3010,19 @@ class SdTable extends SdBaseSecureComponent {
                         console.error(err);
                         return [];
                     }))
-                        .filter((item) => values.includes(item?.[column.option.valueField]))
+                        .filter((item) => values.includes(item?.[valueField]))
                         .map((e) => ({
-                        [column.option.valueField]: e?.[column.option.valueField],
-                        [column.option.displayField]: e?.[column.option.displayField],
+                        [valueField]: e?.[valueField],
+                        [displayField]: e?.[displayField],
                     }));
-                    Object.assign(this.#cacheObjValues[field], ArrayUtilities.toObject(column.option.valueField, lazyItems) || {});
+                    Object.assign(this.#cacheObjValues[field], ArrayUtilities.toObject(valueField, lazyItems) || {});
                 }
             }
+            // Process each item
             for (const item of items) {
                 const rowData = item.data;
-                const value = rowData?.[field];
+                const value = getNestedValue(rowData, field);
+                // Initialize display
                 item.meta.display[field] = {
                     badge: undefined,
                     cellStyle: column.align === 'right' ? { 'text-align': 'right!important' } : undefined,
@@ -2925,57 +3032,34 @@ class SdTable extends SdBaseSecureComponent {
                     click: typeof click === 'function' ? () => click(value, rowData) : undefined,
                 };
                 const display = item.meta.display[field];
-                // Display
+                // Process display data
                 if (typeof htmlTemplate === 'function') {
                     display.isHtml = true;
                     display.data = htmlTemplate(value, rowData);
                 }
                 else if (typeof transform === 'function') {
                     const newValue = transform(value, rowData);
-                    if (newValue instanceof Promise) {
-                        display.data = await newValue;
-                    }
-                    else {
-                        display.data = newValue;
-                    }
+                    display.data = newValue instanceof Promise ? await newValue : newValue;
                 }
                 else {
+                    // Date/Time
                     if (column.type === 'date' || column.type === 'datetime' || column.type === 'time') {
-                        const date = DateUtilities.toFormat(value, 'dd/MM/yyyy');
-                        let time = DateUtilities.toFormat(value, 'HH:mm:ss');
-                        // if (time?.endsWith('00')) {
-                        //   time = DateUtilities.toFormat(value, 'HH:mm');
-                        // }
-                        if (column.type === 'date' || column.type === 'datetime') {
-                            if (column.type === 'datetime') {
-                                display.isHtml = true;
-                                display.data = time && date ? `<div class="T14R">${date}<span class="T14R text-black400 ml-4">${time}</span></div>` : '';
-                            }
-                            else {
-                                display.data = date;
-                            }
-                        }
-                        if (column.type === 'time') {
-                            display.data = time;
-                        }
+                        const formatted = formatDateDisplay(value, column.type);
+                        display.data = formatted;
+                        display.isHtml = column.type === 'datetime';
                     }
+                    // Values/Lazy-values
                     if (column.type === 'values' || column.type === 'lazy-values') {
-                        if (column.type === 'lazy-values' && typeof column.option.mapValue === 'function') {
-                            const val = column.option.mapValue(value, rowData);
-                            const vals = (Array.isArray(val) ? val : [val]).filter(e => !!e?.toString());
-                            display.data = vals.map(val => this.#cacheObjValues[field]?.[val]?.[column.option.displayField] || val)?.join(', ');
-                        }
-                        else {
-                            const vals = (Array.isArray(value) ? value : [value]).filter(e => !!e?.toString());
-                            display.data = vals.map(val => this.#cacheObjValues[field]?.[val]?.[column.option.displayField] || val)?.join(', ');
-                        }
+                        display.data = processValuesDisplay(value, rowData, column, field);
                     }
+                    // Number
                     if (column.type === 'number' && NumberUtilities.isNumber(value)) {
                         display.data = this.formatNumberPipe.transform(value);
                     }
+                    // Boolean
                     if (column.type === 'boolean') {
                         const { option } = column;
-                        if (value !== undefined && value !== null && value !== '') {
+                        if (value != null && value !== '') {
                             display.data = value === true ? option?.displayOnTrue || 'True' : option?.displayOnFalse || 'False';
                         }
                         else {
@@ -2983,31 +3067,14 @@ class SdTable extends SdBaseSecureComponent {
                         }
                     }
                     // Badge
-                    if (column.useBadge) {
-                        const badge = column.useBadge(value, rowData);
-                        if (badge) {
-                            display.badge = {
-                                type: badge.type ?? 'round',
-                                color: badge.color,
-                                icon: badge.icon,
-                            };
-                            display.data = badge.title ?? display.data;
+                    const badgeResult = createBadge(column, value, rowData);
+                    if (badgeResult) {
+                        display.badge = badgeResult.badge;
+                        if (badgeResult.title) {
+                            display.data = badgeResult.title;
                         }
                     }
-                    else if ((column.type === 'string' || column.type === 'number' || column.type === 'values') && column.badge) {
-                        display.badge = {
-                            type: !column?.badgeType ? 'icon' : column.badgeType,
-                            color: column.badge(value, rowData),
-                            icon: column.badgeIcon?.(value, rowData),
-                        };
-                    }
-                    else if (column.type === 'boolean') {
-                        display.badge = {
-                            type: 'icon',
-                            color: value ? 'success' : 'error',
-                            icon: null,
-                        };
-                    }
+                    // Handle empty values
                     if (display.data === null || display.data === undefined || display.data === '') {
                         display.data = SD_EMPTY_STR;
                         display.badge = undefined;
@@ -3015,6 +3082,7 @@ class SdTable extends SdBaseSecureComponent {
                 }
             }
         };
+        // Execute for all columns
         for (const column of columns.filter(e => !e.hidden)) {
             if (column.type === 'children') {
                 for (const childColumn of column.children?.filter(e => !e.hidden) || []) {
@@ -3033,6 +3101,228 @@ class SdTable extends SdBaseSecureComponent {
     trackBy = (index, item) => {
         return item.meta.id;
     };
+    #convertPagingReq = (filterReq) => {
+        const { columns, filter } = this.tableOption;
+        const externalFilters = filter?.externalFilters || [];
+        const req = {
+            filters: [],
+            orders: [],
+            pageNumber: filterReq.pageNumber,
+            pageSize: filterReq.pageSize,
+        };
+        const { filters, orders } = req;
+        const { rawColumnFilter, columnOperator, rawExternalFilter, orderBy, orderDirection } = filterReq;
+        // Xử lý external filter
+        for (const externalFilter of externalFilters || []) {
+            const { field } = externalFilter;
+            const value = rawExternalFilter?.[field];
+            // Nếu có giá trị thì mới xử lý filter
+            if (value !== undefined && value !== null && value !== '') {
+                if (externalFilter.type === 'string') {
+                    // Nếu filter là equal và có dấu , ngăn cách thì hiểu là tìm nhiều ngăn cách bởi dấu phẩy
+                    if (externalFilter.defaultOperator === 'EQUAL' && value?.includes(',')) {
+                        filters.push({
+                            field,
+                            operator: 'IN',
+                            data: value.split(',').map(val => val.trim()),
+                        });
+                    }
+                    else {
+                        filters.push({
+                            field,
+                            operator: externalFilter.defaultOperator || 'CONTAIN',
+                            data: value,
+                        });
+                    }
+                }
+                else if (externalFilter.type === 'boolean') {
+                    filters.push({
+                        field,
+                        operator: 'EQUAL',
+                        data: value === true || value === 1 || value === 'true' || value === '1',
+                    });
+                }
+                else if (externalFilter.type === 'daterange') {
+                    if (typeof value === 'object' && 'from' in value && 'to' in value) {
+                        if (value?.from) {
+                            filters.push({
+                                field,
+                                operator: 'GREATER_OR_EQUAL',
+                                data: DateUtilities.begin(value?.from).toISOString(),
+                            });
+                        }
+                        if (value?.to) {
+                            filters.push({
+                                field,
+                                operator: 'LESS_THAN',
+                                data: DateUtilities.begin(DateUtilities.addDays(value?.to, 1)).toISOString(),
+                            });
+                        }
+                    }
+                }
+                else if (externalFilter.type === 'date' || externalFilter.type === 'datetime') {
+                    if (DateUtilities.isDate(value)) {
+                        if (externalFilter.type === 'date') {
+                            if (externalFilter.defaultOperator === 'GREATER_OR_EQUAL') {
+                                filters.push({
+                                    field,
+                                    operator: 'GREATER_OR_EQUAL',
+                                    data: DateUtilities.begin(value).toISOString(),
+                                });
+                            }
+                            if (externalFilter.defaultOperator === 'LESS_OR_EQUAL') {
+                                filters.push({
+                                    field,
+                                    operator: 'LESS_THAN',
+                                    data: DateUtilities.begin(DateUtilities.addDays(value, 1)).toISOString(),
+                                });
+                            }
+                        }
+                        else {
+                            if (externalFilter.defaultOperator === 'GREATER_OR_EQUAL') {
+                                filters.push({
+                                    field,
+                                    operator: 'GREATER_OR_EQUAL',
+                                    data: new Date(value).toISOString(),
+                                });
+                            }
+                            if (externalFilter.defaultOperator === 'LESS_OR_EQUAL') {
+                                filters.push({
+                                    field,
+                                    operator: 'LESS_OR_EQUAL',
+                                    data: new Date(value).toISOString(),
+                                });
+                            }
+                        }
+                    }
+                }
+                else {
+                    if (Array.isArray(value)) {
+                        if (value.length) {
+                            filters.push({
+                                field,
+                                operator: 'IN',
+                                data: value,
+                            });
+                        }
+                    }
+                    else if (typeof value === 'object' && 'from' in value && 'to' in value) {
+                        if (value?.from) {
+                            filters.push({
+                                field,
+                                operator: 'GREATER_OR_EQUAL',
+                                data: DateUtilities.begin(value?.from).toISOString(),
+                            });
+                        }
+                        if (value?.to) {
+                            filters.push({
+                                field,
+                                operator: 'LESS_THAN',
+                                data: DateUtilities.begin(DateUtilities.addDays(value?.to, 1)).toISOString(),
+                            });
+                        }
+                    }
+                    else {
+                        filters.push({
+                            field,
+                            operator: externalFilter.defaultOperator || 'EQUAL',
+                            data: value,
+                        });
+                    }
+                }
+            }
+        }
+        // Xử lý column filter
+        // Xử lý column filter
+        for (const column of columns || []) {
+            const { field } = column;
+            const value = rawColumnFilter?.[field];
+            const operator = columnOperator?.[field] || column.filter?.operator?.default;
+            // Nếu có giá trị thì mới xử lý filter
+            if (value !== undefined && value !== null && value !== '') {
+                if (column.type === 'string') {
+                    filters.push({
+                        field,
+                        operator: operator || 'CONTAIN',
+                        data: value,
+                    });
+                }
+                else if (column.type === 'boolean') {
+                    filters.push({
+                        field,
+                        operator: 'EQUAL',
+                        data: value === true || value === 1 || value === 'true' || value === '1',
+                    });
+                }
+                else if (column.type === 'date' || column.type === 'datetime') {
+                    if (value && typeof value === 'object' && 'from' in value && 'to' in value) {
+                        if (value?.from && value?.to) {
+                            filters.push({
+                                field,
+                                operator: 'BETWEEN',
+                                data: {
+                                    from: DateUtilities.begin(value?.from).toISOString(),
+                                    to: DateUtilities.end(value?.to).toISOString(),
+                                },
+                            });
+                        }
+                        else if (value?.from) {
+                            filters.push({
+                                field,
+                                operator: 'GREATER_OR_EQUAL',
+                                data: DateUtilities.begin(value?.from).toISOString(),
+                            });
+                        }
+                        else if (value?.to) {
+                            filters.push({
+                                field,
+                                operator: 'LESS_THAN',
+                                data: DateUtilities.begin(DateUtilities.addDays(value?.to, 1)).toISOString(),
+                            });
+                        }
+                    }
+                    else {
+                        if (DateUtilities.isDate(value)) {
+                            filters.push({
+                                field,
+                                operator: 'BETWEEN',
+                                data: {
+                                    from: DateUtilities.begin(value).toISOString(),
+                                    to: DateUtilities.end(value).toISOString(),
+                                },
+                            });
+                        }
+                    }
+                }
+                else {
+                    if (Array.isArray(value)) {
+                        if (value.length) {
+                            filters.push({
+                                field,
+                                operator: 'IN',
+                                data: value,
+                            });
+                        }
+                    }
+                    else {
+                        filters.push({
+                            field,
+                            operator: operator || 'EQUAL',
+                            data: value,
+                        });
+                    }
+                }
+            }
+        }
+        // Xử lý orders
+        if (orderBy && orderDirection) {
+            orders.push({
+                field: orderBy,
+                direction: orderDirection,
+            });
+        }
+        return req;
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTable, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$4.SdFormatNumberPipe }, { token: SD_TABLE_CONFIGURATION, optional: true }, { token: ConfigService }, { token: i1$1.SdExcelService }, { token: i1$1.SdNotifyService }, { token: SdTableFilterService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdTable, isStandalone: true, selector: "sd-table", inputs: { _autoId: ["autoId", "_autoId"], option: "option" }, providers: [
             DatePipe,
@@ -3255,7 +3545,6 @@ const SdConvertToPagingReq = (filterRequest, args) => {
                 });
             }
             else if (column.type === 'date' || column.type === 'datetime') {
-                console.log(value);
                 if (typeof value === 'object' && 'from' in value && 'to' in value) {
                     if (value?.from && value?.to) {
                         filters.push({