npm - @eui/core - Versions diffs - 21.0.0-alpha.9 → 21.0.0-next.10 - Mend

@eui/core 21.0.0-alpha.9 → 21.0.0-next.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (121) hide show

package/CHANGELOG.md +799 -5265
package/docs/changelog.html +947 -7522
package/docs/classes/ActivatedRouteAction.html +18 -0
package/docs/classes/AddApiQueueItemAction.html +18 -0
package/docs/classes/AddAppLoadedConfigModulesAction.html +18 -0
package/docs/classes/ApiQueueServiceMock.html +18 -0
package/docs/classes/AsyncStorageService.html +18 -0
package/docs/classes/AsyncStorageServiceMock.html +18 -0
package/docs/classes/CssUtils.html +45 -0
package/docs/classes/EmptyApiQueueAction.html +18 -0
package/docs/classes/ErrorSubClass.html +18 -0
package/docs/classes/EuiCoreRootGuardClass.html +18 -0
package/docs/classes/EuiError.html +18 -0
package/docs/classes/I18nResourceImpl.html +18 -0
package/docs/classes/InitStoreAction.html +18 -0
package/docs/classes/LogServiceMock.html +18 -0
package/docs/classes/RemoveApiQueueItemAction.html +18 -0
package/docs/classes/StorageService.html +18 -0
package/docs/classes/StorageServiceMock.html +18 -0
package/docs/classes/TranslateServiceMock.html +18 -0
package/docs/classes/UpdateAppConnectionAction.html +18 -0
package/docs/classes/UpdateAppStatusAction.html +18 -0
package/docs/classes/UpdateAppVersionAction.html +18 -0
package/docs/classes/UpdateCurrentModuleAction.html +18 -0
package/docs/classes/UpdateI18nStateAction.html +18 -0
package/docs/classes/UpdateLocaleStateAction.html +18 -0
package/docs/classes/UpdateNotificationsListAction.html +18 -0
package/docs/classes/UpdateUserDashboardAction.html +18 -0
package/docs/classes/UpdateUserDetailsAction.html +18 -0
package/docs/classes/UpdateUserPreferencesAction.html +18 -0
package/docs/classes/UpdateUserRightsAction.html +18 -0
package/docs/classes/UpdateUserStateAction.html +18 -0
package/docs/dependencies.html +18 -0
package/docs/directives/TranslateMockDirective.html +18 -0
package/docs/index.html +20 -2
package/docs/injectables/ApiQueueService.html +18 -0
package/docs/injectables/EuiAppShellService.html +55 -0
package/docs/injectables/EuiDynamicComponentService.html +18 -0
package/docs/injectables/EuiDynamicMenuService.html +18 -0
package/docs/injectables/EuiGrowlService.html +18 -0
package/docs/injectables/EuiLoaderService.html +18 -0
package/docs/injectables/EuiPermissionService.html +18 -0
package/docs/injectables/EuiThemeService.html +18 -0
package/docs/injectables/EuiTimezoneService.html +18 -0
package/docs/injectables/GlobalErrorHandler.html +18 -0
package/docs/injectables/I18nLoader.html +18 -0
package/docs/injectables/I18nService.html +18 -0
package/docs/injectables/I18nServiceMock.html +18 -0
package/docs/injectables/LocalForageService.html +18 -0
package/docs/injectables/LocalStorageService.html +18 -0
package/docs/injectables/LocaleService.html +18 -0
package/docs/injectables/LocaleServiceMock.html +18 -0
package/docs/injectables/LogService.html +18 -0
package/docs/injectables/SessionStorageService.html +18 -0
package/docs/injectables/StoreService.html +18 -0
package/docs/injectables/StoreServiceMock.html +18 -0
package/docs/injectables/UserService.html +18 -0
package/docs/injectables/UserServiceMock.html +18 -0
package/docs/interceptors/AddLangParamInterceptor.html +18 -0
package/docs/interceptors/CachePreventionInterceptor.html +18 -0
package/docs/interceptors/CorsSecurityInterceptor.html +18 -0
package/docs/interceptors/CsrfPreventionInterceptor.html +18 -0
package/docs/interceptors/EuLoginSessionTimeoutHandlingInterceptor.html +18 -0
package/docs/interceptors/HttpErrorHandlerInterceptor.html +18 -0
package/docs/interceptors/UxRequestErrorModelInterceptor.html +18 -0
package/docs/interfaces/Action.html +18 -0
package/docs/interfaces/ActionReducer.html +18 -0
package/docs/interfaces/Dependency.html +18 -0
package/docs/interfaces/EuiTimeZone.html +18 -0
package/docs/interfaces/IEuiTheme.html +18 -0
package/docs/interfaces/Library.html +18 -0
package/docs/interfaces/LoadedResources.html +18 -0
package/docs/interfaces/LoadedResourcesError.html +18 -0
package/docs/interfaces/MemoizedSelector.html +18 -0
package/docs/interfaces/MemoizedSelectorWithProps.html +18 -0
package/docs/interfaces/ModuleLoadEvent.html +18 -0
package/docs/interfaces/Policy.html +18 -0
package/docs/interfaces/ResourceError.html +18 -0
package/docs/interfaces/ThemeState.html +18 -0
package/docs/interfaces/TranslationKeys.html +18 -0
package/docs/interfaces/UIState.html +108 -0
package/docs/interfaces/body.html +18 -0
package/docs/js/libs/bootstrap-native.js +1 -1
package/docs/js/libs/jszip.min.js +13 -0
package/docs/js/libs/svg-pan-zoom.min.js +3 -3
package/docs/js/libs/tablesort.min.js +3 -3
package/docs/js/libs/tablesort.number.min.js +3 -3
package/docs/js/menu-wc.js +16 -20
package/docs/js/menu-wc_es5.js +1 -1
package/docs/js/routes/routes_index.js +1 -0
package/docs/js/routes.js +15 -8
package/docs/js/search/search_index.js +2 -2
package/docs/license.html +20 -2
package/docs/miscellaneous/enumerations.html +18 -0
package/docs/miscellaneous/functions.html +18 -0
package/docs/miscellaneous/typealiases.html +18 -0
package/docs/miscellaneous/variables.html +48 -53
package/docs/modules/CoreModule.html +18 -0
package/docs/modules/I18nModule.html +18 -0
package/docs/modules/LogModule.html +18 -0
package/docs/modules/TranslateMockModule.html +18 -0
package/docs/modules.html +18 -0
package/docs/overview.html +28 -0
package/docs/pipes/TranslateMockPipe.html +18 -0
package/docs/properties.html +19 -1
package/docs/routes.html +204 -0
package/docs/template-playground/default-templates.json +192 -0
package/docs/template-playground/hbs-render.service.ts +212 -0
package/docs/template-playground/main.ts +9 -0
package/docs/template-playground/template-editor.service.ts +173 -0
package/docs/template-playground/template-playground.component.ts +614 -0
package/docs/template-playground/template-playground.module.ts +29 -0
package/docs/template-playground/zip-export.service.ts +86 -0
package/docs/template-playground-app/app.js +1389 -0
package/docs/template-playground-app/index.html +462 -0
package/fesm2022/eui-core.mjs +150 -110
package/fesm2022/eui-core.mjs.map +1 -1
package/package.json +44 -45
package/{index.d.ts → types/eui-core.d.ts} +13 -1
package/types/eui-core.d.ts.map +1 -0
package/index.d.ts.map +0 -1

