ngx-histaff-alpha 3.3.2 → 3.3.4

package/fesm2022/ngx-histaff-alpha.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Pipe, ViewChild, forwardRef, Directive, HostListener, Inject, inject, isDevMode, InjectionToken, EventEmitter, Input, Output, ViewEncapsulation, NgModule, input, computed, ChangeDetectionStrategy, viewChild, signal } from '@angular/core';
+import { Injectable, Component, Pipe, ViewChild, forwardRef, Directive, HostListener, Inject, inject, isDevMode, InjectionToken, EventEmitter, Input, Output, ViewEncapsulation, NgModule, input, computed, ChangeDetectionStrategy, viewChild, ChangeDetectorRef, signal } from '@angular/core';
 import * as i1 from '@angular/platform-browser';
 import { BehaviorSubject, Subject, filter, of, Observable, zip, catchError, tap as tap$1, throwError, take, switchMap, finalize as finalize$1, map as map$1, interval, concat, debounceTime, fromEvent, distinctUntilChanged, takeUntil } from 'rxjs';
 import { api, EnumTranslateKey } from 'alpha-global-constants';
@@ -4892,6 +4892,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class WorkShiftDndService {
+    constructor() {
+        this.draggingData$ = new BehaviorSubject('');
+        this.draggingShift$ = new BehaviorSubject(undefined);
+        this.draggingFromCellId$ = new BehaviorSubject('');
+        this.dragoverCellId$ = new BehaviorSubject('');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: WorkShiftDndService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: WorkShiftDndService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: WorkShiftDndService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 class CoreFormControlBaseComponent {
     constructor() {
         this.onChange = (_) => { };
@@ -8127,7 +8144,7 @@ class CoreOrgParamComponent extends CoreFormControlBaseComponent {
         this.onChange([]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoreOrgParamComponent, deps: [{ token: SeekerService }, { token: LayoutService }, { token: OrganizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.3", type: CoreOrgParamComponent, isStandalone: true, selector: "core-org-param", providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.3", type: CoreOrgParamComponent, isStandalone: true, selector: "core-org-param", inputs: { accessorMode: "accessorMode" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -8151,7 +8168,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                             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"] }]
-        }], ctorParameters: () => [{ type: SeekerService }, { type: LayoutService }, { type: OrganizationService }] });
+        }], ctorParameters: () => [{ type: SeekerService }, { type: LayoutService }, { type: OrganizationService }], propDecorators: { accessorMode: [{
+                type: Input
+            }] } });
 
 class CoreParamControlComponent extends BaseComponent {
     constructor(mls, alertService) {
@@ -8167,7 +8186,7 @@ class CoreParamControlComponent extends BaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoreParamControlComponent, deps: [{ token: MultiLanguageService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: CoreParamControlComponent, isStandalone: true, selector: "core-param-control", inputs: { control: "control", enableTimeZoneConverterForDateTimePeriodParameters: "enableTimeZoneConverterForDateTimePeriodParameters" }, usesInheritance: true, ngImport: i0, template: "<div class=\"core-param-control-container\">\r\n\r\n    <!-- START: LABEL SESSION-->\r\n    <label [class]=\"'control-label'\" *ngIf=\"control.controlType==='CHECKBOX'\">\r\n    </label>\r\n    <!-- ('UI.COMMON_FILTER' | translate: lang) + -->\r\n    <label *ngIf=\"control.name==='dateFrom'\">\r\n        {{\r\n\r\n        (control.label | translate: lang) +\r\n        ('UI.COMMON_FROM' | translate: lang)\r\n        }}\r\n    </label>\r\n\r\n    <label *ngIf=\"control.name==='dateTo'\">\r\n        {{\r\n        'UI.COMMON_TO' | translate: lang\r\n        }}\r\n    </label>\r\n    <label *ngIf=\"control.controlType=='DATEPICKER' && control.name!=='dateFrom' && control.name!=='dateTo'\">\r\n        {{ control.label | translate: lang }}\r\n    </label>\r\n\r\n    <label *ngIf=\"control.controlType!=='CHECKBOX' && control.controlType!=='DATEPICKER'\">\r\n        {{ control.label | translate: lang }}\r\n    </label>\r\n    <!-- START: LABEL SESSION-->\r\n\r\n    <!-- START: FORM-CONTROL SESSION-->\r\n    <ng-container *ngIf=\"control.controlType==='SEEKER' && control.seekerSourceType==='ORGANIZATION_UNIT_SEEK'\">\r\n        <core-org-param [(ngModel)]=\"control.ngModel\" (ngModelChange)=\"control.ngModelChange(control.name, $event)\"></core-org-param>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"control.controlType==='TEXTBOX'\">\r\n        <input *ngIf=\"control.type==='date'\" [(ngModel)]=\"control.ngModel\"\r\n            (ngModelChange)=\"control.ngModelChange(control.name, $event)\" [type]=\"control.type\"\r\n            [disabled]=\"!!control.disabled!\" class=\"form-control\" useValueAsDate>\r\n        <input *ngIf=\"control.type==='number'\" [(ngModel)]=\"control.ngModel\"\r\n            (ngModelChange)=\"control.ngModelChange(control.name, $event)\" [type]=\"control.type\"\r\n            [disabled]=\"!!control.disabled!\" class=\"form-control\" [step]=\"control.step || '1'\">\r\n        <input *ngIf=\"control.type!=='date' && control.type!=='number'\" [(ngModel)]=\"control.ngModel\"\r\n            (ngModelChange)=\"control.ngModelChange(control.name, $event)\" [type]=\"control.type\"\r\n            [disabled]=\"!!control.disabled!\" class=\"form-control\">\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"control.controlType==='CHECKBOX'\">\r\n        <core-checkbox [(ngModel)]=\"control.ngModel\" (ngModelChange)=\"control.ngModelChange(control.name, $event)\"\r\n            [text]=\"control.label\" [inputValue]=\"control.value\" [disabled]=\"!!control.disabled!\"></core-checkbox>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"control.controlType==='DATEPICKER'\">\r\n        <core-date-picker [(ngModel)]=\"control.ngModel\" [rangeLimit]=\"control.rangeLimit!\"\r\n            [enableTimeZoneConverter]=\"enableTimeZoneConverterForDateTimePeriodParameters\"\r\n            (ngModelChange)=\"control.ngModelChange(control.name, $event)\"\r\n            [disabled]=\"!!control.disabled!\"></core-date-picker>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"control.controlType==='DROPDOWN' && !!control.dropdownOptions$\">\r\n        <core-dropdown [(ngModel)]=\"control.ngModel\" [disabled]=\"!!control.disabled!\"\r\n            (ngModelChange)=\"control.ngModelChange(control.name, $event)\" [paramMode]=\"true\"\r\n            [options$]=\"control.dropdownOptions$!\"></core-dropdown>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"control.controlType==='CHECKLIST' && !!control.checklistOptions$\">\r\n        <core-checklist [(ngModel)]=\"control.ngModel\" [disabled]=\"!!control.disabled!\"\r\n            (ngModelChange)=\"control.ngModelChange(control.name, $event)\" [paramMode]=\"true\"\r\n            [options$]=\"control.checklistOptions$!\"></core-checklist>\r\n    </ng-container>\r\n\r\n    <!-- END: FORM-CONTROL SESSION-->\r\n\r\n</div>", styles: [".core-param-control-container{padding-left:0;font-size:13px}.core-param-control-container label{color:#848484}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: CoreDropdownComponent, selector: "core-dropdown", inputs: ["getByIdObject$", "paramMode", "shownFrom", "options$", "height", "placeholder", "loading", "warningDisable", "itemHeight"] }, { kind: "component", type: CoreChecklistComponent, selector: "core-checklist", inputs: ["paramMode", "getByIdObject$", "shownFrom", "options$", "height", "placeholder", "loading", "readonly", "disabled"] }, { kind: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["text", "tooltipPosition", "tooltip", "inputValue", "disabled"], outputs: ["onClick"] }, { kind: "component", type: CoreDatePickerComponent, selector: "core-date-picker", inputs: ["enableTimeZoneConverter", "showPlaceholder", "popupWidth", "popupXPadding", "rangeLimit", "readonly", "disabled"] }, { kind: "component", type: CoreOrgParamComponent, selector: "core-org-param" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: CoreParamControlComponent, isStandalone: true, selector: "core-param-control", inputs: { control: "control", enableTimeZoneConverterForDateTimePeriodParameters: "enableTimeZoneConverterForDateTimePeriodParameters" }, usesInheritance: true, ngImport: i0, template: "<div class=\"core-param-control-container\">\r\n\r\n    <!-- START: LABEL SESSION-->\r\n    <label [class]=\"'control-label'\" *ngIf=\"control.controlType==='CHECKBOX'\">\r\n    </label>\r\n    <!-- ('UI.COMMON_FILTER' | translate: lang) + -->\r\n    <label *ngIf=\"control.name==='dateFrom'\">\r\n        {{\r\n\r\n        (control.label | translate: lang) +\r\n        ('UI.COMMON_FROM' | translate: lang)\r\n        }}\r\n    </label>\r\n\r\n    <label *ngIf=\"control.name==='dateTo'\">\r\n        {{\r\n        'UI.COMMON_TO' | translate: lang\r\n        }}\r\n    </label>\r\n    <label *ngIf=\"control.controlType=='DATEPICKER' && control.name!=='dateFrom' && control.name!=='dateTo'\">\r\n        {{ control.label | translate: lang }}\r\n    </label>\r\n\r\n    <label *ngIf=\"control.controlType!=='CHECKBOX' && control.controlType!=='DATEPICKER'\">\r\n        {{ control.label | translate: lang }}\r\n    </label>\r\n    <!-- START: LABEL SESSION-->\r\n\r\n    <!-- START: FORM-CONTROL SESSION-->\r\n    <ng-container *ngIf=\"control.controlType==='SEEKER' && control.seekerSourceType==='ORGANIZATION_UNIT_SEEK'\">\r\n        <core-org-param [(ngModel)]=\"control.ngModel\" (ngModelChange)=\"control.ngModelChange(control.name, $event)\"></core-org-param>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"control.controlType==='TEXTBOX'\">\r\n        <input *ngIf=\"control.type==='date'\" [(ngModel)]=\"control.ngModel\"\r\n            (ngModelChange)=\"control.ngModelChange(control.name, $event)\" [type]=\"control.type\"\r\n            [disabled]=\"!!control.disabled!\" class=\"form-control\" useValueAsDate>\r\n        <input *ngIf=\"control.type==='number'\" [(ngModel)]=\"control.ngModel\"\r\n            (ngModelChange)=\"control.ngModelChange(control.name, $event)\" [type]=\"control.type\"\r\n            [disabled]=\"!!control.disabled!\" class=\"form-control\" [step]=\"control.step || '1'\">\r\n        <input *ngIf=\"control.type!=='date' && control.type!=='number'\" [(ngModel)]=\"control.ngModel\"\r\n            (ngModelChange)=\"control.ngModelChange(control.name, $event)\" [type]=\"control.type\"\r\n            [disabled]=\"!!control.disabled!\" class=\"form-control\">\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"control.controlType==='CHECKBOX'\">\r\n        <core-checkbox [(ngModel)]=\"control.ngModel\" (ngModelChange)=\"control.ngModelChange(control.name, $event)\"\r\n            [text]=\"control.label\" [inputValue]=\"control.value\" [disabled]=\"!!control.disabled!\"></core-checkbox>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"control.controlType==='DATEPICKER'\">\r\n        <core-date-picker [(ngModel)]=\"control.ngModel\" [rangeLimit]=\"control.rangeLimit!\"\r\n            [enableTimeZoneConverter]=\"enableTimeZoneConverterForDateTimePeriodParameters\"\r\n            (ngModelChange)=\"control.ngModelChange(control.name, $event)\"\r\n            [disabled]=\"!!control.disabled!\"></core-date-picker>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"control.controlType==='DROPDOWN' && !!control.dropdownOptions$\">\r\n        <core-dropdown [(ngModel)]=\"control.ngModel\" [disabled]=\"!!control.disabled!\"\r\n            (ngModelChange)=\"control.ngModelChange(control.name, $event)\" [paramMode]=\"true\"\r\n            [options$]=\"control.dropdownOptions$!\"></core-dropdown>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"control.controlType==='CHECKLIST' && !!control.checklistOptions$\">\r\n        <core-checklist [(ngModel)]=\"control.ngModel\" [disabled]=\"!!control.disabled!\"\r\n            (ngModelChange)=\"control.ngModelChange(control.name, $event)\" [paramMode]=\"true\"\r\n            [options$]=\"control.checklistOptions$!\"></core-checklist>\r\n    </ng-container>\r\n\r\n    <!-- END: FORM-CONTROL SESSION-->\r\n\r\n</div>", styles: [".core-param-control-container{padding-left:0;font-size:13px}.core-param-control-container label{color:#848484}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: CoreDropdownComponent, selector: "core-dropdown", inputs: ["getByIdObject$", "paramMode", "shownFrom", "options$", "height", "placeholder", "loading", "warningDisable", "itemHeight"] }, { kind: "component", type: CoreChecklistComponent, selector: "core-checklist", inputs: ["paramMode", "getByIdObject$", "shownFrom", "options$", "height", "placeholder", "loading", "readonly", "disabled"] }, { kind: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["text", "tooltipPosition", "tooltip", "inputValue", "disabled"], outputs: ["onClick"] }, { kind: "component", type: CoreDatePickerComponent, selector: "core-date-picker", inputs: ["enableTimeZoneConverter", "showPlaceholder", "popupWidth", "popupXPadding", "rangeLimit", "readonly", "disabled"] }, { kind: "component", type: CoreOrgParamComponent, selector: "core-org-param", inputs: ["accessorMode"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoreParamControlComponent, decorators: [{
             type: Component,
@@ -17959,6 +17978,7 @@ class LanguageComponent {
             {
                 caption: EnumTranslateKey.UI_ENTITY_FIELD_CAPTION_LANGUAGE_KEY,
                 field: 'key',
+                showForConfirmation: true,
                 type: 'string',
                 align: 'left',
                 width: 400,
@@ -23804,41 +23824,224 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
         }] });
 
 class CoreShiftStickerComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.$container = viewChild('container');
+        this.$shiftDetails = viewChild('shiftDetails');
+        this.$check = viewChild('check');
+        this.$plus = viewChild('plus');
+        this.$shift = input.required();
+        this.$shiftCellId = input.required();
+        this.cdr = inject(ChangeDetectorRef);
+        this.workShiftDndService = inject(WorkShiftDndService);
+        this.$height = input(36.59);
+        this.$width = input();
+        this.$code = computed(() => this.$shift().code);
+        this.$name = computed(() => this.$shift().name);
+        this.$hoursStart = computed(() => this.$shift().hoursStart);
+        this.$hoursStop = computed(() => this.$shift().hoursStop);
+        this.$symbolCode = computed(() => this.$shift().symbol.code);
+        this.$symbolName = computed(() => this.$shift().symbol.name);
+        this.$isOff = computed(() => this.$shift().symbol.isOff);
+        this.$isHolidayCal = computed(() => this.$shift().symbol.isHolidayCal);
+        this.$isHaveSal = computed(() => this.$shift().symbol.isHaveSal);
+        this.$isInsArising = computed(() => this.$shift().symbol.isInsArising);
+        this.$duration = computed(() => (this.$shift().hoursStop.getTime() - this.$shift().hoursStart.getTime()) / 1000 / 60 / 60);
+        // Dynamic style property
+        this.height = '36.59px';
+        this.borderRadius = '2px';
+        this.fontSize = '11px';
+        this.lineHeight = 1.3;
+        this.firstLinefontWeight = 600;
+        this.cursor = 'pointer';
+        this.padding = '4px 6px';
+        this.color = 'white';
+        this.backgroundColor = '#F76B6A';
+    }
+    ngOnChanges(changes) {
+        if (!!changes['checked']) {
+            this.cdr.markForCheck();
+        }
+    }
     ngOnInit() {
         this.subscriptions.push(this.mls.lang$.subscribe(x => this.lang = x));
-        this.code = this.shift.code;
-        this.name = this.shift.name;
-        this.hoursStart = this.shift.hoursStart;
-        this.hoursStop = this.shift.hoursStop;
-        this.symbolCode = this.shift.symbol.code;
-        this.symbolName = this.shift.symbol.name;
-        this.isOff = this.shift.symbol.isOff;
-        this.isHolidayCal = this.shift.symbol.isHolidayCal;
-        this.isHaveSal = this.shift.symbol.isHaveSal;
-        this.isInsArising = this.shift.symbol.isInsArising;
-        this.relativelyIsMorning = (this.shift.hoursStart.getHours() >= 6 && this.shift.hoursStart.getHours() <= 12) || (this.shift.hoursStop.getHours() >= 6 && this.shift.hoursStop.getHours() <= 12);
-        this.relativelyIsAfternoon = (this.shift.hoursStart.getHours() >= 12 && this.shift.hoursStart.getHours() <= 18) || (this.shift.hoursStop.getHours() >= 12 && this.shift.hoursStop.getHours() <= 18);
-        this.relativelyIsEverning = (this.shift.hoursStart.getHours() >= 18 && this.shift.hoursStart.getHours() <= 24) || (this.shift.hoursStop.getHours() >= 18 && this.shift.hoursStop.getHours() <= 0);
-        this.relativelyIsNight = (this.shift.hoursStart.getHours() >= 0 && this.shift.hoursStart.getHours() <= 6) || (this.shift.hoursStop.getHours() >= 0 && this.shift.hoursStop.getHours() <= 6);
+        this.relativelyIsMorning = (this.$shift().hoursStart.getHours() >= 6 && this.$shift().hoursStart.getHours() <= 12) || (this.$shift().hoursStop.getHours() >= 6 && this.$shift().hoursStop.getHours() <= 12);
+        this.relativelyIsAfternoon = (this.$shift().hoursStart.getHours() >= 12 && this.$shift().hoursStart.getHours() <= 18) || (this.$shift().hoursStop.getHours() >= 12 && this.$shift().hoursStop.getHours() <= 18);
+        this.relativelyIsEverning = (this.$shift().hoursStart.getHours() >= 18 && this.$shift().hoursStart.getHours() <= 24) || (this.$shift().hoursStop.getHours() >= 18 && this.$shift().hoursStop.getHours() <= 0);
+        this.relativelyIsNight = (this.$shift().hoursStart.getHours() >= 0 && this.$shift().hoursStart.getHours() <= 6) || (this.$shift().hoursStop.getHours() >= 0 && this.$shift().hoursStop.getHours() <= 6);
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            fromEvent(this.$container()?.nativeElement, 'dragstart')
+                .subscribe((ev) => {
+                ev.dataTransfer.setData("text/plain", `${this.$shiftCellId()}:${this.$shift().code}`);
+                this.workShiftDndService.draggingData$.next(ev.dataTransfer.getData("text/plain"));
+                this.workShiftDndService.draggingShift$.next(this.$shift());
+                this.workShiftDndService.draggingFromCellId$.next(this.$shiftCellId());
+                this.$shiftDetails()?.nativeElement.style.setProperty('width', '100%');
+                this.$shiftDetails()?.nativeElement.style.setProperty('padding-left', '6px');
+                this.$check()?.nativeElement.style.setProperty('display', 'none');
+                this.$plus()?.nativeElement.style.setProperty('display', 'none');
+            });
+            fromEvent(this.$container()?.nativeElement, 'drag')
+                .pipe(debounceTime(200))
+                .subscribe((ev) => {
+            });
+            fromEvent(this.$container()?.nativeElement, 'dragend')
+                .subscribe((ev) => {
+                // 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.workShiftDndService.draggingData$.next('');
+                this.workShiftDndService.draggingShift$.next(undefined);
+                this.workShiftDndService.draggingFromCellId$.next('');
+                this.$shiftDetails()?.nativeElement.style.removeProperty('width');
+                this.$shiftDetails()?.nativeElement.style.removeProperty('padding-left');
+                this.$check()?.nativeElement.style.removeProperty('display');
+                this.$plus()?.nativeElement.style.removeProperty('display');
+            });
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoreShiftStickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.3", type: CoreShiftStickerComponent, isStandalone: true, selector: "core-shift-sticker", inputs: { shift: "shift", width: "width" }, usesInheritance: true, ngImport: i0, template: "<div class=\"core-shift-sticker-container d-flex d-flex-between\" draggable [ngStyle]=\"{\r\n    width: width + 'px'\r\n}\">\r\n    <div [class.morning]=\"relativelyIsMorning\" [class.afternoon]=\"relativelyIsAfternoon\" [class.everning]=\"relativelyIsEverning\"\r\n        [class.night]=\"relativelyIsNight\">\r\n\r\n        <div class=\"info d-flex d-flex-v d-flex-between\">\r\n            <div class=\"first-line d-flex d-flex-between\">\r\n                <div class=\"shift-code\">\r\n                    {{ code }}\r\n                </div>\r\n                <div class=\"symbol-props\">\r\n                    @if (isOff) {\r\n                    <i class=\"fas fa-plug-circle-minus\"></i>\r\n                    }\r\n                    @if (isHolidayCal) {\r\n                    <i class=\"fas fa-champagne-glasses\"></i>\r\n                    }\r\n                    @if (isHaveSal) {\r\n                    <i class=\"fas fa-sack-dollar\"></i>\r\n                    }\r\n                    @if (isInsArising) {\r\n                    <i class=\"fas fa-car-burst\"></i>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div class=\"second-line d-flex d-flex-between\">\r\n                {{ hoursStart | tableCell : 'TIME_HHMM' : lang }} - {{ hoursStop | tableCell : 'TIME_HHMM' : lang }}\r\n            </div>\r\n        </div>\r\n        <div class=\"more-info right\" [ngStyle]=\"{\r\n        float: 'right'\r\n    }\">\r\n            <i class=\"feather-more-horizontal\"></i>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".core-shift-sticker-container{border:1px solid gray;padding:5px;font-size:13px;position:absolute;top:0;left:0}.core-shift-sticker-container .morning{background-color:#dff6dd}.core-shift-sticker-container .afternoon{background-color:#fff4ce}.core-shift-sticker-container .everning{background-color:#efd9fd}.core-shift-sticker-container .night{background-color:#000;color:#fff}.core-shift-sticker-container .info .first-line{width:100%}.core-shift-sticker-container .more-info{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: TableCellPipe, name: "tableCell" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.3", type: CoreShiftStickerComponent, isStandalone: true, selector: "core-shift-sticker", inputs: { $shift: { classPropertyName: "$shift", publicName: "$shift", isSignal: true, isRequired: true, transformFunction: null }, $shiftCellId: { classPropertyName: "$shiftCellId", publicName: "$shiftCellId", isSignal: true, isRequired: true, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: false, isRequired: false, transformFunction: null }, $height: { classPropertyName: "$height", publicName: "$height", isSignal: true, isRequired: false, transformFunction: null }, $width: { classPropertyName: "$width", publicName: "$width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "$container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "$shiftDetails", first: true, predicate: ["shiftDetails"], descendants: true, isSignal: true }, { propertyName: "$check", first: true, predicate: ["check"], descendants: true, isSignal: true }, { propertyName: "$plus", first: true, predicate: ["plus"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #container class=\"core-shift-sticker-container d-flex d-flex-between open-font\" [ngStyle]=\"{\r\n    position: 'relative',\r\n    height,\r\n    fontSize,\r\n    cursor,\r\n    width: $width() + 'px',\r\n    margin: '2px'\r\n}\" draggable=\"true\">\r\n    <div #shiftDetails class=\"shift-details p-relative\" [ngStyle]=\"{\r\n        color,\r\n        backgroundColor\r\n    }\" [class.checked]=\"checked\">\r\n        <div #check class=\"check p-absolute\">\r\n            <core-checkbox [(ngModel)]=\"checked\"></core-checkbox>\r\n        </div>\r\n        <div class=\"ellipsis p-relative first-line\" title=\"9:00 AM - 11:00 AM \u2022 2h\"\r\n            ng-class=\"{'icon-on-right': !event.showBigIcon &amp;&amp; event.rrule &amp;&amp; event.type !== 'availability'}\">\r\n            {{ $hoursStart() | tableCell : 'TIME_HHMM' : lang }} - {{ $hoursStop() | tableCell : 'TIME_HHMM' : lang }} \u2022\r\n            {{ $duration() }}\r\n        </div>\r\n        <div class=\"ellipsis second-line\" ng-class=\"{'icon-on-right': !event.showBigIcon &amp;&amp; event.summary}\">\r\n            <span>\r\n                {{ $symbolCode() }} \u2022\r\n\r\n                @if ($isOff()) {\r\n                <i class=\"fas fa-plug-circle-minus\"></i>\r\n                }\r\n                @if ($isHolidayCal()) {\r\n                <i class=\"fas fa-champagne-glasses\"></i>\r\n                }\r\n                @if ($isHaveSal()) {\r\n                <i class=\"fas fa-sack-dollar\"></i>\r\n                }\r\n                @if ($isInsArising()) {\r\n                <i class=\"fas fa-car-burst\"></i>\r\n                }\r\n            </span>\r\n        </div>\r\n\r\n        <div #plus class=\"plus p-absolute\">\r\n            <i class=\"feather-plus\"></i>\r\n        </div>\r\n\r\n    </div>\r\n\r\n</div>", styles: [".core-shift-sticker-container{--height: 36.59px;--width: 228px;--border: none;--opacity: 1;box-sizing:border-box;min-width:105px;max-width:228px;opacity:var(--opacity);border:var(--border)}.core-shift-sticker-container *{box-sizing:border-box}.core-shift-sticker-container .shift-details{padding:4px 6px;font-size:11px;line-height:1.3;width:100%;border-radius:2px}.core-shift-sticker-container .shift-details .first-line{height:14.3px;font-weight:600}.core-shift-sticker-container .shift-details .second-line{height:14.3;font-weight:400}.core-shift-sticker-container .shift-details.checked{border-top-right-radius:0;border-bottom-right-radius:0;padding-left:var(--height)}.core-shift-sticker-container .shift-details.checked .check{display:flex;align-items:center;justify-content:center}.core-shift-sticker-container:hover{opacity:.8}.core-shift-sticker-container:hover .shift-details{width:calc(100% - var(--height) - 2px);border-top-right-radius:0;border-bottom-right-radius:0;padding-left:var(--height)}.core-shift-sticker-container:hover .shift-details .check,.core-shift-sticker-container:hover .shift-details .plus{display:flex;align-items:center;justify-content:center}.core-shift-sticker-container .check,.core-shift-sticker-container .plus{width:var(--height);height:var(--height);top:0;display:none}.core-shift-sticker-container .check{left:0}.core-shift-sticker-container .plus{font-size:24px;border:solid 2px #646464;border-radius:2px;right:calc(var(--height) * -1 - 2px);color:#646464}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: TableCellPipe, name: "tableCell" }, { kind: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["text", "tooltipPosition", "tooltip", "inputValue", "disabled"], outputs: ["onClick"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoreShiftStickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-shift-sticker', standalone: true, imports: [
+            args: [{ selector: 'core-shift-sticker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgStyle,
                         TranslatePipe,
                         TooltipDirective,
                         TableCellPipe,
-                    ], template: "<div class=\"core-shift-sticker-container d-flex d-flex-between\" draggable [ngStyle]=\"{\r\n    width: width + 'px'\r\n}\">\r\n    <div [class.morning]=\"relativelyIsMorning\" [class.afternoon]=\"relativelyIsAfternoon\" [class.everning]=\"relativelyIsEverning\"\r\n        [class.night]=\"relativelyIsNight\">\r\n\r\n        <div class=\"info d-flex d-flex-v d-flex-between\">\r\n            <div class=\"first-line d-flex d-flex-between\">\r\n                <div class=\"shift-code\">\r\n                    {{ code }}\r\n                </div>\r\n                <div class=\"symbol-props\">\r\n                    @if (isOff) {\r\n                    <i class=\"fas fa-plug-circle-minus\"></i>\r\n                    }\r\n                    @if (isHolidayCal) {\r\n                    <i class=\"fas fa-champagne-glasses\"></i>\r\n                    }\r\n                    @if (isHaveSal) {\r\n                    <i class=\"fas fa-sack-dollar\"></i>\r\n                    }\r\n                    @if (isInsArising) {\r\n                    <i class=\"fas fa-car-burst\"></i>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div class=\"second-line d-flex d-flex-between\">\r\n                {{ hoursStart | tableCell : 'TIME_HHMM' : lang }} - {{ hoursStop | tableCell : 'TIME_HHMM' : lang }}\r\n            </div>\r\n        </div>\r\n        <div class=\"more-info right\" [ngStyle]=\"{\r\n        float: 'right'\r\n    }\">\r\n            <i class=\"feather-more-horizontal\"></i>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".core-shift-sticker-container{border:1px solid gray;padding:5px;font-size:13px;position:absolute;top:0;left:0}.core-shift-sticker-container .morning{background-color:#dff6dd}.core-shift-sticker-container .afternoon{background-color:#fff4ce}.core-shift-sticker-container .everning{background-color:#efd9fd}.core-shift-sticker-container .night{background-color:#000;color:#fff}.core-shift-sticker-container .info .first-line{width:100%}.core-shift-sticker-container .more-info{cursor:pointer}\n"] }]
-        }], propDecorators: { shift: [{
-                type: Input,
-                args: [{ required: true }]
-            }], width: [{
+                        CoreCheckboxComponent,
+                        FormsModule
+                    ], template: "<div #container class=\"core-shift-sticker-container d-flex d-flex-between open-font\" [ngStyle]=\"{\r\n    position: 'relative',\r\n    height,\r\n    fontSize,\r\n    cursor,\r\n    width: $width() + 'px',\r\n    margin: '2px'\r\n}\" draggable=\"true\">\r\n    <div #shiftDetails class=\"shift-details p-relative\" [ngStyle]=\"{\r\n        color,\r\n        backgroundColor\r\n    }\" [class.checked]=\"checked\">\r\n        <div #check class=\"check p-absolute\">\r\n            <core-checkbox [(ngModel)]=\"checked\"></core-checkbox>\r\n        </div>\r\n        <div class=\"ellipsis p-relative first-line\" title=\"9:00 AM - 11:00 AM \u2022 2h\"\r\n            ng-class=\"{'icon-on-right': !event.showBigIcon &amp;&amp; event.rrule &amp;&amp; event.type !== 'availability'}\">\r\n            {{ $hoursStart() | tableCell : 'TIME_HHMM' : lang }} - {{ $hoursStop() | tableCell : 'TIME_HHMM' : lang }} \u2022\r\n            {{ $duration() }}\r\n        </div>\r\n        <div class=\"ellipsis second-line\" ng-class=\"{'icon-on-right': !event.showBigIcon &amp;&amp; event.summary}\">\r\n            <span>\r\n                {{ $symbolCode() }} \u2022\r\n\r\n                @if ($isOff()) {\r\n                <i class=\"fas fa-plug-circle-minus\"></i>\r\n                }\r\n                @if ($isHolidayCal()) {\r\n                <i class=\"fas fa-champagne-glasses\"></i>\r\n                }\r\n                @if ($isHaveSal()) {\r\n                <i class=\"fas fa-sack-dollar\"></i>\r\n                }\r\n                @if ($isInsArising()) {\r\n                <i class=\"fas fa-car-burst\"></i>\r\n                }\r\n            </span>\r\n        </div>\r\n\r\n        <div #plus class=\"plus p-absolute\">\r\n            <i class=\"feather-plus\"></i>\r\n        </div>\r\n\r\n    </div>\r\n\r\n</div>", styles: [".core-shift-sticker-container{--height: 36.59px;--width: 228px;--border: none;--opacity: 1;box-sizing:border-box;min-width:105px;max-width:228px;opacity:var(--opacity);border:var(--border)}.core-shift-sticker-container *{box-sizing:border-box}.core-shift-sticker-container .shift-details{padding:4px 6px;font-size:11px;line-height:1.3;width:100%;border-radius:2px}.core-shift-sticker-container .shift-details .first-line{height:14.3px;font-weight:600}.core-shift-sticker-container .shift-details .second-line{height:14.3;font-weight:400}.core-shift-sticker-container .shift-details.checked{border-top-right-radius:0;border-bottom-right-radius:0;padding-left:var(--height)}.core-shift-sticker-container .shift-details.checked .check{display:flex;align-items:center;justify-content:center}.core-shift-sticker-container:hover{opacity:.8}.core-shift-sticker-container:hover .shift-details{width:calc(100% - var(--height) - 2px);border-top-right-radius:0;border-bottom-right-radius:0;padding-left:var(--height)}.core-shift-sticker-container:hover .shift-details .check,.core-shift-sticker-container:hover .shift-details .plus{display:flex;align-items:center;justify-content:center}.core-shift-sticker-container .check,.core-shift-sticker-container .plus{width:var(--height);height:var(--height);top:0;display:none}.core-shift-sticker-container .check{left:0}.core-shift-sticker-container .plus{font-size:24px;border:solid 2px #646464;border-radius:2px;right:calc(var(--height) * -1 - 2px);color:#646464}\n"] }]
+        }], propDecorators: { checked: [{
                 type: Input
             }] } });
 
+class CoreShiftCellComponent extends CoreFormControlBaseComponent {
+    writeValue(obj) {
+        this.$shifts.set(obj);
+    }
+    constructor(cdr, workShiftDndService) {
+        super();
+        this.cdr = cdr;
+        this.workShiftDndService = workShiftDndService;
+        this.$backgroundColor = input('white');
+        this.$container = viewChild('container');
+        this.shiftCellId = crypto.randomUUID();
+        this.dragElements = new Set();
+        this.$shifts = signal([
+            {
+                code: 'X',
+                name: 'Ca làm việc ngày thường',
+                symbol: {
+                    code: 'X',
+                    name: 'X',
+                    isHaveSal: true,
+                },
+                hoursStart: new Date(2024, 7, 13, 8, 0, 0),
+                hoursStop: new Date(2024, 7, 13, 17, 30, 0)
+            },
+            {
+                code: 'OFF',
+                name: 'Ca ngày nghỉ',
+                symbol: {
+                    code: 'OFF',
+                    name: 'OFF',
+                    isOff: true,
+                },
+                hoursStart: new Date(2024, 7, 13, 8, 0, 0),
+                hoursStop: new Date(2024, 7, 13, 17, 30, 0)
+            },
+            {
+                code: 'CT',
+                name: 'Ca công tác',
+                symbol: {
+                    code: 'CT',
+                    name: 'CR',
+                    isRegister: true,
+                },
+                hoursStart: new Date(2024, 7, 13, 8, 0, 0),
+                hoursStop: new Date(2024, 7, 13, 17, 30, 0)
+            }
+        ]);
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            const containerElement = this.$container()?.nativeElement;
+            containerElement.style.setProperty('--background-color', this.$backgroundColor());
+            this.cdr.markForCheck();
+            fromEvent(containerElement, 'dragenter').subscribe((ev) => {
+                ev.preventDefault();
+                if (this.workShiftDndService.draggingFromCellId$.value === this.shiftCellId)
+                    return;
+                this.dragElements.add(ev.target);
+                containerElement.classList.add('valid-drop');
+                //containerElement.classList.remove('invalid-drop');
+                if (this.workShiftDndService.draggingData$.value.split(':')[0] !== this.shiftCellId) {
+                    this.$container()?.nativeElement.style.setProperty('--background-color', '#fff4ce');
+                    this.cdr.markForCheck();
+                }
+            });
+            // Subscribe to dragover event to allow drop
+            fromEvent(containerElement, 'dragover').subscribe((ev) => {
+                ev.preventDefault();
+            });
+            fromEvent(containerElement, 'dragleave')
+                .subscribe((ev) => {
+                ev.preventDefault();
+                if (this.workShiftDndService.draggingFromCellId$.value === this.shiftCellId)
+                    return;
+                this.dragElements.delete(ev.target);
+                if (this.dragElements.size === 0) {
+                    containerElement.classList.remove('valid-drop');
+                    //containerElement.classList.add('invalid-drop');
+                }
+                this.$container()?.nativeElement.style.setProperty('--background-color', this.$backgroundColor());
+                this.cdr.markForCheck();
+            });
+            // Subscribe to drop event
+            fromEvent(containerElement, 'drop').subscribe((ev) => {
+                ev.preventDefault();
+                if (this.workShiftDndService.draggingFromCellId$.value === this.shiftCellId)
+                    return;
+                this.dragElements.clear(); // Clear the set
+                //containerElement.classList.remove('valid-drop', 'invalid-drop');
+                containerElement.classList.remove('valid-drop');
+                this.$container()?.nativeElement.style.setProperty('--background-color', this.$backgroundColor());
+                this.cdr.markForCheck();
+                const data = ev.dataTransfer?.getData('text/plain'); // Example data retrieval
+                // Handle drop logic based on data
+                if (data) {
+                    // Process dropped data here
+                    console.log('Dropped data:', data);
+                }
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoreShiftCellComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: WorkShiftDndService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.3", type: CoreShiftCellComponent, isStandalone: true, selector: "core-shift-cell", inputs: { $backgroundColor: { classPropertyName: "$backgroundColor", publicName: "$backgroundColor", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: CoreShiftCellComponent
+            }
+        ], viewQueries: [{ propertyName: "$container", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"core-shift-cell-container\">\r\n    @for (shift of $shifts(); track $index) {\r\n        <core-shift-sticker [$shift]=\"shift\" [$shiftCellId]=\"shiftCellId\" [$width]=\"228\"></core-shift-sticker>\r\n    }\r\n</div>\r\n", styles: [".core-shift-cell-container{--background-color: #000000;padding:15px;background-color:var(--background-color)}.core-shift-cell-container.valid-drop{background-color:#90ee90}.core-shift-cell-container.invalid-drop{background-color:#f08080}\n"], dependencies: [{ kind: "component", type: CoreShiftStickerComponent, selector: "core-shift-sticker", inputs: ["$shift", "$shiftCellId", "checked", "$height", "$width"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoreShiftCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-shift-cell', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CoreShiftStickerComponent
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: CoreShiftCellComponent
+                        }
+                    ], template: "<div #container class=\"core-shift-cell-container\">\r\n    @for (shift of $shifts(); track $index) {\r\n        <core-shift-sticker [$shift]=\"shift\" [$shiftCellId]=\"shiftCellId\" [$width]=\"228\"></core-shift-sticker>\r\n    }\r\n</div>\r\n", styles: [".core-shift-cell-container{--background-color: #000000;padding:15px;background-color:var(--background-color)}.core-shift-cell-container.valid-drop{background-color:#90ee90}.core-shift-cell-container.invalid-drop{background-color:#f08080}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: WorkShiftDndService }] });
+
 class CoreSubFormGroupComponent extends CorePageEditComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoreSubFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: CoreSubFormGroupComponent, isStandalone: true, selector: "core-sub-form-group", usesInheritance: true, ngImport: i0, template: "<core-form *ngIf=\"!!sections.length\" [formName]=\"'form'\" [inputSections]=\"sections\" [mode$]=\"mode$\" (onFormCreated)=\"onFormCreatedLocal($event)\"></core-form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CoreFormComponent, selector: "core-form", inputs: ["formName", "submitText", "leftInputSections", "leftInputSectionsFlexSize", "inputSections", "mode$", "bottomTemplateRef", "customFormButtonItems", "showCaptionButton", "disableSaveButton", "checkError$"], outputs: ["onFormCreated", "onFormRefCreated", "onSubmit", "onSave", "onCancal", "buttonClick"] }] }); }
@@ -26177,5 +26380,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, AlertService, AnimatedTextComponent, AnimatedTextService, AppConfigService, AppInitializationService, AppService, ApplicationHelpService, 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, CoreCompositionComponent, CoreCompositionService, CoreCompositionState, CoreConfirmDialogComponent, CoreContractSeekerComponent, CoreControlComponent, CoreControlNoGridBufferComponent, CoreControlNoSeekerComponent, CoreControlService, CoreCurrencyInputComponent, CoreDatePickerComponent, CoreDatetimeService, CoreDropdownComponent, CoreEmployeeSeekerComponent, CoreFileUploaderComponent, CoreFormComponent, CoreFormControlBaseComponent, CoreFormControlSeekerComponent, CoreFormLiteComponent, CoreFormService, CoreFormTabComponent, CoreGridBufferComponent, CoreHeaderParamsComponent, CoreHelperComponent, CoreIosSwitcherComponent, CoreLineComponent, CoreListComponent, CoreListLazyComponent, CoreLoadingSurfaceComponent, CoreMccComponent, CoreMonthPickerComponent, CoreMonthSelectorComponent, CoreNavigationTrackerComponent, CoreOrgParamComponent, CoreOrgTreeComponent, CoreOrgTreeService, CoreOrgTreeState, CoreOrgUnitSeekerComponent, CoreOrgchartflexComponent, CorePageEditComponent, CorePageEditLiteComponent, CorePageEditService, CorePageEditTabComponent, CorePageHeaderComponent, CorePageListComponent, CorePageListContentComponent, CorePageListService, CorePageListState, CorePageViewComponent, CorePaginationComponent, CorePaginationFullComponent, CorePaginationFullService, CoreParamControlComponent, CorePermissionActionsComponent, CorePermissionComponent, CorePermissionService, CorePositionConcurrentSeekerComponent, CorePositionSeekerComponent, CoreQueryBuilderComponent, CoreRadioGroupComponent, CoreReducerIconComponent, CoreRotatingTextComponent, CoreRoutingHistoryComponent, CoreScrollComponent, CoreScrollLazyComponent, CoreSeenByComponent, CoreShiftStickerComponent, CoreStatisticWidgetComponent, CoreStatusStickerComponent, CoreSubFormGroupComponent, CoreTableComponent, CoreTableService, CoreTabsComponent, CoreTagsComponent, CoreTopicPickerComponent, CoreTopicTreeComponent, CoreTreeComponent, CoreTreeGridComponent, CoreWageSeekerComponent, CoreWorkingSeekerComponent, CoreYearPickerComponent, CustomValidators, DATE_VALUE_ACCESSOR, DESKTOP_SCREEN_HEDER_HEIGHT, DateValueAccessor, DecisionComponent, DialogService, DialogStateComponent, DomService, ECoreTableToolClass, ECoreTableToolCode, EnumAlertType, EnumBrowserType, EnumButtonCaptionCode, EnumCoreArticleCategoryTreeaAccessorMode, EnumCoreButtonCode, EnumCoreButtonVNSCode, EnumCoreFileUploaderType, EnumCoreFormControlSeekerSourceType, EnumCoreOrgTreeaAccessorMode, EnumCorePageEditBootstrapClass, EnumCorePageEditFieldType, EnumCorePageEditMode, EnumCoreSeekerColumnContract, EnumCoreSeekerColumnJob, EnumCoreSeekerColumnPosition, EnumCoreSeekerColumnPositionConcurrent, EnumCoreSeekerColumnStaffProfile, EnumCoreSeekerColumnWage, EnumCoreSeekerColumnWorking, EnumCoreTablePipeType, EnumCoreTreeGridEditMode, EnumCoreViewItemType, EnumDeviceType, EnumErrorType, EnumExType, EnumFilterOperator, EnumFormBaseContolType, EnumHrComparisonCode, EnumICoreStatisticWidgetDataType, EnumIconClass, EnumNotificationDir, EnumOparator, EnumOsType, EnumPermissionObjectType, EnumProfileInfoSector, EnumRecursiveFields, EnumSignalRType, EnumSortDirection, EnumStyleButtonClass, EnumSwUpdateVersionUpdatesEventType, EvaluateDialogComponent, EvaluateDialogService, FileService, FilterPipe, FooterComponent, FullscreenModalLoaderComponent, FunctionComponent, FunctionEditComponent, FunctionEditService, FunctionIgnoreComponent, FunctionIgnoreEditComponent, GroupFunctionComponent, GroupFunctionEditComponent, GrpcService, HeaderService, HistoryService, HotKeysDirective, HttpErrorHandler, HubConnectionService, HuconcurrentlyComponent, IAlertOptions, ImageErrorResolverDirective, InMemoryComponent, InitializationCanActivateFn, InitializationCanMatchFn, InterceptorSkipHeader, IpServiceService, ItemComponent, JobComponent, JsonService, LanguageChangerComponent, LanguageComponent, LanguageEditComponent, LayoutService, LongTaskService, MOBILE_SCREEN_HEDER_HEIGHT, MapAttachmentToServerPipe, MapAvatarToServerPipe, MapNewsfeedMediaToServerPipe, MapService, MenuComponent, MenuEditComponent, MenuService, MessageService, ModalService, MultiLanguageService, MutationLogComponent, MutationViewComponent, NavigatorComponent, NavigatorService, NewlyCreatedTokenService, NgxHistaffAlphaComponent, NgxHistaffAlphaService, NormalizeHumanNamePipe, NotificationActionType, OnlineUsersComponent, OrganizationService, PageTitleComponent, PaginationComponent, PortalRouteComponent, PortalRouteEditComponent, PositionComponent, PositionEditService, PositionTransferService, PushNotificationService, RandomAvatarService, RecursiveService, RequestCache, RequestCacheWithMap, ResponseService, RightchatComponent, RoutingService, STICKER_COLOR_SCHEMA, SeekerService, SocketService, StaffProfileComponent, StatisticAuthService, StatisticService, StringHtmlPipe, StringService, SysActionComponent, SysActionEditComponent, SysFunctionActionComponent, SysFunctionActionEditComponent, SysFunctionActionMapperComponent, SysFunctionUrlMapperComponent, SysMenuService, SysModuleComponent, SysModuleEditComponent, TLA_CONFIG, TableCellPipe, Textbox, ThreedotsComponent, TimeSheetService, TooltipComponent, TooltipDirective, TopicPermissionService, TopicTreeService, TranslatePipe, UnicodeService, UploadedFileService, UploadedFilenameCutoffPipe, UrlService, UserActivityComponent, UserActivityService, WageComponent, WaittingScreenComponent, alertOptions, attachmentOptions, authInterceptor, baseUrlInterceptor, blob_to_base64_script, cachingInterceptor, defaultPaging, httpInterceptorProviders, liner_to_nested_array_script, longAlertOptions, noneAutoClosedAlertOptions, normalizeHumanName, responseInterceptor, themeBlue, timeZoneInterceptor, tokenInterceptor };
+export { AlertComponent, AlertService, AnimatedTextComponent, AnimatedTextService, AppConfigService, AppInitializationService, AppService, ApplicationHelpService, 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, CoreCompositionComponent, CoreCompositionService, CoreCompositionState, CoreConfirmDialogComponent, CoreContractSeekerComponent, CoreControlComponent, CoreControlNoGridBufferComponent, CoreControlNoSeekerComponent, CoreControlService, CoreCurrencyInputComponent, CoreDatePickerComponent, CoreDatetimeService, CoreDropdownComponent, CoreEmployeeSeekerComponent, CoreFileUploaderComponent, CoreFormComponent, CoreFormControlBaseComponent, CoreFormControlSeekerComponent, CoreFormLiteComponent, CoreFormService, CoreFormTabComponent, CoreGridBufferComponent, CoreHeaderParamsComponent, CoreHelperComponent, CoreIosSwitcherComponent, CoreLineComponent, CoreListComponent, CoreListLazyComponent, CoreLoadingSurfaceComponent, CoreMccComponent, CoreMonthPickerComponent, CoreMonthSelectorComponent, CoreNavigationTrackerComponent, CoreOrgParamComponent, CoreOrgTreeComponent, CoreOrgTreeService, CoreOrgTreeState, CoreOrgUnitSeekerComponent, CoreOrgchartflexComponent, CorePageEditComponent, CorePageEditLiteComponent, CorePageEditService, CorePageEditTabComponent, CorePageHeaderComponent, CorePageListComponent, CorePageListContentComponent, CorePageListService, CorePageListState, CorePageViewComponent, CorePaginationComponent, CorePaginationFullComponent, CorePaginationFullService, CoreParamControlComponent, CorePermissionActionsComponent, CorePermissionComponent, CorePermissionService, CorePositionConcurrentSeekerComponent, CorePositionSeekerComponent, CoreQueryBuilderComponent, CoreRadioGroupComponent, CoreReducerIconComponent, CoreRotatingTextComponent, CoreRoutingHistoryComponent, CoreScrollComponent, CoreScrollLazyComponent, CoreSeenByComponent, CoreShiftCellComponent, CoreShiftStickerComponent, CoreStatisticWidgetComponent, CoreStatusStickerComponent, CoreSubFormGroupComponent, CoreTableComponent, CoreTableService, CoreTabsComponent, CoreTagsComponent, CoreTopicPickerComponent, CoreTopicTreeComponent, CoreTreeComponent, CoreTreeGridComponent, CoreWageSeekerComponent, CoreWorkingSeekerComponent, CoreYearPickerComponent, CustomValidators, DATE_VALUE_ACCESSOR, DESKTOP_SCREEN_HEDER_HEIGHT, DateValueAccessor, DecisionComponent, DialogService, DialogStateComponent, DomService, ECoreTableToolClass, ECoreTableToolCode, EnumAlertType, EnumBrowserType, EnumButtonCaptionCode, EnumCoreArticleCategoryTreeaAccessorMode, EnumCoreButtonCode, EnumCoreButtonVNSCode, EnumCoreFileUploaderType, EnumCoreFormControlSeekerSourceType, EnumCoreOrgTreeaAccessorMode, EnumCorePageEditBootstrapClass, EnumCorePageEditFieldType, EnumCorePageEditMode, EnumCoreSeekerColumnContract, EnumCoreSeekerColumnJob, EnumCoreSeekerColumnPosition, EnumCoreSeekerColumnPositionConcurrent, EnumCoreSeekerColumnStaffProfile, EnumCoreSeekerColumnWage, EnumCoreSeekerColumnWorking, EnumCoreTablePipeType, EnumCoreTreeGridEditMode, EnumCoreViewItemType, EnumDeviceType, EnumErrorType, EnumExType, EnumFilterOperator, EnumFormBaseContolType, EnumHrComparisonCode, EnumICoreStatisticWidgetDataType, EnumIconClass, EnumNotificationDir, EnumOparator, EnumOsType, EnumPermissionObjectType, EnumProfileInfoSector, EnumRecursiveFields, EnumSignalRType, EnumSortDirection, EnumStyleButtonClass, EnumSwUpdateVersionUpdatesEventType, EvaluateDialogComponent, EvaluateDialogService, FileService, FilterPipe, FooterComponent, FullscreenModalLoaderComponent, FunctionComponent, FunctionEditComponent, FunctionEditService, FunctionIgnoreComponent, FunctionIgnoreEditComponent, GroupFunctionComponent, GroupFunctionEditComponent, GrpcService, HeaderService, HistoryService, HotKeysDirective, HttpErrorHandler, HubConnectionService, HuconcurrentlyComponent, IAlertOptions, ImageErrorResolverDirective, InMemoryComponent, InitializationCanActivateFn, InitializationCanMatchFn, InterceptorSkipHeader, IpServiceService, ItemComponent, JobComponent, JsonService, LanguageChangerComponent, LanguageComponent, LanguageEditComponent, LayoutService, LongTaskService, MOBILE_SCREEN_HEDER_HEIGHT, MapAttachmentToServerPipe, MapAvatarToServerPipe, MapNewsfeedMediaToServerPipe, MapService, MenuComponent, MenuEditComponent, MenuService, MessageService, ModalService, MultiLanguageService, MutationLogComponent, MutationViewComponent, NavigatorComponent, NavigatorService, NewlyCreatedTokenService, NgxHistaffAlphaComponent, NgxHistaffAlphaService, NormalizeHumanNamePipe, NotificationActionType, OnlineUsersComponent, OrganizationService, PageTitleComponent, PaginationComponent, PortalRouteComponent, PortalRouteEditComponent, PositionComponent, PositionEditService, PositionTransferService, PushNotificationService, RandomAvatarService, RecursiveService, RequestCache, RequestCacheWithMap, ResponseService, RightchatComponent, RoutingService, STICKER_COLOR_SCHEMA, SeekerService, SocketService, StaffProfileComponent, StatisticAuthService, StatisticService, StringHtmlPipe, StringService, SysActionComponent, SysActionEditComponent, SysFunctionActionComponent, SysFunctionActionEditComponent, SysFunctionActionMapperComponent, SysFunctionUrlMapperComponent, SysMenuService, SysModuleComponent, SysModuleEditComponent, TLA_CONFIG, TableCellPipe, Textbox, ThreedotsComponent, TimeSheetService, TooltipComponent, TooltipDirective, TopicPermissionService, TopicTreeService, TranslatePipe, UnicodeService, UploadedFileService, UploadedFilenameCutoffPipe, UrlService, UserActivityComponent, UserActivityService, WageComponent, WaittingScreenComponent, WorkShiftDndService, alertOptions, attachmentOptions, authInterceptor, baseUrlInterceptor, blob_to_base64_script, cachingInterceptor, defaultPaging, httpInterceptorProviders, liner_to_nested_array_script, longAlertOptions, noneAutoClosedAlertOptions, normalizeHumanName, responseInterceptor, themeBlue, timeZoneInterceptor, tokenInterceptor };
 //# sourceMappingURL=ngx-histaff-alpha.mjs.map