@eui/showcase 15.0.0-next.9 → 15.0.0-rc.2

package/fesm2020/eui-showcase.mjs

@@ -1,27 +1,33 @@
 import * as i0 from '@angular/core';
-import { Directive, Component, Input, ViewEncapsulation, ContentChildren, forwardRef, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { Directive, ElementRef, Component, Input, ViewChild, ViewEncapsulation, ContentChildren, forwardRef, ContentChild, HostBinding, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4$1 from '@eui/components/eui-card';
+import * as i2$2 from '@eui/components/eui-card';
 import { EuiCardModule } from '@eui/components/eui-card';
-import * as i2$1 from '@eui/components/eui-button';
+import * as i2$3 from '@eui/components/eui-button';
 import { EuiButtonModule } from '@eui/components/eui-button';
-import * as i6 from '@eui/components/eui-tabs';
+import * as i3$1 from '@eui/components/eui-tabs';
 import { EuiTabsModule } from '@eui/components/eui-tabs';
-import * as i6$1 from '@eui/components/eui-page';
+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$1 from '@eui/components/eui-dialog';
+import * as i3$3 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 { forkJoin, Observable } from 'rxjs';
+import * as i3 from '@eui/components/eui-block-content';
+import { EuiBlockContentModule } from '@eui/components/eui-block-content';
+import * as i4$1 from '@eui/components/eui-badge';
+import { EuiBadgeModule } from '@eui/components/eui-badge';
+import { lastValueFrom, forkJoin, Observable } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
-import * as i1 from '@angular/common/http';
+import * as i2$1 from '@angular/common/http';
 import * as i2 from '@eui/core';
-import * as i1$1 from '@angular/router';
-import * as i3 from '@angular/platform-browser';
+import sdk from '@stackblitz/sdk';
+import * as i1 from '@angular/router';
+import * as i3$2 from '@angular/platform-browser';
+import { BaseDirective } from '@eui/components/shared';
 
 class EuiCodeHighlighterDirective {
     constructor(el) {
@@ -42,7 +48,409 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
-// import { DocPageComponent } from '../doc-page/doc-page.component';
+const polyfillsFile = `import 'zone.js/dist/zone';`;
+const mainFile = (moduleName) => `
+import './polyfills';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { preInitApp } from '@eui/core';
+import { ${moduleName} } from './component';
+
+preInitApp({production: false}).then(() => platformBrowserDynamic().bootstrapModule(${moduleName}).then(ref => {
+      // Ensure Angular destroys itself on hot reloads.
+      if (window['ngRef']) {
+        window['ngRef'].destroy();
+      }
+      window['ngRef'] = ref;
+
+      // Otherwise, log the boot error
+    }).catch(err => console.error(err))
+);
+
+`;
+const moduleFile = (componentName, m = []) => {
+    return `
+import { NgModule, InjectionToken } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterModule } from '@angular/router';
+import { APP_BASE_HREF } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+import { TranslateModule } from '@ngx-translate/core';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { EuiAllModule } from '@eui/components';
+import {
+    reducers as coreReducers,
+    CoreModule as EuiCoreModule,
+    translateConfig,
+    CoreModuleEffects,
+    EUI_CONFIG_TOKEN,
+} from '@eui/core';
+
+import { ${componentName} } from './component';
+` + m.map((i) => `import { ${i.name} } from '${i.path}';\n`).join('') + `
+
+export const REDUCER_TOKEN = new InjectionToken<any>('Registered Reducers');
+
+@NgModule({
+  imports: [
+    BrowserAnimationsModule,
+    CommonModule,
+    BrowserModule,
+    FormsModule,
+    EuiAllModule,
+    HttpClientModule,
+    RouterModule.forRoot([]),
+    EuiCoreModule.forRoot(),
+    EffectsModule.forRoot([...CoreModuleEffects]),
+    TranslateModule.forRoot(translateConfig),
+    StoreModule.forRoot(REDUCER_TOKEN, { })
+    ` + m.map((i) => `${i.name},`).join('') + `
+  ],
+  declarations: [${componentName}],
+  providers: [
+    {
+        provide: REDUCER_TOKEN,
+        deps: [],
+        useFactory: () => Object.assign({}, coreReducers),
+    },
+    {
+        provide: EUI_CONFIG_TOKEN,
+        useValue: { appConfig: {}, environment: {} }
+    },
+    {
+        provide: APP_BASE_HREF, useValue: '/'
+    }
+  ],
+  bootstrap: [${componentName}],
+})
+export class AppModule {}
+`;
+};
+const angularJsonFile = `
+{
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "demo": {
+      "root": "",
+      "sourceRoot": "",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/demo",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@eui/styles-base/src/assets/",
+                "output": "src/assets"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@eui/core/assets/",
+                "output": "src/assets"
+              }
+            ],
+            "styles": [
+              "./node_modules/@eui/styles/dist/styles/eui.css"
+            ],
+            "scripts": [],
+            "preserveSymlinks": true
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "demo:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "demo:build:production"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": ["tsconfig.json"],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "demo",
+  "cli": {
+    "analytics": "0f944abb-e787-4c1f-9092-e34292361c91"
+  }
+}
+`;
+const indexHtmlFile = (selector) => `
+<!-- TODO: Find a workaround -->
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<link rel="stylesheet" href="assets/eui.css" />
+<!-- END TODO -->
+<${selector}>
+    <div id="loader-wrapper">
+        <div id="loader"></div>
+    </div>
+</${selector}>
+`;
+const PACKAGE_JSON = {
+    name: 'demo',
+    version: '0.0.0',
+    private: true,
+    dependencies: {},
+};
+const tsConfig = `
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2016",
+    "allowSyntheticDefaultImports": true,
+    "emitDecoratorMetadata": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2020",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableIvy": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true
+  }
+}`;
+
+class PlaygroundComponent {
+    constructor(renderer, elementRef, appShell, http) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.appShell = appShell;
+        this.http = http;
+        this.title = 'eUI Playground';
+        this.activated = false;
+        this.isLoaded = false;
+    }
+    ngOnChanges(changes) {
+        if (changes.activated) {
+            if (changes.activated.currentValue) {
+                this.initStackblitz();
+            }
+            else {
+                this.isLoaded = false;
+            }
+        }
+    }
+    initStackblitz() {
+        this.getStackblitzDependencies()
+            .then((deps) => {
+            const { dependencies, devDependencies } = deps;
+            const { selector, className } = this.extractComponentMetadata(this.typescriptContent);
+            const moduleName = this.extractModuleName(this.typescriptContent);
+            return sdk.embedProject('stackblitz', {
+                title: this.title,
+                description: `An eUI example for the ${this.title}.`,
+                template: 'angular-cli',
+                files: {
+                    'src/component.html': this.htmlContent,
+                    'src/component.ts': this.appendVitalNgModules(this.typescriptContent),
+                    // 'src/app.module.ts': moduleFile(className, this.modules),
+                    'src/main.ts': mainFile(moduleName),
+                    '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: false,
+                    },
+                },
+                dependencies,
+            }, {
+                openFile: ['component.ts'],
+                height: 500,
+            });
+        })
+            .then((instance) => {
+            this.stackblitzInstance = instance;
+            this.isLoaded = 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',
+            '@eui/styles-base',
+            '@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]));
+            let filteredObj = Object.fromEntries(filteredArr);
+            let 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 };
+            let 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');
+    }
+    /**
+     * extract the name of the component class name and selector name from the typescript content
+     *
+     * @param contents
+     * @private
+     */
+    extractComponentMetadata(contents) {
+        const className = contents.match(/export class ([\w\d]+)/);
+        const selectorName = contents.match(/selector: '([\w\d-]+)'/);
+        return { className: className ? className[1] : '', selector: selectorName ? selectorName[1] : '' };
+    }
+    /**
+     * 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] : '';
+    }
+    appendVitalNgModules(contents) {
+        const imports = contents.match(/imports: \[([\s\S]*?)\]/);
+        // appends BrowserModule to imports
+        contents = contents.replace(/imports: \[([\s\S]*?)\]/, `imports: [BrowserModule, $1]`);
+        // appends import of BrowserModule
+        return `import { BrowserModule } from '@angular/platform-browser';\n${contents}`;
+    }
+}
+/** @nocollapse */ PlaygroundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: PlaygroundComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.UxAppShellService }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ PlaygroundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: PlaygroundComponent, selector: "eui-playground", inputs: { title: "title", htmlContent: "htmlContent", 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\"></iframe>\n</eui-block-content>\n", dependencies: [{ kind: "component", type: i3.EuiBlockContentComponent, selector: "eui-block-content", inputs: ["isBlocked"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: PlaygroundComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-playground', template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n    <iframe #container id=\"stackblitz\"></iframe>\n</eui-block-content>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i2.UxAppShellService }, { type: i2$1.HttpClient }]; }, propDecorators: { title: [{
+                type: Input
+            }], htmlContent: [{
+                type: Input
+            }], typescriptContent: [{
+                type: Input
+            }], activated: [{
+                type: Input
+            }], modules: [{
+                type: Input
+            }], stackblitzElWrapper: [{
+                type: ViewChild,
+                args: ['container', { read: ElementRef, static: true }]
+            }] } });
+
 class DocSampleComponent {
     constructor(_http, asService, cd) {
         this._http = _http;
@@ -54,6 +462,7 @@ class DocSampleComponent {
         this.isCodeLoaded = false;
         this.isCodeLoading = false;
         this.isCodeExpanded = false;
+        this.playground_activated = false;
     }
     ngAfterContentInit() {
         if (!this.label) {
@@ -127,11 +536,20 @@ class DocSampleComponent {
             });
         }
     }
+    /**
+     * 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;
+    }
     _getComponent(id) {
         const flatLinks = flatten(this.asService.state.sidebarLinks);
-        return flatLinks.filter((item) => {
-            return item.id === id;
-        })[0];
+        return flatLinks.filter((item) => item.id === id)[0];
         function flatten(links) {
             return links ? links.reduce((result, item) => [
                 ...result,
@@ -144,12 +562,12 @@ class DocSampleComponent {
         }
     }
 }
-/** @nocollapse */ DocSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSampleComponent, deps: [{ token: i1.HttpClient }, { token: i2.UxAppShellService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DocSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocSampleComponent, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", styleClass: "styleClass" }, ngImport: i0, template: "<div class=\"doc-sample-title\">\n    <div class=\"doc-sample-title__label\"><strong>{{label}}</strong></div>\n    <div class=\"doc-sample-title__items\">\n        <button euiButton\n                [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"onToggleCode()\"\n                [isLoading]=\"isCodeLoading\" [euiDisabled]=\"isCodeLoading\">\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\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-card euiNoContentPadding>\n        <eui-card-content>\n            <eui-tabs>\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>{{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: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}.doc-sample-title__label{font-size:var(--eui-base-font-size-xl)}.doc-sample-title__items{display:flex;margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.EuiCardComponent, selector: "eui-card", inputs: ["euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "e2eAttr"], outputs: ["onCollapsed"] }, { kind: "component", type: i4$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i2$1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["euiBasicButton", "euiButtonCall", "euiBlockButton", "euiRaisedButton", "isLoading", "euiIconButton", "euiLineWrap", "e2eAttr"] }, { kind: "component", type: i6.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i6.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i6.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i6.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i6.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }] });
+/** @nocollapse */ DocSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSampleComponent, deps: [{ token: i2$1.HttpClient }, { token: i2.UxAppShellService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ DocSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocSampleComponent, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", styleClass: "styleClass" }, ngImport: i0, template: "<div class=\"doc-sample-title\">\n    <div class=\"doc-sample-title__label\"><strong>{{label}}</strong></div>\n    <div class=\"doc-sample-title__items\">\n        <button euiButton\n                [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"onToggleCode()\"\n                [isLoading]=\"isCodeLoading\" [euiDisabled]=\"isCodeLoading\">\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\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>{{tsContent}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n                <eui-tab euiWarning [isVisible]=\"htmlContent && tsContent\">\n                    <euiTabLabel>\n                        Playground\n                        <euiTabSubLabel>Stackblitz <eui-chip euiSizeS euiWarning>Experimental</eui-chip></euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <eui-playground [typescriptContent]=\"tsContent\"\n                                        [htmlContent]=\"htmlContent\"\n                                        [activated]=\"playground_activated\"></eui-playground>\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: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}.doc-sample-title__label{font-size:var(--eui-base-font-size-xl)}.doc-sample-title__items{display:flex;margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["onCollapsed", "collapse"] }, { kind: "component", type: i2$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i2$3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i3$1.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i3$1.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i3$1.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i3$1.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i3$1.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: PlaygroundComponent, selector: "eui-playground", inputs: ["title", "htmlContent", "typescriptContent", "activated", "modules"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-showcase-doc-sample', template: "<div class=\"doc-sample-title\">\n    <div class=\"doc-sample-title__label\"><strong>{{label}}</strong></div>\n    <div class=\"doc-sample-title__items\">\n        <button euiButton\n                [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"onToggleCode()\"\n                [isLoading]=\"isCodeLoading\" [euiDisabled]=\"isCodeLoading\">\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\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-card euiNoContentPadding>\n        <eui-card-content>\n            <eui-tabs>\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>{{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: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}.doc-sample-title__label{font-size:var(--eui-base-font-size-xl)}.doc-sample-title__items{display:flex;margin-left:auto}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i2.UxAppShellService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
+            args: [{ selector: 'eui-showcase-doc-sample', template: "<div class=\"doc-sample-title\">\n    <div class=\"doc-sample-title__label\"><strong>{{label}}</strong></div>\n    <div class=\"doc-sample-title__items\">\n        <button euiButton\n                [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"onToggleCode()\"\n                [isLoading]=\"isCodeLoading\" [euiDisabled]=\"isCodeLoading\">\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\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>{{tsContent}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n                <eui-tab euiWarning [isVisible]=\"htmlContent && tsContent\">\n                    <euiTabLabel>\n                        Playground\n                        <euiTabSubLabel>Stackblitz <eui-chip euiSizeS euiWarning>Experimental</eui-chip></euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <eui-playground [typescriptContent]=\"tsContent\"\n                                        [htmlContent]=\"htmlContent\"\n                                        [activated]=\"playground_activated\"></eui-playground>\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: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}.doc-sample-title__label{font-size:var(--eui-base-font-size-xl)}.doc-sample-title__items{display:flex;margin-left:auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2$1.HttpClient }, { type: i2.UxAppShellService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -194,7 +612,7 @@ class DocPageCodeComponent {
     }
 }
 /** @nocollapse */ DocPageCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DocPageCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, ngImport: i0, template: "<button euiButton euiAccent (click)=\"onOpenCode()\">\n    <span euiLabel>Check the code</span>\n    <span euiIcon iconClass=\"eui-icon eui-icon-code\"></span>\n</button>\n", dependencies: [{ kind: "component", type: i2$1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["euiBasicButton", "euiButtonCall", "euiBlockButton", "euiRaisedButton", "isLoading", "euiIconButton", "euiLineWrap", "e2eAttr"] }] });
