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

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

@@ -422,7 +422,7 @@ class ExternalFilterComponent {
         });
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ExternalFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ExternalFilterComponent, isStandalone: true, selector: "external-filter", inputs: { _autoId: ["autoId", "_autoId"], _filter: ["filter", "_filter"], _externalFilters: ["externalFilters", "_externalFilters"], _filterRegister: ["filterRegister", "_filterRegister"] }, ngImport: i0, template: "@if (!filter?.disabled) {\r\n  @if (!isMobileOrTablet && externalFilters.length) {\r\n    <sd-section [hideHeader]=\"filter?.hideExternalFilterToolbar\" icon=\"filter_alt\" iconColor=\"secondary\" title=\"B\u1ED9 l\u1ECDc\" collapsable>\r\n      <div class=\"d-flex mr-4\" sdHeaderRight>\r\n        <sd-button\r\n          [autoId]=\"autoId + 'clearFilter'\"\r\n          [disabled]=\"!filtered\"\r\n          type=\"link\"\r\n          prefixIcon=\"cleaning_services\"\r\n          tooltip=\"X\u00F3a l\u1EF1a ch\u1ECDn\"\r\n          (click)=\"$event.stopPropagation(); clearFilter($event)\"></sd-button>\r\n        <sd-button\r\n          [autoId]=\"autoId + 'setting'\"\r\n          type=\"link\"\r\n          prefixIcon=\"settings\"\r\n          tooltip=\"T\u00F9y ch\u1EC9nh\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"></sd-button>\r\n        <mat-menu #menu=\"matMenu\" class=\"sd-custom-panel-filter-configuration\">\r\n          @for (externalFilter of externalFilters; track externalFilter.field) {\r\n            <button mat-menu-item (click)=\"onCheckboxChange($event, externalFilter)\" [disabled]=\"externalFilter.required\">\r\n              <sd-checkbox\r\n                [label]=\"externalFilter.title\"\r\n                [model]=\"inlineExternal[externalFilter.field]\"\r\n                [disabled]=\"externalFilter.required\" />\r\n            </button>\r\n          }\r\n        </mat-menu>\r\n      </div>\r\n      <div class=\"row mx-0\" style=\"row-gap: 16px\">\r\n        @for (item of externalFilters; track item.field) {\r\n          @if (inlineExternal[item.field]) {\r\n            <div class=\"col-md-3 col-sm-6 px-8\" [class.col-lg-2]=\"col === 2\" [class.col-lg-3]=\"col === 3\">\r\n              @if (item.type === 'string') {\r\n                <sd-input\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  type=\"text\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (keyupEnter)=\"onKeyupEnter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-input>\r\n              } @else if (item.type === 'number') {\r\n                <sd-input-number\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (keyupEnter)=\"onKeyupEnter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-input-number>\r\n              } @else if (item.type === 'boolean') {\r\n                <sd-select\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [items]=\"[\r\n                    { value: true, display: item.option?.displayOnTrue || 'True' },\r\n                    { value: false, display: item.option?.displayOnFalse || 'False' }\r\n                  ]\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-select>\r\n              } @else if (item.type === 'date') {\r\n                <sd-date\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  hideInlineError>\r\n                </sd-date>\r\n              } @else if (item.type === 'datetime') {\r\n                <sd-datetime\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  hideInlineError>\r\n                </sd-datetime>\r\n              } @else if (item.type === 'daterange') {\r\n                <sd-date-range\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter()\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  appearance=\"outline\"\r\n                  hideInlineError>\r\n                </sd-date-range>\r\n              } @else if (item.type === 'values') {\r\n                @if (item.option.selection === 'MULTIPLE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (item.option.selection === 'AUTOCOMPLETE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (item.option.selection === 'MULTIPLEAUTOCOMPLETE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                }\r\n              } @else if (item.type === 'lazy-values') {\r\n                @if (item.option.selection === 'MULTIPLE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                }\r\n              } @else if (item.type === 'custom' && item.filterDef) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    item.filterDef;\r\n                    context: { form: form, externalFilter: externalFilter, autoId: autoId + item.field }\r\n                  \"></ng-container>\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n      @if (filter?.manualFilter) {\r\n        <div class=\"d-flex justify-content-end mt-16 px-8\">\r\n          <sd-button\r\n            [autoId]=\"autoId + 'onSubmit'\"\r\n            [disabled]=\"form.invalid\"\r\n            type=\"fill\"\r\n            color=\"primary\"\r\n            title=\"T\u00ECm ki\u1EBFm\"\r\n            prefixIcon=\"filter_alt\"\r\n            (click)=\"onSubmit()\">\r\n          </sd-button>\r\n        </div>\r\n      }\r\n    </sd-section>\r\n  }\r\n  <!-- <sd-popup-filter [filterRegister]=\"filterRegister!\" [columns]=\"columns\" [externalFilters]=\"externalFilters\">\r\n  </sd-popup-filter> -->\r\n}\r\n", styles: [":host{display:block;padding-left:0;padding-right:0}::ng-deep .sd-custom-panel-filter-configuration{width:240px;max-height:550px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "viewed", "hyperlink", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "model", "required", "type", "precision", "readonly", "min", "max", "validator", "inlineError", "disabled", "viewed", "hyperlink", "appearance"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "appearance", "hideInlineError", "size", "form", "label", "helperText", "placeholder", "model", "items", "valueField", "displayField", "disabledField", "cacheChecksum", "required", "validator", "inlineError", "disabled", "viewed", "hyperlink", "multiple", "limit"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "appearance", "hideInlineError", "min", "max", "size", "form", "disabled", "viewed", "hyperlink", "required", "inlineError", "label", "helperText", "placeholder", "minDate", "maxDate", "model"], outputs: ["sdChange", "sdFocus", "modelChange"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "appearance", "hideInlineError", "min", "max", "size", "form", "disabled", "required", "inlineError", "label", "helperText", "placeholder", "minDate", "maxDate", "model"], outputs: ["sdChange", "sdFocus", "modelChange"] }, { kind: "component", type: SdDateRange$1, selector: "sd-date-range", inputs: ["autoId", "name", "appearance", "size", "form", "disabled", "required", "label", "helperText", "hideInlineError", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "component", type: SdCheckbox, selector: "sd-checkbox", inputs: ["autoId", "name", "form", "label", "color", "disabled", "model", "inlineError"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ExternalFilterComponent, isStandalone: true, selector: "external-filter", inputs: { _autoId: ["autoId", "_autoId"], _filter: ["filter", "_filter"], _externalFilters: ["externalFilters", "_externalFilters"], _filterRegister: ["filterRegister", "_filterRegister"] }, ngImport: i0, template: "@if (!filter?.disabled) {\r\n  @if (!isMobileOrTablet && externalFilters.length) {\r\n    <sd-section [hideHeader]=\"filter?.hideExternalFilterToolbar\" icon=\"filter_alt\" iconColor=\"secondary\" title=\"B\u1ED9 l\u1ECDc\" collapsable>\r\n      <div class=\"d-flex mr-4\" sdHeaderRight>\r\n        <sd-button\r\n          [autoId]=\"autoId + 'clearFilter'\"\r\n          [disabled]=\"!filtered\"\r\n          type=\"link\"\r\n          prefixIcon=\"cleaning_services\"\r\n          tooltip=\"X\u00F3a l\u1EF1a ch\u1ECDn\"\r\n          (click)=\"$event.stopPropagation(); clearFilter($event)\"></sd-button>\r\n        <sd-button\r\n          [autoId]=\"autoId + 'setting'\"\r\n          type=\"link\"\r\n          prefixIcon=\"settings\"\r\n          tooltip=\"T\u00F9y ch\u1EC9nh\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          (click)=\"$event.stopPropagation()\"></sd-button>\r\n        <mat-menu #menu=\"matMenu\" class=\"sd-custom-panel-filter-configuration\">\r\n          @for (externalFilter of externalFilters; track externalFilter.field) {\r\n            <button mat-menu-item (click)=\"onCheckboxChange($event, externalFilter)\" [disabled]=\"externalFilter.required\">\r\n              <sd-checkbox\r\n                [label]=\"externalFilter.title\"\r\n                [model]=\"inlineExternal[externalFilter.field]\"\r\n                [disabled]=\"externalFilter.required\" />\r\n            </button>\r\n          }\r\n        </mat-menu>\r\n      </div>\r\n      <div class=\"row mx-0\" style=\"row-gap: 16px\">\r\n        @for (item of externalFilters; track item.field) {\r\n          @if (inlineExternal[item.field]) {\r\n            <div class=\"col-md-3 col-sm-6 px-8\" [class.col-lg-2]=\"col === 2\" [class.col-lg-3]=\"col === 3\">\r\n              @if (item.type === 'string') {\r\n                <sd-input\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  type=\"text\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (keyupEnter)=\"onKeyupEnter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-input>\r\n              } @else if (item.type === 'number') {\r\n                <sd-input-number\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (keyupEnter)=\"onKeyupEnter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-input-number>\r\n              } @else if (item.type === 'boolean') {\r\n                <sd-select\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [items]=\"[\r\n                    { value: true, display: item.option?.displayOnTrue || 'True' },\r\n                    { value: false, display: item.option?.displayOnFalse || 'False' }\r\n                  ]\"\r\n                  valueField=\"value\"\r\n                  displayField=\"display\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  hideInlineError>\r\n                </sd-select>\r\n              } @else if (item.type === 'date') {\r\n                <sd-date\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  hideInlineError>\r\n                </sd-date>\r\n              } @else if (item.type === 'datetime') {\r\n                <sd-datetime\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter()\"\r\n                  appearance=\"outline\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  hideInlineError>\r\n                </sd-datetime>\r\n              } @else if (item.type === 'daterange') {\r\n                <sd-date-range\r\n                  [autoId]=\"autoId + item.field\"\r\n                  [label]=\"item.title\"\r\n                  [(model)]=\"externalFilter![item.field]\"\r\n                  (sdChange)=\"onFilter()\"\r\n                  [form]=\"form\"\r\n                  [required]=\"item.required\"\r\n                  [min]=\"item.minDate\"\r\n                  [max]=\"item.maxDate\"\r\n                  appearance=\"outline\"\r\n                  hideInlineError>\r\n                </sd-date-range>\r\n              } @else if (item.type === 'values') {\r\n                @if (item.option.selection === 'MULTIPLE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (item.option.selection === 'AUTOCOMPLETE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else if (item.option.selection === 'MULTIPLEAUTOCOMPLETE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items | filterValues | async\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                }\r\n              } @else if (item.type === 'lazy-values') {\r\n                @if (item.option.selection === 'MULTIPLE') {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    multiple\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                } @else {\r\n                  <sd-select\r\n                    [autoId]=\"autoId + item.field\"\r\n                    [label]=\"item.title\"\r\n                    [items]=\"item.option.items\"\r\n                    [valueField]=\"item.option.valueField\"\r\n                    [displayField]=\"item.option.displayField\"\r\n                    [(model)]=\"externalFilter![item.field]\"\r\n                    (sdChange)=\"onFilter()\"\r\n                    appearance=\"outline\"\r\n                    [form]=\"form\"\r\n                    [required]=\"item.required\"\r\n                    hideInlineError>\r\n                  </sd-select>\r\n                }\r\n              } @else if (item.type === 'custom' && item.filterDef) {\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    item.filterDef;\r\n                    context: { form: form, externalFilter: externalFilter, autoId: autoId + item.field }\r\n                  \"></ng-container>\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n      @if (filter?.manualFilter) {\r\n        <div class=\"d-flex justify-content-end mt-16 px-8\">\r\n          <sd-button\r\n            [autoId]=\"autoId + 'onSubmit'\"\r\n            [disabled]=\"form.invalid\"\r\n            type=\"fill\"\r\n            color=\"primary\"\r\n            title=\"T\u00ECm ki\u1EBFm\"\r\n            prefixIcon=\"filter_alt\"\r\n            (click)=\"onSubmit()\">\r\n          </sd-button>\r\n        </div>\r\n      }\r\n    </sd-section>\r\n  }\r\n  <!-- <sd-popup-filter [filterRegister]=\"filterRegister!\" [columns]=\"columns\" [externalFilters]=\"externalFilters\">\r\n  </sd-popup-filter> -->\r\n}\r\n", styles: [":host{display:block;padding-left:0;padding-right:0}::ng-deep .sd-custom-panel-filter-configuration{width:240px;max-height:550px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader"] }, { kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "model", "required", "readonly", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "disabled", "viewed", "hyperlink", "tooltip"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdInputNumber, selector: "sd-input-number", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "hideInlineError", "blurOnEnter", "model", "required", "type", "precision", "readonly", "min", "max", "validator", "inlineError", "disabled", "viewed", "hyperlink", "appearance"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "sdFocusForceBlur", "keyupEnter"] }, { kind: "component", type: SdSelect, selector: "sd-select", inputs: ["autoId", "name", "appearance", "hideInlineError", "size", "form", "label", "helperText", "placeholder", "model", "items", "valueField", "displayField", "disabledField", "cacheChecksum", "required", "validator", "inlineError", "disabled", "viewed", "hyperlink", "multiple", "limit"], outputs: ["modelChange", "sdChange", "sdSelection"] }, { kind: "component", type: SdDate, selector: "sd-date", inputs: ["autoId", "name", "appearance", "hideInlineError", "min", "max", "size", "form", "disabled", "viewed", "hyperlink", "required", "inlineError", "label", "helperText", "placeholder", "minDate", "maxDate", "model"], outputs: ["sdChange", "sdFocus", "modelChange"] }, { kind: "component", type: SdDatetime, selector: "sd-datetime", inputs: ["autoId", "name", "appearance", "hideInlineError", "min", "max", "size", "form", "disabled", "viewed", "hyperlink", "required", "inlineError", "label", "helperText", "placeholder", "minDate", "maxDate", "model"], outputs: ["sdChange", "sdFocus", "modelChange"] }, { kind: "component", type: SdDateRange$1, selector: "sd-date-range", inputs: ["autoId", "name", "appearance", "size", "form", "disabled", "required", "label", "helperText", "hideInlineError", "min", "max", "model"], outputs: ["modelChange", "sdChange"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "title", "width", "size", "tooltip", "prefixIcon", "suffixIcon", "fontSet", "disabled", "loading"], outputs: ["click"] }, { kind: "pipe", type: FilterValuesPipe, name: "filterValues" }, { kind: "component", type: SdCheckbox, selector: "sd-checkbox", inputs: ["autoId", "name", "form", "label", "color", "disabled", "model", "inlineError"], outputs: ["modelChange", "sdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ExternalFilterComponent, decorators: [{
             type: Component,
