npm - @sd-angular/core - Versions diffs - 19.0.0-beta.2 → 19.0.0-beta.4 - Mend

@sd-angular/core 19.0.0-beta.2 → 19.0.0-beta.4

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 (56) 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", "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,
@@ -3003,7 +3003,7 @@ class SdTable extends SdBaseSecureComponent {
                     }
                     else if (column.type === 'boolean') {
                         display.badge = {
-                            type: 'icon',
+                            type: 'round',
                             color: value ? 'success' : 'error',
                             icon: null,
                         };