From 7e5e7ef28ee0b9a5b045be224574cb80c27c0b3b Mon Sep 17 00:00:00 2001
From: "azure-pipelines[bot]"
 <36771401+azure-pipelines[bot]@users.noreply.github.com>
Date: Mon, 13 Nov 2023 11:31:09 -0500
Subject: [PATCH] Adding changes from build
 igniteui-xplat-examples-output+PRs_2023.10.30.3 (#513)

Co-authored-by: tfsbuild <tfsbuild@infragistics.com>
---
 samples/grids/grid/action-strip/App.razor     |  3 +-
 .../grid/binding-composite-data/Program.cs    |  3 +-
 .../binding-composite-data/wwwroot/events.js  | 47 ++++++-------------
 .../grid/binding-nested-data-1/App.razor      |  2 +-
 .../grid/binding-nested-data-1/Program.cs     |  3 +-
 .../binding-nested-data-1/wwwroot/events.js   | 10 +---
 .../multi-column-headers-overview/App.razor   | 20 +++++---
 7 files changed, 36 insertions(+), 52 deletions(-)

diff --git a/samples/grids/grid/action-strip/App.razor b/samples/grids/grid/action-strip/App.razor
index 9c13223d0b..3930a069c3 100644
--- a/samples/grids/grid/action-strip/App.razor
+++ b/samples/grids/grid/action-strip/App.razor
@@ -20,7 +20,8 @@
 
                 <IgbGridEditingActions
                 EditRow="true"
-                DeleteRow="false">
+                DeleteRow="true"
+                AddRow="true">
                 </IgbGridEditingActions>
 
             </IgbActionStrip>
diff --git a/samples/grids/grid/binding-composite-data/Program.cs b/samples/grids/grid/binding-composite-data/Program.cs
index 88d624addd..0ebb0affe2 100644
--- a/samples/grids/grid/binding-composite-data/Program.cs
+++ b/samples/grids/grid/binding-composite-data/Program.cs
@@ -20,7 +20,8 @@ public static async Task Main(string[] args)
             builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
             // registering Ignite UI modules
             builder.Services.AddIgniteUIBlazor(
-                typeof(IgbGridModule)
+                typeof(IgbGridModule),
+                typeof(IgbInputModule)
             );
             await builder.Build().RunAsync();
         }
