@foblex/ng-drag-grid/fesm2022/foblex-ng-drag-grid.mjs

Angular library designed for creating complex interfaces with drag-and-drop capabilities, perfect for implementing calendars, task boards, and other applications where item movement is required

import * as i0 from '@angular/core';
import { InjectionToken, Injectable, Inject, Directive, Input, EventEmitter, booleanAttribute, Output, Component, ChangeDetectionStrategy } from '@angular/core';
import { TransformModelExtensions, Point, DomElementExtensions, BooleanExtensions, PointExtensions, RectExtensions, EventExtensions, IMouseEvent, ITouchDownEvent, ITouchMoveEvent, ITouchUpEvent } from '@foblex/core';
import { Subject, Subscription } from 'rxjs';
import { DOCUMENT } from '@angular/common';

const F_BODY_CELL = new InjectionToken('F_BODY_CELL');
class FBodyCellBase {
    highlight() {
        this.hostElement.classList.add('f-drag-over');
    }
    clearHighlight() {
        this.hostElement.classList.remove('f-drag-over');
    }
}

const F_DRAGGABLE_STATE = new InjectionToken('F_DRAGGABLE_STATE');
class FDraggableState {
    transform = TransformModelExtensions.default();
    containerHost;
    items = [];
    cells = [];
    draggedItems = [];
    onPointerDownScale = 1;
    onPointerDownPosition = new Point(0, 0);
    setContainerHost(element) {
        this.containerHost = element;
    }
    findItem(element) {
        return this.items.find((x) => x.hostElement.contains(element));
    }
    addItem(item) {
        this.items.push(item);
    }
    removeItem(item) {
        this.items = this.items.filter((x) => x.uid !== item.uid);
    }
    findCell(element) {
        return this.cells.find((x) => x.hostElement.contains(element));
    }
    addCell(cell) {
        this.cells.push(cell);
    }
    removeCell(cell) {
        this.cells = this.cells.filter((x) => x.uid !== cell.uid);
    }
    reset() {
        this.draggedItems.forEach((item) => {
            item.fTimetableItem.clearHighlight();
        });
        this.draggedItems = [];
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FDraggableState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FDraggableState });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FDraggableState, decorators: [{
            type: Injectable
        }] });

class GetCellUnderPointerHandler {
    fDraggableState;
    constructor(fDraggableState) {
        this.fDraggableState = fDraggableState;
    }
    handle(request) {
        let result = this.getBodyCell(request.event);
        if (result && result.disabled) {
            result = undefined;
        }
        return result;
    }
    getBodyCell(event) {
        let result;
        const fCellElement = this.getCellElementsUnderPointer(event);
        if (fCellElement) {
            result = this.getCellComponentByElement(fCellElement);
        }
        return result;
    }
    getCellElementsUnderPointer(event) {
        const elements = document.elementsFromPoint(event.getPosition().x, event.getPosition().y);
        const result = elements.find((x) => x.tagName.toLowerCase() === 'f-body-cell');
        return result;
    }
    getCellComponentByElement(element) {
        const result = this.fDraggableState.findCell(element);
        return result;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: GetCellUnderPointerHandler, deps: [{ token: F_DRAGGABLE_STATE }], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: GetCellUnderPointerHandler });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: GetCellUnderPointerHandler, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: FDraggableState, decorators: [{
                    type: Inject,
                    args: [F_DRAGGABLE_STATE]
                }] }] });

class GetCellUnderPointerRequest {
    event;
    constructor(event) {
        this.event = event;
    }
}

class CreateItemPlaceholderHandler {
    handle(request) {
        const element = request.targetElement;
        const fBodyCellContainer = element.parentElement;
        if (!fBodyCellContainer) {
            throw new Error('Element must be a child of f-body-cell');
        }
        const placeholder = this.createPlaceholder(request);
        fBodyCellContainer.replaceChild(placeholder, element);
        return placeholder;
    }
    createPlaceholder(request) {
        const result = DomElementExtensions.deepCloneNode(request.targetElement);
        result.innerHTML = '';
        result.style.width = `${request.initialRect.width}px`;
        result.style.height = `${request.initialRect.height}px`;
        return result;
    }
}

