ngx-histaff-alpha 4.9.3 → 4.9.4

package/fesm2022/ngx-histaff-alpha.mjs

@@ -7,11 +7,11 @@ import * as i1$1 from '@angular/common/http';
 import { HttpHeaders, HttpClient, HttpResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { last, map, tap, finalize, first, filter as filter$1, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, switchMap as switchMap$1 } from 'rxjs/operators';
 import * as i3 from '@angular/common';
-import { CommonModule, NgStyle, UpperCasePipe, AsyncPipe, NgIf, NgTemplateOutlet } from '@angular/common';
+import { CommonModule, NgStyle, UpperCasePipe, AsyncPipe, LowerCasePipe, NgIf, NgTemplateOutlet } from '@angular/common';
 import * as i4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NgControl, ReactiveFormsModule, FormControl, FormGroup, Validators, FormArray } from '@angular/forms';
 import * as i1$2 from '@angular/router';
-import { Router, RouterModule, NavigationStart, NavigationEnd, NavigationCancel, NavigationError, RouteConfigLoadEnd, RoutesRecognized } from '@angular/router';
+import { Router, RouterModule, ActivatedRoute, NavigationStart, NavigationEnd, NavigationCancel, NavigationError, RouteConfigLoadEnd, RoutesRecognized } from '@angular/router';
 import * as i1$3 from '@angular/service-worker';
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 import * as d3 from 'd3';
@@ -1588,6 +1588,7 @@ var EnumDragType;
     EnumDragType["NONE"] = "NONE";
     EnumDragType["WORK_SHIFT"] = "WORK_SHIFT";
     EnumDragType["TABLE_COLUMN_RESIZE"] = "TABLE_COLUMN_RESIZE";
+    EnumDragType["SHIFT_PATTERN"] = "SHIFT_PATTERN";
 })(EnumDragType || (EnumDragType = {}));
 
 var EnumErrorType;
@@ -12616,6 +12617,7 @@ class CoreDatePickerComponent extends CoreFormControlBaseComponent {
         console.log("UTC input ", input);
         let obj = new Date();
         if (input === null) {
+            this.value = null;
             this.textValue = '';
             return;
         }
@@ -12627,7 +12629,7 @@ class CoreDatePickerComponent extends CoreFormControlBaseComponent {
                 obj = new Date(new Date(input).setHours(0, 0, 0, 0));
             }
         }
