Add TileManager samples

browser/IgBlazorSamples.Client/wwwroot/index.html

@@ -236,6 +236,8 @@
 <script src="sb/tree-grid-toolbar-style.js"></script>
 <script src="sb/combo-templates.js"></script>
 <script src="sb/dock-manager-styling.js"></script>
+<script src="sb/tile-manager-actions.js"></script>
+<script src="sb/tile-manager-layout.js"></script>
 <script src="sb/geo-map-marker-template.js"></script>
 <script src="sb/geo-map-shape-styling.js"></script>
 <script src="sb/geo-map-type-shape-polygon-series.js"></script>

samples/layouts/tile-manager/actions/App.razor

@@ -0,0 +1,55 @@
+@using IgniteUI.Blazor.Controls
+
+<link href="/layout.css" rel="stylesheet" />
+<script src="/actions.js"></script>
+
+<div class="container sample center">
+    <IgbIcon @ref="@RegisterIconRef" />
+    <IgbTileManager ColumnCount="2" Gap="20px">
+        <IgbTile>
+            <h3 slot="title">Default Actions</h3>
+            <p>This tile has default actions and title.</p>
+        </IgbTile>
+        <IgbTile DisableFullscreen="true">
+            <h3 slot="title">No Fullscreen Action</h3>
+            <p>Fullscreen is disabled via property.</p>
+        </IgbTile>
+        <IgbTile DisableFullscreen="true" DisableMaximize="true">
+            <h3 slot="title">Custom Actions</h3>
+            <IgbIconButton id="customOne" slot="actions" Variant="IconButtonVariant.Flat" Collection="material" onclick="customOneClick(event)"
+            IconName="north_east" aria-label="north_east"></IgbIconButton>
+            <p>Replace the default actions with custom ones, and include extra actions when the tile is maximized.</p>
+        </IgbTile>
+        <IgbTile DisableFullscreen="true" DisableMaximize="true">
+            <IgbIconButton id="customTwo" slot="actions" Variant="IconButtonVariant.Flat" Collection="material" IconName="north_east" onclick="customTwoClick(event)"></IgbIconButton>
+            <p>Display only custom actions in the header.</p>
+        </IgbTile>
+        <IgbTile DisableFullscreen="true" DisableMaximize="true">
+            <h3 slot="title">Only title</h3>
+            <p>Display only title in the header.</p>
+        </IgbTile>
+        <IgbTile DisableFullscreen="true" DisableMaximize="true">
+            <p>Content only.</p>
+        </IgbTile>
+    </IgbTileManager>
+</div>  
+
+@code {
+    private IgbIcon RegisterIconRef { get; set; }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (this.RegisterIconRef != null && firstRender)
+        {
+            await this.RegisterIconRef.EnsureReady();
+            const string northEast = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='#5f6368'><path d='m216-160-56-56 464-464H360v-80h400v400h-80v-264L216-160Z'/></svg>";
+            await this.RegisterIconRef.RegisterIconFromTextAsync("north_east", northEast, "material");
+            const string southWest = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='#5f6368'><path d='M200-200v-400h80v264l464-464 56 56-464 464h264v80H200Z'/></svg>";
+            await this.RegisterIconRef.RegisterIconFromTextAsync("south_west", southWest, "material");
+            const string more = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='#5f6368'><path d='M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z'/></svg>";
+            await this.RegisterIconRef.RegisterIconFromTextAsync("more", more, "material");
+            const string chart = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='#5f6368'><path d='M640-160v-280h160v280H640Zm-240 0v-640h160v640H400Zm-240 0v-440h160v440H160Z'/></svg>";
+            await this.RegisterIconRef.RegisterIconFromTextAsync("chart", chart, "material");
+        }
+    }
+}

samples/layouts/tile-manager/actions/BlazorClientApp.csproj