package/docs/routes.html ADDED Viewed

@@ -0,0 +1,204 @@
+<!doctype html>
+<html class="no-js" lang="">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <title>eui documentation</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="icon" type="image/x-icon" href="./images/favicon.ico">
+	   <link rel="stylesheet" href="./styles/style.css">
+        <link rel="stylesheet" href="./styles/dark.css">
+        <link rel="stylesheet" href="./styles/material.css">
+    </head>
+    <body>
+          <script>
+               // Blocking script to avoid flickering dark mode
+               // Dark mode toggle button
+               var useDark = window.matchMedia('(prefers-color-scheme: dark)');
+               var darkModeState = useDark.matches;
+               var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
+               var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
+               var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
+               function checkToggle(check) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].checked = check;
+                    }
+               }
+               function toggleDarkMode(state) {
+                    if (window.localStorage) {
+                         localStorage.setItem('compodoc_darkmode-state', state);
+                    }
+                    checkToggle(state);
+                    const hasClass = document.body.classList.contains('dark');
+                    if (state) {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.add('dark');
+                         }
+                         if (!hasClass) {
+                              document.body.classList.add('dark');
+                         }
+                    } else {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.remove('dark');
+                         }
+                         if (hasClass) {
+                              document.body.classList.remove('dark');
+                         }
+                    }
+               }
+               useDark.addEventListener('change', function (evt) {
+                    toggleDarkMode(evt.matches);
+               });
+               if (darkModeStateLocal) {
+                    darkModeState = darkModeStateLocal === 'true';
+               }
+               toggleDarkMode(darkModeState);
+          </script>
+          <script>
+              // --- Iframe navigation tracking for Template Playground ---
+              function sendCurrentUrlToParent() {
+                  if (window.parent && window.parent !== window) {
+                      window.parent.postMessage({
+                          type: 'compodoc-iframe-navigate',
+                          url: window.location.pathname + window.location.hash
+                      }, '*');
+                  }
+              }
+              window.addEventListener('hashchange', sendCurrentUrlToParent, false);
+              window.addEventListener('popstate', sendCurrentUrlToParent, false);
+              window.addEventListener('DOMContentLoaded', sendCurrentUrlToParent, false);
+          </script>
+        <div class="navbar navbar-default navbar-fixed-top d-md-none p-0">
+               <div class="d-flex">
+                    <a href="./" class="navbar-brand">eui documentation</a>
+                    <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
+               </div>
+        </div>
+        <div class="xs-menu menu" id="mobile-menu">
+                <div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div>            <compodoc-menu></compodoc-menu>
+        </div>
+        <div class="container-fluid main">
+           <div class="row main">
+               <div class="d-none d-md-block menu">
+                   <compodoc-menu mode="normal"></compodoc-menu>
+               </div>
+               <!-- START CONTENT -->
+               <div class="content routes">
+                   <div class="content-data">
+<ol class="breadcrumb">
+    <li class="breadcrumb-item">Routes</li>
+</ol>
+<div id="body-routes"></div>
+<script src="./js/libs/d3.v3.min.js"></script>
+<script src="./js/libs/innersvg.js"></script>
+<script src="./js/routes/routes_index.js"></script>
+<script src="./js/routes.js"></script>
+                   </div><div class="search-results">
+    <div class="has-results">
+        <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
+        <ul class="search-results-list"></ul>
+    </div>
+    <div class="no-results">
+        <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
+    </div>
+</div>
+</div>
+               <!-- END CONTENT -->
+           </div>
+       </div>
+          <label class="dark-mode-switch">
+               <input type="checkbox">
+               <span class="slider">
+                    <svg class="slider-icon" viewBox="0 0 24 24" fill="none" height="20" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
+                    </svg>
+               </span>
+          </label>
+       <script>
+            var COMPODOC_CURRENT_PAGE_DEPTH = 0;
+            var COMPODOC_CURRENT_PAGE_CONTEXT = 'routes';
+            var COMPODOC_CURRENT_PAGE_URL = 'routes.html';
+            var MAX_SEARCH_RESULTS = 15;
+       </script>
+       <script>
+               $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
+               checkToggle(darkModeState);
+               if ($darkModeToggleSwitchers.length > 0) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].addEventListener('change', function (event) {
+                              darkModeState = !darkModeState;
+                              toggleDarkMode(darkModeState);
+                         });
+                    }
+               }
+          </script>
+       <script src="./js/libs/custom-elements.min.js"></script>
+       <script src="./js/libs/lit-html.js"></script>
+       <script src="./js/menu-wc.js" defer></script>
+       <script nomodule src="./js/menu-wc_es5.js" defer></script>
+       <script src="./js/libs/bootstrap-native.js"></script>
+       <script src="./js/libs/es6-shim.min.js"></script>
+       <script src="./js/libs/EventDispatcher.js"></script>
+       <script src="./js/libs/promise.min.js"></script>
+       <script src="./js/compodoc.js"></script>
+       <script src="./js/tabs.js"></script>
+       <script src="./js/menu.js"></script>
+       <script src="./js/libs/clipboard.min.js"></script>
+       <script src="./js/libs/prism.js"></script>
+       <script src="./js/sourceCode.js"></script>
+          <script src="./js/search/search.js"></script>
+          <script src="./js/search/lunr.min.js"></script>
+          <script src="./js/search/search-lunr.js"></script>
+          <script src="./js/search/search_index.js"></script>
+       <script src="./js/lazy-load-graphs.js"></script>
+    </body>
+</html>