class CreateItemPlaceholderRequest {
    targetElement;
    initialRect;
    constructor(targetElement, initialRect) {
        this.targetElement = targetElement;
        this.initialRect = initialRect;
    }
}

class GetDragResultHandler {
    fDraggableState;
    constructor(fDraggableState) {
        this.fDraggableState = fDraggableState;
    }
    handle() {
        let result = [];
        const items = this.fDraggableState.draggedItems || [];
        for (let i = 0; i < items.length; i++) {
            items[i].end();
            const cellId = items[i].fTimetableItem.parentId;
            const itemId = items[i].fTimetableItem.hostElement.id;
            result.push({
                currentCellId: cellId,
                itemId: itemId
            });
        }
        return result;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: GetDragResultHandler, deps: [{ token: F_DRAGGABLE_STATE }], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: GetDragResultHandler });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: GetDragResultHandler, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: FDraggableState, decorators: [{
                    type: Inject,
                    args: [F_DRAGGABLE_STATE]
                }] }] });

class MoveItemHandler {
    handle(request) {
        this.changeStyles(request.targetElement, request.size, request.position);
    }
    changeStyles(element, size, position) {
        element.style.position = 'absolute';
        element.style.zIndex = '1000';
        element.style.width = `${size.width}px`;
        element.style.height = `${size.height}px`;
        element.style.left = `${0}px`;
        element.style.top = `${0}px`;
        element.style.transform = 'translate(' + position.x + 'px,' + position.y + 'px)';
    }
}

class MoveItemRequest {
    targetElement;
    size;
    position;
    constructor(targetElement, size, position) {
        this.targetElement = targetElement;
        this.size = size;
        this.position = position;
    }
}

class RemoveItemPlaceholderHandler {
    handle(request) {
        const fBodyCellContainer = request.placeholder.parentElement;
        if (!fBodyCellContainer) {
            throw new Error('Element must be a child of f-body-cell');
        }
        request.targetElement.removeAttribute('style');
        fBodyCellContainer.replaceChild(request.targetElement, request.placeholder);
        request.placeholder.remove();
    }
}

class RemoveItemPlaceholderRequest {
    placeholder;
    targetElement;
    constructor(placeholder, targetElement) {
        this.placeholder = placeholder;
        this.targetElement = targetElement;
    }
}

const F_DRAG_HANDLE = new InjectionToken('F_DRAG_HANDLE');
class FDragHandleDirective {
    elementReference;
    stateChanges = new Subject();
    get disabled() {
        return this.isDisabled;
    }
    set disabled(isDisabled) {
        const value = BooleanExtensions.castToBoolean(isDisabled);
        if (value !== this.isDisabled) {
            this.isDisabled = value;
            this.stateChanges.next();
        }
    }
    isDisabled = false;
    get hostElement() {
        return this.elementReference.nativeElement;
    }
    constructor(elementReference) {
        this.elementReference = elementReference;
    }
    ngOnDestroy() {
        this.stateChanges.complete();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FDragHandleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: FDragHandleDirective, isStandalone: true, selector: "[fDragHandle]", inputs: { disabled: ["fDragHandleDisabled", "disabled"] }, host: { properties: { "class.f-drag-handle-disabled": "disabled" }, classAttribute: "f-drag-handle f-component" }, providers: [{ provide: F_DRAG_HANDLE, useExisting: FDragHandleDirective }], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FDragHandleDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: "[fDragHandle]",
                    standalone: true,
                    host: {
                        class: "f-drag-handle f-component",
                        '[class.f-drag-handle-disabled]': 'disabled'
                    },
                    providers: [{ provide: F_DRAG_HANDLE, useExisting: FDragHandleDirective }],
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { disabled: [{
                type: Input,
                args: ['fDragHandleDisabled']
            }] } });

function isDragHandle(element) {
    const dragHandle = getClosestDragHandle(element);
    return !!dragHandle && !isElementOrParentExcluded(element);
}
function isElementOrParentExcluded(element) {
    const isContains = isElementContainsClass(element);
    const parentElement = element.parentElement;
    const dragHandle = getClosestDragHandle(parentElement);
    if (!isContains && !!dragHandle) {
        return isElementOrParentExcluded(parentElement);
    }
    return isContains;
}
function getClosestDragHandle(element) {
    return element.closest('.f-drag-handle');
}
function isElementContainsClass(element) {
    return element.classList.contains('f-drag-handle-disabled');
}

