@swimlane/ngx-dnd/fesm2022/swimlane-ngx-dnd.mjs

Drag and Drop for Angular2 and beyond!

import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Directive, Input, Output, HostListener, TemplateRef, ViewEncapsulation, Component, ViewChild, ContentChild, HostBinding, NgModule } from '@angular/core';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import dragula from '@swimlane/dragula';

/**
 * Central service that handles all events
 *
 * @export
 */
class DrakeStoreService {
    droppableMap = new WeakMap();
    draggableMap = new WeakMap();
    dragulaOptions;
    drake;
    constructor() {
        this.dragulaOptions = this.createDrakeOptions();
        this.drake = dragula([], this.dragulaOptions);
        this.registerEvents();
    }
    register(droppable) {
        this.droppableMap.set(droppable.container, droppable);
        this.drake.containers.push(droppable.container);
    }
    remove(droppable) {
        this.droppableMap.delete(droppable.container);
        const idx = this.drake.containers.indexOf(droppable.container);
        if (idx > -1) {
            this.drake.containers.splice(idx, 1);
        }
    }
    registerDraggable(draggable) {
        this.draggableMap.set(draggable.element, draggable);
    }
    removeDraggable(draggable) {
        this.draggableMap.delete(draggable.element);
    }
    createDrakeOptions() {
        const accepts = (el, target /*, source: any, sibling: any */) => {
            if (el.contains(target)) {
                return false;
            }
            const elementComponent = this.draggableMap.get(el);
            const targetComponent = this.droppableMap.get(target);
            if (elementComponent && targetComponent) {
                return elementComponent.dropZones.includes(targetComponent.dropZone);
            }
            return true;
        };
        const copy = (_, source) => {
            const sourceComponent = this.droppableMap.get(source);
            if (sourceComponent) {
                return sourceComponent.copy;
            }
            return false;
        };
        const moves = (el, source, handle, sibling) => {
            const elementComponent = this.draggableMap.get(el);
            if (elementComponent) {
                return elementComponent.moves(source, handle, sibling);
            }
            return true;
        };
        const direction = (el, target, source) => {
            const targetComponent = this.droppableMap.get(target);
            return targetComponent.direction || 'vertical';
        };
        return { accepts, copy, moves, revertOnSpill: true, direction };
    }
    registerEvents() {
        let dragElm;
        let draggedItem;
        this.drake.on('drag', (el, source) => {
            draggedItem = undefined;
            dragElm = el;
            if (!el || !source) {
                return;
            }
            if (this.draggableMap.has(el)) {
                const elementComponent = this.draggableMap.get(el);
                draggedItem = elementComponent.model;
                elementComponent.drag.emit({
                    type: 'drag',
                    el,
                    source,
                    value: draggedItem
                });
            }
            if (this.droppableMap.has(source)) {
                const sourceComponent = this.droppableMap.get(source);
                this.dragulaOptions.removeOnSpill = sourceComponent.removeOnSpill;
                sourceComponent.drag.emit({
                    type: 'drag',
                    el,
                    source,
                    sourceComponent,
                    value: draggedItem
                });
            }
        });
        this.drake.on('drop', (el, target, source) => {
            const targetComponent = this.droppableMap.get(target);
            if (!targetComponent) {
                // not a target, abort
                return;
            }
            let dropElmModel = draggedItem;
            const dropIndex = Array.prototype.indexOf.call(target.children, el);
            if (dropIndex < 0) {
                // dropIndex is bad... cancel
                this.drake.cancel(true);
                return;
            }
            const sourceComponent = this.droppableMap.get(source);
            if (sourceComponent) {
                const sourceModel = sourceComponent.model;
                const targetModel = targetComponent.model;
                const hasDragModel = !!(sourceModel && draggedItem);
                const dragIndex = hasDragModel ? sourceModel.indexOf(draggedItem) : -1;
                if (hasDragModel && dragIndex < 0) {
                    // dragIndex is bad... cancel
                    this.drake.cancel(true);
                    return;
                }
                if (targetModel) {
                    const reorder = dragIndex > -1 && sourceModel && target === source;
                    const copy = !sourceModel || dragElm !== el;
                    if (reorder) {
                        sourceModel.splice(dropIndex, 0, sourceModel.splice(dragIndex, 1)[0]);
                    }
                    else {
                        if (el.parentNode === target) {
                            target.removeChild(el);
                        }
                        if (copy) {
                            dropElmModel = JSON.parse(JSON.stringify(dropElmModel));
                        }
                        else {
                            if (el.parentNode !== source) {
                                // add element back, let angular remove it
                                this.drake.cancel(true);
                            }
                            sourceModel.splice(dragIndex, 1);
                        }
                        targetModel.splice(dropIndex, 0, dropElmModel);
                    }
                }
            }
            targetComponent.drop.emit({
                type: 'drop',
                el,
                source,
                value: dropElmModel,
                dropIndex
            });
        });
        this.drake.on('remove', (el, container, source) => {
            if (this.droppableMap.has(source)) {
                const sourceComponent = this.droppableMap.get(source);
                const sourceModel = sourceComponent.model;
                const dragIndex = draggedItem && sourceModel ? sourceModel.indexOf(draggedItem) : -1;
                if (dragIndex > -1) {
                    if (el.parentNode !== source) {
                        // add element back, let angular remove it
                        source.appendChild(el);
                    }
                    sourceModel.splice(dragIndex, 1);
                }
                sourceComponent.remove.emit({
                    type: 'remove',
                    el,
                    container,
                    source,
                    value: draggedItem
                });
            }
        });
        this.drake.on('cancel', (el, container, source) => {
            if (this.droppableMap.has(container)) {
                const containerComponent = this.droppableMap.get(container);
                containerComponent.cancel.emit({
                    type: 'cancel',
                    el,
                    container,
                    source,
                    value: draggedItem
                });
            }
        });
        this.drake.on('over', (el, container, source) => {
            if (this.droppableMap.has(container)) {
                const containerComponent = this.droppableMap.get(container);
                containerComponent.over.emit({
                    type: 'over',
                    el,
                    container,
                    source,
                    value: draggedItem
                });
            }
        });
        this.drake.on('out', (el, container, source) => {
            if (this.droppableMap.has(container)) {
                const containerComponent = this.droppableMap.get(container);
                containerComponent.out.emit({
                    type: 'out',
                    el,
                    container,
                    source,
                    value: draggedItem
                });
            }
        });
    }
    static ɵfac = function DrakeStoreService_Factory(t) { return new (t || DrakeStoreService)(); };
    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: DrakeStoreService, factory: DrakeStoreService.ɵfac, providedIn: 'root' });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrakeStoreService, [{
        type: Injectable,
        args: [{ providedIn: 'root' }]
    }], () => [], null); })();

