VIV-2876 add support for long '0' press to render '+' (dial-pad)

Author: SpawnAtis

libs/components/src/lib/dial-pad/VARIATIONS.md

@@ -4,6 +4,14 @@
 <vwc-dial-pad aria-label="Dial a telephone number"></vwc-dial-pad>
 ```
 
+## International Numbers
+
+To support international numbers, you can use the pattern like `^\+?[0-9#*]*$` which allows an optional `+` at the beginning. Users can **long press** the `0` button to insert a `+` symbol (commonly used for international numbers).
+
+```html preview
+<vwc-dial-pad pattern="^\+?[0-9#*]*$"></vwc-dial-pad>
+```
+
 ## Labelling
 
 ### Helper Text

libs/components/src/lib/dial-pad/dial-pad.spec.ts

@@ -474,6 +474,121 @@ describe('vwc-dial-pad', () => {
 		});
 	});
 
+	describe('long press on 0', () => {
+		function getZeroButton(component: HTMLElement) {
+			return getDigitButtons(component)[10] as Button;
+		}
+
+		function createPointerEvent(
+			type: string,
+			options: EventInit = {}
+		): PointerEvent {
+			// Create a mock PointerEvent for test environment
+			const event = new Event(type, options) as PointerEvent;
+			Object.defineProperty(event, 'pointerType', {
+				value: 'mouse',
+				writable: true,
+			});
+			Object.defineProperty(event, 'pointerId', {
+				value: 1,
+				writable: true,
+			});
+			return event;
+		}
+
+		it('should add "0" when tapping 0', async () => {
+			getZeroButton(element).click();
+			await Updates.next();
+			expect(getTextField(element).value).toEqual('0');
+		});
+
+		it('should add "+" when long pressing 0 and suppress subsequent click', async () => {
+			element.pattern = '^\\+?[0-9#*]*$';
+			await Updates.next();
+			const btn = getZeroButton(element);
+			vi.useFakeTimers();
+			try {
+				const pointerDown = createPointerEvent('pointerdown', {
+					bubbles: true,
+				});
+				Object.defineProperty(pointerDown, 'currentTarget', {
+					value: btn,
+					writable: true,
+				});
+				btn.dispatchEvent(pointerDown);
+				vi.advanceTimersByTime(600);
+				btn.dispatchEvent(
+					createPointerEvent('pointerup', {
+						bubbles: true,
+					})
+				);
+				vi.runAllTimers();
+			} finally {
+				vi.useRealTimers();
+			}
+			await Updates.next();
+
+			// Simulate potential click following pointerup; should be suppressed
+			btn.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+			await Updates.next();
+			expect(getTextField(element).value).toEqual('+');
+		});
+
+		it('should not trigger long press on 0 when disabled', async () => {
+			element.pattern = '^\\+?[0-9#*]*$';
+			element.disabled = true;
+			await Updates.next();
+			const btn = getZeroButton(element);
+			vi.useFakeTimers();
+			try {
+				const pointerDown = createPointerEvent('pointerdown', {
+					bubbles: true,
+				});
+				Object.defineProperty(pointerDown, 'currentTarget', {
+					value: btn,
+					writable: true,
+				});
+				btn.dispatchEvent(pointerDown);
+				vi.advanceTimersByTime(600);
+				vi.runAllTimers();
+			} finally {
+				vi.useRealTimers();
+			}
+			await Updates.next();
+			expect(getTextField(element).value).toEqual('');
+		});
+
+		it('should not add "+" when pointer leaves 0 button before long press completes', async () => {
+			element.pattern = '^\\+?[0-9#*]*$';
+			await Updates.next();
+			const btn = getZeroButton(element);
+			vi.useFakeTimers();
+			try {
+				const pointerDown = createPointerEvent('pointerdown', {
+					bubbles: true,
+				});
+				Object.defineProperty(pointerDown, 'currentTarget', {
+					value: btn,
+					writable: true,
+				});
+				btn.dispatchEvent(pointerDown);
+				vi.advanceTimersByTime(300);
+				// Leave before long press completes
+				btn.dispatchEvent(
+					createPointerEvent('pointerleave', {
+						bubbles: true,
+					})
+				);
+				vi.advanceTimersByTime(300);
+				vi.runAllTimers();
+			} finally {
+				vi.useRealTimers();
+			}
+			await Updates.next();
+			expect(getTextField(element).value).toEqual('');
+		});
+	});
+
 	describe('Methods', () => {
 		describe('focus', function () {
 			it('should set the focus on the text field', async function () {

libs/components/src/lib/dial-pad/dial-pad.template.ts

@@ -147,11 +147,21 @@ function onDigitClick(
 	digit: DialPadButton,
 	{ parent: dialPad, event }: { parent: DialPad; event: MouseEvent }
 ) {
+	if (dialPad._suppressNextClick) {
+		// Skip the click insertion if a long-press already handled it
+		dialPad._suppressNextClick = false;
+		return;
+	}
 	dialPad.value += digit.value;
 
 	dialPad.$emit('keypad-click', event.currentTarget);
 	dialPad.$emit('input');
 	dialPad.$emit('change');
+	// Reset suppress flag after a delay to handle cases where click doesn't fire.
+	// This ensures the next click won't be incorrectly suppressed
+	window.setTimeout(() => {
+		dialPad._suppressNextClick = false;
+	}, 0);
 }
 
 function renderDigits(
@@ -175,6 +185,11 @@ function renderDigits(
 							c.parent.autofocus && c.parent.noInput && c.index === 0}"
 					  aria-label="${(x, c) => c.parent.locale.dialPad[x.ariaLabel]}"
 					  ?disabled="${(_, c) => c.parent.disabled}"
+					  @pointerdown="${(x, c) =>
+							c.parent._startLongPress(x.value, c.event as PointerEvent)}"
+					  @pointerup="${(_, c) => c.parent._endLongPress()}"
+					  @pointercancel="${(_, c) => c.parent._cancelLongPress()}"
+					  @pointerleave="${(_, c) => c.parent._cancelLongPress()}"
 					  @click="${onDigitClick}">
 					  	<${iconTag} slot="icon"
 									name="${(x) => x.icon}"

libs/components/src/lib/dial-pad/dial-pad.ts

@@ -147,6 +147,59 @@ export class DialPad extends Localized(VividElement) {
 	@attr({ attribute: 'delete-aria-label' }) deleteAriaLabel: string | null =
 		null;
 
+	/**
+	 * Long-press handling for digit '0' to insert '+'
+	 * @internal
+	 */
+	private _longPressTimeoutId: number | null = null;
+	/**
+	 * Suppresses the next click handler after a long press has already handled input
+	 * @internal
+	 */
+	_suppressNextClick = false;
+
+	/**
+	 * @internal
+	 */
+	_startLongPress(digit: string, event: PointerEvent) {
+		if (this.disabled || this.callActive || digit !== '0') return;
+
+		this._clearLongPressTimer();
+		const target = event.currentTarget as HTMLElement | null;
+
+		this._longPressTimeoutId = window.setTimeout(() => {
+			this._suppressNextClick = true;
+			this.value += '+';
+			this.$emit('keypad-click', target);
+			this.$emit('input');
+			this.$emit('change');
+		}, 600);
+	}
+
+	/**
+	 * @internal
+	 */
+	_endLongPress() {
+		this._clearLongPressTimer();
+		// Don't reset suppress flag here - let the click handler reset it
+		// This ensures the click event can check the flag and suppress if needed
+		// If click doesn't fire, the flag will be reset on the next click
+	}
+
+	/**
+	 * @internal
+	 */
+	_cancelLongPress() {
+		this._clearLongPressTimer();
+	}
+
+	private _clearLongPressTimer() {
+		if (this._longPressTimeoutId !== null) {
+			clearTimeout(this._longPressTimeoutId);
+			this._longPressTimeoutId = null;
+		}
+	}
+
 	/**
 	 *
 	 * @internal