class FCellItemDragMove {
    fDraggableState;
    fTimetableItem;
    onPointerDownPosition = PointExtensions.initialize();
    placeholder;
    parentCell;
    initialRect = RectExtensions.initialize();
    initialScrollTop = 0;
    get draggedElement() {
        return this.fTimetableItem.hostElement;
    }
    moveHandler = new MoveItemHandler();
    constructor(fDraggableState, fTimetableItem) {
        this.fDraggableState = fDraggableState;
        this.fTimetableItem = fTimetableItem;
        this.onPointerDownPosition = new Point();
    }
    prepare() {
        this.fTimetableItem.clearHighlight();
        this.parentCell = this.draggedElement.parentElement;
        if (!this.parentCell) {
            throw new Error('FTimetable item parent element not found');
        }
        this.initialRect = RectExtensions.fromElement(this.draggedElement);
        const containerRect = RectExtensions.fromElement(this.fDraggableState.containerHost);
        this.initialScrollTop = this.fDraggableState.containerHost.scrollTop;
        this.onPointerDownPosition = Point.fromPoint(this.initialRect).sub(containerRect).add({ x: 0, y: this.initialScrollTop });
        this.placeholder = new CreateItemPlaceholderHandler().handle(new CreateItemPlaceholderRequest(this.draggedElement, this.initialRect));
        this.moveHandler.handle(new MoveItemRequest(this.draggedElement, this.initialRect, this.onPointerDownPosition));
        this.fDraggableState.containerHost?.appendChild(this.draggedElement);
    }
    move(difference) {
        const differenceScroll = this.fDraggableState.containerHost.scrollTop - this.initialScrollTop;
        const position = Point.fromPoint(this.onPointerDownPosition).add(difference).add({ x: 0, y: differenceScroll });
        this.moveHandler.handle(new MoveItemRequest(this.draggedElement, this.initialRect, position));
    }
    end() {
        this.fDraggableState.containerHost?.removeChild(this.draggedElement);
        new RemoveItemPlaceholderHandler().handle(new RemoveItemPlaceholderRequest(this.placeholder, this.draggedElement));
    }
}

class FCellItemDragStart {
    fDraggableState;
    get transform() {
        return this.fDraggableState.transform;
    }
    get containerHost() {
        return this.fDraggableState.containerHost;
    }
    constructor(fDraggableState) {
        this.fDraggableState = fDraggableState;
    }
    handle(event) {
        const item = this.fDraggableState.findItem(event.targetElement);
        if (!this.containerHost) {
            throw new Error('Container host is not defined');
        }
        const pointerPositionInContainer = Point.fromPoint(event.getPosition()).elementTransform(this.containerHost);
        if (!item || item.disabled || this.fDraggableState.draggedItems.length || !isDragHandle(event.targetElement)) {
            return;
        }
        this.fDraggableState.onPointerDownScale = this.transform.scale;
        this.fDraggableState.onPointerDownPosition = pointerPositionInContainer.div(this.transform.scale);
        this.fDraggableState.draggedItems = [new FCellItemDragMove(this.fDraggableState, item)];
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FCellItemDragStart, deps: [{ token: F_DRAGGABLE_STATE }], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FCellItemDragStart });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FCellItemDragStart, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: FDraggableState, decorators: [{
                    type: Inject,
                    args: [F_DRAGGABLE_STATE]
                }] }] });

class FMoveEvent {
    items;
    toCellId;
    constructor(items, toCellId) {
        this.items = items;
        this.toCellId = toCellId;
    }
}

