From 4c57057780f19b3e70c0694e9dc6f5576d217b02 Mon Sep 17 00:00:00 2001
From: Justin White <juwhite@pavlovmedia.com>
Date: Thu, 16 Nov 2023 11:39:03 -0600
Subject: [PATCH] "Field" is deprecated, use "optionLabel" instead

---
 src/app/showcase/doc/autocomplete/dropdowndoc.ts       |  6 +++---
 src/app/showcase/doc/autocomplete/forceselectiondoc.ts |  6 +++---
 src/app/showcase/doc/autocomplete/objectsdoc.ts        | 10 +++++-----
 src/app/showcase/doc/autocomplete/reactiveformsdoc.ts  |  6 +++---
 src/app/showcase/doc/autocomplete/templatedoc.ts       |  6 +++---
 src/app/showcase/doc/autocomplete/virtualscrolldoc.ts  |  6 +++---
 6 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/app/showcase/doc/autocomplete/dropdowndoc.ts b/src/app/showcase/doc/autocomplete/dropdowndoc.ts
index 10cda8281a5..dc1e66f2e66 100644
--- a/src/app/showcase/doc/autocomplete/dropdowndoc.ts
+++ b/src/app/showcase/doc/autocomplete/dropdowndoc.ts
@@ -18,7 +18,7 @@ interface AutoCompleteCompleteEvent {
             </p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-autoComplete [(ngModel)]="selectedCountry" [dropdown]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
+            <p-autoComplete [(ngModel)]="selectedCountry" [dropdown]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>
         </div>
         <app-code [code]="code" selector="autocomplete-dropdown-demo"></app-code>
     </section>`
@@ -60,11 +60,11 @@ export class DropdownDoc implements OnInit {
 
     code: Code = {
         basic: `
-<p-autoComplete [(ngModel)]="selectedCountry" [dropdown]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>`,
+<p-autoComplete [(ngModel)]="selectedCountry" [dropdown]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>`,
 
         html: `
 <div class="card flex justify-content-center">
-    <p-autoComplete [(ngModel)]="selectedCountry" [dropdown]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
+    <p-autoComplete [(ngModel)]="selectedCountry" [dropdown]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>
 </div>`,
 
         typescript: `
diff --git a/src/app/showcase/doc/autocomplete/forceselectiondoc.ts b/src/app/showcase/doc/autocomplete/forceselectiondoc.ts
index f5a8b67f5af..f24a8eba4be 100644
--- a/src/app/showcase/doc/autocomplete/forceselectiondoc.ts
+++ b/src/app/showcase/doc/autocomplete/forceselectiondoc.ts
@@ -14,7 +14,7 @@ interface AutoCompleteCompleteEvent {
             <p>ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input value is cleared to make sure the value passed to the model is always one of the suggestions.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-autoComplete [(ngModel)]="selectedCountry" [forceSelection]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
+            <p-autoComplete [(ngModel)]="selectedCountry" [forceSelection]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>
         </div>
         <app-code [code]="code" selector="autocomplete-force-selection-demo"></app-code>
     </section>`
@@ -54,11 +54,11 @@ export class ForceSelectionDoc implements OnInit {
 
     code: Code = {
         basic: `
-<p-autoComplete [(ngModel)]="selectedCountry" [forceSelection]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>`,
+<p-autoComplete [(ngModel)]="selectedCountry" [forceSelection]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>`,
 
         html: `
 <div class="card flex justify-content-center">
-    <p-autoComplete [(ngModel)]="selectedCountry" [forceSelection]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
+    <p-autoComplete [(ngModel)]="selectedCountry" [forceSelection]="true" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>
 </div>`,
 
         typescript: `
diff --git a/src/app/showcase/doc/autocomplete/objectsdoc.ts b/src/app/showcase/doc/autocomplete/objectsdoc.ts
index 9fb204610af..ea7a2b8784f 100644
--- a/src/app/showcase/doc/autocomplete/objectsdoc.ts
+++ b/src/app/showcase/doc/autocomplete/objectsdoc.ts
@@ -12,12 +12,12 @@ interface AutoCompleteCompleteEvent {
     template: ` <section class="py-4">
         <app-docsectiontext [title]="title" [id]="id">
             <p>
-                AutoComplete can also work with objects using the <i>field</i> property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with a
-                Country object that has name and code fields such as <i>&#123;name: "United States", code:"USA"&#125;</i>.
+                AutoComplete can also work with objects using the <i>optionLabel</i> property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with
+                a Country object that has name and code fields such as <i>&#123;name: "United States", code:"USA"&#125;</i>.
             </p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-autoComplete [(ngModel)]="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
+            <p-autoComplete [(ngModel)]="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>
         </div>
         <app-code [code]="code" selector="autocomplete-objects-demo"></app-code>
     </section>`
@@ -57,11 +57,11 @@ export class ObjectsDoc implements OnInit {
 
     code: Code = {
         basic: `
-<p-autoComplete [(ngModel)]="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>`,
+<p-autoComplete [(ngModel)]="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>`,
 
         html: `
 <div class="card flex justify-content-center">
-    <p-autoComplete [(ngModel)]="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
+    <p-autoComplete [(ngModel)]="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>
 </div>`,
 
         typescript: `
diff --git a/src/app/showcase/doc/autocomplete/reactiveformsdoc.ts b/src/app/showcase/doc/autocomplete/reactiveformsdoc.ts
index cb4b462c4b0..b83b9a35c34 100644
--- a/src/app/showcase/doc/autocomplete/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/autocomplete/reactiveformsdoc.ts
@@ -16,7 +16,7 @@ interface AutoCompleteCompleteEvent {
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <form [formGroup]="formGroup">
-                <p-autoComplete formControlName="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
+                <p-autoComplete formControlName="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>
             </form>
         </div>
         <app-code [code]="code" selector="autocomplete-reactive-forms-demo"></app-code>
@@ -62,13 +62,13 @@ export class ReactiveFormsDoc implements OnInit {
     code: Code = {
         basic: `
 <form [formGroup]="formGroup">
-    <p-autoComplete formControlName="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
+    <p-autoComplete formControlName="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>
 </form>`,
 
         html: `
 <div class="card flex justify-content-center">
     <form [formGroup]="formGroup">
-        <p-autoComplete formControlName="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name"></p-autoComplete>
+        <p-autoComplete formControlName="selectedCountry" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name"></p-autoComplete>
     </form>
 </div>`,
 
diff --git a/src/app/showcase/doc/autocomplete/templatedoc.ts b/src/app/showcase/doc/autocomplete/templatedoc.ts
index e1de96bb6da..3b4255fd56d 100644
--- a/src/app/showcase/doc/autocomplete/templatedoc.ts
+++ b/src/app/showcase/doc/autocomplete/templatedoc.ts
@@ -15,7 +15,7 @@ interface AutoCompleteCompleteEvent {
             <p><i>item</i> template allows displaying custom content inside the suggestions panel. The local ng-template variable passed to the ng-template is an object in the suggestions array.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-autoComplete [(ngModel)]="selectedCountryAdvanced" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name" [dropdown]="true">
+            <p-autoComplete [(ngModel)]="selectedCountryAdvanced" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name" [dropdown]="true">
                 <ng-template let-country pTemplate="item">
                     <div class="flex align-items-center gap-2">
                         <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" style="width: 18px" />
@@ -62,7 +62,7 @@ export class TemplateDoc {
     code: Code = {
         basic: `
 <p-autoComplete [(ngModel)]="selectedCountryAdvanced" [suggestions]="filteredCountries" 
-    (completeMethod)="filterCountry($event)" field="name" [dropdown]="true">
+    (completeMethod)="filterCountry($event)" optionLabel="name" [dropdown]="true">
         <ng-template let-country pTemplate="item">
             <div class="flex align-items-center gap-2">
                 <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" style="width: 18px"/>
@@ -73,7 +73,7 @@ export class TemplateDoc {
 
         html: `
 <div class="card flex justify-content-center">
-    <p-autoComplete [(ngModel)]="selectedCountryAdvanced" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name" [dropdown]="true">
+    <p-autoComplete [(ngModel)]="selectedCountryAdvanced" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" optionLabel="name" [dropdown]="true">
         <ng-template let-country pTemplate="item">
             <div class="flex align-items-center gap-2">
                 <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" style="width: 18px"/>
diff --git a/src/app/showcase/doc/autocomplete/virtualscrolldoc.ts b/src/app/showcase/doc/autocomplete/virtualscrolldoc.ts
index b0f556092e6..3f179700488 100644
--- a/src/app/showcase/doc/autocomplete/virtualscrolldoc.ts
+++ b/src/app/showcase/doc/autocomplete/virtualscrolldoc.ts
@@ -16,7 +16,7 @@ interface AutoCompleteCompleteEvent {
             </p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-autoComplete [(ngModel)]="selectedItem" [virtualScroll]="true" [suggestions]="filteredItems" [virtualScrollItemSize]="34" (completeMethod)="filterItems($event)" field="label" [dropdown]="true"> </p-autoComplete>
+            <p-autoComplete [(ngModel)]="selectedItem" [virtualScroll]="true" [suggestions]="filteredItems" [virtualScrollItemSize]="34" (completeMethod)="filterItems($event)" optionLabel="label" [dropdown]="true"> </p-autoComplete>
         </div>
         <app-code [code]="code" selector="autocomplete-virtual-scroll-demo"></app-code>
     </section>`
@@ -56,11 +56,11 @@ export class VirtualScrollDoc {
 
     code: Code = {
         basic: `
-<p-autoComplete [(ngModel)]="selectedItem" [virtualScroll]="true" [suggestions]="filteredItems" [virtualScrollItemSize]="34" (completeMethod)="filterItems($event)" field="label" [dropdown]="true"> </p-autoComplete>`,
+<p-autoComplete [(ngModel)]="selectedItem" [virtualScroll]="true" [suggestions]="filteredItems" [virtualScrollItemSize]="34" (completeMethod)="filterItems($event)" optionLabel="label" [dropdown]="true"> </p-autoComplete>`,
 
         html: `
 <div class="card flex justify-content-center">
-    <p-autoComplete [(ngModel)]="selectedItem" [virtualScroll]="true" [suggestions]="filteredItems" [virtualScrollItemSize]="34" (completeMethod)="filterItems($event)" field="label" [dropdown]="true"> </p-autoComplete>
+    <p-autoComplete [(ngModel)]="selectedItem" [virtualScroll]="true" [suggestions]="filteredItems" [virtualScrollItemSize]="34" (completeMethod)="filterItems($event)" optionLabel="label" [dropdown]="true"> </p-autoComplete>
 </div>`,
 
         typescript: `