Push latest to prd

README.md

@@ -1 +1,151 @@
-# grid-demos-wc
+# Ignite UI for Web Components Examples
+
+Explore how to build lightning-fast apps with these Web Components examples. 
+
+[https://www.infragistics.com/webcomponents-grid-examples/home/inventory](https://www.infragistics.com/webcomponents-grid-examples/home/inventory)
+
+Each sample demonstrates the power of Ignite UI’s Web Components Grids, ensuring scalability, interactivity, and flexibility. Use them as a starting point to create scalable, customizable solutions. 
+
+## Financial Portfolio App
+<img width="975" height="597" alt="Web Components Financial Portfolio App" src="https://github.com/user-attachments/assets/2bea183f-b383-4e38-a654-194e36f9a1d9" />
+
+
+**Description:**  
+The Financial Portfolio app in Web Components delivers a clear overview of assets, profits, and losses using a sleek, responsive interface and dynamic, interactive charts. Designed with the Bootstrap Light theme, it provides a professional look and ensures a consistent user experience.  
+
+**Components Used:**  
+- Data Grid  
+- Avatar  
+- Button  
+- Icon  
+- Linear Bar  
+- Input Group  
+- Excel Exporter Service  
+- CSV Exporter Service  
+
+**Features:**  
+- Row Selection  
+- Sorting  
+- Column Hiding  
+- Column Pinning  
+- Exporting  
+- Conditional Cell Styling  
+- Filtering  
+
+---
+
+## ERP/Inventory
+<img width="975" height="540" alt="Web Components ERP/Inventory example" src="https://github.com/user-attachments/assets/0d1b17ae-1c03-4d0f-9e64-622f1a434b2d" />
+
+
+**Description:**  
+Built with the Ignite UI for Web Components Hierarchical Grid and styled with the Material Light theme, the ERP/Inventory example app enables users to manage and monitor large product datasets efficiently. It allows businesses to keep track of quantities, locations, and product details without performance slowdowns. 
+
+**Components Used:**  
+- Hierarchical Grid  
+- Data Chart  
+- Rating  
+- Dialog  
+- Badge  
+- Button  
+- Icon  
+- Excel Exporter Service  
+- CSV Exporter Service  
+
+**Features:**  
+- Row Selection  
+- Sorting  
+- Filtering  
+- Column Moving  
+- Column Hiding  
+- Column Pinning  
+- Exporting  
+
+---
+
+## Org Chart/HR Portal
+<img width="975" height="601" alt="Web Components HR Portal Example App" src="https://github.com/user-attachments/assets/7c58abe0-7d0d-4e47-9f4d-231a0fd58e33" />
+
+
+**Description:**  
+The HR Portal sample app leverages the Ignite UI for Web Components Tree Grid to present and manage employee information in an intuitive, hierarchical view. With its focus on usability, the portal simplifies the management of company-wide personnel data. 
+
+**Components Used:**  
+- Tree Grid  
+- Avatar  
+- Button  
+- Icon  
+- Paginator  
+- Excel Exporter Service  
+- CSV Exporter Service  
+
+**Features:**  
+- Row Selection  
+- Sorting  
+- Excel Style Filtering  
+- Column Hiding  
+- Column Pinning  
+- Exporting  
+- Paging  
+
+---
+
+## Fleet Management System
+<img width="975" height="592" alt="Web Components Fleet Management System Example" src="https://github.com/user-attachments/assets/1cd1fe7b-ca25-4000-b38f-3357823b0581" />
+
+
+**Description:**  
+This Fleet Management System showcases how the Ignite UI for Web Components Grid can power a detailed master-detail layout for operational tracking. This Web Components example app is tailored for managing fleet information, covering acquisition, maintenance, and performance details of each vehicle.  
+
+**Components Used:**  
+- Grid  
+- Pie Chart  
+- Category Chart  
+- Card  
+- Geographic Map  
+- Overlay  
+- Avatar  
+- Badge  
+- Tabs  
+- Carousel  
+- Slide  
+- Divider  
+- Select  
+- Button  
+- Icon  
+- Excel Exporter Service  
+- CSV Exporter Service  
+
+**Features:**  
+- Sorting  
+- Exporting  
+- Filtering  
+- Column Pinning  
+- Column Hiding  
+
+---
+
+## Sales Dashboard
+<img width="975" height="527" alt="Web Components Sales Dashboard Example App" src="https://github.com/user-attachments/assets/b539083f-3896-4d57-8431-7a1abc5ac7d0" />
+
+
+**Description:**  
+This Web Components example app demonstrates how to visualize and analyze key sales metrics using the Pivot Grid from Ignite UI for Web Components. Designed for data-driven teams, it enables users to evaluate sales by product, region, and time, while spotting trends through powerful interactive filtering and pivoting.  
+
+**Components Used:**  
+- Pivot Grid  
+- Pivot Data Selector  
+- Button  
+- Icon  
+- Toggle  
+- Tooltip  
+- Dropdown  
+- Excel Exporter Service  
+- CSV Exporter Service  
+
+**Features:**  
+- Sorting  
+- Exporting  
+- Filtering  
+- Resizing  
+- Super Compact Mode  

src/views/home/home-view.scss

@@ -14,6 +14,7 @@
   flex-direction: column;
   align-items: center;
   box-sizing: border-box;
+
   igc-chip {
     --ig-chip-hover-background: var(--ig-gray-300);
     --ig-chip-focus-background: var(--ig-gray-300);
@@ -37,6 +38,7 @@
   justify-content: space-between;
   background-color: var(--ig-surface-500);
   box-sizing: border-box;
+
   & a {
     text-decoration: none;
     display: block;
@@ -149,9 +151,32 @@
   }
 }
 
-:-webkit-full-screen {
+:fullscreen,
+:-webkit-full-screen,
+:host(:fullscreen),
+:host(:-webkit-full-screen),
+:host([data-browser-fullscreen]) {
   width: 100vw;
   height: 100vh;
-  overflow: auto;
+  display: flex;
+  flex-direction: column;
   background: white;
 }
+
+:host(:fullscreen) .demo-container,
+:host(:-webkit-full-screen) .demo-container,
+:host([data-browser-fullscreen]) .demo-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+:host(:fullscreen) .router-container,
+:host(:-webkit-full-screen) .router-container,
+:host([data-browser-fullscreen]) .router-container {
+  flex: 1;
+  display: flex;
+  overflow: auto;
+}