+/** @nocollapse */ DocPageCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, ngImport: i0, template: "<button euiButton euiAccent (click)=\"onOpenCode()\">\n    <span euiLabel>Check the code</span>\n    <span euiIcon iconClass=\"eui-icon eui-icon-code\"></span>\n</button>\n", dependencies: [{ kind: "component", type: i2$3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageCodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-showcase-doc-page-code', template: "<button euiButton euiAccent (click)=\"onOpenCode()\">\n    <span euiLabel>Check the code</span>\n    <span euiIcon iconClass=\"eui-icon eui-icon-code\"></span>\n</button>\n" }]
@@ -213,16 +631,17 @@ class DocPageComponent {
         this.location = location;
         this.isNotReady = false;
         this.isDeprecated = false;
+        this.isLegacy = false;
         this.showcase = 'ux';
+        this.isNavigationVisible = true;
         this.isLoading = true;
         this.isNavClicked = true;
         this.TABS_DEF = [
-            { index: 0, id: 'overview' },
-            { index: 1, id: 'api' },
-            { index: 2, id: 'a11y' },
-            { index: 3, id: 'samples' },
-            { index: 4, id: 'theming' },
-            { index: 5, id: 'advanced' },
+            { index: 0, id: 'api' },
+            { index: 1, id: 'a11y' },
+            { index: 2, id: 'samples' },
+            { index: 3, id: 'theming' },
+            { index: 4, id: 'advanced' },
         ];
     }
     ngOnInit() {
@@ -241,16 +660,20 @@ class DocPageComponent {
                         this.stateTypeClass = 'success';
                         break;
                     case 'warning':
-                        this.stateLabel = 'NOT READY';
+                        this.stateLabel = 'DEPRECATED';
                         this.stateTypeClass = 'warning';
-                        this.isNotReady = true;
+                        this.isDeprecated = true;
                         break;
                     case 'danger':
-                        this.stateLabel = 'DEPRECATED';
+                        this.stateLabel = 'LEGACY - will be removed in next version';
                         this.stateTypeClass = 'danger';
-                        this.isDeprecated = true;
+                        this.isLegacy = true;
                         break;
                 }
+                // construct cmp module import string
+                // eslint-disable-next-line
+                this.cmpModuleImport = `import { ${this.cmp.metadata?.moduleName} } from '@eui/${this.cmp.metadata?.subEntryName}';`;
+                console.log(this.cmpModuleImport);
             }
         }
         catch (e) {
@@ -280,7 +703,7 @@ class DocPageComponent {
             let tab = this.TABS_DEF.filter(t => t.id === this.fragmentId)[0];
             let tabIndex;
             if (!tab) {
-                tabIndex = 3;
+                tabIndex = 2;
             }
             else {
                 tabIndex = tab.index;
@@ -337,21 +760,28 @@ class DocPageComponent {
         }
     }
     _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);
-        return flatLinks.filter((item) => item.id === id)[0];
-        function flatten(links) {
-            return links ? links.reduce((result, item) => [
-                ...result,
-                {
-                    id: item.label,
-                    status: item.markerTypeClass,
-                    cmpReplacement: item.cmpReplacement,
-                    cmpReplacementUrl: item.cmpReplacementUrl,
-                    cmpReplacementNote: item.cmpReplacementNote,
-                    alternateApiCategory: item.alternateApiCategory
-                },
-                ...flatten(item.children)
-            ], []) : [];
+        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() {
@@ -409,12 +839,12 @@ class DocPageComponent {
         return result;
     }
 }
-/** @nocollapse */ DocPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i2.UxAppShellService }, { token: i3.DomSanitizer }, { token: i4.Location }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DocPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageComponent, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", codeFolder: "codeFolder", showcase: "showcase" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(function () { return DocPageOverviewContentDirective; }) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(function () { return DocPageSamplesContentDirective; }) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(function () { return DocPageSectionsContentDirective; }) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(function () { return DocPageInteractiveContentDirective; }) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(function () { return DocPageAccessibilityContentDirective; }) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(function () { return DocPageApiContentDirective; }) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(function () { return 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 *ngIf=\"codeFolder\" codeFolder=\"{{codeFolder}}\" showcase=\"{{showcase}}\"></eui-showcase-doc-page-code>\n                    <eui-chip *ngIf=\"stateLabel\" [euiSuccess]=\"stateLabel === 'ACTIVE'\" [euiWarning]=\"stateLabel === 'NOT READY'\" [euiDanger]=\"stateLabel === 'DEPRECATED'\">\n                        <span euiLabel><strong>{{stateLabel}}</strong></span>\n                    </eui-chip>\n                </eui-page-header-action-items>\n            </eui-page-header>\n\n            <eui-page-content>\n                <eui-alert *ngIf=\"stateLabel === 'NOT READY' || isNotReady\" euiWarning>\n                    <p>\n                        This component <strong class=\"eui-u-color-warning-darkester-2\">is not ready for production</strong> usage yet, it's API is still subject to change during the coming weeks.\n                    </p>\n                    <p>\n                        For experimentation use only.\n                    </p>\n                </eui-alert>\n\n                <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiDanger>\n                    <p>\n                        This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n                    </p>\n                    <div *ngIf=\"cmp\">\n                        <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n                            It has been replaced by : <strong class=\"eui-u-color-success-darkest\">{{cmp.cmpReplacement}}</strong>.\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 *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n                            This component will be <strong>discontinued in future version of eUI</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                <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n\n                <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelected)=\"onTabSelected($event)\">\n                    <eui-tab>\n                        <euiTabLabel>\n                            OVERVIEW\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"overview\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Overview</h4>\n                            <div *ngIf=\"pageOverviewContent.length > 0; else noOverview\">\n                                <ng-content select=\"docPageOverview\"></ng-content>\n                            </div>\n                            <ng-template #noOverview>\n                                Coming soon...\n                            </ng-template>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            API\n                        </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>\n                        <euiTabLabel>\n                            A11Y\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"accessibility\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Accessibility</h4>\n                            <ng-content select=\"docPageAccessibility\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            OPTIONS & SAMPLES\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"samples\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Options & samples</h4>\n                            <ng-content select=\"docPageSamples\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n                        <euiTabLabel>\n                            THEMING\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"theming\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Theming</h4>\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                            <h4 id=\"interactive\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">\n                                {{pageInteractiveContent.first.subTitle}}\n                            </h4>\n                            <ng-content select=\"docPageInteractive\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n                </eui-tabs>\n\n                <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                    <h4 id=\"demo\" *ngIf=\"sections.length === 0\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Demo</h4>\n                    <ng-content select=\"docPageSections\"></ng-content>\n                </ng-container>\n            </eui-page-content>\n        </eui-page>\n    </div>\n\n    <div 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                        <!-- ALWAYS PRESENT in each page-->\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'overview'\" (click)=\"onNavClick('overview', 0)\"><span>OVERVIEW</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\" (click)=\"onNavClick('api', 1)\"><span>API</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\" (click)=\"onNavClick('a11y', 2)\"><span>A11Y</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\" (click)=\"onNavClick('samples', 3)\"><span>OPTIONS & SAMPLES</span></li>\n                        <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n                                <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\" (click)=\"onNavClick(sample.id, 3)\"><span>{{sample.label}}</span></li>\n                            </ul>\n                        </li>\n\n                        <!-- OPTIONAL TABS-->\n                        <ng-container *ngIf=\"pageThemingContent.length > 0\">\n                            <li *ngIf=\"pageThemingContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\" (click)=\"onNavClick('theming', 4)\"><span>THEMING</span></li>\n                            <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 5)\">\n                                <span>{{pageInteractiveContent.first.title}}</span>\n                            </li>\n                        </ng-container>\n                        <ng-container *ngIf=\"pageThemingContent.length  === 0\">\n                            <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 4)\">\n                                <span>{{pageInteractiveContent.first.title}}</span>\n                            </li>\n                        </ng-container>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\" (click)=\"onNavClick('sections', null)\"><span>Sections</span></li>\n                        <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>\n                        <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let section of sections\">\n                                <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>\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-base-spacing-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-base-color-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:99;box-shadow:var(--eui-base-shadow-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-title{font-weight:700;padding:var(--eui-base-spacing-s)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 6rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-10)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-25)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-base-spacing-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-base-color-primary-100);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-base-spacing-2xs);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;padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-base-spacing-m)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-grey-15)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}@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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i6.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i6.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i6.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i6$1.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i6$1.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i6$1.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "isCollapsible", "isCollapsed", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "directive", type: i6$1.EuiPageHeaderActionItemsContentDirective, selector: "eui-page-header-action-items" }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i8.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["euiAlertMuted", "isCloseable"], outputs: ["close"] }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ DocPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.UxAppShellService }, { token: i3$2.DomSanitizer }, { token: i4.Location }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ DocPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", 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" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(function () { return DocPageOverviewContentDirective; }) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(function () { return DocPageSamplesContentDirective; }) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(function () { return DocPageSectionsContentDirective; }) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(function () { return DocPageInteractiveContentDirective; }) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(function () { return DocPageAccessibilityContentDirective; }) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(function () { return DocPageApiContentDirective; }) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(function () { return 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 *ngIf=\"codeFolder\" codeFolder=\"{{codeFolder}}\" showcase=\"{{showcase}}\"></eui-showcase-doc-page-code>\n                    <eui-chip *ngIf=\"stateLabel\" [euiSuccess]=\"stateLabel === 'ACTIVE'\" [euiWarning]=\"stateLabel === 'DEPRECATED'\" [euiDanger]=\"isLegacy\">\n                        <span euiLabel><strong>{{stateLabel}}</strong></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>\n                    <p>\n                        This component will be <strong class=\"eui-u-color-danger\">removed</strong> in the next version of eUI !!\n                    </p>\n                    <div *ngIf=\"cmp\">\n                        <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n                            It has been replaced by : <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                            This component will be <strong class=\"eui-u-color-danger\">discontinued in future version of eUI</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>\n                    <p>\n                        This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n                    </p>\n                    <div *ngIf=\"cmp\">\n                        This component has no replacement in current version AND won't have replacement in next version of eUI, it is kept for <strong class=\"eui-u-color-warning\">historical usage only</strong>\n                    </div>\n                </eui-alert>\n\n                <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n\n                <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelected)=\"onTabSelected($event)\">\n                    <eui-tab>\n                        <euiTabLabel>\n                            API\n                        </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>\n                        <euiTabLabel>\n                            A11Y\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h3 id=\"accessibility\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Accessibility</h3>\n                            <ng-content select=\"docPageAccessibility\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            OPTIONS & SAMPLES\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <ng-container *ngIf=\"cmp && cmp.metadata\">\n                                <h3 class=\"eui-u-font-bold eui-u-color-info mt-3 mb-3\">Module import</h3>\n                                <pre><code class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpModuleImport }}</code></pre>\n                                <br>\n                            </ng-container>\n\n                            <h3 id=\"overview\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-3\">Overview & setup</h3>\n                            <div *ngIf=\"pageOverviewContent.length > 0; else noOverview\">\n                                <ng-content select=\"docPageOverview\"></ng-content>\n                            </div>\n                            <ng-template #noOverview>\n                                Coming soon...\n                            </ng-template>\n                            <br>\n\n                            <h3 id=\"samples\" class=\"eui-u-font-bold eui-u-color-info mt-8 mb-2\">Options & samples</h3>\n                            <ng-content select=\"docPageSamples\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n                        <euiTabLabel>\n                            THEMING\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h3 id=\"theming\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Theming</h3>\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                            <h3 id=\"interactive\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">\n                                {{pageInteractiveContent.first.subTitle}}\n                            </h3>\n                            <ng-content select=\"docPageInteractive\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n                </eui-tabs>\n\n                <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                    <h3 id=\"demo\" *ngIf=\"sections.length === 0\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Demo</h3>\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                        <!-- ALWAYS PRESENT in each page-->\n                        <!-- <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'overview'\" (click)=\"onNavClick('overview', 0)\"><span>OVERVIEW</span></li> -->\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\" (click)=\"onNavClick('api', 0)\"><span>API</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\" (click)=\"onNavClick('a11y', 1)\"><span>A11Y</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\" (click)=\"onNavClick('samples', 2)\"><span>OPTIONS & SAMPLES</span></li>\n                        <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n                                <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\" (click)=\"onNavClick(sample.id, 2)\"><span>{{sample.label}}</span></li>\n                            </ul>\n                        </li>\n\n                        <!-- OPTIONAL TABS-->\n                        <ng-container *ngIf=\"pageThemingContent.length > 0\">\n                            <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>\n                            <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 4)\">\n                                <span>{{pageInteractiveContent.first.title}}</span>\n                            </li>\n                        </ng-container>\n                        <ng-container *ngIf=\"pageThemingContent.length  === 0\">\n                            <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (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 class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\" (click)=\"onNavClick('sections', null)\"><span>Sections</span></li>\n                        <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>\n                        <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let section of sections\">\n                                <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>\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-base-spacing-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-base-color-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-base-shadow-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-title{font-weight:700;padding:var(--eui-base-spacing-s)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 6rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-10)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-25)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-base-spacing-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-base-color-primary-100);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-base-spacing-2xs);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;padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-base-spacing-m)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-grey-15)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}@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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i3$1.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i3$1.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i3$1.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", "isCollapsible", "isCollapsed", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "directive", type: i6.EuiPageHeaderActionItemsContentDirective, selector: "eui-page-header-action-items" }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i8.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["euiAlertMuted", "isCloseable"], outputs: ["close"] }, { 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: "15.0.0-next.4", 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 *ngIf=\"codeFolder\" codeFolder=\"{{codeFolder}}\" showcase=\"{{showcase}}\"></eui-showcase-doc-page-code>\n                    <eui-chip *ngIf=\"stateLabel\" [euiSuccess]=\"stateLabel === 'ACTIVE'\" [euiWarning]=\"stateLabel === 'NOT READY'\" [euiDanger]=\"stateLabel === 'DEPRECATED'\">\n                        <span euiLabel><strong>{{stateLabel}}</strong></span>\n                    </eui-chip>\n                </eui-page-header-action-items>\n            </eui-page-header>\n\n            <eui-page-content>\n                <eui-alert *ngIf=\"stateLabel === 'NOT READY' || isNotReady\" euiWarning>\n                    <p>\n                        This component <strong class=\"eui-u-color-warning-darkester-2\">is not ready for production</strong> usage yet, it's API is still subject to change during the coming weeks.\n                    </p>\n                    <p>\n                        For experimentation use only.\n                    </p>\n                </eui-alert>\n\n                <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiDanger>\n                    <p>\n                        This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n                    </p>\n                    <div *ngIf=\"cmp\">\n                        <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n                            It has been replaced by : <strong class=\"eui-u-color-success-darkest\">{{cmp.cmpReplacement}}</strong>.\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 *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n                            This component will be <strong>discontinued in future version of eUI</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                <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n\n                <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelected)=\"onTabSelected($event)\">\n                    <eui-tab>\n                        <euiTabLabel>\n                            OVERVIEW\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"overview\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Overview</h4>\n                            <div *ngIf=\"pageOverviewContent.length > 0; else noOverview\">\n                                <ng-content select=\"docPageOverview\"></ng-content>\n                            </div>\n                            <ng-template #noOverview>\n                                Coming soon...\n                            </ng-template>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            API\n                        </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>\n                        <euiTabLabel>\n                            A11Y\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"accessibility\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Accessibility</h4>\n                            <ng-content select=\"docPageAccessibility\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            OPTIONS & SAMPLES\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"samples\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Options & samples</h4>\n                            <ng-content select=\"docPageSamples\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n                        <euiTabLabel>\n                            THEMING\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"theming\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Theming</h4>\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                            <h4 id=\"interactive\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">\n                                {{pageInteractiveContent.first.subTitle}}\n                            </h4>\n                            <ng-content select=\"docPageInteractive\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n                </eui-tabs>\n\n                <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                    <h4 id=\"demo\" *ngIf=\"sections.length === 0\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Demo</h4>\n                    <ng-content select=\"docPageSections\"></ng-content>\n                </ng-container>\n            </eui-page-content>\n        </eui-page>\n    </div>\n\n    <div 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                        <!-- ALWAYS PRESENT in each page-->\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'overview'\" (click)=\"onNavClick('overview', 0)\"><span>OVERVIEW</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\" (click)=\"onNavClick('api', 1)\"><span>API</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\" (click)=\"onNavClick('a11y', 2)\"><span>A11Y</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\" (click)=\"onNavClick('samples', 3)\"><span>OPTIONS & SAMPLES</span></li>\n                        <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n                                <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\" (click)=\"onNavClick(sample.id, 3)\"><span>{{sample.label}}</span></li>\n                            </ul>\n                        </li>\n\n                        <!-- OPTIONAL TABS-->\n                        <ng-container *ngIf=\"pageThemingContent.length > 0\">\n                            <li *ngIf=\"pageThemingContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\" (click)=\"onNavClick('theming', 4)\"><span>THEMING</span></li>\n                            <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 5)\">\n                                <span>{{pageInteractiveContent.first.title}}</span>\n                            </li>\n                        </ng-container>\n                        <ng-container *ngIf=\"pageThemingContent.length  === 0\">\n                            <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 4)\">\n                                <span>{{pageInteractiveContent.first.title}}</span>\n                            </li>\n                        </ng-container>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\" (click)=\"onNavClick('sections', null)\"><span>Sections</span></li>\n                        <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>\n                        <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let section of sections\">\n                                <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>\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-base-spacing-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-base-color-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:99;box-shadow:var(--eui-base-shadow-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-title{font-weight:700;padding:var(--eui-base-spacing-s)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 6rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-10)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-25)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-base-spacing-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-base-color-primary-100);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-base-spacing-2xs);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;padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-base-spacing-m)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-grey-15)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}@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: function () { return [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i2.UxAppShellService }, { type: i3.DomSanitizer }, { type: i4.Location }]; }, propDecorators: { id: [{
+            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 *ngIf=\"codeFolder\" codeFolder=\"{{codeFolder}}\" showcase=\"{{showcase}}\"></eui-showcase-doc-page-code>\n                    <eui-chip *ngIf=\"stateLabel\" [euiSuccess]=\"stateLabel === 'ACTIVE'\" [euiWarning]=\"stateLabel === 'DEPRECATED'\" [euiDanger]=\"isLegacy\">\n                        <span euiLabel><strong>{{stateLabel}}</strong></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>\n                    <p>\n                        This component will be <strong class=\"eui-u-color-danger\">removed</strong> in the next version of eUI !!\n                    </p>\n                    <div *ngIf=\"cmp\">\n                        <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n                            It has been replaced by : <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                            This component will be <strong class=\"eui-u-color-danger\">discontinued in future version of eUI</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>\n                    <p>\n                        This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n                    </p>\n                    <div *ngIf=\"cmp\">\n                        This component has no replacement in current version AND won't have replacement in next version of eUI, it is kept for <strong class=\"eui-u-color-warning\">historical usage only</strong>\n                    </div>\n                </eui-alert>\n\n                <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n\n                <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelected)=\"onTabSelected($event)\">\n                    <eui-tab>\n                        <euiTabLabel>\n                            API\n                        </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>\n                        <euiTabLabel>\n                            A11Y\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h3 id=\"accessibility\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Accessibility</h3>\n                            <ng-content select=\"docPageAccessibility\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            OPTIONS & SAMPLES\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <ng-container *ngIf=\"cmp && cmp.metadata\">\n                                <h3 class=\"eui-u-font-bold eui-u-color-info mt-3 mb-3\">Module import</h3>\n                                <pre><code class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpModuleImport }}</code></pre>\n                                <br>\n                            </ng-container>\n\n                            <h3 id=\"overview\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-3\">Overview & setup</h3>\n                            <div *ngIf=\"pageOverviewContent.length > 0; else noOverview\">\n                                <ng-content select=\"docPageOverview\"></ng-content>\n                            </div>\n                            <ng-template #noOverview>\n                                Coming soon...\n                            </ng-template>\n                            <br>\n\n                            <h3 id=\"samples\" class=\"eui-u-font-bold eui-u-color-info mt-8 mb-2\">Options & samples</h3>\n                            <ng-content select=\"docPageSamples\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n                        <euiTabLabel>\n                            THEMING\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h3 id=\"theming\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Theming</h3>\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                            <h3 id=\"interactive\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">\n                                {{pageInteractiveContent.first.subTitle}}\n                            </h3>\n                            <ng-content select=\"docPageInteractive\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n                </eui-tabs>\n\n                <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                    <h3 id=\"demo\" *ngIf=\"sections.length === 0\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Demo</h3>\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                        <!-- ALWAYS PRESENT in each page-->\n                        <!-- <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'overview'\" (click)=\"onNavClick('overview', 0)\"><span>OVERVIEW</span></li> -->\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\" (click)=\"onNavClick('api', 0)\"><span>API</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\" (click)=\"onNavClick('a11y', 1)\"><span>A11Y</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\" (click)=\"onNavClick('samples', 2)\"><span>OPTIONS & SAMPLES</span></li>\n                        <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n                                <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\" (click)=\"onNavClick(sample.id, 2)\"><span>{{sample.label}}</span></li>\n                            </ul>\n                        </li>\n\n                        <!-- OPTIONAL TABS-->\n                        <ng-container *ngIf=\"pageThemingContent.length > 0\">\n                            <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>\n                            <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 4)\">\n                                <span>{{pageInteractiveContent.first.title}}</span>\n                            </li>\n                        </ng-container>\n                        <ng-container *ngIf=\"pageThemingContent.length  === 0\">\n                            <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (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 class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\" (click)=\"onNavClick('sections', null)\"><span>Sections</span></li>\n                        <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>\n                        <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let section of sections\">\n                                <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>\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-base-spacing-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-base-color-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-base-shadow-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-title{font-weight:700;padding:var(--eui-base-spacing-s)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 6rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-10)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-25)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-base-spacing-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-base-color-primary-100);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-base-spacing-2xs);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;padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-base-spacing-m)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-grey-15)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}@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: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.UxAppShellService }, { type: i3$2.DomSanitizer }, { type: i4.Location }]; }, propDecorators: { id: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -424,10 +854,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 type: Input
             }], isDeprecated: [{
                 type: Input
+            }], isLegacy: [{
+                type: Input
             }], codeFolder: [{
                 type: Input
             }], showcase: [{
                 type: Input
+            }], isNavigationVisible: [{
+                type: Input
             }], samples: [{
                 type: ContentChildren,
                 args: [DocSampleComponent, { descendants: true }]
@@ -548,7 +982,7 @@ class DocSectionCodeComponent {
     }
 }
 /** @nocollapse */ DocSectionCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DocSectionCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", 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(function () { return DocSectionCodeDescriptionTagDirective; }), descendants: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeHtmlTagDirective; }), descendants: true }, { propertyName: "sectionCodeTS", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeTsTagDirective; }), descendants: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeServiceTagDirective; }), descendants: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeCssTagDirective; }), descendants: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i0.forwardRef(function () { return 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 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\"><ng-content select=\"sectionCodeDOC\"></ng-content></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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["euiBasicButton", "euiButtonCall", "euiBlockButton", "euiRaisedButton", "isLoading", "euiIconButton", "euiLineWrap", "e2eAttr"] }, { kind: "component", type: i6.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i6.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i6.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i6.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i6.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }] });
+/** @nocollapse */ DocSectionCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", 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(function () { return DocSectionCodeDescriptionTagDirective; }), descendants: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeHtmlTagDirective; }), descendants: true }, { propertyName: "sectionCodeTS", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeTsTagDirective; }), descendants: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeServiceTagDirective; }), descendants: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeCssTagDirective; }), descendants: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i0.forwardRef(function () { return 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 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\"><ng-content select=\"sectionCodeDOC\"></ng-content></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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i3$1.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i3$1.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i3$1.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i3$1.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i3$1.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", 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 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\"><ng-content select=\"sectionCodeDOC\"></ng-content></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"] }]
@@ -652,7 +1086,7 @@ class DocPageCodeFabComponent {
     }
 }
 /** @nocollapse */ DocPageCodeFabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageCodeFabComponent, deps: [{ token: i2.UxAppShellService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DocPageCodeFabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", 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-button--accent\">\n        <span class=\"eui-icon eui-icon-code\" (click)=\"toggleCode()\"></span>\n    </div>\n</div>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\">\n    <button euiButton euiAccent (click)=\"onOpenCode()\">\n        <span class=\"eui-icon eui-icon-code\"></span> VIEW SOURCE\n    </button>\n    <br>\n    <br>\n    <ng-content></ng-content>\n    <br>\n    <p>Use the <kbd>View source</kbd> button to access the code source of the page.</p>\n</eui-dialog>\n", dependencies: [{ kind: "component", type: i2$1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["euiBasicButton", "euiButtonCall", "euiBlockButton", "euiRaisedButton", "isLoading", "euiIconButton", "euiLineWrap", "e2eAttr"] }, { kind: "component", type: i3$1.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "width", "height", "acceptLabel", "dismissLabel", "typeClass", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "isClosedOnClickOutside", "isClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter"], outputs: ["clickOutside", "escape", "open", "close", "dismiss", "accept"] }] });