diff --git a/samples/grids/grid/binding-composite-data/wwwroot/events.js b/samples/grids/grid/binding-composite-data/wwwroot/events.js
index f55f4414a6..00bb088f97 100644
--- a/samples/grids/grid/binding-composite-data/wwwroot/events.js
+++ b/samples/grids/grid/binding-composite-data/wwwroot/events.js
@@ -3,6 +3,7 @@ igRegisterScript("WebGridCompositeContactCellTemplate", (ctx) => {
     var html = window.igTemplating.html;
     return html` <div class="contact-container">
     <span><strong>Name:</strong> ${ctx.cell.row.data.ContactName}</span>
+    <br />
     <span><strong>Title:</strong> ${ctx.cell.row.data.ContactTitle}</span>
     <br />
     <span><strong>Company:</strong> ${ctx.cell.row.data.CompanyName}</span>
@@ -15,22 +16,12 @@ igRegisterScript("WebGridCompositeContactEditCellTemplate", (ctx) => {
     window.keyUpHandler = function () {
         ctx.cell.row.data[window.event.target.id] = window.event.target.value;
     }
-    return html`<div class="contact-container--edit">
-    <div style="display:flex; margin-top:3px">
-        <div>
-            <strong>Name:</strong>
-            <input id='ContactName' onkeyup='keyUpHandler()' value="${ctx.cell.row.data.ContactName}"></input>
-        </div>
-        <div style="margin-left: 10px">
-            <strong>Title:</strong>
-            <input id='ContactTitle' onkeyup='keyUpHandler()' value='${ctx.cell.row.data.ContactTitle}'></input>
-        </div>
-    </div>
-    <div style="margin-top: 10px">
-        <strong>Company:</strong>
-        <input id='CompanyName' onkeyup='keyUpHandler()' value='${ctx.cell.row.data.CompanyName}'></input>
-    </div>
-</div>`;
+    return html`<div class="contact-container--edit" style="padding: 1rem">
+                    <igc-input id="ContactName" label='Name' type="text" name="name" value="${ctx.cell.row.data.ContactName}" onkeyup='keyUpHandler()'></igc-input>
+                    <igc-input id="ContactTitle" label='Title' type="text" name="name" value="${ctx.cell.row.data.ContactTitle}" onkeyup='keyUpHandler()'></igc-input>
+                    <igc-input id="CompanyName" label='Company' type="text" name="name" value="${ctx.cell.row.data.CompanyName}" onkeyup='keyUpHandler()'></igc-input>
+                </div>
+   `;
 }, false);
 
 igRegisterScript("WebGridCompositeAddressCellTemplate", (ctx) => {
@@ -56,22 +47,12 @@ igRegisterScript("WebGridCompositeAddressEditCellTemplate", (ctx) => {
         ctx.cell.row.data[window.event.target.id] = window.event.target.value;
     }
 
-    return html`<div class="address-container--edit">
-    <div>
-        <span><strong>Country:</strong></span>
-        <input id='Country' onkeyup='keyUpHandler()' value="${ctx.cell.row.data.Country}"></input>
-        <br>
-        <span><strong>City:</strong></span>
-        <input id='City' onkeyup='keyUpHandler()' value="${ctx.cell.row.data.City}"></input>
-    </div>
-    <div>
-        <span><strong>Postal Code:</strong></span>
-        <input id='PostalCode' onkeyup='keyUpHandler()' value="${ctx.cell.row.data.PostalCode}"></input>
-        <br>
-        <span><strong>Selected:</strong></span>
-        <input id='Phone' onkeyup='keyUpHandler()' value="${ctx.cell.row.data.Phone}"></input>
-    </div>
-    <br>
-</div>`;
+    return html`
+                <div class="contact-container--edit" style="padding: 1rem">
+                    <igc-input id="Country" label='Country' type="text" name="country" value="${ctx.cell.row.data.Country}" onkeyup='keyUpHandler()'></igc-input>
+                    <igc-input id="City" label='City' type="text" name="city" value="${ctx.cell.row.data.City}" onkeyup='keyUpHandler()'></igc-input>
+                    <igc-input id="PostalCode" label='PostalCode' type="text" name="postalcode" value="${ctx.cell.row.data.PostalCode}" onkeyup='keyUpHandler()'></igc-input>
+                    <igc-input id="Phone" label='Phone' type="text" name="phone" value="${ctx.cell.row.data.Phone}" onkeyup='keyUpHandler()'></igc-input>
+                </div>`;
 }, false);
 
diff --git a/samples/grids/grid/binding-nested-data-1/App.razor b/samples/grids/grid/binding-nested-data-1/App.razor
index 30de98673b..069e447eb1 100644
--- a/samples/grids/grid/binding-nested-data-1/App.razor
+++ b/samples/grids/grid/binding-nested-data-1/App.razor
@@ -32,7 +32,7 @@
             Field="Employees"
             Header="Employees"
             BodyTemplateScript="WebGridNestedDataCellTemplate"
-            Width="30%"
+            Width="20%"
             Name="column1"
             @ref="column1">
             </IgbColumn>
diff --git a/samples/grids/grid/binding-nested-data-1/Program.cs b/samples/grids/grid/binding-nested-data-1/Program.cs
index 88d624addd..0ebb0affe2 100644
--- a/samples/grids/grid/binding-nested-data-1/Program.cs
+++ b/samples/grids/grid/binding-nested-data-1/Program.cs
@@ -20,7 +20,8 @@ public static async Task Main(string[] args)
             builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
             // registering Ignite UI modules
             builder.Services.AddIgniteUIBlazor(
-                typeof(IgbGridModule)
+                typeof(IgbGridModule),
+                typeof(IgbInputModule)
             );
             await builder.Build().RunAsync();
         }
diff --git a/samples/grids/grid/binding-nested-data-1/wwwroot/events.js b/samples/grids/grid/binding-nested-data-1/wwwroot/events.js
index 20dab40085..c6f5c0efb7 100644
--- a/samples/grids/grid/binding-nested-data-1/wwwroot/events.js
+++ b/samples/grids/grid/binding-nested-data-1/wwwroot/events.js
@@ -14,14 +14,8 @@ igRegisterScript("WebGridNestedDataCellTemplate", (ctx) => {
         ${person.Name}
         </div>
         <div class="description">
-            <div style="display: flex; align-items: center;">
-                <label for="title" style="width: 2rem; margin: 0rem;">Title</label>
-                <input id='Title' type="text" name="title" value="${person.Title}" style="text-overflow: ellipsis;" />
-            </div>
-            <div style="display: flex; align-items: center;">
-                <label for="age" style="width: 2rem; margin: 0rem;">Age</label>
-                <input id='Age' type="text" name="title" value="${person.Age}" style="text-overflow: ellipsis;" />
-            </div>
+            <igc-input label='Title' type="text" name="title" value="${person.Title}" style="text-overflow: ellipsis;"></igc-input>
+            <igc-input label="Age" type="text" name="title" value="${person.Age}" style="text-overflow: ellipsis;"></igc-input>
         </div>
     </igc-expansion-panel>
         `;
diff --git a/samples/grids/tree-grid/multi-column-headers-overview/App.razor b/samples/grids/tree-grid/multi-column-headers-overview/App.razor
index 8a7ca8fec9..1e12740991 100644
--- a/samples/grids/tree-grid/multi-column-headers-overview/App.razor
+++ b/samples/grids/tree-grid/multi-column-headers-overview/App.razor
@@ -6,14 +6,13 @@
         Name="PropertyEditor"
         @ref="propertyEditor"
 
-        Target="Treegrid"
         DescriptionType="WebTreeGrid"
         IsHorizontal="true"
         IsWrappingEnabled="true">
             <IgbPropertyEditorPropertyDescription
             ValueType="PropertyEditorValueType.Button"
             PrimitiveValue="@("Toggle First Group Pinned")"
-            ButtonClicked="WebGridPinFirstGroupToggle"
+            ButtonClicked="WebTreeGridPinFirstGroupToggle"
             Name="propertyEditorPropertyDescription1"
             @ref="propertyEditorPropertyDescription1">
             </IgbPropertyEditorPropertyDescription>
@@ -21,7 +20,7 @@
             <IgbPropertyEditorPropertyDescription
             ValueType="PropertyEditorValueType.Button"
             PrimitiveValue="@("Toggle First Group Hidden")"
-            ButtonClicked="WebGridHideFirstGroupToggle"
+            ButtonClicked="WebTreeGridHideFirstGroupToggle"
             Name="propertyEditorPropertyDescription2"
             @ref="propertyEditorPropertyDescription2">
             </IgbPropertyEditorPropertyDescription>
@@ -130,6 +129,8 @@
 
 @code {
 
+    private Action BindElements { get; set; }
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         var propertyEditor = this.propertyEditor;
@@ -137,6 +138,11 @@
         var propertyEditorPropertyDescription2 = this.propertyEditorPropertyDescription2;
         var treeGrid = this.treeGrid;
 
+        this.BindElements = () => {
+            propertyEditor.Target = this.treeGrid;
+        };
+        this.BindElements();
+
     }
 
     private IgbPropertyEditorPanel propertyEditor;
@@ -144,15 +150,15 @@
     private IgbPropertyEditorPropertyDescription propertyEditorPropertyDescription2;
     private IgbTreeGrid treeGrid;
 
-    public void WebGridPinFirstGroupToggle(IgbPropertyEditorPropertyDescriptionButtonClickEventArgs args)
+    public void WebTreeGridPinFirstGroupToggle(IgbPropertyEditorPropertyDescriptionButtonClickEventArgs args)
     {
-        var columnGroup = this.grid.ActualColumns[1];
+        var columnGroup = this.treeGrid.ActualColumns[1];
         columnGroup.Pinned = !columnGroup.Pinned;
     }
 
-    public void WebGridHideFirstGroupToggle(IgbPropertyEditorPropertyDescriptionButtonClickEventArgs args)
+    public void WebTreeGridHideFirstGroupToggle(IgbPropertyEditorPropertyDescriptionButtonClickEventArgs args)
     {
-        var columnGroup = this.grid.ActualColumns[1];
+        var columnGroup = this.treeGrid.ActualColumns[1];
         columnGroup.Hidden = !columnGroup.Hidden;
     }