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

package/fesm2020/eui-showcase.mjs

@@ -1,10 +1,10 @@
 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 i3$1 from '@eui/components/eui-card';
 import { EuiCardModule } from '@eui/components/eui-card';
-import * as i2$1 from '@eui/components/eui-button';
+import * as i2$2 from '@eui/components/eui-button';
 import { EuiButtonModule } from '@eui/components/eui-button';
 import * as i6 from '@eui/components/eui-tabs';
 import { EuiTabsModule } from '@eui/components/eui-tabs';
@@ -12,16 +12,22 @@ import * as i6$1 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 i5 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) {
@@ -33,16 +39,418 @@ class EuiCodeHighlighterDirective {
         }
     }
 }
-/** @nocollapse */ EuiCodeHighlighterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EuiCodeHighlighterDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ EuiCodeHighlighterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EuiCodeHighlighterDirective, selector: "[euiCode]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EuiCodeHighlighterDirective, decorators: [{
+/** @nocollapse */ EuiCodeHighlighterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiCodeHighlighterDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ EuiCodeHighlighterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: EuiCodeHighlighterDirective, selector: "[euiCode]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiCodeHighlighterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euiCode]'
                 }]
         }], 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", 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", 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", 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,34 @@ 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;
+    }
+    /**
+     * filter out the extra import and module from the code sample
+     *
+     * @param code
+     */
+    filterOutModuleAndImports(code) {
+        // filter out module
+        const moduleRegex = /@NgModule\(([\s\S]*?)\)\nexport class \w+ \{([\s\S]*?)\}/g;
+        code = code.replace(moduleRegex, '');
+        // filter out extra imports
+        code = code.replace('import { EuiAllModule } from \'@eui/components\';\n', '');
+        code = code.replace('import { NgModule } from \'@angular/core\';\n', '');
+        return code;
+    }
     _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 +576,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]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSampleComponent, decorators: [{
+/** @nocollapse */ DocSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", 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", 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>{{filterOutModuleAndImports(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: i3$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["onCollapsed", "collapse"] }, { kind: "component", type: i3$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { 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: "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", 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>{{filterOutModuleAndImports(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
@@ -169,9 +601,9 @@ class DocSectionComponent {
         }
     }
 }
-/** @nocollapse */ DocSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DocSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocSectionComponent, selector: "eui-showcase-doc-section", inputs: { id: "id", label: "label", styleClass: "styleClass" }, ngImport: i0, template: "<h4 id=\"sections\" class=\"eui-u-font-bold eui-u-color-info mb-3\">{{label}}</h4>\n\n<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl)}.doc-section-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)}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionComponent, decorators: [{
+/** @nocollapse */ DocSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ DocSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionComponent, selector: "eui-showcase-doc-section", inputs: { id: "id", label: "label", styleClass: "styleClass" }, ngImport: i0, template: "<h4 id=\"sections\" class=\"eui-u-font-bold eui-u-color-info mb-3\">{{label}}</h4>\n\n<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl)}.doc-section-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)}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-showcase-doc-section', template: "<h4 id=\"sections\" class=\"eui-u-font-bold eui-u-color-info mb-3\">{{label}}</h4>\n\n<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl)}.doc-section-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)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { id: [{
@@ -193,9 +625,9 @@ class DocPageCodeComponent {
         window.open(sourceRootPath + this.codeFolder, '_blank');
     }
 }
-/** @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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageCodeComponent, decorators: [{
+/** @nocollapse */ DocPageCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ DocPageCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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$2.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", 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" }]
         }], ctorParameters: function () { return []; }, propDecorators: { codeFolder: [{
@@ -213,22 +645,24 @@ 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() {
         setTimeout(() => {
             this.asService.isBlockDocumentActive = true;
         });
+        this.appMetadata = this.asService.state.appMetadata;
         if (this.id && !this.label) {
             this.label = this.id;
         }
@@ -241,16 +675,19 @@ 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}';`;
             }
         }
         catch (e) {
@@ -266,21 +703,16 @@ class DocPageComponent {
             console.log(`Fetching API url from : ${this.apiUrl}`);
             setTimeout(() => {
                 this.apiUrlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.apiUrl);
-                // setTimeout(() => {
-                //     const iFrame: HTMLIFrameElement = <HTMLIFrameElement>document.getElementById('iframe_api');
-                //     console.log(iFrame);
-                //     const iFrameContent = iFrame.contentWindow;
-                //     console.log(iFrameContent);
-                // });
             });
         }
         catch (e) {
+            console.log(e);
         }
         setTimeout(() => {
             let tab = this.TABS_DEF.filter(t => t.id === this.fragmentId)[0];
             let tabIndex;
             if (!tab) {
-                tabIndex = 3;
+                tabIndex = 2;
             }
             else {
                 tabIndex = tab.index;
@@ -305,7 +737,6 @@ class DocPageComponent {
         this.isNavClicked = false;
     }
     _scrollToFragment(fragmentId, tabIndex, init, changeTab) {
-        // console.log(`Navigating to fragment: ${fragmentId} - tabIndex: ${tabIndex}`);
         if (init) {
             if (this.tabsContent) {
                 this.tabsContent.changeTab(tabIndex);
@@ -337,21 +768,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() {
@@ -363,20 +801,12 @@ class DocPageComponent {
         const name = pathNameArray[pathNameArray.length - 1];
         let category = pathNameArray[pathNameArray.length - 2];
         let protocolGen = protocol, hostGen = host;
-        let docTypeRoot;
         if (host.indexOf('localhost') > -1) {
             protocolGen = 'https:';
             hostGen = 'euidev.ecdevops.eu';
         }
-        if (name.indexOf('ux-') > -1) {
-            docTypeRoot = 'eui-docs-eui-13.x';
-        }
-        else if (name.indexOf('eui-') > -1) {
-            docTypeRoot = 'eui-docs-eui-13.x';
-        }
-        else if (name.indexOf('ecl-') > -1) {
-            docTypeRoot = 'eui-docs-ecl-13.x';
-        }
+        const appVersionNumber = this.appMetadata.appVersion.split('.')[0];
+        const docTypeRoot = `eui-docs-eui-${appVersionNumber}.x`;
         if (category === 'layout-components' || category === 'externals') {
             category = 'components';
         }
@@ -386,6 +816,7 @@ class DocPageComponent {
         }
         const formattedName = this._camelCaseString(name + '-' + category.slice(0, -1), '-', true);
         const docPath = `${protocolGen}//${hostGen}/${docTypeRoot}/${category}/${formattedName}.html`;
+        console.log(`fetching API from: ${docPath}`);
         return docPath;
     }
     _camelCaseString(string, separator, first) {
@@ -409,12 +840,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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageComponent, decorators: [{
+/** @nocollapse */ DocPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", 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", 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: 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: "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", 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 +855,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 }]
@@ -462,9 +897,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
 /* eslint-disable @angular-eslint/directive-selector */
 class DocPageOverviewContentDirective {
 }
-/** @nocollapse */ DocPageOverviewContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageOverviewContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ DocPageOverviewContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageOverviewContentDirective, selector: "docPageOverview", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageOverviewContentDirective, decorators: [{
+/** @nocollapse */ DocPageOverviewContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageOverviewContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DocPageOverviewContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageOverviewContentDirective, selector: "docPageOverview", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageOverviewContentDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'docPageOverview' }]
         }] });
@@ -474,9 +909,9 @@ class DocPageInteractiveContentDirective {
         this.subTitle = 'Advanced use cases';
     }
 }
-/** @nocollapse */ DocPageInteractiveContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageInteractiveContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ DocPageInteractiveContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageInteractiveContentDirective, selector: "docPageInteractive", inputs: { title: "title", subTitle: "subTitle" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageInteractiveContentDirective, decorators: [{
+/** @nocollapse */ DocPageInteractiveContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageInteractiveContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DocPageInteractiveContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageInteractiveContentDirective, selector: "docPageInteractive", inputs: { title: "title", subTitle: "subTitle" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageInteractiveContentDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'docPageInteractive' }]
         }], propDecorators: { title: [{
@@ -486,41 +921,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
             }] } });
 class DocPageSamplesContentDirective {
 }
-/** @nocollapse */ DocPageSamplesContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageSamplesContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ DocPageSamplesContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageSamplesContentDirective, selector: "docPageSamples", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageSamplesContentDirective, decorators: [{
+/** @nocollapse */ DocPageSamplesContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageSamplesContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DocPageSamplesContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageSamplesContentDirective, selector: "docPageSamples", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageSamplesContentDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'docPageSamples' }]
         }] });
 class DocPageSectionsContentDirective {
 }
