@fundamental-ngx/cdk 0.40.0-rc.8 → 0.40.0

package/fesm2020/fundamental-ngx-cdk-utils.mjs

@@ -1,16 +1,17 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, Optional, Inject, isDevMode, inject, Directive, EventEmitter, Input, Output, HostListener, NgModule, ContentChildren, forwardRef, HostBinding, ElementRef, INJECTOR, ContentChild, Self, SkipSelf, PLATFORM_ID, Injector, NgModuleFactory, Pipe } from '@angular/core';
 import { DOCUMENT, CommonModule, AsyncPipe } from '@angular/common';
-import { BehaviorSubject, Subject, fromEvent, Observable, NEVER, Subscription, merge, ReplaySubject, takeUntil as takeUntil$1, startWith as startWith$1, switchMap, combineLatest, firstValueFrom, filter as filter$1, of } from 'rxjs';
+import { BehaviorSubject, Subject, fromEvent, Observable, NEVER, Subscription, merge, ReplaySubject, takeUntil as takeUntil$1, startWith as startWith$1, switchMap, combineLatest, firstValueFrom, filter as filter$1, map as map$1, of } from 'rxjs';
 import * as i2 from '@angular/platform-browser';
 import { EVENT_MANAGER_PLUGINS } from '@angular/platform-browser';
 import * as i1 from '@angular/router';
-import { takeUntil, filter, take, distinctUntilChanged, debounceTime, map, mapTo, pairwise, tap, startWith, finalize, shareReplay, delay } from 'rxjs/operators';
+import { takeUntil, filter, take, distinctUntilChanged, debounceTime, map, mapTo, pairwise, tap, startWith, finalize, shareReplay, switchMap as switchMap$1, delay } from 'rxjs/operators';
 import { RIGHT_ARROW, DOWN_ARROW, LEFT_ARROW, UP_ARROW, SPACE, ESCAPE, DELETE, ENTER, MAC_ENTER, TAB, HOME, END, ALT, CONTROL, META, SHIFT, BACKSPACE, A, C, V, X, PAGE_UP, PAGE_DOWN, DASH, NUMPAD_MINUS, NUMPAD_ZERO, NUMPAD_ONE, NUMPAD_TWO, NUMPAD_THREE, NUMPAD_FOUR, NUMPAD_FIVE, NUMPAD_SIX, NUMPAD_SEVEN, NUMPAD_EIGHT, NUMPAD_NINE, F2, hasModifierKey } from '@angular/cdk/keycodes';
 import { coerceBooleanProperty, coerceNumberProperty, coerceElement, coerceArray, coerceCssPixelValue } from '@angular/cdk/coercion';
 import * as i1$1 from '@angular/cdk/a11y';
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import * as i1$2 from '@angular/cdk/overlay';
+import { ViewportRuler } from '@angular/cdk/overlay';
 import { createFocusTrap } from 'focus-trap';
 import * as i1$3 from '@angular/cdk/observers';
 import { findLastIndex, get } from 'lodash-es';