const IGNORE_TIME = 400;
class FDraggableBase {
    ngZone;
    element;
    mouseListeners = EventExtensions.emptyListener();
    touchListeners = EventExtensions.emptyListener();
    startListeners = EventExtensions.emptyListener();
    isSyntheticEvent(event) {
        const result = !!this.lastTouchEventTime &&
            (this.lastTouchEventTime + IGNORE_TIME > Date.now());
        return result;
    }
    lastTouchEventTime = 0;
    isDragStarted = false;
    dragStartThreshold = 5;
    dragStartDelay = 0;
    dragStartTime = 0;
    dragStartPosition = PointExtensions.initialize();
    moveHandler = this.checkDragSequenceToStart;
    constructor(ngZone) {
        this.ngZone = ngZone;
    }
    onMouseDown = (event) => {
        const isSyntheticEvent = this.isSyntheticEvent(event);
        const isFakeEvent = isFakeMousedownFromScreenReader(event);
        const mouseEvent = new IMouseEvent(event);
        if (isSyntheticEvent || isFakeEvent || this.disabled) {
            return;
        }
        let result = this.onPointerDown(mouseEvent);
        if (result) {
            this.dragStartTime = Date.now();
            this.dragStartPosition = mouseEvent.getPosition();
            this.ngZone.runOutsideAngular(() => {
                this.element.addEventListener('selectstart', this.preventDefault, EventExtensions.activeListener());
                this.element.addEventListener('mousemove', this.onMouseMove);
                this.element.addEventListener('mouseup', this.onMouseUp);
            });
            this.mouseListeners = () => {
                this.element.removeEventListener('selectstart', this.preventDefault, EventExtensions.activeListener());
                this.element.removeEventListener('mousemove', this.onMouseMove);
                this.element.removeEventListener('mouseup', this.onMouseUp);
            };
        }
    };
    onTouchDown = (event) => {
        const isFakeEvent = isFakeTouchstartFromScreenReader(event);
        const touchEvent = new ITouchDownEvent(event);
        if (isFakeEvent || this.disabled) {
            return;
        }
        let result = this.onPointerDown(new ITouchDownEvent(event));
        if (result) {
            this.dragStartTime = Date.now();
            this.dragStartPosition = touchEvent.getPosition();
            this.ngZone.runOutsideAngular(() => {
                this.element.addEventListener('selectstart', this.preventDefault, EventExtensions.activeListener());
                this.element.addEventListener('touchmove', this.onTouchMove);
                this.element.addEventListener('touchend', this.onTouchUp);
            });
            this.touchListeners = () => {
                this.element.removeEventListener('selectstart', this.preventDefault, EventExtensions.activeListener());
                this.element.removeEventListener('touchmove', this.onTouchMove);
                this.element.removeEventListener('touchend', this.onTouchUp);
            };
        }
    };
    onMouseMove = (event) => {
        this.moveHandler(new IMouseEvent(event));
    };
    onTouchMove = (event) => {
        this.moveHandler(new ITouchMoveEvent(event));
    };
    checkDragSequenceToStart(event) {
        const pointerPosition = event.getPosition();
        if (!this.isDragStarted) {
            const distanceX = Math.abs(pointerPosition.x - this.dragStartPosition.x);
            const distanceY = Math.abs(pointerPosition.y - this.dragStartPosition.y);
            const isOverThreshold = distanceX + distanceY >= this.dragStartThreshold;
            if (isOverThreshold) {
                const isDelayElapsed = Date.now() >= this.dragStartTime + this.dragStartDelay;
                if (!isDelayElapsed) {
                    this.endDragSequence();
                    return;
                }
                event.preventDefault();
                this.prepareDragSequence(event);
                this.isDragStarted = true;
                this.moveHandler = this.onPointerMove;
                if (isTouchEvent(event.originalEvent)) {
                    this.lastTouchEventTime = Date.now();
                }
            }
        }
    }
    onMouseUp = (event) => {
        if (this.isDragStarted) {
            this.onPointerUp(new IMouseEvent(event));
        }
        this.endDragSequence();
    };
    onTouchUp = (event) => {
        if (this.isDragStarted) {
            this.onPointerUp(new ITouchUpEvent(event));
        }
        this.endDragSequence();
    };
    endDragSequence() {
        this.isDragStarted = false;
        this.moveHandler = this.checkDragSequenceToStart;
        this.mouseListeners();
        this.mouseListeners = EventExtensions.emptyListener();
        this.touchListeners();
        this.touchListeners = EventExtensions.emptyListener();
    }
    subscribe(elementToSubscribe) {
        if (this.element) {
            this.unsubscribe();
        }
        this.element = elementToSubscribe;
        this.ngZone.runOutsideAngular(() => {
            this.element.addEventListener('mousedown', this.onMouseDown, EventExtensions.activeListener());
            this.element.addEventListener('touchstart', this.onTouchDown, EventExtensions.passiveListener());
        });
        this.startListeners = () => {
            this.element.removeEventListener('mousedown', this.onMouseDown, EventExtensions.activeListener());
            this.element.removeEventListener('touchstart', this.onTouchDown, EventExtensions.passiveListener());
        };
    }
    unsubscribe() {
        this.startListeners();
        this.startListeners = EventExtensions.emptyListener();
        this.touchListeners();
        this.touchListeners = EventExtensions.emptyListener();
        this.mouseListeners();
        this.mouseListeners = EventExtensions.emptyListener();
    }
    preventDefault = (event) => {
        event.preventDefault();
    };
}
function isTouchEvent(event) {
    return event.type[0] === 't';
}
function isFakeMousedownFromScreenReader(event) {
    return event.buttons === 0 || (event.offsetX === 0 && event.offsetY === 0);
}
function isFakeTouchstartFromScreenReader(event) {
    const touch = (event.touches && event.touches[0]) || (event.changedTouches && event.changedTouches[0]);
    return (!!touch &&
        touch.identifier === -1 &&
        (touch.radiusX == null || touch.radiusX === 1) &&
        (touch.radiusY == null || touch.radiusY === 1));
}