-/** @nocollapse */ DocPageSectionsContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageSectionsContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ DocPageSectionsContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageSectionsContentDirective, selector: "docPageSections", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageSectionsContentDirective, decorators: [{
+/** @nocollapse */ DocPageSectionsContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageSectionsContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DocPageSectionsContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageSectionsContentDirective, selector: "docPageSections", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageSectionsContentDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'docPageSections' }]
         }] });
 class DocPageAccessibilityContentDirective {
 }
-/** @nocollapse */ DocPageAccessibilityContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageAccessibilityContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ DocPageAccessibilityContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageAccessibilityContentDirective, selector: "docPageAccessibility", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageAccessibilityContentDirective, decorators: [{
+/** @nocollapse */ DocPageAccessibilityContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageAccessibilityContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DocPageAccessibilityContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageAccessibilityContentDirective, selector: "docPageAccessibility", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageAccessibilityContentDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'docPageAccessibility' }]
         }] });
 class DocPageApiContentDirective {
 }
-/** @nocollapse */ DocPageApiContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageApiContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ DocPageApiContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageApiContentDirective, selector: "docPageApi", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageApiContentDirective, decorators: [{
+/** @nocollapse */ DocPageApiContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageApiContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DocPageApiContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageApiContentDirective, selector: "docPageApi", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageApiContentDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'docPageApi' }]
         }] });
 class DocPageThemingContentDirective {
 }
-/** @nocollapse */ DocPageThemingContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageThemingContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ DocPageThemingContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageThemingContentDirective, selector: "docPageTheming", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageThemingContentDirective, decorators: [{
+/** @nocollapse */ DocPageThemingContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageThemingContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DocPageThemingContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageThemingContentDirective, selector: "docPageTheming", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageThemingContentDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'docPageTheming' }]
         }] });
@@ -528,9 +963,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
 class DocSampleApiComponent {
     constructor() { }
 }
-/** @nocollapse */ DocSampleApiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSampleApiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DocSampleApiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocSampleApiComponent, selector: "eui-showcase-doc-sample-api", ngImport: i0, template: "" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSampleApiComponent, decorators: [{
+/** @nocollapse */ DocSampleApiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSampleApiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ DocSampleApiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: DocSampleApiComponent, selector: "eui-showcase-doc-sample-api", ngImport: i0, template: "" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSampleApiComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-showcase-doc-sample-api', template: "" }]
         }], ctorParameters: function () { return []; } });
@@ -547,9 +982,9 @@ class DocSectionCodeComponent {
         return object;
     }
 }
-/** @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]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeComponent, decorators: [{
+/** @nocollapse */ DocSectionCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ DocSectionCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { 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]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", 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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { label: [{
@@ -586,49 +1021,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
 /* eslint-disable @angular-eslint/directive-selector */
 class DocSectionCodeDescriptionTagDirective {
 }
-/** @nocollapse */ DocSectionCodeDescriptionTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ DocSectionCodeDescriptionTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocSectionCodeDescriptionTagDirective, selector: "sectionDescription", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, decorators: [{
+/** @nocollapse */ DocSectionCodeDescriptionTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DocSectionCodeDescriptionTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeDescriptionTagDirective, selector: "sectionDescription", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'sectionDescription' }]
         }] });
 class DocSectionCodeHtmlTagDirective {
 }