package/docs/template-playground/default-templates.json ADDED Viewed

@@ -0,0 +1,192 @@
+{
+  "templates": [
+    {
+      "name": "page.hbs",
+      "path": "page.hbs",
+      "description": "Main page template - the base layout for all documentation pages",
+      "type": "hbs",
+      "category": "core",
+      "content": "<!-- This will be populated with the actual page.hbs content -->"
+    },
+    {
+      "name": "component.hbs",
+      "path": "partials/component.hbs",
+      "description": "Component detail template - displays Angular component documentation",
+      "type": "hbs",
+      "category": "partials",
+      "content": "<!-- This will be populated with the actual component.hbs content -->"
+    },
+    {
+      "name": "module.hbs",
+      "path": "partials/module.hbs",
+      "description": "Module detail template - displays Angular module documentation",
+      "type": "hbs",
+      "category": "partials",
+      "content": "<!-- This will be populated with the actual module.hbs content -->"
+    },
+    {
+      "name": "overview.hbs",
+      "path": "partials/overview.hbs",
+      "description": "Overview template - displays the main overview page",
+      "type": "hbs",
+      "category": "partials",
+      "content": "<!-- This will be populated with the actual overview.hbs content -->"
+    },
+    {
+      "name": "class.hbs",
+      "path": "partials/class.hbs",
+      "description": "Class detail template - displays TypeScript class documentation",
+      "type": "hbs",
+      "category": "partials",
+      "content": "<!-- This will be populated with the actual class.hbs content -->"
+    },
+    {
+      "name": "interface.hbs",
+      "path": "partials/interface.hbs",
+      "description": "Interface detail template - displays TypeScript interface documentation",
+      "type": "hbs",
+      "category": "partials",
+      "content": "<!-- This will be populated with the actual interface.hbs content -->"
+    },
+    {
+      "name": "injectable.hbs",
+      "path": "partials/injectable.hbs",
+      "description": "Injectable service template - displays Angular service documentation",
+      "type": "hbs",
+      "category": "partials",
+      "content": "<!-- This will be populated with the actual injectable.hbs content -->"
+    },
+    {
+      "name": "directive.hbs",
+      "path": "partials/directive.hbs",
+      "description": "Directive template - displays Angular directive documentation",
+      "type": "hbs",
+      "category": "partials",
+      "content": "<!-- This will be populated with the actual directive.hbs content -->"
+    },
+    {
+      "name": "pipe.hbs",
+      "path": "partials/pipe.hbs",
+      "description": "Pipe template - displays Angular pipe documentation",
+      "type": "hbs",
+      "category": "partials",
+      "content": "<!-- This will be populated with the actual pipe.hbs content -->"
+    },
+    {
+      "name": "guard.hbs",
+      "path": "partials/guard.hbs",
+      "description": "Guard template - displays Angular guard documentation",
+      "type": "hbs",
+      "category": "partials",
+      "content": "<!-- This will be populated with the actual guard.hbs content -->"
+    },
+    {
+      "name": "interceptor.hbs",
+      "path": "partials/interceptor.hbs",
+      "description": "Interceptor template - displays Angular interceptor documentation",
+      "type": "hbs",
+      "category": "partials",
+      "content": "<!-- This will be populated with the actual interceptor.hbs content -->"
+    },
+    {
+      "name": "menu.hbs",
+      "path": "partials/menu.hbs",
+      "description": "Navigation menu template - displays the sidebar navigation",
+      "type": "hbs",
+      "category": "partials",
+      "content": "<!-- This will be populated with the actual menu.hbs content -->"
+    }
+  ],
+  "styles": [
+    {
+      "name": "compodoc.css",
+      "path": "styles/compodoc.css",
+      "description": "Main stylesheet - contains the core styles for Compodoc",
+      "type": "css",
+      "category": "core",
+      "content": "/* This will be populated with the actual compodoc.css content */"
+    },
+    {
+      "name": "bootstrap.min.css",
+      "path": "styles/bootstrap.min.css",
+      "description": "Bootstrap CSS framework - provides base styling components",
+      "type": "css",
+      "category": "vendor",
+      "content": "/* This will be populated with the actual bootstrap.min.css content */"
+    },
+    {
+      "name": "dark.css",
+      "path": "styles/dark.css",
+      "description": "Dark mode styles - contains dark theme styling",
+      "type": "css",
+      "category": "theme",
+      "content": "/* This will be populated with the actual dark.css content */"
+    },
+    {
+      "name": "gitbook.css",
+      "path": "styles/gitbook.css",
+      "description": "GitBook theme styles - alternative theme styling",
+      "type": "css",
+      "category": "theme",
+      "content": "/* This will be populated with the actual gitbook.css content */"
+    },
+    {
+      "name": "material.css",
+      "path": "styles/material.css",
+      "description": "Material design theme styles - Material theme styling",
+      "type": "css",
+      "category": "theme",
+      "content": "/* This will be populated with the actual material.css content */"
+    }
+  ],
+  "scripts": [
+    {
+      "name": "compodoc.js",
+      "path": "js/compodoc.js",
+      "description": "Main JavaScript file - contains core Compodoc functionality",
+      "type": "js",
+      "category": "core",
+      "content": "// This will be populated with the actual compodoc.js content"
+    },
+    {
+      "name": "menu.js",
+      "path": "js/menu.js",
+      "description": "Menu functionality - handles navigation menu interactions",
+      "type": "js",
+      "category": "core",
+      "content": "// This will be populated with the actual menu.js content"
+    },
+    {
+      "name": "tabs.js",
+      "path": "js/tabs.js",
+      "description": "Tab functionality - handles tab navigation in documentation pages",
+      "type": "js",
+      "category": "core",
+      "content": "// This will be populated with the actual tabs.js content"
+    },
+    {
+      "name": "search.js",
+      "path": "js/search/search.js",
+      "description": "Search functionality - handles documentation search features",
+      "type": "js",
+      "category": "feature",
+      "content": "// This will be populated with the actual search.js content"
+    },
+    {
+      "name": "sourceCode.js",
+      "path": "js/sourceCode.js",
+      "description": "Source code display - handles syntax highlighting and code display",
+      "type": "js",
+      "category": "feature",
+      "content": "// This will be populated with the actual sourceCode.js content"
+    },
+    {
+      "name": "lazy-load-graphs.js",
+      "path": "js/lazy-load-graphs.js",
+      "description": "Graph loading - handles lazy loading of dependency graphs",
+      "type": "js",
+      "category": "feature",
+      "content": "// This will be populated with the actual lazy-load-graphs.js content"
+    }
+  ]
+}