+/** @nocollapse */ DocPageCodeFabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", 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-button--accent\">\n        <span class=\"eui-icon eui-icon-code\" (click)=\"toggleCode()\"></span>\n    </div>\n</div>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\">\n    <button euiButton euiAccent (click)=\"onOpenCode()\">\n        <span class=\"eui-icon eui-icon-code\"></span> VIEW SOURCE\n    </button>\n    <br>\n    <br>\n    <ng-content></ng-content>\n    <br>\n    <p>Use the <kbd>View source</kbd> button to access the code source of the page.</p>\n</eui-dialog>\n", dependencies: [{ kind: "component", type: i2$3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i3$3.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "width", "height", "acceptLabel", "dismissLabel", "typeClass", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "isClosedOnClickOutside", "isClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter"], outputs: ["clickOutside", "escape", "open", "close", "dismiss", "accept"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", 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-button--accent\">\n        <span class=\"eui-icon eui-icon-code\" (click)=\"toggleCode()\"></span>\n    </div>\n</div>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\">\n    <button euiButton euiAccent (click)=\"onOpenCode()\">\n        <span class=\"eui-icon eui-icon-code\"></span> VIEW SOURCE\n    </button>\n    <br>\n    <br>\n    <ng-content></ng-content>\n    <br>\n    <p>Use the <kbd>View source</kbd> button to access the code source of the page.</p>\n</eui-dialog>\n" }]
@@ -679,6 +1113,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                 type: Input
             }] } });
 
