@eui/showcase 18.0.0-next.76 → 18.0.0-next.78

package/fesm2022/eui-showcase.mjs

@@ -1,6 +1,42 @@
-// lib/components/playground/stackblitz.files.mjs
-var polyfillsFile = "import 'zone.js';";
-var mainFile = (moduleName, componentName) => `
+import * as i0 from '@angular/core';
+import { inject, Injectable, Directive, booleanAttribute, Component, ViewEncapsulation, Input, HostBinding, ContentChildren, forwardRef, ViewChild, ContentChild, ElementRef, HostListener, NgModule } from '@angular/core';
+import * as i4$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2$1 from '@eui/components/eui-card';
+import { EuiCardModule } from '@eui/components/eui-card';
+import * as i2$2 from '@eui/components/eui-button';
+import { EuiButtonModule } from '@eui/components/eui-button';
+import * as i9 from '@eui/components/eui-tabs';
+import { EuiTabsModule } from '@eui/components/eui-tabs';
+import * as i6 from '@eui/components/eui-page';
+import { EuiPageModule } from '@eui/components/eui-page';
+import * as i7 from '@eui/components/eui-chip';
+import { EuiChipModule } from '@eui/components/eui-chip';
+import * as i3$2 from '@eui/components/eui-dialog';
+import { EuiDialogModule } from '@eui/components/eui-dialog';
+import * as i8 from '@eui/components/eui-alert';
+import { EuiAlertModule } from '@eui/components/eui-alert';
+import * as i1$1 from '@eui/components/eui-block-content';
+import { EuiBlockContentModule } from '@eui/components/eui-block-content';
+import * as i6$1 from '@eui/components/eui-badge';
+import { EuiBadgeModule } from '@eui/components/eui-badge';
+import * as i10 from '@eui/components/eui-icon';
+import { EuiIconModule } from '@eui/components/eui-icon';
+import * as i11 from '@eui/components/eui-label';
+import { EuiLabelModule } from '@eui/components/eui-label';
+import { lastValueFrom, forkJoin, Observable } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
+import sdk from '@stackblitz/sdk';
+import * as i2 from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
+import * as i3 from '@eui/core';
+import * as i4 from '@angular/cdk/clipboard';
+import * as i1 from '@angular/router';
+import * as i3$1 from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
+
+const polyfillsFile = 'import \'zone.js\';';
+const mainFile = (moduleName, componentName) => `
 import './polyfills';
 import { BrowserModule } from '@angular/platform-browser';
 import { InjectionToken, NgModule } from '@angular/core';
@@ -55,7 +91,7 @@ platformBrowserDynamic().bootstrapModule(RootModule).then(ref => {
   // Otherwise, log the boot error
 }).catch(err => console.error(err));
 `;
-var moduleFile = (componentName, m = []) => `
+const moduleFile = (componentName, m = []) => `
 import { NgModule, InjectionToken } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -77,8 +113,9 @@ import {
 } from '@eui/core';
 
 import { ${componentName} } from './component';
-` + m.map((i) => `import { ${i.name} } from '${i.path}';
-`).join("") + `
+` +
+    m.map((i) => `import { ${i.name} } from '${i.path}';\n`).join('') +
+    `
 
 export const REDUCER_TOKEN = new InjectionToken<any>('Registered Reducers');
 
@@ -95,7 +132,9 @@ export const REDUCER_TOKEN = new InjectionToken<any>('Registered Reducers');
     EffectsModule.forRoot([...CoreModuleEffects]),
     TranslateModule.forRoot(translateConfig),
     StoreModule.forRoot(REDUCER_TOKEN, { })
-    ` + m.map((i) => `${i.name},`).join("") + `
+    ` +
+    m.map((i) => `${i.name},`).join('') +
+    `
   ],
   declarations: [${componentName}],
   providers: [
@@ -116,7 +155,7 @@ export const REDUCER_TOKEN = new InjectionToken<any>('Registered Reducers');
 })
 export class AppModule {}
 `;
-var angularJsonFile = `
+const angularJsonFile = `
 {
   "version": 1,
   "newProjectRoot": "projects",
@@ -195,18 +234,18 @@ var angularJsonFile = `
   }
 }
 `;
-var indexHtmlFile = (selector) => `
+const indexHtmlFile = (selector) => `
 <div style="padding: 10px">
     <${selector}></${selector}>
 </div>
 `;
-var PACKAGE_JSON = {
-  name: "demo",
-  version: "0.0.0",
-  private: true,
-  dependencies: {}
+const PACKAGE_JSON = {
+    name: 'demo',
+    version: '0.0.0',
+    private: true,
+    dependencies: {},
 };
-var tsConfig = `
+const tsConfig = `
 {
   "compileOnSave": false,
   "compilerOptions": {
@@ -237,2741 +276,1355 @@ var tsConfig = `
   }
 }`;
 
-// lib/components/playground/stackblitz.service.mjs
-import sdk from "@stackblitz/sdk";
-import { lastValueFrom } from "rxjs";
-import { inject, Injectable } from "@angular/core";
-import { HttpClient } from "@angular/common/http";
-import * as i0 from "@angular/core";
-var StackblitzService = class _StackblitzService {
-  constructor() {
-    this.http = inject(HttpClient);
-  }
-  /**
-   * extract the name of the component class name and selector name from the typescript content
-   *
-   * @param contents
-   * @private
-   */
-  extractComponentMetadata(contents) {
-    const selectorRegex = /selector: ('(?<singleQuotedSelector>[\w\d-]+)'|"(?<doubleQuotedSelector>[\w\d-]+)")/;
-    const classRegex = /export class ([\w\d]+)/;
-    const className = contents.match(classRegex);
-    const selectorName = contents.match(selectorRegex);
-    const found = selectorName?.groups?.singleQuotedSelector || selectorName?.groups?.doubleQuotedSelector;
-    return {
-      className: className ? className[1] : "",
-      selector: found || ""
-    };
-  }
-  /**
-   * extract module class name from the typescript content
-   *
-   * @param contents
-   * @private
-   */
-  extractModuleName(contents) {
-    const moduleClass = contents.match(/export class (\w+Module)/);
-    return moduleClass ? moduleClass[1] : "";
-  }
-  /**
-   * extract the name of the component class name and selector name from the typescript content
-   *
-   * @param contents
-   * @private
-   */
-  extractComponentName(contents) {
-    const componentName = contents.match(/bootstrap: \[([\s\S]*?)]/);
-    return componentName ? componentName[1] : "";
-  }
-  appendVitalNgModules(contents) {
-    contents = contents.replace(/imports: \[([\s\S]*?)\]/, "imports: [\n		BrowserModule, $1]");
-    contents = `import { BrowserModule } from '@angular/platform-browser';
-${contents}`;
-    contents = contents.replace(/imports: \[([\s\S]*?)\]/, "imports: [\n		BrowserAnimationsModule, $1]");
-    contents = `import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-${contents}`;
-    return contents;
-  }
-  /**
-   * Open a stackblitz project in a new browser TAB with the given html and typescript content
-   * @param htmlContent
-   * @param typescriptContent
-   * @param title
-   * @param sampleId
-   */
-  openStackBlitz(htmlContent, typescriptContent, title, sampleId) {
-    this.getStackblitzDependencies().then((deps) => {
-      const { dependencies, devDependencies } = deps;
-      const { selector } = this.extractComponentMetadata(typescriptContent);
-      const moduleName = this.extractModuleName(typescriptContent);
-      const componentName = this.extractComponentName(typescriptContent);
-      const project = {
-        title,
-        description: `An eUI example for the ${title}.`,
-        template: "angular-cli",
-        files: {
-          "src/component.html": htmlContent,
-          "src/component.ts": this.appendVitalNgModules(typescriptContent),
-          "src/main.ts": mainFile(moduleName, componentName),
-          "src/polyfills.ts": polyfillsFile,
-          "src/index.html": indexHtmlFile(selector),
-          "angular.json": angularJsonFile,
-          "package.json": JSON.stringify({
-            ...PACKAGE_JSON,
-            dependencies,
-            devDependencies
-          }, null, 2),
-          "tsconfig.json": tsConfig
-        },
-        settings: {
-          compile: {
-            trigger: "auto",
-            clearConsole: true
-          }
-        },
-        dependencies
-      };
-      return sdk.openProject(project, {
-        openFile: ["src/component.ts", "src/component.html"],
-        zenMode: true
-      });
-    });
-  }
-  /**
-   * Retrieve only the dependencies that stackblitz will need filtered from @eui/deps-base
-   *
-   * @private
-   */
-  getStackblitzDependencies() {
-    const stackblitzDependencies = [
-      "@angular/animations",
-      "@angular/cdk",
-      "@angular/common",
-      "@angular/compiler",
-      "@angular/core",
-      "@angular/forms",
-      "@angular/material",
-      "@angular/material-moment-adapter",
-      "@angular/platform-browser",
-      "@angular/platform-browser-dynamic",
-      "@angular/router",
-      "@eui/base",
-      "@eui/components",
-      "@eui/core",
-      "@eui/styles",
-      "@ngrx/effects",
-      "@ngrx/store",
-      "@ngx-translate/core",
-      "localforage",
-      "lodash-es",
-      "reselect",
-      "rxjs",
-      "tslib",
-      "zone.js"
-    ];
-    const stackblitzDevDependencies = ["@angular-devkit/build-angular", "@angular/cli", "@angular/compiler-cli", "typescript"];
-    return this.getCurrentShowcaseEuiVersion().then((version) => this.retrievePackageDependencies(version)).then((dependencies) => {
-      let filteredArr = Object.entries(dependencies).filter((v) => stackblitzDependencies.find((s) => s === v[0]));
-      const filteredObj = Object.fromEntries(filteredArr);
-      const extraDependencies = {
-        uuid: "8.3.2",
-        "ngx-device-detector": "3.0.0",
-        "ngx-moment": "~6.0.0",
-        "ngx-mask": "^14.0.0",
-        "cleave.js": "^1.6.0",
-        moment: "^2.19.3",
-        extend: "^3.0.2"
-      };
-      filteredArr = Object.entries(dependencies).filter((v) => stackblitzDevDependencies.find((s) => s === v[0]));
-      dependencies = { ...extraDependencies, ...filteredObj };
-      const devDependencies = Object.fromEntries(filteredArr);
-      return { dependencies, devDependencies };
-    });
-  }
-  /**
-   * Retrieve the dependencies from the package.json file of @eui/deps-base for the given version.
-   *
-   * @param version
-   * @private
-   */
-  retrievePackageDependencies(version) {
-    return fetch(`https://unpkg.com/@eui/deps-base@${version}/package.json`).then((response) => response.json()).then((pkg) => pkg?.dependencies);
-  }
-  /**
-   * Retrieve the eUI version used to build the showcase from application app-metadata.json
-   *
-   * @private
-   */
-  getCurrentShowcaseEuiVersion() {
-    return lastValueFrom(this.http.get("assets/app-metadata.json", { responseType: "json" })).then((res) => res?.appVersion || "latest");
-  }
-  static {
-    this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: _StackblitzService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-  }
-  static {
-    this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: _StackblitzService });
-  }
-};
+class StackblitzService {
+    constructor() {
+        this.http = inject(HttpClient);
+    }
+    /**
+     * extract the name of the component class name and selector name from the typescript content
+     *
+     * @param contents
+     * @private
+     */
+    extractComponentMetadata(contents) {
+        const selectorRegex = /selector: ('(?<singleQuotedSelector>[\w\d-]+)'|"(?<doubleQuotedSelector>[\w\d-]+)")/;
+        const classRegex = /export class ([\w\d]+)/;
+        const className = contents.match(classRegex);
+        const selectorName = contents.match(selectorRegex);
+        const found = selectorName?.groups?.singleQuotedSelector || selectorName?.groups?.doubleQuotedSelector;
+        return {
+            className: className ? className[1] : '',
+            selector: found || '',
+        };
+    }
+    /**
+     * extract module class name from the typescript content
+     *
+     * @param contents
+     * @private
+     */
+    extractModuleName(contents) {
+        const moduleClass = contents.match(/export class (\w+Module)/);
+        return moduleClass ? moduleClass[1] : '';
+    }
+    /**
+     * extract the name of the component class name and selector name from the typescript content
+     *
+     * @param contents
+     * @private
+     */
+    extractComponentName(contents) {
+        const componentName = contents.match(/bootstrap: \[([\s\S]*?)]/);
+        return componentName ? componentName[1] : '';
+    }
+    appendVitalNgModules(contents) {
+        // const imports = contents.match(/imports: \[([\s\S]*?)\]/);
+        // appends BrowserModule to imports
+        contents = contents.replace(/imports: \[([\s\S]*?)\]/, 'imports: [\n\t\tBrowserModule, $1]');
+        // appends import of BrowserModule
+        contents = `import { BrowserModule } from '@angular/platform-browser';\n${contents}`;
+        // appends BrowserAnimationsModule to imports
+        contents = contents.replace(/imports: \[([\s\S]*?)\]/, 'imports: [\n\t\tBrowserAnimationsModule, $1]');
+        // appends import of BrowserAnimationsModule
+        contents = `import { BrowserAnimationsModule } from '@angular/platform-browser/animations';\n${contents}`;
+        return contents;
+    }
+    /**
+     * Open a stackblitz project in a new browser TAB with the given html and typescript content
+     * @param htmlContent
+     * @param typescriptContent
+     * @param title
+     * @param sampleId
+     */
+    openStackBlitz(htmlContent, typescriptContent, title, sampleId) {
+        this.getStackblitzDependencies()
+            .then((deps) => {
+            const { dependencies, devDependencies } = deps;
+            const { selector } = this.extractComponentMetadata(typescriptContent);
+            const moduleName = this.extractModuleName(typescriptContent);
+            const componentName = this.extractComponentName(typescriptContent);
+            const project = {
+                title: title,
+                description: `An eUI example for the ${title}.`,
+                template: 'angular-cli',
+                files: {
+                    'src/component.html': htmlContent,
+                    'src/component.ts': this.appendVitalNgModules(typescriptContent),
+                    'src/main.ts': mainFile(moduleName, componentName),
+                    'src/polyfills.ts': polyfillsFile,
+                    'src/index.html': indexHtmlFile(selector),
+                    'angular.json': angularJsonFile,
+                    'package.json': JSON.stringify({
+                        ...PACKAGE_JSON,
+                        dependencies,
+                        devDependencies,
+                    }, null, 2),
+                    'tsconfig.json': tsConfig,
+                },
+                settings: {
+                    compile: {
+                        trigger: 'auto',
+                        clearConsole: true,
+                    },
+                },
+                dependencies,
+            };
+            return sdk.openProject(project, {
+                openFile: ['src/component.ts', 'src/component.html'],
+                zenMode: true,
+            });
+        });
+    }
+    /**
+     * Retrieve only the dependencies that stackblitz will need filtered from @eui/deps-base
+     *
+     * @private
+     */
+    getStackblitzDependencies() {
+        // a list of dependencies only stackblitz needs
+        const stackblitzDependencies = [
+            '@angular/animations',
+            '@angular/cdk',
+            '@angular/common',
+            '@angular/compiler',
+            '@angular/core',
+            '@angular/forms',
+            '@angular/material',
+            '@angular/material-moment-adapter',
+            '@angular/platform-browser',
+            '@angular/platform-browser-dynamic',
+            '@angular/router',
+            '@eui/base',
+            '@eui/components',
+            '@eui/core',
+            '@eui/styles',
+            '@ngrx/effects',
+            '@ngrx/store',
+            '@ngx-translate/core',
+            'localforage',
+            'lodash-es',
+            'reselect',
+            'rxjs',
+            'tslib',
+            'zone.js',
+        ];
+        const stackblitzDevDependencies = ['@angular-devkit/build-angular', '@angular/cli', '@angular/compiler-cli', 'typescript'];
+        return this.getCurrentShowcaseEuiVersion()
+            .then((version) => this.retrievePackageDependencies(version))
+            .then((dependencies) => {
+            // filter dependencies to only what stackblitz needs
+            let filteredArr = Object.entries(dependencies).filter((v) => stackblitzDependencies.find((s) => s === v[0]));
+            const filteredObj = Object.fromEntries(filteredArr);
+            const extraDependencies = {
+                uuid: '8.3.2',
+                'ngx-device-detector': '3.0.0',
+                'ngx-moment': '~6.0.0',
+                'ngx-mask': '^14.0.0',
+                'cleave.js': '^1.6.0',
+                moment: '^2.19.3',
+                extend: '^3.0.2',
+            };
+            // filter devDependencies to only what stackblitz needs
+            filteredArr = Object.entries(dependencies).filter((v) => stackblitzDevDependencies.find((s) => s === v[0]));
+            dependencies = { ...extraDependencies, ...filteredObj };
+            const devDependencies = Object.fromEntries(filteredArr);
+            return { dependencies, devDependencies };
+        });
+    }
+    /**
+     * Retrieve the dependencies from the package.json file of @eui/deps-base for the given version.
+     *
+     * @param version
+     * @private
+     */
+    retrievePackageDependencies(version) {
+        return fetch(`https://unpkg.com/@eui/deps-base@${version}/package.json`)
+            .then((response) => response.json())
+            .then((pkg) => pkg?.dependencies);
+    }
+    /**
+     * Retrieve the eUI version used to build the showcase from application app-metadata.json
+     *
+     * @private
+     */
+    getCurrentShowcaseEuiVersion() {
+        return lastValueFrom(this.http.get('assets/app-metadata.json', { responseType: 'json' })).then((res) => res?.appVersion || 'latest');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: StackblitzService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: StackblitzService }); }
+}
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: StackblitzService, decorators: [{
-  type: Injectable
-}] });
+            type: Injectable
+        }] });
 
