feat(tooltip): update samples content

live-editing/configs/TooltipConfigGenerator.ts

@@ -9,48 +9,56 @@ export class TooltipConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
-        // Simple Tooltip Sample
+        // tooltip overview
         configs.push(new Config({
-            component: 'TooltipSimpleComponent',
+            component: 'TooltipOverviewComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/interactions/tooltip/"
         }));
 
-        // Rich Tooltip Sample
+        // tooltip variants
         configs.push(new Config({
-            component: 'TooltipRichComponent',
+            component: 'TooltipVariantsComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/interactions/tooltip/"
         }));
 
-        // Placement Tooltip Sample
+        // tooltip position
         configs.push(new Config({
-            component: 'TooltipPlacementComponent',
+            component: 'TooltipPositionComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/interactions/tooltip/"
         }));
 
-        // Advanced Tooltip Sample
+        // tooltip arrow position
         configs.push(new Config({
-            component: 'TooltipAdvancedComponent',
+            component: 'TooltipArrowPositionComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/interactions/tooltip/"
+        }));
+
+        // tooltip custom
+        configs.push(new Config({
+            component: 'TooltipCustomComponent',
             appConfig: BaseAppConfig,
             additionalDependencies: ['igniteui-angular-charts', 'igniteui-angular-core'],
-            additionalFiles: ['/src/app/interactions/tooltip/tooltip-advanced/IncomeTaxes.ts'],
+            additionalFiles: ['/src/app/interactions/tooltip/tooltip-custom/IncomeTaxes.ts'],
             shortenComponentPathBy: "/interactions/tooltip/"
         }));
 
-        // Tooltip Triggers Sample
+        // tooltip styling
         configs.push(new Config({
-            component: 'TooltipTriggersComponent',
+            component: 'TooltipStylingComponent',
             appConfig: BaseAppConfig,
-            additionalDependencies: ['igniteui-webcomponents'],
             shortenComponentPathBy: "/interactions/tooltip/"
         }));
 
-        // Style Tooltip Sample
+        // tooltip tailwind styling
         configs.push(new Config({
-            component: 'TooltipStyleComponent',
+            component: 'TooltipTailwindStylingComponent',
             appConfig: BaseAppConfig,
+            additionalDependencies: ['igniteui-angular-charts', 'igniteui-angular-core', 'tailwindcss', '@tailwindcss/postcss'],
+            additionalFiles: ['.postcssrc.json'],
             shortenComponentPathBy: "/interactions/tooltip/"
         }));
 

src/app/app.routes.server.ts

@@ -25,6 +25,24 @@ export const serverRoutes: ServerRoute[] = [
         path: 'samples/data-entries/**',
         renderMode: RenderMode.Client // TODO: Fails with Prerender
     },