@@ -2643,18 +2644,17 @@ class ResizeObserverService {
      * new one if not.
      */
     _observeElement(element) {
-        const observedElement = this._observedElements.get(element);
+        let observedElement = this._observedElements.get(element);
         if (!observedElement) {
             const stream = new Subject();
             const observer = this._resizeObserverFactory.create((mutations) => stream.next(mutations));
             if (observer) {
                 observer.observe(element);
             }
-            this._observedElements.set(element, { observer, stream, count: 1 });
-        }
-        else {
-            observedElement.count++;
+            observedElement = { observer, stream, count: 0 };
+            this._observedElements.set(element, observedElement);
         }
+        observedElement.count++;
         return observedElement?.stream;
     }
     /**
@@ -2666,8 +2666,7 @@ class ResizeObserverService {
         if (!observedElement) {
             return;
         }
-        observedElement.count--;
-        if (!observedElement.count) {
+        if (!--observedElement.count) {
             return;
         }
         this._cleanupObserver(element);
@@ -4040,15 +4039,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 }] }]; } });
 
 /** @hidden */
-function setDisabledState(element, isDisabled) {
+function setDisabledState(element, isDisabled, disabledClass, addDisabledClass) {
     const htmlElement = getNativeElement(element);
     if (isDisabled) {
-        htmlElement.classList.add('is-disabled');
+        if (addDisabledClass) {
+            htmlElement.classList.add(disabledClass);
+        }
         htmlElement.setAttribute('disabled', '');
         htmlElement.setAttribute('aria-disabled', 'true');
     }
     else {
-        htmlElement.classList.remove('is-disabled');
+        htmlElement.classList.remove(disabledClass);
         htmlElement.removeAttribute('disabled');
         htmlElement.removeAttribute('aria-disabled');
     }
@@ -4295,13 +4296,21 @@ class DisabledBehaviorDirective extends ReplaySubject {
         this._elementRef = _elementRef;
         this._destroy$ = _destroy$;
         this._clicked = _clicked;
+        /**
+         * Whether to add `disabledClass` class to the element.
+         */
+        this.addDisabledClass = true;
+        /**
+         * Disabled css class to apply to the element.
+         */
+        this.disabledClass = 'is-disabled';
         /** @hidden */
         this._disabled = false;
         /** @hidden */
         this._fdkDisableInput$ = new BehaviorSubject(false);
         /** @hidden */
         this.setDisabledState = (isDisabled) => {
-            setDisabledState(this._elementRef, isDisabled);
+            setDisabledState(this._elementRef, isDisabled, this.disabledClass, this.addDisabledClass);
         };
     }
     /** @hidden */
@@ -4320,7 +4329,7 @@ class DisabledBehaviorDirective extends ReplaySubject {
     }
 }
 DisabledBehaviorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: DisabledBehaviorDirective, deps: [{ token: i0.ElementRef }, { token: DestroyedService }, { token: FdkClickedProvider }], target: i0.ɵɵFactoryTarget.Directive });
-DisabledBehaviorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: DisabledBehaviorDirective, isStandalone: true, selector: "[fdkDisabled]", inputs: { fdkDisabled: "fdkDisabled" }, providers: [
+DisabledBehaviorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: DisabledBehaviorDirective, isStandalone: true, selector: "[fdkDisabled]", inputs: { fdkDisabled: "fdkDisabled", addDisabledClass: "addDisabledClass", disabledClass: "disabledClass" }, providers: [
         {
             provide: FDK_DISABLED_DIRECTIVE,
             useExisting: DisabledBehaviorDirective
@@ -4344,6 +4353,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DestroyedService }, { type: FdkClickedProvider }]; }, propDecorators: { fdkDisabled: [{
                 type: Input
+            }], addDisabledClass: [{
+                type: Input
+            }], disabledClass: [{
+                type: Input
             }] } });
 
 class DisabledBehaviorModule {
@@ -4365,7 +4378,7 @@ class DefaultDisabledViewModifier {
         this.elementRef = elementRef;
         /** @hidden */
         this.setDisabledState = (isDisabled) => {
-            setDisabledState(this.elementRef, isDisabled);
+            setDisabledState(this.elementRef, isDisabled, 'is-disabled', true);
         };
     }
 }
@@ -4854,18 +4867,228 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 }]
         }] });
 