+/* eslint-disable */
+class DocPagePatternSampleDirective {
+}
+/** @nocollapse */ DocPagePatternSampleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPagePatternSampleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DocPagePatternSampleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPagePatternSampleDirective, selector: "docPagePatternSample", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPagePatternSampleDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'docPagePatternSample' }]
+        }] });
+class DocPagePatternDocDirective {
+}
+/** @nocollapse */ DocPagePatternDocDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPagePatternDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DocPagePatternDocDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPagePatternDocDirective, selector: "docPagePatternDoc", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPagePatternDocDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'docPagePatternDoc' }]
+        }] });
+class DocPagePatternComponent extends BaseDirective {
+    constructor() {
+        super();
+        this.anatomyRefs = [];
+        this.dos = [];
+        this.donts = [];
+    }
+    get cssClasses() {
+        return [
+            super.getCssClasses('doc-page-pattern'),
+        ].join(' ').trim();
+    }
+}
+/** @nocollapse */ DocPagePatternComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPagePatternComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ DocPagePatternComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPagePatternComponent, selector: "eui-showcase-doc-page-pattern", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", anatomyRefs: "anatomyRefs", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "sampleContent", first: true, predicate: i0.forwardRef(function () { return DocPagePatternSampleDirective; }), descendants: true }, { propertyName: "docContent", first: true, predicate: i0.forwardRef(function () { return DocPagePatternDocDirective; }), descendants: true }], usesInheritance: true, ngImport: i0, template: "<eui-tabs>\n    <eui-tab>\n        <euiTabLabel>\n            Usage and documentation\n        </euiTabLabel>\n        <euiTabContent>\n            <h2 class=\"eui-u-color-primary-100\">{{label}}</h2>\n\n            <h3>Information</h3>\n            <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n            <h3 class=\"mt-5\">Anatomy</h3>\n            <img src=\"assets/images/design-system/{{anatomyImage}}.png\" width=\"60%\"/>\n\n            <ng-container *ngIf=\"anatomyRefs.length !== 0\">\n                <h3 class=\"mt-5\">Ananomy references</h3>\n                <table class=\"eui-table-default\">\n                    <tr *ngFor=\"let ref of anatomyRefs\">\n                        <td><eui-badge>{{ref.id}}</eui-badge></td>\n                        <td>{{ref.description}}</td>\n                    </tr>\n                </table>\n            </ng-container>\n\n            <ng-container *ngIf=\"dos.length !== 0\">\n                <h3 class=\"mt-5 eui-u-color-success-100\">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=\"mt-5 eui-u-color-danger-100\">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            <!-- v15 TEMP just for testing\n            <iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"100%\" height=\"650\"\n                    src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FjQ9htWvSM8SWTPuk3hoigc%2FeUI-Desktop-Patterns%3Fnode-id%3D734%253A12516\" allowfullscreen></iframe> -->\n\n            <h3 class=\"mt-5\">Figma resource</h3>\n            <eui-card>\n                <eui-card-header>\n                    <eui-card-header-left-content>\n                        <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\">\n                    </eui-card-header-left-content>\n                    <eui-card-header-title>\n                        <a class=\"h5 eui-u-text-link-external\" href=\"https://www.figma.com/file/E2mR8Kd0cmoVkiwpRUzHJL/{{figmaUrl}}\" target=\"blank\"><span class=\"eui-u-color-grey-75\">Layout component /</span> {{label}}</a>\n                    </eui-card-header-title>\n                </eui-card-header>\n            </eui-card>\n        </euiTabContent>\n    </eui-tab>\n    <eui-tab>\n        <euiTabLabel>\n            Pattern sample\n        </euiTabLabel>\n        <euiTabContent>\n            <ng-content select=\"docPagePatternSample\"></ng-content>\n        </euiTabContent>\n    </eui-tab>\n</eui-tabs>\n\n<eui-showcase-doc-page-code-fab codeFolder=\"{{sourceUrl}}\"></eui-showcase-doc-page-code-fab>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:1.5rem;background-color:#f0f0f0}.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%;background-color:var(--eui-app-main-bg-color)}.doc-page-pattern .eui-tabs .eui-tabs__items{background-color:#f0f0f0}.doc-page-pattern .eui-tabs .eui-tab-item--active,.doc-page-pattern .eui-tabs .eui-tab-item:focus{background-color:#fff}.doc-page-pattern .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:1rem}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%;background-color:var(--eui-app-main-bg-color)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["onCollapsed", "collapse"] }, { kind: "component", type: i2$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["avatarUrl", "expandLabel", "collapseLabel", "iconClass", "avatarDerscription", "iconDescription", "isHeaderBodyOnly", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i2$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i2$2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content" }, { kind: "component", type: i3$1.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i3$1.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i3$1.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i3$1.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i4$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }, { kind: "component", type: DocPageCodeFabComponent, selector: "eui-showcase-doc-page-code-fab", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPagePatternComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-showcase-doc-page-pattern', encapsulation: ViewEncapsulation.None, template: "<eui-tabs>\n    <eui-tab>\n        <euiTabLabel>\n            Usage and documentation\n        </euiTabLabel>\n        <euiTabContent>\n            <h2 class=\"eui-u-color-primary-100\">{{label}}</h2>\n\n            <h3>Information</h3>\n            <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n            <h3 class=\"mt-5\">Anatomy</h3>\n            <img src=\"assets/images/design-system/{{anatomyImage}}.png\" width=\"60%\"/>\n\n            <ng-container *ngIf=\"anatomyRefs.length !== 0\">\n                <h3 class=\"mt-5\">Ananomy references</h3>\n                <table class=\"eui-table-default\">\n                    <tr *ngFor=\"let ref of anatomyRefs\">\n                        <td><eui-badge>{{ref.id}}</eui-badge></td>\n                        <td>{{ref.description}}</td>\n                    </tr>\n                </table>\n            </ng-container>\n\n            <ng-container *ngIf=\"dos.length !== 0\">\n                <h3 class=\"mt-5 eui-u-color-success-100\">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=\"mt-5 eui-u-color-danger-100\">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            <!-- v15 TEMP just for testing\n            <iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"100%\" height=\"650\"\n                    src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FjQ9htWvSM8SWTPuk3hoigc%2FeUI-Desktop-Patterns%3Fnode-id%3D734%253A12516\" allowfullscreen></iframe> -->\n\n            <h3 class=\"mt-5\">Figma resource</h3>\n            <eui-card>\n                <eui-card-header>\n                    <eui-card-header-left-content>\n                        <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\">\n                    </eui-card-header-left-content>\n                    <eui-card-header-title>\n                        <a class=\"h5 eui-u-text-link-external\" href=\"https://www.figma.com/file/E2mR8Kd0cmoVkiwpRUzHJL/{{figmaUrl}}\" target=\"blank\"><span class=\"eui-u-color-grey-75\">Layout component /</span> {{label}}</a>\n                    </eui-card-header-title>\n                </eui-card-header>\n            </eui-card>\n        </euiTabContent>\n    </eui-tab>\n    <eui-tab>\n        <euiTabLabel>\n            Pattern sample\n        </euiTabLabel>\n        <euiTabContent>\n            <ng-content select=\"docPagePatternSample\"></ng-content>\n        </euiTabContent>\n    </eui-tab>\n</eui-tabs>\n\n<eui-showcase-doc-page-code-fab codeFolder=\"{{sourceUrl}}\"></eui-showcase-doc-page-code-fab>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:1.5rem;background-color:#f0f0f0}.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%;background-color:var(--eui-app-main-bg-color)}.doc-page-pattern .eui-tabs .eui-tabs__items{background-color:#f0f0f0}.doc-page-pattern .eui-tabs .eui-tab-item--active,.doc-page-pattern .eui-tabs .eui-tab-item:focus{background-color:#fff}.doc-page-pattern .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:1rem}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%;background-color:var(--eui-app-main-bg-color)}\n"] }]
+        }], ctorParameters: function () { return []; }, 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
+            }], anatomyRefs: [{
+                type: Input
+            }], dos: [{
+                type: Input
+            }], donts: [{
+                type: Input
+            }], sourceUrl: [{
+                type: Input
+            }], figmaUrl: [{
+                type: Input
+            }] } });
+
 const COMPONENTS = [
     EuiCodeHighlighterDirective,
     DocPageComponent,
@@ -702,6 +1198,10 @@ const COMPONENTS = [
     DocSectionCodeDocTagDirective,
     DocSectionCodeDescriptionTagDirective,
     LoremIpsumSampleComponent,
+    PlaygroundComponent,
+    DocPagePatternComponent,
+    DocPagePatternDocDirective,
+    DocPagePatternSampleDirective,
 ];
 class EuiShowcaseModule {
 }
@@ -727,14 +1227,20 @@ class EuiShowcaseModule {
         DocSectionCodeCssTagDirective,
         DocSectionCodeDocTagDirective,
         DocSectionCodeDescriptionTagDirective,
-        LoremIpsumSampleComponent], imports: [CommonModule,
+        LoremIpsumSampleComponent,
+        PlaygroundComponent,
+        DocPagePatternComponent,
+        DocPagePatternDocDirective,
+        DocPagePatternSampleDirective], imports: [CommonModule,
         EuiCardModule,
         EuiButtonModule,
         EuiTabsModule,
         EuiPageModule,
         EuiChipModule,
         EuiDialogModule,
-        EuiAlertModule], exports: [EuiCodeHighlighterDirective,
+        EuiAlertModule,
+        EuiBlockContentModule,
+        EuiBadgeModule], exports: [EuiCodeHighlighterDirective,
         DocPageComponent,
         DocPageCodeComponent,
         DocPageCodeFabComponent,
@@ -755,7 +1261,11 @@ class EuiShowcaseModule {
         DocSectionCodeCssTagDirective,
         DocSectionCodeDocTagDirective,
         DocSectionCodeDescriptionTagDirective,
-        LoremIpsumSampleComponent] });
+        LoremIpsumSampleComponent,
+        PlaygroundComponent,
+        DocPagePatternComponent,
+        DocPagePatternDocDirective,
+        DocPagePatternSampleDirective] });
 /** @nocollapse */ EuiShowcaseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EuiShowcaseModule, imports: [CommonModule,
         EuiCardModule,
         EuiButtonModule,
@@ -763,7 +1273,9 @@ class EuiShowcaseModule {
         EuiPageModule,
         EuiChipModule,
         EuiDialogModule,
-        EuiAlertModule] });
+        EuiAlertModule,
+        EuiBlockContentModule,
+        EuiBadgeModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EuiShowcaseModule, decorators: [{
             type: NgModule,
             args: [{
@@ -777,6 +1289,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         EuiChipModule,
                         EuiDialogModule,
                         EuiAlertModule,
+                        EuiBlockContentModule,
+                        EuiBadgeModule,
                     ],
                     exports: [...COMPONENTS],
                 }]
@@ -786,5 +1300,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
  * Generated bundle index. Do not edit.
  */
 
-export { DocPageAccessibilityContentDirective, DocPageApiContentDirective, DocPageCodeComponent, DocPageCodeFabComponent, DocPageComponent, DocPageInteractiveContentDirective, DocPageOverviewContentDirective, DocPageSamplesContentDirective, DocPageSectionsContentDirective, DocPageThemingContentDirective, DocSampleApiComponent, DocSampleComponent, DocSectionCodeComponent, DocSectionCodeCssTagDirective, DocSectionCodeDescriptionTagDirective, DocSectionCodeDocTagDirective, DocSectionCodeHtmlTagDirective, DocSectionCodeServiceTagDirective, DocSectionCodeTsTagDirective, DocSectionComponent, EuiCodeHighlighterDirective, EuiShowcaseModule, LoremIpsumSampleComponent };
+export { DocPageAccessibilityContentDirective, DocPageApiContentDirective, DocPageCodeComponent, DocPageCodeFabComponent, DocPageComponent, DocPageInteractiveContentDirective, DocPageOverviewContentDirective, 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