ngx-histaff-alpha 5.0.4 → 5.0.6

package/fesm2022/ngx-histaff-alpha.mjs

@@ -11391,6 +11391,7 @@ class CorePageListComponent extends CoreFormControlBaseComponent {
                                     if (body.statusCode === 200 || x.body.statusCode == '200') {
                                         this.forceReloadingFlag$.next(!!!this.forceReloadingFlag$.value);
                                         activateRequest.ids = [];
+                                        this.buttonGroupStatus?.mustBeHidden$.next(EMPTY_SELECTION_HIDDEN_BUTTON);
                                     }
                                 }
                             }));
@@ -11414,6 +11415,7 @@ class CorePageListComponent extends CoreFormControlBaseComponent {
                                     if (body.statusCode === 200 || x.body.statusCode == '200') {
                                         this.forceReloadingFlag$.next(!!!this.forceReloadingFlag$.value);
                                         inactivateRequest.ids = [];
+                                        this.buttonGroupStatus?.mustBeHidden$.next(EMPTY_SELECTION_HIDDEN_BUTTON);
                                     }
                                 }
                             }));
@@ -12172,7 +12174,7 @@ class CorePageListComponent extends CoreFormControlBaseComponent {
                 useExisting: CorePageListComponent,
             },
             CorePageListState,