+/**
+ * Injection token for the viewport size observable.
+ * Emits the viewport size in pixels, which are outputted by the ViewportRuler
+ * from @angular/cdk/overlay.
+ */
+const ViewportSizeObservable = new InjectionToken('ViewportSizeObservable', {
+    providedIn: 'root',
+    factory: () => {
+        const viewportRuler = inject(ViewportRuler);
+        return viewportRuler
+            .change(50)
+            .pipe(map$1((e) => e.target.innerWidth))
+            .pipe(startWith(window.innerWidth));
+    }
+});
+
+const ResponsiveBreakpoints = {
+    S: 600,
+    M: 1024,
+    L: 1440
+};
+/** @hidden */
+function getBreakpointName(width) {
+    if (width < ResponsiveBreakpoints.S) {
+        return 'S';
+    }
+    if (width < ResponsiveBreakpoints.M) {
+        return 'M';
+    }
+    if (width < ResponsiveBreakpoints.L) {
+        return 'L';
+    }
+    return 'XL';
+}
+
+/* eslint-disable @angular-eslint/no-input-rename */
+/**
+ * Directive to show/hide element on specific breakpoint or range of window width.
+ * Uses native ngIf directive to show/hide element.
+ */
+class BreakpointDirective {
+    /**
+     * Provide list of the breakpoints to show element on.
+     * */
+    set fdkBreakpoint(value) {
+        const providedValues = value.map((v) => v.toLowerCase());
+        this.showOnS = providedValues.includes('s');
+        this.showOnM = providedValues.includes('m');
+        this.showOnL = providedValues.includes('l');
+        this.showOnXL = providedValues.includes('xl');
+    }
+    /**
+     * Show element on S breakpoint.
+     * S - 0 - 599px
+     * */
+    set showOnS(value) {
+        this._showOnS = coerceBooleanProperty(value);
+    }
+    /**
+     * Show element on M breakpoint.
+     * M - 0 - 1023px
+     * */
+    set showOnM(value) {
+        this._showOnM = coerceBooleanProperty(value);
+    }
+    /**
+     * Show element on L breakpoint.
+     * L - 0 - 1439px
+     * */
+    set showOnL(value) {
+        this._showOnL = coerceBooleanProperty(value);
+    }
+    /**
+     * Show element on XL breakpoint.
+     *  */
+    set showOnXL(value) {
+        this._showOnXL = coerceBooleanProperty(value);
+    }
+    /**
+     * Observe element width changes.
+     */
+    set observationSource(value) {
+        const element = coerceElement(value);
+        this._sizeObservable$.next(this._resizeObserverService.observe(value).pipe(map(() => element.offsetWidth), startWith(element.offsetWidth)));
+    }
+    /** @hidden */
+    constructor(templateRef, viewContainer) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+        /** @hidden */
+        this._showOnS = false;
+        /** @hidden */
+        this._showOnM = false;
+        /** @hidden */
+        this._showOnL = false;
+        /** @hidden */
+        this._showOnXL = false;
+        /** @hidden */
+        this.viewportSize$ = inject(ViewportSizeObservable);
+        /** @hidden */
+        this._destroyed$ = inject(DestroyedService);
+        /** @hidden */
+        this._resizeObserverService = inject(ResizeObserverService);
+        /** @hidden */
+        this.onChanges$ = new Subject();
+        /** @hidden */
+        this._sizeObservable$ = new BehaviorSubject(this.viewportSize$);
+    }
+    /** @hidden */
+    ngAfterViewInit() {
+        combineLatest([this._sizeObservable$.pipe(switchMap$1((obs$) => obs$)), this.onChanges$.pipe(startWith(void 0))])
+            .pipe(map(([w]) => [w, getBreakpointName(w)]), map(([width, breakpointName]) => this._shouldShow(width, breakpointName)), tap((shouldShow) => {
+            if (shouldShow) {
+                if (!this.templateViewRef) {
+                    this.viewContainer.clear();
+                    this.templateViewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+                    this.templateViewRef.detectChanges();
+                }
+            }
+            else {
+                this.viewContainer.clear();
+                this.templateViewRef = undefined;
+            }
+        }), takeUntil(this._destroyed$), finalize(() => {
+            this.viewContainer.clear();
+            this.templateViewRef = undefined;
+        }))
+            .subscribe();
+    }
+    /** @hidden */
+    ngOnChanges() {
+        this.onChanges$.next();
+    }
+    /** @hidden */
+    _shouldShow(width, currentBreakpoint) {
+        const shouldShowOnBreakpoints = [
+            this._showOnS && 'S',
+            this._showOnM && 'M',
+            this._showOnL && 'L',
+            this._showOnXL && 'XL'
+        ].filter(Boolean);
+        const shouldShow = shouldShowOnBreakpoints.includes(currentBreakpoint);
+        if (this.fdkBreakpointLt) {
+            return width < this.fdkBreakpointLt;
+        }
+        if (this.fdkBreakpointGt) {
+            return width > this.fdkBreakpointGt;
+        }
+        return shouldShow;
+    }
+}
+BreakpointDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: BreakpointDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+BreakpointDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: BreakpointDirective, isStandalone: true, selector: "[fdkBreakpoint], [fdkBreakpointS], [fdkBreakpointM], [fdkBreakpointL], [fdkBreakpointXL], [fdkBreakpointLt], [fdkBreakpointGt]", inputs: { fdkBreakpoint: "fdkBreakpoint", showOnS: ["fdkBreakpointS", "showOnS"], showOnM: ["fdkBreakpointM", "showOnM"], showOnL: ["fdkBreakpointL", "showOnL"], showOnXL: ["fdkBreakpointXL", "showOnXL"], fdkBreakpointLt: "fdkBreakpointLt", fdkBreakpointGt: "fdkBreakpointGt", observationSource: ["fdkBreakpointObserve", "observationSource"] }, providers: [DestroyedService], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: BreakpointDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdkBreakpoint], [fdkBreakpointS], [fdkBreakpointM], [fdkBreakpointL], [fdkBreakpointXL], [fdkBreakpointLt], [fdkBreakpointGt]',
+                    standalone: true,
+                    providers: [DestroyedService]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { fdkBreakpoint: [{
+                type: Input
+            }], showOnS: [{
+                type: Input,
+                args: ['fdkBreakpointS']
+            }], showOnM: [{
+                type: Input,
+                args: ['fdkBreakpointM']
+            }], showOnL: [{
+                type: Input,
+                args: ['fdkBreakpointL']
+            }], showOnXL: [{
+                type: Input,
+                args: ['fdkBreakpointXL']
+            }], fdkBreakpointLt: [{
+                type: Input
+            }], fdkBreakpointGt: [{
+                type: Input
+            }], observationSource: [{
+                type: Input,
+                args: ['fdkBreakpointObserve']
+            }] } });
+class BreakpointModule {
+}
+BreakpointModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: BreakpointModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BreakpointModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.1", ngImport: i0, type: BreakpointModule, imports: [BreakpointDirective], exports: [BreakpointDirective] });
+BreakpointModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: BreakpointModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: BreakpointModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [BreakpointDirective],
+                    exports: [BreakpointDirective]
+                }]
+        }] });
+
 const DND_ITEM = new InjectionToken('Drag and drop Item');
 const DND_LIST = new InjectionToken('Drag and drop List');
 
 class DndListDirective {
     constructor() {
         /**
-         * Defines if the the element is allowed to be dragged in 2 dimensions,
+         * Defines if the element is allowed to be dragged in 2 dimensions,
          * When true - replace indicator will be displayed vertically
          */
         this.gridMode = false;
-        /** When enabled, replace indicator will appear on whole element, instead of horizontal/vertical line before/after element */
-        this.replaceMode = false;
+        /**
+         * Defines drop strategy:
+         * * `shift` mode will create line after closest drop element.
+         * * `group` mode will create replace indicator on whole closest drop element.
+         * * `auto` mode will create line after closest drop element,
+         * if dragged element coordinates are shifted for 30% from center of the closest drop element.
+         * Otherwise, it will create replace indicator on whole closest drop element.
+         *
+         * `shift` mode is the default.
+         */
+        this.dropMode = 'shift';
+        /**
+         * Threshold of dragged item over another item to define which type of `dropMode` should be used.
+         */
+        this.threshold = 0.3;
+        /** @hidden */
+        this._replaceMode = false;
         /** Event that is thrown, when items are reordered */
         this.itemsChange = new EventEmitter();
         /** Event that is thrown, when the item is dropped */
@@ -4880,6 +5103,27 @@ class DndListDirective {
         this._onDestroy$ = new Subject();
         /** @hidden */
         this._draggable = true;
+        /** @hidden */
+        this._initialClass = 'fd-dnd-list';
+        /** @hidden */
+        this._linesRemoved = true;
+        /** @hidden */
+        this._indicatorsRemoved = true;
+    }
+    /**
+     * @deprecated
+     * Use `dropMode` property for better configuration.
+     *
+     * @description
+     * When enabled, replace indicator will appear on whole element, instead of horizontal/vertical line before/after element.
+     */
+    set replaceMode(value) {
+        this._replaceMode = value;
+        this.dropMode = value ? 'group' : 'shift';
+        this._detectedDropMode = this.dropMode;
+    }
+    get replaceMode() {
+        return this._replaceMode;
     }
     /** Defines if drag and drop feature should be enabled for list items */
     set draggable(draggable) {
@@ -4914,8 +5158,11 @@ class DndListDirective {
         if (!closestItem) {
             closestItemIndex = null;
         }
-        /** If the closest element is different than the old one, new one is picked. It prevents from performance issues */
-        if ((closestItemIndex || closestItemIndex === 0) && closestItemIndex !== this._closestItemIndex) {
+        /** If the closest element is different from the old one, new one is picked. It prevents from performance issues */
+        if ((closestItemIndex || closestItemIndex === 0) &&
+            (closestItemIndex !== this._closestItemIndex || this.dropMode === 'auto')) {
+            this._removeAllLines();
+            this._removeAllReplaceIndicators();
             this._closestItemIndex = closestItemIndex;
             this._closestItemPosition = this._elementsCoordinates[closestItemIndex].position;
             // If closest item index is same as dragged item, just remove indicators
@@ -4925,18 +5172,21 @@ class DndListDirective {
                 return;
             }
             /** Generating line, that shows where the element will be placed, on drop */
-            if (this.replaceMode) {
+            if (this.dropMode === 'group') {
                 this._createReplaceIndicator(this._closestItemIndex);
             }
-            else {
+            else if (this.dropMode === 'shift') {
                 this._createLine(this._closestItemIndex, this._closestItemPosition);
             }
+            else {
+                this._selectDropModeIndicator(draggedItemIndex, closestItem, closestItemIndex);
+            }
         }
     }
     /** Method called, when element is started to be dragged */
     dragStart(index) {
         const draggedItemElement = this._dndItemReference[index].elementRef;
-        /** Counting all of the elements's chords */
+        /** Counting all the element's chords */
         this._elementsCoordinates = this._dndItemReference.map((item) => item.getElementCoordinates(this._isBefore(draggedItemElement, item.elementRef), this.gridMode));
     }
     /** Method called, when element is released */
@@ -4963,7 +5213,9 @@ class DndListDirective {
             this.itemDropped.emit({
                 replacedItemIndex,
                 draggedItemIndex,
-                items
+                items,
+                insertAt: this._closestItemPosition,
+                mode: this.dropMode !== 'auto' ? this.dropMode : this._detectedDropMode
             });
             this._removeAllLines();
             this._removeAllReplaceIndicators();
@@ -4974,21 +5226,54 @@ class DndListDirective {
         }
     }
     /** @hidden */
+    _selectDropModeIndicator(draggedItemIndex, closestItem, closestItemIndex) {
+        if (!closestItem || !this._dndItemReference[draggedItemIndex]) {
+            return;
+        }
+        let newDetectedDropMode;
+        const draggedElmCoords = this._dndItemReference[draggedItemIndex].elementRef.nativeElement.getBoundingClientRect();
+        const closestItemBoundaries = getElementBoundaries(closestItem, this.threshold);
+        const draggedItemStartCoords = getElementStartCoords(draggedElmCoords, closestItem.position);
+        if (_between(draggedItemStartCoords.x, closestItemBoundaries.x.start, closestItemBoundaries.x.end) &&
+            _between(draggedItemStartCoords.y, closestItemBoundaries.y.start, closestItemBoundaries.y.end)) {
+            newDetectedDropMode = 'group';
+        }
+        else {
+            newDetectedDropMode = 'shift';
+        }
+        if (newDetectedDropMode === this._detectedDropMode && (!this._linesRemoved || !this._indicatorsRemoved)) {
+            return;
+        }
+        this._detectedDropMode = newDetectedDropMode;
+        if (this._detectedDropMode === 'shift') {
+            this._createLine(closestItemIndex, this._elementsCoordinates[closestItemIndex].position);
+        }
+        else {
+            this._createReplaceIndicator(closestItemIndex);
+        }
+    }
+    /** @hidden */
     _removeAllLines() {
+        this._linesRemoved = true;
         this.dndItems.forEach((item) => item.removeLine());
     }
     /** @hidden */
     _removeAllReplaceIndicators() {
+        this._indicatorsRemoved = true;
         this.dndItems.forEach((item) => item.removeReplaceIndicator());
     }
     /** @hidden */
     _createLine(closestItemIndex, linkPosition) {
         this._removeAllLines();
+        this._removeAllReplaceIndicators();
+        this._linesRemoved = false;
         this._dndItemReference[closestItemIndex].createLine(linkPosition, this.gridMode);
     }
     /** @hidden */
     _createReplaceIndicator(closestItemIndex) {
+        this._removeAllLines();
         this._removeAllReplaceIndicators();
+        this._indicatorsRemoved = false;
         this._dndItemReference[closestItemIndex].createReplaceIndicator();
     }
     /** @hidden */
@@ -5037,7 +5322,7 @@ class DndListDirective {
     }
 }
 DndListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: DndListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-DndListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: DndListDirective, selector: "[fdkDndList], [fd-dnd-list]", inputs: { gridMode: "gridMode", replaceMode: "replaceMode", items: "items", draggable: "draggable" }, outputs: { itemsChange: "itemsChange", itemDropped: "itemDropped" }, providers: [{ provide: DND_LIST, useExisting: forwardRef(() => DndListDirective) }], queries: [{ propertyName: "dndItems", predicate: DND_ITEM }], ngImport: i0 });
+DndListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: DndListDirective, selector: "[fdkDndList], [fd-dnd-list]", inputs: { gridMode: "gridMode", dropMode: "dropMode", threshold: "threshold", replaceMode: "replaceMode", items: "items", draggable: "draggable" }, outputs: { itemsChange: "itemsChange", itemDropped: "itemDropped" }, host: { properties: { "class": "this._initialClass" } }, providers: [{ provide: DND_LIST, useExisting: forwardRef(() => DndListDirective) }], queries: [{ propertyName: "dndItems", predicate: DND_ITEM }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: DndListDirective, decorators: [{
             type: Directive,
             args: [{
@@ -5046,6 +5331,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 }]
         }], propDecorators: { gridMode: [{
                 type: Input
+            }], dropMode: [{
+                type: Input
+            }], threshold: [{
+                type: Input
             }], replaceMode: [{
                 type: Input
             }], items: [{
@@ -5059,6 +5348,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
             }], dndItems: [{
                 type: ContentChildren,
                 args: [DND_ITEM]
+            }], _initialClass: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 function _isMouseOnElement(element, mousePosition) {
     const startX = element.x;
@@ -5070,6 +5362,30 @@ function _isMouseOnElement(element, mousePosition) {
 function _between(x, min, max) {
     return x >= min && x <= max;
 }
+function getElementStartCoords(rect, position) {
+    return {
+        x: position === 'after' ? rect.x + rect.width : rect.x,
+        y: position === 'after' ? rect.y + rect.height : rect.y
+    };
+}
+function getElementBoundaries(coordinates, threshold) {
+    const widthOffset = coordinates.width * (coordinates.position === 'after' ? 1 : -1);
+    const heightOffset = coordinates.height * (coordinates.position === 'after' ? 1 : -1);
+    const xStart = coordinates.position === 'after' ? coordinates.x : coordinates.x + coordinates.width;
+    const xEnd = xStart + widthOffset + (widthOffset / 2) * threshold;
+    const yStart = coordinates.position === 'after' ? coordinates.y : coordinates.y + coordinates.height;
+    const yEnd = yStart + heightOffset + (heightOffset / 2) * threshold;
+    return {
+        x: {
+            start: xStart > xEnd ? xEnd : xStart,
+            end: xStart > xEnd ? xStart : xEnd
+        },
+        y: {
+            start: yStart > yEnd ? yEnd : yStart,
+            end: yStart > yEnd ? yStart : yEnd
+        }
+    };
+}
 
 class DndItemDirective {
     /** Defines if element is draggable */
@@ -6171,5 +6487,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ANY_LANGUAGE_LETTERS_GROUP_REGEX, ANY_LANGUAGE_LETTERS_REGEX, AbstractFdNgxClass, AsyncOrSyncPipe, AttributeObserver, AutoCompleteDirective, AutoCompleteModule, ClickedBehaviorModule, ClickedDirective, ContentDensityService, DECIMAL_NUMBER_UNICODE_GROUP_REGEX, DECIMAL_NUMBER_UNICODE_RANGE, DECIMAL_NUMBER_UNICODE_REGEX, DEFAULT_CONTENT_DENSITY, DND_ITEM, DND_LIST, DefaultReadonlyViewModifier, DeprecatedAutoCompleteDirective, DeprecatedClickedDirective, DeprecatedDisabledBehaviorDirective, DeprecatedFocusKeyManagerItemDirective, DeprecatedFocusKeyManagerListDirective, DeprecatedFocusableItemDirective, DeprecatedFocusableListDirective, DeprecatedIgnoreClickOnSelectionDirective, DeprecatedInitialFocusDirective, DeprecatedLineClampDirective, DeprecatedLineClampTargetDirective, DeprecatedOnlyDigitsDirective, DeprecatedOverflowListDirective, DeprecatedOverflowListItemDirective, DeprecatedReadonlyBehaviorDirective, DeprecatedRepeatDirective, DeprecatedResizeDirective, DeprecatedResizeHandleDirective, DeprecatedTemplateSelectorDirective, DeprecatedTruncateSelectorDirective, DestroyedService, DisabledBehaviorDirective, DisabledBehaviorModule, DisabledObserver, DisplayFnPipe, DndItemDirective, DndKeyboardGroupDirective, DndKeyboardItemDirective, DndListDirective, DragAndDropModule, DynamicComponentContainer, DynamicComponentInjector, DynamicComponentService, ELEMENT_REF_EXCEPTION, FDK_DISABLED_DIRECTIVE, FDK_FOCUSABLE_GRID_DIRECTIVE, FDK_FOCUSABLE_ITEM_DIRECTIVE, FDK_FOCUSABLE_LIST_DIRECTIVE, FDK_READONLY_DIRECTIVE, FDK_SELECTABLE_ITEM_PROVIDER, FOCUSABLE_ITEM, FdkClickedProvider, FdkDisabledProvider, FdkReadonlyProvider, FilterStringsPipe, FocusKeyManagerHelpersModule, FocusKeyManagerItemDirective, FocusKeyManagerListDirective, FocusTrapService, FocusableGridDirective, FocusableGridModule, FocusableItemDirective, FocusableItemModule, FocusableListDirective, FocusableListModule, FocusableObserver, INVALID_DATE_ERROR, IgnoreClickOnSelectionDirective, IgnoreClickOnSelectionDirectiveToken, IgnoreClickOnSelectionModule, InitialFocusDirective, InitialFocusModule, IsCompactDensityPipe, KeyUtil, KeyboardSupportService, LETTERS_UNICODE_RANGE, LIST_ITEM_COMPONENT, LineClampDirective, LineClampModule, LineClampTargetDirective, LocalStorageService, MOBILE_CONFIG_ERROR, MakeAsyncPipe, ModuleDeprecations, OVERFLOW_PRIORITY_SCORE, OnlyDigitsDirective, OnlyDigitsModule, OverflowListDirective, OverflowListItemDirective, OverflowListModule, PipeModule, RTL_LANGUAGE, RangeSelector, ReadonlyBehaviorDirective, ReadonlyBehaviorModule, ReadonlyObserver, RepeatDirective, RepeatModule, ResizeDirective, ResizeHandleDirective, ResizeModule, ResizeObserverFactory, ResizeObserverService, RtlService, SafePipe, SearchHighlightPipe, SelectComponentRootToken, SelectableItemDirective, SelectableItemToken, SelectableListDirective, SelectableListModule, SelectionService, THEME_SWITCHER_ROUTER_MISSING_ERROR, TabbableElementService, TemplateDirective, TemplateModule, ThemesService, TruncateDirective, TruncateModule, TruncatePipe, TwoDigitsPipe, UtilsModule, ValueByPathPipe, alternateSetter, applyCssClass, applyCssStyle, coerceArraySafe, coerceBoolean, coerceCssPixel, consumerProviderFactory, getDocumentFontSize, getElementCapacity, getElementWidth, getNativeElement, getRandomColorAccent, intersectionObservable, isBlank, isBoolean, isCompactDensity, isFunction, isHasElementRef, isJsObject, isNumber, isObject, isOdd, isPresent, isPromise, isString, isStringMap, isSubscribable, isType, isValidContentDensity, moduleDeprecationsFactory, moduleDeprecationsProvider, parserFileSize, pxToNum, resizeObservable, scrollIntoView, scrollTop, setDisabledState, setReadonlyState, toNativeElement, uuidv4 };
+export { ANY_LANGUAGE_LETTERS_GROUP_REGEX, ANY_LANGUAGE_LETTERS_REGEX, AbstractFdNgxClass, AsyncOrSyncPipe, AttributeObserver, AutoCompleteDirective, AutoCompleteModule, BreakpointDirective, BreakpointModule, ClickedBehaviorModule, ClickedDirective, ContentDensityService, DECIMAL_NUMBER_UNICODE_GROUP_REGEX, DECIMAL_NUMBER_UNICODE_RANGE, DECIMAL_NUMBER_UNICODE_REGEX, DEFAULT_CONTENT_DENSITY, DND_ITEM, DND_LIST, DefaultReadonlyViewModifier, DeprecatedAutoCompleteDirective, DeprecatedClickedDirective, DeprecatedDisabledBehaviorDirective, DeprecatedFocusKeyManagerItemDirective, DeprecatedFocusKeyManagerListDirective, DeprecatedFocusableItemDirective, DeprecatedFocusableListDirective, DeprecatedIgnoreClickOnSelectionDirective, DeprecatedInitialFocusDirective, DeprecatedLineClampDirective, DeprecatedLineClampTargetDirective, DeprecatedOnlyDigitsDirective, DeprecatedOverflowListDirective, DeprecatedOverflowListItemDirective, DeprecatedReadonlyBehaviorDirective, DeprecatedRepeatDirective, DeprecatedResizeDirective, DeprecatedResizeHandleDirective, DeprecatedTemplateSelectorDirective, DeprecatedTruncateSelectorDirective, DestroyedService, DisabledBehaviorDirective, DisabledBehaviorModule, DisabledObserver, DisplayFnPipe, DndItemDirective, DndKeyboardGroupDirective, DndKeyboardItemDirective, DndListDirective, DragAndDropModule, DynamicComponentContainer, DynamicComponentInjector, DynamicComponentService, ELEMENT_REF_EXCEPTION, FDK_DISABLED_DIRECTIVE, FDK_FOCUSABLE_GRID_DIRECTIVE, FDK_FOCUSABLE_ITEM_DIRECTIVE, FDK_FOCUSABLE_LIST_DIRECTIVE, FDK_READONLY_DIRECTIVE, FDK_SELECTABLE_ITEM_PROVIDER, FOCUSABLE_ITEM, FdkClickedProvider, FdkDisabledProvider, FdkReadonlyProvider, FilterStringsPipe, FocusKeyManagerHelpersModule, FocusKeyManagerItemDirective, FocusKeyManagerListDirective, FocusTrapService, FocusableGridDirective, FocusableGridModule, FocusableItemDirective, FocusableItemModule, FocusableListDirective, FocusableListModule, FocusableObserver, INVALID_DATE_ERROR, IgnoreClickOnSelectionDirective, IgnoreClickOnSelectionDirectiveToken, IgnoreClickOnSelectionModule, InitialFocusDirective, InitialFocusModule, IsCompactDensityPipe, KeyUtil, KeyboardSupportService, LETTERS_UNICODE_RANGE, LIST_ITEM_COMPONENT, LineClampDirective, LineClampModule, LineClampTargetDirective, LocalStorageService, MOBILE_CONFIG_ERROR, MakeAsyncPipe, ModuleDeprecations, OVERFLOW_PRIORITY_SCORE, OnlyDigitsDirective, OnlyDigitsModule, OverflowListDirective, OverflowListItemDirective, OverflowListModule, PipeModule, RTL_LANGUAGE, RangeSelector, ReadonlyBehaviorDirective, ReadonlyBehaviorModule, ReadonlyObserver, RepeatDirective, RepeatModule, ResizeDirective, ResizeHandleDirective, ResizeModule, ResizeObserverFactory, ResizeObserverService, RtlService, SafePipe, SearchHighlightPipe, SelectComponentRootToken, SelectableItemDirective, SelectableItemToken, SelectableListDirective, SelectableListModule, SelectionService, THEME_SWITCHER_ROUTER_MISSING_ERROR, TabbableElementService, TemplateDirective, TemplateModule, ThemesService, TruncateDirective, TruncateModule, TruncatePipe, TwoDigitsPipe, UtilsModule, ValueByPathPipe, ViewportSizeObservable, alternateSetter, applyCssClass, applyCssStyle, coerceArraySafe, coerceBoolean, coerceCssPixel, consumerProviderFactory, getDocumentFontSize, getElementCapacity, getElementWidth, getNativeElement, getRandomColorAccent, intersectionObservable, isBlank, isBoolean, isCompactDensity, isFunction, isHasElementRef, isJsObject, isNumber, isObject, isOdd, isPresent, isPromise, isString, isStringMap, isSubscribable, isType, isValidContentDensity, moduleDeprecationsFactory, moduleDeprecationsProvider, parserFileSize, pxToNum, resizeObservable, scrollIntoView, scrollTop, setDisabledState, setReadonlyState, toNativeElement, uuidv4 };
 //# sourceMappingURL=fundamental-ngx-cdk-utils.mjs.map