-// lib/components/eui-code-highlighter/eui-code-highlighter.component.mjs
-import { Directive } from "@angular/core";
-import * as i02 from "@angular/core";
-var EuiCodeHighlighterDirective = class _EuiCodeHighlighterDirective {
-  constructor(el) {
-    this.el = el;
-  }
-  ngAfterViewInit() {
-    if (window["Prism"]) {
-      window["Prism"].highlightElement(this.el.nativeElement);
+class EuiCodeHighlighterDirective {
+    constructor(el) {
+        this.el = el;
     }
-  }
-  static {
-    this.ɵfac = i02.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i02, type: _EuiCodeHighlighterDirective, deps: [{ token: i02.ElementRef }], target: i02.ɵɵFactoryTarget.Directive });
-  }
-  static {
-    this.ɵdir = i02.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _EuiCodeHighlighterDirective, selector: "[euiCode]", ngImport: i02 });
-  }
-};
-i02.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i02, type: EuiCodeHighlighterDirective, decorators: [{
-  type: Directive,
-  args: [{
-    selector: "[euiCode]"
-  }]
-}], ctorParameters: () => [{ type: i02.ElementRef }] });
-
-// lib/components/doc-sample/doc-sample.component.mjs
-import { Component, Input, ViewEncapsulation, HostBinding, booleanAttribute } from "@angular/core";
-import { forkJoin, Observable } from "rxjs";
-import { map, catchError } from "rxjs/operators";
-import * as i03 from "@angular/core";
-import * as i2 from "@angular/common/http";
-import * as i3 from "@eui/core";
-import * as i4 from "@angular/cdk/clipboard";
-import * as i5 from "@angular/router";
-import * as i6 from "@angular/common";
-import * as i7 from "@eui/components/eui-card";
-import * as i8 from "@eui/components/eui-button";
-import * as i9 from "@eui/components/eui-tabs";
-import * as i10 from "@eui/components/eui-icon";
-import * as i11 from "@eui/components/eui-label";
-var DocSampleComponent = class _DocSampleComponent {
-  constructor(sb, _http, asService, cd, growlService, clipboard, router) {
-    this.sb = sb;
-    this._http = _http;
-    this.asService = asService;
-    this.cd = cd;
-    this.growlService = growlService;
-    this.clipboard = clipboard;
-    this.router = router;
-    this.id = "";
-    this.label = "";
-    this.styleClass = "";
-    this.renderPlayground = false;
-    this.isCodeButtonVisible = true;
-    this.isInnerSection = false;
-    this.classes = "eui-showcase-doc-sample";
-    this.isCodeLoaded = false;
-    this.isCodeLoading = false;
-    this.isCodeExpanded = false;
-    this.playground_activated = false;
-  }
-  ngAfterContentInit() {
-    if (!this.label) {
-      this.label = this.id;
+    ngAfterViewInit() {
+        if (window['Prism']) {
+            window['Prism'].highlightElement(this.el.nativeElement);
+        }
     }
-  }
-  copyCurrentUrlToClipboard(id) {
-    try {
-      const baseDomain = window?.location?.origin;
-      const currentUrl = this.router.url.split("#");
-      const fullUrl = baseDomain + currentUrl[0] + "#" + id;
-      this.clipboard.copy(fullUrl);
-    } catch (err) {
-      this.growlService.growl({ severity: "danger", summary: "Clipboard service not available" });
-    } finally {
-      this.growlService.growl({ severity: "info", summary: "Link URL copied to clipboard" });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EuiCodeHighlighterDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: EuiCodeHighlighterDirective, selector: "[euiCode]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EuiCodeHighlighterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[euiCode]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+class DocSampleComponent {
+    constructor(sb, _http, asService, cd, growlService, clipboard, router) {
+        this.sb = sb;
+        this._http = _http;
+        this.asService = asService;
+        this.cd = cd;
+        this.growlService = growlService;
+        this.clipboard = clipboard;
+        this.router = router;
+        this.id = '';
+        this.label = '';
+        this.styleClass = '';
+        this.renderPlayground = false;
+        this.isCodeButtonVisible = true;
+        this.isInnerSection = false;
+        this.classes = 'eui-showcase-doc-sample';
+        this.isCodeLoaded = false;
+        this.isCodeLoading = false;
+        this.isCodeExpanded = false;
+        this.playground_activated = false;
     }
-  }
-  onToggleCode() {
-    if (this.isCodeLoaded) {
-      this.isCodeExpanded = !this.isCodeExpanded;
+    ngAfterContentInit() {
+        if (!this.label) {
+            this.label = this.id;
+        }
     }
-    if (!this.isCodeLoaded) {
-      this.loadCodeFiles().subscribe((demo) => {
-        this.tsContent = demo.typescript;
-        this.htmlContent = demo.html;
-        this.isCodeLoaded = true;
-        this.isCodeExpanded = true;
-        this.isCodeLoading = false;
-        this.cd.detectChanges();
-      });
+    copyCurrentUrlToClipboard(id) {
+        try {
+            const baseDomain = window?.location?.origin;
+            const currentUrl = this.router.url.split('#');
+            const fullUrl = baseDomain + currentUrl[0] + '#' + id;
+            this.clipboard.copy(fullUrl);
+        }
+        catch (err) {
+            this.growlService.growl({ severity: 'danger', summary: 'Clipboard service not available' });
+        }
+        finally {
+            this.growlService.growl({ severity: 'info', summary: 'Link URL copied to clipboard' });
+        }
     }
-  }
-  /**
-   * on playground tab selected inform the playground component that its content is rendered
-   * TODO: fix the bug on eui-tab implementation where the ngAfterViewInit is called without the view actually
-   *  being rendered on screen. Issue is that initially the view is being rendered and then removed from the DOM.
-   *  Internally eui-tabs is moving the projected content.
-   *
-   * @param selected The selected tab component reference and its index in the tabs array.
-   */
-  onSelectedTab(selected) {
-    this.playground_activated = selected.index === 2;
-  }
-  /**
-   * filter out the extra import and module from the code sample
-   *
-   * @param code
-   */
-  filterOutModuleAndImports(code) {
-    const moduleRegex = /@NgModule\(([\s\S]*?)\)\nexport class \w+ \{([\s\S]*?)\}/g;
-    code = code.replace(moduleRegex, "");
-    code = code.replace("import { EuiAllModule } from '@eui/components';\n", "");
-    code = code.replace("import { NgModule } from '@angular/core';\n", "");
-    return code;
-  }
-  /**
-   * open the code sample in stackblitz
-   */
-  onStackblitzOpen() {
-    this.loadCodeFiles().subscribe((demo) => {
-      this.tsContent = demo.typescript;
-      this.htmlContent = demo.html;
-      this.sb.openStackBlitz(this.htmlContent, this.tsContent, "eUI Playground", this.id);
-    });
-  }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  _getComponent(id) {
-    const flatLinks = this.flatten(this.asService.state.sidebarLinks);
-    return flatLinks.filter((item) => item.id === id)[0];
-  }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  flatten(links) {
-    return links ? links.reduce(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (result, item) => [
-        ...result,
-        {
-          id: item.id,
-          alternateSampleLocation: item.alternateSampleLocation
-        },
-        ...this.flatten(item.children)
-      ],
-      []
-    ) : [];
-  }
-  loadCodeFiles() {
-    this.isCodeLoading = true;
-    const url = window.location;
-    const pathName = url.pathname;
-    const pathNameArray = pathName.split("/");
-    let samplePathArray = [];
-    const cmpId = pathNameArray[pathNameArray.length - 1];
-    const cmp = this._getComponent(cmpId);
-    if (cmp && cmp.alternateSampleLocation) {
-      samplePathArray = cmp.alternateSampleLocation.split("/").reverse();
-    } else {
-      for (let i = pathNameArray.length - 1; i >= 0; i--) {
-        if (pathNameArray[i].indexOf("eui-showcase-") > -1 || pathNameArray[i].indexOf("localhost") > -1) {
-          break;
+    onToggleCode() {
+        if (this.isCodeLoaded) {
+            this.isCodeExpanded = !this.isCodeExpanded;
         }
-        if (pathNameArray[i] !== "") {
-          samplePathArray.push(pathNameArray[i]);
+        if (!this.isCodeLoaded) {
+            this.loadCodeFiles().subscribe((demo) => {
+                this.tsContent = demo.typescript;
+                this.htmlContent = demo.html;
+                this.isCodeLoaded = true;
+                this.isCodeExpanded = true;
+                this.isCodeLoading = false;
+                this.cd.detectChanges();
+            });
         }
-      }
     }
-    samplePathArray = samplePathArray.reverse();
-    samplePathArray.push("samples");
-    samplePathArray.push(this.id);
-    const samplesPath = `assets/samples/${samplePathArray.join("/")}`;
-    return forkJoin({
-      typescript: this._http.get(`${samplesPath}/component.ts`, {
-        responseType: "text"
-      }),
-      html: this._http.get(`${samplesPath}/component.html`, {
-        responseType: "text"
-      })
-    }).pipe(map((responses) => {
-      this.isCodeLoaded = true;
-      this.isCodeLoading = false;
-      return { typescript: responses.typescript, html: responses.html };
-    }), catchError((error) => {
-      this.growlService.growlError(`Issue while fetching : ${error.url} : ${error.status}-${error.statusText}`);
-      return new Observable((subscriber) => {
-        try {
-          subscriber.error(error);
-        } catch (err) {
-          subscriber.error(error);
+    /**
+     * on playground tab selected inform the playground component that its content is rendered
+     * TODO: fix the bug on eui-tab implementation where the ngAfterViewInit is called without the view actually
+     *  being rendered on screen. Issue is that initially the view is being rendered and then removed from the DOM.
+     *  Internally eui-tabs is moving the projected content.
+     *
+     * @param selected The selected tab component reference and its index in the tabs array.
+     */
+    onSelectedTab(selected) {
+        this.playground_activated = selected.index === 2;
+    }
+    /**
+     * filter out the extra import and module from the code sample
+     *
+     * @param code
+     */
+    filterOutModuleAndImports(code) {
+        // filter out module
+        const moduleRegex = /@NgModule\(([\s\S]*?)\)\nexport class \w+ \{([\s\S]*?)\}/g;
+        code = code.replace(moduleRegex, '');
+        // filter out extra imports
+        // eslint-disable-next-line
+        code = code.replace("import { EuiAllModule } from '@eui/components';\n", '');
+        // eslint-disable-next-line
+        code = code.replace("import { NgModule } from '@angular/core';\n", '');
+        return code;
+    }
+    /**
+     * open the code sample in stackblitz
+     */
+    onStackblitzOpen() {
+        this.loadCodeFiles().subscribe((demo) => {
+            this.tsContent = demo.typescript;
+            this.htmlContent = demo.html;
+            this.sb.openStackBlitz(this.htmlContent, this.tsContent, 'eUI Playground', this.id);
+        });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _getComponent(id) {
+        const flatLinks = this.flatten(this.asService.state.sidebarLinks);
+        return flatLinks.filter((item) => item.id === id)[0];
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    flatten(links) {
+        return links
+            ? links.reduce(
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (result, item) => [
+                ...result,
+                {
+                    id: item.id,
+                    alternateSampleLocation: item.alternateSampleLocation,
+                },
+                ...this.flatten(item.children),
+            ], [])
+            : [];
+    }
+    loadCodeFiles() {
+        this.isCodeLoading = true;
+        const url = window.location;
+        const pathName = url.pathname;
+        const pathNameArray = pathName.split('/');
+        let samplePathArray = [];
+        const cmpId = pathNameArray[pathNameArray.length - 1];
+        const cmp = this._getComponent(cmpId);
+        if (cmp && cmp.alternateSampleLocation) {
+            samplePathArray = cmp.alternateSampleLocation.split('/').reverse();
         }
-      });
-    }));
-  }
-  static {
-    this.ɵfac = i03.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i03, type: _DocSampleComponent, deps: [{ token: StackblitzService }, { token: i2.HttpClient }, { token: i3.EuiAppShellService }, { token: i03.ChangeDetectorRef }, { token: i3.EuiGrowlService }, { token: i4.Clipboard }, { token: i5.Router }], target: i03.ɵɵFactoryTarget.Component });
-  }
-  static {
-    this.ɵcmp = i03.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.3", type: _DocSampleComponent, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", category: "category", description: "description", defaultValue: "defaultValue", styleClass: "styleClass", renderPlayground: ["renderPlayground", "renderPlayground", booleanAttribute], isCodeButtonVisible: ["isCodeButtonVisible", "isCodeButtonVisible", booleanAttribute], isInnerSection: ["isInnerSection", "isInnerSection", booleanAttribute] }, host: { properties: { "class": "this.classes" } }, ngImport: i03, template: '<div class="doc-sample-title">\n    <div class="doc-sample-title__label" [class.doc-sample-title__label--inner]="isInnerSection">\n        {{ label }}\n        <button\n            euiButton\n            euiIconButton\n            euiBasicButton\n            euiRounded\n            euiPrimary\n            euiSizeS\n            (click)="copyCurrentUrlToClipboard(id)"\n            class="doc-sample-title__link"\n            tabindex="-1">\n            <eui-icon-svg icon="link" set="outline" size="l" fillColor="grey-75"></eui-icon-svg>\n        </button>\n    </div>\n    <div *ngIf="renderPlayground" class="doc-sample-title__items" style="margin-right: 3px">\n        <button\n            *ngIf="isCodeButtonVisible"\n            type="button"\n            euiButton\n            [euiOutline]="!isCodeExpanded"\n            euiPrimary\n            euiSizeS\n            (click)="onStackblitzOpen()">\n            <span euiLabel>Stackblitz</span>\n            <eui-icon-svg icon="expand:sharp"></eui-icon-svg>\n        </button>\n    </div>\n    <div class="doc-sample-title__items">\n        <button\n            *ngIf="isCodeButtonVisible"\n            type="button"\n            euiButton\n            [euiOutline]="!isCodeExpanded"\n            euiPrimary\n            euiSizeS\n            (click)="onToggleCode()"\n            [euiDisabled]="isCodeLoading">\n            <eui-icon-svg *ngIf="isCodeLoading" isLoading></eui-icon-svg>\n            <span *ngIf="!isCodeExpanded" euiLabel>Code</span>\n            <span *ngIf="isCodeExpanded" euiLabel>Hide Code</span>\n            <eui-icon-svg icon="eui-code"></eui-icon-svg>\n        </button>\n    </div>\n</div>\n\n<ng-template [ngIf]="isCodeExpanded">\n    <eui-card euiNoContentPadding>\n        <eui-card-content>\n            <eui-tabs (tabSelect)="onSelectedTab($event)">\n                <eui-tab [isVisible]="htmlContent">\n                    <euiTabLabel>\n                        HTML\n                        <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class="language-markup" euiCode>{{htmlContent}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n                <eui-tab [isVisible]="tsContent">\n                    <euiTabLabel>\n                        TS\n                        <euiTabSubLabel>Typescript</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class="language-javascript" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n            </eui-tabs>\n        </eui-card-content>\n    </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n', styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-2xl);margin-top:var(--eui-s-6xl);width:100%}.eui-showcase-doc-sample:first-child{margin-top:var(--eui-s-xl)}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-s);border-bottom:1px solid var(--eui-c-neutral-lightest)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-s-xl);width:100%;letter-spacing:-.75px;font:var(--eui-f-xl-bold)}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-neutral-light);font:var(--eui-f-l)}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-s-m)}.eui-showcase-doc-sample .doc-sample-section-title,.eui-showcase-doc-sample h6.section-title{border-bottom:none;letter-spacing:-.5px;margin:var(--eui-s-3xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-info-darker);font:var(--eui-f-l)!important}.eui-showcase-doc-sample .doc-sample-section-title:first-child,.eui-showcase-doc-sample h6.section-title:first-child{margin-top:var(--eui-s-m)!important}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i7.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i8.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i9.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i9.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i9.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i9.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i9.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i10.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i11.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }], encapsulation: i03.ViewEncapsulation.None });
-  }
-};
-i03.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i03, type: DocSampleComponent, decorators: [{
-  type: Component,
-  args: [{ selector: "eui-showcase-doc-sample", encapsulation: ViewEncapsulation.None, template: '<div class="doc-sample-title">\n    <div class="doc-sample-title__label" [class.doc-sample-title__label--inner]="isInnerSection">\n        {{ label }}\n        <button\n            euiButton\n            euiIconButton\n            euiBasicButton\n            euiRounded\n            euiPrimary\n            euiSizeS\n            (click)="copyCurrentUrlToClipboard(id)"\n            class="doc-sample-title__link"\n            tabindex="-1">\n            <eui-icon-svg icon="link" set="outline" size="l" fillColor="grey-75"></eui-icon-svg>\n        </button>\n    </div>\n    <div *ngIf="renderPlayground" class="doc-sample-title__items" style="margin-right: 3px">\n        <button\n            *ngIf="isCodeButtonVisible"\n            type="button"\n            euiButton\n            [euiOutline]="!isCodeExpanded"\n            euiPrimary\n            euiSizeS\n            (click)="onStackblitzOpen()">\n            <span euiLabel>Stackblitz</span>\n            <eui-icon-svg icon="expand:sharp"></eui-icon-svg>\n        </button>\n    </div>\n    <div class="doc-sample-title__items">\n        <button\n            *ngIf="isCodeButtonVisible"\n            type="button"\n            euiButton\n            [euiOutline]="!isCodeExpanded"\n            euiPrimary\n            euiSizeS\n            (click)="onToggleCode()"\n            [euiDisabled]="isCodeLoading">\n            <eui-icon-svg *ngIf="isCodeLoading" isLoading></eui-icon-svg>\n            <span *ngIf="!isCodeExpanded" euiLabel>Code</span>\n            <span *ngIf="isCodeExpanded" euiLabel>Hide Code</span>\n            <eui-icon-svg icon="eui-code"></eui-icon-svg>\n        </button>\n    </div>\n</div>\n\n<ng-template [ngIf]="isCodeExpanded">\n    <eui-card euiNoContentPadding>\n        <eui-card-content>\n            <eui-tabs (tabSelect)="onSelectedTab($event)">\n                <eui-tab [isVisible]="htmlContent">\n                    <euiTabLabel>\n                        HTML\n                        <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class="language-markup" euiCode>{{htmlContent}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n                <eui-tab [isVisible]="tsContent">\n                    <euiTabLabel>\n                        TS\n                        <euiTabSubLabel>Typescript</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class="language-javascript" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n            </eui-tabs>\n        </eui-card-content>\n    </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n', styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-2xl);margin-top:var(--eui-s-6xl);width:100%}.eui-showcase-doc-sample:first-child{margin-top:var(--eui-s-xl)}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-s);border-bottom:1px solid var(--eui-c-neutral-lightest)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-s-xl);width:100%;letter-spacing:-.75px;font:var(--eui-f-xl-bold)}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-neutral-light);font:var(--eui-f-l)}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-s-m)}.eui-showcase-doc-sample .doc-sample-section-title,.eui-showcase-doc-sample h6.section-title{border-bottom:none;letter-spacing:-.5px;margin:var(--eui-s-3xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-info-darker);font:var(--eui-f-l)!important}.eui-showcase-doc-sample .doc-sample-section-title:first-child,.eui-showcase-doc-sample h6.section-title:first-child{margin-top:var(--eui-s-m)!important}\n"] }]
-}], ctorParameters: () => [{ type: StackblitzService }, { type: i2.HttpClient }, { type: i3.EuiAppShellService }, { type: i03.ChangeDetectorRef }, { type: i3.EuiGrowlService }, { type: i4.Clipboard }, { type: i5.Router }], propDecorators: { id: [{
-  type: Input
-}], label: [{
-  type: Input
-}], category: [{
-  type: Input
-}], description: [{
-  type: Input
-}], defaultValue: [{
-  type: Input
-}], styleClass: [{
-  type: Input
-}], renderPlayground: [{
-  type: Input,
-  args: [{ transform: booleanAttribute }]
-}], isCodeButtonVisible: [{
-  type: Input,
-  args: [{ transform: booleanAttribute }]
-}], isInnerSection: [{
-  type: Input,
-  args: [{ transform: booleanAttribute }]
-}], classes: [{
-  type: HostBinding,
-  args: ["class"]
-}] } });
-
-// lib/components/doc-section/doc-section.component.mjs
-import { Component as Component2, Input as Input2, ViewEncapsulation as ViewEncapsulation3, HostBinding as HostBinding2 } from "@angular/core";
-import * as i04 from "@angular/core";
-var DocSectionComponent = class _DocSectionComponent {
-  constructor() {
-    this.string = "eui-showcase-doc-section";
-    this.id = "";
-    this.label = "";
-    this.styleClass = "";
-  }
-  ngAfterContentInit() {
-    if (!this.label) {
-      this.label = this.id;
+        else {
+            for (let i = pathNameArray.length - 1; i >= 0; i--) {
+                if (pathNameArray[i].indexOf('eui-showcase-') > -1 || pathNameArray[i].indexOf('localhost') > -1) {
+                    break;
+                }
+                if (pathNameArray[i] !== '') {
+                    samplePathArray.push(pathNameArray[i]);
+                }
+            }
+        }
+        samplePathArray = samplePathArray.reverse();
+        samplePathArray.push('samples');
+        samplePathArray.push(this.id);
+        const samplesPath = `assets/samples/${samplePathArray.join('/')}`;
+        return forkJoin({
+            typescript: this._http.get(`${samplesPath}/component.ts`, {
+                responseType: 'text',
+            }),
+            html: this._http.get(`${samplesPath}/component.html`, {
+                responseType: 'text',
+            }),
+        })
+            .pipe(map((responses) => {
+            this.isCodeLoaded = true;
+            this.isCodeLoading = false;
+            return { typescript: responses.typescript, html: responses.html };
+        }), catchError((error) => {
+            this.growlService.growlError(`Issue while fetching : ${error.url} : ${error.status}-${error.statusText}`);
+            return new Observable((subscriber) => {
+                try {
+                    subscriber.error(error);
+                }
+                catch (err) {
+                    subscriber.error(error);
+                }
+            });
+        }));
     }
-  }
-  static {
-    this.ɵfac = i04.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i04, type: _DocSectionComponent, deps: [], target: i04.ɵɵFactoryTarget.Component });
-  }
-  static {
-    this.ɵcmp = i04.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocSectionComponent, selector: "eui-showcase-doc-section", inputs: { id: "id", label: "label", styleClass: "styleClass" }, host: { properties: { "class": "this.string" } }, ngImport: i04, template: '<div id="sections" class="doc-section-title">{{label}}</div>\n<!-- <h4 id="sections" class="eui-u-font-bold eui-u-color-info eui-u-text-h4 mb-3">{{ label }}</h4> -->\n\n<ng-content></ng-content>\n', styles: [".eui-showcase-doc-section{display:block;margin-bottom:var(--eui-s-4xl)}.doc-section-title{display:flex;align-items:center;width:100%;margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-xs);border-bottom:1px solid var(--eui-c-neutral-lightest);font:var(--eui-f-xl-bold)}.doc-sample-section-title{border-bottom:1px solid var(--eui-c-neutral-lighter);letter-spacing:-.25px;margin:var(--eui-s-2xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-2xs);width:auto;display:table;color:var(--eui-c-primary-dark);font:var(--eui-f-l)}.doc-sample-section-title:first-child{margin-top:0}\n"], encapsulation: i04.ViewEncapsulation.None });
-  }
-};
-i04.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i04, type: DocSectionComponent, decorators: [{
-  type: Component2,
-  args: [{ selector: "eui-showcase-doc-section", encapsulation: ViewEncapsulation3.None, template: '<div id="sections" class="doc-section-title">{{label}}</div>\n<!-- <h4 id="sections" class="eui-u-font-bold eui-u-color-info eui-u-text-h4 mb-3">{{ label }}</h4> -->\n\n<ng-content></ng-content>\n', styles: [".eui-showcase-doc-section{display:block;margin-bottom:var(--eui-s-4xl)}.doc-section-title{display:flex;align-items:center;width:100%;margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-xs);border-bottom:1px solid var(--eui-c-neutral-lightest);font:var(--eui-f-xl-bold)}.doc-sample-section-title{border-bottom:1px solid var(--eui-c-neutral-lighter);letter-spacing:-.25px;margin:var(--eui-s-2xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-2xs);width:auto;display:table;color:var(--eui-c-primary-dark);font:var(--eui-f-l)}.doc-sample-section-title:first-child{margin-top:0}\n"] }]
-}], propDecorators: { string: [{
-  type: HostBinding2,
-  args: ["class"]
-}], id: [{
-  type: Input2
-}], label: [{
-  type: Input2
-}], styleClass: [{
-  type: Input2
-}] } });
-
-// lib/components/doc-page-code/doc-page-code.component.mjs
-import { Component as Component3, Input as Input3 } from "@angular/core";
-import * as i05 from "@angular/core";
-import * as i1 from "@eui/components/eui-button";
-import * as i22 from "@eui/components/eui-icon";
-import * as i32 from "@eui/components/eui-label";
-var DocPageCodeComponent = class _DocPageCodeComponent {
-  constructor() {
-    this.codeFolder = "";
-    this.showcase = "ux";
-  }
-  onOpenCode() {
-    const sourceRootPath = `https://citnet.tech.ec.europa.eu/CITnet/stash/projects/CSDR/repos/app-eui-showcase-${this.showcase}/browse/src/app/`;
-    window.open(sourceRootPath + this.codeFolder, "_blank");
-  }
-  static {
-    this.ɵfac = i05.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i05, type: _DocPageCodeComponent, deps: [], target: i05.ɵɵFactoryTarget.Component });
-  }
-  static {
-    this.ɵcmp = i05.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, ngImport: i05, template: '<button type="button" euiButton euiAccent (click)="onOpenCode()">\n    <span euiLabel>Check the code</span>\n    <eui-icon-svg icon="eui-code"></eui-icon-svg>\n</button>\n', dependencies: [{ kind: "component", type: i1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i22.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i32.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }] });
-  }
-};
-i05.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i05, type: DocPageCodeComponent, decorators: [{
-  type: Component3,
-  args: [{ selector: "eui-showcase-doc-page-code", template: '<button type="button" euiButton euiAccent (click)="onOpenCode()">\n    <span euiLabel>Check the code</span>\n    <eui-icon-svg icon="eui-code"></eui-icon-svg>\n</button>\n' }]
-}], propDecorators: { codeFolder: [{
-  type: Input3
-}], showcase: [{
-  type: Input3
-}] } });
-
-// lib/components/doc-page/doc-page.component.mjs
-import { Component as Component4, Input as Input4, Directive as Directive2, ContentChildren, forwardRef, ViewEncapsulation as ViewEncapsulation5, ViewChild } from "@angular/core";
-import * as i06 from "@angular/core";
-import * as i12 from "@angular/router";
-import * as i23 from "@eui/core";
-import * as i33 from "@angular/platform-browser";
-import * as i42 from "@angular/common";
-import * as i52 from "@eui/components/eui-tabs";
-import * as i62 from "@eui/components/eui-page";
-import * as i72 from "@eui/components/eui-chip";
-import * as i82 from "@eui/components/eui-alert";
-import * as i92 from "@eui/components/eui-label";
-var DocPageComponent = class _DocPageComponent {
-  constructor(router, route, asService, sanitizer, location) {
-    this.router = router;
-    this.route = route;
-    this.asService = asService;
-    this.sanitizer = sanitizer;
-    this.location = location;
-    this.isNotReady = false;
-    this.isDeprecated = false;
-    this.isLegacy = false;
-    this.showcase = "ux";
-    this.isNavigationVisible = true;
-    this.hasApi = true;
-    this.hasA11y = true;
-    this.isLoading = true;
-    this.isNavClicked = true;
-    this.hasCategories = false;
-    this.categories = [];
-    this.TABS_DEF = [
-      { index: 0, id: "samples" },
-      { index: 1, id: "api" },
-      { index: 2, id: "a11y" },
-      { index: 3, id: "theming" },
-      { index: 4, id: "advanced" }
-    ];
-  }
-  ngOnInit() {
-    setTimeout(() => {
-      this.asService.isBlockDocumentActive = true;
-    });
-    this.appMetadata = this.asService.state.appMetadata;
-    if (this.id && !this.label) {
-      this.label = this.id;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocSampleComponent, deps: [{ token: StackblitzService }, { token: i2.HttpClient }, { token: i3.EuiAppShellService }, { token: i0.ChangeDetectorRef }, { token: i3.EuiGrowlService }, { token: i4.Clipboard }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.3", type: DocSampleComponent, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", category: "category", description: "description", defaultValue: "defaultValue", styleClass: "styleClass", renderPlayground: ["renderPlayground", "renderPlayground", booleanAttribute], isCodeButtonVisible: ["isCodeButtonVisible", "isCodeButtonVisible", booleanAttribute], isInnerSection: ["isInnerSection", "isInnerSection", booleanAttribute] }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<div class=\"doc-sample-title\">\n    <div class=\"doc-sample-title__label\" [class.doc-sample-title__label--inner]=\"isInnerSection\">\n        {{ label }}\n        <button\n            euiButton\n            euiIconButton\n            euiBasicButton\n            euiRounded\n            euiPrimary\n            euiSizeS\n            (click)=\"copyCurrentUrlToClipboard(id)\"\n            class=\"doc-sample-title__link\"\n            tabindex=\"-1\">\n            <eui-icon-svg icon=\"link\" set=\"outline\" size=\"l\" fillColor=\"grey-75\"></eui-icon-svg>\n        </button>\n    </div>\n    <div *ngIf=\"renderPlayground\" class=\"doc-sample-title__items\" style=\"margin-right: 3px\">\n        <button\n            *ngIf=\"isCodeButtonVisible\"\n            type=\"button\"\n            euiButton\n            [euiOutline]=\"!isCodeExpanded\"\n            euiPrimary\n            euiSizeS\n            (click)=\"onStackblitzOpen()\">\n            <span euiLabel>Stackblitz</span>\n            <eui-icon-svg icon=\"expand:sharp\"></eui-icon-svg>\n        </button>\n    </div>\n    <div class=\"doc-sample-title__items\">\n        <button\n            *ngIf=\"isCodeButtonVisible\"\n            type=\"button\"\n            euiButton\n            [euiOutline]=\"!isCodeExpanded\"\n            euiPrimary\n            euiSizeS\n            (click)=\"onToggleCode()\"\n            [euiDisabled]=\"isCodeLoading\">\n            <eui-icon-svg *ngIf=\"isCodeLoading\" isLoading></eui-icon-svg>\n            <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n            <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n            <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n        </button>\n    </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-card euiNoContentPadding>\n        <eui-card-content>\n            <eui-tabs (tabSelect)=\"onSelectedTab($event)\">\n                <eui-tab [isVisible]=\"htmlContent\">\n                    <euiTabLabel>\n                        HTML\n                        <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n                <eui-tab [isVisible]=\"tsContent\">\n                    <euiTabLabel>\n                        TS\n                        <euiTabSubLabel>Typescript</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n            </eui-tabs>\n        </eui-card-content>\n    </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-2xl);margin-top:var(--eui-s-6xl);width:100%}.eui-showcase-doc-sample:first-child{margin-top:var(--eui-s-xl)}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-s);border-bottom:1px solid var(--eui-c-neutral-lightest)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-s-xl);width:100%;letter-spacing:-.75px;font:var(--eui-f-xl-bold)}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-neutral-light);font:var(--eui-f-l)}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-s-m)}.eui-showcase-doc-sample .doc-sample-section-title,.eui-showcase-doc-sample h6.section-title{border-bottom:none;letter-spacing:-.5px;margin:var(--eui-s-3xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-info-darker);font:var(--eui-f-l)!important}.eui-showcase-doc-sample .doc-sample-section-title:first-child,.eui-showcase-doc-sample h6.section-title:first-child{margin-top:var(--eui-s-m)!important}\n"], dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i2$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i9.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i9.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i9.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i9.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i9.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i10.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i11.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocSampleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-showcase-doc-sample', encapsulation: ViewEncapsulation.None, template: "<div class=\"doc-sample-title\">\n    <div class=\"doc-sample-title__label\" [class.doc-sample-title__label--inner]=\"isInnerSection\">\n        {{ label }}\n        <button\n            euiButton\n            euiIconButton\n            euiBasicButton\n            euiRounded\n            euiPrimary\n            euiSizeS\n            (click)=\"copyCurrentUrlToClipboard(id)\"\n            class=\"doc-sample-title__link\"\n            tabindex=\"-1\">\n            <eui-icon-svg icon=\"link\" set=\"outline\" size=\"l\" fillColor=\"grey-75\"></eui-icon-svg>\n        </button>\n    </div>\n    <div *ngIf=\"renderPlayground\" class=\"doc-sample-title__items\" style=\"margin-right: 3px\">\n        <button\n            *ngIf=\"isCodeButtonVisible\"\n            type=\"button\"\n            euiButton\n            [euiOutline]=\"!isCodeExpanded\"\n            euiPrimary\n            euiSizeS\n            (click)=\"onStackblitzOpen()\">\n            <span euiLabel>Stackblitz</span>\n            <eui-icon-svg icon=\"expand:sharp\"></eui-icon-svg>\n        </button>\n    </div>\n    <div class=\"doc-sample-title__items\">\n        <button\n            *ngIf=\"isCodeButtonVisible\"\n            type=\"button\"\n            euiButton\n            [euiOutline]=\"!isCodeExpanded\"\n            euiPrimary\n            euiSizeS\n            (click)=\"onToggleCode()\"\n            [euiDisabled]=\"isCodeLoading\">\n            <eui-icon-svg *ngIf=\"isCodeLoading\" isLoading></eui-icon-svg>\n            <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n            <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n            <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n        </button>\n    </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-card euiNoContentPadding>\n        <eui-card-content>\n            <eui-tabs (tabSelect)=\"onSelectedTab($event)\">\n                <eui-tab [isVisible]=\"htmlContent\">\n                    <euiTabLabel>\n                        HTML\n                        <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n                <eui-tab [isVisible]=\"tsContent\">\n                    <euiTabLabel>\n                        TS\n                        <euiTabSubLabel>Typescript</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n            </eui-tabs>\n        </eui-card-content>\n    </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-2xl);margin-top:var(--eui-s-6xl);width:100%}.eui-showcase-doc-sample:first-child{margin-top:var(--eui-s-xl)}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-s);border-bottom:1px solid var(--eui-c-neutral-lightest)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-s-xl);width:100%;letter-spacing:-.75px;font:var(--eui-f-xl-bold)}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-neutral-light);font:var(--eui-f-l)}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-s-m)}.eui-showcase-doc-sample .doc-sample-section-title,.eui-showcase-doc-sample h6.section-title{border-bottom:none;letter-spacing:-.5px;margin:var(--eui-s-3xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-info-darker);font:var(--eui-f-l)!important}.eui-showcase-doc-sample .doc-sample-section-title:first-child,.eui-showcase-doc-sample h6.section-title:first-child{margin-top:var(--eui-s-m)!important}\n"] }]
+        }], ctorParameters: () => [{ type: StackblitzService }, { type: i2.HttpClient }, { type: i3.EuiAppShellService }, { type: i0.ChangeDetectorRef }, { type: i3.EuiGrowlService }, { type: i4.Clipboard }, { type: i1.Router }], propDecorators: { id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], category: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], defaultValue: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], renderPlayground: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isCodeButtonVisible: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isInnerSection: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class DocSectionComponent {
+    constructor() {
+        this.string = 'eui-showcase-doc-section';
+        this.id = '';
+        this.label = '';
+        this.styleClass = '';
     }
-    try {
-      this.cmp = this._getComponentStatus(this.id);
-      if (this.cmp) {
-        switch (this.cmp.status) {
-          case "success":
-            this.stateLabel = "ACTIVE";
-            this.stateTypeClass = "success";
-            break;
-          case "warning":
-            this.stateLabel = "DEPRECATED - will be removed in eUI 18";
-            this.stateTypeClass = "warning";
-            this.isDeprecated = true;
-            break;
-          case "danger":
-            this.stateLabel = "LEGACY - will be removed in eUI 18";
-            this.stateTypeClass = "danger";
-            this.isLegacy = true;
-            break;
-          case "info":
-            this.stateLabel = "NOT READY";
-            this.stateTypeClass = "accent";
-            this.isNotReady = true;
-            break;
+    ngAfterContentInit() {
+        if (!this.label) {
+            this.label = this.id;
         }
-        this.cmpModuleImport = `import { ${this.cmp.metadata?.moduleName} } from '@eui/${this.cmp.metadata?.subEntryName}';`;
-      }
-    } catch (e) {
-      console.log("Warning, errors detected while getting page state");
-      console.log(e);
     }
-    this.fragmentId = this.route.snapshot.fragment;
-  }
-  ngAfterViewInit() {
-    try {
-      this.apiUrl = this._getApiUrl();
-      console.log(`Fetching API url from : ${this.apiUrl}`);
-      setTimeout(() => {
-        this.apiUrlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.apiUrl);
-      });
-    } catch (e) {
-      console.log(e);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocSectionComponent, selector: "eui-showcase-doc-section", inputs: { id: "id", label: "label", styleClass: "styleClass" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<div id=\"sections\" class=\"doc-section-title\">{{label}}</div>\n<!-- <h4 id=\"sections\" class=\"eui-u-font-bold eui-u-color-info eui-u-text-h4 mb-3\">{{ label }}</h4> -->\n\n<ng-content></ng-content>\n", styles: [".eui-showcase-doc-section{display:block;margin-bottom:var(--eui-s-4xl)}.doc-section-title{display:flex;align-items:center;width:100%;margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-xs);border-bottom:1px solid var(--eui-c-neutral-lightest);font:var(--eui-f-xl-bold)}.doc-sample-section-title{border-bottom:1px solid var(--eui-c-neutral-lighter);letter-spacing:-.25px;margin:var(--eui-s-2xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-2xs);width:auto;display:table;color:var(--eui-c-primary-dark);font:var(--eui-f-l)}.doc-sample-section-title:first-child{margin-top:0}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-showcase-doc-section', encapsulation: ViewEncapsulation.None, template: "<div id=\"sections\" class=\"doc-section-title\">{{label}}</div>\n<!-- <h4 id=\"sections\" class=\"eui-u-font-bold eui-u-color-info eui-u-text-h4 mb-3\">{{ label }}</h4> -->\n\n<ng-content></ng-content>\n", styles: [".eui-showcase-doc-section{display:block;margin-bottom:var(--eui-s-4xl)}.doc-section-title{display:flex;align-items:center;width:100%;margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-xs);border-bottom:1px solid var(--eui-c-neutral-lightest);font:var(--eui-f-xl-bold)}.doc-sample-section-title{border-bottom:1px solid var(--eui-c-neutral-lighter);letter-spacing:-.25px;margin:var(--eui-s-2xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-2xs);width:auto;display:table;color:var(--eui-c-primary-dark);font:var(--eui-f-l)}.doc-sample-section-title:first-child{margin-top:0}\n"] }]
+        }], propDecorators: { string: [{
+                type: HostBinding,
+                args: ['class']
+            }], id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }] } });
+
+class DocPageCodeComponent {
+    constructor() {
+        this.codeFolder = '';
+        this.showcase = 'ux';
     }
-    setTimeout(() => {
-      const tab = this.TABS_DEF.filter((t) => t.id === this.fragmentId)[0];
-      const sampleTabIndex = 0;
-      let tabIndex;
-      if (!tab) {
-        tabIndex = sampleTabIndex;
-      } else {
-        tabIndex = tab.index;
-      }
-      const categoriesJson = {};
-      this.samples.forEach((s) => {
-        if (!s.category && s.id !== "_default" && s.id !== "Default") {
-          if (!categoriesJson["others"]) {
-            categoriesJson["others"] = [];
-            categoriesJson["others"].push(s);
-          } else {
-            categoriesJson["others"].push(s);
-          }
-        } else {
-          if (s.id === "_default" || s.id === "Default") {
-            if (!categoriesJson["Base"]) {
-              categoriesJson["Base"] = [];
-              categoriesJson["Base"].push(s);
-            } else {
-              categoriesJson["Base"].push(s);
-            }
-          } else {
-            this.hasCategories = true;
-            if (!categoriesJson[s.category]) {
-              categoriesJson[s.category] = [];
-              categoriesJson[s.category].push(s);
-            } else {
-              categoriesJson[s.category].push(s);
+    onOpenCode() {
+        // eslint-disable-next-line max-len
+        const sourceRootPath = `https://citnet.tech.ec.europa.eu/CITnet/stash/projects/CSDR/repos/app-eui-showcase-${this.showcase}/browse/src/app/`;
+        window.open(sourceRootPath + this.codeFolder, '_blank');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, ngImport: i0, template: "<button type=\"button\" euiButton euiAccent (click)=\"onOpenCode()\">\n    <span euiLabel>Check the code</span>\n    <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n</button>\n", dependencies: [{ kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i10.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i11.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageCodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-showcase-doc-page-code', template: "<button type=\"button\" euiButton euiAccent (click)=\"onOpenCode()\">\n    <span euiLabel>Check the code</span>\n    <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n</button>\n" }]
+        }], propDecorators: { codeFolder: [{
+                type: Input
+            }], showcase: [{
+                type: Input
+            }] } });
+
+class DocPageComponent {
+    constructor(router, route, asService, sanitizer, location) {
+        this.router = router;
+        this.route = route;
+        this.asService = asService;
+        this.sanitizer = sanitizer;
+        this.location = location;
+        this.isNotReady = false;
+        this.isDeprecated = false;
+        this.isLegacy = false;
+        this.showcase = 'ux';
+        this.isNavigationVisible = true;
+        this.hasApi = true;
+        this.hasA11y = true;
+        this.isLoading = true;
+        this.isNavClicked = true;
+        this.hasCategories = false;
+        this.categories = [];
+        this.TABS_DEF = [
+            { index: 0, id: 'samples' },
+            { index: 1, id: 'api' },
+            { index: 2, id: 'a11y' },
+            { index: 3, id: 'theming' },
+            { index: 4, id: 'advanced' },
+        ];
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.asService.isBlockDocumentActive = true;
+        });
+        this.appMetadata = this.asService.state.appMetadata;
+        if (this.id && !this.label) {
+            this.label = this.id;
+        }
+        try {
+            this.cmp = this._getComponentStatus(this.id);
+            if (this.cmp) {
+                switch (this.cmp.status) {
+                    case 'success':
+                        this.stateLabel = 'ACTIVE';
+                        this.stateTypeClass = 'success';
+                        break;
+                    case 'warning':
+                        this.stateLabel = 'DEPRECATED - will be removed in eUI 18';
+                        this.stateTypeClass = 'warning';
+                        this.isDeprecated = true;
+                        break;
+                    case 'danger':
+                        this.stateLabel = 'LEGACY - will be removed in eUI 18';
+                        this.stateTypeClass = 'danger';
+                        this.isLegacy = true;
+                        break;
+                    case 'info':
+                        this.stateLabel = 'NOT READY';
+                        this.stateTypeClass = 'accent';
+                        this.isNotReady = true;
+                        break;
+                }
+                // construct cmp module import string
+                // eslint-disable-next-line
+                this.cmpModuleImport = `import { ${this.cmp.metadata?.moduleName} } from '@eui/${this.cmp.metadata?.subEntryName}';`;
             }
-          }
         }
-      });
-      Object.keys(categoriesJson).forEach((c) => {
-        this.categories.push({
-          name: c,
-          samples: categoriesJson[c]
+        catch (e) {
+            console.log('Warning, errors detected while getting page state');
+            console.log(e);
+        }
+        this.fragmentId = this.route.snapshot.fragment;
+    }
+    ngAfterViewInit() {
+        // getting API url
+        try {
+            this.apiUrl = this._getApiUrl();
+            console.log(`Fetching API url from : ${this.apiUrl}`);
+            setTimeout(() => {
+                this.apiUrlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.apiUrl);
+            });
+        }
+        catch (e) {
+            console.log(e);
+        }
+        setTimeout(() => {
+            const tab = this.TABS_DEF.filter((t) => t.id === this.fragmentId)[0];
+            const sampleTabIndex = 0;
+            let tabIndex;
+            if (!tab) {
+                tabIndex = sampleTabIndex;
+            }
+            else {
+                tabIndex = tab.index;
+            }
+            // constructing categories, if at least one set, if not backward compat with old display
+            const categoriesJson = {};
+            this.samples.forEach((s) => {
+                // "Default" or "_default" sample are always put first in the nav list
+                if (!s.category && s.id !== '_default' && s.id !== 'Default') {
+                    if (!categoriesJson['others']) {
+                        categoriesJson['others'] = [];
+                        categoriesJson['others'].push(s);
+                    }
+                    else {
+                        categoriesJson['others'].push(s);
+                    }
+                }
+                else {
+                    if (s.id === '_default' || s.id === 'Default') {
+                        if (!categoriesJson['Base']) {
+                            categoriesJson['Base'] = [];
+                            categoriesJson['Base'].push(s);
+                        }
+                        else {
+                            categoriesJson['Base'].push(s);
+                        }
+                    }
+                    else {
+                        this.hasCategories = true;
+                        if (!categoriesJson[s.category]) {
+                            categoriesJson[s.category] = [];
+                            categoriesJson[s.category].push(s);
+                        }
+                        else {
+                            categoriesJson[s.category].push(s);
+                        }
+                    }
+                }
+            });
+            // making the list of categories iterable for display
+            Object.keys(categoriesJson).forEach((c) => {
+                this.categories.push({
+                    name: c,
+                    samples: categoriesJson[c],
+                });
+            });
+            // push the "others" at the end of the nav list
+            this.categories.push(this.categories.splice(this.categories.findIndex(v => v.name == 'others'), 1)[0]);
+            this._scrollToFragment(this.fragmentId, tabIndex, true, true);
+            setTimeout(() => {
+                this.asService.isBlockDocumentActive = false;
+                this.isLoading = false;
+            });
         });
-      });
-      this.categories.push(this.categories.splice(this.categories.findIndex((v) => v.name == "others"), 1)[0]);
-      this._scrollToFragment(this.fragmentId, tabIndex, true, true);
-      setTimeout(() => {
-        this.asService.isBlockDocumentActive = false;
-        this.isLoading = false;
-      });
-    });
-  }
-  onNavClick(fragmentId, tabIndex) {
-    this.fragmentId = fragmentId;
-    this.isNavClicked = true;
-    this._scrollToFragment(this.fragmentId, tabIndex, false, true);
-  }
-  onTabSelected(event) {
-    if (!this.isLoading && !this.isNavClicked) {
-      const tabId = this.TABS_DEF.filter((t) => t.index === event.index)[0].id;
-      this._scrollToFragment(tabId, event.index, false, false);
     }
-    this.isNavClicked = false;
-  }
-  _scrollToFragment(fragmentId, tabIndex, init, changeTab) {
-    if (init) {
-      if (this.tabsContent) {
-        this.tabsContent.changeTab(tabIndex);
-        if (fragmentId) {
-          setTimeout(() => {
-            const fgm = document.getElementById(fragmentId);
-            const yOffset = -80;
-            if (fgm) {
-              const y = fgm.getBoundingClientRect().top + window.pageYOffset + yOffset;
-              window.scrollTo({ top: y });
+    onNavClick(fragmentId, tabIndex) {
+        this.fragmentId = fragmentId;
+        this.isNavClicked = true;
+        this._scrollToFragment(this.fragmentId, tabIndex, false, true);
+    }
+    onTabSelected(event) {
+        if (!this.isLoading && !this.isNavClicked) {
+            const tabId = this.TABS_DEF.filter((t) => t.index === event.index)[0].id;
+            this._scrollToFragment(tabId, event.index, false, false);
+        }
+        this.isNavClicked = false;
+    }
+    _scrollToFragment(fragmentId, tabIndex, init, changeTab) {
+        if (init) {
+            if (this.tabsContent) {
+                this.tabsContent.changeTab(tabIndex);
+                if (fragmentId) {
+                    setTimeout(() => {
+                        const fgm = document.getElementById(fragmentId);
+                        const yOffset = -80;
+                        if (fgm) {
+                            const y = fgm.getBoundingClientRect().top + window.pageYOffset + yOffset;
+                            window.scrollTo({ top: y });
+                        }
+                    });
+                }
+            }
+        }
+        else {
+            if (changeTab) {
+                this.router.onSameUrlNavigation = 'reload';
+                this.router.navigate(['.'], { relativeTo: this.route, fragment: fragmentId }).then(() => {
+                    if (this.tabsContent) {
+                        this.tabsContent.changeTab(tabIndex);
+                    }
+                });
+            }
+            else {
+                const routeRoot = this.router.url.split('#')[0];
+                this.location.go(`${routeRoot}#${fragmentId}`);
             }
-          });
         }
-      }
-    } else {
-      if (changeTab) {
-        this.router.onSameUrlNavigation = "reload";
-        this.router.navigate(["."], { relativeTo: this.route, fragment: fragmentId }).then(() => {
-          if (this.tabsContent) {
-            this.tabsContent.changeTab(tabIndex);
-          }
-        });
-      } else {
-        const routeRoot = this.router.url.split("#")[0];
-        this.location.go(`${routeRoot}#${fragmentId}`);
-      }
     }
-  }
-  _getComponentStatus(id) {
-    const flatten = (links) => links ? links.reduce((result, item) => [
-      ...result,
-      {
-        id: item.label,
-        alternateId: item.name,
-        status: item.markerTypeClass,
-        cmpReplacement: item.cmpReplacement,
-        cmpReplacementUrl: item.cmpReplacementUrl,
-        cmpReplacementNote: item.cmpReplacementNote,
-        alternateApiCategory: item.alternateApiCategory,
-        metadata: item.metadata
-      },
-      ...flatten(item.children)
-    ], []) : [];
-    const flatLinks = flatten(this.asService.state.sidebarLinks);
-    const idBasedCmp = flatLinks.filter((item) => item.id === id)[0];
-    if (idBasedCmp) {
-      return idBasedCmp;
-    } else {
-      const alternateIdBasedCmp = flatLinks.filter((item) => item.alternateId === id)[0];
-      return alternateIdBasedCmp;
+    _getComponentStatus(id) {
+        const flatten = (links) => links
+            ? links.reduce((result, item) => [
+                ...result,
+                {
+                    id: item.label,
+                    alternateId: item.name,
+                    status: item.markerTypeClass,
+                    cmpReplacement: item.cmpReplacement,
+                    cmpReplacementUrl: item.cmpReplacementUrl,
+                    cmpReplacementNote: item.cmpReplacementNote,
+                    alternateApiCategory: item.alternateApiCategory,
+                    metadata: item.metadata,
+                },
+                ...flatten(item.children),
+            ], [])
+            : [];
+        const flatLinks = flatten(this.asService.state.sidebarLinks);
+        const idBasedCmp = flatLinks.filter((item) => item.id === id)[0];
+        if (idBasedCmp) {
+            return idBasedCmp;
+        }
+        else {
+            const alternateIdBasedCmp = flatLinks.filter((item) => item.alternateId === id)[0];
+            return alternateIdBasedCmp;
+        }
     }
-  }
-  _getApiUrl() {
-    const url = window.location;
-    const protocol = url.protocol;
-    const host = url.host;
-    const pathName = url.pathname;
-    const pathNameArray = pathName.split("/");
-    const name = pathNameArray[pathNameArray.length - 1];
-    let category = pathNameArray[pathNameArray.length - 2];
-    let showcaseType;
-    showcaseType = pathNameArray[pathNameArray.length - 3];
-    if (showcaseType.indexOf("eui-showcase") === -1) {
-      showcaseType = pathNameArray[pathNameArray.length - 4];
+    _getApiUrl() {
+        const url = window.location;
+        const protocol = url.protocol;
+        const host = url.host;
+        const pathName = url.pathname;
+        const pathNameArray = pathName.split('/');
+        const name = pathNameArray[pathNameArray.length - 1];
+        let category = pathNameArray[pathNameArray.length - 2];
+        let showcaseType;
+        showcaseType = pathNameArray[pathNameArray.length - 3];
+        if (showcaseType.indexOf('eui-showcase') === -1) {
+            showcaseType = pathNameArray[pathNameArray.length - 4];
+        }
+        let protocolGen = protocol;
+        let hostGen = host;
+        if (host.indexOf('localhost') > -1) {
+            protocolGen = 'https:';
+            hostGen = 'euidev.ecdevops.eu';
+        }
+        const appVersionNumber = this.appMetadata.appVersion.split('.')[0];
+        let docTypeRoot = `eui-docs-eui-${appVersionNumber}.x`;
+        if (showcaseType.indexOf('-ecl') > -1) {
+            docTypeRoot = `eui-docs-ecl-${appVersionNumber}.x`;
+        }
+        if (showcaseType.indexOf('-mobile') > -1) {
+            docTypeRoot = `eui-docs-mobile-core-${appVersionNumber}.x`;
+        }
+        if (category === 'layout-components' || category === 'externals' || category === 'layout' || category === 'atoms') {
+            category = 'components';
+        }
+        const cmp = this._getComponentStatus(name);
+        if (cmp && cmp.alternateApiCategory) {
+            category = cmp.alternateApiCategory;
+        }
+        const formattedName = this._camelCaseString(name + '-' + category.slice(0, -1), '-', true);
+        const docPath = `${protocolGen}//${hostGen}/${docTypeRoot}/${category}/${formattedName}.html`;
+        console.log(`fetching API from: ${docPath}`);
+        return docPath;
     }
-    let protocolGen = protocol;
-    let hostGen = host;
-    if (host.indexOf("localhost") > -1) {
-      protocolGen = "https:";
-      hostGen = "euidev.ecdevops.eu";
+    _camelCaseString(string, separator, first) {
+        const stringArray = string.split(separator);
+        let result = '';
+        let s;
+        for (let i = 0; i < stringArray.length; i++) {
+            s = stringArray[i];
+            if (i === 0) {
+                if (first) {
+                    result += s.substring(0, 1).toUpperCase() + s.substr(1);
+                }
+                else {
+                    result += s;
+                }
+            }
+            else {
+                result += s.substring(0, 1).toUpperCase() + s.substr(1);
+            }
+        }
+        return result;
     }
-    const appVersionNumber = this.appMetadata.appVersion.split(".")[0];
-    let docTypeRoot = `eui-docs-eui-${appVersionNumber}.x`;
-    if (showcaseType.indexOf("-ecl") > -1) {
-      docTypeRoot = `eui-docs-ecl-${appVersionNumber}.x`;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i3.EuiAppShellService }, { token: i3$1.DomSanitizer }, { token: i4$1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocPageComponent, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isLegacy: "isLegacy", codeFolder: "codeFolder", showcase: "showcase", isNavigationVisible: "isNavigationVisible", hasApi: "hasApi", hasA11y: "hasA11y" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirective) }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirective) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirective) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirective) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirective) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirective) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirective) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirective) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i0, template: "<div class=\"doc-page-navigation-wrapper\" [class.eui-u-hidden]=\"isLoading\">\n    <div class=\"doc-page-main-column\">\n        <eui-page>\n            <eui-page-header label=\"{{ label }}\" subLabel=\"{{ subLabel }}\">\n                <eui-page-header-action-items>\n                    <eui-showcase-doc-page-code\n                        *ngIf=\"codeFolder\"\n                        codeFolder=\"{{ codeFolder }}\"\n                        showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n                    <eui-chip\n                        *ngIf=\"stateLabel\"\n                        [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                        [euiInfo]=\"isNotReady\"\n                        [euiWarning]=\"isDeprecated\"\n                        [euiDanger]=\"isLegacy\">\n                        <span euiLabel>\n                            <strong>{{ stateLabel }}</strong>\n                        </span>\n                    </eui-chip>\n                </eui-page-header-action-items>\n            </eui-page-header>\n\n            <eui-page-content>\n                <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger class=\"eui-u-mb-xl\">\n                    <eui-alert-title>LEGACY component</eui-alert-title>\n                    <strong class=\"eui-u-color-danger\">This component will be removed in eUI 19 release (end of 2024)</strong>\n                    <div *ngIf=\"cmp\">\n                        <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n                            It has been replaced by :\n                            <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n                            <!-- <div *ngIf=\"cmp.cmpReplacementUrl\">\n                                <br><br>\n                                You can find more information on the new component here : <a [routerLink]=\"cmp.cmpReplacementUrl\">{{cmp.cmpReplacementUrl}}</a>\n                            </div> -->\n                        </div>\n                        <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n                            <strong class=\"eui-u-color-danger\"> This component will be removed in eUI 18 release (end of 2023)</strong>\n                        </div>\n                        <div *ngIf=\"cmp.cmpReplacementNote\">\n                            <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n                        </div>\n                    </div>\n                </eui-alert>\n\n                <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning class=\"eui-u-mb-xl\">\n                    <eui-alert-title>DEPRECATED component</eui-alert-title>\n                    This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n                    <div *ngIf=\"cmp\">\n                        This component has no replacement in current version AND won't have replacement in next version of eUI,\n                        <strong class=\"eui-u-color-danger\">it will be removed in eUI 18 release (end of 2023)</strong>\n                    </div>\n                </eui-alert>\n\n                <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo class=\"eui-u-mb-xl\">\n                    <eui-alert-title>NOT READY for production usage</eui-alert-title>\n                    <div *ngIf=\"cmp\">\n                        This component is under development / some features might be missing, it'll be available in a future release once\n                        validated.\n                    </div>\n                </eui-alert>\n\n                <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n                <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelect)=\"onTabSelected($event)\">\n                    <eui-tab>\n                        <euiTabLabel> OPTIONS & SAMPLES </euiTabLabel>\n                        <euiTabContent>\n                            <ng-container *ngIf=\"cmp && cmp.metadata\">\n                                <div class=\"doc-page-section-title\">Module import</div>\n                                <pre><code class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpModuleImport }}</code></pre>\n                                <br />\n                            </ng-container>\n\n                            <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n\n                            <div *ngIf=\"pageOverviewContent.length > 0\">\n                                <ng-content select=\"docPageOverview\"></ng-content>\n                            </div>\n\n                            <div *ngIf=\"pageOverviewDefaultContent.length > 0\">\n                                <ng-content select=\"docPageOverviewDefault\"></ng-content>\n                            </div>\n                            <br />\n\n                            <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n                            <ng-content select=\"docPageSamples\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"hasApi\">\n                        <euiTabLabel> API </euiTabLabel>\n                        <euiTabContent>\n                            <ng-container *ngIf=\"apiUrlSafe\">\n                                <div class=\"flex-container\">\n                                    <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n                                </div>\n                                <div class=\"doc-page-api-iframe-wrapper\">\n                                    <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\"></iframe>\n                                </div>\n                            </ng-container>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"hasA11y\">\n                        <euiTabLabel> A11Y </euiTabLabel>\n                        <euiTabContent>\n                            <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n                            <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n                                <ng-content select=\"docPageAccessibility\"></ng-content>\n                                <p>\n                                    For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n                                </p>\n                            </ng-container>\n                            <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n                                No accessibility rules applicable\n                            </ng-container>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n                        <euiTabLabel> THEMING </euiTabLabel>\n                        <euiTabContent>\n                            <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n                            <ng-content select=\"docPageTheming\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n                        <euiTabLabel>\n                            {{ pageInteractiveContent.first.title }}\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <div id=\"interactive\" class=\"doc-page-section-title\">\n                                {{ pageInteractiveContent.first.subTitle }}\n                            </div>\n                            <ng-content select=\"docPageInteractive\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n                </eui-tabs>\n\n                <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                    <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n                    <ng-content select=\"docPageSections\"></ng-content>\n                </ng-container>\n            </eui-page-content>\n        </eui-page>\n    </div>\n\n    <div *ngIf=\"isNavigationVisible\" class=\"doc-page-navigation-column eui-u-hidden-desktop-down\">\n        <div id=\"doc-page-nav\">\n            <div class=\"doc-page-navigation-title\">In this page</div>\n            <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n                <ul class=\"doc-page-navigation\">\n                    <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n                        <li\n                            *ngIf=\"hasApi\"\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n                            (click)=\"onNavClick('api', 1)\">\n                            <span>API</span>\n                        </li>\n                        <li\n                            *ngIf=\"hasA11y\"\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n                            (click)=\"onNavClick('a11y', 2)\">\n                            <span>A11Y</span>\n                        </li>\n                        <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n                            (click)=\"onNavClick('samples', 0)\">\n                            <span>OPTIONS & SAMPLES</span>\n                        </li>\n                        <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ng-container *ngIf=\"categories.length > 0\">\n                                <ng-container *ngIf=\"hasCategories; else noCategories\">\n                                    <ng-container *ngFor=\"let category of categories\">\n                                        <ng-container *ngIf=\"category.name === 'Base'; else notBase\">\n                                            <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n                                                <li\n                                                    class=\"doc-page-navigation-item\"\n                                                    [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                                    (click)=\"onNavClick(sample.id, 0)\">\n                                                    <span>{{ sample.label }}</span>\n                                                </li>\n                                            </ul>\n                                        </ng-container>\n                                        <ng-template #notBase>\n                                            <div *ngIf=\"category.name !== 'Base'\" class=\"doc-page-navigation-category\">{{category.name}}</div>\n                                            <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n                                                <li\n                                                    class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n                                                    [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                                    (click)=\"onNavClick(sample.id, 0)\">\n                                                    <span>{{ sample.label }}</span>\n                                                </li>\n                                            </ul>\n                                        </ng-template>\n                                    </ng-container>\n                                </ng-container>\n\n                                <ng-template #noCategories>\n                                    <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n                                        <li\n                                            class=\"doc-page-navigation-item\"\n                                            [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                            (click)=\"onNavClick(sample.id, 0)\">\n                                            <span>{{ sample.label }}</span>\n                                        </li>\n                                    </ul>\n                                </ng-template>\n                            </ng-container>\n                        </li>\n\n\n\n                        <!-- OPTIONAL TABS-->\n                        <ng-container *ngIf=\"pageThemingContent.length > 0\">\n                            <li\n                                *ngIf=\"pageThemingContent.length > 0\"\n                                class=\"doc-page-navigation-item\"\n                                [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n                                (click)=\"onNavClick('theming', 3)\">\n                                <span>THEMING</span>\n                            </li>\n                            <li\n                                *ngIf=\"pageInteractiveContent.length > 0\"\n                                class=\"doc-page-navigation-item\"\n                                [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                                (click)=\"onNavClick('advanced', 4)\">\n                                <span>{{ pageInteractiveContent.first.title }}</span>\n                            </li>\n                        </ng-container>\n                        <ng-container *ngIf=\"pageThemingContent.length === 0\">\n                            <li\n                                *ngIf=\"pageInteractiveContent.length > 0\"\n                                class=\"doc-page-navigation-item\"\n                                [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                                (click)=\"onNavClick('advanced', 3)\">\n                                <span>{{ pageInteractiveContent.first.title }}</span>\n                            </li>\n                        </ng-container>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                        <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n                            (click)=\"onNavClick('sections', null)\">\n                            <span>Sections</span>\n                        </li>\n                        <li\n                            *ngIf=\"sections.length === 0\"\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n                            (click)=\"onNavClick('demo', null)\">\n                            <span>Demo</span>\n                        </li>\n                        <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let section of sections\">\n                                <li\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n                                    (click)=\"onNavClick(section.id, null)\">\n                                    <span>{{ section.label }}</span>\n                                </li>\n                            </ul>\n                        </li>\n                    </ng-container>\n                </ul>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-s-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-c-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:auto;box-shadow:var(--eui-sh-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-wrapper .language-javascript:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:0!important;transition:none}.doc-page-navigation-wrapper .language-javascript:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:0!important;transition:none}.doc-page-navigation-wrapper .language-javascript [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:0!important;transition:none}.doc-page-navigation-title{padding:var(--eui-s-s);font:var(--eui-f-xl)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 7.25rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-c-neutral-bg-light)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-s-xs);margin:0;padding:0}.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-info-darker);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-s-3xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-info-darker);padding-left:var(--eui-s-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-neutral-lightest)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-info-bg);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.doc-page-section-title{margin-top:var(--eui-s-2xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-info-darker);letter-spacing:-1px;font:var(--eui-f-2xl-bold)}.doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-2xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-2xs);width:auto;display:table;color:var(--eui-c-neutral)}@media screen and (max-width: 767px){.doc-page-navigation-wrapper .doc-page-main-column{padding-right:0;width:100%}.doc-page-navigation-wrapper .doc-page-navigation-column{display:none;width:0}}@media screen and (min-width: 768px) and (max-width: 995px){.doc-page-navigation-wrapper .doc-page-main-column{width:80%}.doc-page-navigation-wrapper .doc-page-navigation-column{width:20%}}@media screen and (max-width: 1550px){.doc-page-api-iframe-wrapper{display:none}}\n"], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i9.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i9.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i9.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i6.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i6.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i6.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i6.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i8.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["ariaDescribedBy", "e2eAttr", "isMuted", "isCloseable", "isFocusable"], outputs: ["closeAlert"] }, { kind: "component", type: i8.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i11.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-showcase-doc-page', encapsulation: ViewEncapsulation.None, template: "<div class=\"doc-page-navigation-wrapper\" [class.eui-u-hidden]=\"isLoading\">\n    <div class=\"doc-page-main-column\">\n        <eui-page>\n            <eui-page-header label=\"{{ label }}\" subLabel=\"{{ subLabel }}\">\n                <eui-page-header-action-items>\n                    <eui-showcase-doc-page-code\n                        *ngIf=\"codeFolder\"\n                        codeFolder=\"{{ codeFolder }}\"\n                        showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n                    <eui-chip\n                        *ngIf=\"stateLabel\"\n                        [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                        [euiInfo]=\"isNotReady\"\n                        [euiWarning]=\"isDeprecated\"\n                        [euiDanger]=\"isLegacy\">\n                        <span euiLabel>\n                            <strong>{{ stateLabel }}</strong>\n                        </span>\n                    </eui-chip>\n                </eui-page-header-action-items>\n            </eui-page-header>\n\n            <eui-page-content>\n                <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger class=\"eui-u-mb-xl\">\n                    <eui-alert-title>LEGACY component</eui-alert-title>\n                    <strong class=\"eui-u-color-danger\">This component will be removed in eUI 19 release (end of 2024)</strong>\n                    <div *ngIf=\"cmp\">\n                        <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n                            It has been replaced by :\n                            <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n                            <!-- <div *ngIf=\"cmp.cmpReplacementUrl\">\n                                <br><br>\n                                You can find more information on the new component here : <a [routerLink]=\"cmp.cmpReplacementUrl\">{{cmp.cmpReplacementUrl}}</a>\n                            </div> -->\n                        </div>\n                        <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n                            <strong class=\"eui-u-color-danger\"> This component will be removed in eUI 18 release (end of 2023)</strong>\n                        </div>\n                        <div *ngIf=\"cmp.cmpReplacementNote\">\n                            <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n                        </div>\n                    </div>\n                </eui-alert>\n\n                <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning class=\"eui-u-mb-xl\">\n                    <eui-alert-title>DEPRECATED component</eui-alert-title>\n                    This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n                    <div *ngIf=\"cmp\">\n                        This component has no replacement in current version AND won't have replacement in next version of eUI,\n                        <strong class=\"eui-u-color-danger\">it will be removed in eUI 18 release (end of 2023)</strong>\n                    </div>\n                </eui-alert>\n\n                <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo class=\"eui-u-mb-xl\">\n                    <eui-alert-title>NOT READY for production usage</eui-alert-title>\n                    <div *ngIf=\"cmp\">\n                        This component is under development / some features might be missing, it'll be available in a future release once\n                        validated.\n                    </div>\n                </eui-alert>\n\n                <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n                <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelect)=\"onTabSelected($event)\">\n                    <eui-tab>\n                        <euiTabLabel> OPTIONS & SAMPLES </euiTabLabel>\n                        <euiTabContent>\n                            <ng-container *ngIf=\"cmp && cmp.metadata\">\n                                <div class=\"doc-page-section-title\">Module import</div>\n                                <pre><code class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpModuleImport }}</code></pre>\n                                <br />\n                            </ng-container>\n\n                            <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n\n                            <div *ngIf=\"pageOverviewContent.length > 0\">\n                                <ng-content select=\"docPageOverview\"></ng-content>\n                            </div>\n\n                            <div *ngIf=\"pageOverviewDefaultContent.length > 0\">\n                                <ng-content select=\"docPageOverviewDefault\"></ng-content>\n                            </div>\n                            <br />\n\n                            <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n                            <ng-content select=\"docPageSamples\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"hasApi\">\n                        <euiTabLabel> API </euiTabLabel>\n                        <euiTabContent>\n                            <ng-container *ngIf=\"apiUrlSafe\">\n                                <div class=\"flex-container\">\n                                    <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n                                </div>\n                                <div class=\"doc-page-api-iframe-wrapper\">\n                                    <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\"></iframe>\n                                </div>\n                            </ng-container>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"hasA11y\">\n                        <euiTabLabel> A11Y </euiTabLabel>\n                        <euiTabContent>\n                            <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n                            <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n                                <ng-content select=\"docPageAccessibility\"></ng-content>\n                                <p>\n                                    For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n                                </p>\n                            </ng-container>\n                            <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n                                No accessibility rules applicable\n                            </ng-container>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n                        <euiTabLabel> THEMING </euiTabLabel>\n                        <euiTabContent>\n                            <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n                            <ng-content select=\"docPageTheming\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n                        <euiTabLabel>\n                            {{ pageInteractiveContent.first.title }}\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <div id=\"interactive\" class=\"doc-page-section-title\">\n                                {{ pageInteractiveContent.first.subTitle }}\n                            </div>\n                            <ng-content select=\"docPageInteractive\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n                </eui-tabs>\n\n                <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                    <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n                    <ng-content select=\"docPageSections\"></ng-content>\n                </ng-container>\n            </eui-page-content>\n        </eui-page>\n    </div>\n\n    <div *ngIf=\"isNavigationVisible\" class=\"doc-page-navigation-column eui-u-hidden-desktop-down\">\n        <div id=\"doc-page-nav\">\n            <div class=\"doc-page-navigation-title\">In this page</div>\n            <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n                <ul class=\"doc-page-navigation\">\n                    <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n                        <li\n                            *ngIf=\"hasApi\"\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n                            (click)=\"onNavClick('api', 1)\">\n                            <span>API</span>\n                        </li>\n                        <li\n                            *ngIf=\"hasA11y\"\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n                            (click)=\"onNavClick('a11y', 2)\">\n                            <span>A11Y</span>\n                        </li>\n                        <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n                            (click)=\"onNavClick('samples', 0)\">\n                            <span>OPTIONS & SAMPLES</span>\n                        </li>\n                        <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ng-container *ngIf=\"categories.length > 0\">\n                                <ng-container *ngIf=\"hasCategories; else noCategories\">\n                                    <ng-container *ngFor=\"let category of categories\">\n                                        <ng-container *ngIf=\"category.name === 'Base'; else notBase\">\n                                            <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n                                                <li\n                                                    class=\"doc-page-navigation-item\"\n                                                    [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                                    (click)=\"onNavClick(sample.id, 0)\">\n                                                    <span>{{ sample.label }}</span>\n                                                </li>\n                                            </ul>\n                                        </ng-container>\n                                        <ng-template #notBase>\n                                            <div *ngIf=\"category.name !== 'Base'\" class=\"doc-page-navigation-category\">{{category.name}}</div>\n                                            <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n                                                <li\n                                                    class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n                                                    [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                                    (click)=\"onNavClick(sample.id, 0)\">\n                                                    <span>{{ sample.label }}</span>\n                                                </li>\n                                            </ul>\n                                        </ng-template>\n                                    </ng-container>\n                                </ng-container>\n\n                                <ng-template #noCategories>\n                                    <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n                                        <li\n                                            class=\"doc-page-navigation-item\"\n                                            [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                            (click)=\"onNavClick(sample.id, 0)\">\n                                            <span>{{ sample.label }}</span>\n                                        </li>\n                                    </ul>\n                                </ng-template>\n                            </ng-container>\n                        </li>\n\n\n\n                        <!-- OPTIONAL TABS-->\n                        <ng-container *ngIf=\"pageThemingContent.length > 0\">\n                            <li\n                                *ngIf=\"pageThemingContent.length > 0\"\n                                class=\"doc-page-navigation-item\"\n                                [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n                                (click)=\"onNavClick('theming', 3)\">\n                                <span>THEMING</span>\n                            </li>\n                            <li\n                                *ngIf=\"pageInteractiveContent.length > 0\"\n                                class=\"doc-page-navigation-item\"\n                                [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                                (click)=\"onNavClick('advanced', 4)\">\n                                <span>{{ pageInteractiveContent.first.title }}</span>\n                            </li>\n                        </ng-container>\n                        <ng-container *ngIf=\"pageThemingContent.length === 0\">\n                            <li\n                                *ngIf=\"pageInteractiveContent.length > 0\"\n                                class=\"doc-page-navigation-item\"\n                                [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                                (click)=\"onNavClick('advanced', 3)\">\n                                <span>{{ pageInteractiveContent.first.title }}</span>\n                            </li>\n                        </ng-container>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                        <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n                            (click)=\"onNavClick('sections', null)\">\n                            <span>Sections</span>\n                        </li>\n                        <li\n                            *ngIf=\"sections.length === 0\"\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n                            (click)=\"onNavClick('demo', null)\">\n                            <span>Demo</span>\n                        </li>\n                        <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let section of sections\">\n                                <li\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n                                    (click)=\"onNavClick(section.id, null)\">\n                                    <span>{{ section.label }}</span>\n                                </li>\n                            </ul>\n                        </li>\n                    </ng-container>\n                </ul>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-s-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-c-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:auto;box-shadow:var(--eui-sh-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-wrapper .language-javascript:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:0!important;transition:none}.doc-page-navigation-wrapper .language-javascript:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:0!important;transition:none}.doc-page-navigation-wrapper .language-javascript [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:0!important;transition:none}.doc-page-navigation-title{padding:var(--eui-s-s);font:var(--eui-f-xl)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 7.25rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-c-neutral-bg-light)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-s-xs);margin:0;padding:0}.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-info-darker);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-s-3xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-info-darker);padding-left:var(--eui-s-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-neutral-lightest)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-info-bg);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.doc-page-section-title{margin-top:var(--eui-s-2xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-info-darker);letter-spacing:-1px;font:var(--eui-f-2xl-bold)}.doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-2xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-2xs);width:auto;display:table;color:var(--eui-c-neutral)}@media screen and (max-width: 767px){.doc-page-navigation-wrapper .doc-page-main-column{padding-right:0;width:100%}.doc-page-navigation-wrapper .doc-page-navigation-column{display:none;width:0}}@media screen and (min-width: 768px) and (max-width: 995px){.doc-page-navigation-wrapper .doc-page-main-column{width:80%}.doc-page-navigation-wrapper .doc-page-navigation-column{width:20%}}@media screen and (max-width: 1550px){.doc-page-api-iframe-wrapper{display:none}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i3.EuiAppShellService }, { type: i3$1.DomSanitizer }, { type: i4$1.Location }], propDecorators: { id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], subLabel: [{
+                type: Input
+            }], isNotReady: [{
+                type: Input
+            }], isDeprecated: [{
+                type: Input
+            }], isLegacy: [{
+                type: Input
+            }], codeFolder: [{
+                type: Input
+            }], showcase: [{
+                type: Input
+            }], isNavigationVisible: [{
+                type: Input
+            }], hasApi: [{
+                type: Input
+            }], hasA11y: [{
+                type: Input
+            }], samples: [{
+                type: ContentChildren,
+                args: [DocSampleComponent, { descendants: true }]
+            }], sections: [{
+                type: ContentChildren,
+                args: [DocSectionComponent, { descendants: true }]
+            }], pageOverviewContent: [{
+                type: ContentChildren,
+                args: [forwardRef(() => DocPageOverviewContentDirective)]
+            }], pageOverviewDefaultContent: [{
+                type: ContentChildren,
+                args: [forwardRef(() => DocPageOverviewDefaultContentDirective)]
+            }], pageSamplesContent: [{
+                type: ContentChildren,
+                args: [forwardRef(() => DocPageSamplesContentDirective)]
+            }], pageSectionsContent: [{
+                type: ContentChildren,
+                args: [forwardRef(() => DocPageSectionsContentDirective)]
+            }], pageInteractiveContent: [{
+                type: ContentChildren,
+                args: [forwardRef(() => DocPageInteractiveContentDirective)]
+            }], pageAccessibilityContent: [{
+                type: ContentChildren,
+                args: [forwardRef(() => DocPageAccessibilityContentDirective)]
+            }], pageApiContent: [{
+                type: ContentChildren,
+                args: [forwardRef(() => DocPageApiContentDirective)]
+            }], pageThemingContent: [{
+                type: ContentChildren,
+                args: [forwardRef(() => DocPageThemingContentDirective)]
+            }], tabsContent: [{
+                type: ViewChild,
+                args: ['tabsContent']
+            }] } });
+/* eslint-disable @angular-eslint/directive-selector */
+class DocPageOverviewContentDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageOverviewContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocPageOverviewContentDirective, selector: "docPageOverview", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageOverviewContentDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'docPageOverview' }]
+        }] });
+class DocPageOverviewDefaultContentDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageOverviewDefaultContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocPageOverviewDefaultContentDirective, selector: "docPageOverviewDefault", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageOverviewDefaultContentDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'docPageOverviewDefault' }]
+        }] });
+class DocPageInteractiveContentDirective {
+    constructor() {
+        this.title = 'ADVANCED EXAMPLES';
+        this.subTitle = 'Advanced use cases';
     }
-    if (showcaseType.indexOf("-mobile") > -1) {
-      docTypeRoot = `eui-docs-mobile-core-${appVersionNumber}.x`;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageInteractiveContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocPageInteractiveContentDirective, selector: "docPageInteractive", inputs: { title: "title", subTitle: "subTitle" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageInteractiveContentDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'docPageInteractive' }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], subTitle: [{
+                type: Input
+            }] } });
+class DocPageSamplesContentDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageSamplesContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocPageSamplesContentDirective, selector: "docPageSamples", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageSamplesContentDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'docPageSamples' }]
+        }] });
+class DocPageSectionsContentDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageSectionsContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocPageSectionsContentDirective, selector: "docPageSections", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageSectionsContentDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'docPageSections' }]
+        }] });
+class DocPageAccessibilityContentDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageAccessibilityContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocPageAccessibilityContentDirective, selector: "docPageAccessibility", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageAccessibilityContentDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'docPageAccessibility' }]
+        }] });
+class DocPageApiContentDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageApiContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocPageApiContentDirective, selector: "docPageApi", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageApiContentDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'docPageApi' }]
+        }] });
+class DocPageThemingContentDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageThemingContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocPageThemingContentDirective, selector: "docPageTheming", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageThemingContentDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'docPageTheming' }]
+        }] });
+
+class DocSampleApiComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocSampleApiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocSampleApiComponent, selector: "eui-showcase-doc-sample-api", ngImport: i0, template: "" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocSampleApiComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-showcase-doc-sample-api', template: "" }]
+        }] });
+
+class DocSectionCodeComponent {
+    constructor() {
+        this.isDeprecated = false;
+        this.isCodeExpanded = false;
     }
-    if (category === "layout-components" || category === "externals" || category === "layout" || category === "atoms") {
-      category = "components";
+    toggleCode() {
+        this.isCodeExpanded = !this.isCodeExpanded;
     }
-    const cmp = this._getComponentStatus(name);
-    if (cmp && cmp.alternateApiCategory) {
-      category = cmp.alternateApiCategory;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    isDefined(object) {
+        return object;
     }
-    const formattedName = this._camelCaseString(name + "-" + category.slice(0, -1), "-", true);
-    const docPath = `${protocolGen}//${hostGen}/${docTypeRoot}/${category}/${formattedName}.html`;
-    console.log(`fetching API from: ${docPath}`);
-    return docPath;
-  }
-  _camelCaseString(string, separator, first) {
-    const stringArray = string.split(separator);
-    let result = "";
-    let s;
-    for (let i = 0; i < stringArray.length; i++) {
-      s = stringArray[i];
-      if (i === 0) {
-        if (first) {
-          result += s.substring(0, 1).toUpperCase() + s.substr(1);
-        } else {
-          result += s;
-        }
-      } else {
-        result += s.substring(0, 1).toUpperCase() + s.substr(1);
-      }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocSectionCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocSectionCodeComponent, selector: "eui-showcase-doc-section-code", inputs: { label: "label", content: "content", styleClass: "styleClass", versionLabel: "versionLabel", isDeprecated: "isDeprecated", isCodeExpanded: "isCodeExpanded" }, queries: [{ propertyName: "sectionDescription", first: true, predicate: i0.forwardRef(() => DocSectionCodeDescriptionTagDirective), descendants: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i0.forwardRef(() => DocSectionCodeHtmlTagDirective), descendants: true }, { propertyName: "sectionCodeTS", first: true, predicate: i0.forwardRef(() => DocSectionCodeTsTagDirective), descendants: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i0.forwardRef(() => DocSectionCodeServiceTagDirective), descendants: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i0.forwardRef(() => DocSectionCodeCssTagDirective), descendants: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i0.forwardRef(() => DocSectionCodeDocTagDirective), descendants: true }], ngImport: i0, template: "<h5 class=\"section-title {{ styleClass }}\">\n    <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n        <div [class.app-section-code--deprecated]=\"isDeprecated\">\n            {{ label }}\n        </div>\n        <div class=\"ml-auto\">\n            <span *ngIf=\"versionLabel\" class=\"eui-u-color-danger\">{{ versionLabel }}</span>\n            <button type=\"button\" euiButton [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n                <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n                <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n                <span euiIcon iconClass=\"eui-icon-code\"></span>\n            </button>\n        </div>\n    </div>\n    <div *ngIf=\"isDeprecated\">\n        <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n    </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n    <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-tabs>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeHTML)\">\n            <euiTabLabel>\n                HTML\n                <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeTS)\">\n            <euiTabLabel>\n                TS\n                <euiTabSubLabel>Typescript</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE)\">\n            <euiTabLabel>Service</euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeCSS)\">\n            <euiTabLabel>CSS</euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeDOC)\">\n            <euiTabLabel>\n                DOC\n                <euiTabSubLabel>Documentation</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <div class=\"language-doc\">\n                    <ng-content select=\"sectionCodeDOC\"></ng-content>\n                </div>\n            </euiTabContent>\n        </eui-tab>\n    </eui-tabs>\n    <ng-template [ngIf]=\"!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS\">\n        <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content></ng-content></code></pre>\n    </ng-template>\n</ng-template>\n", styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"], dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i9.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i9.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i9.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i9.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i9.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i11.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocSectionCodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-showcase-doc-section-code', template: "<h5 class=\"section-title {{ styleClass }}\">\n    <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n        <div [class.app-section-code--deprecated]=\"isDeprecated\">\n            {{ label }}\n        </div>\n        <div class=\"ml-auto\">\n            <span *ngIf=\"versionLabel\" class=\"eui-u-color-danger\">{{ versionLabel }}</span>\n            <button type=\"button\" euiButton [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n                <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n                <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n                <span euiIcon iconClass=\"eui-icon-code\"></span>\n            </button>\n        </div>\n    </div>\n    <div *ngIf=\"isDeprecated\">\n        <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n    </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n    <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-tabs>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeHTML)\">\n            <euiTabLabel>\n                HTML\n                <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeTS)\">\n            <euiTabLabel>\n                TS\n                <euiTabSubLabel>Typescript</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE)\">\n            <euiTabLabel>Service</euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeCSS)\">\n            <euiTabLabel>CSS</euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeDOC)\">\n            <euiTabLabel>\n                DOC\n                <euiTabSubLabel>Documentation</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <div class=\"language-doc\">\n                    <ng-content select=\"sectionCodeDOC\"></ng-content>\n                </div>\n            </euiTabContent>\n        </eui-tab>\n    </eui-tabs>\n    <ng-template [ngIf]=\"!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS\">\n        <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content></ng-content></code></pre>\n    </ng-template>\n</ng-template>\n", styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], versionLabel: [{
+                type: Input
+            }], isDeprecated: [{
+                type: Input
+            }], isCodeExpanded: [{
+                type: Input
+            }], sectionDescription: [{
+                type: ContentChild,
+                args: [forwardRef(() => DocSectionCodeDescriptionTagDirective)]
+            }], sectionCodeHTML: [{
+                type: ContentChild,
+                args: [forwardRef(() => DocSectionCodeHtmlTagDirective)]
+            }], sectionCodeTS: [{
+                type: ContentChild,
+                args: [forwardRef(() => DocSectionCodeTsTagDirective)]
+            }], sectionCodeSERVICE: [{
+                type: ContentChild,
+                args: [forwardRef(() => DocSectionCodeServiceTagDirective)]
+            }], sectionCodeCSS: [{
+                type: ContentChild,
+                args: [forwardRef(() => DocSectionCodeCssTagDirective)]
+            }], sectionCodeDOC: [{
+                type: ContentChild,
+                args: [forwardRef(() => DocSectionCodeDocTagDirective)]
+            }] } });
+/* eslint-disable @angular-eslint/directive-selector */
+class DocSectionCodeDescriptionTagDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocSectionCodeDescriptionTagDirective, selector: "sectionDescription", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'sectionDescription' }]
+        }] });
+class DocSectionCodeHtmlTagDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocSectionCodeHtmlTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocSectionCodeHtmlTagDirective, selector: "sectionCodeHTML", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocSectionCodeHtmlTagDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'sectionCodeHTML' }]
+        }] });
+class DocSectionCodeTsTagDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocSectionCodeTsTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocSectionCodeTsTagDirective, selector: "sectionCodeTS", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocSectionCodeTsTagDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'sectionCodeTS' }]
+        }] });
+class DocSectionCodeServiceTagDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocSectionCodeServiceTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocSectionCodeServiceTagDirective, selector: "sectionCodeSERVICE", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocSectionCodeServiceTagDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'sectionCodeSERVICE' }]
+        }] });
+class DocSectionCodeCssTagDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocSectionCodeCssTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocSectionCodeCssTagDirective, selector: "sectionCodeCSS", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocSectionCodeCssTagDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'sectionCodeCSS' }]
+        }] });
+class DocSectionCodeDocTagDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocSectionCodeDocTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocSectionCodeDocTagDirective, selector: "sectionCodeDOC", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocSectionCodeDocTagDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'sectionCodeDOC' }]
+        }] });
+
+class DocPageCodeModalComponent {
+    constructor(asService) {
+        this.asService = asService;
+        this.width = '95vw';
     }
-    return result;
-  }
-  static {
-    this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i06, type: _DocPageComponent, deps: [{ token: i12.Router }, { token: i12.ActivatedRoute }, { token: i23.EuiAppShellService }, { token: i33.DomSanitizer }, { token: i42.Location }], target: i06.ɵɵFactoryTarget.Component });
-  }
-  static {
-    this.ɵcmp = i06.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocPageComponent, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isLegacy: "isLegacy", codeFolder: "codeFolder", showcase: "showcase", isNavigationVisible: "isNavigationVisible", hasApi: "hasApi", hasA11y: "hasA11y" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i06.forwardRef(() => DocPageOverviewContentDirective) }, { propertyName: "pageOverviewDefaultContent", predicate: i06.forwardRef(() => DocPageOverviewDefaultContentDirective) }, { propertyName: "pageSamplesContent", predicate: i06.forwardRef(() => DocPageSamplesContentDirective) }, { propertyName: "pageSectionsContent", predicate: i06.forwardRef(() => DocPageSectionsContentDirective) }, { propertyName: "pageInteractiveContent", predicate: i06.forwardRef(() => DocPageInteractiveContentDirective) }, { propertyName: "pageAccessibilityContent", predicate: i06.forwardRef(() => DocPageAccessibilityContentDirective) }, { propertyName: "pageApiContent", predicate: i06.forwardRef(() => DocPageApiContentDirective) }, { propertyName: "pageThemingContent", predicate: i06.forwardRef(() => DocPageThemingContentDirective) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i06, template: `<div class="doc-page-navigation-wrapper" [class.eui-u-hidden]="isLoading">
-    <div class="doc-page-main-column">
-        <eui-page>
-            <eui-page-header label="{{ label }}" subLabel="{{ subLabel }}">
-                <eui-page-header-action-items>
-                    <eui-showcase-doc-page-code
-                        *ngIf="codeFolder"
-                        codeFolder="{{ codeFolder }}"
-                        showcase="{{ showcase }}"></eui-showcase-doc-page-code>
-                    <eui-chip
-                        *ngIf="stateLabel"
-                        [euiSuccess]="stateLabel === 'ACTIVE'"
-                        [euiInfo]="isNotReady"
-                        [euiWarning]="isDeprecated"
-                        [euiDanger]="isLegacy">
-                        <span euiLabel>
-                            <strong>{{ stateLabel }}</strong>
-                        </span>
-                    </eui-chip>
-                </eui-page-header-action-items>
-            </eui-page-header>
-
-            <eui-page-content>
-                <eui-alert *ngIf="stateLabel === 'LEGACY' || isLegacy" euiDanger class="eui-u-mb-xl">
-                    <eui-alert-title>LEGACY component</eui-alert-title>
-                    <strong class="eui-u-color-danger">This component will be removed in eUI 19 release (end of 2024)</strong>
-                    <div *ngIf="cmp">
-                        <div *ngIf="cmp.cmpReplacement !== 'NONE'">
-                            It has been replaced by :
-                            <strong class="eui-u-color-success-darkest">{{ cmp.cmpReplacement }}</strong>
-                            <!-- <div *ngIf="cmp.cmpReplacementUrl">
-                                <br><br>
-                                You can find more information on the new component here : <a [routerLink]="cmp.cmpReplacementUrl">{{cmp.cmpReplacementUrl}}</a>
-                            </div> -->
-                        </div>
-                        <div *ngIf="cmp.cmpReplacement === 'NONE'">
-                            <strong class="eui-u-color-danger"> This component will be removed in eUI 18 release (end of 2023)</strong>
-                        </div>
-                        <div *ngIf="cmp.cmpReplacementNote">
-                            <strong class="eui-u-color-warning">{{ cmp.cmpReplacementNote }}</strong>
-                        </div>
-                    </div>
-                </eui-alert>
-
-                <eui-alert *ngIf="stateLabel === 'DEPRECATED' || isDeprecated" euiWarning class="eui-u-mb-xl">
-                    <eui-alert-title>DEPRECATED component</eui-alert-title>
-                    This component has been <strong class="eui-u-color-danger">deprecated</strong>
-                    <div *ngIf="cmp">
-                        This component has no replacement in current version AND won't have replacement in next version of eUI,
-                        <strong class="eui-u-color-danger">it will be removed in eUI 18 release (end of 2023)</strong>
-                    </div>
-                </eui-alert>
-
-                <eui-alert *ngIf="stateLabel === 'NOT_READY' || isNotReady" euiInfo class="eui-u-mb-xl">
-                    <eui-alert-title>NOT READY for production usage</eui-alert-title>
-                    <div *ngIf="cmp">
-                        This component is under development / some features might be missing, it'll be available in a future release once
-                        validated.
-                    </div>
-                </eui-alert>
-
-                <div *ngIf="(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'" class="mb-5"></div>
-
-                <eui-tabs #tabsContent *ngIf="pageSectionsContent.length === 0" (tabSelect)="onTabSelected($event)">
-                    <eui-tab>
-                        <euiTabLabel> OPTIONS & SAMPLES </euiTabLabel>
-                        <euiTabContent>
-                            <ng-container *ngIf="cmp && cmp.metadata">
-                                <div class="doc-page-section-title">Module import</div>
-                                <pre><code class="language-javascript eui-u-bg-color-grey-5" euiCode>{{ cmpModuleImport }}</code></pre>
-                                <br />
-                            </ng-container>
-
-                            <div id="overview" class="doc-page-section-title">Overview</div>
-
-                            <div *ngIf="pageOverviewContent.length > 0">
-                                <ng-content select="docPageOverview"></ng-content>
-                            </div>
-
-                            <div *ngIf="pageOverviewDefaultContent.length > 0">
-                                <ng-content select="docPageOverviewDefault"></ng-content>
-                            </div>
-                            <br />
-
-                            <div id="samples" class="doc-page-section-title">Options & samples</div>
-                            <ng-content select="docPageSamples"></ng-content>
-                        </euiTabContent>
-                    </eui-tab>
-
-                    <eui-tab *ngIf="hasApi">
-                        <euiTabLabel> API </euiTabLabel>
-                        <euiTabContent>
-                            <ng-container *ngIf="apiUrlSafe">
-                                <div class="flex-container">
-                                    <a href="{{ apiUrl }}" target="_blank" class="ms-auto pb-2 eui-u-text-link-external">Open API page</a>
-                                </div>
-                                <div class="doc-page-api-iframe-wrapper">
-                                    <iframe id="iframe_api" [width]="'100%'" height="700px" frameBorder="0" [src]="apiUrlSafe"></iframe>
-                                </div>
-                            </ng-container>
-                        </euiTabContent>
-                    </eui-tab>
-
-                    <eui-tab *ngIf="hasA11y">
-                        <euiTabLabel> A11Y </euiTabLabel>
-                        <euiTabContent>
-                            <div id="accessibility" class="doc-page-section-title">Accessibility</div>
-                            <ng-container *ngIf="pageAccessibilityContent.length !== 0">
-                                <ng-content select="docPageAccessibility"></ng-content>
-                                <p>
-                                    For more information regarding Accessibility, please refer to the <a class="eui-u-text-link-external" href="https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro" target="_blank">Accessibility Dev Guide</a>.
-                                </p>
-                            </ng-container>
-                            <ng-container *ngIf="pageAccessibilityContent.length === 0">
-                                No accessibility rules applicable
-                            </ng-container>
-                        </euiTabContent>
-                    </eui-tab>
-
-                    <eui-tab *ngIf="pageThemingContent.length > 0">
-                        <euiTabLabel> THEMING </euiTabLabel>
-                        <euiTabContent>
-                            <div id="theming" class="doc-page-section-title">Theming</div>
-                            <ng-content select="docPageTheming"></ng-content>
-                        </euiTabContent>
-                    </eui-tab>
-
-                    <eui-tab *ngIf="pageInteractiveContent.length > 0">
-                        <euiTabLabel>
-                            {{ pageInteractiveContent.first.title }}
-                        </euiTabLabel>
-                        <euiTabContent>
-                            <div id="interactive" class="doc-page-section-title">
-                                {{ pageInteractiveContent.first.subTitle }}
-                            </div>
-                            <ng-content select="docPageInteractive"></ng-content>
-                        </euiTabContent>
-                    </eui-tab>
-                </eui-tabs>
-
-                <ng-container *ngIf="pageSectionsContent.length > 0">
-                    <div id="demo" *ngIf="sections.length === 0" class="doc-page-section-title">Demo</div>
-                    <ng-content select="docPageSections"></ng-content>
-                </ng-container>
-            </eui-page-content>
-        </eui-page>
-    </div>
-
-    <div *ngIf="isNavigationVisible" class="doc-page-navigation-column eui-u-hidden-desktop-down">
-        <div id="doc-page-nav">
-            <div class="doc-page-navigation-title">In this page</div>
-            <div class="doc-page-navigation-content" tabindex="0">
-                <ul class="doc-page-navigation">
-                    <ng-container *ngIf="pageSectionsContent.length === 0">
-                        <li
-                            *ngIf="hasApi"
-                            class="doc-page-navigation-item"
-                            [class.doc-page-navigation-item--selected]="fragmentId === 'api'"
-                            (click)="onNavClick('api', 1)">
-                            <span>API</span>
-                        </li>
-                        <li
-                            *ngIf="hasA11y"
-                            class="doc-page-navigation-item"
-                            [class.doc-page-navigation-item--selected]="fragmentId === 'a11y'"
-                            (click)="onNavClick('a11y', 2)">
-                            <span>A11Y</span>
-                        </li>
-                        <li
-                            class="doc-page-navigation-item"
-                            [class.doc-page-navigation-item--selected]="fragmentId === 'samples'"
-                            (click)="onNavClick('samples', 0)">
-                            <span>OPTIONS & SAMPLES</span>
-                        </li>
-                        <li class="doc-page-navigation-item doc-page-navigation-sub">
-                            <ng-container *ngIf="categories.length > 0">
-                                <ng-container *ngIf="hasCategories; else noCategories">
-                                    <ng-container *ngFor="let category of categories">
-                                        <ng-container *ngIf="category.name === 'Base'; else notBase">
-                                            <ul *ngFor="let sample of category.samples" class="doc-page-navigation-list">
-                                                <li
-                                                    class="doc-page-navigation-item"
-                                                    [class.doc-page-navigation-item--selected]="fragmentId === sample.id"
-                                                    (click)="onNavClick(sample.id, 0)">
-                                                    <span>{{ sample.label }}</span>
-                                                </li>
-                                            </ul>
-                                        </ng-container>
-                                        <ng-template #notBase>
-                                            <div *ngIf="category.name !== 'Base'" class="doc-page-navigation-category">{{category.name}}</div>
-                                            <ul *ngFor="let sample of category.samples" class="doc-page-navigation-list">
-                                                <li
-                                                    class="doc-page-navigation-item doc-page-navigation-item-sub"
-                                                    [class.doc-page-navigation-item--selected]="fragmentId === sample.id"
-                                                    (click)="onNavClick(sample.id, 0)">
-                                                    <span>{{ sample.label }}</span>
-                                                </li>
-                                            </ul>
-                                        </ng-template>
-                                    </ng-container>
-                                </ng-container>
-
-                                <ng-template #noCategories>
-                                    <ul *ngFor="let sample of samples" class="doc-page-navigation-list">
-                                        <li
-                                            class="doc-page-navigation-item"
-                                            [class.doc-page-navigation-item--selected]="fragmentId === sample.id"
-                                            (click)="onNavClick(sample.id, 0)">
-                                            <span>{{ sample.label }}</span>
-                                        </li>
-                                    </ul>
-                                </ng-template>
-                            </ng-container>
-                        </li>
-
-
-
-                        <!-- OPTIONAL TABS-->
-                        <ng-container *ngIf="pageThemingContent.length > 0">
-                            <li
-                                *ngIf="pageThemingContent.length > 0"
-                                class="doc-page-navigation-item"
-                                [class.doc-page-navigation-item--selected]="fragmentId === 'theming'"
-                                (click)="onNavClick('theming', 3)">
-                                <span>THEMING</span>
-                            </li>
-                            <li
-                                *ngIf="pageInteractiveContent.length > 0"
-                                class="doc-page-navigation-item"
-                                [class.doc-page-navigation-item--selected]="fragmentId === 'advanced'"
-                                (click)="onNavClick('advanced', 4)">
-                                <span>{{ pageInteractiveContent.first.title }}</span>
-                            </li>
-                        </ng-container>
-                        <ng-container *ngIf="pageThemingContent.length === 0">
-                            <li
-                                *ngIf="pageInteractiveContent.length > 0"
-                                class="doc-page-navigation-item"
-                                [class.doc-page-navigation-item--selected]="fragmentId === 'advanced'"
-                                (click)="onNavClick('advanced', 3)">
-                                <span>{{ pageInteractiveContent.first.title }}</span>
-                            </li>
-                        </ng-container>
-                    </ng-container>
-
-                    <ng-container *ngIf="pageSectionsContent.length > 0">
-                        <li
-                            class="doc-page-navigation-item"
-                            [class.doc-page-navigation-item--selected]="fragmentId === 'sections'"
-                            (click)="onNavClick('sections', null)">
-                            <span>Sections</span>
-                        </li>
-                        <li
-                            *ngIf="sections.length === 0"
-                            class="doc-page-navigation-item"
-                            [class.doc-page-navigation-item--selected]="fragmentId === 'demo'"
-                            (click)="onNavClick('demo', null)">
-                            <span>Demo</span>
-                        </li>
-                        <li *ngIf="sections.length > 0" class="doc-page-navigation-item doc-page-navigation-sub">
-                            <ul *ngFor="let section of sections">
-                                <li
-                                    class="doc-page-navigation-item"
-                                    [class.doc-page-navigation-item--selected]="fragmentId === section.id"
-                                    (click)="onNavClick(section.id, null)">
-                                    <span>{{ section.label }}</span>
-                                </li>
-                            </ul>
-                        </li>
-                    </ng-container>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-`, styles: ['.doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-s-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-c-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:auto;box-shadow:var(--eui-sh-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-wrapper .language-javascript:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:0!important;transition:none}.doc-page-navigation-wrapper .language-javascript:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:0!important;transition:none}.doc-page-navigation-wrapper .language-javascript [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:0!important;transition:none}.doc-page-navigation-title{padding:var(--eui-s-s);font:var(--eui-f-xl)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 7.25rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-c-neutral-bg-light)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-s-xs);margin:0;padding:0}.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-info-darker);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-s-3xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-info-darker);padding-left:var(--eui-s-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-neutral-lightest)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-info-bg);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.doc-page-section-title{margin-top:var(--eui-s-2xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-info-darker);letter-spacing:-1px;font:var(--eui-f-2xl-bold)}.doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-2xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-2xs);width:auto;display:table;color:var(--eui-c-neutral)}@media screen and (max-width: 767px){.doc-page-navigation-wrapper .doc-page-main-column{padding-right:0;width:100%}.doc-page-navigation-wrapper .doc-page-navigation-column{display:none;width:0}}@media screen and (min-width: 768px) and (max-width: 995px){.doc-page-navigation-wrapper .doc-page-main-column{width:80%}.doc-page-navigation-wrapper .doc-page-navigation-column{width:20%}}@media screen and (max-width: 1550px){.doc-page-api-iframe-wrapper{display:none}}\n'], dependencies: [{ kind: "directive", type: i42.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i42.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i52.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i52.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i52.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i52.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i62.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i62.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i62.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i62.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i72.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i82.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["ariaDescribedBy", "e2eAttr", "isMuted", "isCloseable", "isFocusable"], outputs: ["closeAlert"] }, { kind: "component", type: i82.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i92.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i06.ViewEncapsulation.None });
-  }
-};
-i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i06, type: DocPageComponent, decorators: [{
-  type: Component4,
-  args: [{ selector: "eui-showcase-doc-page", encapsulation: ViewEncapsulation5.None, template: `<div class="doc-page-navigation-wrapper" [class.eui-u-hidden]="isLoading">
-    <div class="doc-page-main-column">
-        <eui-page>
-            <eui-page-header label="{{ label }}" subLabel="{{ subLabel }}">
-                <eui-page-header-action-items>
-                    <eui-showcase-doc-page-code
-                        *ngIf="codeFolder"
-                        codeFolder="{{ codeFolder }}"
-                        showcase="{{ showcase }}"></eui-showcase-doc-page-code>
-                    <eui-chip
-                        *ngIf="stateLabel"
-                        [euiSuccess]="stateLabel === 'ACTIVE'"
-                        [euiInfo]="isNotReady"
-                        [euiWarning]="isDeprecated"
-                        [euiDanger]="isLegacy">
-                        <span euiLabel>
-                            <strong>{{ stateLabel }}</strong>
-                        </span>
-                    </eui-chip>
-                </eui-page-header-action-items>
-            </eui-page-header>
-
-            <eui-page-content>
-                <eui-alert *ngIf="stateLabel === 'LEGACY' || isLegacy" euiDanger class="eui-u-mb-xl">
-                    <eui-alert-title>LEGACY component</eui-alert-title>
-                    <strong class="eui-u-color-danger">This component will be removed in eUI 19 release (end of 2024)</strong>
-                    <div *ngIf="cmp">
-                        <div *ngIf="cmp.cmpReplacement !== 'NONE'">
-                            It has been replaced by :
-                            <strong class="eui-u-color-success-darkest">{{ cmp.cmpReplacement }}</strong>
-                            <!-- <div *ngIf="cmp.cmpReplacementUrl">
-                                <br><br>
-                                You can find more information on the new component here : <a [routerLink]="cmp.cmpReplacementUrl">{{cmp.cmpReplacementUrl}}</a>
-                            </div> -->
-                        </div>
-                        <div *ngIf="cmp.cmpReplacement === 'NONE'">
-                            <strong class="eui-u-color-danger"> This component will be removed in eUI 18 release (end of 2023)</strong>
-                        </div>
-                        <div *ngIf="cmp.cmpReplacementNote">
-                            <strong class="eui-u-color-warning">{{ cmp.cmpReplacementNote }}</strong>
-                        </div>
-                    </div>
-                </eui-alert>
-
-                <eui-alert *ngIf="stateLabel === 'DEPRECATED' || isDeprecated" euiWarning class="eui-u-mb-xl">
-                    <eui-alert-title>DEPRECATED component</eui-alert-title>
-                    This component has been <strong class="eui-u-color-danger">deprecated</strong>
-                    <div *ngIf="cmp">
-                        This component has no replacement in current version AND won't have replacement in next version of eUI,
-                        <strong class="eui-u-color-danger">it will be removed in eUI 18 release (end of 2023)</strong>
-                    </div>
-                </eui-alert>
-
-                <eui-alert *ngIf="stateLabel === 'NOT_READY' || isNotReady" euiInfo class="eui-u-mb-xl">
-                    <eui-alert-title>NOT READY for production usage</eui-alert-title>
-                    <div *ngIf="cmp">
-                        This component is under development / some features might be missing, it'll be available in a future release once
-                        validated.
-                    </div>
-                </eui-alert>
-
-                <div *ngIf="(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'" class="mb-5"></div>
-
-                <eui-tabs #tabsContent *ngIf="pageSectionsContent.length === 0" (tabSelect)="onTabSelected($event)">
-                    <eui-tab>
-                        <euiTabLabel> OPTIONS & SAMPLES </euiTabLabel>
-                        <euiTabContent>
-                            <ng-container *ngIf="cmp && cmp.metadata">
-                                <div class="doc-page-section-title">Module import</div>
-                                <pre><code class="language-javascript eui-u-bg-color-grey-5" euiCode>{{ cmpModuleImport }}</code></pre>
-                                <br />
-                            </ng-container>
-
-                            <div id="overview" class="doc-page-section-title">Overview</div>
-
-                            <div *ngIf="pageOverviewContent.length > 0">
-                                <ng-content select="docPageOverview"></ng-content>
-                            </div>
-
-                            <div *ngIf="pageOverviewDefaultContent.length > 0">
-                                <ng-content select="docPageOverviewDefault"></ng-content>
-                            </div>
-                            <br />
-
-                            <div id="samples" class="doc-page-section-title">Options & samples</div>
-                            <ng-content select="docPageSamples"></ng-content>
-                        </euiTabContent>
-                    </eui-tab>
-
-                    <eui-tab *ngIf="hasApi">
-                        <euiTabLabel> API </euiTabLabel>
-                        <euiTabContent>
-                            <ng-container *ngIf="apiUrlSafe">
-                                <div class="flex-container">
-                                    <a href="{{ apiUrl }}" target="_blank" class="ms-auto pb-2 eui-u-text-link-external">Open API page</a>
-                                </div>
-                                <div class="doc-page-api-iframe-wrapper">
-                                    <iframe id="iframe_api" [width]="'100%'" height="700px" frameBorder="0" [src]="apiUrlSafe"></iframe>
-                                </div>
-                            </ng-container>
-                        </euiTabContent>
-                    </eui-tab>
-
-                    <eui-tab *ngIf="hasA11y">
-                        <euiTabLabel> A11Y </euiTabLabel>
-                        <euiTabContent>
-                            <div id="accessibility" class="doc-page-section-title">Accessibility</div>
-                            <ng-container *ngIf="pageAccessibilityContent.length !== 0">
-                                <ng-content select="docPageAccessibility"></ng-content>
-                                <p>
-                                    For more information regarding Accessibility, please refer to the <a class="eui-u-text-link-external" href="https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro" target="_blank">Accessibility Dev Guide</a>.
-                                </p>
-                            </ng-container>
-                            <ng-container *ngIf="pageAccessibilityContent.length === 0">
-                                No accessibility rules applicable
-                            </ng-container>
-                        </euiTabContent>
-                    </eui-tab>
-
-                    <eui-tab *ngIf="pageThemingContent.length > 0">
-                        <euiTabLabel> THEMING </euiTabLabel>
-                        <euiTabContent>
-                            <div id="theming" class="doc-page-section-title">Theming</div>
-                            <ng-content select="docPageTheming"></ng-content>
-                        </euiTabContent>
-                    </eui-tab>
-
-                    <eui-tab *ngIf="pageInteractiveContent.length > 0">
-                        <euiTabLabel>
-                            {{ pageInteractiveContent.first.title }}
-                        </euiTabLabel>
-                        <euiTabContent>
-                            <div id="interactive" class="doc-page-section-title">
-                                {{ pageInteractiveContent.first.subTitle }}
-                            </div>
-                            <ng-content select="docPageInteractive"></ng-content>
-                        </euiTabContent>
-                    </eui-tab>
-                </eui-tabs>
-
-                <ng-container *ngIf="pageSectionsContent.length > 0">
-                    <div id="demo" *ngIf="sections.length === 0" class="doc-page-section-title">Demo</div>
-                    <ng-content select="docPageSections"></ng-content>
-                </ng-container>
-            </eui-page-content>
-        </eui-page>
-    </div>
-
-    <div *ngIf="isNavigationVisible" class="doc-page-navigation-column eui-u-hidden-desktop-down">
-        <div id="doc-page-nav">
-            <div class="doc-page-navigation-title">In this page</div>
-            <div class="doc-page-navigation-content" tabindex="0">
-                <ul class="doc-page-navigation">
-                    <ng-container *ngIf="pageSectionsContent.length === 0">
-                        <li
-                            *ngIf="hasApi"
-                            class="doc-page-navigation-item"
-                            [class.doc-page-navigation-item--selected]="fragmentId === 'api'"
-                            (click)="onNavClick('api', 1)">
-                            <span>API</span>
-                        </li>
-                        <li
-                            *ngIf="hasA11y"
-                            class="doc-page-navigation-item"
-                            [class.doc-page-navigation-item--selected]="fragmentId === 'a11y'"
-                            (click)="onNavClick('a11y', 2)">
-                            <span>A11Y</span>
-                        </li>
-                        <li
-                            class="doc-page-navigation-item"
-                            [class.doc-page-navigation-item--selected]="fragmentId === 'samples'"
-                            (click)="onNavClick('samples', 0)">
-                            <span>OPTIONS & SAMPLES</span>
-                        </li>
-                        <li class="doc-page-navigation-item doc-page-navigation-sub">
-                            <ng-container *ngIf="categories.length > 0">
-                                <ng-container *ngIf="hasCategories; else noCategories">
-                                    <ng-container *ngFor="let category of categories">
-                                        <ng-container *ngIf="category.name === 'Base'; else notBase">
-                                            <ul *ngFor="let sample of category.samples" class="doc-page-navigation-list">
-                                                <li
-                                                    class="doc-page-navigation-item"
-                                                    [class.doc-page-navigation-item--selected]="fragmentId === sample.id"
-                                                    (click)="onNavClick(sample.id, 0)">
-                                                    <span>{{ sample.label }}</span>
-                                                </li>
-                                            </ul>
-                                        </ng-container>
-                                        <ng-template #notBase>
-                                            <div *ngIf="category.name !== 'Base'" class="doc-page-navigation-category">{{category.name}}</div>
-                                            <ul *ngFor="let sample of category.samples" class="doc-page-navigation-list">
-                                                <li
-                                                    class="doc-page-navigation-item doc-page-navigation-item-sub"
-                                                    [class.doc-page-navigation-item--selected]="fragmentId === sample.id"
-                                                    (click)="onNavClick(sample.id, 0)">
-                                                    <span>{{ sample.label }}</span>
-                                                </li>
-                                            </ul>
-                                        </ng-template>
-                                    </ng-container>
-                                </ng-container>
-
-                                <ng-template #noCategories>
-                                    <ul *ngFor="let sample of samples" class="doc-page-navigation-list">
-                                        <li
-                                            class="doc-page-navigation-item"
-                                            [class.doc-page-navigation-item--selected]="fragmentId === sample.id"
-                                            (click)="onNavClick(sample.id, 0)">
-                                            <span>{{ sample.label }}</span>
-                                        </li>
-                                    </ul>
-                                </ng-template>
-                            </ng-container>
-                        </li>
-
-
-
-                        <!-- OPTIONAL TABS-->
-                        <ng-container *ngIf="pageThemingContent.length > 0">
-                            <li
-                                *ngIf="pageThemingContent.length > 0"
-                                class="doc-page-navigation-item"
-                                [class.doc-page-navigation-item--selected]="fragmentId === 'theming'"
-                                (click)="onNavClick('theming', 3)">
-                                <span>THEMING</span>
-                            </li>
-                            <li
-                                *ngIf="pageInteractiveContent.length > 0"
-                                class="doc-page-navigation-item"
-                                [class.doc-page-navigation-item--selected]="fragmentId === 'advanced'"
-                                (click)="onNavClick('advanced', 4)">
-                                <span>{{ pageInteractiveContent.first.title }}</span>
-                            </li>
-                        </ng-container>
-                        <ng-container *ngIf="pageThemingContent.length === 0">
-                            <li
-                                *ngIf="pageInteractiveContent.length > 0"
-                                class="doc-page-navigation-item"
-                                [class.doc-page-navigation-item--selected]="fragmentId === 'advanced'"
-                                (click)="onNavClick('advanced', 3)">
-                                <span>{{ pageInteractiveContent.first.title }}</span>
-                            </li>
-                        </ng-container>
-                    </ng-container>
-
-                    <ng-container *ngIf="pageSectionsContent.length > 0">
-                        <li
-                            class="doc-page-navigation-item"
-                            [class.doc-page-navigation-item--selected]="fragmentId === 'sections'"
-                            (click)="onNavClick('sections', null)">
-                            <span>Sections</span>
-                        </li>
-                        <li
-                            *ngIf="sections.length === 0"
-                            class="doc-page-navigation-item"
-                            [class.doc-page-navigation-item--selected]="fragmentId === 'demo'"
-                            (click)="onNavClick('demo', null)">
-                            <span>Demo</span>
-                        </li>
-                        <li *ngIf="sections.length > 0" class="doc-page-navigation-item doc-page-navigation-sub">
-                            <ul *ngFor="let section of sections">
-                                <li
-                                    class="doc-page-navigation-item"
-                                    [class.doc-page-navigation-item--selected]="fragmentId === section.id"
-                                    (click)="onNavClick(section.id, null)">
-                                    <span>{{ section.label }}</span>
-                                </li>
-                            </ul>
-                        </li>
-                    </ng-container>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-`, styles: ['.doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-s-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-c-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:auto;box-shadow:var(--eui-sh-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-wrapper .language-javascript:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:0!important;transition:none}.doc-page-navigation-wrapper .language-javascript:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:0!important;transition:none}.doc-page-navigation-wrapper .language-javascript [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:0!important;transition:none}.doc-page-navigation-title{padding:var(--eui-s-s);font:var(--eui-f-xl)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 7.25rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-c-neutral-bg-light)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-s-xs);margin:0;padding:0}.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-info-darker);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-s-3xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-info-darker);padding-left:var(--eui-s-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-neutral-lightest)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-info-bg);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.doc-page-section-title{margin-top:var(--eui-s-2xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-info-darker);letter-spacing:-1px;font:var(--eui-f-2xl-bold)}.doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-2xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-2xs);width:auto;display:table;color:var(--eui-c-neutral)}@media screen and (max-width: 767px){.doc-page-navigation-wrapper .doc-page-main-column{padding-right:0;width:100%}.doc-page-navigation-wrapper .doc-page-navigation-column{display:none;width:0}}@media screen and (min-width: 768px) and (max-width: 995px){.doc-page-navigation-wrapper .doc-page-main-column{width:80%}.doc-page-navigation-wrapper .doc-page-navigation-column{width:20%}}@media screen and (max-width: 1550px){.doc-page-api-iframe-wrapper{display:none}}\n'] }]
-}], ctorParameters: () => [{ type: i12.Router }, { type: i12.ActivatedRoute }, { type: i23.EuiAppShellService }, { type: i33.DomSanitizer }, { type: i42.Location }], propDecorators: { id: [{
-  type: Input4
-}], label: [{
-  type: Input4
-}], subLabel: [{
-  type: Input4
-}], isNotReady: [{
-  type: Input4
-}], isDeprecated: [{
-  type: Input4
-}], isLegacy: [{
-  type: Input4
-}], codeFolder: [{
-  type: Input4
-}], showcase: [{
-  type: Input4
-}], isNavigationVisible: [{
-  type: Input4
-}], hasApi: [{
-  type: Input4
-}], hasA11y: [{
-  type: Input4
-}], samples: [{
-  type: ContentChildren,
-  args: [DocSampleComponent, { descendants: true }]
-}], sections: [{
-  type: ContentChildren,
-  args: [DocSectionComponent, { descendants: true }]
-}], pageOverviewContent: [{
-  type: ContentChildren,
-  args: [forwardRef(() => DocPageOverviewContentDirective)]
-}], pageOverviewDefaultContent: [{
-  type: ContentChildren,
-  args: [forwardRef(() => DocPageOverviewDefaultContentDirective)]
-}], pageSamplesContent: [{
-  type: ContentChildren,
-  args: [forwardRef(() => DocPageSamplesContentDirective)]
-}], pageSectionsContent: [{
-  type: ContentChildren,
-  args: [forwardRef(() => DocPageSectionsContentDirective)]
-}], pageInteractiveContent: [{
-  type: ContentChildren,
-  args: [forwardRef(() => DocPageInteractiveContentDirective)]
-}], pageAccessibilityContent: [{
-  type: ContentChildren,
-  args: [forwardRef(() => DocPageAccessibilityContentDirective)]
-}], pageApiContent: [{
-  type: ContentChildren,
-  args: [forwardRef(() => DocPageApiContentDirective)]
-}], pageThemingContent: [{
-  type: ContentChildren,
-  args: [forwardRef(() => DocPageThemingContentDirective)]
-}], tabsContent: [{
-  type: ViewChild,
-  args: ["tabsContent"]
-}] } });
-var DocPageOverviewContentDirective = class _DocPageOverviewContentDirective {
-  static {
-    this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i06, type: _DocPageOverviewContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
-  }
-  static {
-    this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocPageOverviewContentDirective, selector: "docPageOverview", ngImport: i06 });
-  }
-};
-i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i06, type: DocPageOverviewContentDirective, decorators: [{
-  type: Directive2,
-  args: [{ selector: "docPageOverview" }]
-}] });
-var DocPageOverviewDefaultContentDirective = class _DocPageOverviewDefaultContentDirective {
-  static {
-    this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i06, type: _DocPageOverviewDefaultContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
-  }
-  static {
-    this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocPageOverviewDefaultContentDirective, selector: "docPageOverviewDefault", ngImport: i06 });
-  }
-};
-i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i06, type: DocPageOverviewDefaultContentDirective, decorators: [{
-  type: Directive2,
-  args: [{ selector: "docPageOverviewDefault" }]
-}] });
-var DocPageInteractiveContentDirective = class _DocPageInteractiveContentDirective {
-  constructor() {
-    this.title = "ADVANCED EXAMPLES";
-    this.subTitle = "Advanced use cases";
-  }
-  static {
-    this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i06, type: _DocPageInteractiveContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
-  }
-  static {
-    this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocPageInteractiveContentDirective, selector: "docPageInteractive", inputs: { title: "title", subTitle: "subTitle" }, ngImport: i06 });
-  }
-};
-i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i06, type: DocPageInteractiveContentDirective, decorators: [{
-  type: Directive2,
-  args: [{ selector: "docPageInteractive" }]
-}], propDecorators: { title: [{
-  type: Input4
-}], subTitle: [{
-  type: Input4
-}] } });
-var DocPageSamplesContentDirective = class _DocPageSamplesContentDirective {
-  static {
-    this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i06, type: _DocPageSamplesContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
-  }
-  static {
-    this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocPageSamplesContentDirective, selector: "docPageSamples", ngImport: i06 });
-  }
-};
-i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i06, type: DocPageSamplesContentDirective, decorators: [{
-  type: Directive2,
-  args: [{ selector: "docPageSamples" }]
-}] });
-var DocPageSectionsContentDirective = class _DocPageSectionsContentDirective {
-  static {
-    this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i06, type: _DocPageSectionsContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
-  }
-  static {
-    this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocPageSectionsContentDirective, selector: "docPageSections", ngImport: i06 });
-  }
-};
-i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i06, type: DocPageSectionsContentDirective, decorators: [{
-  type: Directive2,
-  args: [{ selector: "docPageSections" }]
-}] });
-var DocPageAccessibilityContentDirective = class _DocPageAccessibilityContentDirective {
-  static {
-    this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i06, type: _DocPageAccessibilityContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
-  }
-  static {
-    this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocPageAccessibilityContentDirective, selector: "docPageAccessibility", ngImport: i06 });
-  }
-};
-i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i06, type: DocPageAccessibilityContentDirective, decorators: [{
-  type: Directive2,
-  args: [{ selector: "docPageAccessibility" }]
-}] });
-var DocPageApiContentDirective = class _DocPageApiContentDirective {
-  static {
-    this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i06, type: _DocPageApiContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
-  }
-  static {
-    this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocPageApiContentDirective, selector: "docPageApi", ngImport: i06 });
-  }
-};
-i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i06, type: DocPageApiContentDirective, decorators: [{
-  type: Directive2,
-  args: [{ selector: "docPageApi" }]
-}] });
-var DocPageThemingContentDirective = class _DocPageThemingContentDirective {
-  static {
-    this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i06, type: _DocPageThemingContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
-  }
-  static {
-    this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocPageThemingContentDirective, selector: "docPageTheming", ngImport: i06 });
-  }
-};
-i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i06, type: DocPageThemingContentDirective, decorators: [{
-  type: Directive2,
-  args: [{ selector: "docPageTheming" }]
-}] });
-
-// lib/components/doc-sample-api/doc-sample-api.component.mjs
-import { Component as Component5 } from "@angular/core";
-import * as i07 from "@angular/core";
-var DocSampleApiComponent = class _DocSampleApiComponent {
-  static {
-    this.ɵfac = i07.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i07, type: _DocSampleApiComponent, deps: [], target: i07.ɵɵFactoryTarget.Component });
-  }
-  static {
-    this.ɵcmp = i07.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocSampleApiComponent, selector: "eui-showcase-doc-sample-api", ngImport: i07, template: "" });
-  }
-};
-i07.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i07, type: DocSampleApiComponent, decorators: [{
-  type: Component5,
-  args: [{ selector: "eui-showcase-doc-sample-api", template: "" }]
-}] });
-
-// lib/components/doc-section-code/doc-section-code.component.mjs
-import { Component as Component6, Input as Input5, Directive as Directive3, ContentChild, forwardRef as forwardRef3 } from "@angular/core";
-import * as i08 from "@angular/core";
-import * as i13 from "@angular/common";
-import * as i24 from "@eui/components/eui-button";
-import * as i34 from "@eui/components/eui-tabs";
-import * as i43 from "@eui/components/eui-label";
-var DocSectionCodeComponent = class _DocSectionCodeComponent {
-  constructor() {
-    this.isDeprecated = false;
-    this.isCodeExpanded = false;
-  }
-  toggleCode() {
-    this.isCodeExpanded = !this.isCodeExpanded;
-  }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  isDefined(object) {
-    return object;
-  }
-  static {
-    this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i08, type: _DocSectionCodeComponent, deps: [], target: i08.ɵɵFactoryTarget.Component });
-  }
-  static {
-    this.ɵcmp = i08.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocSectionCodeComponent, selector: "eui-showcase-doc-section-code", inputs: { label: "label", content: "content", styleClass: "styleClass", versionLabel: "versionLabel", isDeprecated: "isDeprecated", isCodeExpanded: "isCodeExpanded" }, queries: [{ propertyName: "sectionDescription", first: true, predicate: i08.forwardRef(() => DocSectionCodeDescriptionTagDirective), descendants: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i08.forwardRef(() => DocSectionCodeHtmlTagDirective), descendants: true }, { propertyName: "sectionCodeTS", first: true, predicate: i08.forwardRef(() => DocSectionCodeTsTagDirective), descendants: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i08.forwardRef(() => DocSectionCodeServiceTagDirective), descendants: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i08.forwardRef(() => DocSectionCodeCssTagDirective), descendants: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i08.forwardRef(() => DocSectionCodeDocTagDirective), descendants: true }], ngImport: i08, template: '<h5 class="section-title {{ styleClass }}">\n    <div class="eui-u-flex eui-u-flex-justify-content-between">\n        <div [class.app-section-code--deprecated]="isDeprecated">\n            {{ label }}\n        </div>\n        <div class="ml-auto">\n            <span *ngIf="versionLabel" class="eui-u-color-danger">{{ versionLabel }}</span>\n            <button type="button" euiButton [euiOutline]="!isCodeExpanded" euiPrimary euiSizeS (click)="toggleCode()">\n                <span *ngIf="!isCodeExpanded" euiLabel>Code</span>\n                <span *ngIf="isCodeExpanded" euiLabel>Hide Code</span>\n                <span euiIcon iconClass="eui-icon-code"></span>\n            </button>\n        </div>\n    </div>\n    <div *ngIf="isDeprecated">\n        <small class="eui-u-color-danger">Deprecated in 3.x</small>\n    </div>\n</h5>\n\n<div class="eui-u-mv" *ngIf="sectionDescription">\n    <ng-content select="sectionDescription"></ng-content>\n</div>\n\n<ng-template [ngIf]="isCodeExpanded">\n    <eui-tabs>\n        <eui-tab [isVisible]="isDefined(sectionCodeHTML)">\n            <euiTabLabel>\n                HTML\n                <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class="language-markup" euiCode><ng-content select="sectionCodeHTML"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]="isDefined(sectionCodeTS)">\n            <euiTabLabel>\n                TS\n                <euiTabSubLabel>Typescript</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class="language-javascript" euiCode><ng-content select="sectionCodeTS"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]="isDefined(sectionCodeSERVICE)">\n            <euiTabLabel>Service</euiTabLabel>\n            <euiTabContent>\n                <pre><code class="language-javascript" euiCode><ng-content select="sectionCodeSERVICE"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]="isDefined(sectionCodeCSS)">\n            <euiTabLabel>CSS</euiTabLabel>\n            <euiTabContent>\n                <pre><code class="language-javascript" euiCode><ng-content select="sectionCodeCSS"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]="isDefined(sectionCodeDOC)">\n            <euiTabLabel>\n                DOC\n                <euiTabSubLabel>Documentation</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <div class="language-doc">\n                    <ng-content select="sectionCodeDOC"></ng-content>\n                </div>\n            </euiTabContent>\n        </eui-tab>\n    </eui-tabs>\n    <ng-template [ngIf]="!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS">\n        <pre class="only-html"><code class="language-markup" euiCode><ng-content></ng-content></code></pre>\n    </ng-template>\n</ng-template>\n', styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"], dependencies: [{ kind: "directive", type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i24.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i34.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i34.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i34.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i34.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i34.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i43.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }] });
-  }
-};
-i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i08, type: DocSectionCodeComponent, decorators: [{
-  type: Component6,
-  args: [{ selector: "eui-showcase-doc-section-code", template: '<h5 class="section-title {{ styleClass }}">\n    <div class="eui-u-flex eui-u-flex-justify-content-between">\n        <div [class.app-section-code--deprecated]="isDeprecated">\n            {{ label }}\n        </div>\n        <div class="ml-auto">\n            <span *ngIf="versionLabel" class="eui-u-color-danger">{{ versionLabel }}</span>\n            <button type="button" euiButton [euiOutline]="!isCodeExpanded" euiPrimary euiSizeS (click)="toggleCode()">\n                <span *ngIf="!isCodeExpanded" euiLabel>Code</span>\n                <span *ngIf="isCodeExpanded" euiLabel>Hide Code</span>\n                <span euiIcon iconClass="eui-icon-code"></span>\n            </button>\n        </div>\n    </div>\n    <div *ngIf="isDeprecated">\n        <small class="eui-u-color-danger">Deprecated in 3.x</small>\n    </div>\n</h5>\n\n<div class="eui-u-mv" *ngIf="sectionDescription">\n    <ng-content select="sectionDescription"></ng-content>\n</div>\n\n<ng-template [ngIf]="isCodeExpanded">\n    <eui-tabs>\n        <eui-tab [isVisible]="isDefined(sectionCodeHTML)">\n            <euiTabLabel>\n                HTML\n                <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class="language-markup" euiCode><ng-content select="sectionCodeHTML"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]="isDefined(sectionCodeTS)">\n            <euiTabLabel>\n                TS\n                <euiTabSubLabel>Typescript</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class="language-javascript" euiCode><ng-content select="sectionCodeTS"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]="isDefined(sectionCodeSERVICE)">\n            <euiTabLabel>Service</euiTabLabel>\n            <euiTabContent>\n                <pre><code class="language-javascript" euiCode><ng-content select="sectionCodeSERVICE"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]="isDefined(sectionCodeCSS)">\n            <euiTabLabel>CSS</euiTabLabel>\n            <euiTabContent>\n                <pre><code class="language-javascript" euiCode><ng-content select="sectionCodeCSS"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]="isDefined(sectionCodeDOC)">\n            <euiTabLabel>\n                DOC\n                <euiTabSubLabel>Documentation</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <div class="language-doc">\n                    <ng-content select="sectionCodeDOC"></ng-content>\n                </div>\n            </euiTabContent>\n        </eui-tab>\n    </eui-tabs>\n    <ng-template [ngIf]="!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS">\n        <pre class="only-html"><code class="language-markup" euiCode><ng-content></ng-content></code></pre>\n    </ng-template>\n</ng-template>\n', styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"] }]
-}], propDecorators: { label: [{
-  type: Input5
-}], content: [{
-  type: Input5
-}], styleClass: [{
-  type: Input5
-}], versionLabel: [{
-  type: Input5
-}], isDeprecated: [{
-  type: Input5
-}], isCodeExpanded: [{
-  type: Input5
-}], sectionDescription: [{
-  type: ContentChild,
-  args: [forwardRef3(() => DocSectionCodeDescriptionTagDirective)]
-}], sectionCodeHTML: [{
-  type: ContentChild,
-  args: [forwardRef3(() => DocSectionCodeHtmlTagDirective)]
-}], sectionCodeTS: [{
-  type: ContentChild,
-  args: [forwardRef3(() => DocSectionCodeTsTagDirective)]
-}], sectionCodeSERVICE: [{
-  type: ContentChild,
-  args: [forwardRef3(() => DocSectionCodeServiceTagDirective)]
-}], sectionCodeCSS: [{
-  type: ContentChild,
-  args: [forwardRef3(() => DocSectionCodeCssTagDirective)]
-}], sectionCodeDOC: [{
-  type: ContentChild,
-  args: [forwardRef3(() => DocSectionCodeDocTagDirective)]
-}] } });
-var DocSectionCodeDescriptionTagDirective = class _DocSectionCodeDescriptionTagDirective {
-  static {
-    this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i08, type: _DocSectionCodeDescriptionTagDirective, deps: [], target: i08.ɵɵFactoryTarget.Directive });
-  }
-  static {
-    this.ɵdir = i08.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocSectionCodeDescriptionTagDirective, selector: "sectionDescription", ngImport: i08 });
-  }
-};
-i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i08, type: DocSectionCodeDescriptionTagDirective, decorators: [{
-  type: Directive3,
-  args: [{ selector: "sectionDescription" }]
-}] });
-var DocSectionCodeHtmlTagDirective = class _DocSectionCodeHtmlTagDirective {
-  static {
-    this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i08, type: _DocSectionCodeHtmlTagDirective, deps: [], target: i08.ɵɵFactoryTarget.Directive });
-  }
-  static {
-    this.ɵdir = i08.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocSectionCodeHtmlTagDirective, selector: "sectionCodeHTML", ngImport: i08 });
-  }
-};
-i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i08, type: DocSectionCodeHtmlTagDirective, decorators: [{
-  type: Directive3,
-  args: [{ selector: "sectionCodeHTML" }]
-}] });
-var DocSectionCodeTsTagDirective = class _DocSectionCodeTsTagDirective {
-  static {
-    this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i08, type: _DocSectionCodeTsTagDirective, deps: [], target: i08.ɵɵFactoryTarget.Directive });
-  }
-  static {
-    this.ɵdir = i08.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocSectionCodeTsTagDirective, selector: "sectionCodeTS", ngImport: i08 });
-  }
-};
-i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i08, type: DocSectionCodeTsTagDirective, decorators: [{
-  type: Directive3,
-  args: [{ selector: "sectionCodeTS" }]
-}] });
-var DocSectionCodeServiceTagDirective = class _DocSectionCodeServiceTagDirective {
-  static {
-    this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i08, type: _DocSectionCodeServiceTagDirective, deps: [], target: i08.ɵɵFactoryTarget.Directive });
-  }
-  static {
-    this.ɵdir = i08.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocSectionCodeServiceTagDirective, selector: "sectionCodeSERVICE", ngImport: i08 });
-  }
-};
-i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i08, type: DocSectionCodeServiceTagDirective, decorators: [{
-  type: Directive3,
-  args: [{ selector: "sectionCodeSERVICE" }]
-}] });
-var DocSectionCodeCssTagDirective = class _DocSectionCodeCssTagDirective {
-  static {
-    this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i08, type: _DocSectionCodeCssTagDirective, deps: [], target: i08.ɵɵFactoryTarget.Directive });
-  }
-  static {
-    this.ɵdir = i08.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocSectionCodeCssTagDirective, selector: "sectionCodeCSS", ngImport: i08 });
-  }
-};
-i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i08, type: DocSectionCodeCssTagDirective, decorators: [{
-  type: Directive3,
-  args: [{ selector: "sectionCodeCSS" }]
-}] });
-var DocSectionCodeDocTagDirective = class _DocSectionCodeDocTagDirective {
-  static {
-    this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i08, type: _DocSectionCodeDocTagDirective, deps: [], target: i08.ɵɵFactoryTarget.Directive });
-  }
-  static {
-    this.ɵdir = i08.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocSectionCodeDocTagDirective, selector: "sectionCodeDOC", ngImport: i08 });
-  }
-};
-i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i08, type: DocSectionCodeDocTagDirective, decorators: [{
-  type: Directive3,
-  args: [{ selector: "sectionCodeDOC" }]
-}] });
-
-// lib/components/doc-page-code-modal/doc-page-code-modal.component.mjs
-import { Component as Component7, Input as Input6, ViewChild as ViewChild2 } from "@angular/core";
-import * as i09 from "@angular/core";
-import * as i14 from "@eui/core";
-import * as i25 from "@eui/components/eui-button";
-import * as i35 from "@eui/components/eui-dialog";
-import * as i44 from "@eui/components/eui-icon";
-import * as i53 from "@eui/components/eui-label";
-var DocPageCodeModalComponent = class _DocPageCodeModalComponent {
-  constructor(asService) {
-    this.asService = asService;
-    this.width = "95vw";
-  }
-  toggleCode() {
-    this.dialog.openDialog();
-  }
-  onClose() {
-    this.dialog.closeDialog();
-  }
-  static {
-    this.ɵfac = i09.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i09, type: _DocPageCodeModalComponent, deps: [{ token: i14.EuiAppShellService }], target: i09.ɵɵFactoryTarget.Component });
-  }
-  static {
-    this.ɵcmp = i09.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocPageCodeModalComponent, selector: "eui-showcase-doc-page-code-modal", inputs: { width: "width" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i09, template: '<button type="button" euiButton euiAccent (click)="toggleCode()">\n    <span euiLabel>Check the code</span>\n    <eui-icon-svg icon="eui-code"></eui-icon-svg>\n</button>\n\n<eui-dialog #dialog title="Page source code" [hasFooter]="false" (close)="onClose()" [width]="width">\n    <ng-content></ng-content>\n</eui-dialog>\n', dependencies: [{ kind: "component", type: i25.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i35.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "typeClass", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "isClosedOnClickOutside", "hasClosedOnClickOutside", "isClosedOnEscape", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i44.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i53.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }] });
-  }
-};
-i09.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i09, type: DocPageCodeModalComponent, decorators: [{
-  type: Component7,
-  args: [{ selector: "eui-showcase-doc-page-code-modal", template: '<button type="button" euiButton euiAccent (click)="toggleCode()">\n    <span euiLabel>Check the code</span>\n    <eui-icon-svg icon="eui-code"></eui-icon-svg>\n</button>\n\n<eui-dialog #dialog title="Page source code" [hasFooter]="false" (close)="onClose()" [width]="width">\n    <ng-content></ng-content>\n</eui-dialog>\n' }]
-}], ctorParameters: () => [{ type: i14.EuiAppShellService }], propDecorators: { width: [{
-  type: Input6
-}], dialog: [{
-  type: ViewChild2,
-  args: ["dialog"]
-}] } });
-
-// lib/components/doc-page-code-fab/doc-page-code-fab.component.mjs
-import { Component as Component8, Input as Input7, ViewChild as ViewChild3 } from "@angular/core";
-import * as i010 from "@angular/core";
-import * as i15 from "@eui/core";
-import * as i26 from "@angular/common";
-import * as i36 from "@eui/components/eui-button";
-import * as i45 from "@eui/components/eui-dialog";
-import * as i54 from "@eui/components/eui-icon";
-var DocPageCodeFabComponent = class _DocPageCodeFabComponent {
-  constructor(asService) {
-    this.asService = asService;
-    this.codeFolder = "";
-    this.showcase = "design-patterns";
-  }
-  toggleCode() {
-    this.dialog.openDialog();
-  }
-  onClose() {
-    this.dialog.closeDialog();
-  }
-  onOpenCode() {
-    const showcaseRoot = "https://citnet.tech.ec.europa.eu/CITnet/stash/projects/CSDR/repos/app-eui-showcase-ux-components/browse/src/app/features";
-    const sourceRootPath = `${showcaseRoot}/showcase-${this.showcase}/`;
-    window.open(sourceRootPath + this.codeFolder, "_blank");
-  }
-  static {
-    this.ɵfac = i010.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i010, type: _DocPageCodeFabComponent, deps: [{ token: i15.EuiAppShellService }], target: i010.ɵɵFactoryTarget.Component });
-  }
-  static {
-    this.ɵcmp = i010.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocPageCodeFabComponent, selector: "eui-showcase-doc-page-code-fab", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i010, template: `<div class="eui-button-fixed">
-    <div class="eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-accent eui--accent">
-        <eui-icon-svg icon="eui-code" size="l" (click)="toggleCode()"></eui-icon-svg>
-    </div>
-</div>
-
-<eui-dialog #dialog title="Page source code" [hasFooter]="false" (close)="onClose()" [width]="'50vw'">
-    <button type="button" *ngIf="codeFolder" euiButton euiAccent euiSizeS (click)="onOpenCode()">
-        <eui-icon-svg icon="eui-code" set="eui" size="m" fillColor="grey-100" class="eui-u-mr-xs"></eui-icon-svg> VIEW SOURCES
-    </button>
-    <ng-content></ng-content>
-    <p class="eui-u-text-paragraph">Use the <kbd class="eui-u-text-kbd">View sources</kbd> button to access the code source of the page.</p>
-</eui-dialog>
-`, dependencies: [{ kind: "directive", type: i26.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i36.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i45.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "typeClass", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "isClosedOnClickOutside", "hasClosedOnClickOutside", "isClosedOnEscape", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i54.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }] });
-  }
-};
-i010.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i010, type: DocPageCodeFabComponent, decorators: [{
-  type: Component8,
-  args: [{ selector: "eui-showcase-doc-page-code-fab", template: `<div class="eui-button-fixed">
-    <div class="eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-accent eui--accent">
-        <eui-icon-svg icon="eui-code" size="l" (click)="toggleCode()"></eui-icon-svg>
-    </div>
-</div>
-
-<eui-dialog #dialog title="Page source code" [hasFooter]="false" (close)="onClose()" [width]="'50vw'">
-    <button type="button" *ngIf="codeFolder" euiButton euiAccent euiSizeS (click)="onOpenCode()">
-        <eui-icon-svg icon="eui-code" set="eui" size="m" fillColor="grey-100" class="eui-u-mr-xs"></eui-icon-svg> VIEW SOURCES
-    </button>
-    <ng-content></ng-content>
-    <p class="eui-u-text-paragraph">Use the <kbd class="eui-u-text-kbd">View sources</kbd> button to access the code source of the page.</p>
-</eui-dialog>
-` }]
-}], ctorParameters: () => [{ type: i15.EuiAppShellService }], propDecorators: { codeFolder: [{
-  type: Input7
-}], showcase: [{
-  type: Input7
-}], dialog: [{
-  type: ViewChild3,
-  args: ["dialog"]
-}] } });
-
-// lib/components/lorem-ipsum/lorem-ipsum-sample.component.mjs
-import { Component as Component9, Input as Input8 } from "@angular/core";
-import * as i011 from "@angular/core";
-import * as i16 from "@angular/common";
-var LoremIpsumSampleComponent = class _LoremIpsumSampleComponent {
-  constructor() {
-    this.textSize = "large";
-  }
-  static {
-    this.ɵfac = i011.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i011, type: _LoremIpsumSampleComponent, deps: [], target: i011.ɵɵFactoryTarget.Component });
-  }
-  static {
-    this.ɵcmp = i011.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _LoremIpsumSampleComponent, selector: "eui-showcase-doc-lorem-ipsum", inputs: { textSize: "textSize" }, ngImport: i011, template: `<div *ngIf="textSize === 'small'">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis
-    malesuada. Etiam vulputate quam at consectetur pharetra.
-
-    <div class="eui-u-mb-m">
-        Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque. Aenean
-        consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.
-    </div>
-    <div class="eui-u-mb-m">
-        Sed vitae tellus ac nisl facilisis posuere. Mauris cursus dui nec arcu molestie sodales. Morbi vel enim semper, luctus odio vitae,
-        lacinia nisl. Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium. Nunc venenatis eros a leo tincidunt gravida.
-    </div>
-    <div class="eui-u-mb-m">Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.</div>
-</div>
-
-<div *ngIf="textSize === 'medium'">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis
-    malesuada. Etiam vulputate quam at consectetur pharetra.
-
-    <div class="eui-u-mb-m">
-        Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus. Curabitur venenatis eros at eros ultrices, eu feugiat eros
-        efficitur. Sed quis nulla non augue scelerisque gravida vitae sed neque. Quisque semper dolor non diam sodales suscipit.
-    </div>
-    <div class="eui-u-mb-m">
-        Donec ut tortor scelerisque, sodales neque id, tempor orci. Suspendisse eu augue at nibh egestas eleifend. Ut tristique enim in
-        lectus aliquam, non tincidunt tortor vulputate. Phasellus eu nunc faucibus, porta ante nec, malesuada erat.
-    </div>
-    <div class="eui-u-mb-m">
-        Vestibulum hendrerit risus a libero gravida venenatis. Mauris non enim sit amet odio pellentesque scelerisque in et velit. Quisque
-        efficitur eros ut magna rutrum aliquet. Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui. Nullam commodo mi quis
-        nibh euismod interdum. In rutrum sapien ac viverra pretium.
-    </div>
-    <div class="eui-u-mb-m">
-        Ut eget tellus a magna fermentum tempor at id erat. Nam fringilla eros sed leo facilisis, et mollis orci elementum. Donec
-        consectetur libero sed arcu rhoncus, vel elementum augue mollis. Cras facilisis nisl mollis imperdiet mollis.
-    </div>
-    <div class="eui-u-mb-m">
-        Sed pharetra lorem in justo rhoncus tempor. Phasellus vel elit eget massa consectetur porttitor eu ut ex. Donec sed ex sit amet
-        purus blandit pharetra. Nam rhoncus dolor ac felis condimentum malesuada.
-    </div>
-    <div class="eui-u-mb-m">
-        Pellentesque convallis nulla in lectus molestie mollis. Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.
-        Nulla suscipit ante in sollicitudin semper.
-    </div>
-    <div class="eui-u-mb-m">Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.</div>
-    <div class="eui-u-mb-m">
-        Pellentesque gravida diam quis orci suscipit hendrerit. Vestibulum congue sapien sed pretium gravida. Nullam ornare lectus sed
-        pulvinar fringilla. Nam dictum eros sit amet lectus aliquet tincidunt. Quisque eu augue eget felis tincidunt hendrerit. Aenean vel
-        lorem vel sem consequat congue.
-    </div>
-    <div class="eui-u-mb-m">Phasellus finibus libero at blandit sollicitudin. Praesent pulvinar libero a lorem scelerisque sodales.</div>
-    <div class="eui-u-mb-m">Donec tempor quam eget turpis dignissim egestas. Pellentesque vulputate nisi eu ornare euismod.</div>
-</div>
-
-<div *ngIf="textSize === 'large'">
-    <div class="eui-u-mb-m">
-        Lorem ipsum dolor sit amet consectetur. Nec maecenas turpis eget curabitur. Neque accumsan nulla vestibulum vulputate. Etiam lorem
-        sit leo aliquam. Penatibus suspendisse sit in metus sodales pretium erat tempor. Congue aliquam varius nec pellentesque. Diam
-        tincidunt neque aliquam a natoque egestas nibh in urna. Volutpat enim erat magna sociis blandit odio ut convallis. Montes blandit
-        maecenas pellentesque magna. Ipsum at porta justo massa aliquet vulputate sit. Nec non semper urna morbi nec ut in eu. Tristique
-        morbi nam tempus id.
-    </div>
-    <div class="eui-u-mb-m">
-        Amet eu phasellus dignissim lacus. Pellentesque tristique sed leo eu mattis quam ut sem sed. Id lacus erat urna arcu ac risus
-        sodales. Scelerisque risus auctor erat mattis habitant facilisis. Orci velit nunc fermentum condimentum volutpat. Nec tellus at
-        risus cras. Malesuada ultrices vestibulum arcu sagittis quis purus. Sit ultricies suspendisse ante augue malesuada mattis eget
-        fermentum et. Lobortis et ridiculus turpis elit a mi faucibus. Sit vitae nunc etiam euismod massa nisi nibh arcu nulla. Elit ipsum
-        lorem vestibulum nulla senectus curabitur. Turpis non eu eu rhoncus. Dictum porttitor pulvinar commodo nec sapien est at erat et.
-        Nisl pellentesque pellentesque tempus tristique commodo eget urna tempor. Porta mi accumsan senectus risus eget.
-    </div>
-    <div class="eui-u-mb-m">
-        Velit vulputate amet id tellus. Quam aliquet eros hendrerit cursus id et amet in nam. Eget elementum diam ut magna porttitor. Cursus
-        neque vulputate malesuada congue enim. Ac in sed et justo adipiscing habitasse elit tincidunt dictum. Dui ornare ac ligula duis. Sit
-        mi a eu dictum est magna morbi. Morbi hendrerit non senectus sit platea gravida id. Fermentum vulputate arcu pretium cras elit.
-    </div>
-    <div class="eui-u-mb-m">
-        Enim et nunc eget ac commodo sagittis. Turpis facilisi enim enim nisi eu sed. Amet viverra felis in ac orci ullamcorper. At
-        ridiculus enim nec velit nulla luctus lorem non ultricies. Urna gravida sem curabitur quis diam ut porttitor aliquam sapien. Id
-        adipiscing libero feugiat imperdiet senectus mattis non nulla condimentum.
-    </div>
-    <div class="eui-u-mb-m">
-        Etiam felis parturient et amet. Enim neque eu risus ante tristique nisl nisl vulputate. Arcu turpis semper vitae ultrices sit
-        ultrices. Sed arcu pharetra vel sapien in. Turpis vestibulum tellus quis arcu egestas viverra cursus quisque. Eu volutpat mauris
-        sagittis integer fermentum fringilla penatibus. Velit et quis et arcu velit tortor.
-    </div>
-    <div class="eui-u-mb-m">
-        Nisl fringilla nibh eu nunc pellentesque dignissim vestibulum mus porttitor. Consequat non eu nulla lectus ultrices. Viverra duis
-        enim aliquet ut massa laoreet consequat. Sociis dignissim sodales vitae maecenas nec aliquam. Volutpat feugiat urna id sed. In
-        fringilla dui neque montes ut et lorem velit consequat. Ut fermentum amet dictum proin et. Aenean odio ac quisque ultrices tellus
-        mattis posuere et curabitur. Proin est suspendisse iaculis nullam eros sit amet aliquam laoreet. Libero tincidunt quis et odio
-        imperdiet risus neque. Odio et dui duis odio accumsan. Lacus nibh urna at risus euismod lobortis cursus. Porta risus mi gravida
-        aliquet. Leo viverra diam vulputate sollicitudin cursus erat sed.
-    </div>
-    <div class="eui-u-mb-m">
-        Erat consectetur sem nulla sed viverra ipsum adipiscing nunc. Porttitor eget sodales integer maecenas tortor quam sit pharetra
-        lorem. Egestas ut mauris urna vitae a mollis. Nam cursus amet sit dolor. Mattis mattis laoreet sed massa proin tristique ullamcorper
-        commodo. Sit in tortor posuere nec lorem fringilla.
-    </div>
-    <div class="eui-u-mb-m">
-        Fringilla elementum quisque vitae pharetra risus pellentesque eu nulla. Enim egestas velit est tempor ut vulputate tellus tincidunt
-        ut. Non enim lorem nec in mattis. Vitae nulla vitae lectus varius aliquet massa lectus morbi. Placerat vel consectetur commodo nibh
-        ullamcorper vitae tellus sed. Nisi lacus quis at malesuada elementum. Turpis et ut egestas adipiscing et ac. Auctor aliquam dictum
-        dolor diam sit tellus tempus. Elementum venenatis arcu id a. Duis imperdiet id elementum tempor facilisis rhoncus rhoncus posuere
-        egestas. Imperdiet odio lorem posuere sit. Molestie amet quisque tellus phasellus nisi. Lobortis mi faucibus elit semper. Ipsum eu
-        adipiscing fringilla at felis maecenas. Egestas tortor odio laoreet neque.
-    </div>
-    <div class="eui-u-mb-m">
-        Sollicitudin rhoncus nunc ultricies lorem massa sagittis integer elit. Consequat mauris elementum sed imperdiet libero odio non
-        amet. Tortor condimentum non convallis posuere pulvinar. Neque malesuada volutpat sit quis. Ac justo gravida vitae mollis. Ut tellus
-        nunc ultrices egestas vitae tellus sed. Pellentesque nunc id quisque scelerisque et pellentesque eu ultricies.
-    </div>
-    <div class="eui-u-mb-m">
-        Dolor rhoncus tempor netus sit mauris. Turpis curabitur amet eu lectus sem habitant magna non. Eros lorem eu lectus proin venenatis
-        tellus. Velit praesent consectetur ligula venenatis magna sed dictum. Quisque vivamus ipsum mattis morbi pulvinar bibendum. Netus
-        risus sit adipiscing augue augue eget est.
-    </div>
-    <div class="eui-u-mb-m">
-        Justo feugiat duis fames in luctus elit. Sit id in turpis quam habitasse amet ut sed sem. Ut luctus amet sit lacinia sed eu sed a
-        senectus. Fusce gravida augue quis bibendum aliquet. Quam egestas quam iaculis urna condimentum amet. Odio aliquam massa vel
-        vestibulum tincidunt dolor tincidunt netus facilisi. Ut sociis metus pellentesque leo amet. Diam lectus pretium id tincidunt
-        habitasse. Eget tortor quisque tristique scelerisque quam vestibulum morbi ornare pellentesque. Nunc eget volutpat id mauris amet ut
-        aliquet nunc dictumst. Elit blandit a suspendisse commodo. Velit quis ut varius leo pharetra risus leo eget.
-    </div>
-    <div class="eui-u-mb-m">
-        Consequat phasellus ullamcorper mauris id tortor ultrices nunc. Lacinia eu sapien rhoncus lacinia sed augue justo molestie ornare.
-        Integer ridiculus gravida pulvinar iaculis nisl eleifend senectus. Imperdiet vitae orci massa ac eget etiam est nulla. Netus nibh
-        ipsum auctor eros nunc aliquam enim. Donec pretium vel amet blandit sed quisque sed. Tempor ipsum nunc leo ultricies ut. Odio tellus
-        ultricies diam cras. Diam maecenas amet gravida nunc. Feugiat egestas eget ullamcorper consequat. Varius faucibus nisl dolor dolor
-        diam ultrices odio iaculis lorem. Egestas tristique est egestas ornare. Tortor eu orci orci posuere blandit amet sit semper
-        pharetra. Sed dictumst dolor phasellus urna nisl auctor sit in vulputate.
-    </div>
-</div>
-<div class="eui-u-font-xs eui-u-color-primary-100">&lt;end of content&gt; &mdash; This last line must always be visible.</div>
-`, dependencies: [{ kind: "directive", type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-  }
-};
-i011.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i011, type: LoremIpsumSampleComponent, decorators: [{
-  type: Component9,
-  args: [{ selector: "eui-showcase-doc-lorem-ipsum", template: `<div *ngIf="textSize === 'small'">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis
-    malesuada. Etiam vulputate quam at consectetur pharetra.
-
-    <div class="eui-u-mb-m">
-        Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque. Aenean
-        consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.
-    </div>
-    <div class="eui-u-mb-m">
-        Sed vitae tellus ac nisl facilisis posuere. Mauris cursus dui nec arcu molestie sodales. Morbi vel enim semper, luctus odio vitae,
-        lacinia nisl. Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium. Nunc venenatis eros a leo tincidunt gravida.
-    </div>
-    <div class="eui-u-mb-m">Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.</div>
-</div>
-
-<div *ngIf="textSize === 'medium'">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis
-    malesuada. Etiam vulputate quam at consectetur pharetra.
-
-    <div class="eui-u-mb-m">
-        Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus. Curabitur venenatis eros at eros ultrices, eu feugiat eros
-        efficitur. Sed quis nulla non augue scelerisque gravida vitae sed neque. Quisque semper dolor non diam sodales suscipit.
-    </div>
-    <div class="eui-u-mb-m">
-        Donec ut tortor scelerisque, sodales neque id, tempor orci. Suspendisse eu augue at nibh egestas eleifend. Ut tristique enim in
-        lectus aliquam, non tincidunt tortor vulputate. Phasellus eu nunc faucibus, porta ante nec, malesuada erat.
-    </div>
-    <div class="eui-u-mb-m">
-        Vestibulum hendrerit risus a libero gravida venenatis. Mauris non enim sit amet odio pellentesque scelerisque in et velit. Quisque
-        efficitur eros ut magna rutrum aliquet. Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui. Nullam commodo mi quis
-        nibh euismod interdum. In rutrum sapien ac viverra pretium.
-    </div>
-    <div class="eui-u-mb-m">
-        Ut eget tellus a magna fermentum tempor at id erat. Nam fringilla eros sed leo facilisis, et mollis orci elementum. Donec
-        consectetur libero sed arcu rhoncus, vel elementum augue mollis. Cras facilisis nisl mollis imperdiet mollis.
-    </div>
-    <div class="eui-u-mb-m">
-        Sed pharetra lorem in justo rhoncus tempor. Phasellus vel elit eget massa consectetur porttitor eu ut ex. Donec sed ex sit amet
-        purus blandit pharetra. Nam rhoncus dolor ac felis condimentum malesuada.
-    </div>
-    <div class="eui-u-mb-m">
-        Pellentesque convallis nulla in lectus molestie mollis. Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.
-        Nulla suscipit ante in sollicitudin semper.
-    </div>
-    <div class="eui-u-mb-m">Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.</div>
-    <div class="eui-u-mb-m">
-        Pellentesque gravida diam quis orci suscipit hendrerit. Vestibulum congue sapien sed pretium gravida. Nullam ornare lectus sed
-        pulvinar fringilla. Nam dictum eros sit amet lectus aliquet tincidunt. Quisque eu augue eget felis tincidunt hendrerit. Aenean vel
-        lorem vel sem consequat congue.
-    </div>
-    <div class="eui-u-mb-m">Phasellus finibus libero at blandit sollicitudin. Praesent pulvinar libero a lorem scelerisque sodales.</div>
-    <div class="eui-u-mb-m">Donec tempor quam eget turpis dignissim egestas. Pellentesque vulputate nisi eu ornare euismod.</div>
-</div>
-
-<div *ngIf="textSize === 'large'">
-    <div class="eui-u-mb-m">
-        Lorem ipsum dolor sit amet consectetur. Nec maecenas turpis eget curabitur. Neque accumsan nulla vestibulum vulputate. Etiam lorem
-        sit leo aliquam. Penatibus suspendisse sit in metus sodales pretium erat tempor. Congue aliquam varius nec pellentesque. Diam
-        tincidunt neque aliquam a natoque egestas nibh in urna. Volutpat enim erat magna sociis blandit odio ut convallis. Montes blandit
-        maecenas pellentesque magna. Ipsum at porta justo massa aliquet vulputate sit. Nec non semper urna morbi nec ut in eu. Tristique
-        morbi nam tempus id.
-    </div>
-    <div class="eui-u-mb-m">
-        Amet eu phasellus dignissim lacus. Pellentesque tristique sed leo eu mattis quam ut sem sed. Id lacus erat urna arcu ac risus
-        sodales. Scelerisque risus auctor erat mattis habitant facilisis. Orci velit nunc fermentum condimentum volutpat. Nec tellus at
-        risus cras. Malesuada ultrices vestibulum arcu sagittis quis purus. Sit ultricies suspendisse ante augue malesuada mattis eget
-        fermentum et. Lobortis et ridiculus turpis elit a mi faucibus. Sit vitae nunc etiam euismod massa nisi nibh arcu nulla. Elit ipsum
-        lorem vestibulum nulla senectus curabitur. Turpis non eu eu rhoncus. Dictum porttitor pulvinar commodo nec sapien est at erat et.
-        Nisl pellentesque pellentesque tempus tristique commodo eget urna tempor. Porta mi accumsan senectus risus eget.
-    </div>
-    <div class="eui-u-mb-m">
-        Velit vulputate amet id tellus. Quam aliquet eros hendrerit cursus id et amet in nam. Eget elementum diam ut magna porttitor. Cursus
-        neque vulputate malesuada congue enim. Ac in sed et justo adipiscing habitasse elit tincidunt dictum. Dui ornare ac ligula duis. Sit
-        mi a eu dictum est magna morbi. Morbi hendrerit non senectus sit platea gravida id. Fermentum vulputate arcu pretium cras elit.
-    </div>
-    <div class="eui-u-mb-m">
-        Enim et nunc eget ac commodo sagittis. Turpis facilisi enim enim nisi eu sed. Amet viverra felis in ac orci ullamcorper. At
-        ridiculus enim nec velit nulla luctus lorem non ultricies. Urna gravida sem curabitur quis diam ut porttitor aliquam sapien. Id
-        adipiscing libero feugiat imperdiet senectus mattis non nulla condimentum.
-    </div>
-    <div class="eui-u-mb-m">
-        Etiam felis parturient et amet. Enim neque eu risus ante tristique nisl nisl vulputate. Arcu turpis semper vitae ultrices sit
-        ultrices. Sed arcu pharetra vel sapien in. Turpis vestibulum tellus quis arcu egestas viverra cursus quisque. Eu volutpat mauris
-        sagittis integer fermentum fringilla penatibus. Velit et quis et arcu velit tortor.
-    </div>
-    <div class="eui-u-mb-m">
-        Nisl fringilla nibh eu nunc pellentesque dignissim vestibulum mus porttitor. Consequat non eu nulla lectus ultrices. Viverra duis
-        enim aliquet ut massa laoreet consequat. Sociis dignissim sodales vitae maecenas nec aliquam. Volutpat feugiat urna id sed. In
-        fringilla dui neque montes ut et lorem velit consequat. Ut fermentum amet dictum proin et. Aenean odio ac quisque ultrices tellus
-        mattis posuere et curabitur. Proin est suspendisse iaculis nullam eros sit amet aliquam laoreet. Libero tincidunt quis et odio
-        imperdiet risus neque. Odio et dui duis odio accumsan. Lacus nibh urna at risus euismod lobortis cursus. Porta risus mi gravida
-        aliquet. Leo viverra diam vulputate sollicitudin cursus erat sed.
-    </div>
-    <div class="eui-u-mb-m">
-        Erat consectetur sem nulla sed viverra ipsum adipiscing nunc. Porttitor eget sodales integer maecenas tortor quam sit pharetra
-        lorem. Egestas ut mauris urna vitae a mollis. Nam cursus amet sit dolor. Mattis mattis laoreet sed massa proin tristique ullamcorper
-        commodo. Sit in tortor posuere nec lorem fringilla.
-    </div>
-    <div class="eui-u-mb-m">
-        Fringilla elementum quisque vitae pharetra risus pellentesque eu nulla. Enim egestas velit est tempor ut vulputate tellus tincidunt
-        ut. Non enim lorem nec in mattis. Vitae nulla vitae lectus varius aliquet massa lectus morbi. Placerat vel consectetur commodo nibh
-        ullamcorper vitae tellus sed. Nisi lacus quis at malesuada elementum. Turpis et ut egestas adipiscing et ac. Auctor aliquam dictum
-        dolor diam sit tellus tempus. Elementum venenatis arcu id a. Duis imperdiet id elementum tempor facilisis rhoncus rhoncus posuere
-        egestas. Imperdiet odio lorem posuere sit. Molestie amet quisque tellus phasellus nisi. Lobortis mi faucibus elit semper. Ipsum eu
-        adipiscing fringilla at felis maecenas. Egestas tortor odio laoreet neque.
-    </div>
-    <div class="eui-u-mb-m">
-        Sollicitudin rhoncus nunc ultricies lorem massa sagittis integer elit. Consequat mauris elementum sed imperdiet libero odio non
-        amet. Tortor condimentum non convallis posuere pulvinar. Neque malesuada volutpat sit quis. Ac justo gravida vitae mollis. Ut tellus
-        nunc ultrices egestas vitae tellus sed. Pellentesque nunc id quisque scelerisque et pellentesque eu ultricies.
-    </div>
-    <div class="eui-u-mb-m">
-        Dolor rhoncus tempor netus sit mauris. Turpis curabitur amet eu lectus sem habitant magna non. Eros lorem eu lectus proin venenatis
-        tellus. Velit praesent consectetur ligula venenatis magna sed dictum. Quisque vivamus ipsum mattis morbi pulvinar bibendum. Netus
-        risus sit adipiscing augue augue eget est.
-    </div>
-    <div class="eui-u-mb-m">
-        Justo feugiat duis fames in luctus elit. Sit id in turpis quam habitasse amet ut sed sem. Ut luctus amet sit lacinia sed eu sed a
-        senectus. Fusce gravida augue quis bibendum aliquet. Quam egestas quam iaculis urna condimentum amet. Odio aliquam massa vel
-        vestibulum tincidunt dolor tincidunt netus facilisi. Ut sociis metus pellentesque leo amet. Diam lectus pretium id tincidunt
-        habitasse. Eget tortor quisque tristique scelerisque quam vestibulum morbi ornare pellentesque. Nunc eget volutpat id mauris amet ut
-        aliquet nunc dictumst. Elit blandit a suspendisse commodo. Velit quis ut varius leo pharetra risus leo eget.
-    </div>
-    <div class="eui-u-mb-m">
-        Consequat phasellus ullamcorper mauris id tortor ultrices nunc. Lacinia eu sapien rhoncus lacinia sed augue justo molestie ornare.
-        Integer ridiculus gravida pulvinar iaculis nisl eleifend senectus. Imperdiet vitae orci massa ac eget etiam est nulla. Netus nibh
-        ipsum auctor eros nunc aliquam enim. Donec pretium vel amet blandit sed quisque sed. Tempor ipsum nunc leo ultricies ut. Odio tellus
-        ultricies diam cras. Diam maecenas amet gravida nunc. Feugiat egestas eget ullamcorper consequat. Varius faucibus nisl dolor dolor
-        diam ultrices odio iaculis lorem. Egestas tristique est egestas ornare. Tortor eu orci orci posuere blandit amet sit semper
-        pharetra. Sed dictumst dolor phasellus urna nisl auctor sit in vulputate.
-    </div>
-</div>
-<div class="eui-u-font-xs eui-u-color-primary-100">&lt;end of content&gt; &mdash; This last line must always be visible.</div>
-` }]
-}], propDecorators: { textSize: [{
-  type: Input8
-}] } });
-
-// lib/components/playground/playground.component.mjs
-import { Component as Component10, ElementRef as ElementRef2, inject as inject2, Input as Input9, ViewChild as ViewChild4 } from "@angular/core";
-import sdk2 from "@stackblitz/sdk";
-import * as i012 from "@angular/core";
-import * as i17 from "@eui/components/eui-block-content";
-var PlaygroundComponent = class _PlaygroundComponent {
-  constructor() {
-    this.title = "eUI Playground";
-    this.activated = false;
-    this.isLoaded = false;
-    this.sb = inject2(StackblitzService);
-  }
-  ngOnChanges(changes) {
-    if (changes.activated) {
-      if (changes.activated.currentValue) {
-        this.initStackblitz();
-      } else {
+    toggleCode() {
+        this.dialog.openDialog();
+    }
+    onClose() {
+        this.dialog.closeDialog();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageCodeModalComponent, deps: [{ token: i3.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocPageCodeModalComponent, selector: "eui-showcase-doc-page-code-modal", inputs: { width: "width" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<button type=\"button\" euiButton euiAccent (click)=\"toggleCode()\">\n    <span euiLabel>Check the code</span>\n    <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n</button>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"width\">\n    <ng-content></ng-content>\n</eui-dialog>\n", dependencies: [{ kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3$2.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "typeClass", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "isClosedOnClickOutside", "hasClosedOnClickOutside", "isClosedOnEscape", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i10.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i11.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageCodeModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-showcase-doc-page-code-modal', template: "<button type=\"button\" euiButton euiAccent (click)=\"toggleCode()\">\n    <span euiLabel>Check the code</span>\n    <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n</button>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"width\">\n    <ng-content></ng-content>\n</eui-dialog>\n" }]
+        }], ctorParameters: () => [{ type: i3.EuiAppShellService }], propDecorators: { width: [{
+                type: Input
+            }], dialog: [{
+                type: ViewChild,
+                args: ['dialog']
+            }] } });
+
+class DocPageCodeFabComponent {
+    constructor(asService) {
+        this.asService = asService;
+        this.codeFolder = '';
+        this.showcase = 'design-patterns';
+    }
+    toggleCode() {
+        this.dialog.openDialog();
+    }
+    onClose() {
+        this.dialog.closeDialog();
+    }
+    onOpenCode() {
+        // eslint-disable-next-line max-len
+        const showcaseRoot = 'https://citnet.tech.ec.europa.eu/CITnet/stash/projects/CSDR/repos/app-eui-showcase-ux-components/browse/src/app/features';
+        const sourceRootPath = `${showcaseRoot}/showcase-${this.showcase}/`;
+        window.open(sourceRootPath + this.codeFolder, '_blank');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageCodeFabComponent, deps: [{ token: i3.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocPageCodeFabComponent, selector: "eui-showcase-doc-page-code-fab", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<div class=\"eui-button-fixed\">\n    <div class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-accent eui--accent\">\n        <eui-icon-svg icon=\"eui-code\" size=\"l\" (click)=\"toggleCode()\"></eui-icon-svg>\n    </div>\n</div>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"'50vw'\">\n    <button type=\"button\" *ngIf=\"codeFolder\" euiButton euiAccent euiSizeS (click)=\"onOpenCode()\">\n        <eui-icon-svg icon=\"eui-code\" set=\"eui\" size=\"m\" fillColor=\"grey-100\" class=\"eui-u-mr-xs\"></eui-icon-svg> VIEW SOURCES\n    </button>\n    <ng-content></ng-content>\n    <p class=\"eui-u-text-paragraph\">Use the <kbd class=\"eui-u-text-kbd\">View sources</kbd> button to access the code source of the page.</p>\n</eui-dialog>\n", dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3$2.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "typeClass", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "isClosedOnClickOutside", "hasClosedOnClickOutside", "isClosedOnEscape", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i10.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPageCodeFabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-showcase-doc-page-code-fab', template: "<div class=\"eui-button-fixed\">\n    <div class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-accent eui--accent\">\n        <eui-icon-svg icon=\"eui-code\" size=\"l\" (click)=\"toggleCode()\"></eui-icon-svg>\n    </div>\n</div>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"'50vw'\">\n    <button type=\"button\" *ngIf=\"codeFolder\" euiButton euiAccent euiSizeS (click)=\"onOpenCode()\">\n        <eui-icon-svg icon=\"eui-code\" set=\"eui\" size=\"m\" fillColor=\"grey-100\" class=\"eui-u-mr-xs\"></eui-icon-svg> VIEW SOURCES\n    </button>\n    <ng-content></ng-content>\n    <p class=\"eui-u-text-paragraph\">Use the <kbd class=\"eui-u-text-kbd\">View sources</kbd> button to access the code source of the page.</p>\n</eui-dialog>\n" }]
+        }], ctorParameters: () => [{ type: i3.EuiAppShellService }], propDecorators: { codeFolder: [{
+                type: Input
+            }], showcase: [{
+                type: Input
+            }], dialog: [{
+                type: ViewChild,
+                args: ['dialog']
+            }] } });
+
+class LoremIpsumSampleComponent {
+    constructor() {
+        this.textSize = 'large';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: LoremIpsumSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: LoremIpsumSampleComponent, selector: "eui-showcase-doc-lorem-ipsum", inputs: { textSize: "textSize" }, ngImport: i0, template: "<div *ngIf=\"textSize === 'small'\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n    malesuada. Etiam vulputate quam at consectetur pharetra.\n\n    <div class=\"eui-u-mb-m\">\n        Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque. Aenean\n        consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Sed vitae tellus ac nisl facilisis posuere. Mauris cursus dui nec arcu molestie sodales. Morbi vel enim semper, luctus odio vitae,\n        lacinia nisl. Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium. Nunc venenatis eros a leo tincidunt gravida.\n    </div>\n    <div class=\"eui-u-mb-m\">Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.</div>\n</div>\n\n<div *ngIf=\"textSize === 'medium'\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n    malesuada. Etiam vulputate quam at consectetur pharetra.\n\n    <div class=\"eui-u-mb-m\">\n        Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus. Curabitur venenatis eros at eros ultrices, eu feugiat eros\n        efficitur. Sed quis nulla non augue scelerisque gravida vitae sed neque. Quisque semper dolor non diam sodales suscipit.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Donec ut tortor scelerisque, sodales neque id, tempor orci. Suspendisse eu augue at nibh egestas eleifend. Ut tristique enim in\n        lectus aliquam, non tincidunt tortor vulputate. Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Vestibulum hendrerit risus a libero gravida venenatis. Mauris non enim sit amet odio pellentesque scelerisque in et velit. Quisque\n        efficitur eros ut magna rutrum aliquet. Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui. Nullam commodo mi quis\n        nibh euismod interdum. In rutrum sapien ac viverra pretium.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Ut eget tellus a magna fermentum tempor at id erat. Nam fringilla eros sed leo facilisis, et mollis orci elementum. Donec\n        consectetur libero sed arcu rhoncus, vel elementum augue mollis. Cras facilisis nisl mollis imperdiet mollis.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Sed pharetra lorem in justo rhoncus tempor. Phasellus vel elit eget massa consectetur porttitor eu ut ex. Donec sed ex sit amet\n        purus blandit pharetra. Nam rhoncus dolor ac felis condimentum malesuada.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Pellentesque convallis nulla in lectus molestie mollis. Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n        Nulla suscipit ante in sollicitudin semper.\n    </div>\n    <div class=\"eui-u-mb-m\">Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.</div>\n    <div class=\"eui-u-mb-m\">\n        Pellentesque gravida diam quis orci suscipit hendrerit. Vestibulum congue sapien sed pretium gravida. Nullam ornare lectus sed\n        pulvinar fringilla. Nam dictum eros sit amet lectus aliquet tincidunt. Quisque eu augue eget felis tincidunt hendrerit. Aenean vel\n        lorem vel sem consequat congue.\n    </div>\n    <div class=\"eui-u-mb-m\">Phasellus finibus libero at blandit sollicitudin. Praesent pulvinar libero a lorem scelerisque sodales.</div>\n    <div class=\"eui-u-mb-m\">Donec tempor quam eget turpis dignissim egestas. Pellentesque vulputate nisi eu ornare euismod.</div>\n</div>\n\n<div *ngIf=\"textSize === 'large'\">\n    <div class=\"eui-u-mb-m\">\n        Lorem ipsum dolor sit amet consectetur. Nec maecenas turpis eget curabitur. Neque accumsan nulla vestibulum vulputate. Etiam lorem\n        sit leo aliquam. Penatibus suspendisse sit in metus sodales pretium erat tempor. Congue aliquam varius nec pellentesque. Diam\n        tincidunt neque aliquam a natoque egestas nibh in urna. Volutpat enim erat magna sociis blandit odio ut convallis. Montes blandit\n        maecenas pellentesque magna. Ipsum at porta justo massa aliquet vulputate sit. Nec non semper urna morbi nec ut in eu. Tristique\n        morbi nam tempus id.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Amet eu phasellus dignissim lacus. Pellentesque tristique sed leo eu mattis quam ut sem sed. Id lacus erat urna arcu ac risus\n        sodales. Scelerisque risus auctor erat mattis habitant facilisis. Orci velit nunc fermentum condimentum volutpat. Nec tellus at\n        risus cras. Malesuada ultrices vestibulum arcu sagittis quis purus. Sit ultricies suspendisse ante augue malesuada mattis eget\n        fermentum et. Lobortis et ridiculus turpis elit a mi faucibus. Sit vitae nunc etiam euismod massa nisi nibh arcu nulla. Elit ipsum\n        lorem vestibulum nulla senectus curabitur. Turpis non eu eu rhoncus. Dictum porttitor pulvinar commodo nec sapien est at erat et.\n        Nisl pellentesque pellentesque tempus tristique commodo eget urna tempor. Porta mi accumsan senectus risus eget.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Velit vulputate amet id tellus. Quam aliquet eros hendrerit cursus id et amet in nam. Eget elementum diam ut magna porttitor. Cursus\n        neque vulputate malesuada congue enim. Ac in sed et justo adipiscing habitasse elit tincidunt dictum. Dui ornare ac ligula duis. Sit\n        mi a eu dictum est magna morbi. Morbi hendrerit non senectus sit platea gravida id. Fermentum vulputate arcu pretium cras elit.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Enim et nunc eget ac commodo sagittis. Turpis facilisi enim enim nisi eu sed. Amet viverra felis in ac orci ullamcorper. At\n        ridiculus enim nec velit nulla luctus lorem non ultricies. Urna gravida sem curabitur quis diam ut porttitor aliquam sapien. Id\n        adipiscing libero feugiat imperdiet senectus mattis non nulla condimentum.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Etiam felis parturient et amet. Enim neque eu risus ante tristique nisl nisl vulputate. Arcu turpis semper vitae ultrices sit\n        ultrices. Sed arcu pharetra vel sapien in. Turpis vestibulum tellus quis arcu egestas viverra cursus quisque. Eu volutpat mauris\n        sagittis integer fermentum fringilla penatibus. Velit et quis et arcu velit tortor.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Nisl fringilla nibh eu nunc pellentesque dignissim vestibulum mus porttitor. Consequat non eu nulla lectus ultrices. Viverra duis\n        enim aliquet ut massa laoreet consequat. Sociis dignissim sodales vitae maecenas nec aliquam. Volutpat feugiat urna id sed. In\n        fringilla dui neque montes ut et lorem velit consequat. Ut fermentum amet dictum proin et. Aenean odio ac quisque ultrices tellus\n        mattis posuere et curabitur. Proin est suspendisse iaculis nullam eros sit amet aliquam laoreet. Libero tincidunt quis et odio\n        imperdiet risus neque. Odio et dui duis odio accumsan. Lacus nibh urna at risus euismod lobortis cursus. Porta risus mi gravida\n        aliquet. Leo viverra diam vulputate sollicitudin cursus erat sed.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Erat consectetur sem nulla sed viverra ipsum adipiscing nunc. Porttitor eget sodales integer maecenas tortor quam sit pharetra\n        lorem. Egestas ut mauris urna vitae a mollis. Nam cursus amet sit dolor. Mattis mattis laoreet sed massa proin tristique ullamcorper\n        commodo. Sit in tortor posuere nec lorem fringilla.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Fringilla elementum quisque vitae pharetra risus pellentesque eu nulla. Enim egestas velit est tempor ut vulputate tellus tincidunt\n        ut. Non enim lorem nec in mattis. Vitae nulla vitae lectus varius aliquet massa lectus morbi. Placerat vel consectetur commodo nibh\n        ullamcorper vitae tellus sed. Nisi lacus quis at malesuada elementum. Turpis et ut egestas adipiscing et ac. Auctor aliquam dictum\n        dolor diam sit tellus tempus. Elementum venenatis arcu id a. Duis imperdiet id elementum tempor facilisis rhoncus rhoncus posuere\n        egestas. Imperdiet odio lorem posuere sit. Molestie amet quisque tellus phasellus nisi. Lobortis mi faucibus elit semper. Ipsum eu\n        adipiscing fringilla at felis maecenas. Egestas tortor odio laoreet neque.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Sollicitudin rhoncus nunc ultricies lorem massa sagittis integer elit. Consequat mauris elementum sed imperdiet libero odio non\n        amet. Tortor condimentum non convallis posuere pulvinar. Neque malesuada volutpat sit quis. Ac justo gravida vitae mollis. Ut tellus\n        nunc ultrices egestas vitae tellus sed. Pellentesque nunc id quisque scelerisque et pellentesque eu ultricies.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Dolor rhoncus tempor netus sit mauris. Turpis curabitur amet eu lectus sem habitant magna non. Eros lorem eu lectus proin venenatis\n        tellus. Velit praesent consectetur ligula venenatis magna sed dictum. Quisque vivamus ipsum mattis morbi pulvinar bibendum. Netus\n        risus sit adipiscing augue augue eget est.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Justo feugiat duis fames in luctus elit. Sit id in turpis quam habitasse amet ut sed sem. Ut luctus amet sit lacinia sed eu sed a\n        senectus. Fusce gravida augue quis bibendum aliquet. Quam egestas quam iaculis urna condimentum amet. Odio aliquam massa vel\n        vestibulum tincidunt dolor tincidunt netus facilisi. Ut sociis metus pellentesque leo amet. Diam lectus pretium id tincidunt\n        habitasse. Eget tortor quisque tristique scelerisque quam vestibulum morbi ornare pellentesque. Nunc eget volutpat id mauris amet ut\n        aliquet nunc dictumst. Elit blandit a suspendisse commodo. Velit quis ut varius leo pharetra risus leo eget.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Consequat phasellus ullamcorper mauris id tortor ultrices nunc. Lacinia eu sapien rhoncus lacinia sed augue justo molestie ornare.\n        Integer ridiculus gravida pulvinar iaculis nisl eleifend senectus. Imperdiet vitae orci massa ac eget etiam est nulla. Netus nibh\n        ipsum auctor eros nunc aliquam enim. Donec pretium vel amet blandit sed quisque sed. Tempor ipsum nunc leo ultricies ut. Odio tellus\n        ultricies diam cras. Diam maecenas amet gravida nunc. Feugiat egestas eget ullamcorper consequat. Varius faucibus nisl dolor dolor\n        diam ultrices odio iaculis lorem. Egestas tristique est egestas ornare. Tortor eu orci orci posuere blandit amet sit semper\n        pharetra. Sed dictumst dolor phasellus urna nisl auctor sit in vulputate.\n    </div>\n</div>\n<div class=\"eui-u-font-xs eui-u-color-primary-100\">&lt;end of content&gt; &mdash; This last line must always be visible.</div>\n", dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: LoremIpsumSampleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-showcase-doc-lorem-ipsum', template: "<div *ngIf=\"textSize === 'small'\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n    malesuada. Etiam vulputate quam at consectetur pharetra.\n\n    <div class=\"eui-u-mb-m\">\n        Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque. Aenean\n        consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Sed vitae tellus ac nisl facilisis posuere. Mauris cursus dui nec arcu molestie sodales. Morbi vel enim semper, luctus odio vitae,\n        lacinia nisl. Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium. Nunc venenatis eros a leo tincidunt gravida.\n    </div>\n    <div class=\"eui-u-mb-m\">Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.</div>\n</div>\n\n<div *ngIf=\"textSize === 'medium'\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n    malesuada. Etiam vulputate quam at consectetur pharetra.\n\n    <div class=\"eui-u-mb-m\">\n        Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus. Curabitur venenatis eros at eros ultrices, eu feugiat eros\n        efficitur. Sed quis nulla non augue scelerisque gravida vitae sed neque. Quisque semper dolor non diam sodales suscipit.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Donec ut tortor scelerisque, sodales neque id, tempor orci. Suspendisse eu augue at nibh egestas eleifend. Ut tristique enim in\n        lectus aliquam, non tincidunt tortor vulputate. Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Vestibulum hendrerit risus a libero gravida venenatis. Mauris non enim sit amet odio pellentesque scelerisque in et velit. Quisque\n        efficitur eros ut magna rutrum aliquet. Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui. Nullam commodo mi quis\n        nibh euismod interdum. In rutrum sapien ac viverra pretium.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Ut eget tellus a magna fermentum tempor at id erat. Nam fringilla eros sed leo facilisis, et mollis orci elementum. Donec\n        consectetur libero sed arcu rhoncus, vel elementum augue mollis. Cras facilisis nisl mollis imperdiet mollis.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Sed pharetra lorem in justo rhoncus tempor. Phasellus vel elit eget massa consectetur porttitor eu ut ex. Donec sed ex sit amet\n        purus blandit pharetra. Nam rhoncus dolor ac felis condimentum malesuada.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Pellentesque convallis nulla in lectus molestie mollis. Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n        Nulla suscipit ante in sollicitudin semper.\n    </div>\n    <div class=\"eui-u-mb-m\">Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.</div>\n    <div class=\"eui-u-mb-m\">\n        Pellentesque gravida diam quis orci suscipit hendrerit. Vestibulum congue sapien sed pretium gravida. Nullam ornare lectus sed\n        pulvinar fringilla. Nam dictum eros sit amet lectus aliquet tincidunt. Quisque eu augue eget felis tincidunt hendrerit. Aenean vel\n        lorem vel sem consequat congue.\n    </div>\n    <div class=\"eui-u-mb-m\">Phasellus finibus libero at blandit sollicitudin. Praesent pulvinar libero a lorem scelerisque sodales.</div>\n    <div class=\"eui-u-mb-m\">Donec tempor quam eget turpis dignissim egestas. Pellentesque vulputate nisi eu ornare euismod.</div>\n</div>\n\n<div *ngIf=\"textSize === 'large'\">\n    <div class=\"eui-u-mb-m\">\n        Lorem ipsum dolor sit amet consectetur. Nec maecenas turpis eget curabitur. Neque accumsan nulla vestibulum vulputate. Etiam lorem\n        sit leo aliquam. Penatibus suspendisse sit in metus sodales pretium erat tempor. Congue aliquam varius nec pellentesque. Diam\n        tincidunt neque aliquam a natoque egestas nibh in urna. Volutpat enim erat magna sociis blandit odio ut convallis. Montes blandit\n        maecenas pellentesque magna. Ipsum at porta justo massa aliquet vulputate sit. Nec non semper urna morbi nec ut in eu. Tristique\n        morbi nam tempus id.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Amet eu phasellus dignissim lacus. Pellentesque tristique sed leo eu mattis quam ut sem sed. Id lacus erat urna arcu ac risus\n        sodales. Scelerisque risus auctor erat mattis habitant facilisis. Orci velit nunc fermentum condimentum volutpat. Nec tellus at\n        risus cras. Malesuada ultrices vestibulum arcu sagittis quis purus. Sit ultricies suspendisse ante augue malesuada mattis eget\n        fermentum et. Lobortis et ridiculus turpis elit a mi faucibus. Sit vitae nunc etiam euismod massa nisi nibh arcu nulla. Elit ipsum\n        lorem vestibulum nulla senectus curabitur. Turpis non eu eu rhoncus. Dictum porttitor pulvinar commodo nec sapien est at erat et.\n        Nisl pellentesque pellentesque tempus tristique commodo eget urna tempor. Porta mi accumsan senectus risus eget.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Velit vulputate amet id tellus. Quam aliquet eros hendrerit cursus id et amet in nam. Eget elementum diam ut magna porttitor. Cursus\n        neque vulputate malesuada congue enim. Ac in sed et justo adipiscing habitasse elit tincidunt dictum. Dui ornare ac ligula duis. Sit\n        mi a eu dictum est magna morbi. Morbi hendrerit non senectus sit platea gravida id. Fermentum vulputate arcu pretium cras elit.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Enim et nunc eget ac commodo sagittis. Turpis facilisi enim enim nisi eu sed. Amet viverra felis in ac orci ullamcorper. At\n        ridiculus enim nec velit nulla luctus lorem non ultricies. Urna gravida sem curabitur quis diam ut porttitor aliquam sapien. Id\n        adipiscing libero feugiat imperdiet senectus mattis non nulla condimentum.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Etiam felis parturient et amet. Enim neque eu risus ante tristique nisl nisl vulputate. Arcu turpis semper vitae ultrices sit\n        ultrices. Sed arcu pharetra vel sapien in. Turpis vestibulum tellus quis arcu egestas viverra cursus quisque. Eu volutpat mauris\n        sagittis integer fermentum fringilla penatibus. Velit et quis et arcu velit tortor.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Nisl fringilla nibh eu nunc pellentesque dignissim vestibulum mus porttitor. Consequat non eu nulla lectus ultrices. Viverra duis\n        enim aliquet ut massa laoreet consequat. Sociis dignissim sodales vitae maecenas nec aliquam. Volutpat feugiat urna id sed. In\n        fringilla dui neque montes ut et lorem velit consequat. Ut fermentum amet dictum proin et. Aenean odio ac quisque ultrices tellus\n        mattis posuere et curabitur. Proin est suspendisse iaculis nullam eros sit amet aliquam laoreet. Libero tincidunt quis et odio\n        imperdiet risus neque. Odio et dui duis odio accumsan. Lacus nibh urna at risus euismod lobortis cursus. Porta risus mi gravida\n        aliquet. Leo viverra diam vulputate sollicitudin cursus erat sed.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Erat consectetur sem nulla sed viverra ipsum adipiscing nunc. Porttitor eget sodales integer maecenas tortor quam sit pharetra\n        lorem. Egestas ut mauris urna vitae a mollis. Nam cursus amet sit dolor. Mattis mattis laoreet sed massa proin tristique ullamcorper\n        commodo. Sit in tortor posuere nec lorem fringilla.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Fringilla elementum quisque vitae pharetra risus pellentesque eu nulla. Enim egestas velit est tempor ut vulputate tellus tincidunt\n        ut. Non enim lorem nec in mattis. Vitae nulla vitae lectus varius aliquet massa lectus morbi. Placerat vel consectetur commodo nibh\n        ullamcorper vitae tellus sed. Nisi lacus quis at malesuada elementum. Turpis et ut egestas adipiscing et ac. Auctor aliquam dictum\n        dolor diam sit tellus tempus. Elementum venenatis arcu id a. Duis imperdiet id elementum tempor facilisis rhoncus rhoncus posuere\n        egestas. Imperdiet odio lorem posuere sit. Molestie amet quisque tellus phasellus nisi. Lobortis mi faucibus elit semper. Ipsum eu\n        adipiscing fringilla at felis maecenas. Egestas tortor odio laoreet neque.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Sollicitudin rhoncus nunc ultricies lorem massa sagittis integer elit. Consequat mauris elementum sed imperdiet libero odio non\n        amet. Tortor condimentum non convallis posuere pulvinar. Neque malesuada volutpat sit quis. Ac justo gravida vitae mollis. Ut tellus\n        nunc ultrices egestas vitae tellus sed. Pellentesque nunc id quisque scelerisque et pellentesque eu ultricies.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Dolor rhoncus tempor netus sit mauris. Turpis curabitur amet eu lectus sem habitant magna non. Eros lorem eu lectus proin venenatis\n        tellus. Velit praesent consectetur ligula venenatis magna sed dictum. Quisque vivamus ipsum mattis morbi pulvinar bibendum. Netus\n        risus sit adipiscing augue augue eget est.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Justo feugiat duis fames in luctus elit. Sit id in turpis quam habitasse amet ut sed sem. Ut luctus amet sit lacinia sed eu sed a\n        senectus. Fusce gravida augue quis bibendum aliquet. Quam egestas quam iaculis urna condimentum amet. Odio aliquam massa vel\n        vestibulum tincidunt dolor tincidunt netus facilisi. Ut sociis metus pellentesque leo amet. Diam lectus pretium id tincidunt\n        habitasse. Eget tortor quisque tristique scelerisque quam vestibulum morbi ornare pellentesque. Nunc eget volutpat id mauris amet ut\n        aliquet nunc dictumst. Elit blandit a suspendisse commodo. Velit quis ut varius leo pharetra risus leo eget.\n    </div>\n    <div class=\"eui-u-mb-m\">\n        Consequat phasellus ullamcorper mauris id tortor ultrices nunc. Lacinia eu sapien rhoncus lacinia sed augue justo molestie ornare.\n        Integer ridiculus gravida pulvinar iaculis nisl eleifend senectus. Imperdiet vitae orci massa ac eget etiam est nulla. Netus nibh\n        ipsum auctor eros nunc aliquam enim. Donec pretium vel amet blandit sed quisque sed. Tempor ipsum nunc leo ultricies ut. Odio tellus\n        ultricies diam cras. Diam maecenas amet gravida nunc. Feugiat egestas eget ullamcorper consequat. Varius faucibus nisl dolor dolor\n        diam ultrices odio iaculis lorem. Egestas tristique est egestas ornare. Tortor eu orci orci posuere blandit amet sit semper\n        pharetra. Sed dictumst dolor phasellus urna nisl auctor sit in vulputate.\n    </div>\n</div>\n<div class=\"eui-u-font-xs eui-u-color-primary-100\">&lt;end of content&gt; &mdash; This last line must always be visible.</div>\n" }]
+        }], propDecorators: { textSize: [{
+                type: Input
+            }] } });
+
+class PlaygroundComponent {
+    constructor() {
+        this.title = 'eUI Playground';
+        this.activated = false;
         this.isLoaded = false;
-      }
+        this.sb = inject(StackblitzService);
     }
-  }
-  initStackblitz() {
-    this.sb.getStackblitzDependencies().then((deps) => {
-      const { dependencies, devDependencies } = deps;
-      const { selector } = this.sb.extractComponentMetadata(this.typescriptContent);
-      const moduleName = this.sb.extractModuleName(this.typescriptContent);
-      const componentName = this.sb.extractComponentName(this.typescriptContent);
-      const project = {
-        title: this.title,
-        description: `An eUI example for the ${this.title}.`,
-        template: "angular-cli",
-        files: {
-          "src/component.html": this.htmlContent,
-          "src/component.ts": this.sb.appendVitalNgModules(this.typescriptContent),
-          "src/main.ts": mainFile(moduleName, componentName),
-          "src/polyfills.ts": polyfillsFile,
-          "src/index.html": indexHtmlFile(selector),
-          "angular.json": angularJsonFile,
-          "package.json": JSON.stringify({
-            ...PACKAGE_JSON,
-            dependencies,
-            devDependencies
-          }, null, 2),
-          "tsconfig.json": tsConfig
-        },
-        settings: {
-          compile: {
-            trigger: "auto",
-            clearConsole: true
-          }
-        },
-        dependencies
-      };
-      return sdk2.embedProject(`stackblitz-${this.sampleId}`, project, {
-        height: 500,
-        openFile: ["src/component.ts", "src/component.html"]
-      });
-    }).then((instance) => {
-      this.stackblitzInstance = instance;
-      this.isLoaded = true;
-    });
-  }
-  static {
-    this.ɵfac = i012.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i012, type: _PlaygroundComponent, deps: [], target: i012.ɵɵFactoryTarget.Component });
-  }
-  static {
-    this.ɵcmp = i012.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _PlaygroundComponent, selector: "eui-playground", inputs: { title: "title", htmlContent: "htmlContent", sampleId: "sampleId", typescriptContent: "typescriptContent", activated: "activated", modules: "modules" }, viewQueries: [{ propertyName: "stackblitzElWrapper", first: true, predicate: ["container"], descendants: true, read: ElementRef2, static: true }], usesOnChanges: true, ngImport: i012, template: '<eui-block-content [isBlocked]="!isLoaded">\n    <iframe #container id="stackblitz-{{sampleId}}"></iframe>\n</eui-block-content>\n', dependencies: [{ kind: "component", type: i17.EuiBlockContentComponent, selector: "eui-block-content", inputs: ["role", "ariaLabel", "isBlocked"] }] });
-  }
-};
-i012.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i012, type: PlaygroundComponent, decorators: [{
-  type: Component10,
-  args: [{ selector: "eui-playground", template: '<eui-block-content [isBlocked]="!isLoaded">\n    <iframe #container id="stackblitz-{{sampleId}}"></iframe>\n</eui-block-content>\n' }]
-}], propDecorators: { title: [{
-  type: Input9
-}], htmlContent: [{
-  type: Input9
-}], sampleId: [{
-  type: Input9
-}], typescriptContent: [{
-  type: Input9
-}], activated: [{
-  type: Input9
-}], modules: [{
-  type: Input9
-}], stackblitzElWrapper: [{
-  type: ViewChild4,
-  args: ["container", { read: ElementRef2, static: true }]
-}] } });
-
-// lib/components/doc-page-pattern/doc-page-pattern.component.mjs
-import { Component as Component11, HostBinding as HostBinding3, ViewEncapsulation as ViewEncapsulation7, Input as Input10, Directive as Directive4, ContentChild as ContentChild2, forwardRef as forwardRef5, HostListener, inject as inject3 } from "@angular/core";
-import { DomSanitizer as DomSanitizer2 } from "@angular/platform-browser";
-import * as i013 from "@angular/core";
-import * as i18 from "@angular/common";
-import * as i27 from "@eui/components/eui-card";
-import * as i37 from "@eui/components/eui-button";
-import * as i46 from "@eui/components/eui-tabs";
-import * as i55 from "@eui/components/eui-chip";
-import * as i63 from "@eui/components/eui-badge";
-import * as i73 from "@eui/components/eui-icon";
-import * as i83 from "@eui/components/eui-label";
-var DocPagePatternSampleDirective = class _DocPagePatternSampleDirective {
-  static {
-    this.ɵfac = i013.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i013, type: _DocPagePatternSampleDirective, deps: [], target: i013.ɵɵFactoryTarget.Directive });
-  }
-  static {
-    this.ɵdir = i013.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocPagePatternSampleDirective, selector: "docPagePatternSample", ngImport: i013 });
-  }
-};
-i013.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i013, type: DocPagePatternSampleDirective, decorators: [{
-  type: Directive4,
-  args: [{ selector: "docPagePatternSample" }]
-}] });
-var DocPagePatternDocDirective = class _DocPagePatternDocDirective {
-  static {
-    this.ɵfac = i013.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i013, type: _DocPagePatternDocDirective, deps: [], target: i013.ɵɵFactoryTarget.Directive });
-  }
-  static {
-    this.ɵdir = i013.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocPagePatternDocDirective, selector: "docPagePatternDoc", ngImport: i013 });
-  }
-};
-i013.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i013, type: DocPagePatternDocDirective, decorators: [{
-  type: Directive4,
-  args: [{ selector: "docPagePatternDoc" }]
-}] });
-var DocPagePatternComponent = class _DocPagePatternComponent {
-  constructor() {
-    this.docEntries = [];
-    this.dos = [];
-    this.donts = [];
-    this.topPosToStartShowing = 100;
-    this.tabSelectedIndex = 0;
-    this.sanitizer = inject3(DomSanitizer2);
-  }
-  get cssClasses() {
-    return ["doc-page-pattern"].join(" ").trim();
-  }
-  checkScroll() {
-    const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
-    if (scrollPosition >= this.topPosToStartShowing) {
-      this.isShowGoTop = true;
-    } else {
-      this.isShowGoTop = false;
+    ngOnChanges(changes) {
+        if (changes.activated) {
+            if (changes.activated.currentValue) {
+                this.initStackblitz();
+            }
+            else {
+                this.isLoaded = false;
+            }
+        }
     }
-  }
-  ngOnInit() {
-    if (this.figmaEmbedSrc) {
-      this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.figmaEmbedSrc);
-      const iFrame = document.getElementById("iframe-figma");
+    initStackblitz() {
+        this.sb.getStackblitzDependencies()
+            .then((deps) => {
+            const { dependencies, devDependencies } = deps;
+            const { selector } = this.sb.extractComponentMetadata(this.typescriptContent);
+            const moduleName = this.sb.extractModuleName(this.typescriptContent);
+            const componentName = this.sb.extractComponentName(this.typescriptContent);
+            const project = {
+                title: this.title,
+                description: `An eUI example for the ${this.title}.`,
+                template: 'angular-cli',
+                files: {
+                    'src/component.html': this.htmlContent,
+                    'src/component.ts': this.sb.appendVitalNgModules(this.typescriptContent),
+                    'src/main.ts': mainFile(moduleName, componentName),
+                    'src/polyfills.ts': polyfillsFile,
+                    'src/index.html': indexHtmlFile(selector),
+                    'angular.json': angularJsonFile,
+                    'package.json': JSON.stringify({
+                        ...PACKAGE_JSON,
+                        dependencies,
+                        devDependencies,
+                    }, null, 2),
+                    'tsconfig.json': tsConfig,
+                },
+                settings: {
+                    compile: {
+                        trigger: 'auto',
+                        clearConsole: true,
+                    },
+                },
+                dependencies,
+            };
+            return sdk.embedProject(`stackblitz-${this.sampleId}`, project, {
+                height: 500,
+                openFile: ['src/component.ts', 'src/component.html'],
+            });
+        })
+            .then((instance) => {
+            this.stackblitzInstance = instance;
+            this.isLoaded = true;
+        });
     }
-  }
-  onNavigateToCode(event) {
-    const showcase = "ux-patterns";
-    const sourceRootPath = `https://citnet.tech.ec.europa.eu/CITnet/stash/projects/CSDR/repos/app-eui-showcase-${showcase}/browse/src/app/features/`;
-    window.open(sourceRootPath + this.sourceUrl, "_blank");
-  }
-  onTabSelect(event) {
-    this.tabSelectedIndex = event.index;
-  }
-  gotoTop() {
-    window.scroll({
-      top: 0,
-      left: 0,
-      behavior: "smooth"
-    });
-  }
-  static {
-    this.ɵfac = i013.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i013, type: _DocPagePatternComponent, deps: [], target: i013.ɵɵFactoryTarget.Component });
-  }
-  static {
-    this.ɵcmp = i013.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: _DocPagePatternComponent, selector: "eui-showcase-doc-page-pattern", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", docEntries: "docEntries", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl", figmaEmbedSrc: "figmaEmbedSrc" }, host: { listeners: { "window:scroll": "checkScroll()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "sampleContent", first: true, predicate: i013.forwardRef(() => DocPagePatternSampleDirective), descendants: true }, { propertyName: "docContent", first: true, predicate: i013.forwardRef(() => DocPagePatternDocDirective), descendants: true }], ngImport: i013, template: `<eui-tabs (tabSelect)="onTabSelect($event)">
-    <eui-tab>
-        <euiTabLabel>Usage and documentation</euiTabLabel>
-        <euiTabContent>
-            <h2 class="eui-u-color-primary-100 eui-u-mb-none eui-u-text-h2">{{ label }}</h2>
-
-            <h3 class="eui-u-text-h3">Information</h3>
-            <ng-content select="docPagePatternDoc"></ng-content>
-
-            <ng-container *ngIf="figmaEmbedSrc; else screenshot">
-                <h3 class="eui-u-mt-2xl eui-u-text-h3">Figma design anatomy</h3>
-                <iframe id="iframe-figma" style="border: 1px solid rgba(0, 0, 0, 0.1)" width="100%" height="650" [src]="urlSafe"></iframe>
-            </ng-container>
-            <ng-template #screenshot>
-                <ng-container *ngIf="figmaUrl !== 'PENDING_DS'">
-                    <h3 class="eui-u-mt-2xl eui-u-text-h3">Anatomy</h3>
-                    <img
-                        src="assets/images/design-system/{{ anatomyImage }}"
-                        alt="Design anatomy image"
-                        width="90%"
-                        class="eui-u-sh-6 eui-u-mb-m" />
-                </ng-container>
-            </ng-template>
-
-            <ng-container *ngIf="docEntries.length !== 0">
-                <h3 class="eui-u-mt-2xl eui-u-text-h3">Design system references</h3>
-
-                <eui-card *ngFor="let ref of docEntries" class="eui-u-mb-m" [euiWarning]="ref.mandatory" [euiInfo]="!ref.mandatory">
-                    <eui-card-header>
-                        <eui-card-header-title>
-                            <div class="eui-u-flex">
-                                <eui-badge *ngIf="ref?.id" euiSizeXL class="eui-u-mr-s">{{ ref.id }}</eui-badge>
-                                <span class="eui-u-font-l">{{ ref.name }}</span>
-                            </div>
-                        </eui-card-header-title>
-                        <eui-card-header-right-content>
-                            <eui-chip [euiWarning]="ref.mandatory" [euiInfo]="!ref.mandatory" class="eui-u-ml-m">
-                                <span *ngIf="ref.mandatory" euiLabel><strong> Mandatory </strong></span>
-                                <span *ngIf="!ref.mandatory" euiLabel><strong> Optional </strong></span>
-                            </eui-chip>
-                        </eui-card-header-right-content>
-                    </eui-card-header>
-                    <eui-card-content>
-                        <h6 class="section-title eui-u-mt-none"><strong>Description</strong></h6>
-                        <div class="html" [innerHTML]="ref.description"></div>
-
-                        <ng-container *ngIf="ref.whenToUse">
-                            <h6 class="section-title eui-u-mt-xl"><strong>When to use ?</strong></h6>
-                            <div class="html" [innerHTML]="ref.whenToUse"></div>
-                        </ng-container>
-                        <ng-container *ngIf="ref.whenNotToUse">
-                            <h6 class="section-title eui-u-mt-xl"><strong>When to not use ?</strong></h6>
-                            <div class="html" [innerHTML]="ref.whenNotToUse"></div>
-                        </ng-container>
-                        <div class="row">
-                            <div class="col-md-6">
-                                <ng-container *ngIf="ref.dos && ref.dos.length !== 0">
-                                    <h6 class="section-title eui-u-mt-xl">
-                                        <eui-icon-svg
-                                            icon="thumbs-up"
-                                            set="sharp"
-                                            size="m"
-                                            fillColor="success-100"
-                                            class="eui-u-mr-m"></eui-icon-svg>
-                                        <strong>Do's</strong>
-                                    </h6>
-                                    <li *ngFor="let do of ref.dos">{{ do }}</li>
-                                </ng-container>
-                            </div>
-                            <div class="col-md-6">
-                                <ng-container *ngIf="ref.donts && ref.donts.length !== 0">
-                                    <h6 class="section-title eui-u-mt-xl">
-                                        <eui-icon-svg
-                                            icon="hand-right"
-                                            set="sharp"
-                                            size="m"
-                                            fillColor="danger-100"
-                                            class="eui-u-mr-m"></eui-icon-svg>
-                                        <strong>Dont's</strong>
-                                    </h6>
-                                    <li *ngFor="let dont of ref.donts">{{ dont }}</li>
-                                </ng-container>
-                            </div>
-                        </div>
-                    </eui-card-content>
-                </eui-card>
-            </ng-container>
-
-            <!-- <ng-container *ngIf="dos.length !== 0">
-                <h3 class="eui-u-mt-2xl eui-u-color-success-100 eui-u-text-h3">Do's</h3>
-                <table class="eui-table-default">
-                    <tr *ngFor="let ref of dos">
-                        <td>{{ref.description}}</td>
-                    </tr>
-                </table>
-            </ng-container>
-
-            <ng-container *ngIf="donts.length !== 0">
-                <h3 class="eui-u-mt-2xl eui-u-color-danger-100 eui-u-text-h3">Dont's</h3>
-                <table class="eui-table-default">
-                    <tr *ngFor="let ref of donts">
-                        <td>{{ref.description}}</td>
-                    </tr>
-                </table>
-            </ng-container> -->
-
-            <h3 class="eui-u-mt-2xl eui-u-text-h3">Figma resource</h3>
-            <ng-container *ngIf="figmaUrl === 'PENDING_DS'; else figmaOK">
-                Pending Design system publication. Will be available in a future release.
-            </ng-container>
-            <ng-template #figmaOK>
-                <eui-card>
-                    <eui-card-header>
-                        <eui-card-header-left-content>
-                            <img
-                                width="32"
-                                height="32"
-                                alt="Figma Logo"
-                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABL1BMVEX/////cmLyTh6iWf8Kz4MavP7yTBr5YUWeUP8AzX3UuP//bVwAt/6jV///rKTyRgr2TwCxX+kA032m6Mf3m4uabPb/aVf/8O8AzHmbSf/xPAD/a1rxQgDyShaaR/8Avv74pJP/urP/6Ob/ZVLQ7//839n5tqj/xL7/b1f/9O/59f/r3v+65/9jzP6yef/p+P+u4//Mqv/iz//cxf/I7P/fvf+U2v71/fqO5LzW9ed74LIp043/y8b4rJz0dln/i3/zXTX2jnf/19P/emv0bEv/p5//l4zzWCz2h270dVf4g2D2Whzt5v+6hfuzbfCuWOjE2+6nz+6BxO5lu+5o1v9Nx/7BlP930v63rf+UoP90lP7n1v/Prv/iwf/Onf+hefiWZPZi36O07dLf9+2A4bX7S8Q6AAAGG0lEQVR4nO2aeVcaZxSHZ6JYhsHYFjsig3UhaHG3RkHBxMRE2zR2M5SuaUW//2cow4CgwMz7uzl65x3v8/+cM8+5y7tdwxAEQRAEQRAEQRAEQRAEQRAEQRCEiFJcOVqYDuDt0wAWV2pFboFAikcv8rl8fiqA/LE9Gtd1Hcd5ubjELTKC5eNcfu5JCBOfmWHYrnOyWOK2GWQhn58I01Mz9HDdp9xCd6g9UfJTNmw5mjVuqX5e5dT8AEPTLJxya92wdJZX9IMMTduMSMsphvcXmqFpOq+55TxeK2cobmgWIqBYhARRQ7PAvgOYmYIEYUPTmWE2PAZqkGRon/AKTqt3UaKh6b7lFCzmQEGCIW8pvgFzlGRov+QTrMEhpBhyrop4CEmGfEHEq5BmaBa4dm+vph7I0OZqp3PYYk83NE0eQUqSEg0dngXjCF3t6YbuIovhO7yTUg1tnsPwGaEMqXXIszmllCHVsMAhOPOghhxnKFIrpRo6HGu+GOpvuBT7OizFvpcalC0N1ZBnY0o4HZL3NDwnxGnC4YlqyHN8Wnm4nbfD8w5FajVEQ6YHU0oh0s74XBc1y4Q0JRkyJWkLxXffT48hlyClm1IMGd/0S3iakm6E2QQpVzUEQ4fnkqbDGdpOCYa8z2vwEQo3ZLvw7nAEKuJvwKw56vEdVoqoocP6PurzPaQIGrqRmBqCFMF5mkgIthIVqEXIsBCBFPVZzikvGoCh7axwi/VYOlbdoqobOicRmWrrsKw2Xqps6NoRCqBPaSGvMsGnZGg7NvsqOJTai1xuam4iMJahhrbr2KcRmNcbQam28O6HzwM584bVB/nGxzRPF9ln9YJ5v7tz/uMXo/lprzRzl1Jp5udffr24uKjXP3zYfsatEMDq3mZyNpmcHAsgmRr4bGu/nkgnuqTTifr2FsPfh7N2PhssN9xwvd6z61luRC+Sa5uz4XqDhuvzg36+ZD1icfxNze+O4daQ+PUcG2w2g6yNJdX8bhuuB/h5ionIpGpKNYC3DRvBgp7jNqNVHztfK/v1G26ECrYU9znFuuzMAoI9QxXBaCimkAj2DMNTNCqJ+i0UwRvDfUXBliJzu1lVbqK3DJ8pC7bgNdxU76L9hoBfIrHBKbgL5mjHUD1H23n6nNFwEg1h23ALEkwk5vkEU2gV+oYNTJCzn47BIfQM0RAyBhFdKTqG+6ggXyWe4yH0DOdhwwTTMQNeC31DaC3swmNISdKx5B6epGxp+pEUw706wTDBswGH9zNtwxShDLn2NQS/luHvJEOe9QI7NnUN/yAZpjkE31MazdjknzRDjpu3+BuuPaghxzk4/jGMv6FBMtSplz6C9TD+e5qd2O9L/3rAswXTpWnsz4fxP+M/gnua+N+1Ue9LN9AQMr4/4UGk3Hlzvs3gldh+t1B9POyEkPPdwjinva5BEWR9e3oE74fwxka7N2DyO77aoEIU3vEfwSyGYfx9j/M0EYigx+69zUStM1rd4p7m2uajNJ4Y99lE4xHMlxrejHDIAPQwQ41mhD1WU/6cdxDD57zT6XTPLrJz3j5r/3w8//er0fy3O+yrref7jbrHRiPSs/qGUW5WLr8MJsP9j59C89JqMR6Ipa9huRJqp7dhRkVPY8OrqpqftoYZVT9dDS+zyoJ6Gl6qR1BPQ0hQR8NDSFBDwwpQg1oaHoCC+hlWQUHtDCtYEepnWIYFdTO8jrshIYSaGQLbUU0N4UaqmyElSfUybMbeENyRamhIKUO9DCkh1MqwjG66tTO8ir0hfHASw8gR/ywlGja5/xuAZnjA/dsAtBX/ivu3AbCL0q4h918j4Jc0LcFL7r9GoCwXVoX7ryFwwfGsTo2GdHyqcv8zBp6mOq33bfAb7zL3L4M00WeZQ+4/hgGDqF0I0UrUbKnwge71NWukHZTHTDTbkva4UjbM6nRu6ke1FLM6FqGP2pKhsaBaFLUWbNXieFgxaluDXcrBc19WVc8ueovm6DBammfoDZXhA6ZW9lC/rdoIyplq9o6kZVmHMUjQPg4qVStrdclWD3VvMEM5aGYq19fXleZBbLJTEARBEARBEARBEARBEARBEARBEHz+B91xJIzYVK0AAAAAAElFTkSuQmCC" />
-                        </eui-card-header-left-content>
-                        <eui-card-header-title>
-                            <a
-                                class="h5 eui-u-text-link-external"
-                                href="https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}"
-                                target="blank">
-                                <span class="eui-u-color-grey-75">Layout component /</span>
-                                {{ label }}
-                            </a>
-                        </eui-card-header-title>
-                    </eui-card-header>
-                </eui-card>
-            </ng-template>
-        </euiTabContent>
-    </eui-tab>
-    <eui-tab>
-        <euiTabLabel>Pattern sample</euiTabLabel>
-        <euiTabContent>
-            <ng-content select="docPagePatternSample"></ng-content>
-        </euiTabContent>
-    </eui-tab>
-
-    <euiTabsRightContent>
-        <button type="button" euiButton euiAccent euiSizeS (click)="onNavigateToCode($event)">
-            <span class="eui-icon eui-icon-code"></span>
-            View sources
-        </button>
-    </euiTabsRightContent>
-</eui-tabs>
-
-<button
-    type="button"
-    *ngIf="isShowGoTop && tabSelectedIndex === 0"
-    euiButton
-    euiIconButton
-    euiOutline
-    euiRounded
-    euiSizeL
-    class="eui-button-fixed eui-u-sh-8"
-    (click)="gotoTop()"
-    title="Goto Top"
-    aria-label="Goto Top">
-    <!-- 👆 -->
-    <eui-icon-svg icon="eui-arrow-up" set="eui" size="l" fillColor="grey-50"></eui-icon-svg>
-</button>
-`, styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern .eui-tabs .eui-tab-item--active,.doc-page-pattern .eui-tabs .eui-tab-item:focus{background-color:var(--eui-c-white)}.doc-page-pattern .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-m)}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}\n"], dependencies: [{ kind: "directive", type: i18.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i18.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i27.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i27.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i27.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i27.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i27.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content" }, { kind: "component", type: i27.EuiCardHeaderRightContentComponent, selector: "eui-card-header-right-content" }, { kind: "component", type: i37.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i46.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i46.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "directive", type: i46.EuiTabsRightContentTagDirective, selector: "euiTabsRightContent" }, { kind: "component", type: i46.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i46.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i55.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i63.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement"] }, { kind: "component", type: i73.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i83.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }], encapsulation: i013.ViewEncapsulation.None });
-  }
-};
-i013.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i013, type: DocPagePatternComponent, decorators: [{
-  type: Component11,
-  args: [{ selector: "eui-showcase-doc-page-pattern", encapsulation: ViewEncapsulation7.None, template: `<eui-tabs (tabSelect)="onTabSelect($event)">
-    <eui-tab>
-        <euiTabLabel>Usage and documentation</euiTabLabel>
-        <euiTabContent>
-            <h2 class="eui-u-color-primary-100 eui-u-mb-none eui-u-text-h2">{{ label }}</h2>
-
-            <h3 class="eui-u-text-h3">Information</h3>
-            <ng-content select="docPagePatternDoc"></ng-content>
-
-            <ng-container *ngIf="figmaEmbedSrc; else screenshot">
-                <h3 class="eui-u-mt-2xl eui-u-text-h3">Figma design anatomy</h3>
-                <iframe id="iframe-figma" style="border: 1px solid rgba(0, 0, 0, 0.1)" width="100%" height="650" [src]="urlSafe"></iframe>
-            </ng-container>
-            <ng-template #screenshot>
-                <ng-container *ngIf="figmaUrl !== 'PENDING_DS'">
-                    <h3 class="eui-u-mt-2xl eui-u-text-h3">Anatomy</h3>
-                    <img
-                        src="assets/images/design-system/{{ anatomyImage }}"
-                        alt="Design anatomy image"
-                        width="90%"
-                        class="eui-u-sh-6 eui-u-mb-m" />
-                </ng-container>
-            </ng-template>
-
-            <ng-container *ngIf="docEntries.length !== 0">
-                <h3 class="eui-u-mt-2xl eui-u-text-h3">Design system references</h3>
-
-                <eui-card *ngFor="let ref of docEntries" class="eui-u-mb-m" [euiWarning]="ref.mandatory" [euiInfo]="!ref.mandatory">
-                    <eui-card-header>
-                        <eui-card-header-title>
-                            <div class="eui-u-flex">
-                                <eui-badge *ngIf="ref?.id" euiSizeXL class="eui-u-mr-s">{{ ref.id }}</eui-badge>
-                                <span class="eui-u-font-l">{{ ref.name }}</span>
-                            </div>
-                        </eui-card-header-title>
-                        <eui-card-header-right-content>
-                            <eui-chip [euiWarning]="ref.mandatory" [euiInfo]="!ref.mandatory" class="eui-u-ml-m">
-                                <span *ngIf="ref.mandatory" euiLabel><strong> Mandatory </strong></span>
-                                <span *ngIf="!ref.mandatory" euiLabel><strong> Optional </strong></span>
-                            </eui-chip>
-                        </eui-card-header-right-content>
-                    </eui-card-header>
-                    <eui-card-content>
-                        <h6 class="section-title eui-u-mt-none"><strong>Description</strong></h6>
-                        <div class="html" [innerHTML]="ref.description"></div>
-
-                        <ng-container *ngIf="ref.whenToUse">
-                            <h6 class="section-title eui-u-mt-xl"><strong>When to use ?</strong></h6>
-                            <div class="html" [innerHTML]="ref.whenToUse"></div>
-                        </ng-container>
-                        <ng-container *ngIf="ref.whenNotToUse">
-                            <h6 class="section-title eui-u-mt-xl"><strong>When to not use ?</strong></h6>
-                            <div class="html" [innerHTML]="ref.whenNotToUse"></div>
-                        </ng-container>
-                        <div class="row">
-                            <div class="col-md-6">
-                                <ng-container *ngIf="ref.dos && ref.dos.length !== 0">
-                                    <h6 class="section-title eui-u-mt-xl">
-                                        <eui-icon-svg
-                                            icon="thumbs-up"
-                                            set="sharp"
-                                            size="m"
-                                            fillColor="success-100"
-                                            class="eui-u-mr-m"></eui-icon-svg>
-                                        <strong>Do's</strong>
-                                    </h6>
-                                    <li *ngFor="let do of ref.dos">{{ do }}</li>
-                                </ng-container>
-                            </div>
-                            <div class="col-md-6">
-                                <ng-container *ngIf="ref.donts && ref.donts.length !== 0">
-                                    <h6 class="section-title eui-u-mt-xl">
-                                        <eui-icon-svg
-                                            icon="hand-right"
-                                            set="sharp"
-                                            size="m"
-                                            fillColor="danger-100"
-                                            class="eui-u-mr-m"></eui-icon-svg>
-                                        <strong>Dont's</strong>
-                                    </h6>
-                                    <li *ngFor="let dont of ref.donts">{{ dont }}</li>
-                                </ng-container>
-                            </div>
-                        </div>
-                    </eui-card-content>
-                </eui-card>
-            </ng-container>
-
-            <!-- <ng-container *ngIf="dos.length !== 0">
-                <h3 class="eui-u-mt-2xl eui-u-color-success-100 eui-u-text-h3">Do's</h3>
-                <table class="eui-table-default">
-                    <tr *ngFor="let ref of dos">
-                        <td>{{ref.description}}</td>
-                    </tr>
-                </table>
-            </ng-container>
-
-            <ng-container *ngIf="donts.length !== 0">
-                <h3 class="eui-u-mt-2xl eui-u-color-danger-100 eui-u-text-h3">Dont's</h3>
-                <table class="eui-table-default">
-                    <tr *ngFor="let ref of donts">
-                        <td>{{ref.description}}</td>
-                    </tr>
-                </table>
-            </ng-container> -->
-
-            <h3 class="eui-u-mt-2xl eui-u-text-h3">Figma resource</h3>
-            <ng-container *ngIf="figmaUrl === 'PENDING_DS'; else figmaOK">
-                Pending Design system publication. Will be available in a future release.
-            </ng-container>
-            <ng-template #figmaOK>
-                <eui-card>
-                    <eui-card-header>
-                        <eui-card-header-left-content>
-                            <img
-                                width="32"
-                                height="32"
-                                alt="Figma Logo"
-                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABL1BMVEX/////cmLyTh6iWf8Kz4MavP7yTBr5YUWeUP8AzX3UuP//bVwAt/6jV///rKTyRgr2TwCxX+kA032m6Mf3m4uabPb/aVf/8O8AzHmbSf/xPAD/a1rxQgDyShaaR/8Avv74pJP/urP/6Ob/ZVLQ7//839n5tqj/xL7/b1f/9O/59f/r3v+65/9jzP6yef/p+P+u4//Mqv/iz//cxf/I7P/fvf+U2v71/fqO5LzW9ed74LIp043/y8b4rJz0dln/i3/zXTX2jnf/19P/emv0bEv/p5//l4zzWCz2h270dVf4g2D2Whzt5v+6hfuzbfCuWOjE2+6nz+6BxO5lu+5o1v9Nx/7BlP930v63rf+UoP90lP7n1v/Prv/iwf/Onf+hefiWZPZi36O07dLf9+2A4bX7S8Q6AAAGG0lEQVR4nO2aeVcaZxSHZ6JYhsHYFjsig3UhaHG3RkHBxMRE2zR2M5SuaUW//2cow4CgwMz7uzl65x3v8/+cM8+5y7tdwxAEQRAEQRAEQRAEQRAEQRAEQRCEiFJcOVqYDuDt0wAWV2pFboFAikcv8rl8fiqA/LE9Gtd1Hcd5ubjELTKC5eNcfu5JCBOfmWHYrnOyWOK2GWQhn58I01Mz9HDdp9xCd6g9UfJTNmw5mjVuqX5e5dT8AEPTLJxya92wdJZX9IMMTduMSMsphvcXmqFpOq+55TxeK2cobmgWIqBYhARRQ7PAvgOYmYIEYUPTmWE2PAZqkGRon/AKTqt3UaKh6b7lFCzmQEGCIW8pvgFzlGRov+QTrMEhpBhyrop4CEmGfEHEq5BmaBa4dm+vph7I0OZqp3PYYk83NE0eQUqSEg0dngXjCF3t6YbuIovhO7yTUg1tnsPwGaEMqXXIszmllCHVsMAhOPOghhxnKFIrpRo6HGu+GOpvuBT7OizFvpcalC0N1ZBnY0o4HZL3NDwnxGnC4YlqyHN8Wnm4nbfD8w5FajVEQ6YHU0oh0s74XBc1y4Q0JRkyJWkLxXffT48hlyClm1IMGd/0S3iakm6E2QQpVzUEQ4fnkqbDGdpOCYa8z2vwEQo3ZLvw7nAEKuJvwKw56vEdVoqoocP6PurzPaQIGrqRmBqCFMF5mkgIthIVqEXIsBCBFPVZzikvGoCh7axwi/VYOlbdoqobOicRmWrrsKw2Xqps6NoRCqBPaSGvMsGnZGg7NvsqOJTai1xuam4iMJahhrbr2KcRmNcbQam28O6HzwM584bVB/nGxzRPF9ln9YJ5v7tz/uMXo/lprzRzl1Jp5udffr24uKjXP3zYfsatEMDq3mZyNpmcHAsgmRr4bGu/nkgnuqTTifr2FsPfh7N2PhssN9xwvd6z61luRC+Sa5uz4XqDhuvzg36+ZD1icfxNze+O4daQ+PUcG2w2g6yNJdX8bhuuB/h5ionIpGpKNYC3DRvBgp7jNqNVHztfK/v1G26ECrYU9znFuuzMAoI9QxXBaCimkAj2DMNTNCqJ+i0UwRvDfUXBliJzu1lVbqK3DJ8pC7bgNdxU76L9hoBfIrHBKbgL5mjHUD1H23n6nNFwEg1h23ALEkwk5vkEU2gV+oYNTJCzn47BIfQM0RAyBhFdKTqG+6ggXyWe4yH0DOdhwwTTMQNeC31DaC3swmNISdKx5B6epGxp+pEUw706wTDBswGH9zNtwxShDLn2NQS/luHvJEOe9QI7NnUN/yAZpjkE31MazdjknzRDjpu3+BuuPaghxzk4/jGMv6FBMtSplz6C9TD+e5qd2O9L/3rAswXTpWnsz4fxP+M/gnua+N+1Ue9LN9AQMr4/4UGk3Hlzvs3gldh+t1B9POyEkPPdwjinva5BEWR9e3oE74fwxka7N2DyO77aoEIU3vEfwSyGYfx9j/M0EYigx+69zUStM1rd4p7m2uajNJ4Y99lE4xHMlxrejHDIAPQwQ41mhD1WU/6cdxDD57zT6XTPLrJz3j5r/3w8//er0fy3O+yrref7jbrHRiPSs/qGUW5WLr8MJsP9j59C89JqMR6Ipa9huRJqp7dhRkVPY8OrqpqftoYZVT9dDS+zyoJ6Gl6qR1BPQ0hQR8NDSFBDwwpQg1oaHoCC+hlWQUHtDCtYEepnWIYFdTO8jrshIYSaGQLbUU0N4UaqmyElSfUybMbeENyRamhIKUO9DCkh1MqwjG66tTO8ir0hfHASw8gR/ywlGja5/xuAZnjA/dsAtBX/ivu3AbCL0q4h918j4Jc0LcFL7r9GoCwXVoX7ryFwwfGsTo2GdHyqcv8zBp6mOq33bfAb7zL3L4M00WeZQ+4/hgGDqF0I0UrUbKnwge71NWukHZTHTDTbkva4UjbM6nRu6ke1FLM6FqGP2pKhsaBaFLUWbNXieFgxaluDXcrBc19WVc8ueovm6DBammfoDZXhA6ZW9lC/rdoIyplq9o6kZVmHMUjQPg4qVStrdclWD3VvMEM5aGYq19fXleZBbLJTEARBEARBEARBEARBEARBEARBEHz+B91xJIzYVK0AAAAAAElFTkSuQmCC" />
-                        </eui-card-header-left-content>
-                        <eui-card-header-title>
-                            <a
-                                class="h5 eui-u-text-link-external"
-                                href="https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}"
-                                target="blank">
-                                <span class="eui-u-color-grey-75">Layout component /</span>
-                                {{ label }}
-                            </a>
-                        </eui-card-header-title>
-                    </eui-card-header>
-                </eui-card>
-            </ng-template>
-        </euiTabContent>
-    </eui-tab>
-    <eui-tab>
-        <euiTabLabel>Pattern sample</euiTabLabel>
-        <euiTabContent>
-            <ng-content select="docPagePatternSample"></ng-content>
-        </euiTabContent>
-    </eui-tab>
-
-    <euiTabsRightContent>
-        <button type="button" euiButton euiAccent euiSizeS (click)="onNavigateToCode($event)">
-            <span class="eui-icon eui-icon-code"></span>
-            View sources
-        </button>
-    </euiTabsRightContent>
-</eui-tabs>
-
-<button
-    type="button"
-    *ngIf="isShowGoTop && tabSelectedIndex === 0"
-    euiButton
-    euiIconButton
-    euiOutline
-    euiRounded
-    euiSizeL
-    class="eui-button-fixed eui-u-sh-8"
-    (click)="gotoTop()"
-    title="Goto Top"
-    aria-label="Goto Top">
-    <!-- 👆 -->
-    <eui-icon-svg icon="eui-arrow-up" set="eui" size="l" fillColor="grey-50"></eui-icon-svg>
-</button>
-`, styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern .eui-tabs .eui-tab-item--active,.doc-page-pattern .eui-tabs .eui-tab-item:focus{background-color:var(--eui-c-white)}.doc-page-pattern .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-m)}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}\n"] }]
-}], propDecorators: { cssClasses: [{
-  type: HostBinding3,
-  args: ["class"]
-}], sampleContent: [{
-  type: ContentChild2,
-  args: [forwardRef5(() => DocPagePatternSampleDirective)]
-}], docContent: [{
-  type: ContentChild2,
-  args: [forwardRef5(() => DocPagePatternDocDirective)]
-}], id: [{
-  type: Input10
-}], label: [{
-  type: Input10
-}], anatomyImage: [{
-  type: Input10
-}], docEntries: [{
-  type: Input10
-}], dos: [{
-  type: Input10
-}], donts: [{
-  type: Input10
-}], sourceUrl: [{
-  type: Input10
-}], figmaUrl: [{
-  type: Input10
-}], figmaEmbedSrc: [{
-  type: Input10
-}], checkScroll: [{
-  type: HostListener,
-  args: ["window:scroll"]
-}] } });
-
-// lib/eui-showcase.module.mjs
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { EuiCardModule } from "@eui/components/eui-card";
-import { EuiButtonModule } from "@eui/components/eui-button";
-import { EuiTabsModule } from "@eui/components/eui-tabs";
-import { EuiPageModule } from "@eui/components/eui-page";
-import { EuiChipModule } from "@eui/components/eui-chip";
-import { EuiDialogModule } from "@eui/components/eui-dialog";
-import { EuiAlertModule } from "@eui/components/eui-alert";
-import { EuiBlockContentModule } from "@eui/components/eui-block-content";
-import { EuiBadgeModule } from "@eui/components/eui-badge";
-import { EuiIconModule } from "@eui/components/eui-icon";
-import { EuiLabelModule } from "@eui/components/eui-label";
-import * as i014 from "@angular/core";
-var COMPONENTS = [
-  EuiCodeHighlighterDirective,
-  DocPageComponent,
-  DocPageCodeComponent,
-  DocPageCodeFabComponent,
-  DocPageCodeModalComponent,
-  DocPageOverviewContentDirective,
-  DocPageOverviewDefaultContentDirective,
-  DocPageApiContentDirective,
-  DocPageInteractiveContentDirective,
-  DocPageSamplesContentDirective,
-  DocPageSectionsContentDirective,
-  DocPageAccessibilityContentDirective,
-  DocPageThemingContentDirective,
-  DocSampleComponent,
-  DocSampleApiComponent,
-  DocSectionComponent,
-  DocSectionCodeComponent,
-  DocSectionCodeHtmlTagDirective,
-  DocSectionCodeTsTagDirective,
-  DocSectionCodeServiceTagDirective,
-  DocSectionCodeCssTagDirective,
-  DocSectionCodeDocTagDirective,
-  DocSectionCodeDescriptionTagDirective,
-  LoremIpsumSampleComponent,
-  PlaygroundComponent,
-  DocPagePatternComponent,
-  DocPagePatternDocDirective,
-  DocPagePatternSampleDirective
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: PlaygroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: PlaygroundComponent, selector: "eui-playground", inputs: { title: "title", htmlContent: "htmlContent", sampleId: "sampleId", typescriptContent: "typescriptContent", activated: "activated", modules: "modules" }, viewQueries: [{ propertyName: "stackblitzElWrapper", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n    <iframe #container id=\"stackblitz-{{sampleId}}\"></iframe>\n</eui-block-content>\n", dependencies: [{ kind: "component", type: i1$1.EuiBlockContentComponent, selector: "eui-block-content", inputs: ["role", "ariaLabel", "isBlocked"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: PlaygroundComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-playground', template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n    <iframe #container id=\"stackblitz-{{sampleId}}\"></iframe>\n</eui-block-content>\n" }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], htmlContent: [{
+                type: Input
+            }], sampleId: [{
+                type: Input
+            }], typescriptContent: [{
+                type: Input
+            }], activated: [{
+                type: Input
+            }], modules: [{
+                type: Input
+            }], stackblitzElWrapper: [{
+                type: ViewChild,
+                args: ['container', { read: ElementRef, static: true }]
+            }] } });
+
+/* eslint-disable max-len */
+/* eslint-disable */
+class DocPagePatternSampleDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPagePatternSampleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocPagePatternSampleDirective, selector: "docPagePatternSample", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPagePatternSampleDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'docPagePatternSample' }]
+        }] });
+class DocPagePatternDocDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPagePatternDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocPagePatternDocDirective, selector: "docPagePatternDoc", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPagePatternDocDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'docPagePatternDoc' }]
+        }] });
+class DocPagePatternComponent {
+    constructor() {
+        this.docEntries = [];
+        this.dos = [];
+        this.donts = [];
+        this.topPosToStartShowing = 100;
+        this.tabSelectedIndex = 0;
+        this.sanitizer = inject(DomSanitizer);
+    }
+    get cssClasses() {
+        return ['doc-page-pattern'].join(' ').trim();
+    }
+    checkScroll() {
+        const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+        if (scrollPosition >= this.topPosToStartShowing) {
+            this.isShowGoTop = true;
+        }
+        else {
+            this.isShowGoTop = false;
+        }
+    }
+    ngOnInit() {
+        if (this.figmaEmbedSrc) {
+            this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.figmaEmbedSrc);
+            const iFrame = document.getElementById('iframe-figma');
+        }
+    }
+    onNavigateToCode(event) {
+        // eslint-disable-next-line max-len
+        const showcase = 'ux-patterns';
+        const sourceRootPath = `https://citnet.tech.ec.europa.eu/CITnet/stash/projects/CSDR/repos/app-eui-showcase-${showcase}/browse/src/app/features/`;
+        window.open(sourceRootPath + this.sourceUrl, '_blank');
+    }
+    onTabSelect(event) {
+        this.tabSelectedIndex = event.index;
+    }
+    gotoTop() {
+        window.scroll({
+            top: 0,
+            left: 0,
+            behavior: 'smooth',
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPagePatternComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.3", type: DocPagePatternComponent, selector: "eui-showcase-doc-page-pattern", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", docEntries: "docEntries", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl", figmaEmbedSrc: "figmaEmbedSrc" }, host: { listeners: { "window:scroll": "checkScroll()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "sampleContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSampleDirective), descendants: true }, { propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternDocDirective), descendants: true }], ngImport: i0, template: "<eui-tabs (tabSelect)=\"onTabSelect($event)\">\n    <eui-tab>\n        <euiTabLabel>Usage and documentation</euiTabLabel>\n        <euiTabContent>\n            <h2 class=\"eui-u-color-primary-100 eui-u-mb-none eui-u-text-h2\">{{ label }}</h2>\n\n            <h3 class=\"eui-u-text-h3\">Information</h3>\n            <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n            <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n                <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Figma design anatomy</h3>\n                <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n            </ng-container>\n            <ng-template #screenshot>\n                <ng-container *ngIf=\"figmaUrl !== 'PENDING_DS'\">\n                    <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Anatomy</h3>\n                    <img\n                        src=\"assets/images/design-system/{{ anatomyImage }}\"\n                        alt=\"Design anatomy image\"\n                        width=\"90%\"\n                        class=\"eui-u-sh-6 eui-u-mb-m\" />\n                </ng-container>\n            </ng-template>\n\n            <ng-container *ngIf=\"docEntries.length !== 0\">\n                <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Design system references</h3>\n\n                <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n                    <eui-card-header>\n                        <eui-card-header-title>\n                            <div class=\"eui-u-flex\">\n                                <eui-badge *ngIf=\"ref?.id\" euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n                                <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n                            </div>\n                        </eui-card-header-title>\n                        <eui-card-header-right-content>\n                            <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n                                <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n                                <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\n                            </eui-chip>\n                        </eui-card-header-right-content>\n                    </eui-card-header>\n                    <eui-card-content>\n                        <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n                        <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n\n                        <ng-container *ngIf=\"ref.whenToUse\">\n                            <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n                            <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n                        </ng-container>\n                        <ng-container *ngIf=\"ref.whenNotToUse\">\n                            <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n                            <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n                        </ng-container>\n                        <div class=\"row\">\n                            <div class=\"col-md-6\">\n                                <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n                                    <h6 class=\"section-title eui-u-mt-xl\">\n                                        <eui-icon-svg\n                                            icon=\"thumbs-up\"\n                                            set=\"sharp\"\n                                            size=\"m\"\n                                            fillColor=\"success-100\"\n                                            class=\"eui-u-mr-m\"></eui-icon-svg>\n                                        <strong>Do's</strong>\n                                    </h6>\n                                    <li *ngFor=\"let do of ref.dos\">{{ do }}</li>\n                                </ng-container>\n                            </div>\n                            <div class=\"col-md-6\">\n                                <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n                                    <h6 class=\"section-title eui-u-mt-xl\">\n                                        <eui-icon-svg\n                                            icon=\"hand-right\"\n                                            set=\"sharp\"\n                                            size=\"m\"\n                                            fillColor=\"danger-100\"\n                                            class=\"eui-u-mr-m\"></eui-icon-svg>\n                                        <strong>Dont's</strong>\n                                    </h6>\n                                    <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </eui-card-content>\n                </eui-card>\n            </ng-container>\n\n            <!-- <ng-container *ngIf=\"dos.length !== 0\">\n                <h3 class=\"eui-u-mt-2xl eui-u-color-success-100 eui-u-text-h3\">Do's</h3>\n                <table class=\"eui-table-default\">\n                    <tr *ngFor=\"let ref of dos\">\n                        <td>{{ref.description}}</td>\n                    </tr>\n                </table>\n            </ng-container>\n\n            <ng-container *ngIf=\"donts.length !== 0\">\n                <h3 class=\"eui-u-mt-2xl eui-u-color-danger-100 eui-u-text-h3\">Dont's</h3>\n                <table class=\"eui-table-default\">\n                    <tr *ngFor=\"let ref of donts\">\n                        <td>{{ref.description}}</td>\n                    </tr>\n                </table>\n            </ng-container> -->\n\n            <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Figma resource</h3>\n            <ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n                Pending Design system publication. Will be available in a future release.\n            </ng-container>\n            <ng-template #figmaOK>\n                <eui-card>\n                    <eui-card-header>\n                        <eui-card-header-left-content>\n                            <img\n                                width=\"32\"\n                                height=\"32\"\n                                alt=\"Figma Logo\"\n                                src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABL1BMVEX/////cmLyTh6iWf8Kz4MavP7yTBr5YUWeUP8AzX3UuP//bVwAt/6jV///rKTyRgr2TwCxX+kA032m6Mf3m4uabPb/aVf/8O8AzHmbSf/xPAD/a1rxQgDyShaaR/8Avv74pJP/urP/6Ob/ZVLQ7//839n5tqj/xL7/b1f/9O/59f/r3v+65/9jzP6yef/p+P+u4//Mqv/iz//cxf/I7P/fvf+U2v71/fqO5LzW9ed74LIp043/y8b4rJz0dln/i3/zXTX2jnf/19P/emv0bEv/p5//l4zzWCz2h270dVf4g2D2Whzt5v+6hfuzbfCuWOjE2+6nz+6BxO5lu+5o1v9Nx/7BlP930v63rf+UoP90lP7n1v/Prv/iwf/Onf+hefiWZPZi36O07dLf9+2A4bX7S8Q6AAAGG0lEQVR4nO2aeVcaZxSHZ6JYhsHYFjsig3UhaHG3RkHBxMRE2zR2M5SuaUW//2cow4CgwMz7uzl65x3v8/+cM8+5y7tdwxAEQRAEQRAEQRAEQRAEQRAEQRCEiFJcOVqYDuDt0wAWV2pFboFAikcv8rl8fiqA/LE9Gtd1Hcd5ubjELTKC5eNcfu5JCBOfmWHYrnOyWOK2GWQhn58I01Mz9HDdp9xCd6g9UfJTNmw5mjVuqX5e5dT8AEPTLJxya92wdJZX9IMMTduMSMsphvcXmqFpOq+55TxeK2cobmgWIqBYhARRQ7PAvgOYmYIEYUPTmWE2PAZqkGRon/AKTqt3UaKh6b7lFCzmQEGCIW8pvgFzlGRov+QTrMEhpBhyrop4CEmGfEHEq5BmaBa4dm+vph7I0OZqp3PYYk83NE0eQUqSEg0dngXjCF3t6YbuIovhO7yTUg1tnsPwGaEMqXXIszmllCHVsMAhOPOghhxnKFIrpRo6HGu+GOpvuBT7OizFvpcalC0N1ZBnY0o4HZL3NDwnxGnC4YlqyHN8Wnm4nbfD8w5FajVEQ6YHU0oh0s74XBc1y4Q0JRkyJWkLxXffT48hlyClm1IMGd/0S3iakm6E2QQpVzUEQ4fnkqbDGdpOCYa8z2vwEQo3ZLvw7nAEKuJvwKw56vEdVoqoocP6PurzPaQIGrqRmBqCFMF5mkgIthIVqEXIsBCBFPVZzikvGoCh7axwi/VYOlbdoqobOicRmWrrsKw2Xqps6NoRCqBPaSGvMsGnZGg7NvsqOJTai1xuam4iMJahhrbr2KcRmNcbQam28O6HzwM584bVB/nGxzRPF9ln9YJ5v7tz/uMXo/lprzRzl1Jp5udffr24uKjXP3zYfsatEMDq3mZyNpmcHAsgmRr4bGu/nkgnuqTTifr2FsPfh7N2PhssN9xwvd6z61luRC+Sa5uz4XqDhuvzg36+ZD1icfxNze+O4daQ+PUcG2w2g6yNJdX8bhuuB/h5ionIpGpKNYC3DRvBgp7jNqNVHztfK/v1G26ECrYU9znFuuzMAoI9QxXBaCimkAj2DMNTNCqJ+i0UwRvDfUXBliJzu1lVbqK3DJ8pC7bgNdxU76L9hoBfIrHBKbgL5mjHUD1H23n6nNFwEg1h23ALEkwk5vkEU2gV+oYNTJCzn47BIfQM0RAyBhFdKTqG+6ggXyWe4yH0DOdhwwTTMQNeC31DaC3swmNISdKx5B6epGxp+pEUw706wTDBswGH9zNtwxShDLn2NQS/luHvJEOe9QI7NnUN/yAZpjkE31MazdjknzRDjpu3+BuuPaghxzk4/jGMv6FBMtSplz6C9TD+e5qd2O9L/3rAswXTpWnsz4fxP+M/gnua+N+1Ue9LN9AQMr4/4UGk3Hlzvs3gldh+t1B9POyEkPPdwjinva5BEWR9e3oE74fwxka7N2DyO77aoEIU3vEfwSyGYfx9j/M0EYigx+69zUStM1rd4p7m2uajNJ4Y99lE4xHMlxrejHDIAPQwQ41mhD1WU/6cdxDD57zT6XTPLrJz3j5r/3w8//er0fy3O+yrref7jbrHRiPSs/qGUW5WLr8MJsP9j59C89JqMR6Ipa9huRJqp7dhRkVPY8OrqpqftoYZVT9dDS+zyoJ6Gl6qR1BPQ0hQR8NDSFBDwwpQg1oaHoCC+hlWQUHtDCtYEepnWIYFdTO8jrshIYSaGQLbUU0N4UaqmyElSfUybMbeENyRamhIKUO9DCkh1MqwjG66tTO8ir0hfHASw8gR/ywlGja5/xuAZnjA/dsAtBX/ivu3AbCL0q4h918j4Jc0LcFL7r9GoCwXVoX7ryFwwfGsTo2GdHyqcv8zBp6mOq33bfAb7zL3L4M00WeZQ+4/hgGDqF0I0UrUbKnwge71NWukHZTHTDTbkva4UjbM6nRu6ke1FLM6FqGP2pKhsaBaFLUWbNXieFgxaluDXcrBc19WVc8ueovm6DBammfoDZXhA6ZW9lC/rdoIyplq9o6kZVmHMUjQPg4qVStrdclWD3VvMEM5aGYq19fXleZBbLJTEARBEARBEARBEARBEARBEARBEHz+B91xJIzYVK0AAAAAAElFTkSuQmCC\" />\n                        </eui-card-header-left-content>\n                        <eui-card-header-title>\n                            <a\n                                class=\"h5 eui-u-text-link-external\"\n                                href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n                                target=\"blank\">\n                                <span class=\"eui-u-color-grey-75\">Layout component /</span>\n                                {{ label }}\n                            </a>\n                        </eui-card-header-title>\n                    </eui-card-header>\n                </eui-card>\n            </ng-template>\n        </euiTabContent>\n    </eui-tab>\n    <eui-tab>\n        <euiTabLabel>Pattern sample</euiTabLabel>\n        <euiTabContent>\n            <ng-content select=\"docPagePatternSample\"></ng-content>\n        </euiTabContent>\n    </eui-tab>\n\n    <euiTabsRightContent>\n        <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode($event)\">\n            <span class=\"eui-icon eui-icon-code\"></span>\n            View sources\n        </button>\n    </euiTabsRightContent>\n</eui-tabs>\n\n<button\n    type=\"button\"\n    *ngIf=\"isShowGoTop && tabSelectedIndex === 0\"\n    euiButton\n    euiIconButton\n    euiOutline\n    euiRounded\n    euiSizeL\n    class=\"eui-button-fixed eui-u-sh-8\"\n    (click)=\"gotoTop()\"\n    title=\"Goto Top\"\n    aria-label=\"Goto Top\">\n    <!-- \uD83D\uDC46 -->\n    <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\"></eui-icon-svg>\n</button>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern .eui-tabs .eui-tab-item--active,.doc-page-pattern .eui-tabs .eui-tab-item:focus{background-color:var(--eui-c-white)}.doc-page-pattern .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-m)}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}\n"], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i2$1.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i2$1.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i2$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i2$1.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content" }, { kind: "component", type: i2$1.EuiCardHeaderRightContentComponent, selector: "eui-card-header-right-content" }, { kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i9.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i9.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "directive", type: i9.EuiTabsRightContentTagDirective, selector: "euiTabsRightContent" }, { kind: "component", type: i9.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i9.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i6$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement"] }, { kind: "component", type: i10.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i11.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: DocPagePatternComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-showcase-doc-page-pattern', encapsulation: ViewEncapsulation.None, template: "<eui-tabs (tabSelect)=\"onTabSelect($event)\">\n    <eui-tab>\n        <euiTabLabel>Usage and documentation</euiTabLabel>\n        <euiTabContent>\n            <h2 class=\"eui-u-color-primary-100 eui-u-mb-none eui-u-text-h2\">{{ label }}</h2>\n\n            <h3 class=\"eui-u-text-h3\">Information</h3>\n            <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n            <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n                <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Figma design anatomy</h3>\n                <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n            </ng-container>\n            <ng-template #screenshot>\n                <ng-container *ngIf=\"figmaUrl !== 'PENDING_DS'\">\n                    <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Anatomy</h3>\n                    <img\n                        src=\"assets/images/design-system/{{ anatomyImage }}\"\n                        alt=\"Design anatomy image\"\n                        width=\"90%\"\n                        class=\"eui-u-sh-6 eui-u-mb-m\" />\n                </ng-container>\n            </ng-template>\n\n            <ng-container *ngIf=\"docEntries.length !== 0\">\n                <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Design system references</h3>\n\n                <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n                    <eui-card-header>\n                        <eui-card-header-title>\n                            <div class=\"eui-u-flex\">\n                                <eui-badge *ngIf=\"ref?.id\" euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n                                <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n                            </div>\n                        </eui-card-header-title>\n                        <eui-card-header-right-content>\n                            <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n                                <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n                                <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\n                            </eui-chip>\n                        </eui-card-header-right-content>\n                    </eui-card-header>\n                    <eui-card-content>\n                        <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n                        <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n\n                        <ng-container *ngIf=\"ref.whenToUse\">\n                            <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n                            <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n                        </ng-container>\n                        <ng-container *ngIf=\"ref.whenNotToUse\">\n                            <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n                            <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n                        </ng-container>\n                        <div class=\"row\">\n                            <div class=\"col-md-6\">\n                                <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n                                    <h6 class=\"section-title eui-u-mt-xl\">\n                                        <eui-icon-svg\n                                            icon=\"thumbs-up\"\n                                            set=\"sharp\"\n                                            size=\"m\"\n                                            fillColor=\"success-100\"\n                                            class=\"eui-u-mr-m\"></eui-icon-svg>\n                                        <strong>Do's</strong>\n                                    </h6>\n                                    <li *ngFor=\"let do of ref.dos\">{{ do }}</li>\n                                </ng-container>\n                            </div>\n                            <div class=\"col-md-6\">\n                                <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n                                    <h6 class=\"section-title eui-u-mt-xl\">\n                                        <eui-icon-svg\n                                            icon=\"hand-right\"\n                                            set=\"sharp\"\n                                            size=\"m\"\n                                            fillColor=\"danger-100\"\n                                            class=\"eui-u-mr-m\"></eui-icon-svg>\n                                        <strong>Dont's</strong>\n                                    </h6>\n                                    <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </eui-card-content>\n                </eui-card>\n            </ng-container>\n\n            <!-- <ng-container *ngIf=\"dos.length !== 0\">\n                <h3 class=\"eui-u-mt-2xl eui-u-color-success-100 eui-u-text-h3\">Do's</h3>\n                <table class=\"eui-table-default\">\n                    <tr *ngFor=\"let ref of dos\">\n                        <td>{{ref.description}}</td>\n                    </tr>\n                </table>\n            </ng-container>\n\n            <ng-container *ngIf=\"donts.length !== 0\">\n                <h3 class=\"eui-u-mt-2xl eui-u-color-danger-100 eui-u-text-h3\">Dont's</h3>\n                <table class=\"eui-table-default\">\n                    <tr *ngFor=\"let ref of donts\">\n                        <td>{{ref.description}}</td>\n                    </tr>\n                </table>\n            </ng-container> -->\n\n            <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Figma resource</h3>\n            <ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n                Pending Design system publication. Will be available in a future release.\n            </ng-container>\n            <ng-template #figmaOK>\n                <eui-card>\n                    <eui-card-header>\n                        <eui-card-header-left-content>\n                            <img\n                                width=\"32\"\n                                height=\"32\"\n                                alt=\"Figma Logo\"\n                                src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABL1BMVEX/////cmLyTh6iWf8Kz4MavP7yTBr5YUWeUP8AzX3UuP//bVwAt/6jV///rKTyRgr2TwCxX+kA032m6Mf3m4uabPb/aVf/8O8AzHmbSf/xPAD/a1rxQgDyShaaR/8Avv74pJP/urP/6Ob/ZVLQ7//839n5tqj/xL7/b1f/9O/59f/r3v+65/9jzP6yef/p+P+u4//Mqv/iz//cxf/I7P/fvf+U2v71/fqO5LzW9ed74LIp043/y8b4rJz0dln/i3/zXTX2jnf/19P/emv0bEv/p5//l4zzWCz2h270dVf4g2D2Whzt5v+6hfuzbfCuWOjE2+6nz+6BxO5lu+5o1v9Nx/7BlP930v63rf+UoP90lP7n1v/Prv/iwf/Onf+hefiWZPZi36O07dLf9+2A4bX7S8Q6AAAGG0lEQVR4nO2aeVcaZxSHZ6JYhsHYFjsig3UhaHG3RkHBxMRE2zR2M5SuaUW//2cow4CgwMz7uzl65x3v8/+cM8+5y7tdwxAEQRAEQRAEQRAEQRAEQRAEQRCEiFJcOVqYDuDt0wAWV2pFboFAikcv8rl8fiqA/LE9Gtd1Hcd5ubjELTKC5eNcfu5JCBOfmWHYrnOyWOK2GWQhn58I01Mz9HDdp9xCd6g9UfJTNmw5mjVuqX5e5dT8AEPTLJxya92wdJZX9IMMTduMSMsphvcXmqFpOq+55TxeK2cobmgWIqBYhARRQ7PAvgOYmYIEYUPTmWE2PAZqkGRon/AKTqt3UaKh6b7lFCzmQEGCIW8pvgFzlGRov+QTrMEhpBhyrop4CEmGfEHEq5BmaBa4dm+vph7I0OZqp3PYYk83NE0eQUqSEg0dngXjCF3t6YbuIovhO7yTUg1tnsPwGaEMqXXIszmllCHVsMAhOPOghhxnKFIrpRo6HGu+GOpvuBT7OizFvpcalC0N1ZBnY0o4HZL3NDwnxGnC4YlqyHN8Wnm4nbfD8w5FajVEQ6YHU0oh0s74XBc1y4Q0JRkyJWkLxXffT48hlyClm1IMGd/0S3iakm6E2QQpVzUEQ4fnkqbDGdpOCYa8z2vwEQo3ZLvw7nAEKuJvwKw56vEdVoqoocP6PurzPaQIGrqRmBqCFMF5mkgIthIVqEXIsBCBFPVZzikvGoCh7axwi/VYOlbdoqobOicRmWrrsKw2Xqps6NoRCqBPaSGvMsGnZGg7NvsqOJTai1xuam4iMJahhrbr2KcRmNcbQam28O6HzwM584bVB/nGxzRPF9ln9YJ5v7tz/uMXo/lprzRzl1Jp5udffr24uKjXP3zYfsatEMDq3mZyNpmcHAsgmRr4bGu/nkgnuqTTifr2FsPfh7N2PhssN9xwvd6z61luRC+Sa5uz4XqDhuvzg36+ZD1icfxNze+O4daQ+PUcG2w2g6yNJdX8bhuuB/h5ionIpGpKNYC3DRvBgp7jNqNVHztfK/v1G26ECrYU9znFuuzMAoI9QxXBaCimkAj2DMNTNCqJ+i0UwRvDfUXBliJzu1lVbqK3DJ8pC7bgNdxU76L9hoBfIrHBKbgL5mjHUD1H23n6nNFwEg1h23ALEkwk5vkEU2gV+oYNTJCzn47BIfQM0RAyBhFdKTqG+6ggXyWe4yH0DOdhwwTTMQNeC31DaC3swmNISdKx5B6epGxp+pEUw706wTDBswGH9zNtwxShDLn2NQS/luHvJEOe9QI7NnUN/yAZpjkE31MazdjknzRDjpu3+BuuPaghxzk4/jGMv6FBMtSplz6C9TD+e5qd2O9L/3rAswXTpWnsz4fxP+M/gnua+N+1Ue9LN9AQMr4/4UGk3Hlzvs3gldh+t1B9POyEkPPdwjinva5BEWR9e3oE74fwxka7N2DyO77aoEIU3vEfwSyGYfx9j/M0EYigx+69zUStM1rd4p7m2uajNJ4Y99lE4xHMlxrejHDIAPQwQ41mhD1WU/6cdxDD57zT6XTPLrJz3j5r/3w8//er0fy3O+yrref7jbrHRiPSs/qGUW5WLr8MJsP9j59C89JqMR6Ipa9huRJqp7dhRkVPY8OrqpqftoYZVT9dDS+zyoJ6Gl6qR1BPQ0hQR8NDSFBDwwpQg1oaHoCC+hlWQUHtDCtYEepnWIYFdTO8jrshIYSaGQLbUU0N4UaqmyElSfUybMbeENyRamhIKUO9DCkh1MqwjG66tTO8ir0hfHASw8gR/ywlGja5/xuAZnjA/dsAtBX/ivu3AbCL0q4h918j4Jc0LcFL7r9GoCwXVoX7ryFwwfGsTo2GdHyqcv8zBp6mOq33bfAb7zL3L4M00WeZQ+4/hgGDqF0I0UrUbKnwge71NWukHZTHTDTbkva4UjbM6nRu6ke1FLM6FqGP2pKhsaBaFLUWbNXieFgxaluDXcrBc19WVc8ueovm6DBammfoDZXhA6ZW9lC/rdoIyplq9o6kZVmHMUjQPg4qVStrdclWD3VvMEM5aGYq19fXleZBbLJTEARBEARBEARBEARBEARBEARBEHz+B91xJIzYVK0AAAAAAElFTkSuQmCC\" />\n                        </eui-card-header-left-content>\n                        <eui-card-header-title>\n                            <a\n                                class=\"h5 eui-u-text-link-external\"\n                                href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n                                target=\"blank\">\n                                <span class=\"eui-u-color-grey-75\">Layout component /</span>\n                                {{ label }}\n                            </a>\n                        </eui-card-header-title>\n                    </eui-card-header>\n                </eui-card>\n            </ng-template>\n        </euiTabContent>\n    </eui-tab>\n    <eui-tab>\n        <euiTabLabel>Pattern sample</euiTabLabel>\n        <euiTabContent>\n            <ng-content select=\"docPagePatternSample\"></ng-content>\n        </euiTabContent>\n    </eui-tab>\n\n    <euiTabsRightContent>\n        <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode($event)\">\n            <span class=\"eui-icon eui-icon-code\"></span>\n            View sources\n        </button>\n    </euiTabsRightContent>\n</eui-tabs>\n\n<button\n    type=\"button\"\n    *ngIf=\"isShowGoTop && tabSelectedIndex === 0\"\n    euiButton\n    euiIconButton\n    euiOutline\n    euiRounded\n    euiSizeL\n    class=\"eui-button-fixed eui-u-sh-8\"\n    (click)=\"gotoTop()\"\n    title=\"Goto Top\"\n    aria-label=\"Goto Top\">\n    <!-- \uD83D\uDC46 -->\n    <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\"></eui-icon-svg>\n</button>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern .eui-tabs .eui-tab-item--active,.doc-page-pattern .eui-tabs .eui-tab-item:focus{background-color:var(--eui-c-white)}.doc-page-pattern .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-m)}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}\n"] }]
+        }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], sampleContent: [{
+                type: ContentChild,
+                args: [forwardRef(() => DocPagePatternSampleDirective)]
+            }], docContent: [{
+                type: ContentChild,
+                args: [forwardRef(() => DocPagePatternDocDirective)]
+            }], id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], anatomyImage: [{
+                type: Input
+            }], docEntries: [{
+                type: Input
+            }], dos: [{
+                type: Input
+            }], donts: [{
+                type: Input
+            }], sourceUrl: [{
+                type: Input
+            }], figmaUrl: [{
+                type: Input
+            }], figmaEmbedSrc: [{
+                type: Input
+            }], checkScroll: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }] } });
+
+const COMPONENTS = [
+    EuiCodeHighlighterDirective,
+    DocPageComponent,
+    DocPageCodeComponent,
+    DocPageCodeFabComponent,
+    DocPageCodeModalComponent,
+    DocPageOverviewContentDirective,
+    DocPageOverviewDefaultContentDirective,
+    DocPageApiContentDirective,
+    DocPageInteractiveContentDirective,
+    DocPageSamplesContentDirective,
+    DocPageSectionsContentDirective,
+    DocPageAccessibilityContentDirective,
+    DocPageThemingContentDirective,
+    DocSampleComponent,
+    DocSampleApiComponent,
+    DocSectionComponent,
+    DocSectionCodeComponent,
+    DocSectionCodeHtmlTagDirective,
+    DocSectionCodeTsTagDirective,
+    DocSectionCodeServiceTagDirective,
+    DocSectionCodeCssTagDirective,
+    DocSectionCodeDocTagDirective,
+    DocSectionCodeDescriptionTagDirective,
+    LoremIpsumSampleComponent,
+    PlaygroundComponent,
+    DocPagePatternComponent,
+    DocPagePatternDocDirective,
+    DocPagePatternSampleDirective,
 ];
