@sd-angular/core 19.0.0-beta.101 → 19.0.0-beta.103

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

@@ -252,7 +252,7 @@ class ColumnFilterComponent {
     // Blur input: commit giá trị KHÔNG trigger reload.
     onFilterCommit = () => this.filterCommit.emit();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ColumnFilterComponent, isStandalone: true, selector: "column-filter", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, columnFilter: { classPropertyName: "columnFilter", publicName: "columnFilter", isSignal: true, isRequired: false, transformFunction: null }, cacheValues: { classPropertyName: "cacheValues", publicName: "cacheValues", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, operator: { classPropertyName: "operator", publicName: "operator", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { operator: "operatorChange", filterChange: "filterChange", filterCommit: "filterCommit" }, ngImport: i0, template: "@let _column = column();\r\n@let _columnFilter = columnFilter();\r\n@let _autoId = autoId();\r\n@let _templateRef = templateRef();\r\n@let _operators = operators();\r\n@let _items = items();\r\n@let _label = label();\r\n@let _context = { columnFilter: _columnFilter, autoId: _autoId };\r\n\r\n<div class=\"d-flex c-inline-column align-items-end\" style=\"width: 100%; max-width: 100%\">\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    <!-- Operator filter -->\r\n    @if (_operators.length) {\r\n      <div class=\"d-flex align-items-center\" [ngClass]=\"operatorWrapperClass()\">\r\n        <sd-operator [(model)]=\"operator\" [operators]=\"operatorValues()\" />\r\n      </div>\r\n    }\r\n\r\n    <!-- N\u1EBFu filter nh\u1EADn v\u00E0o template -->\r\n    @if (_templateRef) {\r\n      <ng-container *ngTemplateOutlet=\"_templateRef; context: _context\"></ng-container>\r\n    }\r\n    <!-- M\u1EB7c \u0111\u1ECBnh theo type v\u00E0 gi\u00E1 tr\u1ECB values defined c\u1EE7a column -->\r\n    @else {\r\n      @if (_column.type === 'string') {\r\n        <sd-input\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          size=\"sm\"\r\n          type=\"text\"\r\n          [label]=\"_label\"\r\n          [(model)]=\"_columnFilter[_column.field]\"\r\n          (keyupEnter)=\"onFilterChange()\"\r\n          (sdBlur)=\"onFilterCommit()\"\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\"\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            size=\"sm\"\r\n            [label]=\"_label\"\r\n            [(model)]=\"_columnFilter[_column.field]\"\r\n            (keyupEnter)=\"onFilterChange()\"\r\n            (sdBlur)=\"onFilterCommit()\"\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          <ng-container\r\n            *ngTemplateOutlet=\"splitNumberTpl; context: { field: _column.field, disabled: _column.filter?.disabled }\">\r\n          </ng-container>\r\n        }\r\n      } @else if (_column.type === 'boolean') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [label]=\"_label\"\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 sdItemDef let-item=\"item\">\r\n            @if (item.value === '1') {\r\n              <sd-badge color=\"success\" [title]=\"_column.option?.displayOnTrue || 'True'\"> </sd-badge>\r\n            } @else {\r\n              <sd-badge color=\"error\" [title]=\"_column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n            }\r\n          </ng-template>\r\n        </sd-select>\r\n      } @else if (_column.type === 'values') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [label]=\"_label\"\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'\"\r\n          hideInlineError>\r\n        </sd-select>\r\n      } @else if (_column.type === 'lazy-values') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [label]=\"_label\"\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'\"\r\n          hideInlineError>\r\n        </sd-select>\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 1 0%; min-width: 0\"\r\n            size=\"sm\"\r\n            [label]=\"_label\"\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\"\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            type=\"date\"\r\n            size=\"sm\"\r\n            [label]=\"_label\"\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          <ng-container\r\n            *ngTemplateOutlet=\"splitDateTpl; context: { field: _column.field, disabled: _column.filter?.disabled }\">\r\n          </ng-container>\r\n        }\r\n      }\r\n    }\r\n  } @else {\r\n    <sd-input [autoId]=\"_autoId\" style=\"flex: 1 1 0%; min-width: 0\" type=\"text\" size=\"sm\" disabled></sd-input>\r\n  }\r\n</div>\r\n\r\n<!-- ================================================ -->\r\n<!-- Split from/to templates (\u0111\u01B0a xu\u1ED1ng cu\u1ED1i file)    -->\r\n<!-- ================================================ -->\r\n<ng-template #splitNumberTpl let-field=\"field\" let-disabled=\"disabled\">\r\n  <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n    <sd-input-number\r\n      [autoId]=\"_autoId + '-from'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      size=\"sm\"\r\n      [label]=\"_label\"\r\n      [(model)]=\"_columnFilter[field].from\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      (sdBlur)=\"onFilterCommit()\"\r\n      [disabled]=\"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'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      size=\"sm\"\r\n      [(model)]=\"_columnFilter[field].to\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      (sdBlur)=\"onFilterCommit()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-input-number>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #splitDateTpl let-field=\"field\" let-disabled=\"disabled\">\r\n  <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n    <sd-date\r\n      [autoId]=\"_autoId + '-from'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      type=\"date\"\r\n      size=\"sm\"\r\n      [label]=\"_label\"\r\n      [(model)]=\"_columnFilter[field].from\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-date>\r\n    <div class=\"mx-4\">-</div>\r\n    <sd-date\r\n      [autoId]=\"_autoId + '-to'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      type=\"date\"\r\n      size=\"sm\"\r\n      [(model)]=\"_columnFilter[field].to\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-date>\r\n  </div>\r\n</ng-template>\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "bare", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "appearance", "floatLabel", "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: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ColumnFilterComponent, isStandalone: true, selector: "column-filter", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, columnFilter: { classPropertyName: "columnFilter", publicName: "columnFilter", isSignal: true, isRequired: false, transformFunction: null }, cacheValues: { classPropertyName: "cacheValues", publicName: "cacheValues", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, operator: { classPropertyName: "operator", publicName: "operator", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { operator: "operatorChange", filterChange: "filterChange", filterCommit: "filterCommit" }, ngImport: i0, template: "@let _column = column();\r\n@let _columnFilter = columnFilter();\r\n@let _autoId = autoId();\r\n@let _templateRef = templateRef();\r\n@let _operators = operators();\r\n@let _items = items();\r\n@let _label = label();\r\n@let _context = { columnFilter: _columnFilter, autoId: _autoId };\r\n\r\n<div class=\"d-flex c-inline-column align-items-end\" style=\"width: 100%; max-width: 100%\">\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    <!-- Operator filter -->\r\n    @if (_operators.length) {\r\n      <div class=\"d-flex align-items-center\" [ngClass]=\"operatorWrapperClass()\">\r\n        <sd-operator [(model)]=\"operator\" [operators]=\"operatorValues()\" />\r\n      </div>\r\n    }\r\n\r\n    <!-- N\u1EBFu filter nh\u1EADn v\u00E0o template -->\r\n    @if (_templateRef) {\r\n      <ng-container *ngTemplateOutlet=\"_templateRef; context: _context\"></ng-container>\r\n    }\r\n    <!-- M\u1EB7c \u0111\u1ECBnh theo type v\u00E0 gi\u00E1 tr\u1ECB values defined c\u1EE7a column -->\r\n    @else {\r\n      @if (_column.type === 'string') {\r\n        <sd-input\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          size=\"sm\"\r\n          type=\"text\"\r\n          [label]=\"_label\"\r\n          [(model)]=\"_columnFilter[_column.field]\"\r\n          (keyupEnter)=\"onFilterChange()\"\r\n          (sdBlur)=\"onFilterCommit()\"\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\"\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            size=\"sm\"\r\n            [label]=\"_label\"\r\n            [(model)]=\"_columnFilter[_column.field]\"\r\n            (keyupEnter)=\"onFilterChange()\"\r\n            (sdBlur)=\"onFilterCommit()\"\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          <ng-container\r\n            *ngTemplateOutlet=\"splitNumberTpl; context: { field: _column.field, disabled: _column.filter?.disabled }\">\r\n          </ng-container>\r\n        }\r\n      } @else if (_column.type === 'boolean') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [label]=\"_label\"\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 sdItemDef let-item=\"item\">\r\n            @if (item.value === '1') {\r\n              <sd-badge color=\"success\" [title]=\"_column.option?.displayOnTrue || 'True'\"> </sd-badge>\r\n            } @else {\r\n              <sd-badge color=\"error\" [title]=\"_column.option?.displayOnFalse || 'False'\"> </sd-badge>\r\n            }\r\n          </ng-template>\r\n        </sd-select>\r\n      } @else if (_column.type === 'values') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [label]=\"_label\"\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'\"\r\n          hideInlineError>\r\n        </sd-select>\r\n      } @else if (_column.type === 'lazy-values') {\r\n        <sd-select\r\n          minWidthPanel=\"200px\"\r\n          [autoId]=\"_autoId\"\r\n          style=\"flex: 1 1 0%; min-width: 0\"\r\n          [style.width]=\"'100%'\"\r\n          size=\"sm\"\r\n          [label]=\"_label\"\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'\"\r\n          hideInlineError>\r\n        </sd-select>\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 1 0%; min-width: 0\"\r\n            size=\"sm\"\r\n            [label]=\"_label\"\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\"\r\n            style=\"flex: 1 1 0%; min-width: 0\"\r\n            type=\"date\"\r\n            size=\"sm\"\r\n            [label]=\"_label\"\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          <ng-container\r\n            *ngTemplateOutlet=\"splitDateTpl; context: { field: _column.field, disabled: _column.filter?.disabled }\">\r\n          </ng-container>\r\n        }\r\n      }\r\n    }\r\n  } @else {\r\n    <sd-input [autoId]=\"_autoId\" style=\"flex: 1 1 0%; min-width: 0\" type=\"text\" size=\"sm\" disabled></sd-input>\r\n  }\r\n</div>\r\n\r\n<!-- ================================================ -->\r\n<!-- Split from/to templates (\u0111\u01B0a xu\u1ED1ng cu\u1ED1i file)    -->\r\n<!-- ================================================ -->\r\n<ng-template #splitNumberTpl let-field=\"field\" let-disabled=\"disabled\">\r\n  <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n    <sd-input-number\r\n      [autoId]=\"_autoId + '-from'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      size=\"sm\"\r\n      [label]=\"_label\"\r\n      [(model)]=\"_columnFilter[field].from\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      (sdBlur)=\"onFilterCommit()\"\r\n      [disabled]=\"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'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      size=\"sm\"\r\n      [(model)]=\"_columnFilter[field].to\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      (sdBlur)=\"onFilterCommit()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-input-number>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #splitDateTpl let-field=\"field\" let-disabled=\"disabled\">\r\n  <div class=\"d-flex align-items-center\" style=\"flex: 1 1 0%; min-width: 0\">\r\n    <sd-date\r\n      [autoId]=\"_autoId + '-from'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      type=\"date\"\r\n      size=\"sm\"\r\n      [label]=\"_label\"\r\n      [(model)]=\"_columnFilter[field].from\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-date>\r\n    <div class=\"mx-4\">-</div>\r\n    <sd-date\r\n      [autoId]=\"_autoId + '-to'\"\r\n      style=\"flex: 1 1 0%; min-width: 0\"\r\n      type=\"date\"\r\n      size=\"sm\"\r\n      [(model)]=\"_columnFilter[field].to\"\r\n      (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"disabled\"\r\n      hideInlineError>\r\n    </sd-date>\r\n  </div>\r\n</ng-template>\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SdOperator, selector: "sd-operator", inputs: ["model", "operators", "disabled", "autoId"], outputs: ["modelChange"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "bare", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "bare", "viewed", "appearance", "floatLabel", "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: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ColumnFilterComponent, decorators: [{
             type: Component,
@@ -534,7 +534,7 @@ class ExternalFilterComponent {
         });
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ExternalFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ExternalFilterComponent, isStandalone: true, selector: "external-filter", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, externalFilters: { classPropertyName: "externalFilters", publicName: "externalFilters", isSignal: true, isRequired: false, transformFunction: null }, filterRegister: { classPropertyName: "filterRegister", publicName: "filterRegister", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let _filter = filter();\n@let _autoId = autoId();\n@let _items = filterItems();\n@let _externalFilter = externalFilter();\n@let _inlineExternal = inlineExternal();\n@let _filtered = filtered();\n@let _col = col();\n\n@if (!_filter?.disabled) {\n  @if (!isMobileOrTablet && _items.length) {\n    <sd-section\n      [hideHeader]=\"_filter?.hideExternalFilterToolbar\"\n      icon=\"filter_alt\"\n      iconColor=\"secondary\"\n      [title]=\"'core.component.table.filter' | translate\"\n      collapsable>\n      <div class=\"d-flex mr-4\" sdHeaderRight>\n        <sd-button\n          [autoId]=\"_autoId + 'clear'\"\n          [disabled]=\"!_filtered\"\n          type=\"link\"\n          prefixIcon=\"cleaning_services\"\n          [tooltip]=\"'core.component.table.clear-selection' | translate\"\n          (click)=\"$event.stopPropagation(); clearFilter($event)\"></sd-button>\n        <sd-button\n          [autoId]=\"_autoId + 'setting'\"\n          type=\"link\"\n          prefixIcon=\"settings\"\n          [tooltip]=\"'core.component.table.customize' | translate\"\n          [matMenuTriggerFor]=\"menu\"\n          (click)=\"$event.stopPropagation()\"></sd-button>\n        <mat-menu #menu=\"matMenu\" class=\"sd-custom-panel-filter-configuration\" [attr.data-autoid]=\"_autoId + 'setting-menu'\">\n          @for (externalFilter of _items; track externalFilter.field) {\n            <button\n              [attr.data-autoid]=\"_autoId + 'setting-' + externalFilter.field\"\n              mat-menu-item\n              (click)=\"onCheckboxChange($event, externalFilter)\"\n              [disabled]=\"externalFilter.required\">\n              <sd-checkbox\n                [autoId]=\"_autoId + 'setting-' + externalFilter.field + '-checkbox'\"\n                [label]=\"externalFilter.title\"\n                [model]=\"_inlineExternal[externalFilter.field]\"\n                [disabled]=\"externalFilter.required\" />\n            </button>\n          }\n        </mat-menu>\n      </div>\n      <div class=\"row mx-0\" style=\"row-gap: 16px\">\n        @for (item of _items; track item.field) {\n          @if (_inlineExternal[item.field]) {\n            <div class=\"col-md-3 col-sm-6 px-8\" [class.col-lg-2]=\"_col === 2\" [class.col-lg-3]=\"_col === 3\">\n              @if (item.type === 'string') {\n                <sd-input\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  type=\"text\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (keyupEnter)=\"onKeyupEnter()\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-input>\n              } @else if (item.type === 'number') {\n                <sd-input-number\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (keyupEnter)=\"onKeyupEnter()\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-input-number>\n              } @else if (item.type === 'boolean') {\n                <sd-select\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [items]=\"[\n                    { value: true, display: item.option?.displayOnTrue || 'True' },\n                    { value: false, display: item.option?.displayOnFalse || 'False' },\n                  ]\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-select>\n              } @else if (item.type === 'date') {\n                <sd-date\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  hideInlineError>\n                </sd-date>\n              } @else if (item.type === 'datetime') {\n                <sd-datetime\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  hideInlineError>\n                </sd-datetime>\n              } @else if (item.type === 'daterange') {\n                <sd-date-range\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  appearance=\"outline\"\n                  hideInlineError>\n                </sd-date-range>\n              } @else if (item.type === 'values') {\n                @if (item.option.selection === 'MULTIPLE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else if (item.option.selection === 'AUTOCOMPLETE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else if (item.option.selection === 'MULTIPLEAUTOCOMPLETE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                }\n              } @else if (item.type === 'lazy-values') {\n                @if (item.option.selection === 'MULTIPLE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                }\n              } @else if (item.type === 'custom' && item.filterDef) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    item.filterDef;\n                    context: { form: form, externalFilter: _externalFilter, autoId: _autoId + item.field }\n                  \">\n                </ng-container>\n              }\n            </div>\n          }\n        }\n      </div>\n      @if (_filter?.manualFilter) {\n        <div class=\"d-flex justify-content-end mt-16 px-8\">\n          <sd-button\n            [autoId]=\"_autoId + 'submit'\"\n            [disabled]=\"form.invalid\"\n            type=\"fill\"\n            color=\"primary\"\n            [title]=\"'core.component.table.search' | translate\"\n            prefixIcon=\"filter_alt\"\n            (click)=\"onSubmit()\">\n          </sd-button>\n        </div>\n      }\n    </sd-section>\n  }\n}\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", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "bare", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange$1, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "component", type: SdCheckbox, selector: "sd-checkbox", inputs: ["autoId", "name", "form", "label", "color", "disabled", "inlineError", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ExternalFilterComponent, isStandalone: true, selector: "external-filter", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, externalFilters: { classPropertyName: "externalFilters", publicName: "externalFilters", isSignal: true, isRequired: false, transformFunction: null }, filterRegister: { classPropertyName: "filterRegister", publicName: "filterRegister", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let _filter = filter();\n@let _autoId = autoId();\n@let _items = filterItems();\n@let _externalFilter = externalFilter();\n@let _inlineExternal = inlineExternal();\n@let _filtered = filtered();\n@let _col = col();\n\n@if (!_filter?.disabled) {\n  @if (!isMobileOrTablet && _items.length) {\n    <sd-section\n      [hideHeader]=\"_filter?.hideExternalFilterToolbar\"\n      icon=\"filter_alt\"\n      iconColor=\"secondary\"\n      [title]=\"'core.component.table.filter' | translate\"\n      collapsable>\n      <div class=\"d-flex mr-4\" sdHeaderRight>\n        <sd-button\n          [autoId]=\"_autoId + 'clear'\"\n          [disabled]=\"!_filtered\"\n          type=\"link\"\n          prefixIcon=\"cleaning_services\"\n          [tooltip]=\"'core.component.table.clear-selection' | translate\"\n          (click)=\"$event.stopPropagation(); clearFilter($event)\"></sd-button>\n        <sd-button\n          [autoId]=\"_autoId + 'setting'\"\n          type=\"link\"\n          prefixIcon=\"settings\"\n          [tooltip]=\"'core.component.table.customize' | translate\"\n          [matMenuTriggerFor]=\"menu\"\n          (click)=\"$event.stopPropagation()\"></sd-button>\n        <mat-menu #menu=\"matMenu\" class=\"sd-custom-panel-filter-configuration\" [attr.data-autoid]=\"_autoId + 'setting-menu'\">\n          @for (externalFilter of _items; track externalFilter.field) {\n            <button\n              [attr.data-autoid]=\"_autoId + 'setting-' + externalFilter.field\"\n              mat-menu-item\n              (click)=\"onCheckboxChange($event, externalFilter)\"\n              [disabled]=\"externalFilter.required\">\n              <sd-checkbox\n                [autoId]=\"_autoId + 'setting-' + externalFilter.field + '-checkbox'\"\n                [label]=\"externalFilter.title\"\n                [model]=\"_inlineExternal[externalFilter.field]\"\n                [disabled]=\"externalFilter.required\" />\n            </button>\n          }\n        </mat-menu>\n      </div>\n      <div class=\"row mx-0\" style=\"row-gap: 16px\">\n        @for (item of _items; track item.field) {\n          @if (_inlineExternal[item.field]) {\n            <div class=\"col-md-3 col-sm-6 px-8\" [class.col-lg-2]=\"_col === 2\" [class.col-lg-3]=\"_col === 3\">\n              @if (item.type === 'string') {\n                <sd-input\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  type=\"text\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (keyupEnter)=\"onKeyupEnter()\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-input>\n              } @else if (item.type === 'number') {\n                <sd-input-number\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (keyupEnter)=\"onKeyupEnter()\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-input-number>\n              } @else if (item.type === 'boolean') {\n                <sd-select\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [items]=\"[\n                    { value: true, display: item.option?.displayOnTrue || 'True' },\n                    { value: false, display: item.option?.displayOnFalse || 'False' },\n                  ]\"\n                  valueField=\"value\"\n                  displayField=\"display\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  hideInlineError>\n                </sd-select>\n              } @else if (item.type === 'date') {\n                <sd-date\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  hideInlineError>\n                </sd-date>\n              } @else if (item.type === 'datetime') {\n                <sd-datetime\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  appearance=\"outline\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  hideInlineError>\n                </sd-datetime>\n              } @else if (item.type === 'daterange') {\n                <sd-date-range\n                  [autoId]=\"_autoId + item.field\"\n                  [label]=\"item.title\"\n                  [(model)]=\"_externalFilter[item.field]\"\n                  (sdChange)=\"onFilter(item)\"\n                  [form]=\"form\"\n                  [required]=\"item.required\"\n                  [min]=\"item.minDate\"\n                  [max]=\"item.maxDate\"\n                  appearance=\"outline\"\n                  hideInlineError>\n                </sd-date-range>\n              } @else if (item.type === 'values') {\n                @if (item.option.selection === 'MULTIPLE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else if (item.option.selection === 'AUTOCOMPLETE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else if (item.option.selection === 'MULTIPLEAUTOCOMPLETE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items | filterValues | async\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                }\n              } @else if (item.type === 'lazy-values') {\n                @if (item.option.selection === 'MULTIPLE') {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    multiple\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                } @else {\n                  <sd-select\n                    [autoId]=\"_autoId + item.field\"\n                    [label]=\"item.title\"\n                    [items]=\"item.option.items\"\n                    [valueField]=\"item.option.valueField\"\n                    [displayField]=\"item.option.displayField\"\n                    [(model)]=\"_externalFilter[item.field]\"\n                    (sdChange)=\"onFilter(item)\"\n                    appearance=\"outline\"\n                    [form]=\"form\"\n                    [required]=\"item.required\"\n                    hideInlineError>\n                  </sd-select>\n                }\n              } @else if (item.type === 'custom' && item.filterDef) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    item.filterDef;\n                    context: { form: form, externalFilter: _externalFilter, autoId: _autoId + item.field }\n                  \">\n                </ng-container>\n              }\n            </div>\n          }\n        }\n      </div>\n      @if (_filter?.manualFilter) {\n        <div class=\"d-flex justify-content-end mt-16 px-8\">\n          <sd-button\n            [autoId]=\"_autoId + 'submit'\"\n            [disabled]=\"form.invalid\"\n            type=\"fill\"\n            color=\"primary\"\n            [title]=\"'core.component.table.search' | translate\"\n            prefixIcon=\"filter_alt\"\n            (click)=\"onSubmit()\">\n          </sd-button>\n        </div>\n      }\n    </sd-section>\n  }\n}\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", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "bare", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange$1, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "bare", "viewed", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "component", type: SdCheckbox, selector: "sd-checkbox", inputs: ["autoId", "name", "form", "label", "color", "disabled", "viewed", "inlineError", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ExternalFilterComponent, decorators: [{
             type: Component,
@@ -630,7 +630,7 @@ class MobileFilterComponent {
         this.drawer().close();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MobileFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MobileFilterComponent, isStandalone: true, selector: "mobile-filter", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, externalFilters: { classPropertyName: "externalFilters", publicName: "externalFilters", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, filterDefs: { classPropertyName: "filterDefs", publicName: "filterDefs", isSignal: true, isRequired: false, transformFunction: null }, filterRegister: { classPropertyName: "filterRegister", publicName: "filterRegister", isSignal: true, isRequired: false, transformFunction: null }, cacheValues: { classPropertyName: "cacheValues", publicName: "cacheValues", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "drawer", first: true, predicate: SdSideDrawer, descendants: true, isSignal: true }], ngImport: i0, template: "@let _autoId = autoId();\n@let _externalFilters = externalFilterItems();\n@let _columns = columnItems();\n@let _filterDefs = filterDefItems();\n@let _workingColumnFilter = workingColumnFilter();\n@let _workingColumnOperator = workingColumnOperator();\n@let _workingExternalFilter = workingExternalFilter();\n@let _cacheValues = cacheValues();\n\n<sd-side-drawer\n  #drawer\n  [title]=\"'core.component.table.filter' | translate\"\n  width=\"90vw\">\n  <div class=\"mobile-filter-body\">\n    <!-- ============================ -->\n    <!-- 1. External filters (inline) -->\n    <!-- ============================ -->\n    @if (_externalFilters.length) {\n      <section class=\"mobile-filter-section\">\n        @for (item of _externalFilters; track item.field) {\n          <div class=\"mobile-filter-row\">\n            @if (item.type === 'string') {\n              <sd-input\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                type=\"text\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-input>\n            } @else if (item.type === 'number') {\n              <sd-input-number\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-input-number>\n            } @else if (item.type === 'boolean') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"[\n                  { value: true, display: item.option?.displayOnTrue || 'True' },\n                  { value: false, display: item.option?.displayOnFalse || 'False' },\n                ]\"\n                valueField=\"value\"\n                displayField=\"display\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'date') {\n              <sd-date\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                hideInlineError>\n              </sd-date>\n            } @else if (item.type === 'datetime') {\n              <sd-datetime\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                hideInlineError>\n              </sd-datetime>\n            } @else if (item.type === 'daterange') {\n              <sd-date-range\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                appearance=\"outline\"\n                hideInlineError>\n              </sd-date-range>\n            } @else if (item.type === 'values') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"item.option.items | filterValues | async\"\n                [valueField]=\"item.option.valueField\"\n                [displayField]=\"item.option.displayField\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [multiple]=\"item.option.selection === 'MULTIPLE' || item.option.selection === 'MULTIPLEAUTOCOMPLETE'\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'lazy-values') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"item.option.items\"\n                [valueField]=\"item.option.valueField\"\n                [displayField]=\"item.option.displayField\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [multiple]=\"item.option.selection === 'MULTIPLE'\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'custom' && item.filterDef) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  item.filterDef;\n                  context: { externalFilter: _workingExternalFilter, autoId: _autoId + 'ext-' + item.field }\n                \">\n              </ng-container>\n            }\n          </div>\n        }\n      </section>\n    }\n\n    <!-- ============================ -->\n    <!-- 2. Custom filterDef templates -->\n    <!-- ============================ -->\n    @if (_filterDefs.length) {\n      <section class=\"mobile-filter-section\">\n        @for (def of _filterDefs; track def.sdTableFilterDef()) {\n          <div class=\"mobile-filter-row\" [attr.data-autoid]=\"_autoId + 'def-' + def.sdTableFilterDef()\">\n            <ng-container\n              *ngTemplateOutlet=\"def.templateRef!; context: { externalFilter: _workingExternalFilter }\">\n            </ng-container>\n          </div>\n        }\n      </section>\n    }\n\n    <!-- ============================ -->\n    <!-- 3. Column filters             -->\n    <!-- ============================ -->\n    @if (_columns.length) {\n      <section class=\"mobile-filter-section\">\n        @for (column of _columns; track column.field) {\n          <div class=\"mobile-filter-row\" [attr.data-autoid]=\"_autoId + 'col-' + column.field\">\n            <column-filter\n              [autoId]=\"_autoId + 'col'\"\n              [column]=\"column\"\n              [columnFilter]=\"_workingColumnFilter\"\n              [operator]=\"$any(_workingColumnOperator[column.field])\"\n              (operatorChange)=\"_workingColumnOperator[column.field] = $event!\"\n              [cacheValues]=\"_cacheValues\"\n              isMobile>\n            </column-filter>\n          </div>\n        }\n      </section>\n    }\n  </div>\n\n  <ng-container sdFooter>\n    <div class=\"mobile-filter-footer\">\n      <sd-button\n        [autoId]=\"_autoId + 'cancel'\"\n        class=\"mobile-filter-action\"\n        (click)=\"onCancel()\"\n        [title]=\"'core.confirm.no' | translate\"\n        type=\"link\"\n        color=\"secondary\">\n      </sd-button>\n      <sd-button\n        [autoId]=\"_autoId + 'apply'\"\n        class=\"mobile-filter-action\"\n        (click)=\"onApply()\"\n        [title]=\"'core.confirm.yes' | translate\"\n        type=\"fill\"\n        color=\"primary\">\n      </sd-button>\n    </div>\n  </ng-container>\n</sd-side-drawer>\n", styles: [".mobile-filter-body{display:flex;flex-direction:column;gap:16px;padding:8px 0}.mobile-filter-section{display:flex;flex-direction:column;gap:12px}.mobile-filter-row{display:flex;flex-direction:column}.mobile-filter-footer{display:flex;gap:8px;width:100%}.mobile-filter-action{flex:1 1 50%}.mobile-filter-action ::ng-deep button{width:100%}\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: "component", type: SdSideDrawer, selector: "sd-side-drawer", inputs: ["title", "width", "hideClose", "disableBackdropClose", "drawerClass", "autoId"], outputs: ["sdClosed"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: ColumnFilterComponent, selector: "column-filter", inputs: ["autoId", "column", "columnFilter", "cacheValues", "value", "operator", "isMobile"], outputs: ["operatorChange", "filterChange", "filterCommit"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "bare", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange$1, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MobileFilterComponent, isStandalone: true, selector: "mobile-filter", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, externalFilters: { classPropertyName: "externalFilters", publicName: "externalFilters", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, filterDefs: { classPropertyName: "filterDefs", publicName: "filterDefs", isSignal: true, isRequired: false, transformFunction: null }, filterRegister: { classPropertyName: "filterRegister", publicName: "filterRegister", isSignal: true, isRequired: false, transformFunction: null }, cacheValues: { classPropertyName: "cacheValues", publicName: "cacheValues", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "drawer", first: true, predicate: SdSideDrawer, descendants: true, isSignal: true }], ngImport: i0, template: "@let _autoId = autoId();\n@let _externalFilters = externalFilterItems();\n@let _columns = columnItems();\n@let _filterDefs = filterDefItems();\n@let _workingColumnFilter = workingColumnFilter();\n@let _workingColumnOperator = workingColumnOperator();\n@let _workingExternalFilter = workingExternalFilter();\n@let _cacheValues = cacheValues();\n\n<sd-side-drawer\n  #drawer\n  [title]=\"'core.component.table.filter' | translate\"\n  width=\"90vw\">\n  <div class=\"mobile-filter-body\">\n    <!-- ============================ -->\n    <!-- 1. External filters (inline) -->\n    <!-- ============================ -->\n    @if (_externalFilters.length) {\n      <section class=\"mobile-filter-section\">\n        @for (item of _externalFilters; track item.field) {\n          <div class=\"mobile-filter-row\">\n            @if (item.type === 'string') {\n              <sd-input\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                type=\"text\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-input>\n            } @else if (item.type === 'number') {\n              <sd-input-number\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-input-number>\n            } @else if (item.type === 'boolean') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"[\n                  { value: true, display: item.option?.displayOnTrue || 'True' },\n                  { value: false, display: item.option?.displayOnFalse || 'False' },\n                ]\"\n                valueField=\"value\"\n                displayField=\"display\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'date') {\n              <sd-date\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                hideInlineError>\n              </sd-date>\n            } @else if (item.type === 'datetime') {\n              <sd-datetime\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                hideInlineError>\n              </sd-datetime>\n            } @else if (item.type === 'daterange') {\n              <sd-date-range\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                [required]=\"item.required\"\n                [min]=\"item.minDate\"\n                [max]=\"item.maxDate\"\n                appearance=\"outline\"\n                hideInlineError>\n              </sd-date-range>\n            } @else if (item.type === 'values') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"item.option.items | filterValues | async\"\n                [valueField]=\"item.option.valueField\"\n                [displayField]=\"item.option.displayField\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [multiple]=\"item.option.selection === 'MULTIPLE' || item.option.selection === 'MULTIPLEAUTOCOMPLETE'\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'lazy-values') {\n              <sd-select\n                [autoId]=\"_autoId + 'ext-' + item.field\"\n                size=\"sm\"\n                [label]=\"item.title\"\n                [items]=\"item.option.items\"\n                [valueField]=\"item.option.valueField\"\n                [displayField]=\"item.option.displayField\"\n                [(model)]=\"_workingExternalFilter[item.field]\"\n                appearance=\"outline\"\n                [multiple]=\"item.option.selection === 'MULTIPLE'\"\n                [required]=\"item.required\"\n                hideInlineError>\n              </sd-select>\n            } @else if (item.type === 'custom' && item.filterDef) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  item.filterDef;\n                  context: { externalFilter: _workingExternalFilter, autoId: _autoId + 'ext-' + item.field }\n                \">\n              </ng-container>\n            }\n          </div>\n        }\n      </section>\n    }\n\n    <!-- ============================ -->\n    <!-- 2. Custom filterDef templates -->\n    <!-- ============================ -->\n    @if (_filterDefs.length) {\n      <section class=\"mobile-filter-section\">\n        @for (def of _filterDefs; track def.sdTableFilterDef()) {\n          <div class=\"mobile-filter-row\" [attr.data-autoid]=\"_autoId + 'def-' + def.sdTableFilterDef()\">\n            <ng-container\n              *ngTemplateOutlet=\"def.templateRef!; context: { externalFilter: _workingExternalFilter }\">\n            </ng-container>\n          </div>\n        }\n      </section>\n    }\n\n    <!-- ============================ -->\n    <!-- 3. Column filters             -->\n    <!-- ============================ -->\n    @if (_columns.length) {\n      <section class=\"mobile-filter-section\">\n        @for (column of _columns; track column.field) {\n          <div class=\"mobile-filter-row\" [attr.data-autoid]=\"_autoId + 'col-' + column.field\">\n            <column-filter\n              [autoId]=\"_autoId + 'col'\"\n              [column]=\"column\"\n              [columnFilter]=\"_workingColumnFilter\"\n              [operator]=\"$any(_workingColumnOperator[column.field])\"\n              (operatorChange)=\"_workingColumnOperator[column.field] = $event!\"\n              [cacheValues]=\"_cacheValues\"\n              isMobile>\n            </column-filter>\n          </div>\n        }\n      </section>\n    }\n  </div>\n\n  <ng-container sdFooter>\n    <div class=\"mobile-filter-footer\">\n      <sd-button\n        [autoId]=\"_autoId + 'cancel'\"\n        class=\"mobile-filter-action\"\n        (click)=\"onCancel()\"\n        [title]=\"'core.confirm.no' | translate\"\n        type=\"link\"\n        color=\"secondary\">\n      </sd-button>\n      <sd-button\n        [autoId]=\"_autoId + 'apply'\"\n        class=\"mobile-filter-action\"\n        (click)=\"onApply()\"\n        [title]=\"'core.confirm.yes' | translate\"\n        type=\"fill\"\n        color=\"primary\">\n      </sd-button>\n    </div>\n  </ng-container>\n</sd-side-drawer>\n", styles: [".mobile-filter-body{display:flex;flex-direction:column;gap:16px;padding:8px 0}.mobile-filter-section{display:flex;flex-direction:column;gap:12px}.mobile-filter-row{display:flex;flex-direction:column}.mobile-filter-footer{display:flex;gap:8px;width:100%}.mobile-filter-action{flex:1 1 50%}.mobile-filter-action ::ng-deep button{width:100%}\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: "component", type: SdSideDrawer, selector: "sd-side-drawer", inputs: ["title", "width", "hideClose", "disableBackdropClose", "drawerClass", "autoId"], outputs: ["sdClosed"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: ColumnFilterComponent, selector: "column-filter", inputs: ["autoId", "column", "columnFilter", "cacheValues", "value", "operator", "isMobile"], outputs: ["operatorChange", "filterChange", "filterCommit"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "type", "precision", "format", "min", "max", "validator", "inlineError", "hyperlink", "appearance", "floatLabel", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "cacheChecksum", "limit", "hyperlink", "minWidthPanel", "hideInlineError", "required", "disabled", "viewed", "multiple", "bare", "validator", "inlineError", "appearance", "floatLabel", "items", "model"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "required", "disabled", "viewed", "showSeconds", "bare", "inlineError", "hyperlink", "appearance", "floatLabel", "min", "minDate", "max", "maxDate", "model"], outputs: ["modelChange", "sdChange", "sdFocus"] }, { kind: "component", type: SdDateRange$1, selector: "sd-date-range", inputs: ["autoId", "name", "size", "form", "label", "helperText", "hideInlineError", "required", "disabled", "bare", "viewed", "appearance", "floatLabel", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MobileFilterComponent, decorators: [{
             type: Component,
@@ -1061,7 +1061,7 @@ class ConfigComponent {
         this.dragDisabled = true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ConfigComponent, isStandalone: true, selector: "config", inputs: { tableOption: { classPropertyName: "tableOption", publicName: "tableOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changes: "changes" }, providers: [ConfigService], viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true, isSignal: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "@let _configuration = configuration();\n\n<sd-modal width=\"sm\" [title]=\"'core.component.table.setup' | translate\" #modal>\n  @if (_configuration) {\n    <div class=\"c-container\">\n      <div class=\"c-table\" style=\"max-height: 70vh\">\n        <table\n          mat-table\n          [dataSource]=\"_configuration.columns!\"\n          cdkDropList\n          [cdkDropListData]=\"_configuration.columns\"\n          (cdkDropListDropped)=\"dropTable($event)\">\n          <ng-container matColumnDef=\"invisible\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 96px\">\n              {{ 'core.component.form-builder.display' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <div class=\"d-flex\" style=\"gap: 8px\">\n                <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#5f6368\">\n                    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                    <path\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\" />\n                  </svg>\n                </div>\n                <sd-switch [model]=\"!item.invisible\" (modelChange)=\"item.invisible = !item.invisible\" />\n              </div>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"title\">\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef>\n              {{ 'core.component.table.column-header' | translate }}\n            </th>\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-input class=\"pb-4\" [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" hideInlineError></sd-input>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"width\">\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef style=\"width: 80px\">\n              {{ 'core.component.table.width' | translate }}\n            </th>\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-input class=\"pb-4\" [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" hideInlineError></sd-input>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"fixed\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 80px\">\n              {{ 'core.component.table.fixed' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-switch [(model)]=\"item.fixed\" />\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"truncate\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 100px\">\n              {{ 'core.component.table.char-limit' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-switch [(model)]=\"item.truncate\" />\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"['invisible', 'title', 'width', 'fixed', 'truncate']; sticky: true\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: ['invisible', 'title', 'width', 'fixed', 'truncate']\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            cdkDragLockAxis=\"y\"\n            [cdkDragDisabled]=\"dragDisabled\">\n          </tr>\n        </table>\n      </div>\n    </div>\n  }\n  <ng-container sdFooter>\n    <sd-button class=\"mr-8\" (click)=\"close()\" [title]=\"'core.component.table.skip' | translate\" color=\"secondary\"> </sd-button>\n    <sd-button class=\"mr-8\" (click)=\"onReset()\" [title]=\"'core.component.form-builder.default' | translate\" color=\"primary\"> </sd-button>\n    <sd-button (click)=\"onSave()\" [title]=\"'core.component.table.apply' | translate\" type=\"fill\" color=\"primary\"> </sd-button>\n  </ng-container>\n</sd-modal>\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: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: CdkTableModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i11.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: i11.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", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["autoId", "title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "component", type: SdSwitch, selector: "sd-switch", inputs: ["autoId", "name", "form", "label", "color", "disabled", "hideInlineError", "required", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ConfigComponent, isStandalone: true, selector: "config", inputs: { tableOption: { classPropertyName: "tableOption", publicName: "tableOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changes: "changes" }, providers: [ConfigService], viewQueries: [{ propertyName: "modal", first: true, predicate: SdModal, descendants: true, isSignal: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "@let _configuration = configuration();\r\n\r\n<sd-modal width=\"sm\" [title]=\"'core.component.table.setup' | translate\" #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          mat-table\r\n          [dataSource]=\"_configuration.columns!\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"_configuration.columns\"\r\n          (cdkDropListDropped)=\"dropTable($event)\">\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              {{ 'core.component.form-builder.display' | translate }}\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              {{ 'core.component.table.column-header' | translate }}\r\n            </th>\r\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input class=\"pb-4\" [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              {{ 'core.component.table.width' | translate }}\r\n            </th>\r\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input class=\"pb-4\" [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              {{ 'core.component.table.fixed' | translate }}\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\r\n          <ng-container matColumnDef=\"truncate\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 100px\">\r\n              {{ 'core.component.table.char-limit' | translate }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-switch [(model)]=\"item.truncate\" />\r\n            </td>\r\n          </ng-container>\r\n\r\n          <tr mat-header-row *matHeaderRowDef=\"['invisible', 'title', 'width', 'fixed', 'truncate']; sticky: true\"></tr>\r\n          <tr\r\n            mat-row\r\n            *matRowDef=\"let row; columns: ['invisible', 'title', 'width', 'fixed', 'truncate']\"\r\n            cdkDrag\r\n            [cdkDragData]=\"row\"\r\n            cdkDragLockAxis=\"y\"\r\n            [cdkDragDisabled]=\"dragDisabled\">\r\n          </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]=\"'core.component.table.skip' | translate\" color=\"secondary\"> </sd-button>\r\n    <sd-button class=\"mr-8\" (click)=\"onReset()\" [title]=\"'core.component.form-builder.default' | translate\" color=\"primary\"> </sd-button>\r\n    <sd-button (click)=\"onSave()\" [title]=\"'core.component.table.apply' | translate\" 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: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: CdkTableModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i11.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: i11.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", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["autoId", "title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }, { kind: "component", type: SdSwitch, selector: "sd-switch", inputs: ["autoId", "name", "form", "label", "color", "disabled", "viewed", "hideInlineError", "required", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ConfigComponent, decorators: [{
             type: Component,
@@ -1077,7 +1077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdModal,
                         SdSwitch,
                         TranslatePipe,
-                    ], providers: [ConfigService], template: "@let _configuration = configuration();\n\n<sd-modal width=\"sm\" [title]=\"'core.component.table.setup' | translate\" #modal>\n  @if (_configuration) {\n    <div class=\"c-container\">\n      <div class=\"c-table\" style=\"max-height: 70vh\">\n        <table\n          mat-table\n          [dataSource]=\"_configuration.columns!\"\n          cdkDropList\n          [cdkDropListData]=\"_configuration.columns\"\n          (cdkDropListDropped)=\"dropTable($event)\">\n          <ng-container matColumnDef=\"invisible\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 96px\">\n              {{ 'core.component.form-builder.display' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <div class=\"d-flex\" style=\"gap: 8px\">\n                <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#5f6368\">\n                    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                    <path\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\" />\n                  </svg>\n                </div>\n                <sd-switch [model]=\"!item.invisible\" (modelChange)=\"item.invisible = !item.invisible\" />\n              </div>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"title\">\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef>\n              {{ 'core.component.table.column-header' | translate }}\n            </th>\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-input class=\"pb-4\" [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" hideInlineError></sd-input>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"width\">\n            <th mat-header-cell class=\"c-th px-4\" *matHeaderCellDef style=\"width: 80px\">\n              {{ 'core.component.table.width' | translate }}\n            </th>\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-input class=\"pb-4\" [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" hideInlineError></sd-input>\n            </td>\n          </ng-container>\n          <ng-container matColumnDef=\"fixed\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 80px\">\n              {{ 'core.component.table.fixed' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-switch [(model)]=\"item.fixed\" />\n            </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"truncate\">\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 100px\">\n              {{ 'core.component.table.char-limit' | translate }}\n            </th>\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\n              <sd-switch [(model)]=\"item.truncate\" />\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"['invisible', 'title', 'width', 'fixed', 'truncate']; sticky: true\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: ['invisible', 'title', 'width', 'fixed', 'truncate']\"\n            cdkDrag\n            [cdkDragData]=\"row\"\n            cdkDragLockAxis=\"y\"\n            [cdkDragDisabled]=\"dragDisabled\">\n          </tr>\n        </table>\n      </div>\n    </div>\n  }\n  <ng-container sdFooter>\n    <sd-button class=\"mr-8\" (click)=\"close()\" [title]=\"'core.component.table.skip' | translate\" color=\"secondary\"> </sd-button>\n    <sd-button class=\"mr-8\" (click)=\"onReset()\" [title]=\"'core.component.form-builder.default' | translate\" color=\"primary\"> </sd-button>\n    <sd-button (click)=\"onSave()\" [title]=\"'core.component.table.apply' | translate\" type=\"fill\" color=\"primary\"> </sd-button>\n  </ng-container>\n</sd-modal>\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"] }]
+                    ], providers: [ConfigService], template: "@let _configuration = configuration();\r\n\r\n<sd-modal width=\"sm\" [title]=\"'core.component.table.setup' | translate\" #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          mat-table\r\n          [dataSource]=\"_configuration.columns!\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"_configuration.columns\"\r\n          (cdkDropListDropped)=\"dropTable($event)\">\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              {{ 'core.component.form-builder.display' | translate }}\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              {{ 'core.component.table.column-header' | translate }}\r\n            </th>\r\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input class=\"pb-4\" [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              {{ 'core.component.table.width' | translate }}\r\n            </th>\r\n            <td class=\"px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input class=\"pb-4\" [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              {{ 'core.component.table.fixed' | translate }}\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\r\n          <ng-container matColumnDef=\"truncate\">\r\n            <th mat-header-cell class=\"c-th text-center px-4\" *matHeaderCellDef style=\"width: 100px\">\r\n              {{ 'core.component.table.char-limit' | translate }}\r\n            </th>\r\n            <td class=\"text-center px-4\" mat-cell *matCellDef=\"let item\">\r\n              <sd-switch [(model)]=\"item.truncate\" />\r\n            </td>\r\n          </ng-container>\r\n\r\n          <tr mat-header-row *matHeaderRowDef=\"['invisible', 'title', 'width', 'fixed', 'truncate']; sticky: true\"></tr>\r\n          <tr\r\n            mat-row\r\n            *matRowDef=\"let row; columns: ['invisible', 'title', 'width', 'fixed', 'truncate']\"\r\n            cdkDrag\r\n            [cdkDragData]=\"row\"\r\n            cdkDragLockAxis=\"y\"\r\n            [cdkDragDisabled]=\"dragDisabled\">\r\n          </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]=\"'core.component.table.skip' | translate\" color=\"secondary\"> </sd-button>\r\n    <sd-button class=\"mr-8\" (click)=\"onReset()\" [title]=\"'core.component.form-builder.default' | translate\" color=\"primary\"> </sd-button>\r\n    <sd-button (click)=\"onSave()\" [title]=\"'core.component.table.apply' | translate\" 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"] }]
         }], ctorParameters: () => [] });
 
 class ToStringPipe {
@@ -1666,7 +1666,7 @@ class SdPopupExport {
         return '';
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", 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.21", 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>\r\n  <div class=\"row\">\r\n    <div *ngIf=\"!files?.length\" class=\"col-12\">\r\n      <div class=\"c-empty\">\r\n        <img class=\"sd-image-data-empty\" alt=\"empty-image\" />\r\n        <div class=\"T14R\">{{ 'There are no exported templates' }}</div>\r\n      </div>\r\n    </div>\r\n    <ng-container *ngIf=\"files?.length\">\r\n      <div class=\"col-12\">\r\n        <div class=\"c-table\" style=\"max-height: 50vh\">\r\n          <table mat-table [dataSource]=\"files\">\r\n            <ng-container matColumnDef=\"stt\">\r\n              <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 50px\">#</th>\r\n              <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n                {{ idx + 1 }}\r\n              </td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"fileName\">\r\n              <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>\r\n                {{ 'File name' }}\r\n              </th>\r\n              <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n                {{ item.fileName }}\r\n              </td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"action\">\r\n              <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\"></th>\r\n              <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n                <div class=\"d-flex\">\r\n                  <button mat-icon-button aria-label=\"delete\" (click)=\"removeFile(item)\">\r\n                    <mat-icon>delete</mat-icon>\r\n                  </button>\r\n                  <button mat-icon-button aria-label=\"download\" (click)=\"onExport(item)\">\r\n                    <mat-icon>download</mat-icon>\r\n                  </button>\r\n                </div>\r\n              </td>\r\n            </ng-container>\r\n            <tr mat-header-row *matHeaderRowDef=\"['stt', 'fileName', 'action']; sticky: true\"></tr>\r\n            <tr mat-row *matRowDef=\"let row; columns: ['stt', 'fileName', 'action']\"></tr>\r\n          </table>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"files.length < 5\" class=\"col-12 mt-10\">\r\n        <sd-button class=\"mr-4\" [title]=\"'New template'\" (click)=\"enableCreating = true\" color=\"info\" [disabled]=\"enableCreating\">\r\n        </sd-button>\r\n        <sd-button *ngIf=\"exportOption?.enableUpload\" [title]=\"'Upload template'\" (click)=\"uploadTemplate()\" type=\"outline\">\r\n        </sd-button>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"enableCreating || !files?.length\">\r\n      <div class=\"col-12 mt-20\">\r\n        <div class=\"T14R\">{{ 'Select columns for creating template' }}:</div>\r\n      </div>\r\n      <div class=\"col-12\">\r\n        <mat-chip-listbox selectable=\"true\" multiple=\"true\">\r\n          <ng-container *ngFor=\"let column of columns\">\r\n            <mat-chip-option [selected]=\"selected[column.field]\" (click)=\"selected[column.field] = !selected[column.field]\">\r\n              {{ column.title }}\r\n            </mat-chip-option>\r\n          </ng-container>\r\n        </mat-chip-listbox>\r\n      </div>\r\n      <div class=\"col-12 row\">\r\n        <div class=\"col-10\">\r\n          <sd-input [form]=\"form\" [label]=\"'Template name'\" [(model)]=\"templateName\" [validator]=\"templateNameValidator\"></sd-input>\r\n        </div>\r\n        <div class=\"col-2 mt-8\">\r\n          <sd-button width=\"100%\" [title]=\"'Save'\" color=\"info\" (click)=\"createTemplate()\"> </sd-button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</sd-modal>\r\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-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: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i5$1.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", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "tooltip", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["autoId", "title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", 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>\r\n  <div class=\"row\">\r\n    <div *ngIf=\"!files?.length\" class=\"col-12\">\r\n      <div class=\"c-empty\">\r\n        <img class=\"sd-image-data-empty\" alt=\"empty-image\" />\r\n        <div class=\"T14R\">{{ 'There are no exported templates' }}</div>\r\n      </div>\r\n    </div>\r\n    <ng-container *ngIf=\"files?.length\">\r\n      <div class=\"col-12\">\r\n        <div class=\"c-table\" style=\"max-height: 50vh\">\r\n          <table mat-table [dataSource]=\"files\">\r\n            <ng-container matColumnDef=\"stt\">\r\n              <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 50px\">#</th>\r\n              <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n                {{ idx + 1 }}\r\n              </td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"fileName\">\r\n              <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>\r\n                {{ 'File name' }}\r\n              </th>\r\n              <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n                {{ item.fileName }}\r\n              </td>\r\n            </ng-container>\r\n            <ng-container matColumnDef=\"action\">\r\n              <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\"></th>\r\n              <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n                <div class=\"d-flex\">\r\n                  <button mat-icon-button aria-label=\"delete\" (click)=\"removeFile(item)\">\r\n                    <mat-icon>delete</mat-icon>\r\n                  </button>\r\n                  <button mat-icon-button aria-label=\"download\" (click)=\"onExport(item)\">\r\n                    <mat-icon>download</mat-icon>\r\n                  </button>\r\n                </div>\r\n              </td>\r\n            </ng-container>\r\n            <tr mat-header-row *matHeaderRowDef=\"['stt', 'fileName', 'action']; sticky: true\"></tr>\r\n            <tr mat-row *matRowDef=\"let row; columns: ['stt', 'fileName', 'action']\"></tr>\r\n          </table>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"files.length < 5\" class=\"col-12 mt-10\">\r\n        <sd-button class=\"mr-4\" [title]=\"'New template'\" (click)=\"enableCreating = true\" color=\"info\" [disabled]=\"enableCreating\">\r\n        </sd-button>\r\n        <sd-button *ngIf=\"exportOption?.enableUpload\" [title]=\"'Upload template'\" (click)=\"uploadTemplate()\" type=\"outline\">\r\n        </sd-button>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"enableCreating || !files?.length\">\r\n      <div class=\"col-12 mt-20\">\r\n        <div class=\"T14R\">{{ 'Select columns for creating template' }}:</div>\r\n      </div>\r\n      <div class=\"col-12\">\r\n        <mat-chip-listbox selectable=\"true\" multiple=\"true\">\r\n          <ng-container *ngFor=\"let column of columns\">\r\n            <mat-chip-option [selected]=\"selected[column.field]\" (click)=\"selected[column.field] = !selected[column.field]\">\r\n              {{ column.title }}\r\n            </mat-chip-option>\r\n          </ng-container>\r\n        </mat-chip-listbox>\r\n      </div>\r\n      <div class=\"col-12 row\">\r\n        <div class=\"col-10\">\r\n          <sd-input [form]=\"form\" [label]=\"'Template name'\" [(model)]=\"templateName\" [validator]=\"templateNameValidator\"></sd-input>\r\n        </div>\r\n        <div class=\"col-2 mt-8\">\r\n          <sd-button width=\"100%\" [title]=\"'Save'\" color=\"info\" (click)=\"createTemplate()\"> </sd-button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</sd-modal>\r\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-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: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i5$1.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", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "sdFocusForceBlur"] }, { kind: "component", type: SdModal, selector: "sd-modal", inputs: ["autoId", "title", "color", "width", "height", "view", "modalClass", "lazyLoadContent", "hideClose", "disableBackdropClose"], outputs: ["sdClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdPopupExport, decorators: [{
             type: Component,