class FDraggableDirective extends FDraggableBase {
    elementReference;
    injector;
    fDraggableState;
    subscriptions$ = new Subscription();
    disabled = false;
    get hostElement() {
        return this.elementReference.nativeElement;
    }
    fMovedTo = new EventEmitter();
    document;
    fBodyCell;
    constructor(elementReference, ngZone, injector, document, fDraggableState) {
        super(ngZone);
        this.elementReference = elementReference;
        this.injector = injector;
        this.fDraggableState = fDraggableState;
        this.document = document;
    }
    ngAfterViewInit() {
        super.subscribe(this.document);
    }
    onPointerDown(event) {
        let result = event.isMouseLeftButton()
            && isDragHandle(event.targetElement)
            && !this.isDragStarted;
        return result;
    }
    prepareDragSequence(event) {
        //TODO: Selection area (for future)
        this.injector.get(FCellItemDragStart).handle(event);
        this.fDraggableState.draggedItems.forEach((item) => {
            item.prepare?.();
        });
        this.hostElement.classList.add('f-dragging');
    }
    onPointerMove(event) {
        const pointerPositionInCanvas = Point.fromPoint(event.getPosition()).elementTransform(this.hostElement);
        const difference = pointerPositionInCanvas.div(this.fDraggableState.onPointerDownScale).sub(this.fDraggableState.onPointerDownPosition);
        this.fDraggableState.draggedItems.forEach((item) => {
            item.move(difference);
        });
        this.fBodyCell?.clearHighlight();
        this.fBodyCell = this.getFBodyCellUnderPointer(event);
        this.fBodyCell?.highlight();
    }
    onPointerUp(event) {
        //TODO: Selection area (for future)
        const dragResult = this.injector.get(GetDragResultHandler).handle();
        if (dragResult.length) {
            const targetCell = this.getFBodyCellUnderPointer(event);
            if (targetCell) {
                this.fMovedTo.emit(new FMoveEvent(dragResult, targetCell.id));
            }
        }
        this.hostElement.classList.remove('f-dragging');
        this.fBodyCell?.clearHighlight();
        this.fDraggableState.reset();
    }
    getFBodyCellUnderPointer(event) {
        return this.injector.get(GetCellUnderPointerHandler).handle(new GetCellUnderPointerRequest(event));
    }
    ngOnDestroy() {
        super.unsubscribe();
        this.subscriptions$.unsubscribe();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FDraggableDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: DOCUMENT }, { token: F_DRAGGABLE_STATE }], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.2.3", type: FDraggableDirective, isStandalone: true, selector: "fDraggable", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { fMovedTo: "fMovedTo" }, host: { properties: { "class.f-disabled": "disabled" } }, providers: [
            FDraggableState,
            { provide: F_DRAGGABLE_STATE, useExisting: FDraggableState },
            GetCellUnderPointerHandler,
            FCellItemDragStart,
            GetDragResultHandler
        ], usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FDraggableDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: "fDraggable",
                    standalone: true,
                    providers: [
                        FDraggableState,
                        { provide: F_DRAGGABLE_STATE, useExisting: FDraggableState },
                        GetCellUnderPointerHandler,
                        FCellItemDragStart,
                        GetDragResultHandler
                    ],
                    host: {
                        '[class.f-disabled]': 'disabled'
                    }
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: FDraggableState, decorators: [{
                    type: Inject,
                    args: [F_DRAGGABLE_STATE]
                }] }], propDecorators: { disabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], fMovedTo: [{
                type: Output
            }] } });