-var EuiShowcaseModule = class _EuiShowcaseModule {
-  static {
-    this.ɵfac = i014.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i014, type: _EuiShowcaseModule, deps: [], target: i014.ɵɵFactoryTarget.NgModule });
-  }
-  static {
-    this.ɵmod = i014.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-rc.3", ngImport: i014, type: _EuiShowcaseModule, declarations: [
-      EuiCodeHighlighterDirective,
-      DocPageComponent,
-      DocPageCodeComponent,
-      DocPageCodeFabComponent,
-      DocPageCodeModalComponent,
-      DocPageOverviewContentDirective,
-      DocPageOverviewDefaultContentDirective,
-      DocPageApiContentDirective,
-      DocPageInteractiveContentDirective,
-      DocPageSamplesContentDirective,
-      DocPageSectionsContentDirective,
-      DocPageAccessibilityContentDirective,
-      DocPageThemingContentDirective,
-      DocSampleComponent,
-      DocSampleApiComponent,
-      DocSectionComponent,
-      DocSectionCodeComponent,
-      DocSectionCodeHtmlTagDirective,
-      DocSectionCodeTsTagDirective,
-      DocSectionCodeServiceTagDirective,
-      DocSectionCodeCssTagDirective,
-      DocSectionCodeDocTagDirective,
-      DocSectionCodeDescriptionTagDirective,
-      LoremIpsumSampleComponent,
-      PlaygroundComponent,
-      DocPagePatternComponent,
-      DocPagePatternDocDirective,
-      DocPagePatternSampleDirective
-    ], imports: [
-      CommonModule,
-      EuiCardModule,
-      EuiButtonModule,
-      EuiTabsModule,
-      EuiPageModule,
-      EuiChipModule,
-      EuiDialogModule,
-      EuiAlertModule,
-      EuiBlockContentModule,
-      EuiBadgeModule,
-      EuiIconModule,
-      EuiLabelModule
-    ], exports: [
-      EuiCodeHighlighterDirective,
-      DocPageComponent,
-      DocPageCodeComponent,
-      DocPageCodeFabComponent,
-      DocPageCodeModalComponent,
-      DocPageOverviewContentDirective,
-      DocPageOverviewDefaultContentDirective,
-      DocPageApiContentDirective,
-      DocPageInteractiveContentDirective,
-      DocPageSamplesContentDirective,
-      DocPageSectionsContentDirective,
-      DocPageAccessibilityContentDirective,
-      DocPageThemingContentDirective,
-      DocSampleComponent,
-      DocSampleApiComponent,
-      DocSectionComponent,
-      DocSectionCodeComponent,
-      DocSectionCodeHtmlTagDirective,
-      DocSectionCodeTsTagDirective,
-      DocSectionCodeServiceTagDirective,
-      DocSectionCodeCssTagDirective,
-      DocSectionCodeDocTagDirective,
-      DocSectionCodeDescriptionTagDirective,
-      LoremIpsumSampleComponent,
-      PlaygroundComponent,
-      DocPagePatternComponent,
-      DocPagePatternDocDirective,
-      DocPagePatternSampleDirective
-    ] });
-  }
-  static {
-    this.ɵinj = i014.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i014, type: _EuiShowcaseModule, providers: [StackblitzService], imports: [
-      CommonModule,
-      EuiCardModule,
-      EuiButtonModule,
-      EuiTabsModule,
-      EuiPageModule,
-      EuiChipModule,
-      EuiDialogModule,
-      EuiAlertModule,
-      EuiBlockContentModule,
-      EuiBadgeModule,
-      EuiIconModule,
-      EuiLabelModule
-    ] });
-  }
-};
-i014.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i014, type: EuiShowcaseModule, decorators: [{
-  type: NgModule,
-  args: [{
-    declarations: [...COMPONENTS],
-    imports: [
-      CommonModule,
-      EuiCardModule,
-      EuiButtonModule,
-      EuiTabsModule,
-      EuiPageModule,
-      EuiChipModule,
-      EuiDialogModule,
-      EuiAlertModule,
-      EuiBlockContentModule,
-      EuiBadgeModule,
-      EuiIconModule,
-      EuiLabelModule
-    ],
-    exports: [...COMPONENTS],
-    providers: [StackblitzService]
-  }]
-}] });
-export {
-  DocPageAccessibilityContentDirective,
-  DocPageApiContentDirective,
-  DocPageCodeComponent,
-  DocPageCodeFabComponent,
-  DocPageCodeModalComponent,
-  DocPageComponent,
-  DocPageInteractiveContentDirective,
-  DocPageOverviewContentDirective,
-  DocPageOverviewDefaultContentDirective,
-  DocPagePatternComponent,
-  DocPagePatternDocDirective,
-  DocPagePatternSampleDirective,
-  DocPageSamplesContentDirective,
-  DocPageSectionsContentDirective,
-  DocPageThemingContentDirective,
-  DocSampleApiComponent,
-  DocSampleComponent,
-  DocSectionCodeComponent,
-  DocSectionCodeCssTagDirective,
-  DocSectionCodeDescriptionTagDirective,
-  DocSectionCodeDocTagDirective,
-  DocSectionCodeHtmlTagDirective,
-  DocSectionCodeServiceTagDirective,
-  DocSectionCodeTsTagDirective,
-  DocSectionComponent,
-  EuiCodeHighlighterDirective,
-  EuiShowcaseModule,
-  LoremIpsumSampleComponent,
-  PACKAGE_JSON,
-  PlaygroundComponent,
-  angularJsonFile,
-  indexHtmlFile,
-  mainFile,
-  moduleFile,
-  polyfillsFile,
-  tsConfig
-};
+class EuiShowcaseModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EuiShowcaseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EuiShowcaseModule, declarations: [EuiCodeHighlighterDirective,
+            DocPageComponent,
+            DocPageCodeComponent,
+            DocPageCodeFabComponent,
+            DocPageCodeModalComponent,
+            DocPageOverviewContentDirective,
+            DocPageOverviewDefaultContentDirective,
+            DocPageApiContentDirective,
+            DocPageInteractiveContentDirective,
+            DocPageSamplesContentDirective,
+            DocPageSectionsContentDirective,
+            DocPageAccessibilityContentDirective,
+            DocPageThemingContentDirective,
+            DocSampleComponent,
+            DocSampleApiComponent,
+            DocSectionComponent,
+            DocSectionCodeComponent,
+            DocSectionCodeHtmlTagDirective,
+            DocSectionCodeTsTagDirective,
+            DocSectionCodeServiceTagDirective,
+            DocSectionCodeCssTagDirective,
+            DocSectionCodeDocTagDirective,
+            DocSectionCodeDescriptionTagDirective,
+            LoremIpsumSampleComponent,
+            PlaygroundComponent,
+            DocPagePatternComponent,
+            DocPagePatternDocDirective,
+            DocPagePatternSampleDirective], imports: [CommonModule,
+            EuiCardModule,
+            EuiButtonModule,
+            EuiTabsModule,
+            EuiPageModule,
+            EuiChipModule,
+            EuiDialogModule,
+            EuiAlertModule,
+            EuiBlockContentModule,
+            EuiBadgeModule,
+            EuiIconModule,
+            EuiLabelModule], exports: [EuiCodeHighlighterDirective,
+            DocPageComponent,
+            DocPageCodeComponent,
+            DocPageCodeFabComponent,
+            DocPageCodeModalComponent,
+            DocPageOverviewContentDirective,
+            DocPageOverviewDefaultContentDirective,
+            DocPageApiContentDirective,
+            DocPageInteractiveContentDirective,
+            DocPageSamplesContentDirective,
+            DocPageSectionsContentDirective,
+            DocPageAccessibilityContentDirective,
+            DocPageThemingContentDirective,
+            DocSampleComponent,
+            DocSampleApiComponent,
+            DocSectionComponent,
+            DocSectionCodeComponent,
+            DocSectionCodeHtmlTagDirective,
+            DocSectionCodeTsTagDirective,
+            DocSectionCodeServiceTagDirective,
+            DocSectionCodeCssTagDirective,
+            DocSectionCodeDocTagDirective,
+            DocSectionCodeDescriptionTagDirective,
+            LoremIpsumSampleComponent,
+            PlaygroundComponent,
+            DocPagePatternComponent,
+            DocPagePatternDocDirective,
+            DocPagePatternSampleDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EuiShowcaseModule, providers: [StackblitzService], imports: [CommonModule,
+            EuiCardModule,
+            EuiButtonModule,
+            EuiTabsModule,
+            EuiPageModule,
+            EuiChipModule,
+            EuiDialogModule,
+            EuiAlertModule,
+            EuiBlockContentModule,
+            EuiBadgeModule,
+            EuiIconModule,
+            EuiLabelModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.3", ngImport: i0, type: EuiShowcaseModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENTS],
+                    imports: [
+                        CommonModule,
+                        EuiCardModule,
+                        EuiButtonModule,
+                        EuiTabsModule,
+                        EuiPageModule,
+                        EuiChipModule,
+                        EuiDialogModule,
+                        EuiAlertModule,
+                        EuiBlockContentModule,
+                        EuiBadgeModule,
+                        EuiIconModule,
+                        EuiLabelModule,
+                    ],
+                    exports: [...COMPONENTS],
+                    providers: [StackblitzService],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DocPageAccessibilityContentDirective, DocPageApiContentDirective, DocPageCodeComponent, DocPageCodeFabComponent, DocPageCodeModalComponent, DocPageComponent, DocPageInteractiveContentDirective, DocPageOverviewContentDirective, DocPageOverviewDefaultContentDirective, DocPagePatternComponent, DocPagePatternDocDirective, DocPagePatternSampleDirective, DocPageSamplesContentDirective, DocPageSectionsContentDirective, DocPageThemingContentDirective, DocSampleApiComponent, DocSampleComponent, DocSectionCodeComponent, DocSectionCodeCssTagDirective, DocSectionCodeDescriptionTagDirective, DocSectionCodeDocTagDirective, DocSectionCodeHtmlTagDirective, DocSectionCodeServiceTagDirective, DocSectionCodeTsTagDirective, DocSectionComponent, EuiCodeHighlighterDirective, EuiShowcaseModule, LoremIpsumSampleComponent, PACKAGE_JSON, PlaygroundComponent, angularJsonFile, indexHtmlFile, mainFile, moduleFile, polyfillsFile, tsConfig };
 //# sourceMappingURL=eui-showcase.mjs.map