-/** @nocollapse */ DocSectionCodeHtmlTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeHtmlTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ DocSectionCodeHtmlTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocSectionCodeHtmlTagDirective, selector: "sectionCodeHTML", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeHtmlTagDirective, decorators: [{
+/** @nocollapse */ DocSectionCodeHtmlTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeHtmlTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DocSectionCodeHtmlTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeHtmlTagDirective, selector: "sectionCodeHTML", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeHtmlTagDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'sectionCodeHTML' }]
         }] });
 class DocSectionCodeTsTagDirective {
 }
-/** @nocollapse */ DocSectionCodeTsTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeTsTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ DocSectionCodeTsTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocSectionCodeTsTagDirective, selector: "sectionCodeTS", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeTsTagDirective, decorators: [{
+/** @nocollapse */ DocSectionCodeTsTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeTsTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DocSectionCodeTsTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeTsTagDirective, selector: "sectionCodeTS", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeTsTagDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'sectionCodeTS' }]
         }] });
 class DocSectionCodeServiceTagDirective {
 }
-/** @nocollapse */ DocSectionCodeServiceTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeServiceTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ DocSectionCodeServiceTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocSectionCodeServiceTagDirective, selector: "sectionCodeSERVICE", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeServiceTagDirective, decorators: [{
+/** @nocollapse */ DocSectionCodeServiceTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeServiceTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DocSectionCodeServiceTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeServiceTagDirective, selector: "sectionCodeSERVICE", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeServiceTagDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'sectionCodeSERVICE' }]
         }] });
 class DocSectionCodeCssTagDirective {
 }
-/** @nocollapse */ DocSectionCodeCssTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeCssTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ DocSectionCodeCssTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocSectionCodeCssTagDirective, selector: "sectionCodeCSS", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeCssTagDirective, decorators: [{
+/** @nocollapse */ DocSectionCodeCssTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeCssTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DocSectionCodeCssTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeCssTagDirective, selector: "sectionCodeCSS", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeCssTagDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'sectionCodeCSS' }]
         }] });
 class DocSectionCodeDocTagDirective {
 }
-/** @nocollapse */ DocSectionCodeDocTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeDocTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ DocSectionCodeDocTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocSectionCodeDocTagDirective, selector: "sectionCodeDOC", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeDocTagDirective, decorators: [{
+/** @nocollapse */ DocSectionCodeDocTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeDocTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DocSectionCodeDocTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeDocTagDirective, selector: "sectionCodeDOC", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeDocTagDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'sectionCodeDOC' }]
         }] });
@@ -651,9 +1086,9 @@ class DocPageCodeFabComponent {
         window.open(sourceRootPath + this.codeFolder, '_blank');
     }
 }