let uniqueId$1 = 0;
class FBodyCellComponent extends FBodyCellBase {
    fDraggableState;
    elementReference;
    uid = `f-body-cell-${uniqueId$1++}`;
    get id() {
        return this._id;
    }
    set id(value) {
        this._id = value || this.uid;
    }
    _id;
    get hostElement() {
        return this.elementReference.nativeElement;
    }
    disabled = false;
    constructor(fDraggableState, elementReference) {
        super();
        this.fDraggableState = fDraggableState;
        this.elementReference = elementReference;
        this.id = this.id;
    }
    ngOnInit() {
        this.fDraggableState.addCell(this);
    }
    ngOnDestroy() {
        this.fDraggableState.removeCell(this);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FBodyCellComponent, deps: [{ token: F_DRAGGABLE_STATE }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.3", type: FBodyCellComponent, isStandalone: true, selector: "f-body-cell", inputs: { id: "id", disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "attr.id": "id", "class.f-disabled": "disabled" }, classAttribute: "f-component f-cell f-body-cell" }, providers: [{
                provide: F_BODY_CELL,
                useExisting: FBodyCellComponent
            }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;flex:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FBodyCellComponent, decorators: [{
            type: Component,
            args: [{ selector: 'f-body-cell', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
                            provide: F_BODY_CELL,
                            useExisting: FBodyCellComponent
                        }], host: {
                        'class': 'f-component f-cell f-body-cell',
                        '[attr.id]': 'id',
                        '[class.f-disabled]': 'disabled'
                    }, template: "<ng-content></ng-content>\r\n\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;flex:1}\n"] }]
        }], ctorParameters: () => [{ type: FDraggableState, decorators: [{
                    type: Inject,
                    args: [F_DRAGGABLE_STATE]
                }] }, { type: i0.ElementRef }], propDecorators: { id: [{
                type: Input
            }], disabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });

class FBodyComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FBodyComponent, isStandalone: true, selector: "f-body", host: { classAttribute: "f-component f-body" }, ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n\r\n\r\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FBodyComponent, decorators: [{
            type: Component,
            args: [{ selector: 'f-body', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'f-component f-body'
                    }, template: "<ng-content></ng-content>\r\n\r\n\r\n\r\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"] }]
        }] });

class FBodyRowComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FBodyRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FBodyRowComponent, isStandalone: true, selector: "f-body-row", host: { classAttribute: "f-component f-body-row" }, ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n\r\n\r\n\r\n", styles: [":host{display:flex;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FBodyRowComponent, decorators: [{
            type: Component,
            args: [{ selector: 'f-body-row', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'f-component f-body-row'
                    }, template: "<ng-content></ng-content>\r\n\r\n\r\n\r\n\r\n", styles: [":host{display:flex;width:100%}\n"] }]
        }] });

