refactor(templateString): prettier

rbalet · Sep 27, 2024 · 8b9b062 · 8b9b062
1 parent a9ccb62
commit 8b9b062
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 70 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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>