package/docs/template-playground/hbs-render.service.ts ADDED Viewed

@@ -0,0 +1,212 @@
+import { Injectable } from '@angular/core';
+declare const Handlebars: any;
+@Injectable({
+  providedIn: 'root'
+})
+export class HbsRenderService {
+  private handlebarsInstance: any;
+  constructor() {
+    this.initializeHandlebars();
+  }
+  private initializeHandlebars() {
+    // Create a new Handlebars instance for the playground
+    this.handlebarsInstance = Handlebars.create();
+    // Register common helpers used in Compodoc templates
+    this.registerHelpers();
+  }
+  private registerHelpers() {
+    // Register the 'compare' helper
+    this.handlebarsInstance.registerHelper('compare', (left: any, operator: string, right: any, options: any) => {
+      let result;
+      switch (operator) {
+        case '===':
+          result = left === right;
+          break;
+        case '!==':
+          result = left !== right;
+          break;
+        case '<':
+          result = left < right;
+          break;
+        case '>':
+          result = left > right;
+          break;
+        case '<=':
+          result = left <= right;
+          break;
+        case '>=':
+          result = left >= right;
+          break;
+        default:
+          result = false;
+      }
+      return result ? options.fn(this) : options.inverse(this);
+    });
+    // Register the 'unless' helper
+    this.handlebarsInstance.registerHelper('unless', (conditional: any, options: any) => {
+      return !conditional ? options.fn(this) : options.inverse(this);
+    });
+    // Register the 'each' helper with index
+    this.handlebarsInstance.registerHelper('each', (context: any, options: any) => {
+      let ret = '';
+      for (let i = 0; i < context.length; i++) {
+        ret += options.fn(context[i], { data: { index: i } });
+      }
+      return ret;
+    });
+    // Register the 'if' helper
+    this.handlebarsInstance.registerHelper('if', (conditional: any, options: any) => {
+      return conditional ? options.fn(this) : options.inverse(this);
+    });
+    // Register the 'relativeURL' helper
+    this.handlebarsInstance.registerHelper('relativeURL', (depth: number, page?: string) => {
+      let url = '';
+      for (let i = 0; i < depth; i++) {
+        url += '../';
+      }
+      return url + (page || '');
+    });
+    // Register the 't' helper for translations
+    this.handlebarsInstance.registerHelper('t', (key: string) => {
+      // Simple translation mapping for preview
+      const translations: { [key: string]: string } = {
+        'info': 'Information',
+        'source': 'Source',
+        'example': 'Example',
+        'template': 'Template',
+        'styles': 'Styles',
+        'component': 'Component',
+        'module': 'Module',
+        'overview': 'Overview',
+        'components': 'Components',
+        'modules': 'Modules',
+        'file': 'File',
+        'description': 'Description',
+        'selector': 'Selector',
+        'properties': 'Properties',
+        'methods': 'Methods',
+        'inputs': 'Inputs',
+        'outputs': 'Outputs'
+      };
+      return translations[key] || key;
+    });
+    // Register the 'orLength' helper
+    this.handlebarsInstance.registerHelper('orLength', (...args: any[]) => {
+      const options = args[args.length - 1];
+      const values = args.slice(0, -1);
+      for (const value of values) {
+        if (value && value.length && value.length > 0) {
+          return options.fn(this);
+        }
+      }
+      return options.inverse(this);
+    });
+    // Register the 'isTabEnabled' helper
+    this.handlebarsInstance.registerHelper('isTabEnabled', (navTabs: any[], tabId: string, options: any) => {
+      const tab = navTabs && navTabs.find((t: any) => t.id === tabId);
+      return tab ? options.fn(this) : options.inverse(this);
+    });
+    // Register the 'isInitialTab' helper
+    this.handlebarsInstance.registerHelper('isInitialTab', (navTabs: any[], tabId: string, options: any) => {
+      const isInitial = navTabs && navTabs.length > 0 && navTabs[0].id === tabId;
+      return isInitial ? options.fn(this) : options.inverse(this);
+    });
+  }
+  renderTemplate(templateContent: string, data: any): string {
+    try {
+      // Create a complete HTML document for preview
+      const template = this.handlebarsInstance.compile(templateContent);
+      const rendered = template({ data });
+      // Wrap in a basic HTML structure for preview
+      return `
+        <!DOCTYPE html>
+        <html>
+        <head>
+          <meta charset="utf-8">
+          <title>Template Preview</title>
+          <style>
+            body { font-family: Arial, sans-serif; margin: 20px; }
+            .preview-wrapper { border: 1px solid #ddd; padding: 20px; }
+            .preview-notice { background: #f0f8ff; padding: 10px; margin-bottom: 20px; border-left: 4px solid #007bff; }
+          </style>
+        </head>
+        <body>
+          <div class="preview-notice">
+            <strong>Template Preview:</strong> This is a live preview of your template with mock data.
+          </div>
+          <div class="preview-wrapper">
+            ${rendered}
+          </div>
+        </body>
+        </html>
+      `;
+    } catch (error) {
+      return `
+        <!DOCTYPE html>
+        <html>
+        <head>
+          <meta charset="utf-8">
+          <title>Template Preview - Error</title>
+          <style>
+            body { font-family: Arial, sans-serif; margin: 20px; }
+            .error { color: red; background: #fff5f5; padding: 20px; border: 1px solid #red; }
+          </style>
+        </head>
+        <body>
+          <div class="error">
+            <h3>Template Error</h3>
+            <p><strong>Error:</strong> ${error.message}</p>
+            <p>Please check your template syntax and try again.</p>
+          </div>
+        </body>
+        </html>
+      `;
+    }
+  }
+  getMockData(): any {
+    return {
+      documentationMainName: 'Sample Documentation',
+      depth: 0,
+      context: 'component',
+      components: [
+        {
+          name: 'SampleComponent',
+          selector: 'app-sample',
+          file: 'src/app/sample/sample.component.ts',
+          description: 'A sample component for demonstration',
+          properties: [
+            { name: 'title', type: 'string', description: 'The component title' },
+            { name: 'isVisible', type: 'boolean', description: 'Whether the component is visible' }
+          ],
+          methods: [
+            { name: 'ngOnInit', description: 'Lifecycle hook', signature: 'ngOnInit(): void' },
+            { name: 'onClick', description: 'Handle click events', signature: 'onClick(event: MouseEvent): void' }
+          ]
+        }
+      ],
+      navTabs: [
+        { id: 'info', label: 'Info', href: '#info' },
+        { id: 'source', label: 'Source', href: '#source' },
+        { id: 'example', label: 'Example', href: '#example' }
+      ]
+    };
+  }
+}

package/docs/template-playground/main.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { TemplatePlaygroundModule } from './template-playground.module';
+// Bootstrap the Angular application when the DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+  platformBrowserDynamic()
+    .bootstrapModule(TemplatePlaygroundModule)
+    .catch(err => console.error('Error starting template playground:', err));
+});