class FDragGridComponent {
    fDraggableState;
    elementReference;
    get hostElement() {
        return this.elementReference.nativeElement;
    }
    constructor(fDraggableState, elementReference) {
        this.fDraggableState = fDraggableState;
        this.elementReference = elementReference;
    }
    ngOnInit() {
        this.fDraggableState.setContainerHost(this.hostElement);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FDragGridComponent, deps: [{ token: F_DRAGGABLE_STATE }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FDragGridComponent, isStandalone: true, selector: "f-drag-grid", host: { classAttribute: "f-component f-drag-grid" }, hostDirectives: [{ directive: FDraggableDirective, inputs: ["disabled", "disabled"], outputs: ["fMovedTo", "fMovedTo"] }], ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FDragGridComponent, decorators: [{
            type: Component,
            args: [{ selector: 'f-drag-grid', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{
                            directive: FDraggableDirective,
                            inputs: ['disabled'],
                            outputs: ['fMovedTo'],
                        }], host: {
                        'class': 'f-component f-drag-grid'
                    }, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}\n"] }]
        }], ctorParameters: () => [{ type: FDraggableState, decorators: [{
                    type: Inject,
                    args: [F_DRAGGABLE_STATE]
                }] }, { type: i0.ElementRef }] });

class FCellItemBase {
    highlight() {
        this.hostElement.classList.add('f-dragged');
    }
    clearHighlight() {
        this.hostElement.classList.remove('f-dragged');
    }
}

let uniqueId = 0;
class FCellItemComponent extends FCellItemBase {
    fDraggableState;
    fBodyCell;
    elementReference;
    uid = `f-drag-table-item-${uniqueId++}`;
    get id() {
        return this._id;
    }
    set id(value) {
        this._id = value || this.uid;
    }
    _id;
    get hostElement() {
        return this.elementReference.nativeElement;
    }
    disabled = false;
    get parentId() {
        return this.fBodyCell.id;
    }
    constructor(fDraggableState, fBodyCell, elementReference) {
        super();
        this.fDraggableState = fDraggableState;
        this.fBodyCell = fBodyCell;
        this.elementReference = elementReference;
        this.id = this.id;
    }
    ngOnInit() {
        this.fDraggableState.addItem(this);
    }
    ngOnDestroy() {
        this.fDraggableState.removeItem(this);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FCellItemComponent, deps: [{ token: F_DRAGGABLE_STATE }, { token: F_BODY_CELL }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.3", type: FCellItemComponent, isStandalone: true, selector: "f-cell-item", inputs: { id: "id", disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "attr.id": "id", "class.f-disabled": "disabled" }, classAttribute: "f-component f-cell-item" }, usesInheritance: true, ngImport: i0, template: "\r\n<ng-content></ng-content>\r\n", styles: [":host{display:block;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FCellItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'f-cell-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'f-component f-cell-item',
                        '[attr.id]': 'id',
                        '[class.f-disabled]': 'disabled'
                    }, template: "\r\n<ng-content></ng-content>\r\n", styles: [":host{display:block;width:100%}\n"] }]
        }], ctorParameters: () => [{ type: FDraggableState, decorators: [{
                    type: Inject,
                    args: [F_DRAGGABLE_STATE]
                }] }, { type: FBodyCellBase, decorators: [{
                    type: Inject,
                    args: [F_BODY_CELL]
                }] }, { type: i0.ElementRef }], propDecorators: { id: [{
                type: Input
            }], disabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });

class FHeaderCellComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FHeaderCellComponent, isStandalone: true, selector: "f-header-cell", host: { classAttribute: "f-component f-cell f-header-cell" }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;flex:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FHeaderCellComponent, decorators: [{
            type: Component,
            args: [{ selector: 'f-header-cell', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'f-component f-cell f-header-cell'
                    }, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;flex:1}\n"] }]
        }] });

class FHeaderComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FHeaderComponent, isStandalone: true, selector: "f-header", host: { classAttribute: "f-component f-header" }, ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n\r\n\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FHeaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'f-header', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'f-component f-header'
                    }, template: "<ng-content></ng-content>\r\n\r\n\r\n\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}\n"] }]
        }] });

class FHeaderRowComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FHeaderRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FHeaderRowComponent, isStandalone: true, selector: "f-header-row", host: { classAttribute: "f-component f-header-row" }, ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n\r\n\r\n\r\n", styles: [":host{display:flex;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FHeaderRowComponent, decorators: [{
            type: Component,
            args: [{ selector: 'f-header-row', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'f-component f-header-row'
                    }, template: "<ng-content></ng-content>\r\n\r\n\r\n\r\n\r\n", styles: [":host{display:flex;width:100%}\n"] }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { FBodyCellComponent, FBodyComponent, FBodyRowComponent, FCellItemComponent, FDragGridComponent, FDragHandleDirective, FDraggableDirective, FHeaderCellComponent, FHeaderComponent, FHeaderRowComponent, FMoveEvent, F_DRAG_HANDLE };
//# sourceMappingURL=foblex-ng-drag-grid.mjs.map