-/** @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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageCodeFabComponent, decorators: [{
+/** @nocollapse */ DocPageCodeFabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", 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", 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$2.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", 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" }]
         }], ctorParameters: function () { return [{ type: i2.UxAppShellService }]; }, propDecorators: { codeFolder: [{
@@ -670,15 +1105,86 @@ class LoremIpsumSampleComponent {
         this.textSize = 'large';
     }
 }
-/** @nocollapse */ LoremIpsumSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: LoremIpsumSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ LoremIpsumSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: LoremIpsumSampleComponent, selector: "eui-showcase-doc-lorem-ipsum", inputs: { textSize: "textSize" }, ngImport: i0, template: "<div *ngIf=\"textSize === 'small'\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n    Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n    <div class=\"mb-3\">\n        Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque.\n        Aenean consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n    </div>\n    <div class=\"mb-3\">\n        Sed vitae tellus ac nisl facilisis posuere.\n        Mauris cursus dui nec arcu molestie sodales.\n        Morbi vel enim semper, luctus odio vitae, lacinia nisl.\n        Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium.\n        Nunc venenatis eros a leo tincidunt gravida.\n    </div>\n    <div class=\"mb-3\">\n        Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n    </div>\n</div>\n\n<div *ngIf=\"textSize === 'medium'\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n    Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n    <div class=\"mb-3\">\n        Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus.\n        Curabitur venenatis eros at eros ultrices, eu feugiat eros efficitur.\n        Sed quis nulla non augue scelerisque gravida vitae sed neque.\n        Quisque semper dolor non diam sodales suscipit.\n    </div>\n    <div class=\"mb-3\">\n        Donec ut tortor scelerisque, sodales neque id, tempor orci.\n        Suspendisse eu augue at nibh egestas eleifend.\n        Ut tristique enim in lectus aliquam, non tincidunt tortor vulputate.\n        Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n    </div>\n    <div class=\"mb-3\">\n        Vestibulum hendrerit risus a libero gravida venenatis.\n        Mauris non enim sit amet odio pellentesque scelerisque in et velit.\n        Quisque efficitur eros ut magna rutrum aliquet.\n        Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui.\n        Nullam commodo mi quis nibh euismod interdum.\n        In rutrum sapien ac viverra pretium.\n    </div>\n    <div class=\"mb-3\">\n        Ut eget tellus a magna fermentum tempor at id erat.\n        Nam fringilla eros sed leo facilisis, et mollis orci elementum.\n        Donec consectetur libero sed arcu rhoncus, vel elementum augue mollis.\n        Cras facilisis nisl mollis imperdiet mollis.\n    </div>\n    <div class=\"mb-3\">\n        Sed pharetra lorem in justo rhoncus tempor.\n        Phasellus vel elit eget massa consectetur porttitor eu ut ex.\n        Donec sed ex sit amet purus blandit pharetra.\n        Nam rhoncus dolor ac felis condimentum malesuada.\n    </div>\n    <div class=\"mb-3\">\n        Pellentesque convallis nulla in lectus molestie mollis.\n        Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n        Nulla suscipit ante in sollicitudin semper.\n    </div>\n    <div class=\"mb-3\">\n        Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n    </div>\n    <div class=\"mb-3\">\n        Pellentesque gravida diam quis orci suscipit hendrerit.\n        Vestibulum congue sapien sed pretium gravida.\n        Nullam ornare lectus sed pulvinar fringilla.\n        Nam dictum eros sit amet lectus aliquet tincidunt.\n        Quisque eu augue eget felis tincidunt hendrerit.\n        Aenean vel lorem vel sem consequat congue.\n    </div>\n    <div class=\"mb-3\">\n        Phasellus finibus libero at blandit sollicitudin.\n        Praesent pulvinar libero a lorem scelerisque sodales.\n    </div>\n    <div class=\"mb-3\">\n        Donec tempor quam eget turpis dignissim egestas.\n        Pellentesque vulputate nisi eu ornare euismod.\n    </div>\n</div>\n\n<div *ngIf=\"textSize === 'large'\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n    Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n    <div class=\"mb-3\">\n        Nunc sit amet lectus mattis, aliquam mi quis, iaculis est.\n        Donec nec diam tristique, egestas lorem nec, varius neque.\n        Aenean consequat nisi in sem porttitor, a eleifend lorem tincidunt.\n        Phasellus scelerisque tellus eu imperdiet dictum.\n    </div>\n    <div class=\"mb-3\">\n        Sed vitae tellus ac nisl facilisis posuere.\n        Mauris cursus dui nec arcu molestie sodales.\n        Morbi vel enim semper, luctus odio vitae, lacinia nisl.\n        Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium.\n        Nunc venenatis eros a leo tincidunt gravida.\n    </div>\n    <div class=\"mb-3\">\n        Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n    </div>\n    <div class=\"mb-3\">\n        Maecenas at dui nec enim accumsan hendrerit eu et sapien.\n        Praesent posuere tellus feugiat suscipit consectetur.\n        Sed volutpat arcu laoreet, egestas massa venenatis, sagittis nulla.\n        Praesent fermentum nulla at nulla iaculis feugiat in ac dolor.\n        Vestibulum vitae nibh a purus viverra sodales.\n    </div>\n    <div class=\"mb-3\">\n        Aenean fringilla quam at fermentum finibus.\n        Fusce tempor nisl ut dictum facilisis.\n        Phasellus id risus in quam convallis pretium.\n        Phasellus malesuada leo eu dui vehicula tristique.\n    </div>\n    <div class=\"mb-3\">\n        Suspendisse sagittis lacus eu erat ornare congue.\n        In malesuada nunc a risus volutpat eleifend.\n        Aenean hendrerit sapien vel lorem consectetur, et viverra nisi vulputate.\n        Etiam finibus felis vel rutrum tristique.\n    </div>\n    <div class=\"mb-3\">\n        Nulla at felis eget diam rutrum feugiat id vitae dui.\n        Phasellus sit amet orci pharetra, sodales justo a, sagittis turpis.\n        Sed vitae massa molestie nulla tincidunt molestie.\n        Nullam bibendum libero rutrum bibendum ullamcorper.\n    </div>\n    <div class=\"mb-3\">\n        Etiam eget lorem ornare, facilisis ipsum non, varius diam.\n        Nulla eget metus sodales dui placerat sagittis.\n        Nulla blandit tortor a dictum sollicitudin.\n    </div>\n    <div class=\"mb-3\">\n        Nunc non dolor sollicitudin, tristique sem sed, vestibulum diam.\n        Vivamus sollicitudin dui et velit auctor, dignissim egestas metus eleifend.\n        Sed tincidunt dui laoreet sagittis tincidunt.\n        Donec in eros feugiat, auctor lectus eget, pulvinar massa.\n        Aliquam eget nunc aliquet, molestie risus ut, iaculis magna.\n    </div>\n    <div class=\"mb-3\">\n        Mauris bibendum lorem a sem tristique commodo.\n        Duis vitae magna non dui cursus rhoncus nec ac neque.\n    </div>\n    <div class=\"mb-3\">\n        Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus.\n        Curabitur venenatis eros at eros ultrices, eu feugiat eros efficitur.\n        Sed quis nulla non augue scelerisque gravida vitae sed neque.\n        Quisque semper dolor non diam sodales suscipit.\n    </div>\n    <div class=\"mb-3\">\n        Donec ut tortor scelerisque, sodales neque id, tempor orci.\n        Suspendisse eu augue at nibh egestas eleifend.\n        Ut tristique enim in lectus aliquam, non tincidunt tortor vulputate.\n        Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n    </div>\n    <div class=\"mb-3\">\n        Vestibulum hendrerit risus a libero gravida venenatis.\n        Mauris non enim sit amet odio pellentesque scelerisque in et velit.\n        Quisque efficitur eros ut magna rutrum aliquet.\n        Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui.\n        Nullam commodo mi quis nibh euismod interdum.\n        In rutrum sapien ac viverra pretium.\n    </div>\n    <div class=\"mb-3\">\n        Ut eget tellus a magna fermentum tempor at id erat.\n        Nam fringilla eros sed leo facilisis, et mollis orci elementum.\n        Donec consectetur libero sed arcu rhoncus, vel elementum augue mollis.\n        Cras facilisis nisl mollis imperdiet mollis.\n    </div>\n    <div class=\"mb-3\">\n        Sed pharetra lorem in justo rhoncus tempor.\n        Phasellus vel elit eget massa consectetur porttitor eu ut ex.\n        Donec sed ex sit amet purus blandit pharetra.\n        Nam rhoncus dolor ac felis condimentum malesuada.\n    </div>\n    <div class=\"mb-3\">\n        Pellentesque convallis nulla in lectus molestie mollis.\n        Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n        Nulla suscipit ante in sollicitudin semper.\n    </div>\n    <div class=\"mb-3\">\n        Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n    </div>\n    <div class=\"mb-3\">\n        Pellentesque gravida diam quis orci suscipit hendrerit.\n        Vestibulum congue sapien sed pretium gravida.\n        Nullam ornare lectus sed pulvinar fringilla.\n        Nam dictum eros sit amet lectus aliquet tincidunt.\n        Quisque eu augue eget felis tincidunt hendrerit.\n        Aenean vel lorem vel sem consequat congue.\n    </div>\n    <div class=\"mb-3\">\n        Phasellus finibus libero at blandit sollicitudin.\n        Praesent pulvinar libero a lorem scelerisque sodales.\n    </div>\n    <div class=\"mb-3\">\n        Donec tempor quam eget turpis dignissim egestas.\n        Pellentesque vulputate nisi eu ornare euismod.\n    </div>\n</div>\n<div class=\"eui-u-font-size-xs eui-u-color-info\">&lt;end of content&gt; &mdash; This last line must always be visible.</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: LoremIpsumSampleComponent, decorators: [{
+/** @nocollapse */ LoremIpsumSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: LoremIpsumSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ LoremIpsumSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: LoremIpsumSampleComponent, selector: "eui-showcase-doc-lorem-ipsum", inputs: { textSize: "textSize" }, ngImport: i0, template: "<div *ngIf=\"textSize === 'small'\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n    Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n    <div class=\"mb-3\">\n        Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque.\n        Aenean consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n    </div>\n    <div class=\"mb-3\">\n        Sed vitae tellus ac nisl facilisis posuere.\n        Mauris cursus dui nec arcu molestie sodales.\n        Morbi vel enim semper, luctus odio vitae, lacinia nisl.\n        Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium.\n        Nunc venenatis eros a leo tincidunt gravida.\n    </div>\n    <div class=\"mb-3\">\n        Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n    </div>\n</div>\n\n<div *ngIf=\"textSize === 'medium'\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n    Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n    <div class=\"mb-3\">\n        Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus.\n        Curabitur venenatis eros at eros ultrices, eu feugiat eros efficitur.\n        Sed quis nulla non augue scelerisque gravida vitae sed neque.\n        Quisque semper dolor non diam sodales suscipit.\n    </div>\n    <div class=\"mb-3\">\n        Donec ut tortor scelerisque, sodales neque id, tempor orci.\n        Suspendisse eu augue at nibh egestas eleifend.\n        Ut tristique enim in lectus aliquam, non tincidunt tortor vulputate.\n        Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n    </div>\n    <div class=\"mb-3\">\n        Vestibulum hendrerit risus a libero gravida venenatis.\n        Mauris non enim sit amet odio pellentesque scelerisque in et velit.\n        Quisque efficitur eros ut magna rutrum aliquet.\n        Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui.\n        Nullam commodo mi quis nibh euismod interdum.\n        In rutrum sapien ac viverra pretium.\n    </div>\n    <div class=\"mb-3\">\n        Ut eget tellus a magna fermentum tempor at id erat.\n        Nam fringilla eros sed leo facilisis, et mollis orci elementum.\n        Donec consectetur libero sed arcu rhoncus, vel elementum augue mollis.\n        Cras facilisis nisl mollis imperdiet mollis.\n    </div>\n    <div class=\"mb-3\">\n        Sed pharetra lorem in justo rhoncus tempor.\n        Phasellus vel elit eget massa consectetur porttitor eu ut ex.\n        Donec sed ex sit amet purus blandit pharetra.\n        Nam rhoncus dolor ac felis condimentum malesuada.\n    </div>\n    <div class=\"mb-3\">\n        Pellentesque convallis nulla in lectus molestie mollis.\n        Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n        Nulla suscipit ante in sollicitudin semper.\n    </div>\n    <div class=\"mb-3\">\n        Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n    </div>\n    <div class=\"mb-3\">\n        Pellentesque gravida diam quis orci suscipit hendrerit.\n        Vestibulum congue sapien sed pretium gravida.\n        Nullam ornare lectus sed pulvinar fringilla.\n        Nam dictum eros sit amet lectus aliquet tincidunt.\n        Quisque eu augue eget felis tincidunt hendrerit.\n        Aenean vel lorem vel sem consequat congue.\n    </div>\n    <div class=\"mb-3\">\n        Phasellus finibus libero at blandit sollicitudin.\n        Praesent pulvinar libero a lorem scelerisque sodales.\n    </div>\n    <div class=\"mb-3\">\n        Donec tempor quam eget turpis dignissim egestas.\n        Pellentesque vulputate nisi eu ornare euismod.\n    </div>\n</div>\n\n<div *ngIf=\"textSize === 'large'\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n    Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n    <div class=\"mb-3\">\n        Nunc sit amet lectus mattis, aliquam mi quis, iaculis est.\n        Donec nec diam tristique, egestas lorem nec, varius neque.\n        Aenean consequat nisi in sem porttitor, a eleifend lorem tincidunt.\n        Phasellus scelerisque tellus eu imperdiet dictum.\n    </div>\n    <div class=\"mb-3\">\n        Sed vitae tellus ac nisl facilisis posuere.\n        Mauris cursus dui nec arcu molestie sodales.\n        Morbi vel enim semper, luctus odio vitae, lacinia nisl.\n        Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium.\n        Nunc venenatis eros a leo tincidunt gravida.\n    </div>\n    <div class=\"mb-3\">\n        Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n    </div>\n    <div class=\"mb-3\">\n        Maecenas at dui nec enim accumsan hendrerit eu et sapien.\n        Praesent posuere tellus feugiat suscipit consectetur.\n        Sed volutpat arcu laoreet, egestas massa venenatis, sagittis nulla.\n        Praesent fermentum nulla at nulla iaculis feugiat in ac dolor.\n        Vestibulum vitae nibh a purus viverra sodales.\n    </div>\n    <div class=\"mb-3\">\n        Aenean fringilla quam at fermentum finibus.\n        Fusce tempor nisl ut dictum facilisis.\n        Phasellus id risus in quam convallis pretium.\n        Phasellus malesuada leo eu dui vehicula tristique.\n    </div>\n    <div class=\"mb-3\">\n        Suspendisse sagittis lacus eu erat ornare congue.\n        In malesuada nunc a risus volutpat eleifend.\n        Aenean hendrerit sapien vel lorem consectetur, et viverra nisi vulputate.\n        Etiam finibus felis vel rutrum tristique.\n    </div>\n    <div class=\"mb-3\">\n        Nulla at felis eget diam rutrum feugiat id vitae dui.\n        Phasellus sit amet orci pharetra, sodales justo a, sagittis turpis.\n        Sed vitae massa molestie nulla tincidunt molestie.\n        Nullam bibendum libero rutrum bibendum ullamcorper.\n    </div>\n    <div class=\"mb-3\">\n        Etiam eget lorem ornare, facilisis ipsum non, varius diam.\n        Nulla eget metus sodales dui placerat sagittis.\n        Nulla blandit tortor a dictum sollicitudin.\n    </div>\n    <div class=\"mb-3\">\n        Nunc non dolor sollicitudin, tristique sem sed, vestibulum diam.\n        Vivamus sollicitudin dui et velit auctor, dignissim egestas metus eleifend.\n        Sed tincidunt dui laoreet sagittis tincidunt.\n        Donec in eros feugiat, auctor lectus eget, pulvinar massa.\n        Aliquam eget nunc aliquet, molestie risus ut, iaculis magna.\n    </div>\n    <div class=\"mb-3\">\n        Mauris bibendum lorem a sem tristique commodo.\n        Duis vitae magna non dui cursus rhoncus nec ac neque.\n    </div>\n    <div class=\"mb-3\">\n        Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus.\n        Curabitur venenatis eros at eros ultrices, eu feugiat eros efficitur.\n        Sed quis nulla non augue scelerisque gravida vitae sed neque.\n        Quisque semper dolor non diam sodales suscipit.\n    </div>\n    <div class=\"mb-3\">\n        Donec ut tortor scelerisque, sodales neque id, tempor orci.\n        Suspendisse eu augue at nibh egestas eleifend.\n        Ut tristique enim in lectus aliquam, non tincidunt tortor vulputate.\n        Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n    </div>\n    <div class=\"mb-3\">\n        Vestibulum hendrerit risus a libero gravida venenatis.\n        Mauris non enim sit amet odio pellentesque scelerisque in et velit.\n        Quisque efficitur eros ut magna rutrum aliquet.\n        Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui.\n        Nullam commodo mi quis nibh euismod interdum.\n        In rutrum sapien ac viverra pretium.\n    </div>\n    <div class=\"mb-3\">\n        Ut eget tellus a magna fermentum tempor at id erat.\n        Nam fringilla eros sed leo facilisis, et mollis orci elementum.\n        Donec consectetur libero sed arcu rhoncus, vel elementum augue mollis.\n        Cras facilisis nisl mollis imperdiet mollis.\n    </div>\n    <div class=\"mb-3\">\n        Sed pharetra lorem in justo rhoncus tempor.\n        Phasellus vel elit eget massa consectetur porttitor eu ut ex.\n        Donec sed ex sit amet purus blandit pharetra.\n        Nam rhoncus dolor ac felis condimentum malesuada.\n    </div>\n    <div class=\"mb-3\">\n        Pellentesque convallis nulla in lectus molestie mollis.\n        Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n        Nulla suscipit ante in sollicitudin semper.\n    </div>\n    <div class=\"mb-3\">\n        Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n    </div>\n    <div class=\"mb-3\">\n        Pellentesque gravida diam quis orci suscipit hendrerit.\n        Vestibulum congue sapien sed pretium gravida.\n        Nullam ornare lectus sed pulvinar fringilla.\n        Nam dictum eros sit amet lectus aliquet tincidunt.\n        Quisque eu augue eget felis tincidunt hendrerit.\n        Aenean vel lorem vel sem consequat congue.\n    </div>\n    <div class=\"mb-3\">\n        Phasellus finibus libero at blandit sollicitudin.\n        Praesent pulvinar libero a lorem scelerisque sodales.\n    </div>\n    <div class=\"mb-3\">\n        Donec tempor quam eget turpis dignissim egestas.\n        Pellentesque vulputate nisi eu ornare euismod.\n    </div>\n</div>\n<div class=\"eui-u-font-size-xs eui-u-color-info\">&lt;end of content&gt; &mdash; This last line must always be visible.</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: LoremIpsumSampleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-showcase-doc-lorem-ipsum', template: "<div *ngIf=\"textSize === 'small'\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n    Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n    <div class=\"mb-3\">\n        Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque.\n        Aenean consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n    </div>\n    <div class=\"mb-3\">\n        Sed vitae tellus ac nisl facilisis posuere.\n        Mauris cursus dui nec arcu molestie sodales.\n        Morbi vel enim semper, luctus odio vitae, lacinia nisl.\n        Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium.\n        Nunc venenatis eros a leo tincidunt gravida.\n    </div>\n    <div class=\"mb-3\">\n        Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n    </div>\n</div>\n\n<div *ngIf=\"textSize === 'medium'\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n    Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n    <div class=\"mb-3\">\n        Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus.\n        Curabitur venenatis eros at eros ultrices, eu feugiat eros efficitur.\n        Sed quis nulla non augue scelerisque gravida vitae sed neque.\n        Quisque semper dolor non diam sodales suscipit.\n    </div>\n    <div class=\"mb-3\">\n        Donec ut tortor scelerisque, sodales neque id, tempor orci.\n        Suspendisse eu augue at nibh egestas eleifend.\n        Ut tristique enim in lectus aliquam, non tincidunt tortor vulputate.\n        Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n    </div>\n    <div class=\"mb-3\">\n        Vestibulum hendrerit risus a libero gravida venenatis.\n        Mauris non enim sit amet odio pellentesque scelerisque in et velit.\n        Quisque efficitur eros ut magna rutrum aliquet.\n        Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui.\n        Nullam commodo mi quis nibh euismod interdum.\n        In rutrum sapien ac viverra pretium.\n    </div>\n    <div class=\"mb-3\">\n        Ut eget tellus a magna fermentum tempor at id erat.\n        Nam fringilla eros sed leo facilisis, et mollis orci elementum.\n        Donec consectetur libero sed arcu rhoncus, vel elementum augue mollis.\n        Cras facilisis nisl mollis imperdiet mollis.\n    </div>\n    <div class=\"mb-3\">\n        Sed pharetra lorem in justo rhoncus tempor.\n        Phasellus vel elit eget massa consectetur porttitor eu ut ex.\n        Donec sed ex sit amet purus blandit pharetra.\n        Nam rhoncus dolor ac felis condimentum malesuada.\n    </div>\n    <div class=\"mb-3\">\n        Pellentesque convallis nulla in lectus molestie mollis.\n        Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n        Nulla suscipit ante in sollicitudin semper.\n    </div>\n    <div class=\"mb-3\">\n        Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n    </div>\n    <div class=\"mb-3\">\n        Pellentesque gravida diam quis orci suscipit hendrerit.\n        Vestibulum congue sapien sed pretium gravida.\n        Nullam ornare lectus sed pulvinar fringilla.\n        Nam dictum eros sit amet lectus aliquet tincidunt.\n        Quisque eu augue eget felis tincidunt hendrerit.\n        Aenean vel lorem vel sem consequat congue.\n    </div>\n    <div class=\"mb-3\">\n        Phasellus finibus libero at blandit sollicitudin.\n        Praesent pulvinar libero a lorem scelerisque sodales.\n    </div>\n    <div class=\"mb-3\">\n        Donec tempor quam eget turpis dignissim egestas.\n        Pellentesque vulputate nisi eu ornare euismod.\n    </div>\n</div>\n\n<div *ngIf=\"textSize === 'large'\">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n    Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n    <div class=\"mb-3\">\n        Nunc sit amet lectus mattis, aliquam mi quis, iaculis est.\n        Donec nec diam tristique, egestas lorem nec, varius neque.\n        Aenean consequat nisi in sem porttitor, a eleifend lorem tincidunt.\n        Phasellus scelerisque tellus eu imperdiet dictum.\n    </div>\n    <div class=\"mb-3\">\n        Sed vitae tellus ac nisl facilisis posuere.\n        Mauris cursus dui nec arcu molestie sodales.\n        Morbi vel enim semper, luctus odio vitae, lacinia nisl.\n        Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium.\n        Nunc venenatis eros a leo tincidunt gravida.\n    </div>\n    <div class=\"mb-3\">\n        Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n    </div>\n    <div class=\"mb-3\">\n        Maecenas at dui nec enim accumsan hendrerit eu et sapien.\n        Praesent posuere tellus feugiat suscipit consectetur.\n        Sed volutpat arcu laoreet, egestas massa venenatis, sagittis nulla.\n        Praesent fermentum nulla at nulla iaculis feugiat in ac dolor.\n        Vestibulum vitae nibh a purus viverra sodales.\n    </div>\n    <div class=\"mb-3\">\n        Aenean fringilla quam at fermentum finibus.\n        Fusce tempor nisl ut dictum facilisis.\n        Phasellus id risus in quam convallis pretium.\n        Phasellus malesuada leo eu dui vehicula tristique.\n    </div>\n    <div class=\"mb-3\">\n        Suspendisse sagittis lacus eu erat ornare congue.\n        In malesuada nunc a risus volutpat eleifend.\n        Aenean hendrerit sapien vel lorem consectetur, et viverra nisi vulputate.\n        Etiam finibus felis vel rutrum tristique.\n    </div>\n    <div class=\"mb-3\">\n        Nulla at felis eget diam rutrum feugiat id vitae dui.\n        Phasellus sit amet orci pharetra, sodales justo a, sagittis turpis.\n        Sed vitae massa molestie nulla tincidunt molestie.\n        Nullam bibendum libero rutrum bibendum ullamcorper.\n    </div>\n    <div class=\"mb-3\">\n        Etiam eget lorem ornare, facilisis ipsum non, varius diam.\n        Nulla eget metus sodales dui placerat sagittis.\n        Nulla blandit tortor a dictum sollicitudin.\n    </div>\n    <div class=\"mb-3\">\n        Nunc non dolor sollicitudin, tristique sem sed, vestibulum diam.\n        Vivamus sollicitudin dui et velit auctor, dignissim egestas metus eleifend.\n        Sed tincidunt dui laoreet sagittis tincidunt.\n        Donec in eros feugiat, auctor lectus eget, pulvinar massa.\n        Aliquam eget nunc aliquet, molestie risus ut, iaculis magna.\n    </div>\n    <div class=\"mb-3\">\n        Mauris bibendum lorem a sem tristique commodo.\n        Duis vitae magna non dui cursus rhoncus nec ac neque.\n    </div>\n    <div class=\"mb-3\">\n        Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus.\n        Curabitur venenatis eros at eros ultrices, eu feugiat eros efficitur.\n        Sed quis nulla non augue scelerisque gravida vitae sed neque.\n        Quisque semper dolor non diam sodales suscipit.\n    </div>\n    <div class=\"mb-3\">\n        Donec ut tortor scelerisque, sodales neque id, tempor orci.\n        Suspendisse eu augue at nibh egestas eleifend.\n        Ut tristique enim in lectus aliquam, non tincidunt tortor vulputate.\n        Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n    </div>\n    <div class=\"mb-3\">\n        Vestibulum hendrerit risus a libero gravida venenatis.\n        Mauris non enim sit amet odio pellentesque scelerisque in et velit.\n        Quisque efficitur eros ut magna rutrum aliquet.\n        Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui.\n        Nullam commodo mi quis nibh euismod interdum.\n        In rutrum sapien ac viverra pretium.\n    </div>\n    <div class=\"mb-3\">\n        Ut eget tellus a magna fermentum tempor at id erat.\n        Nam fringilla eros sed leo facilisis, et mollis orci elementum.\n        Donec consectetur libero sed arcu rhoncus, vel elementum augue mollis.\n        Cras facilisis nisl mollis imperdiet mollis.\n    </div>\n    <div class=\"mb-3\">\n        Sed pharetra lorem in justo rhoncus tempor.\n        Phasellus vel elit eget massa consectetur porttitor eu ut ex.\n        Donec sed ex sit amet purus blandit pharetra.\n        Nam rhoncus dolor ac felis condimentum malesuada.\n    </div>\n    <div class=\"mb-3\">\n        Pellentesque convallis nulla in lectus molestie mollis.\n        Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n        Nulla suscipit ante in sollicitudin semper.\n    </div>\n    <div class=\"mb-3\">\n        Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n    </div>\n    <div class=\"mb-3\">\n        Pellentesque gravida diam quis orci suscipit hendrerit.\n        Vestibulum congue sapien sed pretium gravida.\n        Nullam ornare lectus sed pulvinar fringilla.\n        Nam dictum eros sit amet lectus aliquet tincidunt.\n        Quisque eu augue eget felis tincidunt hendrerit.\n        Aenean vel lorem vel sem consequat congue.\n    </div>\n    <div class=\"mb-3\">\n        Phasellus finibus libero at blandit sollicitudin.\n        Praesent pulvinar libero a lorem scelerisque sodales.\n    </div>\n    <div class=\"mb-3\">\n        Donec tempor quam eget turpis dignissim egestas.\n        Pellentesque vulputate nisi eu ornare euismod.\n    </div>\n</div>\n<div class=\"eui-u-font-size-xs eui-u-color-info\">&lt;end of content&gt; &mdash; This last line must always be visible.</div>\n" }]
         }], propDecorators: { textSize: [{
                 type: Input
             }] } });
 