-        else if (input !== null && typeof (input.getFullYear) === "function") {
+        else if (input !== null && typeof (input?.getFullYear) === "function") {
             obj = input;
         }
         else {
@@ -19542,7 +19544,6 @@ class CoreShiftCellComponent extends CoreFormControlBaseComponent {
     cleanUpSubsequentSubscriptions() {
         this.dndEventSubscriptions.dragover?.unsubscribe();
         this.dndEventSubscriptions.drop?.unsubscribe();
-        //this.dndEventSubscriptions.dragleave?.unsubscribe();
     }
     ngAfterViewInit() {
         setTimeout(() => {
@@ -20627,10 +20628,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
         }], ctorParameters: () => [{ type: DialogService }] });
 
 class AtShiftPatternService {
-    constructor() {
+    constructor(appService) {
+        this.appService = appService;
         this.activePattern$ = new BehaviorSubject(undefined);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: AtShiftPatternService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    loadItem(id) {
+        return this.appService.get('/api/AtShiftPattern/GetByIdWithDetails?id=' + id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: AtShiftPatternService, deps: [{ token: AppService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: AtShiftPatternService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: AtShiftPatternService, decorators: [{
@@ -20638,7 +20643,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [{ type: AppService }] });
 
 class AtShiftPatternEditComponent extends BaseEditComponent {
     constructor(dialogService, appService, atShiftPatternService, corePageListService, corePageEditService, coreFormService) {
@@ -20912,6 +20917,8 @@ class AtShiftPatternComponent extends BaseEditComponent {
         this.atShiftPatternService = inject(AtShiftPatternService);
         this.appService = inject(AppService);
         this.coreButtonGroupService = inject(CoreButtonGroupService);
+        this.router = inject(Router);
+        this.route = inject(ActivatedRoute);
         this.subscriptions = [];
         this.rowClick$ = new BehaviorSubject(0);
         this.title = "UI_COMPONENT_TITLE_AT_SHIFT_PATTERN";
@@ -20996,7 +21003,6 @@ class AtShiftPatternComponent extends BaseEditComponent {
         });
     }
     onCorePageHeaderButtonClick(e) {
-        console.log("onCorePageHeaderButtonClick", e);
         switch (e.code) {
             case EnumCoreButtonVNSCode.HEADER_SAVE:
                 this.loading = true;
@@ -21007,6 +21013,9 @@ class AtShiftPatternComponent extends BaseEditComponent {
                     }
                 }));
                 break;
+            case EnumCoreButtonVNSCode.HEADER_INDIVIDUAL_SCHEDULE_APPLY:
+                this.router.navigate(['apply'], { relativeTo: this.route });
+                break;
             default:
                 break;
         }
@@ -21016,7 +21025,7 @@ class AtShiftPatternComponent extends BaseEditComponent {
     }
     loadItem() {
         this.loading = true;
-        this.subscriptions.push(this.appService.get('/api/AtShiftPattern/GetByIdWithDetails?id=' + this.rowClick$.value).subscribe(x => {
+        this.subscriptions.push(this.atShiftPatternService.loadItem(this.rowClick$.value).subscribe(x => {
             this.loading = false;
             if (x.ok && x.status === 200 && x.body?.statusCode === 200) {
                 this.formInitStringValue = JSON.stringify(x.body?.innerBody);
@@ -21065,6 +21074,243 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                     ], 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"] }]
         }] });
 
+class ShiftPatternDndService {
+    constructor() {
+        this.draggingData$ = new BehaviorSubject('');
+        this.draggingPattern$ = new BehaviorSubject(undefined);
+        this.draggingFromCellId$ = new BehaviorSubject('');
+        this.dragoverCellId$ = new BehaviorSubject('');
+        this.collectionStarterX$ = new BehaviorSubject(0);
+        this.collectionResetTransform$ = new BehaviorSubject(false);
+        this.patternCollectionOpen$ = new BehaviorSubject(false);
+        this.mls = inject(MultiLanguageService);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ShiftPatternDndService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ShiftPatternDndService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ShiftPatternDndService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class CoreAtPatternCardComponent extends CoreFormControlBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.$container = viewChild('container');
+        this.cdr = inject(ChangeDetectorRef);
+        this.shiftPatternDndService = inject(ShiftPatternDndService);
+        this.dndService = inject(DndService);
+        this.mls = inject(MultiLanguageService);
+    }
+    writeValue(obj) {
+        this.value = obj;
+        this.code = obj?.code;
+        this.name = obj?.name;
+        this.patternType = obj?.patternType;
+        this.rotationDays = obj?.rotationDays;
+    }
+    ngOnInit() {
+        this.mls.lang$.subscribe(x => this.lang = x);
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            fromEvent(this.$container()?.nativeElement, 'dragstart')
+                .subscribe((ev) => {
+                this.dndService.dragType = EnumDragType.SHIFT_PATTERN;
+                ev.dataTransfer.setData("text/plain", `${this.value.code}`);
+                this.shiftPatternDndService.draggingData$.next(ev.dataTransfer.getData("text/plain"));
+                this.shiftPatternDndService.draggingPattern$.next(this.value);
+                this.shiftPatternDndService.draggingFromCellId$.next('');
+            });
+            fromEvent(this.$container()?.nativeElement, 'drag')
+                .pipe(debounceTime(200))
+                .subscribe((ev) => {
+                console.log("drag");
+            });
+            fromEvent(this.$container()?.nativeElement, 'dragend')
+                .subscribe((ev) => {
+                console.log("dragend");
+                // According to the HTML5 Drag and Drop API, 
+                // dataTransfer is cleared or reset at the end of the drag operation. 
+                // This means that the data you set in dragstart is no longer available in dragend.
+                this.shiftPatternDndService.draggingData$.next('');
+                this.shiftPatternDndService.draggingPattern$.next(undefined);
+                this.shiftPatternDndService.draggingFromCellId$.next('');
+            });
+        });
+    }
+    ngOnDestroy() {
+        //
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreAtPatternCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoreAtPatternCardComponent, isStandalone: true, selector: "core-at-pattern-card", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: CoreAtPatternCardComponent
+            }
+        ], viewQueries: [{ propertyName: "$container", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"core-at-shift-pattern-card-container\" draggable=\"true\">\r\n    <div #shiftDetails class=\"pattern-details p-relative\">\r\n        <div class=\"ellipsis p-relative\" [appTooltip]=\"name\">\r\n            @if (patternType == 'WEEK') {\r\n                <i class=\"feather-calendar\"></i>\r\n            } @else {\r\n                <i class=\"feather-layers\"></i>\r\n            }\r\n            {{ code }} <span> \u2022 </span> {{ rotationDays }} {{ ('UI_COMMON_DAY' | translate : lang | lowercase) }}\r\n        </div>\r\n    </div>\r\n</div>", styles: [".core-at-shift-pattern-card-container{background-color:#358ccb;width:200px;padding:15px;color:#fff;cursor:move}\n"], dependencies: [{ kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreAtPatternCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-at-pattern-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        LowerCasePipe,
+                        TableCellPipe,
+                        CommonModule,
+                        TooltipDirective,
+                        TranslatePipe
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: CoreAtPatternCardComponent
+                        }
+                    ], template: "<div #container class=\"core-at-shift-pattern-card-container\" draggable=\"true\">\r\n    <div #shiftDetails class=\"pattern-details p-relative\">\r\n        <div class=\"ellipsis p-relative\" [appTooltip]=\"name\">\r\n            @if (patternType == 'WEEK') {\r\n                <i class=\"feather-calendar\"></i>\r\n            } @else {\r\n                <i class=\"feather-layers\"></i>\r\n            }\r\n            {{ code }} <span> \u2022 </span> {{ rotationDays }} {{ ('UI_COMMON_DAY' | translate : lang | lowercase) }}\r\n        </div>\r\n    </div>\r\n</div>", styles: [".core-at-shift-pattern-card-container{background-color:#358ccb;width:200px;padding:15px;color:#fff;cursor:move}\n"] }]
+        }] });
+
+class CoreAtPatternCollectionComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.domService = inject(DomService);
+        this.appService = inject(AppService);
+        this.cdr = inject(ChangeDetectorRef);
+        this.shiftPatternDndService = inject(ShiftPatternDndService);
+        this.fullPatterns = [];
+        this.filteredPatterns = [];
+        this.searchHeight = 65;
+        this.itemHeight = 69;
+        this.keyword = '';
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            if (!!this.relativeMode) {
+                this.container.nativeElement.style.setProperty('position', 'relative');
+                this.container.nativeElement.style.setProperty('box-shadow', 'none');
+                this.container.nativeElement.style.setProperty('z-index', 0);
+            }
+            this.subscriptions.push(this.appService.get('/api/AtShiftPattern/GetAllActive').subscribe(x => {
+                if (x.ok && x.status === 200 && x.body?.statusCode === 200) {
+                    this.fullPatterns = x.body.innerBody;
+                    this.filteredPatterns = x.body.innerBody;
+                }
+            }));
+            this.subscriptions.push(this.mls.lang$.subscribe(x => {
+                this.lang = x;
+            }));
+            this.subscriptions.push(this.shiftPatternDndService.collectionStarterX$.subscribe(x => {
+                this.container.nativeElement.style.setProperty('--starter-x', x + 'px');
+            }));
+            this.subscriptions.push(this.shiftPatternDndService.collectionResetTransform$.subscribe(_ => {
+                this.container.nativeElement.style.removeProperty('transform');
+            }));
+            let offset = {
+                dx: 0,
+                dy: 0,
+            };
+            const containerElement = this.container.nativeElement;
+            const headerElement = this.header.nativeElement;
+            if (!this.relativeMode) {
+                containerElement.style.setProperty('z-index', this.domService.getMaxZIndex() + 1);
+            }
+            const handleMouseDown = (e) => {
+                // important!
+                e.preventDefault();
+                const startPos = {
+                    x: e.clientX - offset.dx,
+                    y: e.clientY - offset.dy,
+                };
+                const handleMouseMove = (e) => {
+                    // How far the mouse has been moved
+                    const dx = e.clientX - startPos.x;
+                    const dy = e.clientY - startPos.y;
+                    // Set the position of element
+                    requestAnimationFrame(() => {
+                        containerElement.style.transform = `translate(${dx}px, ${dy}px)`;
+                    });
+                    // Reassign the position of mouse
+                    offset = { dx, dy };
+                };
+                var handleMouseUp = () => {
+                    document.removeEventListener('mousemove', handleMouseMove);
+                    document.removeEventListener('mouseup', handleMouseUp);
+                };
+                document.addEventListener('mousemove', handleMouseMove, { passive: true });
+                document.addEventListener('mouseup', handleMouseUp, { passive: true });
+            };
+            var handleTouchStart = (e) => {
+                const touch = e.touches[0];
+                const startPos = {
+                    x: touch.clientX - offset.dx,
+                    y: touch.clientY - offset.dy,
+                };
+                var handleTouchMove = (e) => {
+                    const touch = e.touches[0];
+                    const dx = touch.clientX - startPos.x;
+                    const dy = touch.clientY - startPos.y;
+                    requestAnimationFrame(() => {
+                        containerElement.style.transform = `translate(${dx}px, ${dy}px)`;
+                    });
+                    offset = { dx, dy };
+                };
+                const handleTouchEnd = () => {
+                    document.removeEventListener('touchmove', handleTouchMove);
+                    document.removeEventListener('touchend', handleTouchEnd);
+                };
+                document.addEventListener('touchmove', handleTouchMove, { passive: true });
+                document.addEventListener('touchend', handleTouchEnd, { passive: true });
+            };
+            if (!this.relativeMode) {
+                headerElement.addEventListener('mousedown', handleMouseDown);
+                headerElement.addEventListener('touchstart', handleTouchStart);
+            }
+        });
+    }
+    onClose(e) {
+        e.preventDefault();
+        this.shiftPatternDndService.patternCollectionOpen$.next(false);
+    }
+    filter() {
+        this.filteredPatterns = this.fullPatterns.filter(x => {
+            return (this.keyword === '' || x.code.toLowerCase().includes(this.keyword.toLowerCase()));
+        });
+    }
+    onKeywordChange(e) {
+        console.log(e);
+        this.filter();
+    }
+    onFilterReset() {
+        this.keyword = '';
+        this.filteredPatterns = this.fullPatterns;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreAtPatternCollectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoreAtPatternCollectionComponent, isStandalone: true, selector: "core-at-pattern-collection", inputs: { height: "height", relativeMode: "relativeMode" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"core-at-pattern-collection-container\" draggable=\"true\">\r\n    <div class=\"p-relative\">\r\n        <div #header class=\"header\" [ngStyle]=\"{\r\n            cursor: relativeMode ? 'auto' : 'move'\r\n        }\">\r\n            <span>{{ 'AT_SHIFT_PATTERN_COLLECTION' | translate: lang | uppercase }}</span>\r\n            @if (!relativeMode) {\r\n                <i class=\"feather-x\" (click)=\"onClose($event)\"></i>\r\n            }\r\n        </div>\r\n        <div class=\"lookup-wrapper d-flex d-flex-start p15\">\r\n            <div class=\"advanced-search d-flex d-flex-v h-100\">\r\n                @if (keyword.length) {\r\n                <div class=\"pointer\" [appTooltip]=\"'UI_COMMON_FILTER_RESET' | translate: lang\" (click)=\"onFilterReset()\">\r\n                    <i class=\"feather-x\"></i>\r\n                </div>\r\n                }\r\n            </div>\r\n            <div class=\"lookup w-100\">\r\n                <input class=\"form-control\" [placeholder]=\"'UI_COMMON_SEARCH' | translate: lang\" [(ngModel)]=\"keyword\"\r\n                    (ngModelChange)=\"onKeywordChange($event)\">\r\n            </div>\r\n        </div>\r\n        <div class=\"scroll-wrapper\">\r\n            <core-scroll [localOptions]=\"filteredPatterns\" [itemTemplate]=\"itemTemplateRef\"\r\n                [itemCount]=\"filteredPatterns.length\" [height]=\"height - 50 - searchHeight\" [childHeight]=\"itemHeight\">\r\n            </core-scroll>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #itemTemplateRef let-context=\"context\">\r\n    <li [ngStyle]=\"{ height: itemHeight + 'px' }\">\r\n        <core-at-pattern-card [ngModel]=\"context\"></core-at-pattern-card>\r\n    </li>\r\n</ng-template>", styles: [".core-at-pattern-collection-container{--starter-x: 0px;background-color:#fff4ce;width:240px;position:fixed;display:block;z-index:9;top:0;left:var(--starter-x);box-shadow:.4rem 0 2rem #0000002e;border-radius:2px}.core-at-pattern-collection-container .scroll-wrapper{padding-left:9px;margin-right:15px}.core-at-pattern-collection-container ul,.core-at-pattern-collection-container li{padding:0;margin:0}.core-at-pattern-collection-container .header{padding:15px;display:block;height:50px}.core-at-pattern-collection-container .header i{color:gray;font-size:24px;float:right;cursor:pointer}.core-at-pattern-collection-container .lookup input:not(:last-child){margin-bottom:15px}li{margin-left:9px;margin-right:9px;border-radius:2px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoreScrollComponent, selector: "core-scroll", inputs: ["localOptions", "itemTemplate", "itemCount", "height", "childHeight", "renderAhread"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "component", type: CoreAtPatternCardComponent, selector: "core-at-pattern-card" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreAtPatternCollectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-at-pattern-collection', imports: [
+                        NgStyle,
+                        UpperCasePipe,
+                        FormsModule,
+                        CoreScrollComponent,
+                        TranslatePipe,
+                        TooltipDirective,
+                        CoreAtPatternCardComponent
+                    ], template: "<div #container class=\"core-at-pattern-collection-container\" draggable=\"true\">\r\n    <div class=\"p-relative\">\r\n        <div #header class=\"header\" [ngStyle]=\"{\r\n            cursor: relativeMode ? 'auto' : 'move'\r\n        }\">\r\n            <span>{{ 'AT_SHIFT_PATTERN_COLLECTION' | translate: lang | uppercase }}</span>\r\n            @if (!relativeMode) {\r\n                <i class=\"feather-x\" (click)=\"onClose($event)\"></i>\r\n            }\r\n        </div>\r\n        <div class=\"lookup-wrapper d-flex d-flex-start p15\">\r\n            <div class=\"advanced-search d-flex d-flex-v h-100\">\r\n                @if (keyword.length) {\r\n                <div class=\"pointer\" [appTooltip]=\"'UI_COMMON_FILTER_RESET' | translate: lang\" (click)=\"onFilterReset()\">\r\n                    <i class=\"feather-x\"></i>\r\n                </div>\r\n                }\r\n            </div>\r\n            <div class=\"lookup w-100\">\r\n                <input class=\"form-control\" [placeholder]=\"'UI_COMMON_SEARCH' | translate: lang\" [(ngModel)]=\"keyword\"\r\n                    (ngModelChange)=\"onKeywordChange($event)\">\r\n            </div>\r\n        </div>\r\n        <div class=\"scroll-wrapper\">\r\n            <core-scroll [localOptions]=\"filteredPatterns\" [itemTemplate]=\"itemTemplateRef\"\r\n                [itemCount]=\"filteredPatterns.length\" [height]=\"height - 50 - searchHeight\" [childHeight]=\"itemHeight\">\r\n            </core-scroll>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #itemTemplateRef let-context=\"context\">\r\n    <li [ngStyle]=\"{ height: itemHeight + 'px' }\">\r\n        <core-at-pattern-card [ngModel]=\"context\"></core-at-pattern-card>\r\n    </li>\r\n</ng-template>", styles: [".core-at-pattern-collection-container{--starter-x: 0px;background-color:#fff4ce;width:240px;position:fixed;display:block;z-index:9;top:0;left:var(--starter-x);box-shadow:.4rem 0 2rem #0000002e;border-radius:2px}.core-at-pattern-collection-container .scroll-wrapper{padding-left:9px;margin-right:15px}.core-at-pattern-collection-container ul,.core-at-pattern-collection-container li{padding:0;margin:0}.core-at-pattern-collection-container .header{padding:15px;display:block;height:50px}.core-at-pattern-collection-container .header i{color:gray;font-size:24px;float:right;cursor:pointer}.core-at-pattern-collection-container .lookup input:not(:last-child){margin-bottom:15px}li{margin-left:9px;margin-right:9px;border-radius:2px}\n"] }]
+        }], propDecorators: { height: [{
+                type: Input,
+                args: [{ required: true }]
+            }], relativeMode: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
+            }], header: [{
+                type: ViewChild,
+                args: ['header']
+            }] } });
+
 class CoreOrgParamComponent extends CoreFormControlBaseComponent {
     constructor(seekerService, layoutService, organizationService, mls) {
         super();
@@ -21075,6 +21321,10 @@ class CoreOrgParamComponent extends CoreFormControlBaseComponent {
         this.accessorMode = EnumCoreOrgTreeaAccessorMode.CHECKED;
         this.pendingIds = [];
         this.subscriptions = [];
+        this.buttonItems = [
+            EnumCoreButtonVNSCode.NONE_HEADER_CANCEL,
+            EnumCoreButtonVNSCode.NONE_HEADER_CONFIRM,
+        ];
         this.seekerService.sourceSpaceHeight$.subscribe(x => {
             this.sourceSpaceHeight = x;
             this.sourceContainerHeight = this.showPageHeader ? x - this.layoutService.corePageHeaderHeight - 68 : x - 68;
@@ -21139,6 +21389,16 @@ class CoreOrgParamComponent extends CoreFormControlBaseComponent {
             this.sourceOpen = false;
         }
     }
+    onButtonClick(e) {
+        switch (e.code) {
+            case EnumCoreButtonVNSCode.NONE_HEADER_CONFIRM:
+                this.onSelect();
+                break;
+            case EnumCoreButtonVNSCode.NONE_HEADER_CANCEL:
+                this.onCancel();
+                break;
+        }
+    }
     onItemDoubleClick(e) {
         this.onSelect();
     }
@@ -21147,6 +21407,17 @@ class CoreOrgParamComponent extends CoreFormControlBaseComponent {
         console.log("CoreOrgParamComponent onIdsChange: ", e);
         this.onChange(e);
         this.pendingIds = e;
+        if (!!e.length) {
+            this.buttonItems = [
+                EnumCoreButtonVNSCode.NONE_HEADER_CANCEL,
+                EnumCoreButtonVNSCode.NONE_HEADER_CONFIRM,
+            ];
+        }
+        else {
+            this.buttonItems = [
+                EnumCoreButtonVNSCode.NONE_HEADER_CANCEL,
+            ];
+        }
     }
     onItemClick(e) {
         if (this.accessorMode === EnumCoreOrgTreeaAccessorMode.ACTIVATED_INHERITANCE || this.accessorMode === EnumCoreOrgTreeaAccessorMode.ACTIVATED_SINGLE) {
@@ -21166,7 +21437,7 @@ class CoreOrgParamComponent extends CoreFormControlBaseComponent {
                 multi: true,
                 useExisting: CoreOrgParamComponent
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div #container class=\"core-org-param-container\">\r\n    <div class=\"input-wrapper\">\r\n        <label #shownText type=\"text\" class=\"text form-control pointer\" (click)=\"onClickSeek()\">\r\n            <span [appTooltip]=\"valueToShow\">{{ valueToShow }}</span>\r\n        </label>\r\n    </div>\r\n    <div class=\"seeker-icon-wrapper\" (click)=\"onClickSeek()\">\r\n        <div class=\"flex-wrapper\">\r\n            <i class=\"feather-search\"></i>\r\n        </div>\r\n    </div>\r\n\r\n    @if (!!sourceOpen) {\r\n    <div class=\"modal-container\">\r\n        <div class=\"modal-content-root\" [ngStyle]=\"{ padding: '0px' }\">\r\n\r\n            <div class=\"source-space\" [ngStyle]=\"{\r\n                height: sourceSpaceHeight + 'px',\r\n                overflow: 'hidden',\r\n                boxSizing: 'border-box',\r\n            }\">\r\n                <div class=\"source-container\" [ngStyle]=\"{\r\n                    height: sourceContainerHeight + 'px',\r\n                    paddingTop: '0px',\r\n                    paddingBottom: '0px'\r\n                }\">\r\n                    <i class=\"close-icon feather-x d-block\" (click)=\"onCancel()\"></i>\r\n\r\n                    <core-org-unit-seeker [accessorMode]=\"accessorMode\" [height]=\"childComponentHeight\" (itemClick)=\"onItemClick($event)\" (itemDoubleClick)=\"onItemDoubleClick($event)\" (idsChange)=\"onIdsChange($event)\"\r\n                        [height]=\"childComponentHeight\"></core-org-unit-seeker>\r\n\r\n                </div>\r\n\r\n                <div class=\"footer\">\r\n                    <div class=\"d-flex-end\">\r\n                        @if (!!pendingIds.length) {\r\n                        <button class=\"btn btn-primary\" type=\"button\" (click)=\"onSelect()\">{{\r\n                            'UI_CORE_CONFIRM_DIALOG_BUTTON_SELECT' | translate: lang }}</button>\r\n                        }\r\n                        <button class=\"btn btn-secondary\" type=\"button\" (click)=\"onCancel()\">{{\r\n                            'UI_CORE_CONFIRM_DIALOG_BUTTON_CANCEL' | translate: lang }}</button>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n    }\r\n\r\n</div>", styles: [".core-org-param-container{display:block;position:relative;background-color:#fff}.core-org-param-container>.seeker-icon-wrapper{display:block;position:absolute;background-color:#e9e9e9;right:3px;top:3px;width:29px;height:29px;border-radius:.275rem;cursor:pointer}.core-org-param-container>.seeker-icon-wrapper>.flex-wrapper{width:29px;height:29px;display:flex;align-items:center;justify-content:center}.core-org-param-container>.seeker-icon-wrapper>.flex-wrapper>i.close-icon{color:#848484;font-size:20px}.core-org-param-container .input-wrapper{height:var(--size-form-control-height)}.core-org-param-container .input-wrapper label.text span{display:block;height:calc(var(--size-form-control-height) - 12px);line-height:calc(var(--size-form-control-height) - 12px);width:calc(100% - var(--size-form-control-height));overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:inherit}.core-org-param-container .input-wrapper .clear-icon-wrapper{display:none;position:absolute;background-color:transparent;right:28px;top:3px;width:29px;height:29px;border-radius:.275rem;cursor:pointer}.core-org-param-container .input-wrapper .clear-icon-wrapper>.flex-wrapper{width:29px;height:29px;display:flex;align-items:center;justify-content:center}.core-org-param-container .input-wrapper .clear-icon-wrapper>.flex-wrapper>i{color:#848484;font-size:20px}.core-org-param-container .input-wrapper:hover>.clear-icon-wrapper{display:block}.core-org-param-container>.seeker-icon-wrapper.multi-mode{position:relative;width:35px;height:35px}.core-org-param-container>.seeker-icon-wrapper.multi-mode>.flex-wrapper{width:35px;height:35px}.core-org-param-container .source-container{display:block;background-color:#fff;padding:var(--size-layout-block-cell-spacing);max-width:1200px;border-radius:10px}.core-org-param-container .source-container i.close-icon{font-size:20px;cursor:pointer;position:absolute;right:15px;top:15px}.core-org-param-container .source-container.d-none{display:none}.core-org-param-container .source-container>caption{display:block;width:100%}.core-org-param-container .source-container:has(~.footer){border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.core-org-param-container .footer{background-color:var(--color-bg-main);border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding:var(--size-layout-block-cell-spacing);position:absolute;bottom:0;left:0;width:100%}.core-org-param-container .footer button:first-child{margin-right:var(--size-layout-block-cell-spacing)}.core-org-param-container .core-tabbe-wrapper{margin-top:5px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoreOrgUnitSeekerComponent, selector: "core-org-unit-seeker", inputs: ["accessorMode", "height", "excludedIds$"], outputs: ["itemDoubleClick", "itemClick", "idsChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div #container class=\"core-org-param-container\">\r\n    <div class=\"input-wrapper\">\r\n        <label #shownText type=\"text\" class=\"text form-control pointer\" (click)=\"onClickSeek()\">\r\n            <span [appTooltip]=\"valueToShow\">{{ valueToShow }}</span>\r\n        </label>\r\n    </div>\r\n    <div class=\"seeker-icon-wrapper\" (click)=\"onClickSeek()\">\r\n        <div class=\"flex-wrapper\">\r\n            <i class=\"feather-search\"></i>\r\n        </div>\r\n    </div>\r\n\r\n    @if (!!sourceOpen) {\r\n    <div class=\"modal-container\">\r\n        <div class=\"modal-content-root\" [ngStyle]=\"{ padding: '0px' }\">\r\n\r\n            <div class=\"source-space\" [ngStyle]=\"{\r\n                height: sourceSpaceHeight + 'px',\r\n                overflow: 'hidden',\r\n                boxSizing: 'border-box',\r\n            }\">\r\n                <div class=\"source-container\" [ngStyle]=\"{\r\n                    height: sourceContainerHeight + 'px',\r\n                    paddingTop: '0px',\r\n                    paddingBottom: '0px'\r\n                }\">\r\n                    <i class=\"close-icon feather-x d-block\" (click)=\"onCancel()\"></i>\r\n\r\n                    <core-org-unit-seeker [accessorMode]=\"accessorMode\" [height]=\"childComponentHeight\"\r\n                        (itemClick)=\"onItemClick($event)\" (itemDoubleClick)=\"onItemDoubleClick($event)\"\r\n                        (idsChange)=\"onIdsChange($event)\" [height]=\"childComponentHeight\"></core-org-unit-seeker>\r\n\r\n                </div>\r\n\r\n                <div class=\"footer\">\r\n                    <div class=\"d-flex-end\">\r\n                        <!-- @if (!!pendingIds.length) {\r\n                        <button class=\"btn btn-primary\" type=\"button\" (click)=\"onSelect()\">{{\r\n                            'UI_CORE_CONFIRM_DIALOG_BUTTON_SELECT' | translate: lang }}</button>\r\n                        }\r\n                        <button class=\"btn btn-secondary\" type=\"button\" (click)=\"onCancel()\">{{\r\n                            'UI_CORE_CONFIRM_DIALOG_BUTTON_CANCEL' | translate: lang }}</button> -->\r\n\r\n\r\n                        <div class=\"d-flex d-flex-end w-100 pr18\">\r\n                            <core-button-group-vns [showCaption]=\"true\" [forHeader]=\"false\"\r\n                            (buttonClick)=\"onButtonClick($event)\" [shownItems]=\"buttonItems\"\r\n                            class=\"buttonGroupCustom\"></core-button-group-vns>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n    }\r\n\r\n</div>", styles: [".core-org-param-container{display:block;position:relative;background-color:#fff}.core-org-param-container>.seeker-icon-wrapper{display:block;position:absolute;right:0;top:0;width:35px;height:35px;cursor:pointer}.core-org-param-container>.seeker-icon-wrapper>.flex-wrapper{width:35px;height:35px;display:flex;align-items:center;justify-content:center;border:1px solid #ced4da}.core-org-param-container>.seeker-icon-wrapper>.flex-wrapper>i.close-icon{color:#848484;font-size:20px}.core-org-param-container .input-wrapper{height:var(--size-form-control-height)}.core-org-param-container .input-wrapper label.text span{display:block;height:calc(var(--size-form-control-height) - 12px);line-height:calc(var(--size-form-control-height) - 12px);width:calc(100% - var(--size-form-control-height));overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:inherit}.core-org-param-container .input-wrapper .clear-icon-wrapper{display:none;position:absolute;background-color:transparent;right:28px;top:3px;width:35px;height:35px;cursor:pointer}.core-org-param-container .input-wrapper .clear-icon-wrapper>.flex-wrapper{width:35px;height:35px;display:flex;align-items:center;justify-content:center}.core-org-param-container .input-wrapper .clear-icon-wrapper>.flex-wrapper>i{color:#848484;font-size:20px}.core-org-param-container .input-wrapper:hover>.clear-icon-wrapper{display:block}.core-org-param-container>.seeker-icon-wrapper.multi-mode{position:relative;width:35px;height:35px}.core-org-param-container>.seeker-icon-wrapper.multi-mode>.flex-wrapper{width:35px;height:35px}.core-org-param-container .source-container{display:block;background-color:#fff;padding:var(--size-layout-block-cell-spacing);max-width:1200px}.core-org-param-container .source-container i.close-icon{font-size:20px;cursor:pointer;position:absolute;right:15px;top:15px}.core-org-param-container .source-container.d-none{display:none}.core-org-param-container .source-container>caption{display:block;width:100%}.core-org-param-container .source-container:has(~.footer){border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.core-org-param-container .footer{background-color:var(--color-bg-main);padding:var(--size-layout-block-cell-spacing);position:absolute;bottom:0;left:0;width:100%}.core-org-param-container .footer button{border-radius:0}.core-org-param-container .footer button:first-child{margin-right:var(--size-layout-block-cell-spacing)}.core-org-param-container .footer button:last-child{color:#fff;background-color:#000}.core-org-param-container .core-tabbe-wrapper{margin-top:5px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoreOrgUnitSeekerComponent, selector: "core-org-unit-seeker", inputs: ["accessorMode", "height", "excludedIds$"], outputs: ["itemDoubleClick", "itemClick", "idsChange"] }, { kind: "component", type: CoreButtonGroupVnsComponent, selector: "core-button-group-vns", inputs: ["height", "instanceNumber", "forHeader", "fixedShow", "shownItems", "showCaption", "lastChildEffectOff"], outputs: ["buttonClick"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreOrgParamComponent, decorators: [{
             type: Component,
@@ -21175,6 +21446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                         FormsModule,
                         CorePageHeaderComponent,
                         CoreOrgUnitSeekerComponent,
+                        CoreButtonGroupVnsComponent,
                         TranslatePipe,
                         TooltipDirective
                     ], providers: [
@@ -21183,11 +21455,245 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                             multi: true,
                             useExisting: CoreOrgParamComponent
                         },
-                    ], template: "<div #container class=\"core-org-param-container\">\r\n    <div class=\"input-wrapper\">\r\n        <label #shownText type=\"text\" class=\"text form-control pointer\" (click)=\"onClickSeek()\">\r\n            <span [appTooltip]=\"valueToShow\">{{ valueToShow }}</span>\r\n        </label>\r\n    </div>\r\n    <div class=\"seeker-icon-wrapper\" (click)=\"onClickSeek()\">\r\n        <div class=\"flex-wrapper\">\r\n            <i class=\"feather-search\"></i>\r\n        </div>\r\n    </div>\r\n\r\n    @if (!!sourceOpen) {\r\n    <div class=\"modal-container\">\r\n        <div class=\"modal-content-root\" [ngStyle]=\"{ padding: '0px' }\">\r\n\r\n            <div class=\"source-space\" [ngStyle]=\"{\r\n                height: sourceSpaceHeight + 'px',\r\n                overflow: 'hidden',\r\n                boxSizing: 'border-box',\r\n            }\">\r\n                <div class=\"source-container\" [ngStyle]=\"{\r\n                    height: sourceContainerHeight + 'px',\r\n                    paddingTop: '0px',\r\n                    paddingBottom: '0px'\r\n                }\">\r\n                    <i class=\"close-icon feather-x d-block\" (click)=\"onCancel()\"></i>\r\n\r\n                    <core-org-unit-seeker [accessorMode]=\"accessorMode\" [height]=\"childComponentHeight\" (itemClick)=\"onItemClick($event)\" (itemDoubleClick)=\"onItemDoubleClick($event)\" (idsChange)=\"onIdsChange($event)\"\r\n                        [height]=\"childComponentHeight\"></core-org-unit-seeker>\r\n\r\n                </div>\r\n\r\n                <div class=\"footer\">\r\n                    <div class=\"d-flex-end\">\r\n                        @if (!!pendingIds.length) {\r\n                        <button class=\"btn btn-primary\" type=\"button\" (click)=\"onSelect()\">{{\r\n                            'UI_CORE_CONFIRM_DIALOG_BUTTON_SELECT' | translate: lang }}</button>\r\n                        }\r\n                        <button class=\"btn btn-secondary\" type=\"button\" (click)=\"onCancel()\">{{\r\n                            'UI_CORE_CONFIRM_DIALOG_BUTTON_CANCEL' | translate: lang }}</button>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n    }\r\n\r\n</div>", styles: [".core-org-param-container{display:block;position:relative;background-color:#fff}.core-org-param-container>.seeker-icon-wrapper{display:block;position:absolute;background-color:#e9e9e9;right:3px;top:3px;width:29px;height:29px;border-radius:.275rem;cursor:pointer}.core-org-param-container>.seeker-icon-wrapper>.flex-wrapper{width:29px;height:29px;display:flex;align-items:center;justify-content:center}.core-org-param-container>.seeker-icon-wrapper>.flex-wrapper>i.close-icon{color:#848484;font-size:20px}.core-org-param-container .input-wrapper{height:var(--size-form-control-height)}.core-org-param-container .input-wrapper label.text span{display:block;height:calc(var(--size-form-control-height) - 12px);line-height:calc(var(--size-form-control-height) - 12px);width:calc(100% - var(--size-form-control-height));overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:inherit}.core-org-param-container .input-wrapper .clear-icon-wrapper{display:none;position:absolute;background-color:transparent;right:28px;top:3px;width:29px;height:29px;border-radius:.275rem;cursor:pointer}.core-org-param-container .input-wrapper .clear-icon-wrapper>.flex-wrapper{width:29px;height:29px;display:flex;align-items:center;justify-content:center}.core-org-param-container .input-wrapper .clear-icon-wrapper>.flex-wrapper>i{color:#848484;font-size:20px}.core-org-param-container .input-wrapper:hover>.clear-icon-wrapper{display:block}.core-org-param-container>.seeker-icon-wrapper.multi-mode{position:relative;width:35px;height:35px}.core-org-param-container>.seeker-icon-wrapper.multi-mode>.flex-wrapper{width:35px;height:35px}.core-org-param-container .source-container{display:block;background-color:#fff;padding:var(--size-layout-block-cell-spacing);max-width:1200px;border-radius:10px}.core-org-param-container .source-container i.close-icon{font-size:20px;cursor:pointer;position:absolute;right:15px;top:15px}.core-org-param-container .source-container.d-none{display:none}.core-org-param-container .source-container>caption{display:block;width:100%}.core-org-param-container .source-container:has(~.footer){border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.core-org-param-container .footer{background-color:var(--color-bg-main);border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding:var(--size-layout-block-cell-spacing);position:absolute;bottom:0;left:0;width:100%}.core-org-param-container .footer button:first-child{margin-right:var(--size-layout-block-cell-spacing)}.core-org-param-container .core-tabbe-wrapper{margin-top:5px}\n"] }]
+                    ], template: "<div #container class=\"core-org-param-container\">\r\n    <div class=\"input-wrapper\">\r\n        <label #shownText type=\"text\" class=\"text form-control pointer\" (click)=\"onClickSeek()\">\r\n            <span [appTooltip]=\"valueToShow\">{{ valueToShow }}</span>\r\n        </label>\r\n    </div>\r\n    <div class=\"seeker-icon-wrapper\" (click)=\"onClickSeek()\">\r\n        <div class=\"flex-wrapper\">\r\n            <i class=\"feather-search\"></i>\r\n        </div>\r\n    </div>\r\n\r\n    @if (!!sourceOpen) {\r\n    <div class=\"modal-container\">\r\n        <div class=\"modal-content-root\" [ngStyle]=\"{ padding: '0px' }\">\r\n\r\n            <div class=\"source-space\" [ngStyle]=\"{\r\n                height: sourceSpaceHeight + 'px',\r\n                overflow: 'hidden',\r\n                boxSizing: 'border-box',\r\n            }\">\r\n                <div class=\"source-container\" [ngStyle]=\"{\r\n                    height: sourceContainerHeight + 'px',\r\n                    paddingTop: '0px',\r\n                    paddingBottom: '0px'\r\n                }\">\r\n                    <i class=\"close-icon feather-x d-block\" (click)=\"onCancel()\"></i>\r\n\r\n                    <core-org-unit-seeker [accessorMode]=\"accessorMode\" [height]=\"childComponentHeight\"\r\n                        (itemClick)=\"onItemClick($event)\" (itemDoubleClick)=\"onItemDoubleClick($event)\"\r\n                        (idsChange)=\"onIdsChange($event)\" [height]=\"childComponentHeight\"></core-org-unit-seeker>\r\n\r\n                </div>\r\n\r\n                <div class=\"footer\">\r\n                    <div class=\"d-flex-end\">\r\n                        <!-- @if (!!pendingIds.length) {\r\n                        <button class=\"btn btn-primary\" type=\"button\" (click)=\"onSelect()\">{{\r\n                            'UI_CORE_CONFIRM_DIALOG_BUTTON_SELECT' | translate: lang }}</button>\r\n                        }\r\n                        <button class=\"btn btn-secondary\" type=\"button\" (click)=\"onCancel()\">{{\r\n                            'UI_CORE_CONFIRM_DIALOG_BUTTON_CANCEL' | translate: lang }}</button> -->\r\n\r\n\r\n                        <div class=\"d-flex d-flex-end w-100 pr18\">\r\n                            <core-button-group-vns [showCaption]=\"true\" [forHeader]=\"false\"\r\n                            (buttonClick)=\"onButtonClick($event)\" [shownItems]=\"buttonItems\"\r\n                            class=\"buttonGroupCustom\"></core-button-group-vns>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n    }\r\n\r\n</div>", styles: [".core-org-param-container{display:block;position:relative;background-color:#fff}.core-org-param-container>.seeker-icon-wrapper{display:block;position:absolute;right:0;top:0;width:35px;height:35px;cursor:pointer}.core-org-param-container>.seeker-icon-wrapper>.flex-wrapper{width:35px;height:35px;display:flex;align-items:center;justify-content:center;border:1px solid #ced4da}.core-org-param-container>.seeker-icon-wrapper>.flex-wrapper>i.close-icon{color:#848484;font-size:20px}.core-org-param-container .input-wrapper{height:var(--size-form-control-height)}.core-org-param-container .input-wrapper label.text span{display:block;height:calc(var(--size-form-control-height) - 12px);line-height:calc(var(--size-form-control-height) - 12px);width:calc(100% - var(--size-form-control-height));overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:inherit}.core-org-param-container .input-wrapper .clear-icon-wrapper{display:none;position:absolute;background-color:transparent;right:28px;top:3px;width:35px;height:35px;cursor:pointer}.core-org-param-container .input-wrapper .clear-icon-wrapper>.flex-wrapper{width:35px;height:35px;display:flex;align-items:center;justify-content:center}.core-org-param-container .input-wrapper .clear-icon-wrapper>.flex-wrapper>i{color:#848484;font-size:20px}.core-org-param-container .input-wrapper:hover>.clear-icon-wrapper{display:block}.core-org-param-container>.seeker-icon-wrapper.multi-mode{position:relative;width:35px;height:35px}.core-org-param-container>.seeker-icon-wrapper.multi-mode>.flex-wrapper{width:35px;height:35px}.core-org-param-container .source-container{display:block;background-color:#fff;padding:var(--size-layout-block-cell-spacing);max-width:1200px}.core-org-param-container .source-container i.close-icon{font-size:20px;cursor:pointer;position:absolute;right:15px;top:15px}.core-org-param-container .source-container.d-none{display:none}.core-org-param-container .source-container>caption{display:block;width:100%}.core-org-param-container .source-container:has(~.footer){border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.core-org-param-container .footer{background-color:var(--color-bg-main);padding:var(--size-layout-block-cell-spacing);position:absolute;bottom:0;left:0;width:100%}.core-org-param-container .footer button{border-radius:0}.core-org-param-container .footer button:first-child{margin-right:var(--size-layout-block-cell-spacing)}.core-org-param-container .footer button:last-child{color:#fff;background-color:#000}.core-org-param-container .core-tabbe-wrapper{margin-top:5px}\n"] }]
         }], ctorParameters: () => [{ type: SeekerService }, { type: LayoutService }, { type: OrganizationService }, { type: MultiLanguageService }], propDecorators: { accessorMode: [{
                 type: Input
             }] } });
 