@@ -0,0 +1,25 @@
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+
+  <PropertyGroup>
+    <TargetFramework>net9.0</TargetFramework>
+    <RazorLangVersion>3.0</RazorLangVersion>
+    <AssemblyName>Infragistics.Samples</AssemblyName>
+    <RootNamespace>Infragistics.Samples</RootNamespace>
+  </PropertyGroup>
+
+  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
+    <NoWarn>1701;1702,IDE0028,BL0005,0219,CS1998</NoWarn>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="IgniteUI.Blazor" Version="25.1.82" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.0" />
+    <PackageReference Include="System.Net.Http.Json" Version="9.0.0" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Folder Include="Services\" />
+  </ItemGroup>
+
+</Project>

samples/layouts/tile-manager/actions/BlazorClientApp.sln

@@ -0,0 +1,24 @@
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 16
+VisualStudioVersion = 16.0.29613.14
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorClientApp", "BlazorClientApp.csproj", "{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {FC52AAC8-4488-40AE-9621-75F6BA744B18}
+	EndGlobalSection
+EndGlobal

samples/layouts/tile-manager/actions/Program.cs

@@ -0,0 +1,31 @@
+using System;
+using System.Net.Http;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using System.Text;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging;
+using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
+
+namespace Infragistics.Samples
+{
+    public class Program
+    {
+        public static async Task Main(string[] args)
+        {
+            var builder = WebAssemblyHostBuilder.CreateDefault(args);
+            builder.RootComponents.Add<App>("app");
+            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+            // registering Ignite UI modules
+            builder.Services.AddIgniteUIBlazor(
+                typeof(IgbTileManagerModule),
+                typeof(IgbIconButtonModule),
+                typeof(IgbButtonModule),
+                typeof(IgbIconModule)
+            );
+            await builder.Build().RunAsync();
+        }
+    }
+}

samples/layouts/tile-manager/actions/Properties/launchSettings.json

@@ -0,0 +1,27 @@
+{
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:4200",
+      "sslPort": 44385
+    }
+  },
+  "profiles": {
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,      
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "BlazorClientApp": {
+      "commandName": "Project",
+      "launchBrowser": true,            
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      },
+      "applicationUrl": "https://localhost:5001;http://localhost:4200"      
+    }
+  }
+}

samples/layouts/tile-manager/actions/README.md

@@ -0,0 +1,70 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of Blazor application with example of Actions feature using [Tile Manager](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <!-- https://static.infragistics.com/xplatform/images/browsers -->
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./App.razor" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://infragistics.com/blazor-client/samples/layouts/tile-manager/actions" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <!-- <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-blazor-examples/tree/master/samples/layouts/tile-manager/actions?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/App.razor" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a> -->
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Setup
+
+- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install)
+
+## Running App in Visual Studio 2022
+
+NOTE: VS 2022 has better code highlighting and error detection than VS Code does.
+
+- open **Visual Studio 2022** as an administrator
+
+- open the **BlazorClientApp.sln** solution
+
+- right click solution and select **Restore NuGet Packages** menu item
+
+- click **Debug** menu and select **Start Debugging** or press **F5** key
+
+
+## Running App in VS Code
+
+- open **VS Code** as an administrator
+
+- open this folder in **VS Code**
+
+- open a terminal window
+
+- to restore assemblies, run this command:
+```dotnet restore```
+
+- to run samples, run this command:
+```dotnet watch run```
+
+- wait for for message:
+**Now listening on: http://localhost:4200**
+
+- open **http://localhost:4200** in your browser
+
+
+## Resources
+
+- [Razor Component Models](https://www.codemag.com/article/1911052)
+- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax)
+- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components)

samples/layouts/tile-manager/actions/_Imports.razor

@@ -0,0 +1,8 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.WebAssembly.Http
+@using Microsoft.JSInterop
+@using Infragistics.Samples

samples/layouts/tile-manager/actions/wwwroot/actions.js