let i$1 = 10000;
function getNextId$1() {
    return i$1++;
}
/**
 * Makes the container droppable and children draggable.
 *
 * @export
 */
class DroppableDirective {
    el;
    renderer;
    drakesService;
    model;
    copy = false;
    removeOnSpill = false;
    ngxDroppable;
    direction = 'vertical';
    drop = new EventEmitter();
    drag = new EventEmitter();
    over = new EventEmitter();
    out = new EventEmitter();
    remove = new EventEmitter();
    cancel = new EventEmitter();
    get container() {
        return this.el.nativeElement;
    }
    get dropZone() {
        return this._dropZone || this.ngxDroppable || this.defaultZone;
    }
    set dropZone(val) {
        this._dropZone = val;
    }
    defaultZone;
    _dropZone;
    constructor(el, renderer, drakesService) {
        this.el = el;
        this.renderer = renderer;
        this.drakesService = drakesService;
    }
    ngOnInit() {
        this.defaultZone = `@@DefaultDropZone-${getNextId$1()}@@`;
        this.drakesService.register(this);
    }
    ngAfterViewInit() {
        this.over.subscribe(() => {
            this.renderer.addClass(this.container, 'gu-over');
        });
        this.out.subscribe(() => {
            this.renderer.removeClass(this.container, 'gu-over');
        });
    }
    ngOnDestroy() {
        this.drakesService.remove(this);
    }
    static ɵfac = function DroppableDirective_Factory(t) { return new (t || DroppableDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(DrakeStoreService)); };
    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: DroppableDirective, selectors: [["", "ngxDroppable", ""]], inputs: { model: "model", copy: "copy", removeOnSpill: "removeOnSpill", ngxDroppable: "ngxDroppable", direction: "direction", dropZone: "dropZone" }, outputs: { drop: "drop", drag: "drag", over: "over", out: "out", remove: "remove", cancel: "cancel" } });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DroppableDirective, [{
        type: Directive,
        args: [{ selector: '[ngxDroppable]' }]
    }], () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DrakeStoreService }], { model: [{
            type: Input
        }], copy: [{
            type: Input
        }], removeOnSpill: [{
            type: Input
        }], ngxDroppable: [{
            type: Input
        }], direction: [{
            type: Input
        }], drop: [{
            type: Output
        }], drag: [{
            type: Output
        }], over: [{
            type: Output
        }], out: [{
            type: Output
        }], remove: [{
            type: Output
        }], cancel: [{
            type: Output
        }], dropZone: [{
            type: Input
        }] }); })();