+var EnumShiftPatternType;
+(function (EnumShiftPatternType) {
+    EnumShiftPatternType["WEEK"] = "WEEK";
+    EnumShiftPatternType["DAYS"] = "DAYS";
+})(EnumShiftPatternType || (EnumShiftPatternType = {}));
+
+class AtShiftPatternApplyComponent {
+    constructor() {
+        this.subscriptions = [];
+        this.dndService = inject(DndService);
+        this.atShiftPatternService = inject(AtShiftPatternService);
+        this.shiftPatternDndService = inject(ShiftPatternDndService);
+        this.appService = inject(AppService);
+        this.alertService = inject(AlertService);
+        this.mls = inject(MultiLanguageService);
+        this.patternCollectionHeight = 700;
+        this.previewData = [];
+        this.orgParamAccessorMode = EnumCoreOrgTreeaAccessorMode.CHECKED;
+        this.orgIds = [];
+        this.empObjectIds = [];
+        this.fromDate = undefined;
+        this.toDate = undefined;
+        this.empObjOptions$ = new BehaviorSubject([]);
+        this.dndEventSubscriptions = {
+            dragenter: new Subscription(() => null),
+            dragover: new Subscription(() => null),
+            drop: new Subscription(() => null),
+            dragleave: new Subscription(() => null)
+        };
+        this.isDraggingOverContainer = false;
+        this.loading = false;
+        this.dropzoneHeight = 300;
+        this.dragOverElements = new Set();
+    }
+    ngOnInit() {
+        this.mls.lang$.subscribe(x => this.lang = x);
+    }
+    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');
+        const dragleaveEvent = fromEvent(containerElement, 'dragleave');
+        this.dndEventSubscriptions.dragenter = dragenterEvent.subscribe((ev) => {
+            ev.preventDefault();
+            // Ignore other DnD types
+            if (this.dndService.dragType !== EnumDragType.SHIFT_PATTERN)
+                return;
+            this.isDraggingOverContainer = true;
+            this.cleanUpSubsequentSubscriptions();
+            this.dragOverElements.add(ev.target);
+            containerElement.classList.add('valid-drop');
+            this.dropzone?.nativeElement.style.setProperty('background-color', '#fff4ce');
+            // Subscribe to dragover event to allow drop
+            this.dndEventSubscriptions.dragover = dragoverEvent.subscribe((ev) => {
+                ev.preventDefault();
+            });
+            // Subscribe to drop event
+            this.dndEventSubscriptions.drop = dropEvent.subscribe((ev) => {
+                ev.preventDefault();
+                this.dragOverElements.clear(); // Clear the set
+                this.isDraggingOverContainer = false;
+                containerElement.classList.remove('valid-drop');
+                this.dropzone?.nativeElement.style.setProperty('background-color', 'lightgrey');
+                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();
+                }
+            });
+        });
+        this.dndEventSubscriptions.dragleave = dragleaveEvent.subscribe((ev) => {
+            ev.preventDefault();
+            this.dragOverElements.delete(ev.target);
+            // Check if we are leaving the container
+            if (ev.target.classList.contains('parent-container')) {
+                // Check if the related target is still within the container
+                if (!ev.relatedTarget || !ev.target.contains(ev.relatedTarget)) {
+                    this.isDraggingOverContainer = false;
+                    containerElement.classList.remove('valid-drop');
+                }
+            }
+            if (this.dragOverElements.size === 0) {
+                containerElement.classList.remove('valid-drop');
+            }
+            this.dropzone?.nativeElement.style.setProperty('background-color', 'lightgrey');
+            this.dndEventSubscriptions.dragover?.unsubscribe();
+            this.dndEventSubscriptions.drop?.unsubscribe();
+            this.dndEventSubscriptions.dragover = undefined;
+            this.dndEventSubscriptions.drop = undefined;
+        });
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.loading = true;
+            this.subscriptions.push(this.appService.get('/api/AtShiftPattern/GetEmpObjListForCheckList').subscribe(x => {
+                this.loading = false;
+                if (x.ok && x.status === 200 && x.body?.statusCode === 200) {
+                    this.empObjOptions$.next(x.body?.innerBody);
+                }
+            }));
+            this.dropzoneHeight = window.innerHeight - 60 - 50 - 35 - 15 - 15;
+            this.patternCollectionHeight = window.innerHeight - 60 - 50 - 15;
+            //this.setupDndSubscriptions();
+        });
+    }
+    cleanUpSubscriptions() {
+        this.dndEventSubscriptions.dragenter?.unsubscribe();
+        this.dndEventSubscriptions.dragover?.unsubscribe();
+        this.dndEventSubscriptions.drop?.unsubscribe();
+        this.dndEventSubscriptions.dragleave?.unsubscribe();
+    }
+    cleanUpSubsequentSubscriptions() {
+        this.dndEventSubscriptions.dragover?.unsubscribe();
+        this.dndEventSubscriptions.drop?.unsubscribe();
+    }
+    onSalPeriodChange(salPerId) {
+        this.salPeriod = salPerId;
+        this.subscriptions.push(this.appService.post(api.AT_SALARY_PERIOD_GET_LIST_PERIOD, { id: salPerId }).subscribe(x => {
+            if (x.ok && x.status === 200 && x.body?.statusCode === 200) {
+                const body = x.body;
+                this.startDate = new Date(body.innerBody.startDate);
+                this.startDateString = this.startDate.toDateString();
+                this.startPeriod = new Date(body.innerBody.startDate);
+                this.startPeriodString = this.startPeriod.toDateString();
+                this.endDate = new Date(body.innerBody.endDate);
+                this.endDateString = this.endDate.toDateString();
+                this.endPeriod = new Date(body.innerBody.endDate);
+                this.endPeriodString = this.endPeriod.toDateString();
+            }
+        }));
+    }
+    onCurrentMonthChange(e) {
+        this.subscriptions.push(this.appService.get(api.AT_SALARY_PERIOD_GET_BY_YEAR_MONTH_STRING + "?text=" + e).subscribe(x => {
+            if (x.ok && x.status === 200 && x.body?.statusCode === 200) {
+                if (!!x.body.innerBody) {
+                    this.periodId = x.body.innerBody.id;
+                    this.startPeriod = new Date(x.body.innerBody.startDate);
+                    this.startPeriodString = this.startPeriod.toDateString();
+                    this.endPeriod = new Date(x.body.innerBody.endDate);
+                    this.endPeriodString = this.endPeriod.toDateString();
+                    this.startDate = new Date(x.body.innerBody.startDate);
+                    this.startDateString = this.startDate.toDateString();
+                    this.endDate = new Date(x.body.innerBody.endDate);
+                    this.endDateString = this.endDate.toDateString();
+                    this.onSalPeriodChange(x.body.innerBody.id);
+                    this.setupDndSubscriptions();
+                    this.dropzoneReady = true;
+                }
+                else {
+                    this.alertService.warn(this.mls.trans("NO_SALARY_PERIOD_FOUND_FOR_SELECTED_MONTH", this.lang), alertOptions);
+                    this.startDate = null;
+                    this.endDate = null;
+                    this.cleanUpSubscriptions();
+                    this.dropzoneReady = false;
+                }
+            }
+            else {
+                this.alertService.warn(this.mls.trans("OPP!SOME_THING_IS_WRONG_WHILE_READING_THE_SALARY_PERIOD_FOR_CURRENT_MONTH", this.lang), alertOptions);
+                this.startDate = null;
+                this.endDate = null;
+                this.cleanUpSubscriptions();
+                this.dropzoneReady = false;
+            }
+        }));
+    }
+    makePreviewData() {
+        if (!this.shiftPatternDndService.draggingPattern$.value)
+            return;
+        if (!this.startDate || !this.endDate)
+            return;
+        const rawPattern = this.shiftPatternDndService.draggingPattern$.value;
+        const previewData = [];
+        this.subscriptions.push(this.atShiftPatternService.loadItem(rawPattern.id).subscribe(x => {
+            if (x.ok && x.status === 200 && x.body?.statusCode === 200) {
+                const pattern = x.body.innerBody;
+                switch (pattern.patternType) {
+                    case EnumShiftPatternType.WEEK:
+                        const startDate = new Date(this.startDate.setHours(0, 0, 0, 0)); // Set to start of the day
+                        const endDate = new Date(this.endDate.setHours(0, 0, 0, 0)); // Set to start of the day        
+                        for (let date = startDate; date <= endDate; date = new Date(date.getTime() + 24 * 60 * 60 * 1000)) {
+                            const weekDay = (date.getDay() + 6) % 7 + 1; // Transform Sunday (0) to 7, and others to 1-based index
+                            const shiftsFilter = pattern.shiftDetails?.filter(x => x.dayNumber === weekDay); // Get shifts for the one-based weekday index
+                            if (!!shiftsFilter.length) {
+                                const atShifts = shiftsFilter[0].shifts;
+                                previewData.push({
+                                    workingday: new Date(date), // Clone date to avoid mutations
+                                    shifts: [...atShifts], // Clone shifts to avoid mutations
+                                });
+                            }
+                            else {
+                                previewData.push({
+                                    workingday: new Date(date), // Clone date to avoid mutations
+                                    shifts: [],
+                                });
+                            }
+                        }
+                        this.previewData = previewData;
+                        break;
+                    case EnumShiftPatternType.DAYS:
+                        alert("Mẫu theo chuỗi ngày đang được phát triển, tạm thời dùng mẫu week");
+                        break;
+                }
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this.cleanUpSubscriptions();
+        this.dropzoneReady = false;
+        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'\"></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=\"condition-n-preview\">\r\n\r\n            <div class=\"condition\">\r\n                <div class=\"d-flex d-flex-start mb15 pd3\">\r\n                    <div class=\"param-wrapper w175 mr15\">\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                        <div class=\"form-group vertical\">\r\n                            <core-date-picker [(ngModel)]=\"startDate\"></core-date-picker>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w175 mr15\">\r\n                        <div class=\"form-group vertical\">\r\n                            <core-date-picker [(ngModel)]=\"endDate\"></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                            <core-org-param [accessorMode]=\"orgParamAccessorMode\" [(ngModel)]=\"orgIds\"></core-org-param>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w250 mr15\">\r\n                        <div class=\"form-group vertical\">\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>\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                    <div class=\"container mt50\">\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=\"daily-item col-md-4\">\r\n                                    <core-shift-cell [ngModel]=\"dailyItem.shifts\" [$readOnly]=\"true\"></core-shift-cell>\r\n                                </div>\r\n                            }        \r\n\r\n                        </div>\r\n\r\n                    </div>\r\n\r\n                </div>\r\n\r\n            </div>\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 .condition-n-preview{display:block;padding-left:240px}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone{display:block;position:relative;width:100%;height:300px}.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 .mt50{margin-top:50px}\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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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: CoreOrgParamComponent, selector: "core-org-param", inputs: ["accessorMode"] }, { 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"] }] }); }
+}
+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,
+                        CoreDatePickerComponent,
+                        FormsModule,
+                        CorePageHeaderComponent,
+                        CoreAtPatternCollectionComponent,
+                        CoreOrgParamComponent,
+                        CoreMonthSelectorComponent,
+                        CoreChecklistComponent,
+                        CoreShiftCellComponent,
+                    ], template: "<div class=\"core-at-shift-pattern-apply-container\">\r\n    <core-page-header [title]=\"'UI_COMPONENT_TITLE_AT_SHIFT_PATTERN_APPLY'\"></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=\"condition-n-preview\">\r\n\r\n            <div class=\"condition\">\r\n                <div class=\"d-flex d-flex-start mb15 pd3\">\r\n                    <div class=\"param-wrapper w175 mr15\">\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                        <div class=\"form-group vertical\">\r\n                            <core-date-picker [(ngModel)]=\"startDate\"></core-date-picker>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w175 mr15\">\r\n                        <div class=\"form-group vertical\">\r\n                            <core-date-picker [(ngModel)]=\"endDate\"></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                            <core-org-param [accessorMode]=\"orgParamAccessorMode\" [(ngModel)]=\"orgIds\"></core-org-param>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"param-wrapper w250 mr15\">\r\n                        <div class=\"form-group vertical\">\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>\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                    <div class=\"container mt50\">\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=\"daily-item col-md-4\">\r\n                                    <core-shift-cell [ngModel]=\"dailyItem.shifts\" [$readOnly]=\"true\"></core-shift-cell>\r\n                                </div>\r\n                            }        \r\n\r\n                        </div>\r\n\r\n                    </div>\r\n\r\n                </div>\r\n\r\n            </div>\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 .condition-n-preview{display:block;padding-left:240px}.core-at-shift-pattern-apply-container .patterns_condition-n-preview #dropzone{display:block;position:relative;width:100%;height:300px}.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 .mt50{margin-top:50px}\n"] }]
+        }], propDecorators: { dropzone: [{
+                type: ViewChild,
+                args: ['dropzone']
+            }] } });
+
 class AtWorksignService {
     constructor() {
         this.atSalaryPeriod$ = new BehaviorSubject(undefined);
@@ -21511,7 +22017,6 @@ class AtWorksignComponent extends BaseComponent {
                             this.endDateString = this.endDate.toDateString();
                             break;
                         case EnumWorkScheduleViewMode.CUSTOM:
-                            debugger;
                             this.endDate = new Date(this.startDate);
                             this.endDate.setDate(this.startDate.getDate() + 13);
                             this.endDateString = this.endDate.toDateString();
@@ -21579,43 +22084,6 @@ class AtWorksignComponent extends BaseComponent {
             case EnumCoreButtonVNSCode.HEADER_CREATE:
                 this.alertService.info("This screen is designed for direct DnD (drag and drop) and do not have 'CREATE' action", alertOptions);
                 break;
-            // this.atWorksignService.atSalaryPeriod$.next({
-            //   periodId: this.periodId,
-            //   startDate: this.startPeriod,
-            //   endDate: this.endPeriod,
-            // })
-            // this.router.navigate([
-            //   "individual-apply",
-            //   { listInstance: this.listInstance }
-            // ], {
-            //   relativeTo: this.route.parent
-            // })
-            // break;
-            /*
-            this.shiftSortService.changeListEmployeeSelected([]);
-            this.corePageEditService.fromUrl = this.router.url;
-      
-            this.router.navigate([btoa('0'), { listInstance: this.corePageListInstanceNumber }], {
-              relativeTo: this.route.parent,
-            });
-            break;
-          case EnumCoreButtonVNSCode.HEADER_EDIT:
-            if (this.selectedIds.length > 1) {
-              this.alertService.error(this.mls.trans('SELECT_ONLY_ONE_RECORD_TO_EDIT'), alertOptions);
-            }
-            else {
-              if (this.selectedIds.length == 1) {
-                this.router.navigate([btoa('' + this.selectedIds[0]), { listInstance: this.corePageListInstanceNumber }], {
-                  relativeTo: this.route.parent,
-                });
-              } else {
-                this.alertService.error(this.mls.trans('NO_SELECTED_ID_TO_EDIT'), alertOptions);
-              }
-      
-            }
-      
-            break;
-            */
             case EnumCoreButtonVNSCode.HEADER_DELETE:
                 if (this.selectedIds.length != 0) {
                     this.router.navigate([
@@ -21631,8 +22099,18 @@ class AtWorksignComponent extends BaseComponent {
                 }
                 break;
             case EnumCoreButtonVNSCode.HEADER_GETSHIFTDEFAULT:
-                this.pendingAction = EnumCoreButtonVNSCode.HEADER_GETSHIFTDEFAULT;
-                this.dialogService.createNew(EnumTranslateKey.UI_CORE_DIALOG_SERVICE_CONFIRMATION, EnumTranslateKey.UI_CORE_CONFIRM_DIALOG_BUTTON_CONFIRM, EnumTranslateKey.UI_CORE_CONFIRM_DIALOG_BUTTON_CANCEL, undefined, EnumTranslateKey.UI_CORE_DIALOG_COMFIRM_GET_DEFAULT_SHIFT, []);
+                alert("To do: Show Dnd Pattern Collection");
+                /*
+                this.pendingAction = EnumCoreButtonVNSCode.HEADER_GETSHIFTDEFAULT
+                this.dialogService.createNew(
+                  EnumTranslateKey.UI_CORE_DIALOG_SERVICE_CONFIRMATION,
+                  EnumTranslateKey.UI_CORE_CONFIRM_DIALOG_BUTTON_CONFIRM,
+                  EnumTranslateKey.UI_CORE_CONFIRM_DIALOG_BUTTON_CANCEL,
+                  undefined,
+                  EnumTranslateKey.UI_CORE_DIALOG_COMFIRM_GET_DEFAULT_SHIFT,
+                  []
+                );
+                */
                 break;
             case EnumCoreButtonVNSCode.HEADER_DOWNLOAD:
                 break;
@@ -21648,44 +22126,10 @@ class AtWorksignComponent extends BaseComponent {
                     },
                 ], { relativeTo: this.route });
                 break;
-            /*
-            if (this.orgIds != null && this.orgIds.length > 0) {
-              this.loadingExport = true;
-              const requestBody = {
-                periodId: this.salPeriod,
-                lstOrg: this.orgIds
-              };
-              this.subscriptions.push(
-                this.appService.blobPost(api.AT_SHIFT_SORT_EXPORT_TEMP, requestBody).subscribe(x => {
-                  if (x.ok && x.status === 200) {
-                    let downloadLink = document.createElement("a");
-                    downloadLink.href = window.URL.createObjectURL(new Blob([x.body]))
-                    downloadLink.setAttribute("download", "IMPORT_SHIFT_SORT_TEMP.xlsx");
-                    document.body.appendChild(downloadLink);
-                    downloadLink.click();
-                    this.loadingExport = false;
-                  }
-                }))
-            }
-            else {
-              debugger;
-      
-              this.alertService.warn("Chưa chọn sơ đồ tổ chức", alertOptions);
-            }
-            break;
-            */
             case EnumCoreButtonVNSCode.HEADER_UPLOAD:
                 break;
-            /*
-            this.openFileExplorer();
-            break;
-            */
             case EnumCoreButtonVNSCode.HEADER_EXPORTEXEL:
                 break;
-            /*
-            this.exportToExcel();
-            break;
-            */
             default:
                 break;
         }
@@ -21704,15 +22148,11 @@ class AtWorksignComponent extends BaseComponent {
                 this.dialogService.resetService();
                 switch (this.pendingAction) {
                     case EnumCoreButtonVNSCode.HEADER_GETSHIFTDEFAULT:
-                        //this.loading = true;
                         this.longTaskService.longApiRunning$.next(true);
                         this.subscriptions.push(this.appService.post(api.AT_SHIFT_SORT_GET_SHIFT_DEFAULT + "?usehub=true", { periodId: this.salPeriod, listOrgIds: this.orgIds }).subscribe(x => {
                             if (x.ok && x.status === 200 && x.body?.statusCode === 200) {
                                 this.alertService.info(this.mls.trans('GET_SUCCESS'), alertOptions);
                             }
-                            else {
-                                //this.alertService.error(JSON.stringify(x), alertOptions)
-                            }
                             this.longTaskService.longApiRunning$.next(false);
                             this.pendingAction = '';
                         }));
@@ -21975,7 +22415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                         FullscreenModalLoaderComponent,
                         ThreedotsComponent,
                         CoreApiProgressComponent,
-                        TooltipDirective
+                        TooltipDirective,
                     ], template: "<div class=\"at-worksign-container\">\r\n\r\n  @if (loading) {\r\n  <app-fullscreen-modal-loader [content]=\"threeDots\"></app-fullscreen-modal-loader>\r\n  }\r\n\r\n  @if (longTaskIsRunning) {\r\n  <core-api-progress></core-api-progress>\r\n  }\r\n\r\n  <ng-template #top>\r\n    <div class=\"d-flex d-flex-start mb15 pd3\">\r\n      <!-- <div class=\"param-wrapper w250 mr15\">\r\n          <div class=\"form-group vertical\">\r\n            <core-org-param [accessorMode]=\"orgParamAccessorMode\" [(ngModel)]=\"orgIds\"\r\n              (ngModelChange)=\"onOrgIdsChange($event)\"></core-org-param>\r\n          </div>\r\n        </div> -->\r\n      <div class=\"param-wrapper w150 mr15\">\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 w150 mr15\">\r\n        <div class=\"form-group vertical\">\r\n          <core-dropdown [paramMode]=\"true\" [(ngModel)]=\"subPeriodOption\"\r\n            (ngModelChange)=\"onSubPeriodOptionChange($event)\" [options$]=\"subPeriodOptions$\"\r\n            [getByIdObject$]=\"subPeriodGetByIdObject$\" [shownFrom]=\"''\" [clearDisable]=\"true\"\r\n            [fitHeightWithItemCount]=\"true\"></core-dropdown>\r\n        </div>\r\n      </div>\r\n      <div class=\"param-wrapper w150 mr15\">\r\n        <div class=\"form-group vertical\">\r\n          <div class=\"d-flex d-flex-around\">\r\n            @if (!fullPeriodMode) {\r\n            <div (click)=\"goPreviousSevenDays()\" [class.disabled]=\"startDateString===startPeriodString\"><i\r\n                class=\"feather-arrow-left fs24 color-gray\"></i></div>\r\n            }\r\n            <h6 style=\"color: gray;\" class=\"h35 d-flex no-margin user-select-none\">{{ startDate | tableCell: \"DATE_DDMM\"\r\n              :\r\n              lang }} - {{\r\n              endDate | tableCell: \"DATE_DDMM\" : lang }}</h6>\r\n            @if (!fullPeriodMode) {\r\n            <div (click)=\"goNextSevenDays()\" [class.disabled]=\"endDateString===endPeriodString\"><i\r\n                class=\"feather-arrow-right fs24 color-gray\"></i></div>\r\n            }\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <core-page-list [top]=\"top\" [title]=\"title\" [apiDefinition]=\"apiDefinition\" [columns]=\"columns\"\r\n    [disableDoubleClick]=\"true\" [selfResolveCorePageHeaderButtonClick]=\"true\" [rowHeight]=\"'71px'\" [frozen]=\"2\"\r\n    [columnSearchDefaultOpen]=\"true\" [editRoute]=\"editRoute\" [crud]=\"crud\" [normalMode]=\"true\" [title]=\"title\"\r\n    [outerInOperators]=\"outerInOperators\" [outerParam$]=\"outerParam$\" [changeTracking]=\"true\"\r\n    [changedItems$]=\"changedItems$\" [outerFilterOperators]=\"filterOperators\" [extraManualOffset]=\"55\"\r\n    [fixedPageSize]=\"10\" [autoResizeWithWindow]=\"true\" (corePageHeaderButtonClick)=\"onCorePageHeaderButtonClick($event)\"\r\n    (rowDoubleClick)=\"onRowDoubleClick($event)\" (onInstanceCreated)=\"onListInstanceCreated($event)\"\r\n    [paramRows]=\"paramRows\" [autoColumnFitAvailableSpace]=\"false\"></core-page-list>\r\n\r\n  @if (showShiftCollection) {\r\n  <core-shift-collection [height]=\"800\"></core-shift-collection>\r\n  }\r\n\r\n  @for (day of days; track $index) {\r\n  <ng-template #shiftCell let-context=\"context\" let-isLocked=\"context.isLocked\">\r\n    <core-shift-cell [ngModel]=\"context['shifts' + ($index + 1)]\" [$readOnly]=\"isLocked\"\r\n      (ngModelChange)=\"onCellChange('shifts' + ($index + 1), $event, context)\"></core-shift-cell>\r\n  </ng-template>\r\n  }\r\n\r\n  <ng-template #threeDots>\r\n    <app-threedots></app-threedots>\r\n  </ng-template>\r\n\r\n  <ng-template #orgNameWithLock let-orgName=\"context.orgName\" let-isLocked=\"context.isLocked\">\r\n    <div class=\"d-flex d-flex-start orgNameWrapper\">\r\n      <div class=\"icon-wrapper\">\r\n        @if (!!isLocked) {\r\n        <i class=\"feather-lock\"></i>\r\n        } @else {\r\n        <i class=\"feather-bookmark\"></i>\r\n        }\r\n      </div>\r\n      <div class=\"org-name\" [appTooltip]=\"orgName\">{{ orgName }}</div>\r\n    </div>\r\n  </ng-template>\r\n\r\n</div>", styles: [".icon-wrapper{display:block;width:20px;height:20px}.icon-wrapper i{color:#d3d3d3;font-size:20px}.icon-wrapper i.feather-lock{color:brown}.org-name{display:block;margin-left:8px;width:100%;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [{ type: MultiLanguageService }, { type: CoreButtonGroupService }, { type: OrganizationService }, { type: AppService }, { type: AtWorksignService }, { type: AlertService }, { type: CorePageListService }, { type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: DialogService }, { type: WorkShiftDndService }, { type: LongTaskService }, { type: CoreDatetimeService }], propDecorators: { orgNameWithLock: [{
                 type: ViewChild,
@@ -22130,11 +22570,174 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                 args: ['status']
             }] } });
 
-class IndividualScheduleApplyComponent /*extends BaseComponent implements AfterViewInit */ {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: IndividualScheduleApplyComponent /*extends BaseComponent implements AfterViewInit */, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: IndividualScheduleApplyComponent /*extends BaseComponent implements AfterViewInit */, isStandalone: true, selector: "app-individual-schedule-apply", ngImport: i0, template: "<div class=\"modal-container\">\r\n\r\n    <div class=\"modal-content-root\">\r\n\r\n        <h2>DEPRECATED</h2>\r\n\r\n        <!-- <div class=\"app-individual-schedule-apply\">\r\n            <div class=\"inner-container\">\r\n                <core-page-header [title]=\"'UI_COMPONENT_TITLE_INDIVIDUAL_WORK_SCHEDULE_APPLY'\"\r\n                    [hideButtonGroup]=\"true\"></core-page-header>\r\n                <div class=\"body\">\r\n                    <div class=\"w320 d-inline-block shift-collection\">\r\n                        <core-shift-collection [relativeMode]=\"true\" [height]=\"shiftCollectionHeight\"></core-shift-collection>\r\n                    </div>\r\n                    <div class=\"d-inline-block right-part pl15\">\r\n                        <div class=\"shift-cell-and-date-range d-inline-flex\">\r\n                            <div class=\"d-inline-block shift-cell pt15\">\r\n                                <label>{{ 'UI_TIME_MANAGEMENT_SHIFT_CELL' | translate: lang }}</label>\r\n                                <core-shift-cell [(ngModel)]=\"shiftCell\" (ngModelChange)=\"onShiftCellChange($event)\" [$hideStarterPlusSign]=\"true\"></core-shift-cell>\r\n                                @if (shiftCellError && shiftCellError.length) {\r\n                                <p class=\"form-control-error p-absolute\">{{shiftCellError | translate: lang}}</p>\r\n                                }\r\n                            </div>\r\n                            <div class=\"p15\">\r\n                                <label>{{ 'FROM_DATE' | translate: lang }}</label>\r\n                                <div class=\"mt15\">\r\n                                    <core-date-picker [(ngModel)]=\"fromDate\" (ngModelChange)=\"onFromDateChange($event)\"></core-date-picker>\r\n                                </div>\r\n                                @if (fromDateError && fromDateError.length) {\r\n                                <p class=\"form-control-error p-absolute\">{{fromDateError | translate: lang}}</p>\r\n                                }\r\n                            </div>\r\n                            <div class=\"p15\">\r\n                                <label>{{ 'TO_DATE' | translate: lang }}</label>\r\n                                <div class=\"mt15\">\r\n                                    <core-date-picker [(ngModel)]=\"toDate\" (ngModelChange)=\"onToDateChange($event)\"></core-date-picker>\r\n                                </div>\r\n                                @if (toDateError && toDateError.length) {\r\n                                    <p class=\"form-control-error p-absolute\">{{toDateError | translate: lang}}</p>\r\n                                    }\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"selected-employees mt30 mb15\">\r\n                            <label>{{ 'SELECT_EMPLOYEES' | translate: lang }}</label>\r\n                            <core-form-control-seeker [paramMode]=\"true\" [seekerSourceType]=\"employeeSeekerSourceType\"\r\n                                [multiMode]=\"true\" [objectList$]=\"employeeObjectList$\"\r\n                                [excludeExistingList]=\"true\"\r\n                                [multiModeTableHeight]=\"selectedEmployeeTableHeight\" [(ngModel)]=\"selectedEmployees\" (ngModelChange)=\"onSelectedEmployeesChange($event)\">\r\n                            </core-form-control-seeker>\r\n                            @if (selectedEmployeesError && selectedEmployeesError.length) {\r\n                            <p class=\"form-control-error p-absolute\">{{selectedEmployeesError | translate: lang}}</p>\r\n                            }\r\n                        </div>\r\n                        <div class=\"buttons d-flex d-flex-end\">\r\n                            <core-button-group-vns [shownItems]=\"buttons\" [showCaption]=\"true\"\r\n                                (buttonClick)=\"onButtonClick($event)\"></core-button-group-vns>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div> -->\r\n\r\n    </div>\r\n\r\n</div>\r\n\r\n", styles: [".app-individual-schedule-apply .inner-container .body{display:flex}.app-individual-schedule-apply .inner-container .body .right-part .shift-cell-and-date-range .shift-cell{width:262px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }] }); }
+class IndividualScheduleApplyComponent extends BaseComponent {
+    constructor(mls) {
+        super(mls);
+        this.mls = mls;
+        this.atWorksignService = inject(AtWorksignService);
+        this.layoutService = inject(LayoutService);
+        this.urlService = inject(UrlService);
+        this.router = inject(Router);
+        this.route = inject(ActivatedRoute);
+        this.dialogService = inject(DialogService);
+        this.appService = inject(AppService);
+        this.workShiftDndService = inject(WorkShiftDndService);
+        this.employeeSeekerSourceType = EnumCoreFormControlSeekerSourceType.EMPLOYEE_SEEK;
+        this.employeeObjectList$ = new BehaviorSubject([]);
+        this.selectedEmployees = [];
+        this.shiftCell = [];
+        this.fromPeriod = this.atWorksignService.atSalaryPeriod$.value?.startDate;
+        this.toPeriod = this.atWorksignService.atSalaryPeriod$.value?.endDate;
+        this.fromDate = this.atWorksignService.atSalaryPeriod$.value?.startDate || new Date();
+        this.toDate = this.atWorksignService.atSalaryPeriod$.value?.endDate || new Date();
+        this.buttons = [EnumCoreButtonVNSCode.NONE_HEADER_SAVE, EnumCoreButtonVNSCode.NONE_HEADER_CANCEL];
+        this.selectedEmployeeTableHeight = 400;
+        this.dateRangeLimit = {
+            minDate: this.fromPeriod || new Date(1900, 1, 1),
+            maxDate: this.toPeriod || new Date(1900, 1, 1)
+        };
+        this.listInstance = Number(this.route.snapshot.paramMap.get('listInstance'));
+        this.workShiftDndService.collectionStarterX$.next(0);
+    }
+    onButtonClick(e) {
+        switch (e.code) {
+            case EnumCoreButtonVNSCode.NONE_HEADER_CANCEL:
+                if (!!this.urlService.previousRouteUrl$.value.length) {
+                    this.router.navigateByUrl(this.urlService.previousRouteUrl$.value);
+                }
+                else {
+                    this.router.navigate(['../'], { relativeTo: this.route });
+                }
+                break;
+            case EnumCoreButtonVNSCode.NONE_HEADER_SAVE:
+                if (this.validateForm()) {
+                    console.log({
+                        periodId: this.atWorksignService.atSalaryPeriod$.value?.periodId || 0,
+                        shiftCell: this.shiftCell,
+                        fromDate: this.fromDate,
+                        toDate: this.toDate,
+                        selectedEmployees: this.selectedEmployees
+                    });
+                    const model = {
+                        periodId: this.atWorksignService.atSalaryPeriod$.value?.periodId || 0,
+                        shiftIds: this.shiftCell.map(x => x.id || 0),
+                        fromDate: new Date(new Date(this.fromDate).setHours(0, 0, 0, 0)),
+                        toDate: new Date(new Date(this.toDate).setHours(0, 0, 0, 0)),
+                        employeeIds: this.selectedEmployees
+                    };
+                    this.loading = true;
+                    this.subscriptions.push(this.appService.post("/api/AtWorksign/IndividualScheduleApply?computingWithLocalTimeZone=true", model).subscribe(x => {
+                        this.loading = false;
+                        if (x.ok && x.status === 200 && x.body?.statusCode === 200) {
+                            this.initialFormValueString = JSON.stringify({
+                                periodId: this.atWorksignService.atSalaryPeriod$.value?.periodId || 0,
+                                shiftCell: this.shiftCell,
+                                fromDate: this.fromDate,
+                                toDate: this.toDate,
+                                selectedEmployees: this.selectedEmployees
+                            });
+                            this.router.navigate(['../'], { relativeTo: this.route, state: { instanceNumber: this.listInstance } });
+                        }
+                    }));
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    validateForm() {
+        let result = true;
+        if (!this.shiftCell.length) {
+            this.shiftCellError = 'TIME_MANAGEMENT_ERROR_AT_LEAST_ONE_SHIFT_REQUIRED';
+            result = false;
+        }
+        if (this.fromDate === null) {
+            this.fromDateError = 'TIME_MANAGEMENT_ERROR_THE_FROM_DATE_IS_REQUIRED';
+        }
+        if (this.toDate === null) {
+            this.toDateError = 'TIME_MANAGEMENT_ERROR_THE_TO_DATE_IS_REQUIRED';
+        }
+        if (this.fromDate && this.toDate && this.fromDate > this.toDate) {
+            this.fromDateError = 'TIME_MANAGEMENT_ERROR_THE_FROM_DATE_MUST_LESS_THAN_OR_EQUAL_THE_TO_DATE';
+            result = false;
+        }
+        if (this.selectedEmployees.length === 0) {
+            this.selectedEmployeesError = 'TIME_MANAGEMENT_ERROR_NO_EMPLOYEE_SELECTED';
+            result = false;
+        }
+        return result;
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.selectedEmployeeTableHeight = window.innerHeight - this.layoutService.headerHeight$.value - this.layoutService.corePageHeaderHeight - 106 - 24 - 15 - 35 - 40 * 2 - 15 - 15;
+            this.initialFormValueString = JSON.stringify({
+                periodId: this.atWorksignService.atSalaryPeriod$.value?.periodId || 0,
+                shiftCell: [],
+                fromDate: this.fromDate,
+                toDate: this.toDate,
+                selectedEmployees: this.selectedEmployees
+            });
+            this.shiftCollectionHeight = window.innerHeight - this.layoutService.headerHeight$.value - this.layoutService.corePageHeaderHeight - 15;
+        });
+    }
+    onShiftCellChange(e) {
+        if (!!e.length) {
+            this.shiftCellError = "";
+        }
+        else {
+            this.shiftCellError = 'TIME_MANAGEMENT_ERROR_AT_LEAST_ONE_SHIFT_REQUIRED';
+        }
+    }
+    onFromDateChange(e) {
+        if (!!e) {
+            this.fromDateError = "";
+        }
+        else {
+            this.fromDateError = 'TIME_MANAGEMENT_ERROR_THE_FROM_DATE_IS_REQUIRED';
+        }
+    }
+    onToDateChange(e) {
+        if (!!e) {
+            this.toDateError = "";
+        }
+        else {
+            this.fromDateError = 'TIME_MANAGEMENT_ERROR_THE_TO_DATE_IS_REQUIRED';
+        }
+    }
+    onSelectedEmployeesChange(e) {
+        if (!!e.length) {
+            this.selectedEmployeesError = "";
+        }
+        else {
+            this.selectedEmployeesError = 'TIME_MANAGEMENT_ERROR_NO_EMPLOYEE_SELECTED';
+        }
+    }
+    canDeactivate() {
+        const condition = JSON.stringify({
+            periodId: this.atWorksignService.atSalaryPeriod$.value?.periodId || 0,
+            shiftCell: this.shiftCell,
+            fromDate: this.fromDate,
+            toDate: this.toDate,
+            selectedEmployees: this.selectedEmployees
+        }) === this.initialFormValueString;
+        if (condition) {
+            return true;
+        }
+        else {
+            this.dialogService.busy = true;
+            this.dialogService.showConfirmDialog$.next(true);
+            this.dialogService.title$.next(EnumTranslateKey.UI_CORE_CONFIRM_DIALOG_TITLE);
+            this.dialogService.body$.next(EnumTranslateKey.UI_CORE_CONFIRM_DIALOG_BODY_CHANGES_WILL_BE_LOST);
+            this.dialogService.okButtonText$.next(EnumTranslateKey.UI_CORE_CONFIRM_DIALOG_BUTTON_CONFIRM);
+            this.dialogService.cancelButtonText$.next(EnumTranslateKey.UI_CORE_CONFIRM_DIALOG_BUTTON_GO_BACK_TO_EDIT_FORM);
+            const observable = this.dialogService.canDeactivate$.asObservable();
+            return observable;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: IndividualScheduleApplyComponent, deps: [{ token: MultiLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: IndividualScheduleApplyComponent, isStandalone: true, selector: "app-individual-schedule-apply", usesInheritance: true, ngImport: i0, template: "<div class=\"modal-container\">\r\n\r\n    <div class=\"modal-content-root\">\r\n\r\n        <div class=\"app-individual-schedule-apply\">\r\n            <div class=\"inner-container\">\r\n                <core-page-header [title]=\"'UI_COMPONENT_TITLE_INDIVIDUAL_WORK_SCHEDULE_APPLY'\"\r\n                    [hideButtonGroup]=\"true\"></core-page-header>\r\n                <div class=\"body\">\r\n                    <div class=\"w320 d-inline-block shift-collection\">\r\n                        <core-shift-collection [relativeMode]=\"true\" [height]=\"shiftCollectionHeight\"></core-shift-collection>\r\n                    </div>\r\n                    <div class=\"d-inline-block right-part pl15\">\r\n                        <div class=\"shift-cell-and-date-range d-inline-flex\">\r\n                            <div class=\"d-inline-block shift-cell pt15\">\r\n                                <label>{{ 'UI_TIME_MANAGEMENT_SHIFT_CELL' | translate: lang }}</label>\r\n                                <core-shift-cell [(ngModel)]=\"shiftCell\" (ngModelChange)=\"onShiftCellChange($event)\" [$hideStarterPlusSign]=\"true\"></core-shift-cell>\r\n                                @if (shiftCellError && shiftCellError.length) {\r\n                                <p class=\"form-control-error p-absolute\">{{shiftCellError | translate: lang}}</p>\r\n                                }\r\n                            </div>\r\n                            <div class=\"p15\">\r\n                                <label>{{ 'FROM_DATE' | translate: lang }}</label>\r\n                                <div class=\"mt15\">\r\n                                    <core-date-picker [(ngModel)]=\"fromDate\" (ngModelChange)=\"onFromDateChange($event)\"></core-date-picker>\r\n                                </div>\r\n                                @if (fromDateError && fromDateError.length) {\r\n                                <p class=\"form-control-error p-absolute\">{{fromDateError | translate: lang}}</p>\r\n                                }\r\n                            </div>\r\n                            <div class=\"p15\">\r\n                                <label>{{ 'TO_DATE' | translate: lang }}</label>\r\n                                <div class=\"mt15\">\r\n                                    <core-date-picker [(ngModel)]=\"toDate\" (ngModelChange)=\"onToDateChange($event)\"></core-date-picker>\r\n                                </div>\r\n                                @if (toDateError && toDateError.length) {\r\n                                    <p class=\"form-control-error p-absolute\">{{toDateError | translate: lang}}</p>\r\n                                    }\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"selected-employees mt30 mb15\">\r\n                            <label>{{ 'SELECT_EMPLOYEES' | translate: lang }}</label>\r\n                            <core-form-control-seeker [paramMode]=\"true\" [seekerSourceType]=\"employeeSeekerSourceType\"\r\n                                [multiMode]=\"true\" [objectList$]=\"employeeObjectList$\"\r\n                                [excludeExistingList]=\"true\"\r\n                                [multiModeTableHeight]=\"selectedEmployeeTableHeight\" [(ngModel)]=\"selectedEmployees\" (ngModelChange)=\"onSelectedEmployeesChange($event)\">\r\n                            </core-form-control-seeker>\r\n                            @if (selectedEmployeesError && selectedEmployeesError.length) {\r\n                            <p class=\"form-control-error p-absolute\">{{selectedEmployeesError | translate: lang}}</p>\r\n                            }\r\n                        </div>\r\n                        <div class=\"buttons d-flex d-flex-end\">\r\n                            <core-button-group-vns [shownItems]=\"buttons\" [showCaption]=\"true\"\r\n                                (buttonClick)=\"onButtonClick($event)\"></core-button-group-vns>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n\r\n</div>\r\n\r\n", styles: [".app-individual-schedule-apply .inner-container .body{display:flex}.app-individual-schedule-apply .inner-container .body .right-part .shift-cell-and-date-range .shift-cell{width:262px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoreShiftCollectionComponent, selector: "core-shift-collection", inputs: ["height", "relativeMode"] }, { kind: "component", type: CoreShiftCellComponent, selector: "core-shift-cell", inputs: ["$readOnly", "$hideStarterPlusSign", "$hideStickersWhileDragover", "$backgroundColor"] }, { kind: "component", type: CoreDatePickerComponent, selector: "core-date-picker", inputs: ["enableTimeZoneConverter", "showPlaceholder", "popupWidth", "popupXPadding", "popupAlign", "rangeLimit", "readonly", "disabled"] }, { kind: "component", type: CoreFormControlSeekerComponent, selector: "core-form-control-seeker", inputs: ["title", "showPageHeader", "preDefinedOuterParam$", "preDefinedOuterFilter$", "click$", "getByIdObject$", "paramMode", "multiMode", "objectList$", "useTheseColumns", "hideOrgTree", "excludedColumns", "excludeExistingList", "sourceSpaceHeight", "indirectBinding", "bindGridIdTo", "multiModeExtendedColumns", "multiModeExtendedSections", "editBufferData$", "multiModeTableHeight", "multiModeRowHeight", "seekerSourceType", "boundFrom", "shownFrom", "alsoBindTo", "seekerVerifyIgnore"], outputs: ["onDoubleClick"] }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup"], outputs: ["buttonClick"] }, { kind: "component", type: CoreButtonGroupVnsComponent, selector: "core-button-group-vns", inputs: ["height", "instanceNumber", "forHeader", "fixedShow", "shownItems", "showCaption", "lastChildEffectOff"], outputs: ["buttonClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: IndividualScheduleApplyComponent /*extends BaseComponent implements AfterViewInit */, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: IndividualScheduleApplyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-individual-schedule-apply', imports: [
                         FormsModule,
@@ -22145,8 +22748,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                         CorePageHeaderComponent,
                         CoreButtonGroupVnsComponent,
                         TranslatePipe
-                    ], template: "<div class=\"modal-container\">\r\n\r\n    <div class=\"modal-content-root\">\r\n\r\n        <h2>DEPRECATED</h2>\r\n\r\n        <!-- <div class=\"app-individual-schedule-apply\">\r\n            <div class=\"inner-container\">\r\n                <core-page-header [title]=\"'UI_COMPONENT_TITLE_INDIVIDUAL_WORK_SCHEDULE_APPLY'\"\r\n                    [hideButtonGroup]=\"true\"></core-page-header>\r\n                <div class=\"body\">\r\n                    <div class=\"w320 d-inline-block shift-collection\">\r\n                        <core-shift-collection [relativeMode]=\"true\" [height]=\"shiftCollectionHeight\"></core-shift-collection>\r\n                    </div>\r\n                    <div class=\"d-inline-block right-part pl15\">\r\n                        <div class=\"shift-cell-and-date-range d-inline-flex\">\r\n                            <div class=\"d-inline-block shift-cell pt15\">\r\n                                <label>{{ 'UI_TIME_MANAGEMENT_SHIFT_CELL' | translate: lang }}</label>\r\n                                <core-shift-cell [(ngModel)]=\"shiftCell\" (ngModelChange)=\"onShiftCellChange($event)\" [$hideStarterPlusSign]=\"true\"></core-shift-cell>\r\n                                @if (shiftCellError && shiftCellError.length) {\r\n                                <p class=\"form-control-error p-absolute\">{{shiftCellError | translate: lang}}</p>\r\n                                }\r\n                            </div>\r\n                            <div class=\"p15\">\r\n                                <label>{{ 'FROM_DATE' | translate: lang }}</label>\r\n                                <div class=\"mt15\">\r\n                                    <core-date-picker [(ngModel)]=\"fromDate\" (ngModelChange)=\"onFromDateChange($event)\"></core-date-picker>\r\n                                </div>\r\n                                @if (fromDateError && fromDateError.length) {\r\n                                <p class=\"form-control-error p-absolute\">{{fromDateError | translate: lang}}</p>\r\n                                }\r\n                            </div>\r\n                            <div class=\"p15\">\r\n                                <label>{{ 'TO_DATE' | translate: lang }}</label>\r\n                                <div class=\"mt15\">\r\n                                    <core-date-picker [(ngModel)]=\"toDate\" (ngModelChange)=\"onToDateChange($event)\"></core-date-picker>\r\n                                </div>\r\n                                @if (toDateError && toDateError.length) {\r\n                                    <p class=\"form-control-error p-absolute\">{{toDateError | translate: lang}}</p>\r\n                                    }\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"selected-employees mt30 mb15\">\r\n                            <label>{{ 'SELECT_EMPLOYEES' | translate: lang }}</label>\r\n                            <core-form-control-seeker [paramMode]=\"true\" [seekerSourceType]=\"employeeSeekerSourceType\"\r\n                                [multiMode]=\"true\" [objectList$]=\"employeeObjectList$\"\r\n                                [excludeExistingList]=\"true\"\r\n                                [multiModeTableHeight]=\"selectedEmployeeTableHeight\" [(ngModel)]=\"selectedEmployees\" (ngModelChange)=\"onSelectedEmployeesChange($event)\">\r\n                            </core-form-control-seeker>\r\n                            @if (selectedEmployeesError && selectedEmployeesError.length) {\r\n                            <p class=\"form-control-error p-absolute\">{{selectedEmployeesError | translate: lang}}</p>\r\n                            }\r\n                        </div>\r\n                        <div class=\"buttons d-flex d-flex-end\">\r\n                            <core-button-group-vns [shownItems]=\"buttons\" [showCaption]=\"true\"\r\n                                (buttonClick)=\"onButtonClick($event)\"></core-button-group-vns>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div> -->\r\n\r\n    </div>\r\n\r\n</div>\r\n\r\n", styles: [".app-individual-schedule-apply .inner-container .body{display:flex}.app-individual-schedule-apply .inner-container .body .right-part .shift-cell-and-date-range .shift-cell{width:262px}\n"] }]
-        }] });
+                    ], template: "<div class=\"modal-container\">\r\n\r\n    <div class=\"modal-content-root\">\r\n\r\n        <div class=\"app-individual-schedule-apply\">\r\n            <div class=\"inner-container\">\r\n                <core-page-header [title]=\"'UI_COMPONENT_TITLE_INDIVIDUAL_WORK_SCHEDULE_APPLY'\"\r\n                    [hideButtonGroup]=\"true\"></core-page-header>\r\n                <div class=\"body\">\r\n                    <div class=\"w320 d-inline-block shift-collection\">\r\n                        <core-shift-collection [relativeMode]=\"true\" [height]=\"shiftCollectionHeight\"></core-shift-collection>\r\n                    </div>\r\n                    <div class=\"d-inline-block right-part pl15\">\r\n                        <div class=\"shift-cell-and-date-range d-inline-flex\">\r\n                            <div class=\"d-inline-block shift-cell pt15\">\r\n                                <label>{{ 'UI_TIME_MANAGEMENT_SHIFT_CELL' | translate: lang }}</label>\r\n                                <core-shift-cell [(ngModel)]=\"shiftCell\" (ngModelChange)=\"onShiftCellChange($event)\" [$hideStarterPlusSign]=\"true\"></core-shift-cell>\r\n                                @if (shiftCellError && shiftCellError.length) {\r\n                                <p class=\"form-control-error p-absolute\">{{shiftCellError | translate: lang}}</p>\r\n                                }\r\n                            </div>\r\n                            <div class=\"p15\">\r\n                                <label>{{ 'FROM_DATE' | translate: lang }}</label>\r\n                                <div class=\"mt15\">\r\n                                    <core-date-picker [(ngModel)]=\"fromDate\" (ngModelChange)=\"onFromDateChange($event)\"></core-date-picker>\r\n                                </div>\r\n                                @if (fromDateError && fromDateError.length) {\r\n                                <p class=\"form-control-error p-absolute\">{{fromDateError | translate: lang}}</p>\r\n                                }\r\n                            </div>\r\n                            <div class=\"p15\">\r\n                                <label>{{ 'TO_DATE' | translate: lang }}</label>\r\n                                <div class=\"mt15\">\r\n                                    <core-date-picker [(ngModel)]=\"toDate\" (ngModelChange)=\"onToDateChange($event)\"></core-date-picker>\r\n                                </div>\r\n                                @if (toDateError && toDateError.length) {\r\n                                    <p class=\"form-control-error p-absolute\">{{toDateError | translate: lang}}</p>\r\n                                    }\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"selected-employees mt30 mb15\">\r\n                            <label>{{ 'SELECT_EMPLOYEES' | translate: lang }}</label>\r\n                            <core-form-control-seeker [paramMode]=\"true\" [seekerSourceType]=\"employeeSeekerSourceType\"\r\n                                [multiMode]=\"true\" [objectList$]=\"employeeObjectList$\"\r\n                                [excludeExistingList]=\"true\"\r\n                                [multiModeTableHeight]=\"selectedEmployeeTableHeight\" [(ngModel)]=\"selectedEmployees\" (ngModelChange)=\"onSelectedEmployeesChange($event)\">\r\n                            </core-form-control-seeker>\r\n                            @if (selectedEmployeesError && selectedEmployeesError.length) {\r\n                            <p class=\"form-control-error p-absolute\">{{selectedEmployeesError | translate: lang}}</p>\r\n                            }\r\n                        </div>\r\n                        <div class=\"buttons d-flex d-flex-end\">\r\n                            <core-button-group-vns [shownItems]=\"buttons\" [showCaption]=\"true\"\r\n                                (buttonClick)=\"onButtonClick($event)\"></core-button-group-vns>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n\r\n</div>\r\n\r\n", styles: [".app-individual-schedule-apply .inner-container .body{display:flex}.app-individual-schedule-apply .inner-container .body .right-part .shift-cell-and-date-range .shift-cell{width:262px}\n"] }]
+        }], ctorParameters: () => [{ type: MultiLanguageService }] });
 
 class FunctionEditService {
     constructor(appService) {
@@ -33565,5 +34168,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionService, ActionSvgEditComponent, AlertComponent, AlertService, AnimatedTextComponent, AnimatedTextService, AppConfigService, AppInitializationService, AppService, ApplicationHelpService, AtShiftPatternComponent, AtShiftPatternEditComponent, AtWorksignComponent, AtWorksignService, AuthService, BaseComponent, BaseDropdownComponent, BaseEditComponent, ButtonGroupComponent, ButtonGroupModule, ButtonGroupService, CORE_VNS_BUTTONS, CacheService, CanActivateFunctionUrlMapperGuard, CanDeactivateGuard, CheckForUpdateService, ClientService, CommonHttpRequestService, ConfigService, ConfirmDialogStateComponent, ControlBase, CoreAccordionComponent, CoreAccordionService, CoreActiveUserCountComponent, CoreApiProgressComponent, CoreAttachmentComponent, CoreButtonComponent, CoreButtonGroupComponent, CoreButtonGroupService, CoreButtonGroupVnsComponent, CoreButtonVnsComponent, CoreCheckboxComponent, CoreChecklistComponent, CoreCommonParamKitComponent, CoreCompareDbPipelineComponent, CoreCompositionComponent, CoreCompositionService, CoreCompositionState, CoreConfirmDialogComponent, CoreContractSeekerComponent, CoreControlComponent, CoreControlNoGridBufferComponent, CoreControlNoSeekerComponent, CoreControlService, CoreCurrencyInputComponent, CoreD3Service, CoreDatePickerComponent, CoreDatetimeService, CoreDropdownComponent, CoreEmployeeScheduleComponent, CoreEmployeeSeekerComponent, CoreFileFormatPickerComponent, CoreFileUploaderComponent, CoreFilterHubComponent, CoreFilterHubService, CoreFormComponent, CoreFormControlBaseComponent, CoreFormControlSeekerComponent, CoreFormLiteComponent, CoreFormService, CoreFormTabComponent, CoreGridBufferComponent, CoreHeaderParamsComponent, CoreHelperComponent, CoreIosSwitcherComponent, CoreLineComponent, CoreListComponent, CoreListLazyComponent, CoreLoadingSurfaceComponent, CoreMccComponent, CoreMonthPickerComponent, CoreMonthSelectorComponent, CoreNavigationTrackerComponent, CoreOauthCallbackComponent, CoreOauthCallbackOffice365Component, CoreOrgParamComponent, CoreOrgTreeComponent, CoreOrgTreeService, CoreOrgTreeState, CoreOrgUnitSeekerComponent, CoreOrgchartflexComponent, CorePageEditComponent, CorePageEditLiteComponent, CorePageEditService, CorePageEditTabComponent, CorePageHeaderComponent, CorePageListComponent, CorePageListContentComponent, CorePageListService, CorePageListState, CorePageViewComponent, CorePaginationComponent, CorePaginationFullComponent, CorePaginationFullService, CoreParamControlComponent, CorePermissionActionsComponent, CorePermissionComponent, CorePermissionService, CorePieComponent, CorePositionConcurrentSeekerComponent, CorePositionSeekerComponent, CoreQrcodeComponent, CoreQueryBuilderComponent, CoreRadioGroupComponent, CoreReducerIconComponent, CoreRootMenuItemPickerComponent, CoreRootMenuItemPickerService, CoreRotatingTextComponent, CoreRouteAccumulatorComponent, CoreRoutingHistoryComponent, CoreSalaryPolicyPickerComponent, CoreScatterPlotComponent, CoreScrollComponent, CoreScrollLazyComponent, CoreSeenByComponent, CoreShiftCardComponent, CoreShiftCellComponent, CoreShiftCollectionComponent, CoreShiftStickerComponent, CoreStatisticWidgetComponent, CoreStatusStickerComponent, CoreSubFormGroupComponent, CoreTabListComponent, CoreTableComponent, CoreTableService, CoreTabsComponent, CoreTagsComponent, CoreTopicPickerComponent, CoreTopicTreeComponent, CoreTreeComponent, CoreTreeGridComponent, CoreWageSeekerComponent, CoreWorkingSeekerComponent, CoreYearPickerComponent, CoreYearSelectorComponent, CustomValidators, DATE_VALUE_ACCESSOR, DEFAULT_SVG, DESKTOP_SCREEN_HEDER_HEIGHT, DateValueAccessor, DecisionComponent, DialogService, DialogStateComponent, DndService, DomService, ECoreTableToolClass, ECoreTableToolCode, EnumAlertType, EnumBrowserType, EnumButtonCaptionCode, EnumCoreArticleCategoryTreeaAccessorMode, EnumCoreButtonCode, EnumCoreButtonVNSCode, EnumCoreD3ScaleType, EnumCoreFileUploaderType, EnumCoreFormControlSeekerSourceType, EnumCoreOrgTreeaAccessorMode, EnumCoreOrgTreeaSearchMode, EnumCorePageEditBootstrapClass, EnumCorePageEditFieldType, EnumCorePageEditMode, EnumCoreSeekerColumnContract, EnumCoreSeekerColumnJob, EnumCoreSeekerColumnPosition, EnumCoreSeekerColumnPositionConcurrent, EnumCoreSeekerColumnStaffProfile, EnumCoreSeekerColumnWage, EnumCoreSeekerColumnWorking, EnumCoreTablePipeType, EnumCoreTreeGridEditMode, EnumCoreViewItemType, EnumDeviceType, EnumDragType, EnumErrorType, EnumExType, EnumFilterOperator, EnumFormBaseContolType, EnumHrComparisonCode, EnumICoreStatisticWidgetDataType, EnumIconClass, EnumImageResolverType, EnumNotificationDir, EnumOparator, EnumOsType, EnumPermissionObjectType, EnumProfileInfoSector, EnumRecursiveFields, EnumSignalRType, EnumSortDirection, EnumSsrsExpressExportFormat, EnumSsrsExpressFileExtension, EnumStyleButtonClass, EnumSwUpdateVersionUpdatesEventType, EnumWorkScheduleViewMode, EvaluateDialogComponent, EvaluateDialogService, FileService, FilterKitService, FilterPipe, FooterComponent, FullscreenModalLoaderComponent, FunctionComponent, FunctionEditComponent, FunctionEditService, FunctionIgnoreComponent, FunctionIgnoreEditComponent, GroupFunctionComponent, GroupFunctionEditComponent, GrpcService, HeaderService, HistoryService, HotKeysDirective, HttpErrorHandler, HubConnectionService, HuconcurrentlyComponent, IAlertOptions, ImageErrorResolverDirective, InMemoryComponent, IndividualScheduleApplyComponent, InitializationCanActivateFn, InitializationCanMatchFn, InterceptorSkipHeader, IpServiceService, ItemComponent, JobComponent, JsonService, LanguageChangerComponent, LanguageComponent, LanguageEditComponent, LayoutService, LongTaskService, MOBILE_SCREEN_HEDER_HEIGHT, MapAppdemoToServerPipePipe, MapAttachmentToServerPipe, MapAvatarToServerPipe, MapNewsfeedMediaToServerPipe, MapService, MenuComponent, MenuEditComponent, MenuService, MessageService, ModalService, MultiLanguageService, MutationLogComponent, MutationViewComponent, NavigatorComponent, NavigatorService, NewlyCreatedTokenService, NormalizeHumanNamePipe, NotificationActionType, OnlineUsersComponent, OrganizationService, OtpInputComponent, OtpInputService, PaSalaryPolicyComponent, PaSalaryPolicyEditComponent, PageTitleComponent, PaginationComponent, PkceService, PortalRouteComponent, PortalRouteEditComponent, PositionComponent, PositionEditService, PositionTransferService, PushNotificationService, RandomAvatarService, RecursiveService, RequestCache, RequestCacheWithMap, ResponseService, RightchatComponent, RoutingService, STICKER_COLOR_SCHEMA, ScheduleOverviewComponent, SeekerService, SocketService, SsrsExpressService, StaffProfileComponent, StatisticAuthService, StatisticService, StringHtmlPipe, StringService, SunnyRotatingComponent, SysActionComponent, SysActionEditComponent, SysFunctionActionComponent, SysFunctionActionEditComponent, SysFunctionActionMapperComponent, SysFunctionUrlMapperComponent, SysMenuService, SysModuleComponent, SysModuleEditComponent, SysRouteAccessComponent, TLA_CONFIG, TableCellPipe, Textbox, ThreedotsComponent, TimeSheetService, TooltipComponent, TooltipDirective, TopicPermissionService, TopicTreeService, TranslatePipe, UnicodeService, UploadedFileService, UploadedFilenameCutoffPipe, UrlService, UserActivityComponent, UserActivityService, WageComponent, WaittingScreenComponent, WorkShiftDndService, alertOptions, appTypeInterceptor, attachmentOptions, authInterceptor, baseUrlInterceptor, blob_to_base64_script, cachingInterceptor, defaultPaging, graphInterceptor, httpInterceptorProviders, langInterceptor, liner_to_nested_array_script, longAlertOptions, noneAutoClosedAlertOptions, normalizeHumanName, responseInterceptor, themeBlue, timeZoneInterceptor, tokenInterceptor };
+export { ActionService, ActionSvgEditComponent, AlertComponent, AlertService, AnimatedTextComponent, AnimatedTextService, AppConfigService, AppInitializationService, AppService, ApplicationHelpService, AtShiftPatternApplyComponent, AtShiftPatternComponent, AtShiftPatternEditComponent, AtWorksignComponent, AtWorksignService, AuthService, BaseComponent, BaseDropdownComponent, BaseEditComponent, ButtonGroupComponent, ButtonGroupModule, ButtonGroupService, CORE_VNS_BUTTONS, CacheService, CanActivateFunctionUrlMapperGuard, CanDeactivateGuard, CheckForUpdateService, ClientService, CommonHttpRequestService, ConfigService, ConfirmDialogStateComponent, ControlBase, CoreAccordionComponent, CoreAccordionService, CoreActiveUserCountComponent, CoreApiProgressComponent, CoreAttachmentComponent, CoreButtonComponent, CoreButtonGroupComponent, CoreButtonGroupService, CoreButtonGroupVnsComponent, CoreButtonVnsComponent, CoreCheckboxComponent, CoreChecklistComponent, CoreCommonParamKitComponent, CoreCompareDbPipelineComponent, CoreCompositionComponent, CoreCompositionService, CoreCompositionState, CoreConfirmDialogComponent, CoreContractSeekerComponent, CoreControlComponent, CoreControlNoGridBufferComponent, CoreControlNoSeekerComponent, CoreControlService, CoreCurrencyInputComponent, CoreD3Service, CoreDatePickerComponent, CoreDatetimeService, CoreDropdownComponent, CoreEmployeeScheduleComponent, CoreEmployeeSeekerComponent, CoreFileFormatPickerComponent, CoreFileUploaderComponent, CoreFilterHubComponent, CoreFilterHubService, CoreFormComponent, CoreFormControlBaseComponent, CoreFormControlSeekerComponent, CoreFormLiteComponent, CoreFormService, CoreFormTabComponent, CoreGridBufferComponent, CoreHeaderParamsComponent, CoreHelperComponent, CoreIosSwitcherComponent, CoreLineComponent, CoreListComponent, CoreListLazyComponent, CoreLoadingSurfaceComponent, CoreMccComponent, CoreMonthPickerComponent, CoreMonthSelectorComponent, CoreNavigationTrackerComponent, CoreOauthCallbackComponent, CoreOauthCallbackOffice365Component, CoreOrgParamComponent, CoreOrgTreeComponent, CoreOrgTreeService, CoreOrgTreeState, CoreOrgUnitSeekerComponent, CoreOrgchartflexComponent, CorePageEditComponent, CorePageEditLiteComponent, CorePageEditService, CorePageEditTabComponent, CorePageHeaderComponent, CorePageListComponent, CorePageListContentComponent, CorePageListService, CorePageListState, CorePageViewComponent, CorePaginationComponent, CorePaginationFullComponent, CorePaginationFullService, CoreParamControlComponent, CorePermissionActionsComponent, CorePermissionComponent, CorePermissionService, CorePieComponent, CorePositionConcurrentSeekerComponent, CorePositionSeekerComponent, CoreQrcodeComponent, CoreQueryBuilderComponent, CoreRadioGroupComponent, CoreReducerIconComponent, CoreRootMenuItemPickerComponent, CoreRootMenuItemPickerService, CoreRotatingTextComponent, CoreRouteAccumulatorComponent, CoreRoutingHistoryComponent, CoreSalaryPolicyPickerComponent, CoreScatterPlotComponent, CoreScrollComponent, CoreScrollLazyComponent, CoreSeenByComponent, CoreShiftCardComponent, CoreShiftCellComponent, CoreShiftCollectionComponent, CoreShiftStickerComponent, CoreStatisticWidgetComponent, CoreStatusStickerComponent, CoreSubFormGroupComponent, CoreTabListComponent, CoreTableComponent, CoreTableService, CoreTabsComponent, CoreTagsComponent, CoreTopicPickerComponent, CoreTopicTreeComponent, CoreTreeComponent, CoreTreeGridComponent, CoreWageSeekerComponent, CoreWorkingSeekerComponent, CoreYearPickerComponent, CoreYearSelectorComponent, CustomValidators, DATE_VALUE_ACCESSOR, DEFAULT_SVG, DESKTOP_SCREEN_HEDER_HEIGHT, DateValueAccessor, DecisionComponent, DialogService, DialogStateComponent, DndService, DomService, ECoreTableToolClass, ECoreTableToolCode, EnumAlertType, EnumBrowserType, EnumButtonCaptionCode, EnumCoreArticleCategoryTreeaAccessorMode, EnumCoreButtonCode, EnumCoreButtonVNSCode, EnumCoreD3ScaleType, EnumCoreFileUploaderType, EnumCoreFormControlSeekerSourceType, EnumCoreOrgTreeaAccessorMode, EnumCoreOrgTreeaSearchMode, EnumCorePageEditBootstrapClass, EnumCorePageEditFieldType, EnumCorePageEditMode, EnumCoreSeekerColumnContract, EnumCoreSeekerColumnJob, EnumCoreSeekerColumnPosition, EnumCoreSeekerColumnPositionConcurrent, EnumCoreSeekerColumnStaffProfile, EnumCoreSeekerColumnWage, EnumCoreSeekerColumnWorking, EnumCoreTablePipeType, EnumCoreTreeGridEditMode, EnumCoreViewItemType, EnumDeviceType, EnumDragType, EnumErrorType, EnumExType, EnumFilterOperator, EnumFormBaseContolType, EnumHrComparisonCode, EnumICoreStatisticWidgetDataType, EnumIconClass, EnumImageResolverType, EnumNotificationDir, EnumOparator, EnumOsType, EnumPermissionObjectType, EnumProfileInfoSector, EnumRecursiveFields, EnumSignalRType, EnumSortDirection, EnumSsrsExpressExportFormat, EnumSsrsExpressFileExtension, EnumStyleButtonClass, EnumSwUpdateVersionUpdatesEventType, EnumWorkScheduleViewMode, EvaluateDialogComponent, EvaluateDialogService, FileService, FilterKitService, FilterPipe, FooterComponent, FullscreenModalLoaderComponent, FunctionComponent, FunctionEditComponent, FunctionEditService, FunctionIgnoreComponent, FunctionIgnoreEditComponent, GroupFunctionComponent, GroupFunctionEditComponent, GrpcService, HeaderService, HistoryService, HotKeysDirective, HttpErrorHandler, HubConnectionService, HuconcurrentlyComponent, IAlertOptions, ImageErrorResolverDirective, InMemoryComponent, IndividualScheduleApplyComponent, InitializationCanActivateFn, InitializationCanMatchFn, InterceptorSkipHeader, IpServiceService, ItemComponent, JobComponent, JsonService, LanguageChangerComponent, LanguageComponent, LanguageEditComponent, LayoutService, LongTaskService, MOBILE_SCREEN_HEDER_HEIGHT, MapAppdemoToServerPipePipe, MapAttachmentToServerPipe, MapAvatarToServerPipe, MapNewsfeedMediaToServerPipe, MapService, MenuComponent, MenuEditComponent, MenuService, MessageService, ModalService, MultiLanguageService, MutationLogComponent, MutationViewComponent, NavigatorComponent, NavigatorService, NewlyCreatedTokenService, NormalizeHumanNamePipe, NotificationActionType, OnlineUsersComponent, OrganizationService, OtpInputComponent, OtpInputService, PaSalaryPolicyComponent, PaSalaryPolicyEditComponent, PageTitleComponent, PaginationComponent, PkceService, PortalRouteComponent, PortalRouteEditComponent, PositionComponent, PositionEditService, PositionTransferService, PushNotificationService, RandomAvatarService, RecursiveService, RequestCache, RequestCacheWithMap, ResponseService, RightchatComponent, RoutingService, STICKER_COLOR_SCHEMA, ScheduleOverviewComponent, SeekerService, SocketService, SsrsExpressService, StaffProfileComponent, StatisticAuthService, StatisticService, StringHtmlPipe, StringService, SunnyRotatingComponent, SysActionComponent, SysActionEditComponent, SysFunctionActionComponent, SysFunctionActionEditComponent, SysFunctionActionMapperComponent, SysFunctionUrlMapperComponent, SysMenuService, SysModuleComponent, SysModuleEditComponent, SysRouteAccessComponent, TLA_CONFIG, TableCellPipe, Textbox, ThreedotsComponent, TimeSheetService, TooltipComponent, TooltipDirective, TopicPermissionService, TopicTreeService, TranslatePipe, UnicodeService, UploadedFileService, UploadedFilenameCutoffPipe, UrlService, UserActivityComponent, UserActivityService, WageComponent, WaittingScreenComponent, WorkShiftDndService, alertOptions, appTypeInterceptor, attachmentOptions, authInterceptor, baseUrlInterceptor, blob_to_base64_script, cachingInterceptor, defaultPaging, graphInterceptor, httpInterceptorProviders, langInterceptor, liner_to_nested_array_script, longAlertOptions, noneAutoClosedAlertOptions, normalizeHumanName, responseInterceptor, themeBlue, timeZoneInterceptor, tokenInterceptor };
 //# sourceMappingURL=ngx-histaff-alpha.mjs.map