-        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "corePageListContainer", first: true, predicate: ["corePageListContainer"], descendants: true }, { propertyName: "paginationContainer", first: true, predicate: ["paginationContainer"], descendants: true }, { propertyName: "fileImport", first: true, predicate: ["fileImport"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #container class=\"core-page-list-container p-relative\" #corePageListContainer\r\n    [ngStyle]=\"{ height: height + 'px' }\">\r\n\r\n    @if (!hideHeader) {\r\n    <core-page-header [instanceNumber]=\"corePageListInstanceNumber\" [title]=\"title\"\r\n        (buttonClick)=\"onCorePageHeaderButtonClick($event)\"\r\n        [hideButtonGroup]=\"!!seekerMode || !!hideButtonGroup\"></core-page-header>\r\n    }\r\n\r\n    <input #fileImport type=\"file\" name=\"name\"\r\n        accept=\"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n        style=\"display: none;\" (change)='inputFile($event)' />\r\n\r\n    <!--\r\n        Khi \u0111\u00E3 t\u00EDnh \u0111\u01B0\u1EE3c ch\u00EDnh x\u00E1c chi\u1EC1u cao compositionHeight c\u1EE7a core-composition\r\n        C\u1EA7n t\u00EDnh \u0111\u01B0\u1EE3c ch\u00EDnh x\u00E1c chi\u1EC1u cao coreTableHeight c\u1EE7a CoreTable\r\n        N\u1EBFu ph\u1EA7n top c\u1EE7a composition c\u1ED1 \u0111\u1ECBnh (v\u00ED d\u1EE5 khi s\u1EED d\u1EE5ng CoreParamKit) th\u00EC ph\u00E9p tr\u1EEB \u0111\u01A1n gi\u1EA3n\r\n        Nh\u01B0ng n\u1EBFu ph\u1EA7n top \u0111\u01B0\u1EE3c customize, ta ph\u1EA3i s\u1EED d\u1EE5ng extraManualOffset\r\n    -->\r\n    <core-composition [coreCompositionInstanceNumber]=\"corePageListInstanceNumber\" [top]=\"topPlace\"\r\n        [left]=\"!!hideLeft? undefined :left\" [main]=\"coreTable\" [height]=\"compositionHeight\">\r\n    </core-composition>\r\n\r\n    <router-outlet name=\"corePageListAux\"></router-outlet>\r\n\r\n    <!-- @if (!!tabMode && showFilterKit) {\r\n        <div class = \"filter-kit-dropdown\" [ngStyle]=\"{\r\n            zIndex: filterKitZIndex\r\n        }\">\r\n            <core-common-param-kit [hiddenMode]=\"true\" [datePeriodComparisonFor]=\"datePeriodComparisonFor\"\r\n                [enableTimeZoneConverterForDateTimePeriodParameters]=\"enableTimeZoneConverterForDateTimePeriodParameters\"\r\n                [datePeriodComparisonForLabelKey]=\"datePeriodComparisonForLabelKey\"\r\n                [statusInclusionFor]=\"statusInclusionFor\" [statusInclusionForLabelKey]=\"statusInclusionForLabelKey\"\r\n                [statusOptionsApi]=\"statusOptionsApi\" [statusOptions$]=\"statusOptions$\" [showOrgParam]=\"showOrgParam\"\r\n                [hideGeneralSearch]=\"hideGeneralSearch\" [hideDatePeriodComparison]=\"hideDatePeriodComparison\"\r\n                [hideStatusInclusion]=\"hideStatusInclusion\"\r\n                (onChange)=\"onParamKitValueChange($event)\"></core-common-param-kit>\r\n        </div>\r\n    } -->\r\n\r\n    @if (!disableFilterHub && showFilter && !!paramRows) {\r\n        <core-filter-hub [paramRows]=\"paramRows\"></core-filter-hub>\r\n    }\r\n\r\n</div>\r\n\r\n<ng-template #topPlace>\r\n\r\n    @if (!tabMode) {\r\n        @if (!!showParamKit) {\r\n            <div>\r\n                <core-common-param-kit [hiddenMode]=\"false\" [datePeriodComparisonFor]=\"datePeriodComparisonFor\"\r\n                    [enableTimeZoneConverterForDateTimePeriodParameters]=\"enableTimeZoneConverterForDateTimePeriodParameters\"\r\n                    [datePeriodComparisonForLabelKey]=\"datePeriodComparisonForLabelKey\"\r\n                    [statusInclusionFor]=\"statusInclusionFor\" [statusInclusionForLabelKey]=\"statusInclusionForLabelKey\"\r\n                    [statusOptionsApi]=\"statusOptionsApi\" [statusOptions$]=\"statusOptions$\" [showOrgParam]=\"showOrgParam\"\r\n                    [hideGeneralSearch]=\"hideGeneralSearch\" [hideDatePeriodComparison]=\"hideDatePeriodComparison\"\r\n                    [hideStatusInclusion]=\"hideStatusInclusion\"\r\n                    (onChange)=\"onParamKitValueChange($event)\"></core-common-param-kit>\r\n            </div>\r\n        }\r\n\r\n        <!-- @if (enableFilterKit) {\r\n            <core-filter-kit \r\n            [datePeriodComparisonFor]=\"datePeriodComparisonFor\"\r\n            [enableTimeZoneConverterForDateTimePeriodParameters]=\"enableTimeZoneConverterForDateTimePeriodParameters\"\r\n            [datePeriodComparisonForLabelKey]=\"datePeriodComparisonForLabelKey\"\r\n            [statusInclusionFor]=\"statusInclusionFor\" \r\n            [statusInclusionForLabelKey]=\"statusInclusionForLabelKey\"\r\n            [statusOptionsApi]=\"statusOptionsApi\" \r\n            [statusOptions$]=\"statusOptions$\" \r\n            [showOrgParam]=\"showOrgParam\"\r\n            [showOrgParamDropdown]=\"showOrgParamDropdown\"\r\n            [hideGeneralSearch]=\"hideGeneralSearch\"\r\n            [hideDatePeriodComparison]=\"hideDatePeriodComparison\"\r\n            [hideStatusInclusion]=\"hideStatusInclusion\"\r\n            (onChange)=\"onParamKitValueChange($event)\"\r\n        ></core-filter-kit>            \r\n        } -->\r\n    } @else {\r\n    <core-tabs [headers]=\"tabHeaders\" [contents]=\"[]\" [height]=\"45\" [headerLineHeight]=\"45\"\r\n        (onHeaderClick)=\"onCoreTabsHeaderClick($event)\">\r\n    </core-tabs>\r\n    <!-- <core-filter-kit \r\n        [datePeriodComparisonFor]=\"datePeriodComparisonFor\"\r\n        [enableTimeZoneConverterForDateTimePeriodParameters]=\"enableTimeZoneConverterForDateTimePeriodParameters\"\r\n        [datePeriodComparisonForLabelKey]=\"datePeriodComparisonForLabelKey\"\r\n        [statusInclusionFor]=\"statusInclusionFor\" \r\n        [statusInclusionForLabelKey]=\"statusInclusionForLabelKey\"\r\n        [statusOptionsApi]=\"statusOptionsApi\" \r\n        [statusOptions$]=\"statusOptions$\" \r\n        [showOrgParam]=\"showOrgParam\"\r\n        [showOrgParamDropdown]=\"showOrgParamDropdown\"\r\n        [hideGeneralSearch]=\"hideGeneralSearch\"\r\n        [hideDatePeriodComparison]=\"hideDatePeriodComparison\"\r\n        [hideStatusInclusion]=\"hideStatusInclusion\"\r\n        (onChange)=\"onParamKitValueChange($event)\"\r\n    ></core-filter-kit> -->\r\n    }\r\n\r\n    <ng-container *ngTemplateOutlet=\"top\">\r\n    </ng-container>\r\n\r\n</ng-template>\r\n\r\n<ng-template #coreTable>\r\n\r\n    <div [class.opacity0]=\"!!!geometricDone\">\r\n\r\n        <!--\r\n            Khi \u0111\u00E3 t\u00EDnh \u0111\u01B0\u1EE3c ch\u00EDnh x\u00E1c chi\u1EC1u cao compositionHeight c\u1EE7a core-composition\r\n            C\u1EA7n t\u00EDnh \u0111\u01B0\u1EE3c ch\u00EDnh x\u00E1c chi\u1EC1u cao coreTableHeight c\u1EE7a CoreTable\r\n            N\u1EBFu ph\u1EA7n top c\u1EE7a composition c\u1ED1 \u0111\u1ECBnh (v\u00ED d\u1EE5 khi s\u1EED d\u1EE5ng CoreParamKit) th\u00EC ph\u00E9p tr\u1EEB \u0111\u01A1n gi\u1EA3n\r\n            Nh\u01B0ng n\u1EBFu ph\u1EA7n top \u0111\u01B0\u1EE3c customize, ta ph\u1EA3i s\u1EED d\u1EE5ng extraManualOffset\r\n\r\n            C\u1EA7n t\u00EDnh tableHeight nh\u01B0 th\u1EBF n\u00E0o?\r\n        -->\r\n        <core-table #coreTableAlone width=\"100%\" [height]=\"tableHeight\" [rowHeight]=\"rowHeight || '46px'\" [wrap]=\"wrap\"\r\n            [primaryKey]=\"primaryKey\"\r\n            [columns]=\"columns\" [data]=\"list\" [showCheckbox]=\"!!!hideCheck\" headerHeight=\"60px\"\r\n            [showTools]=\"showListInlineTools\" [tools]=\"inlineTools\" (onToolClick)=\"onToolClick($event)\"\r\n            (onRowClick)=\"onRowClick($event)\" (onRowDoubleClick)=\"onRowDoubleClick($event)\"\r\n            (onSelectedIdsChange)=\"onSelectedIdsChange($event)\" (onSelectedDataChange)=\"onSelectedDataChange($event)\"\r\n            [frozen]=\"frozen || 1\" (onSearching)=\"onSearching($event)\"\r\n            (onColumnCaptionClick)=\"onColumnCaptionClick($event)\"\r\n            [corePageListInstanceNumber]=\"corePageListInstanceNumber\" [loading]=\"loading\"\r\n            [columnSearchDefaultOpen]=\"columnSearchDefaultOpen\" [lazyLoading]=\"true\" [headerWrap]=\"headerWrap\"\r\n            [headerFirstRowHeight]=\"headerFirstRowHeight\" [noPaddingCell]=\"noPaddingCell\"\r\n            [disableHighlightOnClick]=\"disableHighlightOnClick\" [primaryKey]=\"primaryKey\"\r\n            [autoColumnFitAvailableSpace]=\"autoColumnFitAvailableSpace\"\r\n            [checkboxExplicity]=\"checkboxExplicity\"\r\n            ></core-table>\r\n\r\n        <div class=\"d-flex d-flex-between pagination-wrapper w-100\" #paginationContainer>\r\n            <core-pagination-full [height]=\"paginationHeight\" [currentPage$]=\"currentPage$\" [pageSize$]=\"pageSize$\"\r\n                [pageCount]=\"pageCount\" [innerBodyCount$]=\"innerBodyCount$\" [pagination$]=\"pagination$\"\r\n                [loading]=\"loading\" [fixedPageSize]=\"fixedPageSize\" [background]=\"'#848484'\"></core-pagination-full>\r\n\r\n        </div>\r\n\r\n    </div>\r\n\r\n</ng-template>\r\n\r\n<core-api-progress *ngIf=\"longApiRunning\" (onClose)=\"onProgressWindowClose($event)\"></core-api-progress>\r\n\r\n<app-fullscreen-modal-loader *ngIf=\"prefetchLoading\"></app-fullscreen-modal-loader>", styles: [".core-page-list-container{--height: auto;box-sizing:border-box!important;border:none!important;height:var(--height)}.core-page-list-container *{box-sizing:border-box}.core-page-list-container .column-caption{text-align:center}.core-page-list-container core-pagination-full{width:100%}.core-page-list-container .filter-kit-dropdown{top:120px;right:120px;position:fixed;box-shadow:0 1rem 3rem #0000002e}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: CoreTableComponent, selector: "core-table", inputs: ["id", "width", "height", "showCheckbox", "checkboxSize", "outerButtons", "showTools", "tools", "checkingResetFlag", "borderRadius", "headerColor", "headerBackgroundColor", "headerWrap", "headerFirstRowHeight", "headerSecondRowHeight", "wrap", "allowCellScrollY", "loading", "rowHeight", "frozen", "footer", "columns", "data", "selectedIds", "corePageListInstanceNumber", "disableHighlightOnClick", "freeMode", "searchSwitchDisabled", "disableSorting", "inlineToolItems", "columnSearchDefaultOpen", "lazyLoading", "primaryKey", "rowHoverBgColor", "noPaddingCell", "autoColumnFitAvailableSpace", "checkboxExplicity"], outputs: ["onSearching", "onToolClick", "onRowClick", "onRowDoubleClick", "onSelectedIdsChange", "onSelectedDataChange", "onColumnCaptionClick"] }, { kind: "component", type: CorePaginationFullComponent, selector: "core-pagination-full", inputs: ["currentPage$", "height", "pageCount", "loading", "showAdd", "background", "pageSize$", "innerBodyCount$", "pagination$", "fixedPageSize"], outputs: ["onClickAdd", "onCurrentPageChange", "onSizeChange"] }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup"], outputs: ["buttonClick"] }, { kind: "component", type: CoreCompositionComponent, selector: "core-composition", inputs: ["coreCompositionInstanceNumber", "top", "left", "leftWidth", "main", "height", "defaultResizeOff"] }, { kind: "component", type: CoreCommonParamKitComponent, selector: "core-common-param-kit", inputs: ["hiddenMode", "enableTimeZoneConverterForDateTimePeriodParameters", "datePeriodComparisonFor", "datePeriodComparisonForLabelKey", "statusInclusionFor", "statusInclusionForLabelKey", "statusOptionsApi", "showOrgParam", "showOrgParamDropdown", "hideDatePeriodComparison", "hideStatusInclusion", "hideGeneralSearch", "statusOptions$"], outputs: ["onChange"] }, { kind: "component", type: CoreApiProgressComponent, selector: "core-api-progress", outputs: ["onClose"] }, { kind: "component", type: FullscreenModalLoaderComponent, selector: "app-fullscreen-modal-loader", inputs: ["content"] }, { kind: "component", type: CoreTabsComponent, selector: "core-tabs", inputs: ["headers", "contents", "headerTools", "height", "headerLineHeight"], outputs: ["onHeaderClick", "onToolItemClick"] }, { kind: "component", type: CoreFilterHubComponent, selector: "core-filter-hub", inputs: ["paramRows", "showButton"], outputs: ["onButtonClick"] }] }); }
+        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "corePageListContainer", first: true, predicate: ["corePageListContainer"], descendants: true }, { propertyName: "paginationContainer", first: true, predicate: ["paginationContainer"], descendants: true }, { propertyName: "fileImport", first: true, predicate: ["fileImport"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #container class=\"core-page-list-container p-relative\" #corePageListContainer\r\n    [ngStyle]=\"{ height: height + 'px' }\">\r\n\r\n    @if (!hideHeader) {\r\n    <core-page-header [instanceNumber]=\"corePageListInstanceNumber\" [title]=\"title\"\r\n        (buttonClick)=\"onCorePageHeaderButtonClick($event)\"\r\n        [hideButtonGroup]=\"!!seekerMode || !!hideButtonGroup\"></core-page-header>\r\n    }\r\n\r\n    <input #fileImport type=\"file\" name=\"name\"\r\n        accept=\"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n        style=\"display: none;\" (change)='inputFile($event)' />\r\n\r\n    <!--\r\n        Khi \u0111\u00E3 t\u00EDnh \u0111\u01B0\u1EE3c ch\u00EDnh x\u00E1c chi\u1EC1u cao compositionHeight c\u1EE7a core-composition\r\n        C\u1EA7n t\u00EDnh \u0111\u01B0\u1EE3c ch\u00EDnh x\u00E1c chi\u1EC1u cao coreTableHeight c\u1EE7a CoreTable\r\n        N\u1EBFu ph\u1EA7n top c\u1EE7a composition c\u1ED1 \u0111\u1ECBnh (v\u00ED d\u1EE5 khi s\u1EED d\u1EE5ng CoreParamKit) th\u00EC ph\u00E9p tr\u1EEB \u0111\u01A1n gi\u1EA3n\r\n        Nh\u01B0ng n\u1EBFu ph\u1EA7n top \u0111\u01B0\u1EE3c customize, ta ph\u1EA3i s\u1EED d\u1EE5ng extraManualOffset\r\n    -->\r\n    <core-composition [coreCompositionInstanceNumber]=\"corePageListInstanceNumber\" [top]=\"topPlace\"\r\n        [left]=\"!!hideLeft? undefined :left\" [main]=\"coreTable\" [height]=\"compositionHeight\">\r\n    </core-composition>\r\n\r\n    <router-outlet name=\"corePageListAux\"></router-outlet>\r\n\r\n    @if (!disableFilterHub && showFilter && !!paramRows) {\r\n        <core-filter-hub [paramRows]=\"paramRows\"></core-filter-hub>\r\n    }\r\n\r\n</div>\r\n\r\n<ng-template #topPlace>\r\n\r\n    @if (!tabMode) {\r\n        @if (!!showParamKit) {\r\n            <div>\r\n                <core-common-param-kit [hiddenMode]=\"false\" [datePeriodComparisonFor]=\"datePeriodComparisonFor\"\r\n                    [enableTimeZoneConverterForDateTimePeriodParameters]=\"enableTimeZoneConverterForDateTimePeriodParameters\"\r\n                    [datePeriodComparisonForLabelKey]=\"datePeriodComparisonForLabelKey\"\r\n                    [statusInclusionFor]=\"statusInclusionFor\" [statusInclusionForLabelKey]=\"statusInclusionForLabelKey\"\r\n                    [statusOptionsApi]=\"statusOptionsApi\" [statusOptions$]=\"statusOptions$\" [showOrgParam]=\"showOrgParam\"\r\n                    [hideGeneralSearch]=\"hideGeneralSearch\" [hideDatePeriodComparison]=\"hideDatePeriodComparison\"\r\n                    [hideStatusInclusion]=\"hideStatusInclusion\"\r\n                    (onChange)=\"onParamKitValueChange($event)\"></core-common-param-kit>\r\n            </div>\r\n        }\r\n\r\n    } @else {\r\n    <core-tabs [headers]=\"tabHeaders\" [contents]=\"[]\" [height]=\"45\" [headerLineHeight]=\"45\"\r\n        (onHeaderClick)=\"onCoreTabsHeaderClick($event)\">\r\n    </core-tabs>\r\n    }\r\n\r\n    <ng-container *ngTemplateOutlet=\"top\">\r\n    </ng-container>\r\n\r\n</ng-template>\r\n\r\n<ng-template #coreTable>\r\n\r\n    <div [class.opacity0]=\"!!!geometricDone\">\r\n\r\n        <!--\r\n            Khi \u0111\u00E3 t\u00EDnh \u0111\u01B0\u1EE3c ch\u00EDnh x\u00E1c chi\u1EC1u cao compositionHeight c\u1EE7a core-composition\r\n            C\u1EA7n t\u00EDnh \u0111\u01B0\u1EE3c ch\u00EDnh x\u00E1c chi\u1EC1u cao coreTableHeight c\u1EE7a CoreTable\r\n            N\u1EBFu ph\u1EA7n top c\u1EE7a composition c\u1ED1 \u0111\u1ECBnh (v\u00ED d\u1EE5 khi s\u1EED d\u1EE5ng CoreParamKit) th\u00EC ph\u00E9p tr\u1EEB \u0111\u01A1n gi\u1EA3n\r\n            Nh\u01B0ng n\u1EBFu ph\u1EA7n top \u0111\u01B0\u1EE3c customize, ta ph\u1EA3i s\u1EED d\u1EE5ng extraManualOffset\r\n\r\n            C\u1EA7n t\u00EDnh tableHeight nh\u01B0 th\u1EBF n\u00E0o?\r\n        -->\r\n        <core-table #coreTableAlone width=\"100%\" [height]=\"tableHeight\" [rowHeight]=\"rowHeight || '46px'\" [wrap]=\"wrap\"\r\n            [primaryKey]=\"primaryKey\"\r\n            [columns]=\"columns\" [data]=\"list\" [showCheckbox]=\"!!!hideCheck\" headerHeight=\"60px\"\r\n            [showTools]=\"showListInlineTools\" [tools]=\"inlineTools\" (onToolClick)=\"onToolClick($event)\"\r\n            (onRowClick)=\"onRowClick($event)\" (onRowDoubleClick)=\"onRowDoubleClick($event)\"\r\n            (onSelectedIdsChange)=\"onSelectedIdsChange($event)\" (onSelectedDataChange)=\"onSelectedDataChange($event)\"\r\n            [frozen]=\"frozen || 1\" (onSearching)=\"onSearching($event)\"\r\n            (onColumnCaptionClick)=\"onColumnCaptionClick($event)\"\r\n            [corePageListInstanceNumber]=\"corePageListInstanceNumber\" [loading]=\"loading\"\r\n            [columnSearchDefaultOpen]=\"columnSearchDefaultOpen\" [lazyLoading]=\"true\" [headerWrap]=\"headerWrap\"\r\n            [headerFirstRowHeight]=\"headerFirstRowHeight\" [noPaddingCell]=\"noPaddingCell\"\r\n            [disableHighlightOnClick]=\"disableHighlightOnClick\" [primaryKey]=\"primaryKey\"\r\n            [autoColumnFitAvailableSpace]=\"autoColumnFitAvailableSpace\"\r\n            [checkboxExplicity]=\"checkboxExplicity\"\r\n            ></core-table>\r\n\r\n        <div class=\"d-flex d-flex-between pagination-wrapper w-100\" #paginationContainer>\r\n            <core-pagination-full [height]=\"paginationHeight\" [currentPage$]=\"currentPage$\" [pageSize$]=\"pageSize$\"\r\n                [pageCount]=\"pageCount\" [innerBodyCount$]=\"innerBodyCount$\" [pagination$]=\"pagination$\"\r\n                [loading]=\"loading\" [fixedPageSize]=\"fixedPageSize\" [background]=\"'#848484'\"></core-pagination-full>\r\n\r\n        </div>\r\n\r\n    </div>\r\n\r\n</ng-template>\r\n\r\n<core-api-progress *ngIf=\"longApiRunning\" (onClose)=\"onProgressWindowClose($event)\"></core-api-progress>\r\n\r\n<app-fullscreen-modal-loader *ngIf=\"prefetchLoading\"></app-fullscreen-modal-loader>", styles: [".core-page-list-container{--height: auto;box-sizing:border-box!important;border:none!important;height:var(--height)}.core-page-list-container *{box-sizing:border-box}.core-page-list-container .column-caption{text-align:center}.core-page-list-container core-pagination-full{width:100%}.core-page-list-container .filter-kit-dropdown{top:120px;right:120px;position:fixed;box-shadow:0 1rem 3rem #0000002e}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: CoreTableComponent, selector: "core-table", inputs: ["id", "width", "height", "showCheckbox", "checkboxSize", "outerButtons", "showTools", "tools", "checkingResetFlag", "borderRadius", "headerColor", "headerBackgroundColor", "headerWrap", "headerFirstRowHeight", "headerSecondRowHeight", "wrap", "allowCellScrollY", "loading", "rowHeight", "frozen", "footer", "columns", "data", "selectedIds", "corePageListInstanceNumber", "disableHighlightOnClick", "freeMode", "searchSwitchDisabled", "disableSorting", "inlineToolItems", "columnSearchDefaultOpen", "lazyLoading", "primaryKey", "rowHoverBgColor", "noPaddingCell", "autoColumnFitAvailableSpace", "checkboxExplicity"], outputs: ["onSearching", "onToolClick", "onRowClick", "onRowDoubleClick", "onSelectedIdsChange", "onSelectedDataChange", "onColumnCaptionClick"] }, { kind: "component", type: CorePaginationFullComponent, selector: "core-pagination-full", inputs: ["currentPage$", "height", "pageCount", "loading", "showAdd", "background", "pageSize$", "innerBodyCount$", "pagination$", "fixedPageSize"], outputs: ["onClickAdd", "onCurrentPageChange", "onSizeChange"] }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup"], outputs: ["buttonClick"] }, { kind: "component", type: CoreCompositionComponent, selector: "core-composition", inputs: ["coreCompositionInstanceNumber", "top", "left", "leftWidth", "main", "height", "defaultResizeOff"] }, { kind: "component", type: CoreCommonParamKitComponent, selector: "core-common-param-kit", inputs: ["hiddenMode", "enableTimeZoneConverterForDateTimePeriodParameters", "datePeriodComparisonFor", "datePeriodComparisonForLabelKey", "statusInclusionFor", "statusInclusionForLabelKey", "statusOptionsApi", "showOrgParam", "showOrgParamDropdown", "hideDatePeriodComparison", "hideStatusInclusion", "hideGeneralSearch", "statusOptions$"], outputs: ["onChange"] }, { kind: "component", type: CoreApiProgressComponent, selector: "core-api-progress", outputs: ["onClose"] }, { kind: "component", type: FullscreenModalLoaderComponent, selector: "app-fullscreen-modal-loader", inputs: ["content"] }, { kind: "component", type: CoreTabsComponent, selector: "core-tabs", inputs: ["headers", "contents", "headerTools", "height", "headerLineHeight"], outputs: ["onHeaderClick", "onToolItemClick"] }, { kind: "component", type: CoreFilterHubComponent, selector: "core-filter-hub", inputs: ["paramRows", "showButton"], outputs: ["onButtonClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CorePageListComponent, decorators: [{
             type: Component,
@@ -12196,7 +12198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                             useExisting: CorePageListComponent,
                         },
                         CorePageListState,
-                    ], template: "<div #container class=\"core-page-list-container p-relative\" #corePageListContainer\r\n    [ngStyle]=\"{ height: height + 'px' }\">\r\n\r\n    @if (!hideHeader) {\r\n    <core-page-header [instanceNumber]=\"corePageListInstanceNumber\" [title]=\"title\"\r\n        (buttonClick)=\"onCorePageHeaderButtonClick($event)\"\r\n        [hideButtonGroup]=\"!!seekerMode || !!hideButtonGroup\"></core-page-header>\r\n    }\r\n\r\n    <input #fileImport type=\"file\" name=\"name\"\r\n        accept=\"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n        style=\"display: none;\" (change)='inputFile($event)' />\r\n\r\n    <!--\r\n        Khi \u0111\u00E3 t\u00EDnh \u0111\u01B0\u1EE3c ch\u00EDnh x\u00E1c chi\u1EC1u cao compositionHeight c\u1EE7a core-composition\r\n        C\u1EA7n t\u00EDnh \u0111\u01B0\u1EE3c ch\u00EDnh x\u00E1c chi\u1EC1u cao coreTableHeight c\u1EE7a CoreTable\r\n        N\u1EBFu ph\u1EA7n top c\u1EE7a composition c\u1ED1 \u0111\u1ECBnh (v\u00ED d\u1EE5 khi s\u1EED d\u1EE5ng CoreParamKit) th\u00EC ph\u00E9p tr\u1EEB \u0111\u01A1n gi\u1EA3n\r\n        Nh\u01B0ng n\u1EBFu ph\u1EA7n top \u0111\u01B0\u1EE3c customize, ta ph\u1EA3i s\u1EED d\u1EE5ng extraManualOffset\r\n    -->\r\n    <core-composition [coreCompositionInstanceNumber]=\"corePageListInstanceNumber\" [top]=\"topPlace\"\r\n        [left]=\"!!hideLeft? undefined :left\" [main]=\"coreTable\" [height]=\"compositionHeight\">\r\n    </core-composition>\r\n\r\n    <router-outlet name=\"corePageListAux\"></router-outlet>\r\n\r\n    <!-- @if (!!tabMode && showFilterKit) {\r\n        <div class = \"filter-kit-dropdown\" [ngStyle]=\"{\r\n            zIndex: filterKitZIndex\r\n        }\">\r\n            <core-common-param-kit [hiddenMode]=\"true\" [datePeriodComparisonFor]=\"datePeriodComparisonFor\"\r\n                [enableTimeZoneConverterForDateTimePeriodParameters]=\"enableTimeZoneConverterForDateTimePeriodParameters\"\r\n                [datePeriodComparisonForLabelKey]=\"datePeriodComparisonForLabelKey\"\r\n                [statusInclusionFor]=\"statusInclusionFor\" [statusInclusionForLabelKey]=\"statusInclusionForLabelKey\"\r\n                [statusOptionsApi]=\"statusOptionsApi\" [statusOptions$]=\"statusOptions$\" [showOrgParam]=\"showOrgParam\"\r\n                [hideGeneralSearch]=\"hideGeneralSearch\" [hideDatePeriodComparison]=\"hideDatePeriodComparison\"\r\n                [hideStatusInclusion]=\"hideStatusInclusion\"\r\n                (onChange)=\"onParamKitValueChange($event)\"></core-common-param-kit>\r\n        </div>\r\n    } -->\r\n\r\n    @if (!disableFilterHub && showFilter && !!paramRows) {\r\n        <core-filter-hub [paramRows]=\"paramRows\"></core-filter-hub>\r\n    }\r\n\r\n</div>\r\n\r\n<ng-template #topPlace>\r\n\r\n    @if (!tabMode) {\r\n        @if (!!showParamKit) {\r\n            <div>\r\n                <core-common-param-kit [hiddenMode]=\"false\" [datePeriodComparisonFor]=\"datePeriodComparisonFor\"\r\n                    [enableTimeZoneConverterForDateTimePeriodParameters]=\"enableTimeZoneConverterForDateTimePeriodParameters\"\r\n                    [datePeriodComparisonForLabelKey]=\"datePeriodComparisonForLabelKey\"\r\n                    [statusInclusionFor]=\"statusInclusionFor\" [statusInclusionForLabelKey]=\"statusInclusionForLabelKey\"\r\n                    [statusOptionsApi]=\"statusOptionsApi\" [statusOptions$]=\"statusOptions$\" [showOrgParam]=\"showOrgParam\"\r\n                    [hideGeneralSearch]=\"hideGeneralSearch\" [hideDatePeriodComparison]=\"hideDatePeriodComparison\"\r\n                    [hideStatusInclusion]=\"hideStatusInclusion\"\r\n                    (onChange)=\"onParamKitValueChange($event)\"></core-common-param-kit>\r\n            </div>\r\n        }\r\n\r\n        <!-- @if (enableFilterKit) {\r\n            <core-filter-kit \r\n            [datePeriodComparisonFor]=\"datePeriodComparisonFor\"\r\n            [enableTimeZoneConverterForDateTimePeriodParameters]=\"enableTimeZoneConverterForDateTimePeriodParameters\"\r\n            [datePeriodComparisonForLabelKey]=\"datePeriodComparisonForLabelKey\"\r\n            [statusInclusionFor]=\"statusInclusionFor\" \r\n            [statusInclusionForLabelKey]=\"statusInclusionForLabelKey\"\r\n            [statusOptionsApi]=\"statusOptionsApi\" \r\n            [statusOptions$]=\"statusOptions$\" \r\n            [showOrgParam]=\"showOrgParam\"\r\n            [showOrgParamDropdown]=\"showOrgParamDropdown\"\r\n            [hideGeneralSearch]=\"hideGeneralSearch\"\r\n            [hideDatePeriodComparison]=\"hideDatePeriodComparison\"\r\n            [hideStatusInclusion]=\"hideStatusInclusion\"\r\n            (onChange)=\"onParamKitValueChange($event)\"\r\n        ></core-filter-kit>            \r\n        } -->\r\n    } @else {\r\n    <core-tabs [headers]=\"tabHeaders\" [contents]=\"[]\" [height]=\"45\" [headerLineHeight]=\"45\"\r\n        (onHeaderClick)=\"onCoreTabsHeaderClick($event)\">\r\n    </core-tabs>\r\n    <!-- <core-filter-kit \r\n        [datePeriodComparisonFor]=\"datePeriodComparisonFor\"\r\n        [enableTimeZoneConverterForDateTimePeriodParameters]=\"enableTimeZoneConverterForDateTimePeriodParameters\"\r\n        [datePeriodComparisonForLabelKey]=\"datePeriodComparisonForLabelKey\"\r\n        [statusInclusionFor]=\"statusInclusionFor\" \r\n        [statusInclusionForLabelKey]=\"statusInclusionForLabelKey\"\r\n        [statusOptionsApi]=\"statusOptionsApi\" \r\n        [statusOptions$]=\"statusOptions$\" \r\n        [showOrgParam]=\"showOrgParam\"\r\n        [showOrgParamDropdown]=\"showOrgParamDropdown\"\r\n        [hideGeneralSearch]=\"hideGeneralSearch\"\r\n        [hideDatePeriodComparison]=\"hideDatePeriodComparison\"\r\n        [hideStatusInclusion]=\"hideStatusInclusion\"\r\n        (onChange)=\"onParamKitValueChange($event)\"\r\n    ></core-filter-kit> -->\r\n    }\r\n\r\n    <ng-container *ngTemplateOutlet=\"top\">\r\n    </ng-container>\r\n\r\n</ng-template>\r\n\r\n<ng-template #coreTable>\r\n\r\n    <div [class.opacity0]=\"!!!geometricDone\">\r\n\r\n        <!--\r\n            Khi \u0111\u00E3 t\u00EDnh \u0111\u01B0\u1EE3c ch\u00EDnh x\u00E1c chi\u1EC1u cao compositionHeight c\u1EE7a core-composition\r\n            C\u1EA7n t\u00EDnh \u0111\u01B0\u1EE3c ch\u00EDnh x\u00E1c chi\u1EC1u cao coreTableHeight c\u1EE7a CoreTable\r\n            N\u1EBFu ph\u1EA7n top c\u1EE7a composition c\u1ED1 \u0111\u1ECBnh (v\u00ED d\u1EE5 khi s\u1EED d\u1EE5ng CoreParamKit) th\u00EC ph\u00E9p tr\u1EEB \u0111\u01A1n gi\u1EA3n\r\n            Nh\u01B0ng n\u1EBFu ph\u1EA7n top \u0111\u01B0\u1EE3c customize, ta ph\u1EA3i s\u1EED d\u1EE5ng extraManualOffset\r\n\r\n            C\u1EA7n t\u00EDnh tableHeight nh\u01B0 th\u1EBF n\u00E0o?\r\n        -->\r\n        <core-table #coreTableAlone width=\"100%\" [height]=\"tableHeight\" [rowHeight]=\"rowHeight || '46px'\" [wrap]=\"wrap\"\r\n            [primaryKey]=\"primaryKey\"\r\n            [columns]=\"columns\" [data]=\"list\" [showCheckbox]=\"!!!hideCheck\" headerHeight=\"60px\"\r\n            [showTools]=\"showListInlineTools\" [tools]=\"inlineTools\" (onToolClick)=\"onToolClick($event)\"\r\n            (onRowClick)=\"onRowClick($event)\" (onRowDoubleClick)=\"onRowDoubleClick($event)\"\r\n            (onSelectedIdsChange)=\"onSelectedIdsChange($event)\" (onSelectedDataChange)=\"onSelectedDataChange($event)\"\r\n            [frozen]=\"frozen || 1\" (onSearching)=\"onSearching($event)\"\r\n            (onColumnCaptionClick)=\"onColumnCaptionClick($event)\"\r\n            [corePageListInstanceNumber]=\"corePageListInstanceNumber\" [loading]=\"loading\"\r\n            [columnSearchDefaultOpen]=\"columnSearchDefaultOpen\" [lazyLoading]=\"true\" [headerWrap]=\"headerWrap\"\r\n            [headerFirstRowHeight]=\"headerFirstRowHeight\" [noPaddingCell]=\"noPaddingCell\"\r\n            [disableHighlightOnClick]=\"disableHighlightOnClick\" [primaryKey]=\"primaryKey\"\r\n            [autoColumnFitAvailableSpace]=\"autoColumnFitAvailableSpace\"\r\n            [checkboxExplicity]=\"checkboxExplicity\"\r\n            ></core-table>\r\n\r\n        <div class=\"d-flex d-flex-between pagination-wrapper w-100\" #paginationContainer>\r\n            <core-pagination-full [height]=\"paginationHeight\" [currentPage$]=\"currentPage$\" [pageSize$]=\"pageSize$\"\r\n                [pageCount]=\"pageCount\" [innerBodyCount$]=\"innerBodyCount$\" [pagination$]=\"pagination$\"\r\n                [loading]=\"loading\" [fixedPageSize]=\"fixedPageSize\" [background]=\"'#848484'\"></core-pagination-full>\r\n\r\n        </div>\r\n\r\n    </div>\r\n\r\n</ng-template>\r\n\r\n<core-api-progress *ngIf=\"longApiRunning\" (onClose)=\"onProgressWindowClose($event)\"></core-api-progress>\r\n\r\n<app-fullscreen-modal-loader *ngIf=\"prefetchLoading\"></app-fullscreen-modal-loader>", styles: [".core-page-list-container{--height: auto;box-sizing:border-box!important;border:none!important;height:var(--height)}.core-page-list-container *{box-sizing:border-box}.core-page-list-container .column-caption{text-align:center}.core-page-list-container core-pagination-full{width:100%}.core-page-list-container .filter-kit-dropdown{top:120px;right:120px;position:fixed;box-shadow:0 1rem 3rem #0000002e}\n"] }]
+                    ], template: "<div #container class=\"core-page-list-container p-relative\" #corePageListContainer\r\n    [ngStyle]=\"{ height: height + 'px' }\">\r\n\r\n    @if (!hideHeader) {\r\n    <core-page-header [instanceNumber]=\"corePageListInstanceNumber\" [title]=\"title\"\r\n        (buttonClick)=\"onCorePageHeaderButtonClick($event)\"\r\n        [hideButtonGroup]=\"!!seekerMode || !!hideButtonGroup\"></core-page-header>\r\n    }\r\n\r\n    <input #fileImport type=\"file\" name=\"name\"\r\n        accept=\"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\r\n        style=\"display: none;\" (change)='inputFile($event)' />\r\n\r\n    <!--\r\n        Khi \u0111\u00E3 t\u00EDnh \u0111\u01B0\u1EE3c ch\u00EDnh x\u00E1c chi\u1EC1u cao compositionHeight c\u1EE7a core-composition\r\n        C\u1EA7n t\u00EDnh \u0111\u01B0\u1EE3c ch\u00EDnh x\u00E1c chi\u1EC1u cao coreTableHeight c\u1EE7a CoreTable\r\n        N\u1EBFu ph\u1EA7n top c\u1EE7a composition c\u1ED1 \u0111\u1ECBnh (v\u00ED d\u1EE5 khi s\u1EED d\u1EE5ng CoreParamKit) th\u00EC ph\u00E9p tr\u1EEB \u0111\u01A1n gi\u1EA3n\r\n        Nh\u01B0ng n\u1EBFu ph\u1EA7n top \u0111\u01B0\u1EE3c customize, ta ph\u1EA3i s\u1EED d\u1EE5ng extraManualOffset\r\n    -->\r\n    <core-composition [coreCompositionInstanceNumber]=\"corePageListInstanceNumber\" [top]=\"topPlace\"\r\n        [left]=\"!!hideLeft? undefined :left\" [main]=\"coreTable\" [height]=\"compositionHeight\">\r\n    </core-composition>\r\n\r\n    <router-outlet name=\"corePageListAux\"></router-outlet>\r\n\r\n    @if (!disableFilterHub && showFilter && !!paramRows) {\r\n        <core-filter-hub [paramRows]=\"paramRows\"></core-filter-hub>\r\n    }\r\n\r\n</div>\r\n\r\n<ng-template #topPlace>\r\n\r\n    @if (!tabMode) {\r\n        @if (!!showParamKit) {\r\n            <div>\r\n                <core-common-param-kit [hiddenMode]=\"false\" [datePeriodComparisonFor]=\"datePeriodComparisonFor\"\r\n                    [enableTimeZoneConverterForDateTimePeriodParameters]=\"enableTimeZoneConverterForDateTimePeriodParameters\"\r\n                    [datePeriodComparisonForLabelKey]=\"datePeriodComparisonForLabelKey\"\r\n                    [statusInclusionFor]=\"statusInclusionFor\" [statusInclusionForLabelKey]=\"statusInclusionForLabelKey\"\r\n                    [statusOptionsApi]=\"statusOptionsApi\" [statusOptions$]=\"statusOptions$\" [showOrgParam]=\"showOrgParam\"\r\n                    [hideGeneralSearch]=\"hideGeneralSearch\" [hideDatePeriodComparison]=\"hideDatePeriodComparison\"\r\n                    [hideStatusInclusion]=\"hideStatusInclusion\"\r\n                    (onChange)=\"onParamKitValueChange($event)\"></core-common-param-kit>\r\n            </div>\r\n        }\r\n\r\n    } @else {\r\n    <core-tabs [headers]=\"tabHeaders\" [contents]=\"[]\" [height]=\"45\" [headerLineHeight]=\"45\"\r\n        (onHeaderClick)=\"onCoreTabsHeaderClick($event)\">\r\n    </core-tabs>\r\n    }\r\n\r\n    <ng-container *ngTemplateOutlet=\"top\">\r\n    </ng-container>\r\n\r\n</ng-template>\r\n\r\n<ng-template #coreTable>\r\n\r\n    <div [class.opacity0]=\"!!!geometricDone\">\r\n\r\n        <!--\r\n            Khi \u0111\u00E3 t\u00EDnh \u0111\u01B0\u1EE3c ch\u00EDnh x\u00E1c chi\u1EC1u cao compositionHeight c\u1EE7a core-composition\r\n            C\u1EA7n t\u00EDnh \u0111\u01B0\u1EE3c ch\u00EDnh x\u00E1c chi\u1EC1u cao coreTableHeight c\u1EE7a CoreTable\r\n            N\u1EBFu ph\u1EA7n top c\u1EE7a composition c\u1ED1 \u0111\u1ECBnh (v\u00ED d\u1EE5 khi s\u1EED d\u1EE5ng CoreParamKit) th\u00EC ph\u00E9p tr\u1EEB \u0111\u01A1n gi\u1EA3n\r\n            Nh\u01B0ng n\u1EBFu ph\u1EA7n top \u0111\u01B0\u1EE3c customize, ta ph\u1EA3i s\u1EED d\u1EE5ng extraManualOffset\r\n\r\n            C\u1EA7n t\u00EDnh tableHeight nh\u01B0 th\u1EBF n\u00E0o?\r\n        -->\r\n        <core-table #coreTableAlone width=\"100%\" [height]=\"tableHeight\" [rowHeight]=\"rowHeight || '46px'\" [wrap]=\"wrap\"\r\n            [primaryKey]=\"primaryKey\"\r\n            [columns]=\"columns\" [data]=\"list\" [showCheckbox]=\"!!!hideCheck\" headerHeight=\"60px\"\r\n            [showTools]=\"showListInlineTools\" [tools]=\"inlineTools\" (onToolClick)=\"onToolClick($event)\"\r\n            (onRowClick)=\"onRowClick($event)\" (onRowDoubleClick)=\"onRowDoubleClick($event)\"\r\n            (onSelectedIdsChange)=\"onSelectedIdsChange($event)\" (onSelectedDataChange)=\"onSelectedDataChange($event)\"\r\n            [frozen]=\"frozen || 1\" (onSearching)=\"onSearching($event)\"\r\n            (onColumnCaptionClick)=\"onColumnCaptionClick($event)\"\r\n            [corePageListInstanceNumber]=\"corePageListInstanceNumber\" [loading]=\"loading\"\r\n            [columnSearchDefaultOpen]=\"columnSearchDefaultOpen\" [lazyLoading]=\"true\" [headerWrap]=\"headerWrap\"\r\n            [headerFirstRowHeight]=\"headerFirstRowHeight\" [noPaddingCell]=\"noPaddingCell\"\r\n            [disableHighlightOnClick]=\"disableHighlightOnClick\" [primaryKey]=\"primaryKey\"\r\n            [autoColumnFitAvailableSpace]=\"autoColumnFitAvailableSpace\"\r\n            [checkboxExplicity]=\"checkboxExplicity\"\r\n            ></core-table>\r\n\r\n        <div class=\"d-flex d-flex-between pagination-wrapper w-100\" #paginationContainer>\r\n            <core-pagination-full [height]=\"paginationHeight\" [currentPage$]=\"currentPage$\" [pageSize$]=\"pageSize$\"\r\n                [pageCount]=\"pageCount\" [innerBodyCount$]=\"innerBodyCount$\" [pagination$]=\"pagination$\"\r\n                [loading]=\"loading\" [fixedPageSize]=\"fixedPageSize\" [background]=\"'#848484'\"></core-pagination-full>\r\n\r\n        </div>\r\n\r\n    </div>\r\n\r\n</ng-template>\r\n\r\n<core-api-progress *ngIf=\"longApiRunning\" (onClose)=\"onProgressWindowClose($event)\"></core-api-progress>\r\n\r\n<app-fullscreen-modal-loader *ngIf=\"prefetchLoading\"></app-fullscreen-modal-loader>", styles: [".core-page-list-container{--height: auto;box-sizing:border-box!important;border:none!important;height:var(--height)}.core-page-list-container *{box-sizing:border-box}.core-page-list-container .column-caption{text-align:center}.core-page-list-container core-pagination-full{width:100%}.core-page-list-container .filter-kit-dropdown{top:120px;right:120px;position:fixed;box-shadow:0 1rem 3rem #0000002e}\n"] }]
         }], ctorParameters: () => [{ type: CorePageListService }, { type: CorePageListState }, { type: CorePageEditService }, { type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: MultiLanguageService }, { type: AlertService }, { type: AuthService }, { type: AppService }, { type: DialogService }, { type: RoutingService }, { type: LongTaskService }, { type: LayoutService }, { type: CoreCompositionService }, { type: CoreButtonGroupService }, { type: JsonService }, { type: WorkShiftDndService }, { type: DomService }, { type: FilterKitService }, { type: CoreFilterHubService }, { type: CoreTableService }], propDecorators: { normalMode: [{
                 type: Input
             }], hideHeader: [{
@@ -21013,7 +21015,8 @@ class AtShiftPatternComponent extends BaseEditComponent {
             queryListRelativePath: '/api/AtShiftPattern/QueryList',
         };
         this.crud = {
-            deleteIds: '/api/AtShiftPattern/DeleteIds'
+            deleteIds: '/api/AtShiftPattern/DeleteIds',
+            toggleActiveIds: '/api/AtShiftPattern/ToggleActiveIds'
         };
         this.columns = [
             {
@@ -21023,6 +21026,13 @@ class AtShiftPatternComponent extends BaseEditComponent {
                 type: 'number',
                 align: 'center'
             },
+            {
+                caption: EnumTranslateKey.UI_COMMON_EMPTY_STRING,
+                field: 'status',
+                type: 'string',
+                align: 'center',
+                width: 120
+            },
             {
                 caption: 'UI_ENTITY_FIELD_CAPTION_AT_SHIFT_PATTERN_PATTERN_TYPE',
                 field: 'patternType',
@@ -21083,6 +21093,10 @@ class AtShiftPatternComponent extends BaseEditComponent {
     }
     ngAfterViewInit() {
         setTimeout(() => {
+            const tryFilter = this.columns.filter(x => x.field === 'status');
+            if (!!tryFilter.length) {
+                tryFilter[0].templateRef = this.sticker;
+            }
             this.resolveSaveButton(true);
             this.subscriptions.push(this.rowClick$.pipe(filter(x => !!x), distinctUntilChanged()).subscribe(_ => {
                 this.loadItem();
@@ -21147,19 +21161,23 @@ class AtShiftPatternComponent extends BaseEditComponent {
         this.atShiftPatternService.activePattern$.next(undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: AtShiftPatternComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: AtShiftPatternComponent, isStandalone: true, selector: "core-at-shift-pattern", usesInheritance: true, ngImport: i0, template: "<div class=\"core-at-shift-pattern-container\">\r\n\r\n    <!-- <core-page-header [title]=\"title\" (buttonClick)=\"onCorePageHeaderButtonClick($event)\"></core-page-header> -->\r\n\r\n    <div class=\"d-flex d-flex-between content-wrapper\">\r\n        <div class=\"list-block\">\r\n            <core-page-list [apiDefinition]=\"apiDefinition\" [columns]=\"columns\" [editRoute]=\"editRoute\" [crud]=\"crud\"\r\n                [title]=\"title\" [autoResizeWithWindow]=\"true\" [checkboxExplicity]=\"true\"\r\n                (listChange)=\"onListChange($event)\"\r\n                (corePageHeaderButtonClick)=\"onCorePageHeaderButtonClick($event)\"\r\n                (onInstanceCreated)=\"onInstanceCreated($event)\" (rowClick)=\"rowClick($event)\"></core-page-list>\r\n        </div>\r\n\r\n        @if (!(atShiftPatternService.activePattern$ | async)) {\r\n        <div class=\"anim-block\">\r\n            <div class=\"alert is-success\">\r\n                <p class=\"alert-title\"><span class=\"ti-light-bulb\" aria-hidden=\"true\"></span>\r\n                    @if (lang === 'vi') {\r\n                        G\u1EE2I \u00DD\r\n                    } @else {\r\n                        TIP\r\n                    }\r\n                    \r\n                </p>\r\n\r\n                <div>\r\n                    @if (lang === 'vi') {\r\n                    M\u1EABu x\u1EBFp ca l\u00E0 c\u00F4ng c\u1EE5 tr\u1EF1c quan v\u00E0 ti\u1EC7n l\u1EE3i gi\u00FAp ph\u00F2ng nh\u00E2n s\u1EF1 (HR) qu\u1EA3n l\u00FD v\u00E0 b\u1ED1 tr\u00ED ca l\u00E0m vi\u1EC7c\r\n                    cho nh\u00E2n vi\u00EAn m\u1ED9t c\u00E1ch hi\u1EC7u qu\u1EA3. M\u00E0n h\u00ECnh n\u00E0y \u0111\u01B0\u1EE3c thi\u1EBFt k\u1EBF \u0111\u1EC3 \u0111\u00E1p \u1EE9ng nhu c\u1EA7u l\u1EADp k\u1EBF ho\u1EA1ch c\u00F4ng\r\n                    vi\u1EC7c h\u00E0ng ng\u00E0y, h\u00E0ng tu\u1EA7n ho\u1EB7c theo chu k\u1EF3 c\u1EE5 th\u1EC3, \u0111\u1EA3m b\u1EA3o t\u00EDnh linh ho\u1EA1t v\u00E0 s\u1EF1 d\u1EC5 d\u00E0ng trong qu\u1EA3n\r\n                    l\u00FD.\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        <b style='color: gray;'>X\u1EBFp ca theo m\u1EABu tu\u1EA7n (WEEK)</b>:\r\n                        Cho ph\u00E9p HR b\u1ED1 tr\u00ED ca l\u00E0m vi\u1EC7c d\u1EF1a tr\u00EAn c\u00E1c th\u1EE9 trong tu\u1EA7n, v\u00ED d\u1EE5: th\u1EE9 Hai, th\u1EE9 Ba, v.v. Ph\u00F9 h\u1EE3p\r\n                        cho\r\n                        nh\u1EEFng chu k\u1EF3 l\u00E0m vi\u1EC7c l\u1EB7p l\u1EA1i \u0111\u1ECBnh k\u1EF3 (v\u00ED d\u1EE5: l\u1ECBch l\u00E0m vi\u1EC7c tu\u1EA7n).\r\n                    </div>\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        <b style='color: gray;'>X\u1EBFp ca theo chu\u1ED7i ng\u00E0y (DAYS)</b>:\r\n                        D\u00E0nh cho c\u00E1c tr\u01B0\u1EDDng h\u1EE3p x\u1EBFp ca kh\u00F4ng c\u1ED1 \u0111\u1ECBnh theo th\u1EE9 trong tu\u1EA7n m\u00E0 d\u1EF1a tr\u00EAn m\u1ED9t chu\u1ED7i ng\u00E0y li\u00EAn\r\n                        t\u1EE5c. HR c\u00F3 th\u1EC3 ch\u1EC9 \u0111\u1ECBnh b\u1EAFt \u0111\u1EA7u t\u1EEB ng\u00E0y b\u1EA5t k\u1EF3 v\u00E0 thi\u1EBFt l\u1EADp c\u00E1c ca l\u00E0m vi\u1EC7c t\u01B0\u01A1ng \u1EE9ng.\r\n                    </div>\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        \u1EA4n F1 \u0111\u1EC3 c\u00F3 th\u00EAm chi ti\u1EBFt\r\n                    </div>\r\n                    } @else {\r\n                    Shift Scheduling Template is an intuitive and convenient tool to help HR departments effectively\r\n                    manage\r\n                    and assign work shifts for employees. This screen is designed to meet the needs of daily, weekly, or\r\n                    specific cycle-based work planning, ensuring flexibility and ease of management.\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        <b style='color: gray;'>Schedule shifts by weekly pattern (WEEK)</b>:\r\n                        Allows HR to assign work shifts based on days of the week, e.g., Monday, Tuesday, etc. This is\r\n                        suitable for recurring work cycles (e.g., weekly schedules).\r\n                    </div>\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        <b style='color: gray;'>Schedule shifts by sequence of days (DAYS)</b>:\r\n                        Designed for cases where shifts are assigned based on a continuous sequence of days rather than\r\n                        specific days of the week. HR can specify any start date and set up corresponding work shifts.\r\n                    </div>\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        Press F1 for more details\r\n                    </div>\r\n                    }\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n        }\r\n\r\n        @if (!!(atShiftPatternService.activePattern$ | async)) {\r\n        <div class=\"detail-block\">\r\n            <div class=\"details-wrapper\">\r\n                <div class=\"details-title\">\r\n                    \u2728 {{ (atShiftPatternService.activePattern$ | async)?.code }}\r\n                </div>\r\n                <core-at-shift-pattern-detail\r\n                    [data$]=\"atShiftPatternService.activePattern$\" (onCellChange)=\"onCellChange($event)\"></core-at-shift-pattern-detail>\r\n            </div>\r\n        </div>\r\n        }\r\n\r\n    </div>\r\n\r\n\r\n    @if (!!loading) {\r\n    <app-fullscreen-modal-loader></app-fullscreen-modal-loader>\r\n    }\r\n\r\n</div>", styles: [".core-at-shift-pattern-container .list-block{width:50vw}.core-at-shift-pattern-container .anim-container{height:calc(100vh - 60px);display:flex;align-items:flex-start;justify-content:flex-end}.core-at-shift-pattern-container .anim-block,.core-at-shift-pattern-container .detail-block{margin-left:15px;padding-top:50px;display:flex}.core-at-shift-pattern-container .anim-block{width:100%;flex-direction:column;align-items:center;justify-content:space-around}.core-at-shift-pattern-container .detail-block{width:100%;align-items:flex-start;justify-content:center}.core-at-shift-pattern-container .details-wrapper{background-color:bisque;padding:0 15px 15px;width:100%;overflow-x:scroll}.core-at-shift-pattern-container .details-wrapper .details-title{height:40px;display:flex;align-items:center;justify-content:flex-start;font-weight:700}.core-at-shift-pattern-container .details-wrapper .col-md-4{min-width:280px}.core-at-shift-pattern-container .content-wrapper{align-items:flex-start}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: CorePageListComponent, selector: "core-page-list", inputs: ["normalMode", "hideHeader", "hideButtonGroup", "seekerMode", "mccMode", "height", "headerWrap", "headerFirstRowHeight", "enableTimeZoneConverterForDateTimePeriodParameters", "showParamKit", "enableFilterKit", "datePeriodComparisonFor", "datePeriodComparisonForLabelKey", "statusInclusionFor", "statusInclusionForLabelKey", "statusOptionsApi", "statusOptions$", "showOrgParam", "showOrgParamDropdown", "hideGeneralSearch", "hideDatePeriodComparison", "hideStatusInclusion", "filterOperators$", "camelCaseDtoStatusIdField", "gridStatusColumn", "title", "hasIdOfStringType", "hideCheck", "apiDefinition", "columns", "useTheseColumns", "hideOrgTree", "frozen", "inlineTools", "inlineToolItems", "editRoute", "crud", "showListInlineTools", "top", "left", "hideLeft", "outerParam$", "outerFilter$", "outerSort", "outerFilterOperators", "outerInOperators", "autoResizeWithWindow", "extraManualOffset", "wrap", "rowHeight", "selfResolveCorePageHeaderButtonClick", "clearData$", "deleteValidateFn", "generateTemplateRequest", "importPreviewPath", "columnSearchDefaultOpen", "fixedPageSize", "disableDoubleClick", "noPaddingCell", "disableHighlightOnClick", "loading$", "excludedIds$", "disableDialogInformationLines", "changeTracking", "primaryKey", "changedItems$", "tabMode", "paramRows", "disableFilterHub", "autoColumnFitAvailableSpace", "ignoredDefaultActions", "checkboxExplicity"], outputs: ["corePageHeaderButtonClick", "rowClick", "rowDoubleClick", "selectedIdsChange", "selectedDataChange", "onInstanceCreated", "onInputFileBase64DataReady", "listChange"] }, { kind: "component", type: AtShiftPatternDetailComponent, selector: "core-at-shift-pattern-detail", inputs: ["data$"], outputs: ["onCellChange"] }, { kind: "component", type: FullscreenModalLoaderComponent, selector: "app-fullscreen-modal-loader", inputs: ["content"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: AtShiftPatternComponent, isStandalone: true, selector: "core-at-shift-pattern", viewQueries: [{ propertyName: "sticker", first: true, predicate: ["sticker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"core-at-shift-pattern-container\">\r\n\r\n    <!-- <core-page-header [title]=\"title\" (buttonClick)=\"onCorePageHeaderButtonClick($event)\"></core-page-header> -->\r\n\r\n    <div class=\"d-flex d-flex-between content-wrapper\">\r\n        <div class=\"list-block\">\r\n            <core-page-list [apiDefinition]=\"apiDefinition\" [columns]=\"columns\" [editRoute]=\"editRoute\" [crud]=\"crud\"\r\n                [title]=\"title\" [autoResizeWithWindow]=\"true\" [checkboxExplicity]=\"true\"\r\n                (listChange)=\"onListChange($event)\"\r\n                (corePageHeaderButtonClick)=\"onCorePageHeaderButtonClick($event)\"\r\n                (onInstanceCreated)=\"onInstanceCreated($event)\" (rowClick)=\"rowClick($event)\"></core-page-list>\r\n        </div>\r\n\r\n        @if (!(atShiftPatternService.activePattern$ | async)) {\r\n        <div class=\"anim-block\">\r\n            <div class=\"alert is-success\">\r\n                <p class=\"alert-title\"><span class=\"ti-light-bulb\" aria-hidden=\"true\"></span>\r\n                    @if (lang === 'vi') {\r\n                        G\u1EE2I \u00DD\r\n                    } @else {\r\n                        TIP\r\n                    }\r\n                    \r\n                </p>\r\n\r\n                <div>\r\n                    @if (lang === 'vi') {\r\n                    M\u1EABu x\u1EBFp ca l\u00E0 c\u00F4ng c\u1EE5 tr\u1EF1c quan v\u00E0 ti\u1EC7n l\u1EE3i gi\u00FAp ph\u00F2ng nh\u00E2n s\u1EF1 (HR) qu\u1EA3n l\u00FD v\u00E0 b\u1ED1 tr\u00ED ca l\u00E0m vi\u1EC7c\r\n                    cho nh\u00E2n vi\u00EAn m\u1ED9t c\u00E1ch hi\u1EC7u qu\u1EA3. M\u00E0n h\u00ECnh n\u00E0y \u0111\u01B0\u1EE3c thi\u1EBFt k\u1EBF \u0111\u1EC3 \u0111\u00E1p \u1EE9ng nhu c\u1EA7u l\u1EADp k\u1EBF ho\u1EA1ch c\u00F4ng\r\n                    vi\u1EC7c h\u00E0ng ng\u00E0y, h\u00E0ng tu\u1EA7n ho\u1EB7c theo chu k\u1EF3 c\u1EE5 th\u1EC3, \u0111\u1EA3m b\u1EA3o t\u00EDnh linh ho\u1EA1t v\u00E0 s\u1EF1 d\u1EC5 d\u00E0ng trong qu\u1EA3n\r\n                    l\u00FD.\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        <b style='color: gray;'>X\u1EBFp ca theo m\u1EABu tu\u1EA7n (WEEK)</b>:\r\n                        Cho ph\u00E9p HR b\u1ED1 tr\u00ED ca l\u00E0m vi\u1EC7c d\u1EF1a tr\u00EAn c\u00E1c th\u1EE9 trong tu\u1EA7n, v\u00ED d\u1EE5: th\u1EE9 Hai, th\u1EE9 Ba, v.v. Ph\u00F9 h\u1EE3p\r\n                        cho\r\n                        nh\u1EEFng chu k\u1EF3 l\u00E0m vi\u1EC7c l\u1EB7p l\u1EA1i \u0111\u1ECBnh k\u1EF3 (v\u00ED d\u1EE5: l\u1ECBch l\u00E0m vi\u1EC7c tu\u1EA7n).\r\n                    </div>\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        <b style='color: gray;'>X\u1EBFp ca theo chu\u1ED7i ng\u00E0y (DAYS)</b>:\r\n                        D\u00E0nh cho c\u00E1c tr\u01B0\u1EDDng h\u1EE3p x\u1EBFp ca kh\u00F4ng c\u1ED1 \u0111\u1ECBnh theo th\u1EE9 trong tu\u1EA7n m\u00E0 d\u1EF1a tr\u00EAn m\u1ED9t chu\u1ED7i ng\u00E0y li\u00EAn\r\n                        t\u1EE5c. HR c\u00F3 th\u1EC3 ch\u1EC9 \u0111\u1ECBnh b\u1EAFt \u0111\u1EA7u t\u1EEB ng\u00E0y b\u1EA5t k\u1EF3 v\u00E0 thi\u1EBFt l\u1EADp c\u00E1c ca l\u00E0m vi\u1EC7c t\u01B0\u01A1ng \u1EE9ng.\r\n                    </div>\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        \u1EA4n F1 \u0111\u1EC3 c\u00F3 th\u00EAm chi ti\u1EBFt\r\n                    </div>\r\n                    } @else {\r\n                    Shift Scheduling Template is an intuitive and convenient tool to help HR departments effectively\r\n                    manage\r\n                    and assign work shifts for employees. This screen is designed to meet the needs of daily, weekly, or\r\n                    specific cycle-based work planning, ensuring flexibility and ease of management.\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        <b style='color: gray;'>Schedule shifts by weekly pattern (WEEK)</b>:\r\n                        Allows HR to assign work shifts based on days of the week, e.g., Monday, Tuesday, etc. This is\r\n                        suitable for recurring work cycles (e.g., weekly schedules).\r\n                    </div>\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        <b style='color: gray;'>Schedule shifts by sequence of days (DAYS)</b>:\r\n                        Designed for cases where shifts are assigned based on a continuous sequence of days rather than\r\n                        specific days of the week. HR can specify any start date and set up corresponding work shifts.\r\n                    </div>\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        Press F1 for more details\r\n                    </div>\r\n                    }\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n        }\r\n\r\n        @if (!!(atShiftPatternService.activePattern$ | async)) {\r\n        <div class=\"detail-block\">\r\n            <div class=\"details-wrapper\">\r\n                <div class=\"details-title\">\r\n                    \u2728 {{ (atShiftPatternService.activePattern$ | async)?.code }}\r\n                </div>\r\n                <core-at-shift-pattern-detail\r\n                    [data$]=\"atShiftPatternService.activePattern$\" (onCellChange)=\"onCellChange($event)\"></core-at-shift-pattern-detail>\r\n            </div>\r\n        </div>\r\n        }\r\n\r\n    </div>\r\n\r\n\r\n    @if (!!loading) {\r\n    <app-fullscreen-modal-loader></app-fullscreen-modal-loader>\r\n    }\r\n\r\n    <ng-template #sticker let-code=\"context.status\">\r\n        <core-status-sticker [code]=\"code\" [isTrueCode]=\"true\"></core-status-sticker>\r\n    </ng-template>\r\n\r\n</div>", styles: [".core-at-shift-pattern-container .list-block{width:50vw}.core-at-shift-pattern-container .anim-container{height:calc(100vh - 60px);display:flex;align-items:flex-start;justify-content:flex-end}.core-at-shift-pattern-container .anim-block,.core-at-shift-pattern-container .detail-block{margin-left:15px;padding-top:50px;display:flex}.core-at-shift-pattern-container .anim-block{width:100%;flex-direction:column;align-items:center;justify-content:space-around}.core-at-shift-pattern-container .detail-block{width:100%;align-items:flex-start;justify-content:center}.core-at-shift-pattern-container .details-wrapper{background-color:bisque;padding:0 15px 15px;width:100%;overflow-x:scroll}.core-at-shift-pattern-container .details-wrapper .details-title{height:40px;display:flex;align-items:center;justify-content:flex-start;font-weight:700}.core-at-shift-pattern-container .details-wrapper .col-md-4{min-width:280px}.core-at-shift-pattern-container .content-wrapper{align-items:flex-start}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: CoreStatusStickerComponent, selector: "core-status-sticker", inputs: ["code", "caption", "width", "isTrueCode"] }, { kind: "component", type: CorePageListComponent, selector: "core-page-list", inputs: ["normalMode", "hideHeader", "hideButtonGroup", "seekerMode", "mccMode", "height", "headerWrap", "headerFirstRowHeight", "enableTimeZoneConverterForDateTimePeriodParameters", "showParamKit", "enableFilterKit", "datePeriodComparisonFor", "datePeriodComparisonForLabelKey", "statusInclusionFor", "statusInclusionForLabelKey", "statusOptionsApi", "statusOptions$", "showOrgParam", "showOrgParamDropdown", "hideGeneralSearch", "hideDatePeriodComparison", "hideStatusInclusion", "filterOperators$", "camelCaseDtoStatusIdField", "gridStatusColumn", "title", "hasIdOfStringType", "hideCheck", "apiDefinition", "columns", "useTheseColumns", "hideOrgTree", "frozen", "inlineTools", "inlineToolItems", "editRoute", "crud", "showListInlineTools", "top", "left", "hideLeft", "outerParam$", "outerFilter$", "outerSort", "outerFilterOperators", "outerInOperators", "autoResizeWithWindow", "extraManualOffset", "wrap", "rowHeight", "selfResolveCorePageHeaderButtonClick", "clearData$", "deleteValidateFn", "generateTemplateRequest", "importPreviewPath", "columnSearchDefaultOpen", "fixedPageSize", "disableDoubleClick", "noPaddingCell", "disableHighlightOnClick", "loading$", "excludedIds$", "disableDialogInformationLines", "changeTracking", "primaryKey", "changedItems$", "tabMode", "paramRows", "disableFilterHub", "autoColumnFitAvailableSpace", "ignoredDefaultActions", "checkboxExplicity"], outputs: ["corePageHeaderButtonClick", "rowClick", "rowDoubleClick", "selectedIdsChange", "selectedDataChange", "onInstanceCreated", "onInputFileBase64DataReady", "listChange"] }, { kind: "component", type: AtShiftPatternDetailComponent, selector: "core-at-shift-pattern-detail", inputs: ["data$"], outputs: ["onCellChange"] }, { kind: "component", type: FullscreenModalLoaderComponent, selector: "app-fullscreen-modal-loader", inputs: ["content"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: AtShiftPatternComponent, decorators: [{
             type: Component,
             args: [{ selector: 'core-at-shift-pattern', imports: [
                         AsyncPipe,
+                        CoreStatusStickerComponent,
                         CorePageHeaderComponent,
                         CorePageListComponent,
                         AtShiftPatternEditComponent,
                         AtShiftPatternDetailComponent,
                         FullscreenModalLoaderComponent
-                    ], template: "<div class=\"core-at-shift-pattern-container\">\r\n\r\n    <!-- <core-page-header [title]=\"title\" (buttonClick)=\"onCorePageHeaderButtonClick($event)\"></core-page-header> -->\r\n\r\n    <div class=\"d-flex d-flex-between content-wrapper\">\r\n        <div class=\"list-block\">\r\n            <core-page-list [apiDefinition]=\"apiDefinition\" [columns]=\"columns\" [editRoute]=\"editRoute\" [crud]=\"crud\"\r\n                [title]=\"title\" [autoResizeWithWindow]=\"true\" [checkboxExplicity]=\"true\"\r\n                (listChange)=\"onListChange($event)\"\r\n                (corePageHeaderButtonClick)=\"onCorePageHeaderButtonClick($event)\"\r\n                (onInstanceCreated)=\"onInstanceCreated($event)\" (rowClick)=\"rowClick($event)\"></core-page-list>\r\n        </div>\r\n\r\n        @if (!(atShiftPatternService.activePattern$ | async)) {\r\n        <div class=\"anim-block\">\r\n            <div class=\"alert is-success\">\r\n                <p class=\"alert-title\"><span class=\"ti-light-bulb\" aria-hidden=\"true\"></span>\r\n                    @if (lang === 'vi') {\r\n                        G\u1EE2I \u00DD\r\n                    } @else {\r\n                        TIP\r\n                    }\r\n                    \r\n                </p>\r\n\r\n                <div>\r\n                    @if (lang === 'vi') {\r\n                    M\u1EABu x\u1EBFp ca l\u00E0 c\u00F4ng c\u1EE5 tr\u1EF1c quan v\u00E0 ti\u1EC7n l\u1EE3i gi\u00FAp ph\u00F2ng nh\u00E2n s\u1EF1 (HR) qu\u1EA3n l\u00FD v\u00E0 b\u1ED1 tr\u00ED ca l\u00E0m vi\u1EC7c\r\n                    cho nh\u00E2n vi\u00EAn m\u1ED9t c\u00E1ch hi\u1EC7u qu\u1EA3. M\u00E0n h\u00ECnh n\u00E0y \u0111\u01B0\u1EE3c thi\u1EBFt k\u1EBF \u0111\u1EC3 \u0111\u00E1p \u1EE9ng nhu c\u1EA7u l\u1EADp k\u1EBF ho\u1EA1ch c\u00F4ng\r\n                    vi\u1EC7c h\u00E0ng ng\u00E0y, h\u00E0ng tu\u1EA7n ho\u1EB7c theo chu k\u1EF3 c\u1EE5 th\u1EC3, \u0111\u1EA3m b\u1EA3o t\u00EDnh linh ho\u1EA1t v\u00E0 s\u1EF1 d\u1EC5 d\u00E0ng trong qu\u1EA3n\r\n                    l\u00FD.\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        <b style='color: gray;'>X\u1EBFp ca theo m\u1EABu tu\u1EA7n (WEEK)</b>:\r\n                        Cho ph\u00E9p HR b\u1ED1 tr\u00ED ca l\u00E0m vi\u1EC7c d\u1EF1a tr\u00EAn c\u00E1c th\u1EE9 trong tu\u1EA7n, v\u00ED d\u1EE5: th\u1EE9 Hai, th\u1EE9 Ba, v.v. Ph\u00F9 h\u1EE3p\r\n                        cho\r\n                        nh\u1EEFng chu k\u1EF3 l\u00E0m vi\u1EC7c l\u1EB7p l\u1EA1i \u0111\u1ECBnh k\u1EF3 (v\u00ED d\u1EE5: l\u1ECBch l\u00E0m vi\u1EC7c tu\u1EA7n).\r\n                    </div>\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        <b style='color: gray;'>X\u1EBFp ca theo chu\u1ED7i ng\u00E0y (DAYS)</b>:\r\n                        D\u00E0nh cho c\u00E1c tr\u01B0\u1EDDng h\u1EE3p x\u1EBFp ca kh\u00F4ng c\u1ED1 \u0111\u1ECBnh theo th\u1EE9 trong tu\u1EA7n m\u00E0 d\u1EF1a tr\u00EAn m\u1ED9t chu\u1ED7i ng\u00E0y li\u00EAn\r\n                        t\u1EE5c. HR c\u00F3 th\u1EC3 ch\u1EC9 \u0111\u1ECBnh b\u1EAFt \u0111\u1EA7u t\u1EEB ng\u00E0y b\u1EA5t k\u1EF3 v\u00E0 thi\u1EBFt l\u1EADp c\u00E1c ca l\u00E0m vi\u1EC7c t\u01B0\u01A1ng \u1EE9ng.\r\n                    </div>\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        \u1EA4n F1 \u0111\u1EC3 c\u00F3 th\u00EAm chi ti\u1EBFt\r\n                    </div>\r\n                    } @else {\r\n                    Shift Scheduling Template is an intuitive and convenient tool to help HR departments effectively\r\n                    manage\r\n                    and assign work shifts for employees. This screen is designed to meet the needs of daily, weekly, or\r\n                    specific cycle-based work planning, ensuring flexibility and ease of management.\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        <b style='color: gray;'>Schedule shifts by weekly pattern (WEEK)</b>:\r\n                        Allows HR to assign work shifts based on days of the week, e.g., Monday, Tuesday, etc. This is\r\n                        suitable for recurring work cycles (e.g., weekly schedules).\r\n                    </div>\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        <b style='color: gray;'>Schedule shifts by sequence of days (DAYS)</b>:\r\n                        Designed for cases where shifts are assigned based on a continuous sequence of days rather than\r\n                        specific days of the week. HR can specify any start date and set up corresponding work shifts.\r\n                    </div>\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        Press F1 for more details\r\n                    </div>\r\n                    }\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n        }\r\n\r\n        @if (!!(atShiftPatternService.activePattern$ | async)) {\r\n        <div class=\"detail-block\">\r\n            <div class=\"details-wrapper\">\r\n                <div class=\"details-title\">\r\n                    \u2728 {{ (atShiftPatternService.activePattern$ | async)?.code }}\r\n                </div>\r\n                <core-at-shift-pattern-detail\r\n                    [data$]=\"atShiftPatternService.activePattern$\" (onCellChange)=\"onCellChange($event)\"></core-at-shift-pattern-detail>\r\n            </div>\r\n        </div>\r\n        }\r\n\r\n    </div>\r\n\r\n\r\n    @if (!!loading) {\r\n    <app-fullscreen-modal-loader></app-fullscreen-modal-loader>\r\n    }\r\n\r\n</div>", styles: [".core-at-shift-pattern-container .list-block{width:50vw}.core-at-shift-pattern-container .anim-container{height:calc(100vh - 60px);display:flex;align-items:flex-start;justify-content:flex-end}.core-at-shift-pattern-container .anim-block,.core-at-shift-pattern-container .detail-block{margin-left:15px;padding-top:50px;display:flex}.core-at-shift-pattern-container .anim-block{width:100%;flex-direction:column;align-items:center;justify-content:space-around}.core-at-shift-pattern-container .detail-block{width:100%;align-items:flex-start;justify-content:center}.core-at-shift-pattern-container .details-wrapper{background-color:bisque;padding:0 15px 15px;width:100%;overflow-x:scroll}.core-at-shift-pattern-container .details-wrapper .details-title{height:40px;display:flex;align-items:center;justify-content:flex-start;font-weight:700}.core-at-shift-pattern-container .details-wrapper .col-md-4{min-width:280px}.core-at-shift-pattern-container .content-wrapper{align-items:flex-start}\n"] }]
-        }] });
+                    ], template: "<div class=\"core-at-shift-pattern-container\">\r\n\r\n    <!-- <core-page-header [title]=\"title\" (buttonClick)=\"onCorePageHeaderButtonClick($event)\"></core-page-header> -->\r\n\r\n    <div class=\"d-flex d-flex-between content-wrapper\">\r\n        <div class=\"list-block\">\r\n            <core-page-list [apiDefinition]=\"apiDefinition\" [columns]=\"columns\" [editRoute]=\"editRoute\" [crud]=\"crud\"\r\n                [title]=\"title\" [autoResizeWithWindow]=\"true\" [checkboxExplicity]=\"true\"\r\n                (listChange)=\"onListChange($event)\"\r\n                (corePageHeaderButtonClick)=\"onCorePageHeaderButtonClick($event)\"\r\n                (onInstanceCreated)=\"onInstanceCreated($event)\" (rowClick)=\"rowClick($event)\"></core-page-list>\r\n        </div>\r\n\r\n        @if (!(atShiftPatternService.activePattern$ | async)) {\r\n        <div class=\"anim-block\">\r\n            <div class=\"alert is-success\">\r\n                <p class=\"alert-title\"><span class=\"ti-light-bulb\" aria-hidden=\"true\"></span>\r\n                    @if (lang === 'vi') {\r\n                        G\u1EE2I \u00DD\r\n                    } @else {\r\n                        TIP\r\n                    }\r\n                    \r\n                </p>\r\n\r\n                <div>\r\n                    @if (lang === 'vi') {\r\n                    M\u1EABu x\u1EBFp ca l\u00E0 c\u00F4ng c\u1EE5 tr\u1EF1c quan v\u00E0 ti\u1EC7n l\u1EE3i gi\u00FAp ph\u00F2ng nh\u00E2n s\u1EF1 (HR) qu\u1EA3n l\u00FD v\u00E0 b\u1ED1 tr\u00ED ca l\u00E0m vi\u1EC7c\r\n                    cho nh\u00E2n vi\u00EAn m\u1ED9t c\u00E1ch hi\u1EC7u qu\u1EA3. M\u00E0n h\u00ECnh n\u00E0y \u0111\u01B0\u1EE3c thi\u1EBFt k\u1EBF \u0111\u1EC3 \u0111\u00E1p \u1EE9ng nhu c\u1EA7u l\u1EADp k\u1EBF ho\u1EA1ch c\u00F4ng\r\n                    vi\u1EC7c h\u00E0ng ng\u00E0y, h\u00E0ng tu\u1EA7n ho\u1EB7c theo chu k\u1EF3 c\u1EE5 th\u1EC3, \u0111\u1EA3m b\u1EA3o t\u00EDnh linh ho\u1EA1t v\u00E0 s\u1EF1 d\u1EC5 d\u00E0ng trong qu\u1EA3n\r\n                    l\u00FD.\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        <b style='color: gray;'>X\u1EBFp ca theo m\u1EABu tu\u1EA7n (WEEK)</b>:\r\n                        Cho ph\u00E9p HR b\u1ED1 tr\u00ED ca l\u00E0m vi\u1EC7c d\u1EF1a tr\u00EAn c\u00E1c th\u1EE9 trong tu\u1EA7n, v\u00ED d\u1EE5: th\u1EE9 Hai, th\u1EE9 Ba, v.v. Ph\u00F9 h\u1EE3p\r\n                        cho\r\n                        nh\u1EEFng chu k\u1EF3 l\u00E0m vi\u1EC7c l\u1EB7p l\u1EA1i \u0111\u1ECBnh k\u1EF3 (v\u00ED d\u1EE5: l\u1ECBch l\u00E0m vi\u1EC7c tu\u1EA7n).\r\n                    </div>\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        <b style='color: gray;'>X\u1EBFp ca theo chu\u1ED7i ng\u00E0y (DAYS)</b>:\r\n                        D\u00E0nh cho c\u00E1c tr\u01B0\u1EDDng h\u1EE3p x\u1EBFp ca kh\u00F4ng c\u1ED1 \u0111\u1ECBnh theo th\u1EE9 trong tu\u1EA7n m\u00E0 d\u1EF1a tr\u00EAn m\u1ED9t chu\u1ED7i ng\u00E0y li\u00EAn\r\n                        t\u1EE5c. HR c\u00F3 th\u1EC3 ch\u1EC9 \u0111\u1ECBnh b\u1EAFt \u0111\u1EA7u t\u1EEB ng\u00E0y b\u1EA5t k\u1EF3 v\u00E0 thi\u1EBFt l\u1EADp c\u00E1c ca l\u00E0m vi\u1EC7c t\u01B0\u01A1ng \u1EE9ng.\r\n                    </div>\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        \u1EA4n F1 \u0111\u1EC3 c\u00F3 th\u00EAm chi ti\u1EBFt\r\n                    </div>\r\n                    } @else {\r\n                    Shift Scheduling Template is an intuitive and convenient tool to help HR departments effectively\r\n                    manage\r\n                    and assign work shifts for employees. This screen is designed to meet the needs of daily, weekly, or\r\n                    specific cycle-based work planning, ensuring flexibility and ease of management.\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        <b style='color: gray;'>Schedule shifts by weekly pattern (WEEK)</b>:\r\n                        Allows HR to assign work shifts based on days of the week, e.g., Monday, Tuesday, etc. This is\r\n                        suitable for recurring work cycles (e.g., weekly schedules).\r\n                    </div>\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        <b style='color: gray;'>Schedule shifts by sequence of days (DAYS)</b>:\r\n                        Designed for cases where shifts are assigned based on a continuous sequence of days rather than\r\n                        specific days of the week. HR can specify any start date and set up corresponding work shifts.\r\n                    </div>\r\n\r\n                    <p></p>\r\n                    <div class=\"square-before\">\r\n                        Press F1 for more details\r\n                    </div>\r\n                    }\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n        }\r\n\r\n        @if (!!(atShiftPatternService.activePattern$ | async)) {\r\n        <div class=\"detail-block\">\r\n            <div class=\"details-wrapper\">\r\n                <div class=\"details-title\">\r\n                    \u2728 {{ (atShiftPatternService.activePattern$ | async)?.code }}\r\n                </div>\r\n                <core-at-shift-pattern-detail\r\n                    [data$]=\"atShiftPatternService.activePattern$\" (onCellChange)=\"onCellChange($event)\"></core-at-shift-pattern-detail>\r\n            </div>\r\n        </div>\r\n        }\r\n\r\n    </div>\r\n\r\n\r\n    @if (!!loading) {\r\n    <app-fullscreen-modal-loader></app-fullscreen-modal-loader>\r\n    }\r\n\r\n    <ng-template #sticker let-code=\"context.status\">\r\n        <core-status-sticker [code]=\"code\" [isTrueCode]=\"true\"></core-status-sticker>\r\n    </ng-template>\r\n\r\n</div>", styles: [".core-at-shift-pattern-container .list-block{width:50vw}.core-at-shift-pattern-container .anim-container{height:calc(100vh - 60px);display:flex;align-items:flex-start;justify-content:flex-end}.core-at-shift-pattern-container .anim-block,.core-at-shift-pattern-container .detail-block{margin-left:15px;padding-top:50px;display:flex}.core-at-shift-pattern-container .anim-block{width:100%;flex-direction:column;align-items:center;justify-content:space-around}.core-at-shift-pattern-container .detail-block{width:100%;align-items:flex-start;justify-content:center}.core-at-shift-pattern-container .details-wrapper{background-color:bisque;padding:0 15px 15px;width:100%;overflow-x:scroll}.core-at-shift-pattern-container .details-wrapper .details-title{height:40px;display:flex;align-items:center;justify-content:flex-start;font-weight:700}.core-at-shift-pattern-container .details-wrapper .col-md-4{min-width:280px}.core-at-shift-pattern-container .content-wrapper{align-items:flex-start}\n"] }]
+        }], propDecorators: { sticker: [{
+                type: ViewChild,
+                args: ['sticker']
+            }] } });
 
 class ShiftPatternDndService {
     constructor() {
@@ -21556,7 +21574,6 @@ class AtShiftPatternApplyComponent {
     }
     setupDndSubscriptions() {
         const containerElement = this.dropzone?.nativeElement;
-        // containerElement.style.setProperty('--background-color', 'lightgrey');
         const dragenterEvent = fromEvent(containerElement, 'dragenter');
         const dragoverEvent = fromEvent(containerElement, 'dragover');
         const dropEvent = fromEvent(containerElement, 'drop');
@@ -21567,6 +21584,7 @@ class AtShiftPatternApplyComponent {
             if (this.dndService.dragType !== EnumDragType.SHIFT_PATTERN)
                 return;
             this.isDraggingOverContainer = true;
+            this.dropzoneInsider?.nativeElement?.style.setProperty('display', 'none');
             this.cleanUpSubsequentSubscriptions();
             this.dragOverElements.add(ev.target);
             containerElement.classList.add('valid-drop');
@@ -21582,10 +21600,10 @@ class AtShiftPatternApplyComponent {
                 this.isDraggingOverContainer = false;
                 containerElement.classList.remove('valid-drop');
                 this.dropzone?.nativeElement.style.setProperty('background-color', 'lightgrey');
+                this.dropzoneInsider?.nativeElement?.style.setProperty('display', 'block');
                 const data = ev.dataTransfer?.getData('text/plain'); // Example data retrieval
                 // Handle drop logic based on data
                 if (data) {
-                    //alert(this.shiftPatternDndService.draggingPattern$.value?.code)
                     this.makePreviewData();
                 }
             });
@@ -21601,6 +21619,7 @@ class AtShiftPatternApplyComponent {
                     containerElement.classList.remove('valid-drop');
                 }
             }
+            this.dropzoneInsider?.nativeElement?.style.setProperty('display', 'block');
             if (this.dragOverElements.size === 0) {
                 containerElement.classList.remove('valid-drop');
             }
@@ -21929,12 +21948,13 @@ class AtShiftPatternApplyComponent {
         this.subscriptions.map(x => x?.unsubscribe());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: AtShiftPatternApplyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: AtShiftPatternApplyComponent, isStandalone: true, selector: "core-at-shift-pattern-apply", viewQueries: [{ propertyName: "dropzone", first: true, predicate: ["dropzone"], descendants: true }], ngImport: i0, template: "<div class=\"core-at-shift-pattern-apply-container\">\r\n    <core-page-header [title]=\"'UI_COMPONENT_TITLE_AT_SHIFT_PATTERN_APPLY'\" (buttonClick)=\"onCorePageHeaderButtonClick($event)\"></core-page-header>\r\n    <div class=\"patterns_condition-n-preview\">\r\n        <div class=\"collection-wrapper\">\r\n            <core-at-pattern-collection [relativeMode]=\"true\"\r\n                [height]=\"patternCollectionHeight\"></core-at-pattern-collection>\r\n        </div>\r\n        <div class=\"orgtree-wrapper\">\r\n            <core-org-tree [(ngModel)]=\"orgIds\"></core-org-tree>\r\n        </div>\r\n        <div class=\"condition-n-preview fs13\">\r\n\r\n            <div class=\"condition\">\r\n                <div class=\"d-flex d-flex-start mb15 pd3\">\r\n                    <div class=\"param-wrapper w200 mr15\">\r\n                        <label>K\u1EF3 c\u00F4ng</label>\r\n                        <div class=\"form-group vertical\">\r\n                            <core-month-selector [(ngModel)]=\"currentMonth\"\r\n                            (ngModelChange)=\"onCurrentMonthChange($event)\"></core-month-selector>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w175 mr15\">\r\n                        <label></label>\r\n                        <div class=\"form-group vertical\">\r\n                            <core-date-picker [(ngModel)]=\"startDate\" [rangeLimit]=\"dateRangeLimit\" (ngModelChange)=\"onStartDateChange($event)\"></core-date-picker>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w175 mr15\">\r\n                        <label></label>\r\n                        <div class=\"form-group vertical\">\r\n                            <core-date-picker [(ngModel)]=\"endDate\" [rangeLimit]=\"dateRangeLimit\" (ngModelChange)=\"onEndDateChange($event)\"></core-date-picker>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w250 mr15\">\r\n                        <div class=\"form-group vertical\">\r\n                            <label>\u0110\u1ED1i t\u01B0\u1EE3ng nh\u00E2n vi\u00EAn</label>\r\n                            <core-checklist [paramMode]=\"true\" [(ngModel)]=\"empObjectIds\"\r\n                                [options$]=\"empObjOptions$\"></core-checklist>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex d-flex-start mb15 pd3\">\r\n                    <div class=\"param-wrapper w180 mr15\">\r\n                        <div class=\"form-group vertical\">\r\n                            <label></label>\r\n                            <core-checkbox [text]=\"'B\u1ECF qua ng\u00E0y l\u1EC5'\" [(ngModel)]=\"ignoreHolidays\"></core-checkbox>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w200 mr15\">\r\n                        <div class=\"form-group vertical\">\r\n                            <label></label>\r\n                            <core-checkbox [text]=\"'B\u1ECF qua ng\u00E0y m\u1EABu tr\u1ED1ng'\" [(ngModel)]=\"ignoreEmptyCells\"></core-checkbox>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w180 mr15\">\r\n                        <div class=\"form-group vertical\">\r\n                            <label></label>\r\n                            <core-checkbox [text]=\"'Ghi \u0111\u00E8 c\u00E1c ca ch\u1EC9nh tay'\" [(ngModel)]=\"overrideDaysContainingManuallyEditedCells\"></core-checkbox>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"preview\">\r\n\r\n                <div #dropzone id=\"dropzone\" [class.ready]=\"dropzoneReady\" [ngStyle]=\"{\r\n                    height: dropzoneHeight + 'px'\r\n                }\">\r\n\r\n                    @if (!previewData || !previewData.length) {\r\n                        <div [ngStyle]=\"{\r\n                            display: 'flex',\r\n                            alignItems: 'center',\r\n                            justifyContent: 'center',\r\n                            width: '100%',\r\n                            height: dropzoneHeight + 'px'\r\n                        }\">\r\n                            <h2 style=\"color: white;\">\r\n                                @if (lang === 'vi') {\r\n                                    K\u00E9o th\u1EA3 m\u1EABu x\u1EBFp ca v\u00E0o \u0111\u00E2y...\r\n                                } @else {\r\n                                    Drag and drop a pattern here...\r\n                                }\r\n                                \r\n                            </h2>\r\n                        </div>\r\n                    } @else {\r\n                        <div class=\"container mt60\">\r\n\r\n                            <div class=\"row gx-5 gy-5\">\r\n    \r\n                                @for (dailyItem of previewData; track dailyItem.workingday) {\r\n                                    <div [class]=\"colMdClass\">\r\n                                        <div class=\"daily-item\">\r\n                                            <div class=\"daily-item-header\" [class.saturday]=\"!!dailyItem?.isSaturday\" [class.sunday]=\"!!dailyItem?.isSunday\">\r\n                                                <div class=\"workingday-wrapper d-flex d-flex-start\">\r\n                                                    <i class=\"feather-calendar\"></i><span>{{ dailyItem.workingday | tableCell : 'DATE_LOCALIZED' : lang }}</span>\r\n                                                </div>\r\n                                                @if (!!dailyItem.holidayName) {\r\n                                                    <div class=\"holidayName-wrapper d-flex d-flex-start\">\r\n                                                        <i class=\"feather-gift\"></i><span>{{ dailyItem.holidayName }}</span>\r\n                                                    </div>\r\n                                                }\r\n                                            </div>\r\n                                            <core-shift-cell [ngModel]=\"dailyItem.shifts\" [$readOnly]=\"true\"></core-shift-cell>\r\n                                        </div>\r\n                                    </div>\r\n                                }        \r\n    \r\n                            </div>\r\n    \r\n                        </div>\r\n    \r\n                    }\r\n\r\n                </div>\r\n\r\n            </div>\r\n\r\n            @if (showStartOffset && !!activeAtShiftPattern && !!scopeStartDate && !!scopeEndDate) {\r\n                <core-start-offset [pattern]=\"activeAtShiftPattern\" [scopeStartDate]=\"scopeStartDate\" [scopeEndDate]=\"scopeEndDate\" (onClose)=\"onCloseOffset($event)\"></core-start-offset>\r\n            }\r\n\r\n            @if (longApiRunning) {\r\n                <core-api-progress (onClose)=\"onProgressWindowClose($event)\"></core-api-progress>\r\n            }\r\n\r\n        </div>\r\n    </div>\r\n</div>", styles: [".core-at-shift-pattern-apply-container .patterns_condition-n-preview{position:relative;vertical-align:top}.core-at-shift-pattern-apply-container .patterns_condition-n-preview .collection-wrapper{display:block;position:absolute;left:0;top:0}.core-at-shift-pattern-apply-container .patterns_condition-n-preview .orgtree-wrapper{display:block;position:absolute;left:240px;top:0}.core-at-shift-pattern-apply-container .patterns_condition-n-preview .condition-n-preview{display:block;padding-left:555px}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone{display:block;position:relative;width:100%;height:300px;overflow-y:auto}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone .daily-item{background-color:#fff;margin:15px;width:258px}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone .daily-item .daily-item-header{font-size:13px;padding:15px 15px 0}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone .daily-item .daily-item-header i{margin-right:8px}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone .daily-item .daily-item-header.saturday{color:#07b7ee}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone .daily-item .daily-item-header.sunday{color:#ef2b58}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone.ready{background-color:#d3d3d3}.core-at-shift-pattern-apply-container .patterns_condition-n-preview .condition-n-preview{margin-left:15px}.core-at-shift-pattern-apply-container .w175{width:160px}.core-at-shift-pattern-apply-container .w180{width:180px}.core-at-shift-pattern-apply-container .w200{width:200px}.core-at-shift-pattern-apply-container .mt60{margin-top:60px}.core-at-shift-pattern-apply-container .fs13{font-size:13px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoreDatePickerComponent, selector: "core-date-picker", inputs: ["enableTimeZoneConverter", "showPlaceholder", "popupWidth", "popupXPadding", "popupAlign", "rangeLimit", "readonly", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup"], outputs: ["buttonClick"] }, { kind: "component", type: CoreAtPatternCollectionComponent, selector: "core-at-pattern-collection", inputs: ["height", "relativeMode"] }, { kind: "component", type: CoreMonthSelectorComponent, selector: "core-month-selector", inputs: ["align"], outputs: ["onYearClick"] }, { kind: "component", type: CoreChecklistComponent, selector: "core-checklist", inputs: ["paramMode", "getByIdObject$", "shownFrom", "options$", "height", "placeholder", "loading", "readonly", "disabled"] }, { kind: "component", type: CoreShiftCellComponent, selector: "core-shift-cell", inputs: ["$readOnly", "$hideStarterPlusSign", "$hideStickersWhileDragover", "$backgroundColor"] }, { kind: "component", type: CoreOrgTreeComponent, selector: "core-org-tree", inputs: ["lineColor", "fullWidthMode", "accessorMode", "searchMode", "fullRendering", "height", "disabledLoopExpand", "showCheckInheritance", "excludedIds$", "stateIsolated$"], outputs: ["itemDoubleClick", "itemClick"] }, { kind: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["text", "tooltipPosition", "tooltip", "inputValue", "disabled"], outputs: ["onClick"] }, { kind: "component", type: StartOffsetComponent, selector: "core-start-offset", inputs: ["pattern", "scopeStartDate", "scopeEndDate"], outputs: ["onClose"] }, { kind: "pipe", type: TableCellPipe, name: "tableCell" }, { kind: "component", type: CoreApiProgressComponent, selector: "core-api-progress", outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: AtShiftPatternApplyComponent, isStandalone: true, selector: "core-at-shift-pattern-apply", viewQueries: [{ propertyName: "dropzone", first: true, predicate: ["dropzone"], descendants: true }, { propertyName: "dropzoneInsider", first: true, predicate: ["dropzoneInsider"], descendants: true }], ngImport: i0, template: "<div class=\"core-at-shift-pattern-apply-container\">\r\n    <core-page-header [title]=\"'UI_COMPONENT_TITLE_AT_SHIFT_PATTERN_APPLY'\"\r\n        (buttonClick)=\"onCorePageHeaderButtonClick($event)\"></core-page-header>\r\n    <div class=\"patterns_condition-n-preview\">\r\n        <div class=\"collection-wrapper\">\r\n            <core-at-pattern-collection [relativeMode]=\"true\"\r\n                [height]=\"patternCollectionHeight\"></core-at-pattern-collection>\r\n        </div>\r\n        <div class=\"orgtree-wrapper\">\r\n            <core-org-tree [(ngModel)]=\"orgIds\"></core-org-tree>\r\n        </div>\r\n        <div class=\"condition-n-preview fs13\">\r\n\r\n            <div class=\"condition\">\r\n                <div class=\"d-flex d-flex-start mb15 pd3\">\r\n                    <div class=\"param-wrapper w200 mr15\">\r\n                        <label>K\u1EF3 c\u00F4ng</label>\r\n                        <div class=\"form-group vertical\">\r\n                            <core-month-selector [(ngModel)]=\"currentMonth\"\r\n                                (ngModelChange)=\"onCurrentMonthChange($event)\"></core-month-selector>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w175 mr15\">\r\n                        <label></label>\r\n                        <div class=\"form-group vertical\">\r\n                            <core-date-picker [(ngModel)]=\"startDate\" [rangeLimit]=\"dateRangeLimit\"\r\n                                (ngModelChange)=\"onStartDateChange($event)\"></core-date-picker>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w175 mr15\">\r\n                        <label></label>\r\n                        <div class=\"form-group vertical\">\r\n                            <core-date-picker [(ngModel)]=\"endDate\" [rangeLimit]=\"dateRangeLimit\"\r\n                                (ngModelChange)=\"onEndDateChange($event)\"></core-date-picker>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w250 mr15\">\r\n                        <div class=\"form-group vertical\">\r\n                            <label>\u0110\u1ED1i t\u01B0\u1EE3ng nh\u00E2n vi\u00EAn</label>\r\n                            <core-checklist [paramMode]=\"true\" [(ngModel)]=\"empObjectIds\"\r\n                                [options$]=\"empObjOptions$\"></core-checklist>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex d-flex-start mb15 pd3\">\r\n                    <div class=\"param-wrapper w180 mr15\">\r\n                        <div class=\"form-group vertical\">\r\n                            <label></label>\r\n                            <core-checkbox [text]=\"'B\u1ECF qua ng\u00E0y l\u1EC5'\" [(ngModel)]=\"ignoreHolidays\"></core-checkbox>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w200 mr15\">\r\n                        <div class=\"form-group vertical\">\r\n                            <label></label>\r\n                            <core-checkbox [text]=\"'B\u1ECF qua ng\u00E0y m\u1EABu tr\u1ED1ng'\"\r\n                                [(ngModel)]=\"ignoreEmptyCells\"></core-checkbox>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w180 mr15\">\r\n                        <div class=\"form-group vertical\">\r\n                            <label></label>\r\n                            <core-checkbox [text]=\"'Ghi \u0111\u00E8 c\u00E1c ca ch\u1EC9nh tay'\"\r\n                                [(ngModel)]=\"overrideDaysContainingManuallyEditedCells\"></core-checkbox>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"preview\">\r\n\r\n                <div #dropzone id=\"dropzone\" [class.ready]=\"dropzoneReady\" [ngStyle]=\"{\r\n                    height: dropzoneHeight + 'px',\r\n                    padding: '15px',\r\n                }\">\r\n\r\n                    @if ((shiftPatternDndService.draggingData$ | async) === '') {\r\n                        <div #dropzoneInsider>\r\n\r\n                            @if (!previewData || !previewData.length) {\r\n                            <div [ngStyle]=\"{\r\n                                        display: 'flex',\r\n                                        alignItems: 'center',\r\n                                        justifyContent: 'center',\r\n                                        width: '100%',\r\n                                        height: dropzoneHeight + 'px'\r\n                                    }\">\r\n                                <h2 style=\"color: white;\">\r\n                                    @if (lang === 'vi') {\r\n                                    K\u00E9o th\u1EA3 m\u1EABu x\u1EBFp ca v\u00E0o \u0111\u00E2y...\r\n                                    } @else {\r\n                                    Drag and drop a pattern here...\r\n                                    }\r\n    \r\n                                </h2>\r\n                            </div>\r\n                            } @else {\r\n                            <div class=\"container mt60\">\r\n    \r\n                                <div class=\"row gx-5 gy-5\">\r\n    \r\n                                    @for (dailyItem of previewData; track dailyItem.workingday) {\r\n    \r\n                                    <div [class]=\"colMdClass\">\r\n    \r\n                                        <div class=\"daily-item\">\r\n                                            <div class=\"daily-item-header\" [class.saturday]=\"!!dailyItem?.isSaturday\"\r\n                                                [class.sunday]=\"!!dailyItem?.isSunday\">\r\n                                                <div class=\"workingday-wrapper d-flex d-flex-start\">\r\n                                                    <i class=\"feather-calendar\"></i><span>{{ dailyItem.workingday |\r\n                                                        tableCell : 'DATE_LOCALIZED' : lang }}</span>\r\n                                                </div>\r\n                                                @if (!!dailyItem.holidayName) {\r\n                                                <div class=\"holidayName-wrapper d-flex d-flex-start\">\r\n                                                    <i class=\"feather-gift\"></i><span>{{ dailyItem.holidayName }}</span>\r\n                                                </div>\r\n                                                }\r\n                                            </div>\r\n    \r\n                                            <core-shift-cell [ngModel]=\"dailyItem.shifts\"\r\n                                                [$readOnly]=\"true\"></core-shift-cell>\r\n    \r\n                                        </div>\r\n                                    </div>\r\n                                    }\r\n    \r\n                                </div>\r\n    \r\n                            </div>\r\n                            }\r\n    \r\n                        </div>\r\n    \r\n                    }\r\n\r\n                </div>\r\n\r\n            </div>\r\n\r\n            @if (showStartOffset && !!activeAtShiftPattern && !!scopeStartDate && !!scopeEndDate) {\r\n            <core-start-offset [pattern]=\"activeAtShiftPattern\" [scopeStartDate]=\"scopeStartDate\"\r\n                [scopeEndDate]=\"scopeEndDate\" (onClose)=\"onCloseOffset($event)\"></core-start-offset>\r\n            }\r\n\r\n            @if (longApiRunning) {\r\n            <core-api-progress (onClose)=\"onProgressWindowClose($event)\"></core-api-progress>\r\n            }\r\n\r\n        </div>\r\n    </div>\r\n</div>", styles: [".core-at-shift-pattern-apply-container .patterns_condition-n-preview{position:relative;vertical-align:top}.core-at-shift-pattern-apply-container .patterns_condition-n-preview .collection-wrapper{display:block;position:absolute;left:0;top:0}.core-at-shift-pattern-apply-container .patterns_condition-n-preview .orgtree-wrapper{display:block;position:absolute;left:240px;top:0}.core-at-shift-pattern-apply-container .patterns_condition-n-preview .condition-n-preview{display:block;padding-left:555px}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone{display:block;position:relative;width:100%;height:300px;overflow-y:auto}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone .daily-item{background-color:#fff;margin:15px;width:258px}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone .daily-item .daily-item-header{font-size:13px;padding:15px 15px 0}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone .daily-item .daily-item-header i{margin-right:8px}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone .daily-item .daily-item-header.saturday{color:#07b7ee}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone .daily-item .daily-item-header.sunday{color:#ef2b58}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone.ready{background-color:#d3d3d3}.core-at-shift-pattern-apply-container .patterns_condition-n-preview .condition-n-preview{margin-left:15px}.core-at-shift-pattern-apply-container .w175{width:160px}.core-at-shift-pattern-apply-container .w180{width:180px}.core-at-shift-pattern-apply-container .w200{width:200px}.core-at-shift-pattern-apply-container .mt60{margin-top:60px}.core-at-shift-pattern-apply-container .fs13{font-size:13px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: CoreDatePickerComponent, selector: "core-date-picker", inputs: ["enableTimeZoneConverter", "showPlaceholder", "popupWidth", "popupXPadding", "popupAlign", "rangeLimit", "readonly", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup"], outputs: ["buttonClick"] }, { kind: "component", type: CoreAtPatternCollectionComponent, selector: "core-at-pattern-collection", inputs: ["height", "relativeMode"] }, { kind: "component", type: CoreMonthSelectorComponent, selector: "core-month-selector", inputs: ["align"], outputs: ["onYearClick"] }, { kind: "component", type: CoreChecklistComponent, selector: "core-checklist", inputs: ["paramMode", "getByIdObject$", "shownFrom", "options$", "height", "placeholder", "loading", "readonly", "disabled"] }, { kind: "component", type: CoreShiftCellComponent, selector: "core-shift-cell", inputs: ["$readOnly", "$hideStarterPlusSign", "$hideStickersWhileDragover", "$backgroundColor"] }, { kind: "component", type: CoreOrgTreeComponent, selector: "core-org-tree", inputs: ["lineColor", "fullWidthMode", "accessorMode", "searchMode", "fullRendering", "height", "disabledLoopExpand", "showCheckInheritance", "excludedIds$", "stateIsolated$"], outputs: ["itemDoubleClick", "itemClick"] }, { kind: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["text", "tooltipPosition", "tooltip", "inputValue", "disabled"], outputs: ["onClick"] }, { kind: "component", type: StartOffsetComponent, selector: "core-start-offset", inputs: ["pattern", "scopeStartDate", "scopeEndDate"], outputs: ["onClose"] }, { kind: "pipe", type: TableCellPipe, name: "tableCell" }, { kind: "component", type: CoreApiProgressComponent, selector: "core-api-progress", outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: AtShiftPatternApplyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'core-at-shift-pattern-apply', imports: [
                         NgStyle,
+                        AsyncPipe,
                         CoreDatePickerComponent,
                         FormsModule,
                         CorePageHeaderComponent,
@@ -21947,10 +21967,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                         StartOffsetComponent,
                         TableCellPipe,
                         CoreApiProgressComponent,
-                    ], template: "<div class=\"core-at-shift-pattern-apply-container\">\r\n    <core-page-header [title]=\"'UI_COMPONENT_TITLE_AT_SHIFT_PATTERN_APPLY'\" (buttonClick)=\"onCorePageHeaderButtonClick($event)\"></core-page-header>\r\n    <div class=\"patterns_condition-n-preview\">\r\n        <div class=\"collection-wrapper\">\r\n            <core-at-pattern-collection [relativeMode]=\"true\"\r\n                [height]=\"patternCollectionHeight\"></core-at-pattern-collection>\r\n        </div>\r\n        <div class=\"orgtree-wrapper\">\r\n            <core-org-tree [(ngModel)]=\"orgIds\"></core-org-tree>\r\n        </div>\r\n        <div class=\"condition-n-preview fs13\">\r\n\r\n            <div class=\"condition\">\r\n                <div class=\"d-flex d-flex-start mb15 pd3\">\r\n                    <div class=\"param-wrapper w200 mr15\">\r\n                        <label>K\u1EF3 c\u00F4ng</label>\r\n                        <div class=\"form-group vertical\">\r\n                            <core-month-selector [(ngModel)]=\"currentMonth\"\r\n                            (ngModelChange)=\"onCurrentMonthChange($event)\"></core-month-selector>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w175 mr15\">\r\n                        <label></label>\r\n                        <div class=\"form-group vertical\">\r\n                            <core-date-picker [(ngModel)]=\"startDate\" [rangeLimit]=\"dateRangeLimit\" (ngModelChange)=\"onStartDateChange($event)\"></core-date-picker>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w175 mr15\">\r\n                        <label></label>\r\n                        <div class=\"form-group vertical\">\r\n                            <core-date-picker [(ngModel)]=\"endDate\" [rangeLimit]=\"dateRangeLimit\" (ngModelChange)=\"onEndDateChange($event)\"></core-date-picker>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w250 mr15\">\r\n                        <div class=\"form-group vertical\">\r\n                            <label>\u0110\u1ED1i t\u01B0\u1EE3ng nh\u00E2n vi\u00EAn</label>\r\n                            <core-checklist [paramMode]=\"true\" [(ngModel)]=\"empObjectIds\"\r\n                                [options$]=\"empObjOptions$\"></core-checklist>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex d-flex-start mb15 pd3\">\r\n                    <div class=\"param-wrapper w180 mr15\">\r\n                        <div class=\"form-group vertical\">\r\n                            <label></label>\r\n                            <core-checkbox [text]=\"'B\u1ECF qua ng\u00E0y l\u1EC5'\" [(ngModel)]=\"ignoreHolidays\"></core-checkbox>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w200 mr15\">\r\n                        <div class=\"form-group vertical\">\r\n                            <label></label>\r\n                            <core-checkbox [text]=\"'B\u1ECF qua ng\u00E0y m\u1EABu tr\u1ED1ng'\" [(ngModel)]=\"ignoreEmptyCells\"></core-checkbox>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w180 mr15\">\r\n                        <div class=\"form-group vertical\">\r\n                            <label></label>\r\n                            <core-checkbox [text]=\"'Ghi \u0111\u00E8 c\u00E1c ca ch\u1EC9nh tay'\" [(ngModel)]=\"overrideDaysContainingManuallyEditedCells\"></core-checkbox>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"preview\">\r\n\r\n                <div #dropzone id=\"dropzone\" [class.ready]=\"dropzoneReady\" [ngStyle]=\"{\r\n                    height: dropzoneHeight + 'px'\r\n                }\">\r\n\r\n                    @if (!previewData || !previewData.length) {\r\n                        <div [ngStyle]=\"{\r\n                            display: 'flex',\r\n                            alignItems: 'center',\r\n                            justifyContent: 'center',\r\n                            width: '100%',\r\n                            height: dropzoneHeight + 'px'\r\n                        }\">\r\n                            <h2 style=\"color: white;\">\r\n                                @if (lang === 'vi') {\r\n                                    K\u00E9o th\u1EA3 m\u1EABu x\u1EBFp ca v\u00E0o \u0111\u00E2y...\r\n                                } @else {\r\n                                    Drag and drop a pattern here...\r\n                                }\r\n                                \r\n                            </h2>\r\n                        </div>\r\n                    } @else {\r\n                        <div class=\"container mt60\">\r\n\r\n                            <div class=\"row gx-5 gy-5\">\r\n    \r\n                                @for (dailyItem of previewData; track dailyItem.workingday) {\r\n                                    <div [class]=\"colMdClass\">\r\n                                        <div class=\"daily-item\">\r\n                                            <div class=\"daily-item-header\" [class.saturday]=\"!!dailyItem?.isSaturday\" [class.sunday]=\"!!dailyItem?.isSunday\">\r\n                                                <div class=\"workingday-wrapper d-flex d-flex-start\">\r\n                                                    <i class=\"feather-calendar\"></i><span>{{ dailyItem.workingday | tableCell : 'DATE_LOCALIZED' : lang }}</span>\r\n                                                </div>\r\n                                                @if (!!dailyItem.holidayName) {\r\n                                                    <div class=\"holidayName-wrapper d-flex d-flex-start\">\r\n                                                        <i class=\"feather-gift\"></i><span>{{ dailyItem.holidayName }}</span>\r\n                                                    </div>\r\n                                                }\r\n                                            </div>\r\n                                            <core-shift-cell [ngModel]=\"dailyItem.shifts\" [$readOnly]=\"true\"></core-shift-cell>\r\n                                        </div>\r\n                                    </div>\r\n                                }        \r\n    \r\n                            </div>\r\n    \r\n                        </div>\r\n    \r\n                    }\r\n\r\n                </div>\r\n\r\n            </div>\r\n\r\n            @if (showStartOffset && !!activeAtShiftPattern && !!scopeStartDate && !!scopeEndDate) {\r\n                <core-start-offset [pattern]=\"activeAtShiftPattern\" [scopeStartDate]=\"scopeStartDate\" [scopeEndDate]=\"scopeEndDate\" (onClose)=\"onCloseOffset($event)\"></core-start-offset>\r\n            }\r\n\r\n            @if (longApiRunning) {\r\n                <core-api-progress (onClose)=\"onProgressWindowClose($event)\"></core-api-progress>\r\n            }\r\n\r\n        </div>\r\n    </div>\r\n</div>", styles: [".core-at-shift-pattern-apply-container .patterns_condition-n-preview{position:relative;vertical-align:top}.core-at-shift-pattern-apply-container .patterns_condition-n-preview .collection-wrapper{display:block;position:absolute;left:0;top:0}.core-at-shift-pattern-apply-container .patterns_condition-n-preview .orgtree-wrapper{display:block;position:absolute;left:240px;top:0}.core-at-shift-pattern-apply-container .patterns_condition-n-preview .condition-n-preview{display:block;padding-left:555px}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone{display:block;position:relative;width:100%;height:300px;overflow-y:auto}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone .daily-item{background-color:#fff;margin:15px;width:258px}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone .daily-item .daily-item-header{font-size:13px;padding:15px 15px 0}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone .daily-item .daily-item-header i{margin-right:8px}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone .daily-item .daily-item-header.saturday{color:#07b7ee}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone .daily-item .daily-item-header.sunday{color:#ef2b58}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone.ready{background-color:#d3d3d3}.core-at-shift-pattern-apply-container .patterns_condition-n-preview .condition-n-preview{margin-left:15px}.core-at-shift-pattern-apply-container .w175{width:160px}.core-at-shift-pattern-apply-container .w180{width:180px}.core-at-shift-pattern-apply-container .w200{width:200px}.core-at-shift-pattern-apply-container .mt60{margin-top:60px}.core-at-shift-pattern-apply-container .fs13{font-size:13px}\n"] }]
+                    ], template: "<div class=\"core-at-shift-pattern-apply-container\">\r\n    <core-page-header [title]=\"'UI_COMPONENT_TITLE_AT_SHIFT_PATTERN_APPLY'\"\r\n        (buttonClick)=\"onCorePageHeaderButtonClick($event)\"></core-page-header>\r\n    <div class=\"patterns_condition-n-preview\">\r\n        <div class=\"collection-wrapper\">\r\n            <core-at-pattern-collection [relativeMode]=\"true\"\r\n                [height]=\"patternCollectionHeight\"></core-at-pattern-collection>\r\n        </div>\r\n        <div class=\"orgtree-wrapper\">\r\n            <core-org-tree [(ngModel)]=\"orgIds\"></core-org-tree>\r\n        </div>\r\n        <div class=\"condition-n-preview fs13\">\r\n\r\n            <div class=\"condition\">\r\n                <div class=\"d-flex d-flex-start mb15 pd3\">\r\n                    <div class=\"param-wrapper w200 mr15\">\r\n                        <label>K\u1EF3 c\u00F4ng</label>\r\n                        <div class=\"form-group vertical\">\r\n                            <core-month-selector [(ngModel)]=\"currentMonth\"\r\n                                (ngModelChange)=\"onCurrentMonthChange($event)\"></core-month-selector>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w175 mr15\">\r\n                        <label></label>\r\n                        <div class=\"form-group vertical\">\r\n                            <core-date-picker [(ngModel)]=\"startDate\" [rangeLimit]=\"dateRangeLimit\"\r\n                                (ngModelChange)=\"onStartDateChange($event)\"></core-date-picker>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w175 mr15\">\r\n                        <label></label>\r\n                        <div class=\"form-group vertical\">\r\n                            <core-date-picker [(ngModel)]=\"endDate\" [rangeLimit]=\"dateRangeLimit\"\r\n                                (ngModelChange)=\"onEndDateChange($event)\"></core-date-picker>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w250 mr15\">\r\n                        <div class=\"form-group vertical\">\r\n                            <label>\u0110\u1ED1i t\u01B0\u1EE3ng nh\u00E2n vi\u00EAn</label>\r\n                            <core-checklist [paramMode]=\"true\" [(ngModel)]=\"empObjectIds\"\r\n                                [options$]=\"empObjOptions$\"></core-checklist>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex d-flex-start mb15 pd3\">\r\n                    <div class=\"param-wrapper w180 mr15\">\r\n                        <div class=\"form-group vertical\">\r\n                            <label></label>\r\n                            <core-checkbox [text]=\"'B\u1ECF qua ng\u00E0y l\u1EC5'\" [(ngModel)]=\"ignoreHolidays\"></core-checkbox>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w200 mr15\">\r\n                        <div class=\"form-group vertical\">\r\n                            <label></label>\r\n                            <core-checkbox [text]=\"'B\u1ECF qua ng\u00E0y m\u1EABu tr\u1ED1ng'\"\r\n                                [(ngModel)]=\"ignoreEmptyCells\"></core-checkbox>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w180 mr15\">\r\n                        <div class=\"form-group vertical\">\r\n                            <label></label>\r\n                            <core-checkbox [text]=\"'Ghi \u0111\u00E8 c\u00E1c ca ch\u1EC9nh tay'\"\r\n                                [(ngModel)]=\"overrideDaysContainingManuallyEditedCells\"></core-checkbox>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"preview\">\r\n\r\n                <div #dropzone id=\"dropzone\" [class.ready]=\"dropzoneReady\" [ngStyle]=\"{\r\n                    height: dropzoneHeight + 'px',\r\n                    padding: '15px',\r\n                }\">\r\n\r\n                    @if ((shiftPatternDndService.draggingData$ | async) === '') {\r\n                        <div #dropzoneInsider>\r\n\r\n                            @if (!previewData || !previewData.length) {\r\n                            <div [ngStyle]=\"{\r\n                                        display: 'flex',\r\n                                        alignItems: 'center',\r\n                                        justifyContent: 'center',\r\n                                        width: '100%',\r\n                                        height: dropzoneHeight + 'px'\r\n                                    }\">\r\n                                <h2 style=\"color: white;\">\r\n                                    @if (lang === 'vi') {\r\n                                    K\u00E9o th\u1EA3 m\u1EABu x\u1EBFp ca v\u00E0o \u0111\u00E2y...\r\n                                    } @else {\r\n                                    Drag and drop a pattern here...\r\n                                    }\r\n    \r\n                                </h2>\r\n                            </div>\r\n                            } @else {\r\n                            <div class=\"container mt60\">\r\n    \r\n                                <div class=\"row gx-5 gy-5\">\r\n    \r\n                                    @for (dailyItem of previewData; track dailyItem.workingday) {\r\n    \r\n                                    <div [class]=\"colMdClass\">\r\n    \r\n                                        <div class=\"daily-item\">\r\n                                            <div class=\"daily-item-header\" [class.saturday]=\"!!dailyItem?.isSaturday\"\r\n                                                [class.sunday]=\"!!dailyItem?.isSunday\">\r\n                                                <div class=\"workingday-wrapper d-flex d-flex-start\">\r\n                                                    <i class=\"feather-calendar\"></i><span>{{ dailyItem.workingday |\r\n                                                        tableCell : 'DATE_LOCALIZED' : lang }}</span>\r\n                                                </div>\r\n                                                @if (!!dailyItem.holidayName) {\r\n                                                <div class=\"holidayName-wrapper d-flex d-flex-start\">\r\n                                                    <i class=\"feather-gift\"></i><span>{{ dailyItem.holidayName }}</span>\r\n                                                </div>\r\n                                                }\r\n                                            </div>\r\n    \r\n                                            <core-shift-cell [ngModel]=\"dailyItem.shifts\"\r\n                                                [$readOnly]=\"true\"></core-shift-cell>\r\n    \r\n                                        </div>\r\n                                    </div>\r\n                                    }\r\n    \r\n                                </div>\r\n    \r\n                            </div>\r\n                            }\r\n    \r\n                        </div>\r\n    \r\n                    }\r\n\r\n                </div>\r\n\r\n            </div>\r\n\r\n            @if (showStartOffset && !!activeAtShiftPattern && !!scopeStartDate && !!scopeEndDate) {\r\n            <core-start-offset [pattern]=\"activeAtShiftPattern\" [scopeStartDate]=\"scopeStartDate\"\r\n                [scopeEndDate]=\"scopeEndDate\" (onClose)=\"onCloseOffset($event)\"></core-start-offset>\r\n            }\r\n\r\n            @if (longApiRunning) {\r\n            <core-api-progress (onClose)=\"onProgressWindowClose($event)\"></core-api-progress>\r\n            }\r\n\r\n        </div>\r\n    </div>\r\n</div>", styles: [".core-at-shift-pattern-apply-container .patterns_condition-n-preview{position:relative;vertical-align:top}.core-at-shift-pattern-apply-container .patterns_condition-n-preview .collection-wrapper{display:block;position:absolute;left:0;top:0}.core-at-shift-pattern-apply-container .patterns_condition-n-preview .orgtree-wrapper{display:block;position:absolute;left:240px;top:0}.core-at-shift-pattern-apply-container .patterns_condition-n-preview .condition-n-preview{display:block;padding-left:555px}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone{display:block;position:relative;width:100%;height:300px;overflow-y:auto}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone .daily-item{background-color:#fff;margin:15px;width:258px}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone .daily-item .daily-item-header{font-size:13px;padding:15px 15px 0}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone .daily-item .daily-item-header i{margin-right:8px}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone .daily-item .daily-item-header.saturday{color:#07b7ee}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone .daily-item .daily-item-header.sunday{color:#ef2b58}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone.ready{background-color:#d3d3d3}.core-at-shift-pattern-apply-container .patterns_condition-n-preview .condition-n-preview{margin-left:15px}.core-at-shift-pattern-apply-container .w175{width:160px}.core-at-shift-pattern-apply-container .w180{width:180px}.core-at-shift-pattern-apply-container .w200{width:200px}.core-at-shift-pattern-apply-container .mt60{margin-top:60px}.core-at-shift-pattern-apply-container .fs13{font-size:13px}\n"] }]
         }], propDecorators: { dropzone: [{
                 type: ViewChild,
                 args: ['dropzone']
+            }], dropzoneInsider: [{
+                type: ViewChild,
+                args: ['dropzoneInsider']
             }] } });
 
 class CoreOrgParamComponent extends CoreFormControlBaseComponent {