All files / ip-input si-ip4-input.directive.ts

87.5% Statements 14/16
80% Branches 4/5
100% Functions 4/4
86.66% Lines 13/15

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89                                                                                                          1x         158x           2x   8x   2x 2x 2x         142x 142x   142x 142x 142x 142x              
/**
 * Copyright (c) Siemens 2016 - 2025
 * SPDX-License-Identifier: MIT
 */
import { Directive } from '@angular/core';
import {
  AbstractControl,
  ControlValueAccessor,
  NG_VALIDATORS,
  NG_VALUE_ACCESSOR,
  ValidationErrors,
  Validator
} from '@angular/forms';
 
import { splitIpV4Sections } from './address-utils';
import { ipV4CIDRValidator, ipV4Validator } from './address-validators';
import { AddrInputEvent, SiIpInputDirective } from './si-ip-input.directive';
 
/**
 * Directive for IPv4 address input fields.
 *
 * Usage:
 *
 * ```ts
 * import { SiFormItemComponent } from '@siemens/element-ng/form';
 * import { SiIp4InputDirective } from '@siemens/element-ng/ip-input';
 *
 * @Component({
 *   template: `
 *     <si-form-item label="IPv4 address">
 *       <input type="text" class="form-control" siIpV4 />
 *     </si-form-item>
 *   `,
 *   imports: [SiFormItemComponent, SiIp4InputDirective, ...]
 * })
 * ```
 */
@Directive({
  selector: 'input[siIpV4]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: SiIp4InputDirective,
      multi: true
    },
    {
      provide: NG_VALIDATORS,
      useExisting: SiIp4InputDirective,
      multi: true
    }
  ],
  exportAs: 'siIpV4'
})
export class SiIp4InputDirective
  extends SiIpInputDirective
  implements ControlValueAccessor, Validator
{
  validate(control: AbstractControl): ValidationErrors | null {
    return this.cidr() ? ipV4CIDRValidator(control) : ipV4Validator(control);
  }
  /**
   * Trim leading zeros from each part of the IPv4 address
   */
  protected override leaveInput(): void {
    const trimmedValue = this.value
      ?.split('.')
      .map(part => part.replace(/^0+(\d)/, '$1'))
      .join('.');
    if (this.value !== trimmedValue) {
      this.renderer.setProperty(this.inputEl, 'value', trimmedValue);
      this.onChange(trimmedValue);
    }
  }
  /** @internal */
  protected maskInput(e: AddrInputEvent): void {
    const { value, pos, type } = e;
    const ipv4 = splitIpV4Sections({ type, input: value, pos, cidr: this.cidr() });
 
    this.renderer.setProperty(this.inputEl, 'value', ipv4.value);
    const el = this.elementRef.nativeElement;
    if (value?.length === pos) {
      el.setSelectionRange(ipv4.value.length, ipv4.value.length);
    } else E{
      const newPos = pos + ipv4.cursorDelta;
      el.setSelectionRange(newPos, newPos);
    }
  }
}