Notes

import { Directive, ElementRef, Renderer2, AfterViewInit, HostListener } from '@angular/core';

@Directive({
selector: '[funnelFancyInput]'
})
export class FunnelFancyInputDirective implements AfterViewInit {
private userInput!: HTMLInputElement;
private userInputTitle!: HTMLElement;
private funnelDollarSign!: HTMLElement | null;

constructor(private el: ElementRef, private renderer: Renderer2) {}

ngAfterViewInit() {
this.userInput = this.el.nativeElement.querySelector('.user-input') as HTMLInputElement;
this.userInputTitle = this.el.nativeElement.querySelector('.user-input-title') as HTMLElement;
this.funnelDollarSign = this.el.nativeElement.querySelector('.funnel-dollar-sign') as HTMLElement | null;

// ✅ 3. On page load, if data exists in the input box, move label to the top
this.updateAllInputFields();
}

@HostListener('focus')
onFocus() {
// ✅ 1. On cursor in input, move label to top
if (!this.userInputTitle.classList.contains('show')) {
this.userInputTitle.classList.add('show');
}

if (this.userInput.getAttribute('placeholder') === this.userInput.getAttribute('data-watermark')) {
this.userInput.setAttribute('placeholder', '');
}
}

@HostListener('blur')
onBlur() {
if (this.userInput.value.trim() === '') {
// ✅ 2 & 4. If input is empty and clicked outside, remove label & restore placeholder
this.userInput.setAttribute('placeholder', this.userInput.getAttribute('data-watermark') || '');
this.userInput.style.color = '#005587';
this.userInputTitle.classList.remove('show');
this.userInput.classList.remove('with-user-data');

if (this.funnelDollarSign) {
this.funnelDollarSign.classList.remove('with-user-data');
}
} else {
this.userInput.classList.add('with-user-data');

if (this.funnelDollarSign) {
this.funnelDollarSign.classList.add('with-user-data');
}
}