/**
 * Adds properties and events to draggable elements
 *
 * @export
 */
class DraggableDirective {
    el;
    drakesService;
    droppableDirective;
    ngxDraggable;
    model;
    get dropZones() {
        return this._dropZones || this.ngxDraggable || this._parentDropzones;
    }
    set dropZones(val) {
        this._dropZones = val;
    }
    _moves = true;
    /*
    ContentChildren doesn't get children created with NgTemplateOutlet
    See https://github.com/angular/angular/issues/14842
    Implemented via updateElements method
  
    @ContentChildren(DragHandleDirective, {descendants: true})
    handlesList: QueryList<DragHandleDirective>; */
    handles = [];
    get hasHandle() {
        return !!this.handles.length;
    }
    drag = new EventEmitter();
    dragDelay = 200; // milliseconds
    dragDelayed = true;
    touchTimeout;
    get element() {
        return this.el.nativeElement;
    }
    _dropZones;
    _parentDropzones;
    constructor(el, drakesService, droppableDirective) {
        this.el = el;
        this.drakesService = drakesService;
        this.droppableDirective = droppableDirective;
    }
    // From: https://github.com/bevacqua/dragula/issues/289#issuecomment-277143172
    onMove(e) {
        if (!this._moves || this.dragDelayed) {
            e.stopPropagation();
            clearTimeout(this.touchTimeout);
        }
    }
    onDown() {
        if (this._moves) {
            this.touchTimeout = setTimeout(() => {
                this.dragDelayed = false;
            }, this.dragDelay);
        }
    }
    onUp() {
        if (this._moves) {
            clearTimeout(this.touchTimeout);
            this.dragDelayed = true;
        }
    }
    ngOnInit() {
        this.update();
    }
    update() {
        this._parentDropzones = [this.droppableDirective.dropZone];
        this.drakesService.registerDraggable(this);
        this.updateElements();
    }
    ngOnDestroy() {
        this.drakesService.removeDraggable(this);
    }
    updateElements() {
        const nativeElement = this.el.nativeElement;
        const handles = nativeElement.querySelectorAll('[ngxdraghandle]');
        this.handles = Array.from(handles).filter((h) => findFirstDraggableParent(h) === nativeElement);
        function findFirstDraggableParent(c) {
            while (c.parentNode) {
                c = c.parentNode;
                if (c.hasAttribute && c.hasAttribute('ngxdraggable')) {
                    return c;
                }
            }
        }
    }
    canMove(source, handle, sibling) {
        if (typeof this._moves === 'boolean')
            return this._moves;
        if (typeof this._moves === 'function')
            return this._moves(this.model, source, handle, sibling);
        return true;
    }
    moves(source, handle, sibling) {
        if (!this.canMove(source, handle, sibling))
            return false;
        return this.hasHandle ? this.handles.some(h => handelFor(handle, h)) : true;
        function handelFor(c, p) {
            if (c === p)
                return true;
            while ((c = c.parentNode) && c !== p)
                ; // tslint:disable-line
            return !!c;
        }
    }
    ngDoCheck() {
        this.updateElements();
    }
    static ɵfac = function DraggableDirective_Factory(t) { return new (t || DraggableDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(DrakeStoreService), i0.ɵɵdirectiveInject(DroppableDirective)); };
    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: DraggableDirective, selectors: [["", "ngxDraggable", ""]], hostBindings: function DraggableDirective_HostBindings(rf, ctx) { if (rf & 1) {
            i0.ɵɵlistener("touchmove", function DraggableDirective_touchmove_HostBindingHandler($event) { return ctx.onMove($event); })("touchstart", function DraggableDirective_touchstart_HostBindingHandler() { return ctx.onDown(); })("touchend", function DraggableDirective_touchend_HostBindingHandler() { return ctx.onUp(); });
        } }, inputs: { ngxDraggable: "ngxDraggable", model: "model", dropZones: "dropZones", _moves: [0, "moves", "_moves"] }, outputs: { drag: "drag" } });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DraggableDirective, [{
        type: Directive,
        args: [{ selector: '[ngxDraggable]' }]
    }], () => [{ type: i0.ElementRef }, { type: DrakeStoreService }, { type: DroppableDirective }], { ngxDraggable: [{
            type: Input
        }], model: [{
            type: Input
        }], dropZones: [{
            type: Input
        }], _moves: [{
            type: Input,
            args: ['moves']
        }], drag: [{
            type: Output
        }], onMove: [{
            type: HostListener,
            args: ['touchmove', ['$event']]
        }], onDown: [{
            type: HostListener,
            args: ['touchstart']
        }], onUp: [{
            type: HostListener,
            args: ['touchend']
        }] }); })();