@@ -2096,7 +2096,8 @@ class SdTable extends SdBaseSecureComponent {
         option.filter.hideInlineFilter = option?.filter?.hideInlineFilter ?? this.tableConfiguration?.filter?.hideInlineFilter;
         option.filter.externalFilterPerRow = option?.filter?.externalFilterPerRow ?? this.tableConfiguration?.filter?.externalFilterPerRow;
         option.filter.manualFilter = option?.filter?.manualFilter ?? this.tableConfiguration?.filter?.manualFilter;
-        option.filter.hideExternalFilterToolbar = option?.filter?.hideExternalFilterToolbar ?? this.tableConfiguration?.filter?.hideExternalFilterToolbar;
+        option.filter.hideExternalFilterToolbar =
+            option?.filter?.hideExternalFilterToolbar ?? this.tableConfiguration?.filter?.hideExternalFilterToolbar;
         for (const column of option.columns || []) {
             if (column.filter?.operator?.enable) {
                 if (!column.filter?.operator?.list?.length) {
@@ -2882,22 +2883,124 @@ class SdTable extends SdBaseSecureComponent {
             }
         }
     };
+    #getNestedValue = (obj, path) => {
+        if (!path || !obj)
+            return undefined;
+        const keys = path.split('.');
+        let result = obj;
+        for (const key of keys) {
+            if (result === null || result === undefined) {
+                return undefined;
+            }
+            result = result[key];
+        }
+        return result;
+    };
     #format = async (rawItems, columns) => {
         const items = rawItems.map(MapToSdTableItem);
+        // Cache for parsed field paths
+        const fieldPathCache = new Map();
+        /**
+         * Get nested property value from object using dot notation
+         */
+        const getNestedValue = (obj, path) => {
+            if (!path || obj == null)
+                return undefined;
+            let keys = fieldPathCache.get(path);
+            if (!keys) {
+                keys = path.split('.');
+                fieldPathCache.set(path, keys);
+            }
+            if (keys.length === 1)
+                return obj[keys[0]];
+            let result = obj;
+            for (const key of keys) {
+                if (result == null)
+                    return undefined;
+                result = result[key];
+            }
+            return result;
+        };
+        /**
+         * Format date display based on column type
+         */
+        const formatDateDisplay = (value, type) => {
+            const date = DateUtilities.toFormat(value, 'dd/MM/yyyy');
+            const time = DateUtilities.toFormat(value, 'HH:mm:ss');
+            if (type === 'datetime') {
+                return time && date ? `<div class="T14R">${date}<span class="T14R text-black400 ml-4">${time}</span></div>` : '';
+            }
+            if (type === 'date')
+                return date || '';
+            if (type === 'time')
+                return time || '';
+            return '';
+        };
+        /**
+         * Process values display (supports arrays)
+         */
+        const processValuesDisplay = (value, rowData, column, field) => {
+            if (column.type === 'lazy-values' && typeof column.option.mapValue === 'function') {
+                const val = column.option.mapValue(value, rowData);
+                const vals = (Array.isArray(val) ? val : [val]).filter(e => e?.toString());
+                return vals.map(val => this.#cacheObjValues[field]?.[val]?.[column.option.displayField] || val).join(', ');
+            }
+            const vals = (Array.isArray(value) ? value : [value]).filter(e => e?.toString());
+            return vals.map(val => this.#cacheObjValues[field]?.[val]?.[column.option.displayField] || val).join(', ');
+        };
+        /**
+         * Create badge configuration
+         */
+        const createBadge = (column, value, rowData) => {
+            if (column.useBadge) {
+                const badge = column.useBadge(value, rowData);
+                if (badge) {
+                    return {
+                        badge: {
+                            type: badge.type ?? 'round',
+                            color: badge.color,
+                            icon: badge.icon,
+                        },
+                        title: badge.title,
+                    };
+                }
+                return undefined;
+            }
+            if ((column.type === 'string' || column.type === 'number' || column.type === 'values') && column.badge) {
+                return {
+                    badge: {
+                        type: column.badgeType || 'icon',
+                        color: column.badge(value, rowData),
+                        icon: column.badgeIcon?.(value, rowData),
+                    },
+                    title: null,
+                };
+            }
+            if (column.type === 'boolean') {
+                return {
+                    badge: {
+                        type: 'round',
+                        color: value ? 'success' : 'error',
+                    },
+                };
+            }
+            return undefined;
+        };
         const execute = async (column) => {
-            // Clickable
             const { field, click, tooltip, htmlTemplate, transform } = column;
+            // Load lazy-values
             if (!transform && !htmlTemplate && column.type === 'lazy-values' && typeof column.option.views === 'function') {
-                const { option: { views, mapValue }, } = column;
+                const { option: { views, mapValue, valueField, displayField }, } = column;
                 this.#cacheObjValues[field] = this.#cacheObjValues[field] || {};
                 const values = ArrayUtilities.distinct(items
                     .map(item => {
+                    const value = getNestedValue(item.data, field);
                     if (typeof mapValue === 'function') {
-                        return mapValue(item.data?.[field], item.data);
+                        return mapValue(value, item.data);
                     }
-                    return item.data?.[field];
+                    return value;
                 })
-                    .filter(val => !!val?.toString())
+                    .filter(val => val?.toString())
                     .reduce((current, next) => [...current, ...(Array.isArray(next) ? next : [next])], [])
                     .filter(val => !Object.keys(this.#cacheObjValues[field]).includes(val)));
                 if (values.length) {
@@ -2905,17 +3008,19 @@ class SdTable extends SdBaseSecureComponent {
                         console.error(err);
                         return [];
                     }))
-                        .filter((item) => values.includes(item?.[column.option.valueField]))
+                        .filter((item) => values.includes(item?.[valueField]))
                         .map((e) => ({
-                        [column.option.valueField]: e?.[column.option.valueField],
-                        [column.option.displayField]: e?.[column.option.displayField],
+                        [valueField]: e?.[valueField],
+                        [displayField]: e?.[displayField],
                     }));
-                    Object.assign(this.#cacheObjValues[field], ArrayUtilities.toObject(column.option.valueField, lazyItems) || {});
+                    Object.assign(this.#cacheObjValues[field], ArrayUtilities.toObject(valueField, lazyItems) || {});
                 }
             }
+            // Process each item
             for (const item of items) {
                 const rowData = item.data;
-                const value = rowData?.[field];
+                const value = getNestedValue(rowData, field);
+                // Initialize display
                 item.meta.display[field] = {
                     badge: undefined,
                     cellStyle: column.align === 'right' ? { 'text-align': 'right!important' } : undefined,
@@ -2925,57 +3030,34 @@ class SdTable extends SdBaseSecureComponent {
                     click: typeof click === 'function' ? () => click(value, rowData) : undefined,
                 };
                 const display = item.meta.display[field];
-                // Display
+                // Process display data
                 if (typeof htmlTemplate === 'function') {
                     display.isHtml = true;
                     display.data = htmlTemplate(value, rowData);
                 }
                 else if (typeof transform === 'function') {
                     const newValue = transform(value, rowData);
-                    if (newValue instanceof Promise) {
-                        display.data = await newValue;
-                    }
-                    else {
-                        display.data = newValue;
-                    }
+                    display.data = newValue instanceof Promise ? await newValue : newValue;
                 }
                 else {
+                    // Date/Time
                     if (column.type === 'date' || column.type === 'datetime' || column.type === 'time') {
-                        const date = DateUtilities.toFormat(value, 'dd/MM/yyyy');
-                        let time = DateUtilities.toFormat(value, 'HH:mm:ss');
-                        // if (time?.endsWith('00')) {
-                        //   time = DateUtilities.toFormat(value, 'HH:mm');
-                        // }
-                        if (column.type === 'date' || column.type === 'datetime') {
-                            if (column.type === 'datetime') {
-                                display.isHtml = true;
-                                display.data = time && date ? `<div class="T14R">${date}<span class="T14R text-black400 ml-4">${time}</span></div>` : '';
-                            }
-                            else {
-                                display.data = date;
-                            }
-                        }
-                        if (column.type === 'time') {
-                            display.data = time;
-                        }
+                        const formatted = formatDateDisplay(value, column.type);
+                        display.data = formatted;
+                        display.isHtml = column.type === 'datetime';
                     }
+                    // Values/Lazy-values
                     if (column.type === 'values' || column.type === 'lazy-values') {
-                        if (column.type === 'lazy-values' && typeof column.option.mapValue === 'function') {
-                            const val = column.option.mapValue(value, rowData);
-                            const vals = (Array.isArray(val) ? val : [val]).filter(e => !!e?.toString());
-                            display.data = vals.map(val => this.#cacheObjValues[field]?.[val]?.[column.option.displayField] || val)?.join(', ');
-                        }
-                        else {
-                            const vals = (Array.isArray(value) ? value : [value]).filter(e => !!e?.toString());
-                            display.data = vals.map(val => this.#cacheObjValues[field]?.[val]?.[column.option.displayField] || val)?.join(', ');
-                        }
+                        display.data = processValuesDisplay(value, rowData, column, field);
                     }
+                    // Number
                     if (column.type === 'number' && NumberUtilities.isNumber(value)) {
                         display.data = this.formatNumberPipe.transform(value);
                     }
+                    // Boolean
                     if (column.type === 'boolean') {
                         const { option } = column;
-                        if (value !== undefined && value !== null && value !== '') {
+                        if (value != null && value !== '') {
                             display.data = value === true ? option?.displayOnTrue || 'True' : option?.displayOnFalse || 'False';
                         }
                         else {
@@ -2983,31 +3065,14 @@ class SdTable extends SdBaseSecureComponent {
                         }
                     }
                     // Badge
-                    if (column.useBadge) {
-                        const badge = column.useBadge(value, rowData);
-                        if (badge) {
-                            display.badge = {
-                                type: badge.type ?? 'round',
-                                color: badge.color,
-                                icon: badge.icon,
-                            };
-                            display.data = badge.title ?? display.data;
+                    const badgeResult = createBadge(column, value, rowData);
+                    if (badgeResult) {
+                        display.badge = badgeResult.badge;
+                        if (badgeResult.title) {
+                            display.data = badgeResult.title;
                         }
                     }
-                    else if ((column.type === 'string' || column.type === 'number' || column.type === 'values') && column.badge) {
-                        display.badge = {
-                            type: !column?.badgeType ? 'icon' : column.badgeType,
-                            color: column.badge(value, rowData),
-                            icon: column.badgeIcon?.(value, rowData),
-                        };
-                    }
-                    else if (column.type === 'boolean') {
-                        display.badge = {
-                            type: 'round',
-                            color: value ? 'success' : 'error',
-                            icon: null,
-                        };
-                    }
+                    // Handle empty values
                     if (display.data === null || display.data === undefined || display.data === '') {
                         display.data = SD_EMPTY_STR;
                         display.badge = undefined;
@@ -3015,6 +3080,7 @@ class SdTable extends SdBaseSecureComponent {
                 }
             }
         };
+        // Execute for all columns
         for (const column of columns.filter(e => !e.hidden)) {
             if (column.type === 'children') {
                 for (const childColumn of column.children?.filter(e => !e.hidden) || []) {