Prevent zoom on iOS when input fields are focused

prevent-zoom.directive.ts

import { Directive, HostListener, signal } from '@angular/core';

@Directive({ selector: '[flxInput]', standalone: true })
export class PreventZoomDirective {
  zoomDisabled = signal(false);
  hasFocus = signal(false);

  get meta() {
    return Array.from(document.getElementsByTagName('meta') || []).find(m => m?.getAttribute('name') === 'viewport');
  }

  @HostListener('pointerover')
  zoomDisable() {
    const content = this.meta?.getAttribute('content');
    if (!this.zoomDisabled() && content != null) {
      this.meta?.setAttribute('content', `${content}, maximum-scale=1`);
      this.zoomDisabled.set(true);
    }
  }

  @HostListener('pointerout')
  pointerOut() {
    if (!this.hasFocus() && this.zoomDisabled()) {
      // Pointer moved out of the input without focus being added.
      this.zoomEnable();
    }
  }

  @HostListener('focus')
  focus() {
    this.zoomDisable();
    this.hasFocus.set(true);
  }

  @HostListener('blur')
  zoomEnable() {
    const content = this.meta?.getAttribute('content');
    if (this.zoomDisabled() && content != null) {
      this.meta?.setAttribute('content', `${content.replace(', maximum-scale=1', '')}`);
      this.zoomDisabled.set(false);
      this.hasFocus.set(false);
    }
  }
}