/**
 * Adds properties and events to drag handle elements
 *
 * @export
 */
class DragHandleDirective {
    static ɵfac = function DragHandleDirective_Factory(t) { return new (t || DragHandleDirective)(); };
    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: DragHandleDirective, selectors: [["", "ngxDragHandle", ""]] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DragHandleDirective, [{
        type: Directive,
        args: [{ selector: '[ngxDragHandle]' }]
    }], null, null); })();

const _c0 = ["*"];
const _c1 = a0 => ({ "gu-empty": a0 });
function ContainerComponent_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵelement(1, "ngx-dnd-item", 3);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const item_r1 = ctx.$implicit;
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵproperty("model", item_r1)("dropZone", ctx_r1.dropZone)("dropZones", ctx_r1.dropZones)("copy", ctx_r1.copy)("moves", ctx_r1.moves)("removeOnSpill", ctx_r1.removeOnSpill)("droppableItemClass", ctx_r1.droppableItemClass);
} }
function ContainerComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵtemplate(1, ContainerComponent_ng_container_1_ng_container_1_Template, 2, 7, "ng-container", 2);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngForOf", ctx_r1.model);
} }
function ContainerComponent_ng_content_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵprojection(0, 0, ["*ngIf", "!model"]);
} }
let i = 0;
function getNextId() {
    return i++;
}
/**
 * Component that allows nested ngxDroppable and ngxDraggables
 *
 * @export
 */
