@ship-ui/core 0.15.28 → 0.15.30

package/fesm2022/ship-ui-core.mjs

@@ -1023,6 +1023,7 @@ class ShipBlueprintComponent {
         }
     }
     onTouchMove(event) {
+        event.preventDefault();
         if (this.isLocked())
             return;
         if (this.#isNodeDragging()) {
@@ -1035,6 +1036,11 @@ class ShipBlueprintComponent {
             this.handleTouchMove(event);
         }
     }
+    onDocumentTouchEnd(event) {
+        if (this.isLocked())
+            return;
+        this.handleTouchEnd();
+    }
     startNodeDrag(event, nodeId) {
         event.stopPropagation();
         event.preventDefault();
@@ -1089,6 +1095,7 @@ class ShipBlueprintComponent {
         this.#lastMouseY.set(clientY);
     }
     startPortDrag(event, nodeId, portId) {
+        event.preventDefault();
         event.stopPropagation();
         if (this.draggingConnection())
             this.cancelPortDrag();
@@ -1216,6 +1223,7 @@ class ShipBlueprintComponent {
         }
     }
     handleTouchMove(event) {
+        event.preventDefault();
         if (event.touches.length === 1 && this.#isDragging()) {
             const dx = event.touches[0].clientX - this.#lastMouseX();
             const dy = event.touches[0].clientY - this.#lastMouseY();
@@ -1242,6 +1250,10 @@ class ShipBlueprintComponent {
     }
     handleTouchEnd() {
         this.#isDragging.set(false);
+        this.endNodeDrag();
+        if (this.draggingConnection()) {
+            this.cancelPortDrag();
+        }
     }
     closeMidpointDiv() {
         this.showMidpointDiv.set(false);
@@ -1422,7 +1434,7 @@ class ShipBlueprintComponent {
         return Math.max(min, Math.min(max, value));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipBlueprintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipBlueprintComponent, isStandalone: true, selector: "sh-blueprint", inputs: { forceUnique: { classPropertyName: "forceUnique", publicName: "forceUnique", isSignal: true, isRequired: false, transformFunction: null }, autoLayout: { classPropertyName: "autoLayout", publicName: "autoLayout", isSignal: true, isRequired: false, transformFunction: null }, gridSize: { classPropertyName: "gridSize", publicName: "gridSize", isSignal: true, isRequired: false, transformFunction: null }, snapToGrid: { classPropertyName: "snapToGrid", publicName: "snapToGrid", isSignal: true, isRequired: false, transformFunction: null }, gridColor: { classPropertyName: "gridColor", publicName: "gridColor", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodes: "nodesChange" }, host: { listeners: { "document:mouseup": "onMouseUp($event)", "document:click": "onClick($event)", "document:keydown.escape": "onEscape($event)", "document:mousemove": "onMouseMove($event)", "document:touchmove": "onTouchMove($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["blueprintCanvas"], descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: ShipBlueprintComponent, isStandalone: true, selector: "sh-blueprint", inputs: { forceUnique: { classPropertyName: "forceUnique", publicName: "forceUnique", isSignal: true, isRequired: false, transformFunction: null }, autoLayout: { classPropertyName: "autoLayout", publicName: "autoLayout", isSignal: true, isRequired: false, transformFunction: null }, gridSize: { classPropertyName: "gridSize", publicName: "gridSize", isSignal: true, isRequired: false, transformFunction: null }, snapToGrid: { classPropertyName: "snapToGrid", publicName: "snapToGrid", isSignal: true, isRequired: false, transformFunction: null }, gridColor: { classPropertyName: "gridColor", publicName: "gridColor", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodes: "nodesChange" }, host: { listeners: { "document:mouseup": "onMouseUp($event)", "document:click": "onClick($event)", "document:keydown.escape": "onEscape($event)", "document:mousemove": "onMouseMove($event)", "document:touchmove": "onTouchMove($event)", "document:touchend": "onDocumentTouchEnd($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["blueprintCanvas"], descendants: true, static: true }], ngImport: i0, template: `
     <div
       class="canvas-container"
       [class.locked]="isLocked()"
@@ -1622,6 +1634,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }], onTouchMove: [{
                 type: HostListener,
                 args: ['document:touchmove', ['$event']]
+            }], onDocumentTouchEnd: [{
+                type: HostListener,
+                args: ['document:touchend', ['$event']]
             }] } });
 
 class ShipButtonGroupComponent {
@@ -6562,6 +6577,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: ['drop', ['$event']]
             }] } });
 
+class ShipInputMaskDirective {
+    constructor() {
+        this.#selfRef = inject(ElementRef);
+        this.#renderer = inject(Renderer2);
+        this.shInputMask = input('(999) 999-9999', ...(ngDevMode ? [{ debugName: "shInputMask" }] : []));
+    }
+    #selfRef;
+    #renderer;
+    onInput(event) {
+        const inputElement = this.#selfRef.nativeElement;
+        const oldRawValue = inputElement.value;
+        const newRawValue = event.target.value;
+        const oldCursorPos = inputElement.selectionStart ?? 0;
+        const newCleanValue = this.#cleanValue(newRawValue);
+        const maskedValue = this.#applyMask(newCleanValue);
+        this.#renderer.setProperty(inputElement, 'value', maskedValue);
+        const newCursorPos = this.#getNewCursorPosition(maskedValue, oldRawValue, oldCursorPos);
+        inputElement.setSelectionRange(newCursorPos, newCursorPos);
+    }
+    #getNewCursorPosition(maskedValue, oldRawValue, oldCursorPos) {
+        let digitsBeforeCursor = 0;
+        for (let i = 0; i < oldCursorPos; i++) {
+            if (oldRawValue[i] && oldRawValue[i].match(/\d/)) {
+                digitsBeforeCursor++;
+            }
+        }
+        let newCursorPos = 0;
+        let digitsFound = 0;
+        while (newCursorPos < maskedValue.length && digitsFound < digitsBeforeCursor) {
+            if (maskedValue[newCursorPos].match(/\d/)) {
+                digitsFound++;
+            }
+            newCursorPos++;
+        }
+        return newCursorPos;
+    }
+    #cleanValue(value) {
+        if (!value)
+            return '';
+        return value.replace(/\D/g, '');
+    }
+    #applyMask(cleanValue) {
+        const inputMask = this.shInputMask();
+        if (typeof inputMask === 'function') {
+            return inputMask(cleanValue) ?? '';
+        }
+        const pattern = inputMask;
+        let masked = '';
+        let digitIndex = 0;
+        for (let i = 0; i < pattern.length && digitIndex < cleanValue.length; i++) {
+            const maskChar = pattern[i];
+            const digitChar = cleanValue[digitIndex];
+            if (maskChar === '9') {
+                masked += digitChar;
+                digitIndex++;
+            }
+            else {
+                masked += maskChar;
+            }
+        }
+        return masked;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipInputMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.0", type: ShipInputMaskDirective, isStandalone: true, selector: "[shInputMask]", inputs: { shInputMask: { classPropertyName: "shInputMask", publicName: "shInputMask", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ShipInputMaskDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[shInputMask]',
+                    standalone: true,
+                }]
+        }], propDecorators: { onInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }] } });
+
 class ShipPreventWheelDirective {
     wheel(event) {
         event.preventDefault();
@@ -6792,5 +6883,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GridSortableDirective, SHIP_CONFIG, ShipAlertComponent, ShipAlertContainerComponent, ShipAlertModule, ShipAlertService, ShipBlueprintComponent, ShipButtonComponent, ShipButtonGroupComponent, ShipCardComponent, ShipCheckboxComponent, ShipChipComponent, ShipColorPickerComponent, ShipDatepickerComponent, ShipDatepickerInputComponent, ShipDaterangeInputComponent, ShipDialogComponent, ShipDialogService, ShipDividerComponent, ShipEventCardComponent, ShipFileDragDropDirective, ShipFileUploadComponent, ShipFormFieldComponent, ShipIconComponent, ShipListComponent, ShipMenuComponent, ShipPopoverComponent, ShipPreventWheelDirective, ShipProgressBarComponent, ShipRadioComponent, ShipRangeSliderComponent, ShipResizeDirective, ShipSelectComponent, ShipSidenavComponent, ShipSortDirective, ShipSortableComponent, ShipSortableDirective, ShipSpinnerComponent, ShipStepperComponent, ShipStickyColumnsDirective, ShipTableComponent, ShipTabsComponent, ShipToggleCardComponent, ShipToggleComponent, ShipTooltipComponent, ShipTooltipDirective, ShipTooltipWrapper, ShipVirtualScrollComponent, TEST_NODES, moveIndex, watchHostClass };
+export { GridSortableDirective, SHIP_CONFIG, ShipAlertComponent, ShipAlertContainerComponent, ShipAlertModule, ShipAlertService, ShipBlueprintComponent, ShipButtonComponent, ShipButtonGroupComponent, ShipCardComponent, ShipCheckboxComponent, ShipChipComponent, ShipColorPickerComponent, ShipDatepickerComponent, ShipDatepickerInputComponent, ShipDaterangeInputComponent, ShipDialogComponent, ShipDialogService, ShipDividerComponent, ShipEventCardComponent, ShipFileDragDropDirective, ShipFileUploadComponent, ShipFormFieldComponent, ShipIconComponent, ShipInputMaskDirective, ShipListComponent, ShipMenuComponent, ShipPopoverComponent, ShipPreventWheelDirective, ShipProgressBarComponent, ShipRadioComponent, ShipRangeSliderComponent, ShipResizeDirective, ShipSelectComponent, ShipSidenavComponent, ShipSortDirective, ShipSortableComponent, ShipSortableDirective, ShipSpinnerComponent, ShipStepperComponent, ShipStickyColumnsDirective, ShipTableComponent, ShipTabsComponent, ShipToggleCardComponent, ShipToggleComponent, ShipTooltipComponent, ShipTooltipDirective, ShipTooltipWrapper, ShipVirtualScrollComponent, TEST_NODES, moveIndex, watchHostClass };
 //# sourceMappingURL=ship-ui-core.mjs.map