@@ -0,0 +1,64 @@
+window.customOneClick = (event) => {
+    const tile = event.target.closest('igc-tile');
+
+    if (tile) {
+        tile.maximized = !tile.maximized;
+
+        const actionsSlot = tile.querySelector('[slot="actions"]');
+        const currentBtn = event.target;
+
+        if (currentBtn) {
+            if (tile.maximized) {
+                currentBtn.setAttribute('name', 'south_west');
+                currentBtn.setAttribute('aria-label', 'collapse');
+
+                const chartBtn = document.createElement('igc-icon-button');
+                chartBtn.classList.add('additional-action');
+                chartBtn.setAttribute('slot', 'actions');
+                chartBtn.setAttribute('variant', 'flat');
+                chartBtn.setAttribute('collection', 'material');
+                chartBtn.setAttribute('name', 'chart');
+                chartBtn.setAttribute('aria-label', 'chart');
+
+                const moreBtn = document.createElement('igc-icon-button');
+                moreBtn.classList.add('additional-action');
+                moreBtn.setAttribute('slot', 'actions');
+                moreBtn.setAttribute('variant', 'flat');
+                moreBtn.setAttribute('collection', 'material');
+                moreBtn.setAttribute('name', 'more');
+                moreBtn.setAttribute('aria-label', 'more');
+
+                tile.append(chartBtn);
+                tile.append(moreBtn);
+            } else {
+                currentBtn.setAttribute('name', 'north_east');
+                currentBtn.setAttribute('aria-label', 'expand');
+
+                const additionalButtons =
+                    actionsSlot.parentElement?.querySelectorAll('.additional-action');
+                additionalButtons?.forEach((btn) => btn.remove());
+            }
+        }
+    }
+};
+
+window.customTwoClick = (event) => {
+    const tile = event.target.closest('igc-tile');
+
+    if (tile) {
+        tile.maximized = !tile.maximized;
+
+        const currentBtn = event.target;
+
+        if (currentBtn) {
+            if (tile.maximized) {
+                currentBtn.setAttribute('name', 'south_west');
+                currentBtn.setAttribute('aria-label', 'collapse');
+            }
+            else {
+                currentBtn.setAttribute('name', 'north_east');
+                currentBtn.setAttribute('aria-label', 'expand');
+            }
+        }
+    }
+};

samples/layouts/tile-manager/actions/wwwroot/index.css

@@ -0,0 +1,4 @@
+/* 
+CSS styles are loaded from the shared CSS file located at:
+https://static.infragistics.com/xplatform/css/samples/
+*/

samples/layouts/tile-manager/actions/wwwroot/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="description" content="Explore samples of IgniteUI for Blazor components.">
+    <meta name="keywords" content="Sample, Example, Blazor, IgniteUI for Blazor, Components, Infragistics">
+    <meta name="author" content="Infragistics">
+    <title>Samples | IgniteUI for Blazor | Infragistics</title>
+    <base href="/" />
+    <link href="https://static.infragistics.com/xplatform/images/browsers/blazor.ico" rel="icon" type="image/x-icon">
+    <link href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css" rel="stylesheet" />
+    <link href="https://static.infragistics.com/xplatform/css/samples/blazor.css" rel="stylesheet" />
+    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+</head>
+
+<body>
+    <app class="app"><img class="app-loading" src="https://static.infragistics.com/xplatform/images/browsers/loading.gif" /></app>
+    <div class="app-error-ui">
+        An unhandled error has occurred.
+        <a href="" class="reload">Reload</a>
+        <a class="app-error-dismiss">🗙</a>
+    </div>
+    <!-- importing blazor bundle for IG controls: -->
+    <script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
+    <script src="_framework/blazor.webassembly.js"></script>
+
+</body>
+
+</html>

samples/layouts/tile-manager/actions/wwwroot/layout.css

@@ -0,0 +1,23 @@
+igc-tile-manager {
+    margin-bottom: 5px;
+}
+
+igc-tile:nth-child(n + 3):nth-child(-n + 4)::part(actions) {
+    padding: 13px 16px;
+}
+
+igc-tile:nth-child(n+3)::part(header) {
+    padding: 0px;
+}
+
+igc-tile:nth-child(5)::part(header) {
+    padding: 18px 0 18px 0;
+}
+
+p, igc-tile:nth-child(3) h3, igc-tile:nth-child(5) h3 {
+    margin-left: 20px;
+}
+
+igc-tile:nth-last-child(1) p {
+    margin-top: 30px;
+}