+/* eslint-disable */
+class DocPagePatternSampleDirective {
+}
+/** @nocollapse */ DocPagePatternSampleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPagePatternSampleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DocPagePatternSampleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPagePatternSampleDirective, selector: "docPagePatternSample", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", 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", ngImport: i0, type: DocPagePatternDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DocPagePatternDocDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPagePatternDocDirective, selector: "docPagePatternDoc", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPagePatternDocDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'docPagePatternDoc' }]
+        }] });
+class DocPagePatternComponent extends BaseDirective {
+    constructor(sanitizer) {
+        super();
+        this.sanitizer = sanitizer;
+        this.anatomyRefs = [];
+        this.dos = [];
+        this.donts = [];
+    }
+    get cssClasses() {
+        return [
+            super.getCssClasses('doc-page-pattern'),
+        ].join(' ').trim();
+    }
+    ngOnInit() {
+        if (this.figmaEmbedSrc) {
+            this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.figmaEmbedSrc);
+            const iFrame = document.getElementById('iframe-figma');
+        }
+    }
+}
+/** @nocollapse */ DocPagePatternComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPagePatternComponent, deps: [{ token: i3$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ DocPagePatternComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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", figmaEmbedSrc: "figmaEmbedSrc" }, 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            <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n                <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n            </ng-container>\n            <ng-template #screenshot>\n                <img src=\"assets/images/design-system/{{anatomyImage}}.png\" width=\"60%\"/>\n            </ng-template>\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            <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: i3$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["onCollapsed", "collapse"] }, { kind: "component", type: i3$1.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["avatarUrl", "expandLabel", "collapseLabel", "iconClass", "avatarDerscription", "iconDescription", "isHeaderBodyOnly", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i3$1.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$1.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content" }, { 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: i5.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", 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            <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n                <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n            </ng-container>\n            <ng-template #screenshot>\n                <img src=\"assets/images/design-system/{{anatomyImage}}.png\" width=\"60%\"/>\n            </ng-template>\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            <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 [{ type: i3$2.DomSanitizer }]; }, 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
+            }], figmaEmbedSrc: [{
+                type: Input
+            }] } });
+
 const COMPONENTS = [
     EuiCodeHighlighterDirective,
     DocPageComponent,
@@ -702,11 +1208,15 @@ const COMPONENTS = [
     DocSectionCodeDocTagDirective,
     DocSectionCodeDescriptionTagDirective,
     LoremIpsumSampleComponent,
+    PlaygroundComponent,
+    DocPagePatternComponent,
+    DocPagePatternDocDirective,
+    DocPagePatternSampleDirective,
 ];
 class EuiShowcaseModule {
 }
-/** @nocollapse */ EuiShowcaseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EuiShowcaseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ EuiShowcaseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.0-next.4", ngImport: i0, type: EuiShowcaseModule, declarations: [EuiCodeHighlighterDirective,
+/** @nocollapse */ EuiShowcaseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiShowcaseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ EuiShowcaseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.0", ngImport: i0, type: EuiShowcaseModule, declarations: [EuiCodeHighlighterDirective,
         DocPageComponent,
         DocPageCodeComponent,
         DocPageCodeFabComponent,
@@ -727,14 +1237,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,16 +1271,22 @@ class EuiShowcaseModule {
         DocSectionCodeCssTagDirective,
         DocSectionCodeDocTagDirective,
         DocSectionCodeDescriptionTagDirective,
-        LoremIpsumSampleComponent] });
-/** @nocollapse */ EuiShowcaseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EuiShowcaseModule, imports: [CommonModule,
+        LoremIpsumSampleComponent,
+        PlaygroundComponent,
+        DocPagePatternComponent,
+        DocPagePatternDocDirective,
+        DocPagePatternSampleDirective] });
+/** @nocollapse */ EuiShowcaseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiShowcaseModule, imports: [CommonModule,
         EuiCardModule,
         EuiButtonModule,
         EuiTabsModule,
         EuiPageModule,
         EuiChipModule,
         EuiDialogModule,
-        EuiAlertModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EuiShowcaseModule, decorators: [{
+        EuiAlertModule,
+        EuiBlockContentModule,
+        EuiBadgeModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiShowcaseModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENTS],
@@ -777,6 +1299,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
                         EuiChipModule,
                         EuiDialogModule,
                         EuiAlertModule,
+                        EuiBlockContentModule,
+                        EuiBadgeModule,
                     ],
                     exports: [...COMPONENTS],
                 }]
@@ -786,5 +1310,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