class ContainerComponent {
    model;
    copy = false;
    removeOnSpill = false;
    droppableItemClass;
    dropZone = `@@DefaultDropZone-${getNextId()}@@`;
    get dropZones() {
        return this._dropZones || this._defaultZones;
    }
    set dropZones(val) {
        this._dropZones = val;
    }
    moves;
    // @Input() classes: any = {};
    // @Input() dragulaOptions: any;
    set templateInput(template) {
        this.template = template;
    }
    set templateChild(template) {
        this.template = template;
    }
    template;
    droppable;
    drop = new EventEmitter();
    drag = new EventEmitter();
    over = new EventEmitter();
    out = new EventEmitter();
    remove = new EventEmitter();
    cancel = new EventEmitter();
    _dropZones;
    _defaultZones;
    ngOnInit() {
        this._defaultZones = [this.dropZone];
    }
    ngAfterViewInit() {
        this.droppable.drag.subscribe((v) => this.drag.emit(v));
        this.droppable.drop.subscribe((v) => this.drop.emit(v));
        this.droppable.over.subscribe((v) => this.over.emit(v));
        this.droppable.out.subscribe((v) => this.out.emit(v));
        this.droppable.remove.subscribe((v) => this.remove.emit(v));
        this.droppable.cancel.subscribe((v) => this.cancel.emit(v));
    }
    static ɵfac = function ContainerComponent_Factory(t) { return new (t || ContainerComponent)(); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContainerComponent, selectors: [["ngx-dnd-container"]], contentQueries: function ContainerComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
            i0.ɵɵcontentQuery(dirIndex, TemplateRef, 7);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templateChild = _t.first);
        } }, viewQuery: function ContainerComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(DroppableDirective, 7);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.droppable = _t.first);
        } }, inputs: { model: "model", copy: "copy", removeOnSpill: "removeOnSpill", droppableItemClass: "droppableItemClass", dropZone: "dropZone", dropZones: "dropZones", moves: "moves", templateInput: [0, "template", "templateInput"] }, outputs: { drop: "drop", drag: "drag", over: "over", out: "out", remove: "remove", cancel: "cancel" }, ngContentSelectors: _c0, decls: 3, vars: 9, consts: [["ngxDroppable", "", 1, "ngx-dnd-container", 3, "dropZone", "model", "copy", "ngClass", "removeOnSpill"], [4, "ngIf"], [4, "ngFor", "ngForOf"], ["ngxDraggable", "", 3, "model", "dropZone", "dropZones", "copy", "moves", "removeOnSpill", "droppableItemClass"]], template: function ContainerComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵprojectionDef();
            i0.ɵɵelementStart(0, "div", 0);
            i0.ɵɵtemplate(1, ContainerComponent_ng_container_1_Template, 2, 1, "ng-container", 1)(2, ContainerComponent_ng_content_2_Template, 1, 0, "ng-content", 1);
            i0.ɵɵelementEnd();
        } if (rf & 2) {
            i0.ɵɵproperty("dropZone", ctx.dropZone)("model", ctx.model)("copy", ctx.copy)("ngClass", i0.ɵɵpureFunction1(7, _c1, !(ctx.model == null ? null : ctx.model.length)))("removeOnSpill", ctx.removeOnSpill);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.model);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", !ctx.model);
        } }, styles: [".ngx-dnd-container{background-color:#fff3;border:2px solid red;margin:10px;padding:10px}.ngx-dnd-container.gu-empty{border:2px dotted red}.ngx-dnd-container:nth-child(odd){background-color:#0003}.ngx-dnd-container .ex-moved{background-color:#e74c3c}.ngx-dnd-container .ex-over{background-color:#ffffff4d}.ngx-dnd-container .handle{padding:0 5px;margin-right:5px;background-color:#0006;cursor:move}.no-select{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.clearfix:after{content:\" \";display:block;height:0;clear:both}\n"], encapsulation: 2 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContainerComponent, [{
        type: Component,
        args: [{ selector: 'ngx-dnd-container', encapsulation: ViewEncapsulation.None, template: "<div\n  ngxDroppable\n  [dropZone]=\"dropZone\"\n  [model]=\"model\"\n  [copy]=\"copy\"\n  [ngClass]=\"{ 'gu-empty': !model?.length }\"\n  [removeOnSpill]=\"removeOnSpill\"\n  class=\"ngx-dnd-container\"\n>\n  <ng-container *ngIf=\"model\">\n    <ng-container *ngFor=\"let item of model\">\n      <ngx-dnd-item\n        ngxDraggable\n        [model]=\"item\"\n        [dropZone]=\"dropZone\"\n        [dropZones]=\"dropZones\"\n        [copy]=\"copy\"\n        [moves]=\"moves\"\n        [removeOnSpill]=\"removeOnSpill\"\n        [droppableItemClass]=\"droppableItemClass\"\n      >\n      </ngx-dnd-item>\n    </ng-container>\n  </ng-container>\n  <ng-content *ngIf=\"!model\"></ng-content>\n</div>\n", styles: [".ngx-dnd-container{background-color:#fff3;border:2px solid red;margin:10px;padding:10px}.ngx-dnd-container.gu-empty{border:2px dotted red}.ngx-dnd-container:nth-child(odd){background-color:#0003}.ngx-dnd-container .ex-moved{background-color:#e74c3c}.ngx-dnd-container .ex-over{background-color:#ffffff4d}.ngx-dnd-container .handle{padding:0 5px;margin-right:5px;background-color:#0006;cursor:move}.no-select{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.clearfix:after{content:\" \";display:block;height:0;clear:both}\n"] }]
    }], null, { model: [{
            type: Input
        }], copy: [{
            type: Input
        }], removeOnSpill: [{
            type: Input
        }], droppableItemClass: [{
            type: Input
        }], dropZone: [{
            type: Input
        }], dropZones: [{
            type: Input
        }], moves: [{
            type: Input
        }], templateInput: [{
            type: Input,
            args: ['template']
        }], templateChild: [{
            type: ContentChild,
            args: [TemplateRef, { static: true }]
        }], droppable: [{
            type: ViewChild,
            args: [DroppableDirective, { static: true }]
        }], drop: [{
            type: Output
        }], drag: [{
            type: Output
        }], over: [{
            type: Output
        }], out: [{
            type: Output
        }], remove: [{
            type: Output
        }], cancel: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ContainerComponent, { className: "ContainerComponent" }); })();

function ItemComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵelement(1, "ngx-dnd-container", 3);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵproperty("model", ctx_r0.model)("template", ctx_r0.container.template)("dropZone", ctx_r0.dropZone)("dropZones", ctx_r0.dropZones)("removeOnSpill", ctx_r0.removeOnSpill)("droppableItemClass", ctx_r0.droppableItemClass)("copy", ctx_r0.copy);
} }
function ItemComponent_ng_container_2_1_ng_template_0_Template(rf, ctx) { }
function ItemComponent_ng_container_2_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtemplate(0, ItemComponent_ng_container_2_1_ng_template_0_Template, 0, 0, "ng-template", 5);
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.container.template)("ngTemplateOutletContext", ctx_r0.data);
} }
function ItemComponent_ng_container_2_ng_container_2_ngx_dnd_container_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "ngx-dnd-container", 3);
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext(3);
    i0.ɵɵproperty("model", ctx_r0.model.children)("template", ctx_r0.container.template)("dropZone", ctx_r0.dropZone)("dropZones", ctx_r0.dropZones)("removeOnSpill", ctx_r0.removeOnSpill)("droppableItemClass", ctx_r0.droppableItemClass)("copy", ctx_r0.copy);
} }
function ItemComponent_ng_container_2_ng_container_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵelementStart(1, "div", 6);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(3, ItemComponent_ng_container_2_ng_container_2_ngx_dnd_container_3_Template, 1, 7, "ngx-dnd-container", 7);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", ctx_r0.model.label, " ");
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r0.model.children);
} }
function ItemComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵtemplate(1, ItemComponent_ng_container_2_1_Template, 1, 2, null, 4)(2, ItemComponent_ng_container_2_ng_container_2_Template, 4, 2, "ng-container", 4);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r0.container.template);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", !ctx_r0.container.template);
} }
function ItemComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0);
} }
function ItemComponent_ng_container_4_1_ng_template_0_Template(rf, ctx) { }
function ItemComponent_ng_container_4_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtemplate(0, ItemComponent_ng_container_4_1_ng_template_0_Template, 0, 0, "ng-template", 5);
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.container.template)("ngTemplateOutletContext", ctx_r0.data);
} }
function ItemComponent_ng_container_4_div_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 6);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", ctx_r0.model, " ");
} }
function ItemComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainerStart(0);
    i0.ɵɵtemplate(1, ItemComponent_ng_container_4_1_Template, 1, 2, null, 4)(2, ItemComponent_ng_container_4_div_2_Template, 2, 1, "div", 8);
    i0.ɵɵelementContainerEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r0.container.template);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", !ctx_r0.container.template);
} }
/**
 * Component that allows nested ngxDroppable and ngxDraggables
 * Should only be use inside a ngx-dnd-container
 * Outside a ngx-dnd-container use ngxDroppable
 *
 * @export
 */
