ngx-kit 9.2.3 → 9.3.0

package/fesm2022/ngx-kit-drag-resize.mjs

@@ -208,7 +208,7 @@ class DragPreviewRef {
             this.isCustom = false;
             const preview = dragEl.cloneNode(true);
             this.element = preview;
-            // Avoid duplicated ids in the document.
+            // Avoid duplicated ids in the document
             this.element.removeAttribute('id');
             this.element.querySelectorAll('[id]').forEach((n) => n.removeAttribute('id'));
             copyVisualStyles(dragEl, this.element);
@@ -359,7 +359,7 @@ function multiplyLinear(left, right) {
 }
 /**
  * Converts a client-space point from one same-origin Document viewport to another.
- * The conversion walks both frameElement chains through their common top-level document.
+ * The conversion walks both frameElement chains through their common top-level document
  * Cross-origin frame boundaries cannot be inspected and return null.
  */
 function convertPointBetweenDocuments(point, fromDocument, toDocument) {
@@ -943,7 +943,6 @@ class DragRef {
             const targetDocument = list.el?.ownerDocument;
             if (!targetDocument)
                 continue;
-            // Pointer coordinates originate in the draggable's document. A same-origin iframe has
             // its own viewport coordinate space, so convert before testing its DropList geometry.
             const targetPoint = convertPointBetweenDocuments(pointer, this.el.ownerDocument, targetDocument);
             if (!targetPoint || !list._containsPoint(targetPoint.x, targetPoint.y))
@@ -2279,7 +2278,6 @@ class DropListRef {
         if (ph.custom)
             return;
         placeholder.style.display = drag.originalDisplay;
-        // `rect` is in the VIEWPORT pixels of the dragged item's document. CSS sizes are local to the
         // list: convert across an (optionally scaled) iframe boundary first, then through the
         // list's own scaled/zoomed ancestors. Without this a placeholder inside a `scale(.5)` canvas
         // would be drawn at half the size it reserves.
@@ -2804,6 +2802,7 @@ class NgxDraggable {
      * When `true`, presses on native interactive controls (`button, a, input, textarea, select`,
      * `[contenteditable]`) do not start a drag either. Off by default so that a page-builder canvas
      * block can be grabbed by its own button/link, which is exactly what you want while editing.
+     * @default false
      */
     ignoreInteractive = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ignoreInteractive" }] : /* istanbul ignore next */ []));
@@ -2889,17 +2888,15 @@ class NgxDraggable {
         this._ref.dropList?.removeItem(this._ref);
     }
     pointerDown(e) {
-        if (this.disabled() ||
-            e.button !== 0 ||
-            this.isExcluded(e.target) ||
-            !this.isOnHandle(e.target))
+        if (this.disabled() || e.button !== 0 || !this.isOnHandle(e.target))
             return;
         // Nested draggables: pointerdown bubbles, so without this an ancestor draggable would start
         // its own drag from the very same gesture. The innermost enabled draggable claims it.
         if (claimedPointerEvents.has(e))
             return;
         claimedPointerEvents.add(e);
-        e.preventDefault();
+        if (this.ignoreInteractive())
+            e.preventDefault();
         this.down = true;
         this.keyboardDrag = false;
         this.pointerId = e.pointerId;
@@ -3171,15 +3168,6 @@ class NgxDraggable {
         // TODO notsafe instanseof: node.nodeType === Node.ELEMENT_NODE
         return isElementTarget$1(target) && !!target.closest(this.dragHandle());
     }
-    /** Should a press on `target` be left alone (no drag)? */
-    isExcluded(target) {
-        if (!isElementTarget$1(target))
-            return false;
-        const selector = this.noDragSelector();
-        if (selector && target.closest(selector))
-            return true;
-        return this.ignoreInteractive() && isEditableOrInteractive(target);
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDraggable, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxDraggable, isStandalone: true, selector: "[NgxDraggable],[ngxDraggable]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, boundary: { classPropertyName: "boundary", publicName: "boundary", isSignal: true, isRequired: false, transformFunction: null }, dragRootElement: { classPropertyName: "dragRootElement", publicName: "dragRootElement", isSignal: true, isRequired: false, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null }, lockAxis: { classPropertyName: "lockAxis", publicName: "lockAxis", isSignal: true, isRequired: false, transformFunction: null }, dragThreshold: { classPropertyName: "dragThreshold", publicName: "dragThreshold", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null }, noDragSelector: { classPropertyName: "noDragSelector", publicName: "noDragSelector", isSignal: true, isRequired: false, transformFunction: null }, ignoreInteractive: { classPropertyName: "ignoreInteractive", publicName: "ignoreInteractive", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", dragRootElement: "dragRootElementChange", dragHandle: "dragHandleChange", dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd" }, host: { properties: { "style.touch-action": "\"none\"", "attr.tabindex": "disabled() ? null : 0", "attr.aria-grabbed": "dragging()", "class.disable-drag": "disabled()" }, classAttribute: "ngx-draggable" }, providers: [{ provide: NGX_DRAGGABLE, useExisting: NgxDraggable }], queries: [{ propertyName: "customPreview", first: true, predicate: NgxDragPreview, descendants: true }], ngImport: i0 });
 }
@@ -3203,9 +3191,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 type: ContentChild,
                 args: [NgxDragPreview]
             }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragMove: [{ type: i0.Output, args: ["dragMove"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }] } });
-function isEditableOrInteractive(el) {
-    return !!el.closest('button,a[href],input,textarea,select,[contenteditable]:not([contenteditable="false"])');
-}
 function isEditableTarget(target) {
     if (!isElementTarget$1(target))
         return false;