From 8b9b0626be6b6353b3471b8d13ae13dbccad6bd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Balet?= <raphael@megaphone.info>
Date: Fri, 27 Sep 2024 09:52:15 +0200
Subject: [PATCH] refactor(templateString): prettier

---
 package-lock.json                             |  17 +++
 package.json                                  |   1 +
 .../src/lib/ngx-mat-input-tel.component.html  | 142 +++++++++---------
 3 files changed, 90 insertions(+), 70 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index aa251cb9f..e92753ce4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -57,6 +57,7 @@
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "^2.1.0",
         "ng-packagr": "^18.2.1",
+        "prettier": "^3.3.3",
         "protractor": "~7.0.0",
         "semantic-release": "^24.1.1",
         "ts-node": "^10.9.2",
@@ -25215,6 +25216,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-ms": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-9.1.0.tgz",
diff --git a/package.json b/package.json
index 42f37f553..0bb83d29b 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "ng-packagr": "^18.2.1",
+    "prettier": "^3.3.3",
     "protractor": "~7.0.0",
     "semantic-release": "^24.1.1",
     "ts-node": "^10.9.2",
diff --git a/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.html b/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.html
index 5a9699c87..cbc776f62 100644
--- a/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.html
+++ b/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.html
@@ -9,8 +9,8 @@
   >
     <span class="country-selector-flag flag" [ngClass]="selectedCountry.flagClass"></span>
 
-    @if(selectedCountry.dialCode) {
-    <span class="country-selector-code">+{{ selectedCountry.dialCode }}</span>
+    @if (selectedCountry.dialCode) {
+      <span class="country-selector-code">+{{ selectedCountry.dialCode }}</span>
     }
   </button>
 
@@ -19,80 +19,82 @@
     class="ngx-mat-input-tel-overlay-pane"
     [backdropClass]="'ngx-mat-input-tel-overlay-backdrop'"
   >
-    @if(enableSearch) {
-    <input
-      #menuSearchInput
-      class="country-search"
-      [(ngModel)]="searchCriteria"
-      type="text"
-      [placeholder]="searchPlaceholder"
-      (click)="$event.stopPropagation()"
-      style="
-        width: calc(100% - 4px);
-        height: 34px;
-        border-top: none;
-        border-right: none;
-        border-left: none;
-        border-image: initial;
-        border-bottom: 1px solid rgb(221, 221, 221);
-        font-size: 14px;
-        padding: 20px 10px 24px;
-        box-sizing: border-box;
-        background: transparent;
-        margin: 2px;
-      "
-    />
-
-    } @for(country of preferredCountriesInDropDown; track $index ) {
-    <button
-      type="button"
-      mat-menu-item
-      class="country-list-button"
-      (click)="onCountrySelect(country, focusable)"
-    >
-      <div class="icon-wrapper">
-        <div class="flag" [ngClass]="country.flagClass"></div>
-      </div>
-      <div class="label-wrapper">
-        {{ country.name }}
+    @if (enableSearch) {
+      <input
+        #menuSearchInput
+        class="country-search"
+        [(ngModel)]="searchCriteria"
+        type="text"
+        [placeholder]="searchPlaceholder"
+        (click)="$event.stopPropagation()"
+        style="
+          width: calc(100% - 4px);
+          height: 34px;
+          border-top: none;
+          border-right: none;
+          border-left: none;
+          border-image: initial;
+          border-bottom: 1px solid rgb(221, 221, 221);
+          font-size: 14px;
+          padding: 20px 10px 24px;
+          box-sizing: border-box;
+          background: transparent;
+          margin: 2px;
+        "
+      />
+    }
+    @for (country of preferredCountriesInDropDown; track $index) {
+      <button
+        type="button"
+        mat-menu-item
+        class="country-list-button"
+        (click)="onCountrySelect(country, focusable)"
+      >
+        <div class="icon-wrapper">
+          <div class="flag" [ngClass]="country.flagClass"></div>
+        </div>
+        <div class="label-wrapper">
+          {{ country.name }}
 
-        @if (country?.dialCode) {
-        <span [style]="!searchCriteria ? 'white-space: nowrap' : ''"
-          >+{{ country.dialCode }}
+          @if (country?.dialCode) {
+            <span [style]="!searchCriteria ? 'white-space: nowrap' : ''"
+              >+{{ country.dialCode }}
 
-          @if(country.areaCodes) {
-          {{ country.areaCodes.join(', ') }}
+              @if (country.areaCodes) {
+                {{ country.areaCodes.join(', ') }}
+              }
+            </span>
           }
-        </span>
-        }
-      </div>
-    </button>
-    } @if(preferredCountriesInDropDown.length) {
-    <mat-divider></mat-divider>
-    } @for(country of allCountries | search : searchCriteria; track $index ) {
-    <button
-      type="button"
-      mat-menu-item
-      class="country-list-button"
-      (click)="onCountrySelect(country, focusable)"
-    >
-      <div class="icon-wrapper">
-        <div class="flag" [ngClass]="country.flagClass"></div>
-      </div>
-      <div class="label-wrapper">
-        {{ country.name }}
+        </div>
+      </button>
+    }
+    @if (preferredCountriesInDropDown.length) {
+      <mat-divider></mat-divider>
+    }
+    @for (country of allCountries | search: searchCriteria; track $index) {
+      <button
+        type="button"
+        mat-menu-item
+        class="country-list-button"
+        (click)="onCountrySelect(country, focusable)"
+      >
+        <div class="icon-wrapper">
+          <div class="flag" [ngClass]="country.flagClass"></div>
+        </div>
+        <div class="label-wrapper">
+          {{ country.name }}
 
-        @if(country?.dialCode) {
-        <span [style]="!searchCriteria ? 'white-space: nowrap' : ''"
-          >+{{ country.dialCode }}
+          @if (country?.dialCode) {
+            <span [style]="!searchCriteria ? 'white-space: nowrap' : ''"
+              >+{{ country.dialCode }}
 
-          @if(country.areaCodes) {
-          {{ country.areaCodes.join(', ') }}
+              @if (country.areaCodes) {
+                {{ country.areaCodes.join(', ') }}
+              }
+            </span>
           }
-        </span>
-        }
-      </div>
-    </button>
+        </div>
+      </button>
     }
   </mat-menu>