// File: example.module.ts

import { NgModule } from "@angular/core";
import { UrlModule } from "angular-weblineindia-url";

@NgModule({
  imports: [UrlModule]
})
export class AppModule {}

// File: example.component.ts

export class AppComponent {
  user: any = {
    value: "",
    placeholder: "Enter Url",
    name: "facebookUrl",
    id: "facebookUrl",
    disabled: "false",
    tabindex: "1",
    urltype: "instagram",
    urlErrorName: "The url entered is not valid and must be changed",
    facebookUrlRegex: /(?:(?:http|https):\/\/)?(?:www.)?facebook.com\/(?:(?:\w)*#!\/)?(?:pages\/)?(?:[?\w\-]*\/)?(?:profile.php\?id=(?=\d.*))?([\w\-]*)?/
  };

  onChange(event) {
    if (event.target.value.trim() === "") {
      this.user.value = event.target.value
        .replace(/^[^-\s][a-zA-Z0-9_\s-]+$/, "")
        .trim();
    } else {
      this.user.value = event.target.value;
    }
  }

  onFocus(event) {
    event.target.placeholder = "";
  }
  onBlur(event) {
    event.target.placeholder = this.user.placeholder;
  }
}