+    {
+        // Charts access `window` in their constructors, which fails under
+        // Prerender. Must precede the interactions/** globs.
+        path: 'interactions/tooltip-custom',
+        renderMode: RenderMode.Client
+    },
+    {
+        path: 'samples/interactions/tooltip-custom',
+        renderMode: RenderMode.Client
+    },
+    {
+        path: 'interactions/tooltip-tailwind-styling',
+        renderMode: RenderMode.Client
+    },
+    {
+        path: 'samples/interactions/tooltip-tailwind-styling',
+        renderMode: RenderMode.Client
+    },
     {
         path: 'interactions/**',
         renderMode: RenderMode.Prerender

src/app/interactions/interactions-routes-data.ts

@@ -34,13 +34,13 @@ export const interactionsRoutesData = {
     'toggle-sample-2': { displayName: 'Automatic Toggle Actions', parentName: 'Toggle' },
     'toggle-sample-3': { displayName: 'Toggle Service Provider', parentName: 'Toggle' },
     'toggle-sample-4': { displayName: 'Offset Toggle', parentName: 'Toggle' },
-    'tooltip-simple': { displayName: 'Simple Tooltip', parentName: 'Tooltip' },
-    'tooltip-rich': { displayName: 'Rich Tooltip', parentName: 'Tooltip' },
-    'tooltip-placement': { displayName: 'Tooltip Placement', parentName: 'Tooltip' },
-    'tooltip-advanced': { displayName: 'Advanced Tooltip', parentName: 'Tooltip' },
-    'tooltip-triggers': { displayName: 'Tooltip Triggers', parentName: 'Tooltip' },
-    'tooltip-style': { displayName: 'Tooltip Style', parentName: 'Tooltip' },
-    'tooltip-tailwind-style': { displayName: 'Tooltip Tailwind Style', parentName: 'Tooltip' },
+    'tooltip-overview': { displayName: 'Tooltip Overview', parentName: 'Tooltip' },
+    'tooltip-variants': { displayName: 'Tooltip Variants', parentName: 'Tooltip' },
+    'tooltip-position': { displayName: 'Tooltip Position', parentName: 'Tooltip' },
+    'tooltip-arrow-position': { displayName: 'Tooltip Arrow Position', parentName: 'Tooltip' },
+    'tooltip-custom': { displayName: 'Tooltip Custom', parentName: 'Tooltip' },
+    'tooltip-styling': { displayName: 'Tooltip Styling', parentName: 'Tooltip' },
+    'tooltip-tailwind-styling': { displayName: 'Tooltip Tailwind Styling', parentName: 'Tooltip' },
     'overlay-sample-main-1': { displayName: 'Overlay Main Sample 1', parentName: 'Overlay' },
     'overlay-sample-main-2': { displayName: 'Overlay Main Sample 2', parentName: 'Overlay' },
     'overlay-sample-main-3': { displayName: 'Overlay Main Sample 3', parentName: 'Overlay' },

src/app/interactions/interactions.routes.ts

@@ -62,13 +62,13 @@ import { ToggleSample2Component } from './toggle/toggle-sample-2/toggle-sample-2
 import { ToggleSample3Component } from './toggle/toggle-sample-3/toggle-sample-3.component';
 import { ToggleSample4Component } from './toggle/toggle-sample-4/toggle-sample-4.component';
 import { ToggleComponent } from './toggle/toggle.component';
-import { TooltipRichComponent } from './tooltip/tooltip-rich/tooltip-rich.component';
-import { TooltipSimpleComponent } from './tooltip/tooltip-simple/tooltip-simple.component';
-import { TooltipStyleComponent } from './tooltip/tooltip-style/tooltip-style.component';
-import { TooltipTailwindStyleComponent } from './tooltip/tooltip-tailwind-style/tooltip-tailwind-style.component';
-import { TooltipPlacementComponent } from './tooltip/tooltip-placement/tooltip-placement.component';
-import { TooltipAdvancedComponent } from './tooltip/tooltip-advanced/tooltip-advanced.component';
-import { TooltipTriggersComponent } from './tooltip/tooltip-triggers/tooltip-triggers.component';
+import { TooltipOverviewComponent } from './tooltip/tooltip-overview/tooltip-overview.component';
+import { TooltipVariantsComponent } from './tooltip/tooltip-variants/tooltip-variants.component';
+import { TooltipPositionComponent } from './tooltip/tooltip-position/tooltip-position.component';
+import { TooltipArrowPositionComponent } from './tooltip/tooltip-arrow-position/tooltip-arrow-position.component';
+import { TooltipCustomComponent } from './tooltip/tooltip-custom/tooltip-custom.component';
+import { TooltipStylingComponent } from './tooltip/tooltip-styling/tooltip-styling.component';
+import { TooltipTailwindStylingComponent } from './tooltip/tooltip-tailwind-styling/tooltip-tailwind-styling.component';
 
 export const InteractionsRoutes: Routes = [
     {
@@ -227,39 +227,39 @@ export const InteractionsRoutes: Routes = [
         path: 'toggle-sample-4'
     },
     {
-        component: TooltipSimpleComponent,
-        data: interactionsRoutesData['tooltip-simple'],
-        path: 'tooltip-simple'
+        component: TooltipOverviewComponent,
+        data: interactionsRoutesData['tooltip-overview'],
+        path: 'tooltip-overview'
     },
     {
-        component: TooltipRichComponent,
-        data: interactionsRoutesData['tooltip-rich'],
-        path: 'tooltip-rich'
+        component: TooltipVariantsComponent,
+        data: interactionsRoutesData['tooltip-variants'],
+        path: 'tooltip-variants'
     },
     {
-        component: TooltipPlacementComponent,
-        data: interactionsRoutesData['tooltip-placement'],
-        path: 'tooltip-placement'
+        component: TooltipPositionComponent,
+        data: interactionsRoutesData['tooltip-position'],
+        path: 'tooltip-position'
     },
     {
-        component: TooltipAdvancedComponent,
-        data: interactionsRoutesData['tooltip-advanced'],
-        path: 'tooltip-advanced'
+        component: TooltipArrowPositionComponent,
+        data: interactionsRoutesData['tooltip-arrow-position'],
+        path: 'tooltip-arrow-position'
     },
     {
-        component: TooltipTriggersComponent,
-        data: interactionsRoutesData['tooltip-triggers'],
-        path: 'tooltip-triggers'
+        component: TooltipCustomComponent,
+        data: interactionsRoutesData['tooltip-custom'],
+        path: 'tooltip-custom'
     },
     {
-        component: TooltipStyleComponent,
-        data: interactionsRoutesData['tooltip-style'],
-        path: 'tooltip-style'
+        component: TooltipStylingComponent,
+        data: interactionsRoutesData['tooltip-styling'],
+        path: 'tooltip-styling'
     },
     {
-        component: TooltipTailwindStyleComponent,
-        data: interactionsRoutesData['tooltip-tailwind-style'],
-        path: 'tooltip-tailwind-style'
+        component: TooltipTailwindStylingComponent,
+        data: interactionsRoutesData['tooltip-tailwind-styling'],
+        path: 'tooltip-tailwind-styling'
     },
     {
         component: OverlaySampleMain1Component,