class ItemComponent {
    container;
    draggableDirective;
    model;
    get dropZone() {
        return this._dropZone || this.container.dropZone;
    }
    set dropZone(val) {
        this._dropZone = val;
    }
    get dropZones() {
        return this._dropZones || this.container.dropZones;
    }
    set dropZones(val) {
        this._dropZones = val;
    }
    get droppableItemClass() {
        return this._droppableItemClass || this.container.droppableItemClass;
    }
    set droppableItemClass(val) {
        this._droppableItemClass = val;
    }
    get removeOnSpill() {
        return typeof this._removeOnSpill === 'boolean' ? this._removeOnSpill : this.container.removeOnSpill;
    }
    set removeOnSpill(val) {
        this._removeOnSpill = val;
    }
    get copy() {
        return typeof this._copy === 'boolean' ? this._copy : this.container.copy;
    }
    set copy(val) {
        this._copy = val;
    }
    _copy = false;
    _dropZone;
    _dropZones;
    _droppableItemClass;
    _removeOnSpill = false;
    data;
    get hasHandle() {
        return this.draggableDirective.hasHandle;
    }
    get moveDisabled() {
        return !this.draggableDirective.canMove();
    }
    get classString() {
        const itemClass = typeof this.droppableItemClass === 'function' ? this.droppableItemClass(this.model) : this.droppableItemClass;
        const classes = ['ngx-dnd-item', itemClass || ''];
        if (this.moveDisabled) {
            classes.push('move-disabled');
        }
        if (this.hasHandle) {
            classes.push('has-handle');
        }
        return classes.join(' ');
    }
    get type() {
        if (Array.isArray(this.model)) {
            return 'array';
        }
        return typeof this.model;
    }
    constructor(container, draggableDirective) {
        this.container = container;
        this.draggableDirective = draggableDirective;
    }
    ngOnInit() {
        this.data = {
            model: this.model,
            type: this.type,
            dropZone: this.dropZone,
            template: this.container.template
        };
    }
    static ɵfac = function ItemComponent_Factory(t) { return new (t || ItemComponent)(i0.ɵɵdirectiveInject(ContainerComponent), i0.ɵɵdirectiveInject(DraggableDirective)); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ItemComponent, selectors: [["ngx-dnd-item"]], hostVars: 2, hostBindings: function ItemComponent_HostBindings(rf, ctx) { if (rf & 2) {
            i0.ɵɵclassMap(ctx.classString);
        } }, inputs: { model: "model", dropZone: "dropZone", dropZones: "dropZones", droppableItemClass: "droppableItemClass", removeOnSpill: "removeOnSpill", copy: "copy" }, decls: 5, vars: 4, consts: [[3, "ngSwitch"], [4, "ngSwitchCase"], [4, "ngSwitchDefault"], [3, "model", "template", "dropZone", "dropZones", "removeOnSpill", "droppableItemClass", "copy"], [4, "ngIf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "ngx-dnd-content"], [3, "model", "template", "dropZone", "dropZones", "removeOnSpill", "droppableItemClass", "copy", 4, "ngIf"], ["class", "ngx-dnd-content", 4, "ngIf"]], template: function ItemComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementContainerStart(0, 0);
            i0.ɵɵtemplate(1, ItemComponent_ng_container_1_Template, 2, 7, "ng-container", 1)(2, ItemComponent_ng_container_2_Template, 3, 2, "ng-container", 1)(3, ItemComponent_ng_container_3_Template, 1, 0, "ng-container", 1)(4, ItemComponent_ng_container_4_Template, 3, 2, "ng-container", 2);
            i0.ɵɵelementContainerEnd();
        } if (rf & 2) {
            i0.ɵɵproperty("ngSwitch", ctx.type);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngSwitchCase", "array");
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngSwitchCase", "object");
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngSwitchCase", "undefined");
        } }, dependencies: [i3.NgIf, i3.NgTemplateOutlet, i3.NgSwitch, i3.NgSwitchCase, i3.NgSwitchDefault, ContainerComponent], styles: [".ngx-dnd-box,.ngx-dnd-item{margin:10px;padding:10px;background-color:#0003;transition:opacity .4s ease-in-out;border:1px solid lightblue;display:block}.ngx-dnd-box:not(.has-handle):not(.move-disabled),.ngx-dnd-box.has-handle [ngxdraghandle],.ngx-dnd-box.has-handle [ngxDragHandle],.ngx-dnd-item:not(.has-handle):not(.move-disabled),.ngx-dnd-item.has-handle [ngxdraghandle],.ngx-dnd-item.has-handle [ngxDragHandle]{cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.ngx-dnd-box .ngx-dnd-content,.ngx-dnd-item .ngx-dnd-content{-webkit-user-select:none;user-select:none}.ngx-dnd-box:hover,.ngx-dnd-item:hover{border:1px solid blue}.ngx-dnd-box{height:40px;width:40px;line-height:20px;text-align:center;float:left}.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)\";filter:alpha(opacity=80)}.gu-hide{display:none!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)\";filter:alpha(opacity=20)}\n"], encapsulation: 2 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ItemComponent, [{
        type: Component,
        args: [{ selector: 'ngx-dnd-item', encapsulation: ViewEncapsulation.None, template: "<ng-container [ngSwitch]=\"type\">\n  <ng-container *ngSwitchCase=\"'array'\">\n    <ngx-dnd-container\n      [model]=\"model\"\n      [template]=\"container.template\"\n      [dropZone]=\"dropZone\"\n      [dropZones]=\"dropZones\"\n      [removeOnSpill]=\"removeOnSpill\"\n      [droppableItemClass]=\"droppableItemClass\"\n      [copy]=\"copy\"\n    >\n    </ngx-dnd-container>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'object'\">\n    <ng-template *ngIf=\"container.template\" [ngTemplateOutlet]=\"container.template\" [ngTemplateOutletContext]=\"data\">\n    </ng-template>\n    <ng-container *ngIf=\"!container.template\">\n      <div class=\"ngx-dnd-content\">\n        {{ model.label }}\n      </div>\n      <ngx-dnd-container\n        *ngIf=\"model.children\"\n        [model]=\"model.children\"\n        [template]=\"container.template\"\n        [dropZone]=\"dropZone\"\n        [dropZones]=\"dropZones\"\n        [removeOnSpill]=\"removeOnSpill\"\n        [droppableItemClass]=\"droppableItemClass\"\n        [copy]=\"copy\"\n      >\n      </ngx-dnd-container>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'undefined'\"> </ng-container>\n\n  <ng-container *ngSwitchDefault>\n    <ng-template *ngIf=\"container.template\" [ngTemplateOutlet]=\"container.template\" [ngTemplateOutletContext]=\"data\">\n    </ng-template>\n    <div *ngIf=\"!container.template\" class=\"ngx-dnd-content\">\n      {{ model }}\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".ngx-dnd-box,.ngx-dnd-item{margin:10px;padding:10px;background-color:#0003;transition:opacity .4s ease-in-out;border:1px solid lightblue;display:block}.ngx-dnd-box:not(.has-handle):not(.move-disabled),.ngx-dnd-box.has-handle [ngxdraghandle],.ngx-dnd-box.has-handle [ngxDragHandle],.ngx-dnd-item:not(.has-handle):not(.move-disabled),.ngx-dnd-item.has-handle [ngxdraghandle],.ngx-dnd-item.has-handle [ngxDragHandle]{cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.ngx-dnd-box .ngx-dnd-content,.ngx-dnd-item .ngx-dnd-content{-webkit-user-select:none;user-select:none}.ngx-dnd-box:hover,.ngx-dnd-item:hover{border:1px solid blue}.ngx-dnd-box{height:40px;width:40px;line-height:20px;text-align:center;float:left}.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)\";filter:alpha(opacity=80)}.gu-hide{display:none!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)\";filter:alpha(opacity=20)}\n"] }]
    }], () => [{ type: ContainerComponent }, { type: DraggableDirective }], { model: [{
            type: Input
        }], dropZone: [{
            type: Input
        }], dropZones: [{
            type: Input
        }], droppableItemClass: [{
            type: Input
        }], removeOnSpill: [{
            type: Input
        }], copy: [{
            type: Input
        }], classString: [{
            type: HostBinding,
            args: ['class']
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ItemComponent, { className: "ItemComponent" }); })();

const components = [ContainerComponent, ItemComponent];
const directives = [DraggableDirective, DroppableDirective, DragHandleDirective];
class NgxDnDModule {
    static forRoot() {
        return {
            ngModule: NgxDnDModule,
            providers: [DrakeStoreService]
        };
    }
    static ɵfac = function NgxDnDModule_Factory(t) { return new (t || NgxDnDModule)(); };
    static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: NgxDnDModule });
    static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgxDnDModule, [{
        type: NgModule,
        args: [{
                imports: [CommonModule],
                declarations: [...components, ...directives],
                exports: [...components, ...directives]
            }]
    }], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(NgxDnDModule, { declarations: [ContainerComponent, ItemComponent, DraggableDirective, DroppableDirective, DragHandleDirective], imports: [CommonModule], exports: [ContainerComponent, ItemComponent, DraggableDirective, DroppableDirective, DragHandleDirective] }); })();
i0.ɵɵsetComponentScope(ContainerComponent, [i3.NgClass, i3.NgForOf, i3.NgIf, ItemComponent, DraggableDirective, DroppableDirective], []);

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

export { ContainerComponent, DragHandleDirective, DraggableDirective, DrakeStoreService, DroppableDirective, ItemComponent, NgxDnDModule };
//# sourceMappingURL=swimlane-ngx-dnd.mjs.map