@eui/showcase 23.0.0-alpha.10 → 23.0.0-alpha.11

package/fesm2022/eui-showcase.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, input, Component, inject, ChangeDetectorRef, afterNextRender, ViewEncapsulation, ElementRef, Renderer2, effect, Directive, booleanAttribute, model, contentChildren, forwardRef, viewChild, DestroyRef, Injector, HostListener, contentChild } from '@angular/core';
+import { signal, Injectable, input, Component, inject, ChangeDetectorRef, afterNextRender, ViewEncapsulation, ElementRef, Renderer2, effect, Directive, booleanAttribute, model, contentChildren, forwardRef, viewChild, NgZone, DestroyRef, Injector, ViewChild, ContentChildren, HostListener, contentChild } from '@angular/core';
 import * as i1 from '@eui/components/eui-icon';
 import { EUI_ICON } from '@eui/components/eui-icon';
 import * as i2 from '@eui/components/eui-button';
@@ -13,8 +13,6 @@ import { MarkdownService, MarkdownModule } from 'ngx-markdown';
 import * as i3 from '@eui/components/eui-page';
 import { EUI_PAGE } from '@eui/components/eui-page';
 import { NgClass, Location } from '@angular/common';
-import * as i3$1 from '@eui/components/eui-page-v2';
-import { EUI_PAGE as EUI_PAGE$1 } from '@eui/components/eui-page-v2';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Clipboard } from '@angular/cdk/clipboard';
 import { lastValueFrom, forkJoin, Observable } from 'rxjs';
@@ -22,19 +20,19 @@ import { EuiAppShellService, EuiGrowlService } from '@eui/core';
 import * as i2$2 from '@eui/components/eui-tabs';
 import { EUI_TABS } from '@eui/components/eui-tabs';
 import sdk from '@stackblitz/sdk';
-import * as i4 from '@eui/components/eui-label';
+import * as i2$3 from '@eui/components/eui-label';
 import { EUI_LABEL } from '@eui/components/eui-label';
-import * as i3$2 from '@eui/components/eui-card';
+import * as i3$1 from '@eui/components/eui-card';
 import { EUI_CARD } from '@eui/components/eui-card';
 import * as i1$1 from '@eui/components/eui-alert';
 import { EUI_ALERT } from '@eui/components/eui-alert';
-import * as i5 from '@eui/components/eui-chip';
+import * as i4 from '@eui/components/eui-chip';
 import { EUI_CHIP } from '@eui/components/eui-chip';
-import * as i2$3 from '@eui/components/eui-dialog';
+import * as i2$4 from '@eui/components/eui-dialog';
 import { EUI_DIALOG } from '@eui/components/eui-dialog';
-import * as i5$1 from '@eui/components/eui-badge';
+import * as i5 from '@eui/components/eui-badge';
 import { EUI_BADGE } from '@eui/components/eui-badge';
-import * as i5$2 from '@eui/components/eui-avatar';
+import * as i5$1 from '@eui/components/eui-avatar';
 import { EUI_AVATAR } from '@eui/components/eui-avatar';
 import * as i1$2 from '@eui/components/eui-block-content';
 import { EUI_BLOCK_CONTENT } from '@eui/components/eui-block-content';
@@ -201,97 +199,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     ], template: "<eui-page>\n    <eui-page-content>\n        <eui-page-columns>\n            <eui-page-column>\n                <eui-page-column-body>\n                    <span id=\"top\"></span>\n                    <markdown class=\"doc-content\" [data]=\"markdown\" />\n                </eui-page-column-body>\n            </eui-page-column>\n\n            <eui-page-column class=\"eui-u-hidden-mobile\"\n                label=\"On this page\"\n                euiSizeVariant=\"4xl\"\n                isCollapsible\n                isRightCollapsible>\n\n                <eui-page-column-body>\n                    <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n                        <ul class=\"doc-page-navigation\">\n                            @for (header of headers; track header.id) {\n                                <li class=\"doc-page-navigation-item\" (click)=\"onNavClick(header.id)\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === header.id\">\n                                    <span [ngClass]=\"header.level === 3 ? 'eui-u-ml-m eui-u-f-regular': ''\">\n                                        {{header.label}}\n                                    </span>\n                                </li>\n                            }\n                        </ul>\n                    </div>\n                </eui-page-column-body>\n\n            </eui-page-column>\n\n        </eui-page-columns>\n    </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { rootDocsFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootDocsFolder", required: false }] }], showcaseName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcaseName", required: false }] }] } });
 
-class DocPageDevGuideComponentV2 {
-    constructor() {
-        this.rootDocsFolder = input('docs', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rootDocsFolder" }] : /* istanbul ignore next */ []));
-        this.showcaseName = input('showcase-dev-guide', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "showcaseName" }] : /* istanbul ignore next */ []));
-        this.headers = [];
-        this.markdownService = inject(MarkdownService);
-        this.http = inject(HttpClient);
-        this.router = inject(Router);
-        this.route = inject(ActivatedRoute);
-        this.route.url.pipe(takeUntilDestroyed()).subscribe((u) => {
-            this._loadMdContent(`/${this.rootDocsFolder()}/` + u.join('/'));
-        });
-        this.route.fragment.pipe(take(1), takeUntilDestroyed()).subscribe((fragment) => {
-            if (fragment) {
-                this.fragmentId = fragment;
-                afterNextRender(() => {
-                    const fgm = document.getElementById(fragment);
-                    fgm?.scrollIntoView();
-                });
-            }
-        });
-    }
-    ngOnInit() {
-        /**
-         * callback for heading renderer. It will be called for each heading in the markdown.
-         */
-        this.markdownService.renderer.heading = ({ raw, text, depth }) => {
-            if (depth === 2 || depth === 3) {
-                const newHeader = `<h${depth} id="${raw}">${text}</h${depth}>`;
-                if (text.indexOf('<a ') === -1 && text.indexOf('<em>') === -1) {
-                    this.headers.push({ id: raw, label: raw, level: depth });
-                }
-                return newHeader;
-            }
-            return `<h${depth}>${text}</h${depth}>`;
-        };
-    }
-    ngAfterViewInit() {
-        // Fragment scrolling is handled in constructor via afterNextRender
-    }
-    onNavClick(fragmentId) {
-        this._scrollToFragment(fragmentId);
-    }
-    _loadMdContent(url) {
-        let mdPath, contextRoot;
-        const currentUrl = window.location;
-        const pathNameArray = currentUrl.pathname.split('/');
-        this.headers = [];
-        if (url) {
-            mdPath = url.substring(1);
-        }
-        else {
-            mdPath = pathNameArray.slice(pathNameArray.length - 3).join('/');
-        }
-        contextRoot = `${currentUrl.protocol}//${currentUrl.host}`;
-        if (pathNameArray[1] !== this.showcaseName()) {
-            contextRoot += `/${pathNameArray[1]}`;
-        }
-        const filePath = `${contextRoot}/assets/${mdPath}.md`;
-        this.http.get(filePath, { responseType: 'text' }).pipe(map((md) => md.replace(new RegExp(`assets/${this.rootDocsFolder()}`, 'g'), `${contextRoot}/assets/${this.rootDocsFolder()}`))).subscribe((md) => {
-            this.markdown = md;
-            const top = document.getElementById('top');
-            top?.scrollIntoView();
-        });
-    }
-    _scrollToFragment(fragmentId) {
-        this.router.onSameUrlNavigation = 'reload';
-        this.router.navigate(['.'], { relativeTo: this.route, fragment: fragmentId });
-        if (fragmentId) {
-            setTimeout(() => {
-                const fgm = document.getElementById(fragmentId);
-                if (fgm) {
-                    fgm.scrollIntoView();
-                }
-            });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageDevGuideComponentV2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPageDevGuideComponentV2, isStandalone: true, selector: "eui-showcase-doc-page-dev-guide-v2", inputs: { rootDocsFolder: { classPropertyName: "rootDocsFolder", publicName: "rootDocsFolder", isSignal: true, isRequired: false, transformFunction: null }, showcaseName: { classPropertyName: "showcaseName", publicName: "showcaseName", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-doc-page" }, ngImport: i0, template: "<eui-page>\n    <eui-page-content>\n        <eui-page-columns>\n            <eui-page-column>\n                <eui-page-column-body>\n                    <span id=\"top\"></span>\n                    <markdown class=\"doc-content\" [data]=\"markdown\" />\n                </eui-page-column-body>\n            </eui-page-column>\n\n            <eui-page-column class=\"eui-u-hidden-mobile\"\n                label=\"On this page\"\n                euiSizeVariant=\"4xl\"\n                isCollapsible\n                isRightCollapsible>\n\n                <eui-page-column-body>\n                    <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n                        <ul class=\"doc-page-navigation\">\n                            @for (header of headers; track header.id) {\n                                <li class=\"doc-page-navigation-item\" (click)=\"onNavClick(header.id)\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === header.id\">\n                                    <span [ngClass]=\"header.level === 3 ? 'eui-u-ml-m eui-u-f-regular': ''\">\n                                        {{header.label}}\n                                    </span>\n                                </li>\n                            }\n                        </ul>\n                    </div>\n                </eui-page-column-body>\n\n            </eui-page-column>\n\n        </eui-page-columns>\n    </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page{display:flex;width:100%;height:100%}.eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-3xl)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-4xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-primary);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-xl);font:var(--eui-f-xl)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);font:var(--eui-f-l-bold)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$1.EuiPage, selector: "eui-page" }, { kind: "component", type: i3$1.EuiPageContent, selector: "eui-page-content" }, { kind: "component", type: i3$1.EuiPageColumns, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3$1.EuiPageColumn, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile"], outputs: ["collapse", "headerCollapse"] }, { kind: "component", type: i3$1.EuiPageColumnBody, selector: "eui-page-column-body" }, { kind: "ngmodule", type: MarkdownModule }, { kind: "component", type: i2$1.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageDevGuideComponentV2, decorators: [{
-            type: Component,
-            args: [{ selector: 'eui-showcase-doc-page-dev-guide-v2', encapsulation: ViewEncapsulation.None, host: { class: 'eui-doc-page' }, imports: [
-                        NgClass,
-                        ...EUI_PAGE$1,
-                        MarkdownModule,
-                    ], template: "<eui-page>\n    <eui-page-content>\n        <eui-page-columns>\n            <eui-page-column>\n                <eui-page-column-body>\n                    <span id=\"top\"></span>\n                    <markdown class=\"doc-content\" [data]=\"markdown\" />\n                </eui-page-column-body>\n            </eui-page-column>\n\n            <eui-page-column class=\"eui-u-hidden-mobile\"\n                label=\"On this page\"\n                euiSizeVariant=\"4xl\"\n                isCollapsible\n                isRightCollapsible>\n\n                <eui-page-column-body>\n                    <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n                        <ul class=\"doc-page-navigation\">\n                            @for (header of headers; track header.id) {\n                                <li class=\"doc-page-navigation-item\" (click)=\"onNavClick(header.id)\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === header.id\">\n                                    <span [ngClass]=\"header.level === 3 ? 'eui-u-ml-m eui-u-f-regular': ''\">\n                                        {{header.label}}\n                                    </span>\n                                </li>\n                            }\n                        </ul>\n                    </div>\n                </eui-page-column-body>\n\n            </eui-page-column>\n\n        </eui-page-columns>\n    </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page{display:flex;width:100%;height:100%}.eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-3xl)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-4xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-primary);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-xl);font:var(--eui-f-xl)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);font:var(--eui-f-l-bold)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { rootDocsFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootDocsFolder", required: false }] }], showcaseName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcaseName", required: false }] }] } });
-
 const polyfillsFile = 'import \'zone.js\';';
 const mainFile = (moduleName, componentName) => `
 import './polyfills';
@@ -1012,7 +919,7 @@ class DocSampleComponent {
         return content.replace(patternHtml, '').replace(patternTS, '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocSampleComponent, isStandalone: true, selector: "eui-showcase-doc-sample", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, renderPlayground: { classPropertyName: "renderPlayground", publicName: "renderPlayground", isSignal: true, isRequired: false, transformFunction: null }, isCodeButtonVisible: { classPropertyName: "isCodeButtonVisible", publicName: "isCodeButtonVisible", isSignal: true, isRequired: false, transformFunction: null }, isInnerSection: { classPropertyName: "isInnerSection", publicName: "isInnerSection", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-showcase-doc-sample" }, ngImport: i0, template: "<div class=\"doc-sample-title\">\n    <div class=\"doc-sample-title__label\" [class.doc-sample-title__label--inner]=\"isInnerSection()\">\n        {{ label() || id() }}\n        <button\n            euiButton\n            euiIconButton\n            euiBasicButton\n            euiRounded\n            euiPrimary\n            euiSizeS\n            aria-label=\"Click to copy link url to keyboard\"\n            (click)=\"copyCurrentUrlToClipboard(id())\"\n            class=\"doc-sample-title__link\"\n            tabindex=\"-1\">\n            <eui-icon-svg icon=\"eui-link\" size=\"l\" fillColor=\"secondary\" />\n        </button>\n    </div>\n    @if (shouldRenderPlayground()) {\n    <div class=\"doc-sample-title__items eui-u-mr-s\">\n      @if (isCodeButtonVisible()) {\n        <button\n            type=\"button\"\n            euiButton\n            [euiOutline]=\"!isCodeExpanded\"\n            euiPrimary\n            euiSizeXS\n            (click)=\"onStackblitzOpen()\">\n            <span euiLabel>Stackblitz</span>\n            <eui-icon-svg icon=\"eui-flash\" />\n        </button>\n      }\n    </div>\n    }\n    <div class=\"doc-sample-title__items\">\n        @if (isCodeButtonVisible()) {\n            <button\n                type=\"button\"\n                euiButton\n                [euiOutline]=\"!isCodeExpanded\"\n                euiPrimary\n                euiSizeXS\n                (click)=\"onToggleCode()\"\n                [euiDisabled]=\"isCodeLoading\">\n                @if (isCodeLoading) {\n                    <eui-icon-svg isLoading />\n                }\n                @if (!isCodeExpanded) {\n                    <span euiLabel>Code</span>\n                }\n                @if (isCodeExpanded) {\n                    <span euiLabel>Hide Code</span>\n                }\n                <eui-icon-svg icon=\"eui-code\" />\n            </button>\n        }\n    </div>\n</div>\n\n@if(isCodeExpanded) {\n    <eui-card euiNoContentPadding class=\"eui-u-mb-m\">\n        <eui-card-content>\n            <eui-tabs (tabActivate)=\"onTabActivate($event)\">\n                @for (file of sampleFiles; track file.name) {\n                    <eui-tab>\n                        <eui-tab-header>\n                            <eui-label>{{ file.label }}</eui-label>\n                        </eui-tab-header>\n                        <eui-tab-body>\n                            <pre><code [class]=\"getCodeLanguage(file.type)\" euiCode>{{ file.type === 'typescript' ? filterOutModuleAndImports(file.content) : file.content }}</code></pre>\n                        </eui-tab-body>\n                    </eui-tab>\n                }\n            </eui-tabs>\n        </eui-card-content>\n    </eui-card>\n}\n\n<ng-content />\n", styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-5xl);margin-top:var(--eui-s-10xl);width:100%}.eui-showcase-doc-sample:first-child{margin-top:var(--eui-s-xl)}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-s);border-bottom:1px solid var(--eui-c-divider)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-s-xl);width:100%;font:var(--eui-f-xl-semi-bold)}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-text-light);font:var(--eui-f-l)}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-s-m)}.eui-showcase-doc-sample .doc-sample-section-title,.eui-showcase-doc-sample h6.section-title{border-bottom:none;margin:var(--eui-s-9xl) 0 var(--eui-s-xs) 0;width:auto;display:table;color:var(--eui-c-info);font:var(--eui-f-l)!important}.eui-showcase-doc-sample .doc-sample-section-title:first-child,.eui-showcase-doc-sample h6.section-title:first-child{margin-top:var(--eui-s-m)!important}.eui-showcase-doc-sample .doc-sample-section-subtitle{border-bottom:none;letter-spacing:-.25px;margin:var(--eui-s-xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-primary);font:var(--eui-f)!important}\n"], dependencies: [{ kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i4.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i3$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocSampleComponent, isStandalone: true, selector: "eui-showcase-doc-sample", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, renderPlayground: { classPropertyName: "renderPlayground", publicName: "renderPlayground", isSignal: true, isRequired: false, transformFunction: null }, isCodeButtonVisible: { classPropertyName: "isCodeButtonVisible", publicName: "isCodeButtonVisible", isSignal: true, isRequired: false, transformFunction: null }, isInnerSection: { classPropertyName: "isInnerSection", publicName: "isInnerSection", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-showcase-doc-sample" }, ngImport: i0, template: "<div class=\"doc-sample-title\">\n    <div class=\"doc-sample-title__label\" [class.doc-sample-title__label--inner]=\"isInnerSection()\">\n        {{ label() || id() }}\n        <button\n            euiButton\n            euiIconButton\n            euiBasicButton\n            euiRounded\n            euiPrimary\n            euiSizeS\n            aria-label=\"Click to copy link url to keyboard\"\n            (click)=\"copyCurrentUrlToClipboard(id())\"\n            class=\"doc-sample-title__link\"\n            tabindex=\"-1\">\n            <eui-icon-svg icon=\"eui-link\" size=\"l\" fillColor=\"secondary\" />\n        </button>\n    </div>\n    @if (shouldRenderPlayground()) {\n    <div class=\"doc-sample-title__items eui-u-mr-s\">\n      @if (isCodeButtonVisible()) {\n        <button\n            type=\"button\"\n            euiButton\n            [euiOutline]=\"!isCodeExpanded\"\n            euiPrimary\n            euiSizeXS\n            (click)=\"onStackblitzOpen()\">\n            <span euiLabel>Stackblitz</span>\n            <eui-icon-svg icon=\"eui-flash\" />\n        </button>\n      }\n    </div>\n    }\n    <div class=\"doc-sample-title__items\">\n        @if (isCodeButtonVisible()) {\n            <button\n                type=\"button\"\n                euiButton\n                [euiOutline]=\"!isCodeExpanded\"\n                euiPrimary\n                euiSizeXS\n                (click)=\"onToggleCode()\"\n                [euiDisabled]=\"isCodeLoading\">\n                @if (isCodeLoading) {\n                    <eui-icon-svg isLoading />\n                }\n                @if (!isCodeExpanded) {\n                    <span euiLabel>Code</span>\n                }\n                @if (isCodeExpanded) {\n                    <span euiLabel>Hide Code</span>\n                }\n                <eui-icon-svg icon=\"eui-code\" />\n            </button>\n        }\n    </div>\n</div>\n\n@if(isCodeExpanded) {\n    <eui-card euiNoContentPadding class=\"eui-u-mb-m\">\n        <eui-card-content>\n            <eui-tabs (tabActivate)=\"onTabActivate($event)\">\n                @for (file of sampleFiles; track file.name) {\n                    <eui-tab>\n                        <eui-tab-header>\n                            <eui-label>{{ file.label }}</eui-label>\n                        </eui-tab-header>\n                        <eui-tab-body>\n                            <pre><code [class]=\"getCodeLanguage(file.type)\" euiCode>{{ file.type === 'typescript' ? filterOutModuleAndImports(file.content) : file.content }}</code></pre>\n                        </eui-tab-body>\n                    </eui-tab>\n                }\n            </eui-tabs>\n        </eui-card-content>\n    </eui-card>\n}\n\n<ng-content />\n", styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-5xl);margin-top:var(--eui-s-10xl);width:100%}.eui-showcase-doc-sample:first-child{margin-top:var(--eui-s-xl)}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-s);border-bottom:1px solid var(--eui-c-divider)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-s-xl);width:100%;font:var(--eui-f-xl-semi-bold)}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-text-light);font:var(--eui-f-l)}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-s-m)}.eui-showcase-doc-sample .doc-sample-section-title,.eui-showcase-doc-sample h6.section-title{border-bottom:none;margin:var(--eui-s-9xl) 0 var(--eui-s-xs) 0;width:auto;display:table;color:var(--eui-c-info);font:var(--eui-f-l)!important}.eui-showcase-doc-sample .doc-sample-section-title:first-child,.eui-showcase-doc-sample h6.section-title:first-child{margin-top:var(--eui-s-m)!important}.eui-showcase-doc-sample .doc-sample-section-subtitle{border-bottom:none;letter-spacing:-.25px;margin:var(--eui-s-xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-primary);font:var(--eui-f)!important}\n"], dependencies: [{ kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i2$3.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i3$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSampleComponent, decorators: [{
             type: Component,
@@ -1103,20 +1010,7 @@ class DocPageComponent {
         this.tabsContent = viewChild('tabsContent', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tabsContent" }] : /* istanbul ignore next */ []));
         this.sanitizer = inject(DomSanitizer);
-        this.location = inject(Location);
-        this.router = inject(Router);
-        this.route = inject(ActivatedRoute);
-        this.asService = inject(EuiAppShellService);
-        this.cd = inject(ChangeDetectorRef);
-        this.destroyRef = inject(DestroyRef);
-        this.injector = inject(Injector);
-        this.TABS_DEF = [
-            { index: 0, id: 'samples' },
-            { index: 1, id: 'api' },
-            { index: 2, id: 'a11y' },
-            { index: 3, id: 'theming' },
-            { index: 4, id: 'advanced' },
-        ];
+        this.scrollObserver = null;
         this.CATEGORIES_DEF = [
             { index: 0, id: 'Base' },
             { index: 10, id: 'Variants' },
@@ -1128,6 +1022,14 @@ class DocPageComponent {
             { index: 70, id: 'Composition' },
             { index: 80, id: 'Misc' },
         ];
+        this.location = inject(Location);
+        this.router = inject(Router);
+        this.route = inject(ActivatedRoute);
+        this.asService = inject(EuiAppShellService);
+        this.cdr = inject(ChangeDetectorRef);
+        this.ngZone = inject(NgZone);
+        this.destroyRef = inject(DestroyRef);
+        this.injector = inject(Injector);
     }
     ngOnInit() {
         // Sync input signals to writable signals
@@ -1161,16 +1063,87 @@ class DocPageComponent {
             // API URL construction failed - non-critical
         }
         afterNextRender(() => {
-            const tab = this.TABS_DEF.find((t) => t.id === this.fragmentId);
-            const tabIndex = tab ? tab.index : 0;
-            this._buildCategories();
-            this.cd.detectChanges();
+            let tab;
+            let tabIndex;
+            const sampleTabIndex = 0;
+            if (this.tabsContent()) {
+                this.tabsContent()?._tabs().forEach((tabInstance, index) => {
+                    if (tabInstance.id() === this.fragmentId) {
+                        tabIndex = index;
+                        tab = tabInstance;
+                    }
+                });
+            }
+            if (!tab && !tabIndex) {
+                tabIndex = sampleTabIndex;
+            }
+            // constructing categories, if at least one set, if not backward compat with old display
+            const categoriesJson = {};
+            this.samples().forEach((s) => {
+                // "Default" or "_default" sample are always put first in the nav list
+                const id = s.id();
+                const category = s.category();
+                if (!category && id !== '_default' && id !== 'Default' && id !== 'default') {
+                    if (!categoriesJson['others']) {
+                        categoriesJson['others'] = [];
+                        categoriesJson['others'].push(s);
+                    }
+                    else {
+                        categoriesJson['others'].push(s);
+                    }
+                }
+                else {
+                    if (id === '_default' || id === 'Default' || id === 'default') {
+                        if (!categoriesJson['Base']) {
+                            categoriesJson['Base'] = [];
+                            categoriesJson['Base'].push(s);
+                        }
+                        else {
+                            categoriesJson['Base'].push(s);
+                        }
+                    }
+                    else {
+                        this.hasCategories = true;
+                        if (!categoriesJson[category]) {
+                            categoriesJson[category] = [];
+                            categoriesJson[category].push(s);
+                        }
+                        else {
+                            categoriesJson[category].push(s);
+                        }
+                    }
+                }
+            });
+            // making the list of categories iterable for display
+            // console.log(categoriesJson)
+            Object.keys(categoriesJson).forEach((c) => {
+                const normalizedKey = c.toLowerCase();
+                const existingCategory = this.categories.find(cat => cat.name.toLowerCase() === normalizedKey);
+                if (existingCategory) {
+                    existingCategory.samples = [...existingCategory.samples, ...categoriesJson[c]].sort((a, b) => {
+                        return a.label().localeCompare(b.label());
+                    });
+                }
+                else {
+                    this.categories.push({
+                        name: c,
+                        samples: categoriesJson[c].sort((a, b) => {
+                            return a.label().localeCompare(b.label());
+                        }),
+                    });
+                }
+            });
+            // push the "others" at the end of the nav list
+            this.categories.sort((a, b) => {
+                return this.getCategoryIndex(a.name) - this.getCategoryIndex(b.name);
+            });
+            this.categories.push(this.categories.splice(this.categories.findIndex(v => v.name == 'others'), 1)[0]);
             setTimeout(() => {
                 this._scrollToFragment(this.fragmentId, tabIndex, true, true);
                 this.asService.isBlockDocumentActive = false;
                 this.isLoading = false;
                 this.isNavClicked = false;
-                setTimeout(() => this.setupScrollSpy(), 500);
+                // setTimeout(() => this.setupScrollSpy(), 500);
             }, 1);
         }, { injector: this.injector });
     }
@@ -1178,74 +1151,38 @@ class DocPageComponent {
         const category = this.CATEGORIES_DEF.find(cat => cat.id.toLowerCase() === name.toLowerCase());
         return category ? category.index : this.CATEGORIES_DEF.find(cat => cat.id === 'free-category').index;
     }
-    setupScrollSpy() {
-        if (this.isDestroyed)
-            return;
-        const hostEl = document.querySelector('.eui-doc-page');
-        if (!hostEl)
-            return;
-        const scrollEl = hostEl.querySelector('.eui-page-column__body');
-        if (!scrollEl)
-            return;
-        this.scrollContainer = scrollEl;
-        this.scrollHandler = () => {
-            if (this.isNavClicked)
-                return;
-            const ids = [];
-            ['overview', 'samples', 'accessibility', 'theming', 'interactive'].forEach(id => {
-                if (document.getElementById(id))
-                    ids.push(id);
-            });
-            this.samples()?.forEach((s) => {
-                const sId = s.id();
-                if (sId && document.getElementById(sId))
-                    ids.push(sId);
-            });
-            this.sections()?.forEach((s) => {
-                const sId = s.id();
-                if (sId && document.getElementById(sId))
-                    ids.push(sId);
-            });
-            const containerRect = scrollEl.getBoundingClientRect();
-            let activeId = null;
-            let bestDistance = -Infinity;
-            for (const id of ids) {
-                const el = document.getElementById(id);
-                if (!el)
-                    continue;
-                const elTop = el.getBoundingClientRect().top - containerRect.top;
-                if (elTop <= 150 && elTop > bestDistance) {
-                    bestDistance = elTop;
-                    activeId = id;
-                }
-            }
-            if (activeId && activeId !== this.fragmentId) {
-                this.fragmentId = activeId;
-            }
-        };
-        scrollEl.addEventListener('scroll', this.scrollHandler, { passive: true });
-        this.destroyRef.onDestroy(() => {
-            if (this.scrollHandler && this.scrollContainer) {
-                this.scrollContainer.removeEventListener('scroll', this.scrollHandler);
+    ngOnDestroy() {
+        if (this.scrollObserver) {
+            this.scrollObserver.disconnect();
+            this.scrollObserver = null;
+        }
+        if (this.scrollHandler && this.scrollContainer) {
+            this.scrollContainer.removeEventListener('scroll', this.scrollHandler);
+        }
+    }
+    onTabNavClick(tabId) {
+        let tabIndex;
+        this.tabsContent()?._tabs().forEach((tabInstance, index) => {
+            if (tabInstance.id() === tabId) {
+                tabIndex = index;
             }
         });
+        console.log(tabId, tabIndex);
+        this.onNavClick(tabId, tabIndex);
+        this._scrollNavToSelectedItem();
     }
     onNavClick(fragmentId, tabIndex) {
         this.fragmentId = fragmentId;
         this.isNavClicked = true;
         this._scrollToFragment(this.fragmentId, tabIndex, false, true);
-        setTimeout(() => {
-            this.isNavClicked = false;
-        }, 800);
     }
     onTabActivate(event) {
         if (!this.isLoading && !this.isNavClicked) {
-            const tabId = this.TABS_DEF.find((t) => t.index === event.index)?.id;
-            if (tabId) {
-                this._scrollToFragment(tabId, event.index, false, false);
-            }
+            const tabId = event.tab.id;
+            this._scrollToFragment(tabId(), event.index, false, false);
         }
         this.isNavClicked = false;
+        this._scrollNavToSelectedItem();
     }
     _buildCategories() {
         const categoriesJson = {};
@@ -1314,6 +1251,44 @@ class DocPageComponent {
             });
         }
     }
+    _scrollNavToSelectedItem() {
+        if (!this.navContent?.nativeElement) {
+            return;
+        }
+        // Use requestAnimationFrame to ensure DOM has updated after tab change,
+        // avoiding race conditions with eui-menu's scrollToItem
+        requestAnimationFrame(() => {
+            const container = this.navContent.nativeElement;
+            const selectedItem = container.querySelector('.doc-page-navigation-item--selected');
+            if (selectedItem) {
+                // Check if the selected item is visible within its scroll container
+                const scrollParent = this._getScrollParent(container);
+                if (scrollParent) {
+                    const itemRect = selectedItem.getBoundingClientRect();
+                    const parentRect = scrollParent.getBoundingClientRect();
+                    const isVisible = itemRect.top >= parentRect.top && itemRect.bottom <= parentRect.bottom;
+                    if (!isVisible) {
+                        selectedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                    }
+                }
+                else {
+                    selectedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                }
+            }
+        });
+    }
+    _getScrollParent(element) {
+        let parent = element.parentElement;
+        while (parent) {
+            const style = getComputedStyle(parent);
+            if (style.overflow === 'auto' || style.overflow === 'scroll' ||
+                style.overflowY === 'auto' || style.overflowY === 'scroll') {
+                return parent;
+            }
+            parent = parent.parentElement;
+        }
+        return null;
+    }
     _getComponentStatus(id) {
         const flatten = (links) => links
             ? links.reduce((result, item) => [
@@ -1423,7 +1398,7 @@ class DocPageComponent {
         return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPageComponent, isStandalone: true, selector: "eui-showcase-doc-page", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, isNotReadyInput: { classPropertyName: "isNotReadyInput", publicName: "isNotReady", isSignal: true, isRequired: false, transformFunction: null }, isDeprecatedInput: { classPropertyName: "isDeprecatedInput", publicName: "isDeprecated", isSignal: true, isRequired: false, transformFunction: null }, isLegacyInput: { classPropertyName: "isLegacyInput", publicName: "isLegacy", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, showcase: { classPropertyName: "showcase", publicName: "showcase", isSignal: true, isRequired: false, transformFunction: null }, isNavigationVisible: { classPropertyName: "isNavigationVisible", publicName: "isNavigationVisible", isSignal: true, isRequired: false, transformFunction: null }, hasApi: { classPropertyName: "hasApi", publicName: "hasApi", isSignal: true, isRequired: false, transformFunction: null }, hasA11y: { classPropertyName: "hasA11y", publicName: "hasA11y", isSignal: true, isRequired: false, transformFunction: null }, customApiUrl: { classPropertyName: "customApiUrl", publicName: "customApiUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isNavigationVisible: "isNavigationVisibleChange" }, host: { classAttribute: "eui-doc-page" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true, isSignal: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true, isSignal: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirective), isSignal: true }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirective), isSignal: true }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirective), isSignal: true }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirective), isSignal: true }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirective), isSignal: true }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirective), isSignal: true }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirective), isSignal: true }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirective), isSignal: true }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<eui-page>\n    <eui-page-content>\n        <eui-page-columns>\n            <eui-page-column>\n                <eui-page-column-body>\n                    <eui-page-header label=\"{{ label() || id() }}\" subLabel=\"{{ subLabel() }}\" class=\"eui-doc-page-title\">\n                        <eui-page-header-action-items>\n                          @if (codeFolder()) {\n                            <eui-showcase-doc-page-code\n                                codeFolder=\"{{ codeFolder() }}\"\n                                showcase=\"{{ showcase() }}\" />\n                          }\n                          @if (stateLabel) {\n                            <eui-chip euiSizeS isFilled\n                                [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                                [euiInfo]=\"isNotReady()\"\n                                [euiWarning]=\"isDeprecated()\"\n                                [euiDanger]=\"isLegacy()\">\n                                {{ stateLabel }}\n                            </eui-chip>\n                          }\n                        </eui-page-header-action-items>\n                    </eui-page-header>\n\n          @if (stateLabel === 'LEGACY' || isLegacy()) {\n            <eui-alert euiDanger class=\"eui-u-mb-xl\">\n              <eui-alert-title>LEGACY component</eui-alert-title>\n              <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n              @if (cmp) {\n                <div>\n                  @if (cmp.cmpReplacement !== 'NONE') {\n                    <div>\n                      It has been replaced by :\n                      <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n                    </div>\n                  }\n                  @if (cmp.cmpReplacement === 'NONE') {\n                    <div>\n                      <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n                    </div>\n                  }\n                  @if (cmp.cmpReplacementNote) {\n                    <div>\n                      <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n                    </div>\n                  }\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'DEPRECATED' || isDeprecated()) {\n            <eui-alert euiWarning class=\"eui-u-mb-xl\">\n              <eui-alert-title>DEPRECATED component</eui-alert-title>\n              This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n              @if (cmp) {\n                <div>\n                  This component has no replacement in current version AND won't have replacement in next version of eUI,\n                  <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'NOT_READY' || isNotReady()) {\n            <eui-alert euiInfo class=\"eui-u-mb-xl\">\n              <eui-alert-title>NOT READY for production usage</eui-alert-title>\n              @if (cmp) {\n                <div>\n                  This component is under development / some features might be missing, it'll be available in a future release once\n                  validated.\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if ((stateLabel || isNotReady() || isDeprecated()) && stateLabel !== 'ACTIVE') {\n            <div class=\"mb-5\"></div>\n          }\n\n          @if (pageSectionsContent().length === 0) {\n            <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n              <eui-tab>\n                <eui-tab-header>\n                  <eui-label> OPTIONS & SAMPLES </eui-label>\n                </eui-tab-header>\n                <eui-tab-body>\n                  @if (cmp && cmp.metadata) {\n                    @if (cmpImportModule) {\n                      <div class=\"doc-page-section-title\">Module import</div>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n                    }\n                    @if (cmpImportStandalone) {\n                      <div class=\"doc-page-section-title\">Component import</div>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n                    }\n                    <br />\n                  }\n                  <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n                  @if (pageOverviewContent().length > 0) {\n                    <div>\n                      <ng-content select=\"docPageOverview\" />\n                    </div>\n                  }\n                  @if (pageOverviewDefaultContent().length > 0) {\n                    <div>\n                      <ng-content select=\"docPageOverviewDefault\" />\n                    </div>\n                  }\n                  <br />\n                  <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n                  <ng-content select=\"docPageSamples\" />\n                </eui-tab-body>\n              </eui-tab>\n              @if (hasApi()) {\n                <eui-tab>\n                  <eui-tab-header>\n                    <eui-label> API </eui-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    @if (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\" title=\"API documentation\"></iframe>\n                      </div>\n                    }\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (hasA11y()) {\n                <eui-tab>\n                  <eui-tab-header>\n                    <eui-label> A11Y </eui-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n                    @if (pageAccessibilityContent().length !== 0) {\n                      <ng-content select=\"docPageAccessibility\" />\n                      <p>\n                        For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n                      </p>\n                    }\n                    @if (pageAccessibilityContent().length === 0) {\n                      No accessibility rules applicable\n                    }\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (pageThemingContent().length > 0) {\n                <eui-tab>\n                  <eui-tab-header>\n                    <eui-label> THEMING </eui-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n                    <ng-content select=\"docPageTheming\" />\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (pageInteractiveContent().length > 0) {\n                <eui-tab>\n                  <eui-tab-header>\n                    <eui-label>\n                      {{ pageInteractiveContent()[0].title() }}\n                    </eui-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"interactive\" class=\"doc-page-section-title\">\n                      {{ pageInteractiveContent()[0].subTitle() }}\n                    </div>\n                    <ng-content select=\"docPageInteractive\" />\n                  </eui-tab-body>\n                </eui-tab>\n              }\n            </eui-tabs>\n          }\n\n          @if (pageSectionsContent().length > 0) {\n            @if (sections().length === 0) {\n              <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n            }\n            <ng-content select=\"docPageSections\" />\n          }\n\n        </eui-page-column-body>\n      </eui-page-column>\n\n      @if (isNavigationVisible()) {\n        <eui-page-column\n          class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n          label=\"On this page\"\n          euiSizeVariant=\"4xl\"\n          isCollapsible\n          isRightCollapsible>\n          <eui-page-column-body>\n            <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n              <ul class=\"doc-page-navigation\">\n                @if (pageSectionsContent().length === 0) {\n                  @if (hasApi()) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n                      (click)=\"onNavClick('api', 1)\">\n                      <span>API</span>\n                    </li>\n                  }\n                  @if (hasA11y()) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n                      (click)=\"onNavClick('a11y', 2)\">\n                      <span>A11Y</span>\n                    </li>\n                  }\n                  <li\n                    class=\"doc-page-navigation-item\"\n                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n                    (click)=\"onNavClick('samples', 0)\">\n                    <span>OPTIONS & SAMPLES</span>\n                  </li>\n                  <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                    @if (categories.length > 0) {\n                      @if (hasCategories) {\n                        @for (category of categories; track category) {\n                          @if (category.name === 'Base') {\n                            @for (sample of category.samples; track sample; let i = $index) {\n                              <ul class=\"doc-page-navigation-list\">\n                                <li\n                                  class=\"doc-page-navigation-item\"\n                                  [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n                                  (click)=\"onNavClick(sample.id(), 0)\">\n                                  <span>{{ sample.label() || sample.id() }}</span>\n                                </li>\n                              </ul>\n                            }\n                          } @else {\n                            @if (category.name !== 'Base') {\n                              <div class=\"doc-page-navigation-category\">{{category.name}}</div>\n                            }\n                            @for (sample of category.samples; track sample) {\n                              <ul class=\"doc-page-navigation-list\">\n                                <li\n                                  class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n                                  [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id()\"\n                                  (click)=\"onNavClick(sample.id(), 0)\">\n                                  <span>{{ sample.label() || sample.id() }}</span>\n                                </li>\n                              </ul>\n                            }\n                          }\n                        }\n                      } @else {\n                        @for (sample of samples(); track sample; let i = $index) {\n                          <ul class=\"doc-page-navigation-list\">\n                            <li\n                              class=\"doc-page-navigation-item\"\n                              [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n                              (click)=\"onNavClick(sample.id(), 0)\">\n                              <span>{{ sample.label() || sample.id() }}</span>\n                            </li>\n                          </ul>\n                        }\n                      }\n                    }\n                  </li>\n                  <!-- OPTIONAL TABS-->\n                  @if (pageThemingContent().length > 0) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n                      (click)=\"onNavClick('theming', 3)\">\n                      <span>THEMING</span>\n                    </li>\n                    @if (pageInteractiveContent().length > 0) {\n                      <li\n                        class=\"doc-page-navigation-item\"\n                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                        (click)=\"onNavClick('advanced', 4)\">\n                        <span>{{ pageInteractiveContent()[0].title() }}</span>\n                      </li>\n                    }\n                  }\n                  @if (pageThemingContent().length === 0) {\n                    @if (pageInteractiveContent().length > 0) {\n                      <li\n                        class=\"doc-page-navigation-item\"\n                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                        (click)=\"onNavClick('advanced', 3)\">\n                        <span>{{ pageInteractiveContent()[0].title() }}</span>\n                      </li>\n                    }\n                  }\n                }\n                @if (pageSectionsContent().length > 0) {\n                  <li\n                    class=\"doc-page-navigation-item\"\n                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n                    (click)=\"onNavClick('sections', null)\">\n                    <span>Sections</span>\n                  </li>\n                  @if (sections().length === 0) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n                      (click)=\"onNavClick('demo', null)\">\n                      <span>Demo</span>\n                    </li>\n                  }\n                  @if (sections().length > 0) {\n                    <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                      @for (section of sections(); track section; let i = $index) {\n                        <ul>\n                          <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n                            (click)=\"onNavClick(section.id(), null)\">\n                            <span>{{ section.label() || section.id() }}</span>\n                          </li>\n                        </ul>\n                      }\n                    </li>\n                  }\n                }\n              </ul>\n            </div>\n          </eui-page-column-body>\n        </eui-page-column>\n      }\n\n    </eui-page-columns>\n  </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }, { kind: "component", type: i1$1.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i1$1.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i3.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i3.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isCollapsedHidden", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile", "hasSubColumns", "hasSubPanels"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i3.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i3.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i3.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i3.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i4.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPageComponent, isStandalone: true, selector: "eui-showcase-doc-page", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, isNotReadyInput: { classPropertyName: "isNotReadyInput", publicName: "isNotReady", isSignal: true, isRequired: false, transformFunction: null }, isDeprecatedInput: { classPropertyName: "isDeprecatedInput", publicName: "isDeprecated", isSignal: true, isRequired: false, transformFunction: null }, isLegacyInput: { classPropertyName: "isLegacyInput", publicName: "isLegacy", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, showcase: { classPropertyName: "showcase", publicName: "showcase", isSignal: true, isRequired: false, transformFunction: null }, isNavigationVisible: { classPropertyName: "isNavigationVisible", publicName: "isNavigationVisible", isSignal: true, isRequired: false, transformFunction: null }, hasApi: { classPropertyName: "hasApi", publicName: "hasApi", isSignal: true, isRequired: false, transformFunction: null }, hasA11y: { classPropertyName: "hasA11y", publicName: "hasA11y", isSignal: true, isRequired: false, transformFunction: null }, customApiUrl: { classPropertyName: "customApiUrl", publicName: "customApiUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isNavigationVisible: "isNavigationVisibleChange" }, host: { classAttribute: "eui-doc-page" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true, isSignal: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true, isSignal: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirective), isSignal: true }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirective), isSignal: true }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirective), isSignal: true }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirective), isSignal: true }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirective), isSignal: true }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirective), isSignal: true }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirective), isSignal: true }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirective), isSignal: true }, { propertyName: "pageVisualSpecsContent", predicate: i0.forwardRef(() => DocPageVisualSpecsContentDirective) }, { propertyName: "pagePlaygroundContent", predicate: i0.forwardRef(() => DocPagePlaygroundContentDirective) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true, isSignal: true }, { propertyName: "navContent", first: true, predicate: ["navContent"], descendants: true }], ngImport: i0, template: "<eui-page>\n    <eui-page-content>\n        <eui-page-columns>\n            <eui-page-column>\n                <eui-page-column-body>\n                    <eui-page-header label=\"{{ label() || id() }}\" subLabel=\"{{ subLabel() }}\" class=\"eui-doc-page-title\">\n                        <eui-page-header-action-items>\n                          @if (codeFolder()) {\n                            <eui-showcase-doc-page-code\n                                codeFolder=\"{{ codeFolder() }}\"\n                                showcase=\"{{ showcase() }}\" />\n                          }\n                          @if (stateLabel) {\n                            <eui-chip euiSizeS isFilled\n                                [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                                [euiInfo]=\"isNotReady()\"\n                                [euiWarning]=\"isDeprecated()\"\n                                [euiDanger]=\"isLegacy()\">\n                                {{ stateLabel }}\n                            </eui-chip>\n                          }\n                        </eui-page-header-action-items>\n                    </eui-page-header>\n\n          @if (stateLabel === 'LEGACY' || isLegacy()) {\n            <eui-alert euiDanger class=\"eui-u-mb-xl\">\n              <eui-alert-title>LEGACY component</eui-alert-title>\n              <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n              @if (cmp) {\n                <div>\n                  @if (cmp.cmpReplacement !== 'NONE') {\n                    <div>\n                      It has been replaced by :\n                      <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n                    </div>\n                  }\n                  @if (cmp.cmpReplacement === 'NONE') {\n                    <div>\n                      <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n                    </div>\n                  }\n                  @if (cmp.cmpReplacementNote) {\n                    <div>\n                      <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n                    </div>\n                  }\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'DEPRECATED' || isDeprecated()) {\n            <eui-alert euiWarning class=\"eui-u-mb-xl\">\n              <eui-alert-title>DEPRECATED component</eui-alert-title>\n              This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n              @if (cmp) {\n                <div>\n                  This component has no replacement in current version AND won't have replacement in next version of eUI,\n                  <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'NOT_READY' || isNotReady()) {\n            <eui-alert euiInfo class=\"eui-u-mb-xl\">\n              <eui-alert-title>NOT READY for production usage</eui-alert-title>\n              @if (cmp) {\n                <div>\n                  This component is under development / some features might be missing, it'll be available in a future release once\n                  validated.\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if ((stateLabel || isNotReady() || isDeprecated()) && stateLabel !== 'ACTIVE') {\n            <div class=\"mb-5\"></div>\n          }\n\n          @if (pageSectionsContent().length === 0) {\n            <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n              <eui-tab id=\"samples\">\n                <eui-tab-header>\n                    <eui-tab-header-label>OPTIONS & SAMPLES</eui-tab-header-label>\n                </eui-tab-header>\n                <eui-tab-body>\n                  @if (cmp && cmp.metadata) {\n                    @if (cmpImportModule) {\n                      <div class=\"doc-page-section-title\">Module import</div>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n                    }\n                    @if (cmpImportStandalone) {\n                      <div class=\"doc-page-section-title\">Component import</div>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n                    }\n                    <br />\n                  }\n                  <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n                  @if (pageOverviewContent().length > 0) {\n                    <div>\n                      <ng-content select=\"docPageOverview\" />\n                    </div>\n                  }\n                  @if (pageOverviewDefaultContent().length > 0) {\n                    <div>\n                      <ng-content select=\"docPageOverviewDefault\" />\n                    </div>\n                  }\n                  <br />\n                  <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n                  <ng-content select=\"docPageSamples\" />\n                </eui-tab-body>\n              </eui-tab>\n              @if (hasApi()) {\n                <eui-tab id=\"api\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>API</eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    @if (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\" title=\"API documentation\"></iframe>\n                      </div>\n                    }\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (hasA11y()) {\n                <eui-tab id=\"a11y\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>A11Y</eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n                    @if (pageAccessibilityContent().length !== 0) {\n                      <ng-content select=\"docPageAccessibility\" />\n                      <p>\n                        For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n                      </p>\n                    }\n                    @if (pageAccessibilityContent().length === 0) {\n                      No accessibility rules applicable\n                    }\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if(pageVisualSpecsContent.length > 0) {\n                  <eui-tab id=\"visual-specs\">\n                      <eui-tab-header>\n                          <eui-tab-header-label>VISUAL SPECS</eui-tab-header-label>\n                      </eui-tab-header>\n                      <eui-tab-body>\n                          <div class=\"doc-page-section-title\">Visual specifications</div>\n                          <ng-content select=\"docPageVisualSpecs\"></ng-content>\n                      </eui-tab-body>\n                  </eui-tab>\n              }\n              @if(pagePlaygroundContent.length > 0) {\n                  <eui-tab id=\"playground\">\n                      <eui-tab-header>\n                          <eui-tab-header-label>PLAYGROUND</eui-tab-header-label>\n                      </eui-tab-header>\n                      <eui-tab-body>\n                          <div class=\"doc-page-section-title\">Playground</div>\n                          <ng-content select=\"docPagePlayground\"></ng-content>\n                      </eui-tab-body>\n                  </eui-tab>\n              }\n              @if (pageThemingContent().length > 0) {\n                <eui-tab id=\"theming\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>THEMING</eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n                    <ng-content select=\"docPageTheming\" />\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (pageInteractiveContent().length > 0) {\n                <eui-tab id=\"advanced\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>\n                          {{ pageInteractiveContent()[0].title() }}\n                      </eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"interactive\" class=\"doc-page-section-title\">\n                      {{ pageInteractiveContent()[0].subTitle() }}\n                    </div>\n                    <ng-content select=\"docPageInteractive\" />\n                  </eui-tab-body>\n                </eui-tab>\n              }\n            </eui-tabs>\n          }\n\n          @if (pageSectionsContent().length > 0) {\n            @if (sections().length === 0) {\n              <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n            }\n            <ng-content select=\"docPageSections\" />\n          }\n\n        </eui-page-column-body>\n      </eui-page-column>\n\n      @if (isNavigationVisible()) {\n        <eui-page-column\n          class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n          label=\"On this page\"\n          euiSizeVariant=\"4xl\"\n          isCollapsible\n          isRightCollapsible>\n          <eui-page-column-body>\n            <div class=\"doc-page-navigation-content\" #navContent tabindex=\"0\">\n              <ul class=\"doc-page-navigation\">\n                @if (pageSectionsContent().length === 0) {\n                  <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n                      (click)=\"onTabNavClick('samples')\">\n                      <span>OPTIONS & SAMPLES</span>\n                  </li>\n                  @if (hasApi()) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n                      (click)=\"onTabNavClick('api')\">\n                      <span>API</span>\n                    </li>\n                  }\n                  @if (hasA11y()) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n                      (click)=\"onTabNavClick('a11y')\">\n                      <span>A11Y</span>\n                    </li>\n                  }\n                  <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                    @if (categories.length > 0) {\n                      @if (hasCategories) {\n                        @for (category of categories; track category) {\n                          @if (category.name === 'Base') {\n                            @for (sample of category.samples; track sample; let i = $index) {\n                              <ul class=\"doc-page-navigation-list\">\n                                <li\n                                  class=\"doc-page-navigation-item\"\n                                  [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n                                  (click)=\"onNavClick(sample.id(), 0)\">\n                                  <span>{{ sample.label() || sample.id() }}</span>\n                                </li>\n                              </ul>\n                            }\n                          } @else {\n                            @if (category.name !== 'Base') {\n                              <div class=\"doc-page-navigation-category\">{{category.name}}</div>\n                            }\n                            @for (sample of category.samples; track sample) {\n                              <ul class=\"doc-page-navigation-list\">\n                                <li\n                                  class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n                                  [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id()\"\n                                  (click)=\"onNavClick(sample.id(), 0)\">\n                                  <span>{{ sample.label() || sample.id() }}</span>\n                                </li>\n                              </ul>\n                            }\n                          }\n                        }\n                      } @else {\n                        @for (sample of samples(); track sample; let i = $index) {\n                          <ul class=\"doc-page-navigation-list\">\n                            <li\n                              class=\"doc-page-navigation-item\"\n                              [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n                              (click)=\"onNavClick(sample.id(), 0)\">\n                              <span>{{ sample.label() || sample.id() }}</span>\n                            </li>\n                          </ul>\n                        }\n                      }\n                    }\n                  </li>\n                  <!-- OPTIONAL TABS-->\n                  @if (pageThemingContent().length > 0) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n                      (click)=\"onNavClick('theming', 3)\">\n                      <span>THEMING</span>\n                    </li>\n                    @if (pageInteractiveContent().length > 0) {\n                      <li\n                        class=\"doc-page-navigation-item\"\n                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                        (click)=\"onNavClick('advanced', 4)\">\n                        <span>{{ pageInteractiveContent()[0].title() }}</span>\n                      </li>\n                    }\n                    @if(pageVisualSpecsContent.length > 0) {\n                      <li\n                          class=\"doc-page-navigation-item\"\n                          [class.doc-page-navigation-item--selected]=\"fragmentId === 'visual-specs'\"\n                          (click)=\"onTabNavClick('visual-specs')\">\n                          <span>VISUAL SPECS</span>\n                      </li>\n                    }\n                    @if (pagePlaygroundContent.length > 0) {\n                        <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'playground'\"\n                            (click)=\"onTabNavClick('playground')\">\n                            <span>PLAYGROUND</span>\n                        </li>\n                    }\n                  }\n                }\n                @if (pageSectionsContent().length > 0) {\n                  <li\n                    class=\"doc-page-navigation-item\"\n                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n                    (click)=\"onNavClick('sections', null)\">\n                    <span>Sections</span>\n                  </li>\n                  @if (sections().length === 0) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n                      (click)=\"onNavClick('demo', null)\">\n                      <span>Demo</span>\n                    </li>\n                  }\n                  @if (sections().length > 0) {\n                    <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                      @for (section of sections(); track section; let i = $index) {\n                        <ul>\n                          <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n                            (click)=\"onNavClick(section.id(), null)\">\n                            <span>{{ section.label() || section.id() }}</span>\n                          </li>\n                        </ul>\n                      }\n                    </li>\n                  }\n                }\n              </ul>\n            </div>\n          </eui-page-column-body>\n        </eui-page-column>\n      }\n\n    </eui-page-columns>\n  </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }, { kind: "component", type: i1$1.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i1$1.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i2$2.EuiTabHeaderLabelComponent, selector: "eui-tab-header-label" }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i3.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i3.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isCollapsedHidden", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile", "hasSubColumns", "hasSubPanels"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i3.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i3.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i3.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i3.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageComponent, decorators: [{
             type: Component,
@@ -1435,8 +1410,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         ...EUI_PAGE,
                         ...EUI_LABEL,
                         ...EUI_CHIP,
-                    ], template: "<eui-page>\n    <eui-page-content>\n        <eui-page-columns>\n            <eui-page-column>\n                <eui-page-column-body>\n                    <eui-page-header label=\"{{ label() || id() }}\" subLabel=\"{{ subLabel() }}\" class=\"eui-doc-page-title\">\n                        <eui-page-header-action-items>\n                          @if (codeFolder()) {\n                            <eui-showcase-doc-page-code\n                                codeFolder=\"{{ codeFolder() }}\"\n                                showcase=\"{{ showcase() }}\" />\n                          }\n                          @if (stateLabel) {\n                            <eui-chip euiSizeS isFilled\n                                [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                                [euiInfo]=\"isNotReady()\"\n                                [euiWarning]=\"isDeprecated()\"\n                                [euiDanger]=\"isLegacy()\">\n                                {{ stateLabel }}\n                            </eui-chip>\n                          }\n                        </eui-page-header-action-items>\n                    </eui-page-header>\n\n          @if (stateLabel === 'LEGACY' || isLegacy()) {\n            <eui-alert euiDanger class=\"eui-u-mb-xl\">\n              <eui-alert-title>LEGACY component</eui-alert-title>\n              <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n              @if (cmp) {\n                <div>\n                  @if (cmp.cmpReplacement !== 'NONE') {\n                    <div>\n                      It has been replaced by :\n                      <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n                    </div>\n                  }\n                  @if (cmp.cmpReplacement === 'NONE') {\n                    <div>\n                      <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n                    </div>\n                  }\n                  @if (cmp.cmpReplacementNote) {\n                    <div>\n                      <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n                    </div>\n                  }\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'DEPRECATED' || isDeprecated()) {\n            <eui-alert euiWarning class=\"eui-u-mb-xl\">\n              <eui-alert-title>DEPRECATED component</eui-alert-title>\n              This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n              @if (cmp) {\n                <div>\n                  This component has no replacement in current version AND won't have replacement in next version of eUI,\n                  <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'NOT_READY' || isNotReady()) {\n            <eui-alert euiInfo class=\"eui-u-mb-xl\">\n              <eui-alert-title>NOT READY for production usage</eui-alert-title>\n              @if (cmp) {\n                <div>\n                  This component is under development / some features might be missing, it'll be available in a future release once\n                  validated.\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if ((stateLabel || isNotReady() || isDeprecated()) && stateLabel !== 'ACTIVE') {\n            <div class=\"mb-5\"></div>\n          }\n\n          @if (pageSectionsContent().length === 0) {\n            <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n              <eui-tab>\n                <eui-tab-header>\n                  <eui-label> OPTIONS & SAMPLES </eui-label>\n                </eui-tab-header>\n                <eui-tab-body>\n                  @if (cmp && cmp.metadata) {\n                    @if (cmpImportModule) {\n                      <div class=\"doc-page-section-title\">Module import</div>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n                    }\n                    @if (cmpImportStandalone) {\n                      <div class=\"doc-page-section-title\">Component import</div>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n                    }\n                    <br />\n                  }\n                  <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n                  @if (pageOverviewContent().length > 0) {\n                    <div>\n                      <ng-content select=\"docPageOverview\" />\n                    </div>\n                  }\n                  @if (pageOverviewDefaultContent().length > 0) {\n                    <div>\n                      <ng-content select=\"docPageOverviewDefault\" />\n                    </div>\n                  }\n                  <br />\n                  <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n                  <ng-content select=\"docPageSamples\" />\n                </eui-tab-body>\n              </eui-tab>\n              @if (hasApi()) {\n                <eui-tab>\n                  <eui-tab-header>\n                    <eui-label> API </eui-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    @if (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\" title=\"API documentation\"></iframe>\n                      </div>\n                    }\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (hasA11y()) {\n                <eui-tab>\n                  <eui-tab-header>\n                    <eui-label> A11Y </eui-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n                    @if (pageAccessibilityContent().length !== 0) {\n                      <ng-content select=\"docPageAccessibility\" />\n                      <p>\n                        For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n                      </p>\n                    }\n                    @if (pageAccessibilityContent().length === 0) {\n                      No accessibility rules applicable\n                    }\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (pageThemingContent().length > 0) {\n                <eui-tab>\n                  <eui-tab-header>\n                    <eui-label> THEMING </eui-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n                    <ng-content select=\"docPageTheming\" />\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (pageInteractiveContent().length > 0) {\n                <eui-tab>\n                  <eui-tab-header>\n                    <eui-label>\n                      {{ pageInteractiveContent()[0].title() }}\n                    </eui-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"interactive\" class=\"doc-page-section-title\">\n                      {{ pageInteractiveContent()[0].subTitle() }}\n                    </div>\n                    <ng-content select=\"docPageInteractive\" />\n                  </eui-tab-body>\n                </eui-tab>\n              }\n            </eui-tabs>\n          }\n\n          @if (pageSectionsContent().length > 0) {\n            @if (sections().length === 0) {\n              <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n            }\n            <ng-content select=\"docPageSections\" />\n          }\n\n        </eui-page-column-body>\n      </eui-page-column>\n\n      @if (isNavigationVisible()) {\n        <eui-page-column\n          class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n          label=\"On this page\"\n          euiSizeVariant=\"4xl\"\n          isCollapsible\n          isRightCollapsible>\n          <eui-page-column-body>\n            <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n              <ul class=\"doc-page-navigation\">\n                @if (pageSectionsContent().length === 0) {\n                  @if (hasApi()) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n                      (click)=\"onNavClick('api', 1)\">\n                      <span>API</span>\n                    </li>\n                  }\n                  @if (hasA11y()) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n                      (click)=\"onNavClick('a11y', 2)\">\n                      <span>A11Y</span>\n                    </li>\n                  }\n                  <li\n                    class=\"doc-page-navigation-item\"\n                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n                    (click)=\"onNavClick('samples', 0)\">\n                    <span>OPTIONS & SAMPLES</span>\n                  </li>\n                  <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                    @if (categories.length > 0) {\n                      @if (hasCategories) {\n                        @for (category of categories; track category) {\n                          @if (category.name === 'Base') {\n                            @for (sample of category.samples; track sample; let i = $index) {\n                              <ul class=\"doc-page-navigation-list\">\n                                <li\n                                  class=\"doc-page-navigation-item\"\n                                  [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n                                  (click)=\"onNavClick(sample.id(), 0)\">\n                                  <span>{{ sample.label() || sample.id() }}</span>\n                                </li>\n                              </ul>\n                            }\n                          } @else {\n                            @if (category.name !== 'Base') {\n                              <div class=\"doc-page-navigation-category\">{{category.name}}</div>\n                            }\n                            @for (sample of category.samples; track sample) {\n                              <ul class=\"doc-page-navigation-list\">\n                                <li\n                                  class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n                                  [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id()\"\n                                  (click)=\"onNavClick(sample.id(), 0)\">\n                                  <span>{{ sample.label() || sample.id() }}</span>\n                                </li>\n                              </ul>\n                            }\n                          }\n                        }\n                      } @else {\n                        @for (sample of samples(); track sample; let i = $index) {\n                          <ul class=\"doc-page-navigation-list\">\n                            <li\n                              class=\"doc-page-navigation-item\"\n                              [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n                              (click)=\"onNavClick(sample.id(), 0)\">\n                              <span>{{ sample.label() || sample.id() }}</span>\n                            </li>\n                          </ul>\n                        }\n                      }\n                    }\n                  </li>\n                  <!-- OPTIONAL TABS-->\n                  @if (pageThemingContent().length > 0) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n                      (click)=\"onNavClick('theming', 3)\">\n                      <span>THEMING</span>\n                    </li>\n                    @if (pageInteractiveContent().length > 0) {\n                      <li\n                        class=\"doc-page-navigation-item\"\n                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                        (click)=\"onNavClick('advanced', 4)\">\n                        <span>{{ pageInteractiveContent()[0].title() }}</span>\n                      </li>\n                    }\n                  }\n                  @if (pageThemingContent().length === 0) {\n                    @if (pageInteractiveContent().length > 0) {\n                      <li\n                        class=\"doc-page-navigation-item\"\n                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                        (click)=\"onNavClick('advanced', 3)\">\n                        <span>{{ pageInteractiveContent()[0].title() }}</span>\n                      </li>\n                    }\n                  }\n                }\n                @if (pageSectionsContent().length > 0) {\n                  <li\n                    class=\"doc-page-navigation-item\"\n                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n                    (click)=\"onNavClick('sections', null)\">\n                    <span>Sections</span>\n                  </li>\n                  @if (sections().length === 0) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n                      (click)=\"onNavClick('demo', null)\">\n                      <span>Demo</span>\n                    </li>\n                  }\n                  @if (sections().length > 0) {\n                    <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                      @for (section of sections(); track section; let i = $index) {\n                        <ul>\n                          <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n                            (click)=\"onNavClick(section.id(), null)\">\n                            <span>{{ section.label() || section.id() }}</span>\n                          </li>\n                        </ul>\n                      }\n                    </li>\n                  }\n                }\n              </ul>\n            </div>\n          </eui-page-column-body>\n        </eui-page-column>\n      }\n\n    </eui-page-columns>\n  </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], subLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subLabel", required: false }] }], isNotReadyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNotReady", required: false }] }], isDeprecatedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDeprecated", required: false }] }], isLegacyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLegacy", required: false }] }], codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }], showcase: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcase", required: false }] }], isNavigationVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNavigationVisible", required: false }] }, { type: i0.Output, args: ["isNavigationVisibleChange"] }], hasApi: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasApi", required: false }] }], hasA11y: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasA11y", required: false }] }], customApiUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "customApiUrl", required: false }] }], samples: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSampleComponent), { ...{ descendants: true }, isSignal: true }] }], sections: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSectionComponent), { ...{ descendants: true }, isSignal: true }] }], pageOverviewContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewContentDirective), { isSignal: true }] }], pageOverviewDefaultContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewDefaultContentDirective), { isSignal: true }] }], pageSamplesContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSamplesContentDirective), { isSignal: true }] }], pageSectionsContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSectionsContentDirective), { isSignal: true }] }], pageInteractiveContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageInteractiveContentDirective), { isSignal: true }] }], pageAccessibilityContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageAccessibilityContentDirective), { isSignal: true }] }], pageApiContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageApiContentDirective), { isSignal: true }] }], pageThemingContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageThemingContentDirective), { isSignal: true }] }], tabsContent: [{ type: i0.ViewChild, args: ['tabsContent', { isSignal: true }] }] } });
+                    ], template: "<eui-page>\n    <eui-page-content>\n        <eui-page-columns>\n            <eui-page-column>\n                <eui-page-column-body>\n                    <eui-page-header label=\"{{ label() || id() }}\" subLabel=\"{{ subLabel() }}\" class=\"eui-doc-page-title\">\n                        <eui-page-header-action-items>\n                          @if (codeFolder()) {\n                            <eui-showcase-doc-page-code\n                                codeFolder=\"{{ codeFolder() }}\"\n                                showcase=\"{{ showcase() }}\" />\n                          }\n                          @if (stateLabel) {\n                            <eui-chip euiSizeS isFilled\n                                [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                                [euiInfo]=\"isNotReady()\"\n                                [euiWarning]=\"isDeprecated()\"\n                                [euiDanger]=\"isLegacy()\">\n                                {{ stateLabel }}\n                            </eui-chip>\n                          }\n                        </eui-page-header-action-items>\n                    </eui-page-header>\n\n          @if (stateLabel === 'LEGACY' || isLegacy()) {\n            <eui-alert euiDanger class=\"eui-u-mb-xl\">\n              <eui-alert-title>LEGACY component</eui-alert-title>\n              <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n              @if (cmp) {\n                <div>\n                  @if (cmp.cmpReplacement !== 'NONE') {\n                    <div>\n                      It has been replaced by :\n                      <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n                    </div>\n                  }\n                  @if (cmp.cmpReplacement === 'NONE') {\n                    <div>\n                      <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n                    </div>\n                  }\n                  @if (cmp.cmpReplacementNote) {\n                    <div>\n                      <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n                    </div>\n                  }\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'DEPRECATED' || isDeprecated()) {\n            <eui-alert euiWarning class=\"eui-u-mb-xl\">\n              <eui-alert-title>DEPRECATED component</eui-alert-title>\n              This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n              @if (cmp) {\n                <div>\n                  This component has no replacement in current version AND won't have replacement in next version of eUI,\n                  <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'NOT_READY' || isNotReady()) {\n            <eui-alert euiInfo class=\"eui-u-mb-xl\">\n              <eui-alert-title>NOT READY for production usage</eui-alert-title>\n              @if (cmp) {\n                <div>\n                  This component is under development / some features might be missing, it'll be available in a future release once\n                  validated.\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if ((stateLabel || isNotReady() || isDeprecated()) && stateLabel !== 'ACTIVE') {\n            <div class=\"mb-5\"></div>\n          }\n\n          @if (pageSectionsContent().length === 0) {\n            <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n              <eui-tab id=\"samples\">\n                <eui-tab-header>\n                    <eui-tab-header-label>OPTIONS & SAMPLES</eui-tab-header-label>\n                </eui-tab-header>\n                <eui-tab-body>\n                  @if (cmp && cmp.metadata) {\n                    @if (cmpImportModule) {\n                      <div class=\"doc-page-section-title\">Module import</div>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n                    }\n                    @if (cmpImportStandalone) {\n                      <div class=\"doc-page-section-title\">Component import</div>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n                    }\n                    <br />\n                  }\n                  <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n                  @if (pageOverviewContent().length > 0) {\n                    <div>\n                      <ng-content select=\"docPageOverview\" />\n                    </div>\n                  }\n                  @if (pageOverviewDefaultContent().length > 0) {\n                    <div>\n                      <ng-content select=\"docPageOverviewDefault\" />\n                    </div>\n                  }\n                  <br />\n                  <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n                  <ng-content select=\"docPageSamples\" />\n                </eui-tab-body>\n              </eui-tab>\n              @if (hasApi()) {\n                <eui-tab id=\"api\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>API</eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    @if (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\" title=\"API documentation\"></iframe>\n                      </div>\n                    }\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (hasA11y()) {\n                <eui-tab id=\"a11y\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>A11Y</eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n                    @if (pageAccessibilityContent().length !== 0) {\n                      <ng-content select=\"docPageAccessibility\" />\n                      <p>\n                        For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n                      </p>\n                    }\n                    @if (pageAccessibilityContent().length === 0) {\n                      No accessibility rules applicable\n                    }\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if(pageVisualSpecsContent.length > 0) {\n                  <eui-tab id=\"visual-specs\">\n                      <eui-tab-header>\n                          <eui-tab-header-label>VISUAL SPECS</eui-tab-header-label>\n                      </eui-tab-header>\n                      <eui-tab-body>\n                          <div class=\"doc-page-section-title\">Visual specifications</div>\n                          <ng-content select=\"docPageVisualSpecs\"></ng-content>\n                      </eui-tab-body>\n                  </eui-tab>\n              }\n              @if(pagePlaygroundContent.length > 0) {\n                  <eui-tab id=\"playground\">\n                      <eui-tab-header>\n                          <eui-tab-header-label>PLAYGROUND</eui-tab-header-label>\n                      </eui-tab-header>\n                      <eui-tab-body>\n                          <div class=\"doc-page-section-title\">Playground</div>\n                          <ng-content select=\"docPagePlayground\"></ng-content>\n                      </eui-tab-body>\n                  </eui-tab>\n              }\n              @if (pageThemingContent().length > 0) {\n                <eui-tab id=\"theming\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>THEMING</eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n                    <ng-content select=\"docPageTheming\" />\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (pageInteractiveContent().length > 0) {\n                <eui-tab id=\"advanced\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>\n                          {{ pageInteractiveContent()[0].title() }}\n                      </eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"interactive\" class=\"doc-page-section-title\">\n                      {{ pageInteractiveContent()[0].subTitle() }}\n                    </div>\n                    <ng-content select=\"docPageInteractive\" />\n                  </eui-tab-body>\n                </eui-tab>\n              }\n            </eui-tabs>\n          }\n\n          @if (pageSectionsContent().length > 0) {\n            @if (sections().length === 0) {\n              <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n            }\n            <ng-content select=\"docPageSections\" />\n          }\n\n        </eui-page-column-body>\n      </eui-page-column>\n\n      @if (isNavigationVisible()) {\n        <eui-page-column\n          class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n          label=\"On this page\"\n          euiSizeVariant=\"4xl\"\n          isCollapsible\n          isRightCollapsible>\n          <eui-page-column-body>\n            <div class=\"doc-page-navigation-content\" #navContent tabindex=\"0\">\n              <ul class=\"doc-page-navigation\">\n                @if (pageSectionsContent().length === 0) {\n                  <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n                      (click)=\"onTabNavClick('samples')\">\n                      <span>OPTIONS & SAMPLES</span>\n                  </li>\n                  @if (hasApi()) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n                      (click)=\"onTabNavClick('api')\">\n                      <span>API</span>\n                    </li>\n                  }\n                  @if (hasA11y()) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n                      (click)=\"onTabNavClick('a11y')\">\n                      <span>A11Y</span>\n                    </li>\n                  }\n                  <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                    @if (categories.length > 0) {\n                      @if (hasCategories) {\n                        @for (category of categories; track category) {\n                          @if (category.name === 'Base') {\n                            @for (sample of category.samples; track sample; let i = $index) {\n                              <ul class=\"doc-page-navigation-list\">\n                                <li\n                                  class=\"doc-page-navigation-item\"\n                                  [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n                                  (click)=\"onNavClick(sample.id(), 0)\">\n                                  <span>{{ sample.label() || sample.id() }}</span>\n                                </li>\n                              </ul>\n                            }\n                          } @else {\n                            @if (category.name !== 'Base') {\n                              <div class=\"doc-page-navigation-category\">{{category.name}}</div>\n                            }\n                            @for (sample of category.samples; track sample) {\n                              <ul class=\"doc-page-navigation-list\">\n                                <li\n                                  class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n                                  [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id()\"\n                                  (click)=\"onNavClick(sample.id(), 0)\">\n                                  <span>{{ sample.label() || sample.id() }}</span>\n                                </li>\n                              </ul>\n                            }\n                          }\n                        }\n                      } @else {\n                        @for (sample of samples(); track sample; let i = $index) {\n                          <ul class=\"doc-page-navigation-list\">\n                            <li\n                              class=\"doc-page-navigation-item\"\n                              [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n                              (click)=\"onNavClick(sample.id(), 0)\">\n                              <span>{{ sample.label() || sample.id() }}</span>\n                            </li>\n                          </ul>\n                        }\n                      }\n                    }\n                  </li>\n                  <!-- OPTIONAL TABS-->\n                  @if (pageThemingContent().length > 0) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n                      (click)=\"onNavClick('theming', 3)\">\n                      <span>THEMING</span>\n                    </li>\n                    @if (pageInteractiveContent().length > 0) {\n                      <li\n                        class=\"doc-page-navigation-item\"\n                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                        (click)=\"onNavClick('advanced', 4)\">\n                        <span>{{ pageInteractiveContent()[0].title() }}</span>\n                      </li>\n                    }\n                    @if(pageVisualSpecsContent.length > 0) {\n                      <li\n                          class=\"doc-page-navigation-item\"\n                          [class.doc-page-navigation-item--selected]=\"fragmentId === 'visual-specs'\"\n                          (click)=\"onTabNavClick('visual-specs')\">\n                          <span>VISUAL SPECS</span>\n                      </li>\n                    }\n                    @if (pagePlaygroundContent.length > 0) {\n                        <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'playground'\"\n                            (click)=\"onTabNavClick('playground')\">\n                            <span>PLAYGROUND</span>\n                        </li>\n                    }\n                  }\n                }\n                @if (pageSectionsContent().length > 0) {\n                  <li\n                    class=\"doc-page-navigation-item\"\n                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n                    (click)=\"onNavClick('sections', null)\">\n                    <span>Sections</span>\n                  </li>\n                  @if (sections().length === 0) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n                      (click)=\"onNavClick('demo', null)\">\n                      <span>Demo</span>\n                    </li>\n                  }\n                  @if (sections().length > 0) {\n                    <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                      @for (section of sections(); track section; let i = $index) {\n                        <ul>\n                          <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n                            (click)=\"onNavClick(section.id(), null)\">\n                            <span>{{ section.label() || section.id() }}</span>\n                          </li>\n                        </ul>\n                      }\n                    </li>\n                  }\n                }\n              </ul>\n            </div>\n          </eui-page-column-body>\n        </eui-page-column>\n      }\n\n    </eui-page-columns>\n  </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], subLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subLabel", required: false }] }], isNotReadyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNotReady", required: false }] }], isDeprecatedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDeprecated", required: false }] }], isLegacyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLegacy", required: false }] }], codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }], showcase: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcase", required: false }] }], isNavigationVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNavigationVisible", required: false }] }, { type: i0.Output, args: ["isNavigationVisibleChange"] }], hasApi: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasApi", required: false }] }], hasA11y: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasA11y", required: false }] }], customApiUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "customApiUrl", required: false }] }], samples: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSampleComponent), { ...{ descendants: true }, isSignal: true }] }], sections: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSectionComponent), { ...{ descendants: true }, isSignal: true }] }], pageOverviewContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewContentDirective), { isSignal: true }] }], pageOverviewDefaultContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewDefaultContentDirective), { isSignal: true }] }], pageSamplesContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSamplesContentDirective), { isSignal: true }] }], pageSectionsContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSectionsContentDirective), { isSignal: true }] }], pageInteractiveContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageInteractiveContentDirective), { isSignal: true }] }], pageAccessibilityContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageAccessibilityContentDirective), { isSignal: true }] }], pageApiContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageApiContentDirective), { isSignal: true }] }], pageThemingContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageThemingContentDirective), { isSignal: true }] }], pageVisualSpecsContent: [{
+                type: ContentChildren,
+                args: [forwardRef(() => DocPageVisualSpecsContentDirective)]
+            }], pagePlaygroundContent: [{
+                type: ContentChildren,
+                args: [forwardRef(() => DocPagePlaygroundContentDirective)]
+            }], tabsContent: [{ type: i0.ViewChild, args: ['tabsContent', { isSignal: true }] }], navContent: [{
+                type: ViewChild,
+                args: ['navContent']
+            }] } });
 /* eslint-disable @angular-eslint/directive-selector */
 class DocPageOverviewContentDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageOverviewContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -1500,410 +1484,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             type: Directive,
             args: [{ selector: 'docPageApi' }]
         }] });
-class DocPageThemingContentDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageThemingContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageThemingContentDirective, isStandalone: true, selector: "docPageTheming", ngImport: i0 }); }
+class DocPageVisualSpecsContentDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageVisualSpecsContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageVisualSpecsContentDirective, isStandalone: true, selector: "docPageVisualSpecs", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageThemingContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageVisualSpecsContentDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'docPageTheming' }]
+            args: [{ selector: 'docPageVisualSpecs' }]
         }] });
-
-class DocPageComponentV2 {
-    constructor() {
-        this.id = input(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-        this.label = input(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        this.subLabel = input(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "subLabel" }] : /* istanbul ignore next */ []));
-        this.isNotReadyInput = input(false, { ...(ngDevMode ? { debugName: "isNotReadyInput" } : /* istanbul ignore next */ {}), alias: 'isNotReady' });
-        this.isDeprecatedInput = input(false, { ...(ngDevMode ? { debugName: "isDeprecatedInput" } : /* istanbul ignore next */ {}), alias: 'isDeprecated' });
-        this.isLegacyInput = input(false, { ...(ngDevMode ? { debugName: "isLegacyInput" } : /* istanbul ignore next */ {}), alias: 'isLegacy' });
-        this.codeFolder = input(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
-        this.showcase = input('ux', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "showcase" }] : /* istanbul ignore next */ []));
-        this.isNavigationVisible = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isNavigationVisible" }] : /* istanbul ignore next */ []));
-        this.hasApi = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hasApi" }] : /* istanbul ignore next */ []));
-        this.hasA11y = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hasA11y" }] : /* istanbul ignore next */ []));
-        this.customApiUrl = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "customApiUrl" }] : /* istanbul ignore next */ []));
-        // Writable signals for properties that are both input-driven and internally mutated
-        this.isNotReady = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isNotReady" }] : /* istanbul ignore next */ []));
-        this.isDeprecated = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isDeprecated" }] : /* istanbul ignore next */ []));
-        this.isLegacy = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isLegacy" }] : /* istanbul ignore next */ []));
-        this.isLoading = true;
-        this.isNavClicked = true;
-        this.hasCategories = false;
-        this.categories = [];
-        this.samples = contentChildren(DocSampleComponent, { ...(ngDevMode ? { debugName: "samples" } : /* istanbul ignore next */ {}), descendants: true });
-        this.sections = contentChildren(DocSectionComponent, { ...(ngDevMode ? { debugName: "sections" } : /* istanbul ignore next */ {}), descendants: true });
-        this.pageOverviewContent = contentChildren(forwardRef(() => DocPageOverviewContentDirectiveV2), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "pageOverviewContent" }] : /* istanbul ignore next */ []));
-        this.pageOverviewDefaultContent = contentChildren(forwardRef(() => DocPageOverviewDefaultContentDirectiveV2), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "pageOverviewDefaultContent" }] : /* istanbul ignore next */ []));
-        this.pageSamplesContent = contentChildren(forwardRef(() => DocPageSamplesContentDirectiveV2), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "pageSamplesContent" }] : /* istanbul ignore next */ []));
-        this.pageSectionsContent = contentChildren(forwardRef(() => DocPageSectionsContentDirectiveV2), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "pageSectionsContent" }] : /* istanbul ignore next */ []));
-        this.pageInteractiveContent = contentChildren(forwardRef(() => DocPageInteractiveContentDirectiveV2), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "pageInteractiveContent" }] : /* istanbul ignore next */ []));
-        this.pageAccessibilityContent = contentChildren(forwardRef(() => DocPageAccessibilityContentDirectiveV2), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "pageAccessibilityContent" }] : /* istanbul ignore next */ []));
-        this.pageApiContent = contentChildren(forwardRef(() => DocPageApiContentDirectiveV2), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "pageApiContent" }] : /* istanbul ignore next */ []));
-        this.pageThemingContent = contentChildren(forwardRef(() => DocPageThemingContentDirectiveV2), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "pageThemingContent" }] : /* istanbul ignore next */ []));
-        this.tabsContent = viewChild('tabsContent', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "tabsContent" }] : /* istanbul ignore next */ []));
-        this.sanitizer = inject(DomSanitizer);
-        this.location = inject(Location);
-        this.router = inject(Router);
-        this.route = inject(ActivatedRoute);
-        this.asService = inject(EuiAppShellService);
-        this.TABS_DEF = [
-            { index: 0, id: 'samples' },
-            { index: 1, id: 'api' },
-            { index: 2, id: 'a11y' },
-            { index: 3, id: 'theming' },
-            { index: 4, id: 'advanced' },
-        ];
-        this.CATEGORIES_DEF = [
-            { index: 0, id: 'Base' },
-            { index: 10, id: 'Variants' },
-            { index: 20, id: 'Options' },
-            { index: 30, id: 'Main Features' },
-            { index: 40, id: 'free-category' },
-            { index: 50, id: 'Reactive Forms' },
-            { index: 60, id: 'Event Handlers' },
-            { index: 70, id: 'Composition' },
-            { index: 80, id: 'Misc' },
-        ];
-    }
-    ngOnInit() {
-        // Sync input signals to writable signals
-        if (this.isNotReadyInput())
-            this.isNotReady.set(true);
-        if (this.isDeprecatedInput())
-            this.isDeprecated.set(true);
-        if (this.isLegacyInput())
-            this.isLegacy.set(true);
-        afterNextRender(() => {
-            this.asService.isBlockDocumentActive = true;
-        });
-        this.appMetadata = this.asService.state.appMetadata;
-        this.fragmentId = this.route.snapshot.fragment;
-    }
-    ngAfterViewInit() {
-        // Getting API url
-        try {
-            this.apiUrl = this._getApiUrl();
-            afterNextRender(() => {
-                this.apiUrlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.apiUrl);
-            });
-        }
-        catch (e) {
-            // API URL construction failed - non-critical
-        }
-        afterNextRender(() => {
-            const tab = this.TABS_DEF.find((t) => t.id === this.fragmentId);
-            const tabIndex = tab ? tab.index : 0;
-            this._buildCategories();
-            setTimeout(() => {
-                this._scrollToFragment(this.fragmentId, tabIndex, true, true);
-                this.asService.isBlockDocumentActive = false;
-                this.isLoading = false;
-            }, 1);
-        });
-    }
-    getCategoryIndex(name) {
-        const category = this.CATEGORIES_DEF.find(cat => cat.id.toLowerCase() === name.toLowerCase());
-        return category ? category.index : this.CATEGORIES_DEF.find(cat => cat.id === 'free-category').index;
-    }
-    onNavClick(fragmentId, tabIndex) {
-        this.fragmentId = fragmentId;
-        this.isNavClicked = true;
-        this._scrollToFragment(this.fragmentId, tabIndex, false, true);
-    }
-    onTabActivate(event) {
-        if (!this.isLoading && !this.isNavClicked) {
-            const tabId = this.TABS_DEF.find((t) => t.index === event.index)?.id;
-            if (tabId) {
-                this._scrollToFragment(tabId, event.index, false, false);
-            }
-        }
-        this.isNavClicked = false;
-    }
-    _buildCategories() {
-        const categoriesJson = {};
-        this.samples().forEach((s) => {
-            const id = s.id();
-            const category = s.category();
-            const isDefault = id === '_default' || id === 'Default' || id === 'default';
-            if (isDefault) {
-                (categoriesJson['Base'] ??= []).push(s);
-            }
-            else if (category) {
-                this.hasCategories = true;
-                (categoriesJson[category] ??= []).push(s);
-            }
-            else {
-                (categoriesJson['others'] ??= []).push(s);
-            }
-        });
-        Object.keys(categoriesJson).forEach((c) => {
-            const normalizedKey = c.toLowerCase();
-            const existingCategory = this.categories.find(cat => cat.name.toLowerCase() === normalizedKey);
-            if (existingCategory) {
-                existingCategory.samples = [...existingCategory.samples, ...categoriesJson[c]].sort((a, b) => a.label().localeCompare(b.label()));
-            }
-            else {
-                this.categories.push({
-                    name: c,
-                    samples: categoriesJson[c].sort((a, b) => a.label().localeCompare(b.label())),
-                });
-            }
-        });
-        const othersIndex = this.categories.findIndex(v => v.name === 'others');
-        if (othersIndex > -1) {
-            this.categories.push(this.categories.splice(othersIndex, 1)[0]);
-        }
-        this.categories.sort((a, b) => this.getCategoryIndex(a.name) - this.getCategoryIndex(b.name));
-    }
-    _scrollToFragment(fragmentId, tabIndex, init, changeTab) {
-        if (init) {
-            const tabsContent = this.tabsContent();
-            if (tabsContent) {
-                tabsContent.activateTab(tabIndex);
-            }
-        }
-        else {
-            if (changeTab) {
-                this.router.onSameUrlNavigation = 'reload';
-                this.router.navigate(['.'], { relativeTo: this.route, fragment: fragmentId }).then(() => {
-                    const tabsContent = this.tabsContent();
-                    if (tabsContent) {
-                        tabsContent.activateTab(tabIndex);
-                    }
-                });
-            }
-            else {
-                const routeRoot = this.router.url.split('#')[0];
-                this.location.go(`${routeRoot}#${fragmentId}`);
-            }
-        }
-        if (fragmentId) {
-            setTimeout(() => {
-                const fgm = document.getElementById(fragmentId);
-                if (fgm) {
-                    fgm.scrollIntoView();
-                }
-            });
-        }
-    }
-    _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.find((item) => item.id === id) ?? flatLinks.find((item) => item.alternateId === id);
-    }
-    _getApiUrl() {
-        const url = window.location;
-        const protocol = url.protocol;
-        const host = url.host;
-        const pathName = url.pathname;
-        const pathNameArray = pathName.split('/');
-        let name = pathNameArray[pathNameArray.length - 1];
-        let category = pathNameArray[pathNameArray.length - 2];
-        let showcaseType = pathNameArray[pathNameArray.length - 3];
-        if (showcaseType?.indexOf('eui-showcase') === -1) {
-            showcaseType = pathNameArray[pathNameArray.length - 4];
-        }
-        let protocolGen = protocol;
-        let hostGen = host;
-        if (host.indexOf('localhost') > -1) {
-            protocolGen = 'https:';
-            hostGen = 'euidev.ecdevops.eu';
-        }
-        const appVersionNumber = this.appMetadata.appVersion.split('.')[0];
-        let docTypeRoot = `eui-docs-eui-${appVersionNumber}.x`;
-        if (showcaseType && showcaseType.indexOf('-ecl') > -1) {
-            docTypeRoot = `eui-docs-ecl-${appVersionNumber}.x`;
-        }
-        if (showcaseType && showcaseType.indexOf('-mobile') > -1) {
-            docTypeRoot = `eui-docs-mobile-core-${appVersionNumber}.x`;
-        }
-        if (category === 'layout-components' || category === 'externals' || category === 'layout' || category === 'atoms') {
-            category = 'components';
-        }
-        setTimeout(() => {
-            if (name.indexOf('-service') > -1 || name.indexOf('-template') > -1) {
-                name = name.replace('-service', '').replace('-template', '');
-            }
-            try {
-                this.cmp = this._getComponentStatus(name);
-                if (this.cmp && this.cmp.alternateApiCategory) {
-                    category = this.cmp.alternateApiCategory;
-                }
-                if (this.cmp) {
-                    switch (this.cmp.status) {
-                        case 'success':
-                            this.stateLabel = 'ACTIVE';
-                            this.stateTypeClass = 'success';
-                            break;
-                        case 'warning':
-                            this.stateLabel = 'will be removed in eUI 21';
-                            this.stateTypeClass = 'warning';
-                            this.isDeprecated.set(true);
-                            break;
-                        case 'danger':
-                            this.stateLabel = 'will be removed in eUI 21';
-                            this.stateTypeClass = 'danger';
-                            this.isLegacy.set(true);
-                            break;
-                        case 'info':
-                            this.stateLabel = 'NOT READY';
-                            this.stateTypeClass = 'accent';
-                            this.isNotReady.set(true);
-                            break;
-                    }
-                    if (this.cmp.metadata?.moduleName) {
-                        this.cmpImportModule = `import { ${this.cmp.metadata?.moduleName} } from '@eui/${this.cmp.metadata?.subEntryName}';`;
-                    }
-                    if (this.cmp.metadata?.exportName) {
-                        this.cmpImportStandalone = `import { ${this.cmp.metadata?.exportName} } from '@eui/${this.cmp.metadata?.subEntryName}';`;
-                        this.cmpImportStandaloneCmp = `@Component({\n...\n  imports: [...${this.cmp.metadata?.exportName}],\n...\n})`;
-                    }
-                }
-            }
-            catch (e) {
-                // Component status resolution failed - non-critical
-            }
-        });
-        const formattedName = this._camelCaseString(name + '-' + category.slice(0, -1), '-', true);
-        const customApiUrl = this.customApiUrl();
-        return customApiUrl ? `${protocolGen}//${hostGen}/${docTypeRoot}/${category}/${customApiUrl}.html` : `${protocolGen}//${hostGen}/${docTypeRoot}/${category}/${formattedName}.html`;
-    }
-    _camelCaseString(str, separator, first) {
-        const stringArray = str.split(separator);
-        let result = '';
-        for (let i = 0; i < stringArray.length; i++) {
-            const s = stringArray[i];
-            if (i === 0) {
-                result += first ? s.substring(0, 1).toUpperCase() + s.substring(1) : s;
-            }
-            else {
-                result += s.substring(0, 1).toUpperCase() + s.substring(1);
-            }
-        }
-        return result;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageComponentV2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPageComponentV2, isStandalone: true, selector: "eui-showcase-doc-page-v2", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, isNotReadyInput: { classPropertyName: "isNotReadyInput", publicName: "isNotReady", isSignal: true, isRequired: false, transformFunction: null }, isDeprecatedInput: { classPropertyName: "isDeprecatedInput", publicName: "isDeprecated", isSignal: true, isRequired: false, transformFunction: null }, isLegacyInput: { classPropertyName: "isLegacyInput", publicName: "isLegacy", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, showcase: { classPropertyName: "showcase", publicName: "showcase", isSignal: true, isRequired: false, transformFunction: null }, isNavigationVisible: { classPropertyName: "isNavigationVisible", publicName: "isNavigationVisible", isSignal: true, isRequired: false, transformFunction: null }, hasApi: { classPropertyName: "hasApi", publicName: "hasApi", isSignal: true, isRequired: false, transformFunction: null }, hasA11y: { classPropertyName: "hasA11y", publicName: "hasA11y", isSignal: true, isRequired: false, transformFunction: null }, customApiUrl: { classPropertyName: "customApiUrl", publicName: "customApiUrl", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-doc-page" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true, isSignal: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true, isSignal: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirectiveV2), isSignal: true }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirectiveV2), isSignal: true }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirectiveV2), isSignal: true }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirectiveV2), isSignal: true }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirectiveV2), isSignal: true }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirectiveV2), isSignal: true }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirectiveV2), isSignal: true }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirectiveV2), isSignal: true }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<eui-page>\n  <eui-page-content>\n    <eui-page-columns>\n      <eui-page-column>\n        <eui-page-column-body>\n          <eui-page-header class=\"eui-doc-page-title\">\n            <eui-page-header-label>{{ label() || id() }}</eui-page-header-label>\n            <eui-page-header-sub-label>{{subLabel()}}</eui-page-header-sub-label>\n            <eui-page-header-action-items>\n              @if (codeFolder()) {\n                <eui-showcase-doc-page-code\n                  codeFolder=\"{{ codeFolder() }}\"\n                  showcase=\"{{ showcase() }}\" />\n              }\n              @if (stateLabel) {\n                <eui-chip euiSizeS isFilled\n                  [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                  [euiInfo]=\"isNotReady()\"\n                  [euiWarning]=\"isDeprecated()\"\n                  [euiDanger]=\"isLegacy()\">\n                  {{ stateLabel }}\n                </eui-chip>\n              }\n            </eui-page-header-action-items>\n          </eui-page-header>\n\n          @if (stateLabel === 'LEGACY' || isLegacy()) {\n            <eui-alert euiDanger class=\"eui-u-mb-xl\">\n              <eui-alert-title>LEGACY component</eui-alert-title>\n              <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n              @if (cmp) {\n                <div>\n                  @if (cmp.cmpReplacement !== 'NONE') {\n                    <div>\n                      It has been replaced by :\n                      <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n                    </div>\n                  }\n                  @if (cmp.cmpReplacement === 'NONE') {\n                    <div>\n                      <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n                    </div>\n                  }\n                  @if (cmp.cmpReplacementNote) {\n                    <div>\n                      <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n                    </div>\n                  }\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'DEPRECATED' || isDeprecated()) {\n            <eui-alert euiWarning class=\"eui-u-mb-xl\">\n              <eui-alert-title>DEPRECATED component</eui-alert-title>\n              This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n              @if (cmp) {\n                <div>\n                  This component has no replacement in current version AND won't have replacement in next version of eUI,\n                  <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'NOT_READY' || isNotReady()) {\n            <eui-alert euiInfo class=\"eui-u-mb-xl\">\n              <eui-alert-title>NOT READY for production usage</eui-alert-title>\n              @if (cmp) {\n                <div>\n                  This component is under development / some features might be missing, it'll be available in a future release once\n                  validated.\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if ((stateLabel || isNotReady() || isDeprecated()) && stateLabel !== 'ACTIVE') {\n            <div class=\"mb-5\"></div>\n          }\n\n          @if (pageSectionsContent().length === 0) {\n            <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n              <eui-tab>\n                <eui-tab-header>\n                  <eui-label> OPTIONS & SAMPLES </eui-label>\n                </eui-tab-header>\n                <eui-tab-body>\n                  @if (cmp && cmp.metadata) {\n                    @if (cmpImportModule) {\n                      <div class=\"doc-page-section-title\">Module import</div>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n                    }\n                    @if (cmpImportStandalone) {\n                      <div class=\"doc-page-section-title\">Component import</div>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n                    }\n                    <br />\n                  }\n                  <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n                  @if (pageOverviewContent().length > 0) {\n                    <div>\n                      <ng-content select=\"docPageOverviewV2\" />\n                    </div>\n                  }\n                  @if (pageOverviewDefaultContent().length > 0) {\n                    <div>\n                      <ng-content select=\"docPageOverviewDefaultV2\" />\n                    </div>\n                  }\n                  <br />\n                  <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n                  <ng-content select=\"docPageSamplesV2\" />\n                </eui-tab-body>\n              </eui-tab>\n              @if (hasApi()) {\n                <eui-tab>\n                  <eui-tab-header>\n                    <eui-label> API </eui-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    @if (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\" title=\"API documentation\"></iframe>\n                      </div>\n                    }\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (hasA11y()) {\n                <eui-tab>\n                  <eui-tab-header>\n                    <eui-label> A11Y </eui-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n                    @if (pageAccessibilityContent().length !== 0) {\n                      <ng-content select=\"docPageAccessibilityV2\" />\n                      <p>\n                        For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n                      </p>\n                    }\n                    @if (pageAccessibilityContent().length === 0) {\n                      No accessibility rules applicable\n                    }\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (pageThemingContent().length > 0) {\n                <eui-tab>\n                  <eui-tab-header>\n                    <eui-label> THEMING </eui-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n                    <ng-content select=\"docPageThemingV2\" />\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (pageInteractiveContent().length > 0) {\n                <eui-tab>\n                  <eui-tab-header>\n                    <eui-label>\n                      {{ pageInteractiveContent()[0].title() }}\n                    </eui-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"interactive\" class=\"doc-page-section-title\">\n                      {{ pageInteractiveContent()[0].subTitle() }}\n                    </div>\n                    <ng-content select=\"docPageInteractiveV2\" />\n                  </eui-tab-body>\n                </eui-tab>\n              }\n            </eui-tabs>\n          }\n\n          @if (pageSectionsContent().length > 0) {\n            @if (sections().length === 0) {\n              <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n            }\n            <ng-content select=\"docPageSectionsV2\" />\n          }\n\n        </eui-page-column-body>\n      </eui-page-column>\n\n      @if (isNavigationVisible()) {\n        <eui-page-column\n          class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n          label=\"On this page\"\n          euiSizeVariant=\"4xl\"\n          isCollapsible\n          isRightCollapsible>\n          <eui-page-column-header>\n            <eui-page-column-header-label>\n              On this page\n            </eui-page-column-header-label>\n          </eui-page-column-header>\n          <eui-page-column-body>\n            <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n              <ul class=\"doc-page-navigation\">\n                @if (pageSectionsContent().length === 0) {\n                  @if (hasApi()) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n                      (click)=\"onNavClick('api', 1)\">\n                      <span>API</span>\n                    </li>\n                  }\n                  @if (hasA11y()) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n                      (click)=\"onNavClick('a11y', 2)\">\n                      <span>A11Y</span>\n                    </li>\n                  }\n                  <li\n                    class=\"doc-page-navigation-item\"\n                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n                    (click)=\"onNavClick('samples', 0)\">\n                    <span>OPTIONS & SAMPLES</span>\n                  </li>\n                  <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                    @if (categories.length > 0) {\n                      @if (hasCategories) {\n                        @for (category of categories; track category) {\n                          @if (category.name === 'Base') {\n                            @for (sample of category.samples; track sample; let i = $index) {\n                              <ul class=\"doc-page-navigation-list\">\n                                <li\n                                  class=\"doc-page-navigation-item\"\n                                  [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n                                  (click)=\"onNavClick(sample.id(), 0)\">\n                                  <span>{{ sample.label() || sample.id() }}</span>\n                                </li>\n                              </ul>\n                            }\n                          } @else {\n                            @if (category.name !== 'Base') {\n                              <div class=\"doc-page-navigation-category\">{{category.name}}</div>\n                            }\n                            @for (sample of category.samples; track sample) {\n                              <ul class=\"doc-page-navigation-list\">\n                                <li\n                                  class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n                                  [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id()\"\n                                  (click)=\"onNavClick(sample.id(), 0)\">\n                                  <span>{{ sample.label() || sample.id() }}</span>\n                                </li>\n                              </ul>\n                            }\n                          }\n                        }\n                      } @else {\n                        @for (sample of samples(); track sample; let i = $index) {\n                          <ul class=\"doc-page-navigation-list\">\n                            <li\n                              class=\"doc-page-navigation-item\"\n                              [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n                              (click)=\"onNavClick(sample.id(), 0)\">\n                              <span>{{ sample.label() || sample.id() }}</span>\n                            </li>\n                          </ul>\n                        }\n                      }\n                    }\n                  </li>\n                  <!-- OPTIONAL TABS-->\n                  @if (pageThemingContent().length > 0) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n                      (click)=\"onNavClick('theming', 3)\">\n                      <span>THEMING</span>\n                    </li>\n                    @if (pageInteractiveContent().length > 0) {\n                      <li\n                        class=\"doc-page-navigation-item\"\n                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                        (click)=\"onNavClick('advanced', 4)\">\n                        <span>{{ pageInteractiveContent()[0].title() }}</span>\n                      </li>\n                    }\n                  }\n                  @if (pageThemingContent().length === 0) {\n                    @if (pageInteractiveContent().length > 0) {\n                      <li\n                        class=\"doc-page-navigation-item\"\n                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                        (click)=\"onNavClick('advanced', 3)\">\n                        <span>{{ pageInteractiveContent()[0].title() }}</span>\n                      </li>\n                    }\n                  }\n                }\n                @if (pageSectionsContent().length > 0) {\n                  <li\n                    class=\"doc-page-navigation-item\"\n                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n                    (click)=\"onNavClick('sections', null)\">\n                    <span>Sections</span>\n                  </li>\n                  @if (sections().length === 0) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n                      (click)=\"onNavClick('demo', null)\">\n                      <span>Demo</span>\n                    </li>\n                  }\n                  @if (sections().length > 0) {\n                    <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                      @for (section of sections(); track section; let i = $index) {\n                        <ul>\n                          <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n                            (click)=\"onNavClick(section.id(), null)\">\n                            <span>{{ section.label() || section.id() }}</span>\n                          </li>\n                        </ul>\n                      }\n                    </li>\n                  }\n                }\n              </ul>\n            </div>\n          </eui-page-column-body>\n        </eui-page-column>\n      }\n\n    </eui-page-columns>\n  </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page{display:flex;width:100%;height:100%}.eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-3xl)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-4xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-primary);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-xl);font:var(--eui-f-xl)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);font:var(--eui-f-l-bold)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { kind: "component", type: i1$1.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i1$1.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i3$1.EuiPage, selector: "eui-page" }, { kind: "component", type: i3$1.EuiPageContent, selector: "eui-page-content" }, { kind: "component", type: i3$1.EuiPageHeader, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i3$1.EuiPageHeaderLabel, selector: "eui-page-header-label" }, { kind: "component", type: i3$1.EuiPageHeaderSubLabel, selector: "eui-page-header-sub-label" }, { kind: "component", type: i3$1.EuiPageHeaderActionItems, selector: "eui-page-header-action-items" }, { kind: "component", type: i3$1.EuiPageColumns, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3$1.EuiPageColumn, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile"], outputs: ["collapse", "headerCollapse"] }, { kind: "component", type: i3$1.EuiPageColumnHeader, selector: "eui-page-column-header", inputs: ["expandAriaLabel", "collapseAriaLabel"] }, { kind: "component", type: i3$1.EuiPageColumnHeaderLabel, selector: "eui-page-column-header-label" }, { kind: "component", type: i3$1.EuiPageColumnBody, selector: "eui-page-column-body" }, { kind: "component", type: i4.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageComponentV2, decorators: [{
-            type: Component,
-            args: [{ selector: 'eui-showcase-doc-page-v2', encapsulation: ViewEncapsulation.None, host: { class: 'eui-doc-page' }, imports: [
-                        DocPageCodeComponent,
-                        ...EUI_ALERT,
-                        ...EUI_TABS,
-                        ...EUI_PAGE$1,
-                        ...EUI_LABEL,
-                        ...EUI_CHIP,
-                        EuiCodeHighlighterDirective,
-                    ], template: "<eui-page>\n  <eui-page-content>\n    <eui-page-columns>\n      <eui-page-column>\n        <eui-page-column-body>\n          <eui-page-header class=\"eui-doc-page-title\">\n            <eui-page-header-label>{{ label() || id() }}</eui-page-header-label>\n            <eui-page-header-sub-label>{{subLabel()}}</eui-page-header-sub-label>\n            <eui-page-header-action-items>\n              @if (codeFolder()) {\n                <eui-showcase-doc-page-code\n                  codeFolder=\"{{ codeFolder() }}\"\n                  showcase=\"{{ showcase() }}\" />\n              }\n              @if (stateLabel) {\n                <eui-chip euiSizeS isFilled\n                  [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                  [euiInfo]=\"isNotReady()\"\n                  [euiWarning]=\"isDeprecated()\"\n                  [euiDanger]=\"isLegacy()\">\n                  {{ stateLabel }}\n                </eui-chip>\n              }\n            </eui-page-header-action-items>\n          </eui-page-header>\n\n          @if (stateLabel === 'LEGACY' || isLegacy()) {\n            <eui-alert euiDanger class=\"eui-u-mb-xl\">\n              <eui-alert-title>LEGACY component</eui-alert-title>\n              <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n              @if (cmp) {\n                <div>\n                  @if (cmp.cmpReplacement !== 'NONE') {\n                    <div>\n                      It has been replaced by :\n                      <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n                    </div>\n                  }\n                  @if (cmp.cmpReplacement === 'NONE') {\n                    <div>\n                      <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n                    </div>\n                  }\n                  @if (cmp.cmpReplacementNote) {\n                    <div>\n                      <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n                    </div>\n                  }\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'DEPRECATED' || isDeprecated()) {\n            <eui-alert euiWarning class=\"eui-u-mb-xl\">\n              <eui-alert-title>DEPRECATED component</eui-alert-title>\n              This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n              @if (cmp) {\n                <div>\n                  This component has no replacement in current version AND won't have replacement in next version of eUI,\n                  <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'NOT_READY' || isNotReady()) {\n            <eui-alert euiInfo class=\"eui-u-mb-xl\">\n              <eui-alert-title>NOT READY for production usage</eui-alert-title>\n              @if (cmp) {\n                <div>\n                  This component is under development / some features might be missing, it'll be available in a future release once\n                  validated.\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if ((stateLabel || isNotReady() || isDeprecated()) && stateLabel !== 'ACTIVE') {\n            <div class=\"mb-5\"></div>\n          }\n\n          @if (pageSectionsContent().length === 0) {\n            <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n              <eui-tab>\n                <eui-tab-header>\n                  <eui-label> OPTIONS & SAMPLES </eui-label>\n                </eui-tab-header>\n                <eui-tab-body>\n                  @if (cmp && cmp.metadata) {\n                    @if (cmpImportModule) {\n                      <div class=\"doc-page-section-title\">Module import</div>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n                    }\n                    @if (cmpImportStandalone) {\n                      <div class=\"doc-page-section-title\">Component import</div>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n                    }\n                    <br />\n                  }\n                  <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n                  @if (pageOverviewContent().length > 0) {\n                    <div>\n                      <ng-content select=\"docPageOverviewV2\" />\n                    </div>\n                  }\n                  @if (pageOverviewDefaultContent().length > 0) {\n                    <div>\n                      <ng-content select=\"docPageOverviewDefaultV2\" />\n                    </div>\n                  }\n                  <br />\n                  <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n                  <ng-content select=\"docPageSamplesV2\" />\n                </eui-tab-body>\n              </eui-tab>\n              @if (hasApi()) {\n                <eui-tab>\n                  <eui-tab-header>\n                    <eui-label> API </eui-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    @if (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\" title=\"API documentation\"></iframe>\n                      </div>\n                    }\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (hasA11y()) {\n                <eui-tab>\n                  <eui-tab-header>\n                    <eui-label> A11Y </eui-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n                    @if (pageAccessibilityContent().length !== 0) {\n                      <ng-content select=\"docPageAccessibilityV2\" />\n                      <p>\n                        For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n                      </p>\n                    }\n                    @if (pageAccessibilityContent().length === 0) {\n                      No accessibility rules applicable\n                    }\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (pageThemingContent().length > 0) {\n                <eui-tab>\n                  <eui-tab-header>\n                    <eui-label> THEMING </eui-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n                    <ng-content select=\"docPageThemingV2\" />\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (pageInteractiveContent().length > 0) {\n                <eui-tab>\n                  <eui-tab-header>\n                    <eui-label>\n                      {{ pageInteractiveContent()[0].title() }}\n                    </eui-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"interactive\" class=\"doc-page-section-title\">\n                      {{ pageInteractiveContent()[0].subTitle() }}\n                    </div>\n                    <ng-content select=\"docPageInteractiveV2\" />\n                  </eui-tab-body>\n                </eui-tab>\n              }\n            </eui-tabs>\n          }\n\n          @if (pageSectionsContent().length > 0) {\n            @if (sections().length === 0) {\n              <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n            }\n            <ng-content select=\"docPageSectionsV2\" />\n          }\n\n        </eui-page-column-body>\n      </eui-page-column>\n\n      @if (isNavigationVisible()) {\n        <eui-page-column\n          class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n          label=\"On this page\"\n          euiSizeVariant=\"4xl\"\n          isCollapsible\n          isRightCollapsible>\n          <eui-page-column-header>\n            <eui-page-column-header-label>\n              On this page\n            </eui-page-column-header-label>\n          </eui-page-column-header>\n          <eui-page-column-body>\n            <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n              <ul class=\"doc-page-navigation\">\n                @if (pageSectionsContent().length === 0) {\n                  @if (hasApi()) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n                      (click)=\"onNavClick('api', 1)\">\n                      <span>API</span>\n                    </li>\n                  }\n                  @if (hasA11y()) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n                      (click)=\"onNavClick('a11y', 2)\">\n                      <span>A11Y</span>\n                    </li>\n                  }\n                  <li\n                    class=\"doc-page-navigation-item\"\n                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n                    (click)=\"onNavClick('samples', 0)\">\n                    <span>OPTIONS & SAMPLES</span>\n                  </li>\n                  <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                    @if (categories.length > 0) {\n                      @if (hasCategories) {\n                        @for (category of categories; track category) {\n                          @if (category.name === 'Base') {\n                            @for (sample of category.samples; track sample; let i = $index) {\n                              <ul class=\"doc-page-navigation-list\">\n                                <li\n                                  class=\"doc-page-navigation-item\"\n                                  [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n                                  (click)=\"onNavClick(sample.id(), 0)\">\n                                  <span>{{ sample.label() || sample.id() }}</span>\n                                </li>\n                              </ul>\n                            }\n                          } @else {\n                            @if (category.name !== 'Base') {\n                              <div class=\"doc-page-navigation-category\">{{category.name}}</div>\n                            }\n                            @for (sample of category.samples; track sample) {\n                              <ul class=\"doc-page-navigation-list\">\n                                <li\n                                  class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n                                  [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id()\"\n                                  (click)=\"onNavClick(sample.id(), 0)\">\n                                  <span>{{ sample.label() || sample.id() }}</span>\n                                </li>\n                              </ul>\n                            }\n                          }\n                        }\n                      } @else {\n                        @for (sample of samples(); track sample; let i = $index) {\n                          <ul class=\"doc-page-navigation-list\">\n                            <li\n                              class=\"doc-page-navigation-item\"\n                              [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n                              (click)=\"onNavClick(sample.id(), 0)\">\n                              <span>{{ sample.label() || sample.id() }}</span>\n                            </li>\n                          </ul>\n                        }\n                      }\n                    }\n                  </li>\n                  <!-- OPTIONAL TABS-->\n                  @if (pageThemingContent().length > 0) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n                      (click)=\"onNavClick('theming', 3)\">\n                      <span>THEMING</span>\n                    </li>\n                    @if (pageInteractiveContent().length > 0) {\n                      <li\n                        class=\"doc-page-navigation-item\"\n                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                        (click)=\"onNavClick('advanced', 4)\">\n                        <span>{{ pageInteractiveContent()[0].title() }}</span>\n                      </li>\n                    }\n                  }\n                  @if (pageThemingContent().length === 0) {\n                    @if (pageInteractiveContent().length > 0) {\n                      <li\n                        class=\"doc-page-navigation-item\"\n                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                        (click)=\"onNavClick('advanced', 3)\">\n                        <span>{{ pageInteractiveContent()[0].title() }}</span>\n                      </li>\n                    }\n                  }\n                }\n                @if (pageSectionsContent().length > 0) {\n                  <li\n                    class=\"doc-page-navigation-item\"\n                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n                    (click)=\"onNavClick('sections', null)\">\n                    <span>Sections</span>\n                  </li>\n                  @if (sections().length === 0) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n                      (click)=\"onNavClick('demo', null)\">\n                      <span>Demo</span>\n                    </li>\n                  }\n                  @if (sections().length > 0) {\n                    <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                      @for (section of sections(); track section; let i = $index) {\n                        <ul>\n                          <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n                            (click)=\"onNavClick(section.id(), null)\">\n                            <span>{{ section.label() || section.id() }}</span>\n                          </li>\n                        </ul>\n                      }\n                    </li>\n                  }\n                }\n              </ul>\n            </div>\n          </eui-page-column-body>\n        </eui-page-column>\n      }\n\n    </eui-page-columns>\n  </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page{display:flex;width:100%;height:100%}.eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-3xl)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-4xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-primary);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-xl);font:var(--eui-f-xl)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);font:var(--eui-f-l-bold)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], subLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subLabel", required: false }] }], isNotReadyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNotReady", required: false }] }], isDeprecatedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDeprecated", required: false }] }], isLegacyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLegacy", required: false }] }], codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }], showcase: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcase", required: false }] }], isNavigationVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNavigationVisible", required: false }] }], hasApi: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasApi", required: false }] }], hasA11y: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasA11y", required: false }] }], customApiUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "customApiUrl", required: false }] }], samples: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSampleComponent), { ...{ descendants: true }, isSignal: true }] }], sections: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSectionComponent), { ...{ descendants: true }, isSignal: true }] }], pageOverviewContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewContentDirectiveV2), { isSignal: true }] }], pageOverviewDefaultContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewDefaultContentDirectiveV2), { isSignal: true }] }], pageSamplesContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSamplesContentDirectiveV2), { isSignal: true }] }], pageSectionsContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSectionsContentDirectiveV2), { isSignal: true }] }], pageInteractiveContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageInteractiveContentDirectiveV2), { isSignal: true }] }], pageAccessibilityContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageAccessibilityContentDirectiveV2), { isSignal: true }] }], pageApiContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageApiContentDirectiveV2), { isSignal: true }] }], pageThemingContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageThemingContentDirectiveV2), { isSignal: true }] }], tabsContent: [{ type: i0.ViewChild, args: ['tabsContent', { isSignal: true }] }] } });
-/* eslint-disable @angular-eslint/directive-selector */
-class DocPageOverviewContentDirectiveV2 {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageOverviewContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageOverviewContentDirectiveV2, isStandalone: true, selector: "docPageOverviewV2", ngImport: i0 }); }
+class DocPagePlaygroundContentDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePlaygroundContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPagePlaygroundContentDirective, isStandalone: true, selector: "docPagePlayground", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageOverviewContentDirectiveV2, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePlaygroundContentDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'docPageOverviewV2' }]
+            args: [{ selector: 'docPagePlayground' }]
         }] });
-class DocPageOverviewDefaultContentDirectiveV2 {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageOverviewDefaultContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageOverviewDefaultContentDirectiveV2, isStandalone: true, selector: "docPageOverviewDefaultV2", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageOverviewDefaultContentDirectiveV2, decorators: [{
-            type: Directive,
-            args: [{ selector: 'docPageOverviewDefaultV2' }]
-        }] });
-class DocPageInteractiveContentDirectiveV2 {
-    constructor() {
-        this.title = input('ADVANCED EXAMPLES', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-        this.subTitle = input('Advanced use cases', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "subTitle" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageInteractiveContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: DocPageInteractiveContentDirectiveV2, isStandalone: true, selector: "docPageInteractiveV2", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageInteractiveContentDirectiveV2, decorators: [{
-            type: Directive,
-            args: [{ selector: 'docPageInteractiveV2' }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }] } });
-class DocPageSamplesContentDirectiveV2 {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageSamplesContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageSamplesContentDirectiveV2, isStandalone: true, selector: "docPageSamplesV2", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageSamplesContentDirectiveV2, decorators: [{
-            type: Directive,
-            args: [{ selector: 'docPageSamplesV2' }]
-        }] });
-class DocPageSectionsContentDirectiveV2 {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageSectionsContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageSectionsContentDirectiveV2, isStandalone: true, selector: "docPageSectionsV2", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageSectionsContentDirectiveV2, decorators: [{
-            type: Directive,
-            args: [{ selector: 'docPageSectionsV2' }]
-        }] });
-class DocPageAccessibilityContentDirectiveV2 {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageAccessibilityContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageAccessibilityContentDirectiveV2, isStandalone: true, selector: "docPageAccessibilityV2", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageAccessibilityContentDirectiveV2, decorators: [{
-            type: Directive,
-            args: [{ selector: 'docPageAccessibilityV2' }]
-        }] });
-class DocPageApiContentDirectiveV2 {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageApiContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageApiContentDirectiveV2, isStandalone: true, selector: "docPageApiV2", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageApiContentDirectiveV2, decorators: [{
-            type: Directive,
-            args: [{ selector: 'docPageApiV2' }]
-        }] });
-class DocPageThemingContentDirectiveV2 {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageThemingContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageThemingContentDirectiveV2, isStandalone: true, selector: "docPageThemingV2", ngImport: i0 }); }
+class DocPageThemingContentDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageThemingContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageThemingContentDirective, isStandalone: true, selector: "docPageTheming", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageThemingContentDirectiveV2, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageThemingContentDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'docPageThemingV2' }]
+            args: [{ selector: 'docPageTheming' }]
         }] });
 
 class DocPageCodeFabComponent {
@@ -1930,7 +1533,7 @@ class DocPageCodeFabComponent {
         window.open(sourceRootPath + this.codeFolder(), '_blank');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeFabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPageCodeFabComponent, isStandalone: true, selector: "eui-showcase-doc-page-code-fab", inputs: { codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, showcase: { classPropertyName: "showcase", publicName: "showcase", isSignal: true, isRequired: false, transformFunction: null }, hasContentDialog: { classPropertyName: "hasContentDialog", publicName: "hasContentDialog", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasContentDialog()) {\n  <div class=\"eui-button-fixed eui-u-mb-6xl\">\n    <div class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-cta-surface\">\n      <eui-icon-svg icon=\"eui-code\" size=\"l\" (click)=\"toggleCode()\" />\n    </div>\n  </div>\n\n  <eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"'50vw'\">\n    @if (codeFolder()) {\n      <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onOpenCode()\">\n        <eui-icon-svg icon=\"eui-code\" set=\"eui\" size=\"m\" fillColor=\"grey-100\" class=\"eui-u-mr-xs\" /> VIEW SOURCES\n      </button>\n    }\n    <ng-content />\n    <p class=\"eui-u-text-paragraph\">Use the <kbd class=\"eui-u-text-kbd\">View sources</kbd> button to access the code source of the page.</p>\n  </eui-dialog>\n\n} @else {\n\n  <div class=\"eui-button-fixed eui-u-mb-6xl\">\n    <button class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-cta-surface\" (click)=\"onOpenCode()\">\n      <eui-icon-svg icon=\"eui-code\" size=\"l\" />\n    </button>\n  </div>\n\n}\n\n", dependencies: [{ kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2$3.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "hasClosedOnClickOutside", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter", "classList"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPageCodeFabComponent, isStandalone: true, selector: "eui-showcase-doc-page-code-fab", inputs: { codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, showcase: { classPropertyName: "showcase", publicName: "showcase", isSignal: true, isRequired: false, transformFunction: null }, hasContentDialog: { classPropertyName: "hasContentDialog", publicName: "hasContentDialog", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasContentDialog()) {\n  <div class=\"eui-button-fixed eui-u-mb-6xl\">\n    <div class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-cta-surface\">\n      <eui-icon-svg icon=\"eui-code\" size=\"l\" (click)=\"toggleCode()\" />\n    </div>\n  </div>\n\n  <eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"'50vw'\">\n    @if (codeFolder()) {\n      <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onOpenCode()\">\n        <eui-icon-svg icon=\"eui-code\" set=\"eui\" size=\"m\" fillColor=\"grey-100\" class=\"eui-u-mr-xs\" /> VIEW SOURCES\n      </button>\n    }\n    <ng-content />\n    <p class=\"eui-u-text-paragraph\">Use the <kbd class=\"eui-u-text-kbd\">View sources</kbd> button to access the code source of the page.</p>\n  </eui-dialog>\n\n} @else {\n\n  <div class=\"eui-button-fixed eui-u-mb-6xl\">\n    <button class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-cta-surface\" (click)=\"onOpenCode()\">\n      <eui-icon-svg icon=\"eui-code\" size=\"l\" />\n    </button>\n  </div>\n\n}\n\n", dependencies: [{ kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2$4.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "hasClosedOnClickOutside", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter", "classList"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeFabComponent, decorators: [{
             type: Component,
@@ -1956,7 +1559,7 @@ class DocPageCodeModalComponent {
         this.dialog()?.closeDialog();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: DocPageCodeModalComponent, isStandalone: true, selector: "eui-showcase-doc-page-code-modal", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "<button type=\"button\" euiButton euiCTAButton (click)=\"toggleCode()\">\n    <span euiLabel>Check the code</span>\n    <eui-icon-svg icon=\"eui-code\" />\n</button>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"width()\">\n    <ng-content />\n</eui-dialog>\n", dependencies: [{ kind: "component", type: i2$3.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "hasClosedOnClickOutside", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter", "classList"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: DocPageCodeModalComponent, isStandalone: true, selector: "eui-showcase-doc-page-code-modal", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "<button type=\"button\" euiButton euiCTAButton (click)=\"toggleCode()\">\n    <span euiLabel>Check the code</span>\n    <eui-icon-svg icon=\"eui-code\" />\n</button>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"width()\">\n    <ng-content />\n</eui-dialog>\n", dependencies: [{ kind: "component", type: i2$4.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "hasClosedOnClickOutside", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter", "classList"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeModalComponent, decorators: [{
             type: Component,
@@ -2038,7 +1641,7 @@ class DocPagePatternComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPagePatternComponent, isStandalone: true, selector: "eui-showcase-doc-page-pattern", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, anatomyImage: { classPropertyName: "anatomyImage", publicName: "anatomyImage", isSignal: true, isRequired: false, transformFunction: null }, docEntries: { classPropertyName: "docEntries", publicName: "docEntries", isSignal: true, isRequired: false, transformFunction: null }, dos: { classPropertyName: "dos", publicName: "dos", isSignal: true, isRequired: false, transformFunction: null }, donts: { classPropertyName: "donts", publicName: "donts", isSignal: true, isRequired: false, transformFunction: null }, sourceUrl: { classPropertyName: "sourceUrl", publicName: "sourceUrl", isSignal: true, isRequired: false, transformFunction: null }, figmaUrl: { classPropertyName: "figmaUrl", publicName: "figmaUrl", isSignal: true, isRequired: false, transformFunction: null }, figmaEmbedSrc: { classPropertyName: "figmaEmbedSrc", publicName: "figmaEmbedSrc", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:scroll": "checkScroll()" }, classAttribute: "doc-page-pattern" }, ngImport: i0, template: "<eui-tabs (tabActivate)=\"onTabActivate($event)\">\n  <eui-tab>\n    <eui-label>Usage and documentation</eui-label>\n    <eui-tab-body>\n      <h2 class=\"eui-u-c-primary eui-u-mb-none eui-u-text-h2\">{{ label() }}</h2>\n\n      <h3 class=\"eui-u-text-h3\">Information</h3>\n      <ng-content select=\"docPagePatternDoc\" />\n\n      @if (figmaEmbedSrc()) {\n        <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n        <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n      } @else {\n        @if (figmaUrl() !== 'PENDING_DS') {\n          <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Anatomy</h3>\n          <img\n            src=\"assets/images/design-system/{{ anatomyImage() }}\"\n            alt=\"Design anatomy image\"\n            width=\"90%\"\n            class=\"eui-u-sh-5 eui-u-mb-m\" />\n        }\n      }\n\n      @if (docEntries().length !== 0) {\n        <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Design system references</h3>\n        @for (ref of docEntries(); track ref) {\n          <eui-card class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n            <eui-card-header>\n              <eui-card-header-title>\n                <div class=\"eui-u-flex\">\n                  @if (ref?.id) {\n                    <eui-badge euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n                  }\n                  <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n                </div>\n              </eui-card-header-title>\n              <eui-card-header-right-content>\n                <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n                  @if (ref.mandatory) {\n                    <span euiLabel><strong> Mandatory </strong></span>\n                  }\n                  @if (!ref.mandatory) {\n                    <span euiLabel><strong> Optional </strong></span>\n                  }\n                </eui-chip>\n              </eui-card-header-right-content>\n            </eui-card-header>\n            <eui-card-content>\n              <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n              <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n              @if (ref.whenToUse) {\n                <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n                <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n              }\n              @if (ref.whenNotToUse) {\n                <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n                <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n              }\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  @if (ref.dos && ref.dos.length !== 0) {\n                    <h6 class=\"section-title eui-u-mt-xl\">\n                      <eui-icon-svg icon=\"thumbs-up\"\n                        set=\"sharp\"\n                        size=\"m\"\n                        fillColor=\"success-100\"\n                        class=\"eui-u-mr-m\" />\n                      <strong>Do's</strong>\n                    </h6>\n                    @for (do of ref.dos; track do) {\n                      <li>{{ do }}</li>\n                    }\n                  }\n                </div>\n                <div class=\"col-md-6\">\n                  @if (ref.donts && ref.donts.length !== 0) {\n                    <h6 class=\"section-title eui-u-mt-xl\">\n                      <eui-icon-svg icon=\"hand-right\"\n                        set=\"sharp\"\n                        size=\"m\"\n                        fillColor=\"danger-100\"\n                        class=\"eui-u-mr-m\" />\n                      <strong>Dont's</strong>\n                    </h6>\n                    @for (dont of ref.donts; track dont) {\n                      <li>{{ dont }}</li>\n                    }\n                  }\n                </div>\n              </div>\n            </eui-card-content>\n          </eui-card>\n        }\n      }\n\n      <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n        @if (figmaUrl() === 'PENDING_DS') {\n                Pending Design system publication. Will be available in a future release.\n        } @else {\n            <eui-card>\n                <eui-card-header>\n                    <eui-card-header-left-content>\n                        <img\n                            width=\"32\"\n                            height=\"32\"\n                            alt=\"Figma Logo\"\n                            src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABL1BMVEX/////cmLyTh6iWf8Kz4MavP7yTBr5YUWeUP8AzX3UuP//bVwAt/6jV///rKTyRgr2TwCxX+kA032m6Mf3m4uabPb/aVf/8O8AzHmbSf/xPAD/a1rxQgDyShaaR/8Avv74pJP/urP/6Ob/ZVLQ7//839n5tqj/xL7/b1f/9O/59f/r3v+65/9jzP6yef/p+P+u4//Mqv/iz//cxf/I7P/fvf+U2v71/fqO5LzW9ed74LIp043/y8b4rJz0dln/i3/zXTX2jnf/19P/emv0bEv/p5//l4zzWCz2h270dVf4g2D2Whzt5v+6hfuzbfCuWOjE2+6nz+6BxO5lu+5o1v9Nx/7BlP930v63rf+UoP90lP7n1v/Prv/iwf/Onf+hefiWZPZi36O07dLf9+2A4bX7S8Q6AAAGG0lEQVR4nO2aeVcaZxSHZ6JYhsHYFjsig3UhaHG3RkHBxMRE2zR2M5SuaUW//2cow4CgwMz7uzl65x3v8/+cM8+5y7tdwxAEQRAEQRAEQRAEQRAEQRAEQRCEiFJcOVqYDuDt0wAWV2pFboFAikcv8rl8fiqA/LE9Gtd1Hcd5ubjELTKC5eNcfu5JCBOfmWHYrnOyWOK2GWQhn58I01Mz9HDdp9xCd6g9UfJTNmw5mjVuqX5e5dT8AEPTLJxya92wdJZX9IMMTduMSMsphvcXmqFpOq+55TxeK2cobmgWIqBYhARRQ7PAvgOYmYIEYUPTmWE2PAZqkGRon/AKTqt3UaKh6b7lFCzmQEGCIW8pvgFzlGRov+QTrMEhpBhyrop4CEmGfEHEq5BmaBa4dm+vph7I0OZqp3PYYk83NE0eQUqSEg0dngXjCF3t6YbuIovhO7yTUg1tnsPwGaEMqXXIszmllCHVsMAhOPOghhxnKFIrpRo6HGu+GOpvuBT7OizFvpcalC0N1ZBnY0o4HZL3NDwnxGnC4YlqyHN8Wnm4nbfD8w5FajVEQ6YHU0oh0s74XBc1y4Q0JRkyJWkLxXffT48hlyClm1IMGd/0S3iakm6E2QQpVzUEQ4fnkqbDGdpOCYa8z2vwEQo3ZLvw7nAEKuJvwKw56vEdVoqoocP6PurzPaQIGrqRmBqCFMF5mkgIthIVqEXIsBCBFPVZzikvGoCh7axwi/VYOlbdoqobOicRmWrrsKw2Xqps6NoRCqBPaSGvMsGnZGg7NvsqOJTai1xuam4iMJahhrbr2KcRmNcbQam28O6HzwM584bVB/nGxzRPF9ln9YJ5v7tz/uMXo/lprzRzl1Jp5udffr24uKjXP3zYfsatEMDq3mZyNpmcHAsgmRr4bGu/nkgnuqTTifr2FsPfh7N2PhssN9xwvd6z61luRC+Sa5uz4XqDhuvzg36+ZD1icfxNze+O4daQ+PUcG2w2g6yNJdX8bhuuB/h5ionIpGpKNYC3DRvBgp7jNqNVHztfK/v1G26ECrYU9znFuuzMAoI9QxXBaCimkAj2DMNTNCqJ+i0UwRvDfUXBliJzu1lVbqK3DJ8pC7bgNdxU76L9hoBfIrHBKbgL5mjHUD1H23n6nNFwEg1h23ALEkwk5vkEU2gV+oYNTJCzn47BIfQM0RAyBhFdKTqG+6ggXyWe4yH0DOdhwwTTMQNeC31DaC3swmNISdKx5B6epGxp+pEUw706wTDBswGH9zNtwxShDLn2NQS/luHvJEOe9QI7NnUN/yAZpjkE31MazdjknzRDjpu3+BuuPaghxzk4/jGMv6FBMtSplz6C9TD+e5qd2O9L/3rAswXTpWnsz4fxP+M/gnua+N+1Ue9LN9AQMr4/4UGk3Hlzvs3gldh+t1B9POyEkPPdwjinva5BEWR9e3oE74fwxka7N2DyO77aoEIU3vEfwSyGYfx9j/M0EYigx+69zUStM1rd4p7m2uajNJ4Y99lE4xHMlxrejHDIAPQwQ41mhD1WU/6cdxDD57zT6XTPLrJz3j5r/3w8//er0fy3O+yrref7jbrHRiPSs/qGUW5WLr8MJsP9j59C89JqMR6Ipa9huRJqp7dhRkVPY8OrqpqftoYZVT9dDS+zyoJ6Gl6qR1BPQ0hQR8NDSFBDwwpQg1oaHoCC+hlWQUHtDCtYEepnWIYFdTO8jrshIYSaGQLbUU0N4UaqmyElSfUybMbeENyRamhIKUO9DCkh1MqwjG66tTO8ir0hfHASw8gR/ywlGja5/xuAZnjA/dsAtBX/ivu3AbCL0q4h918j4Jc0LcFL7r9GoCwXVoX7ryFwwfGsTo2GdHyqcv8zBp6mOq33bfAb7zL3L4M00WeZQ+4/hgGDqF0I0UrUbKnwge71NWukHZTHTDTbkva4UjbM6nRu6ke1FLM6FqGP2pKhsaBaFLUWbNXieFgxaluDXcrBc19WVc8ueovm6DBammfoDZXhA6ZW9lC/rdoIyplq9o6kZVmHMUjQPg4qVStrdclWD3VvMEM5aGYq19fXleZBbLJTEARBEARBEARBEARBEARBEARBEHz+B91xJIzYVK0AAAAAAElFTkSuQmCC\" />\n                    </eui-card-header-left-content>\n                    <eui-card-header-title>\n                        <a\n                            class=\"h5 eui-u-text-link-external\"\n                            href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl() }}\"\n                            target=\"blank\">\n                            <span class=\"eui-u-color-grey-75\">Layout component /</span>\n                            {{ label() }}\n                        </a>\n                    </eui-card-header-title>\n                </eui-card-header>\n            </eui-card>\n        }\n        </eui-tab-body>\n    </eui-tab>\n    <eui-tab>\n        <eui-label>Pattern sample</eui-label>\n        <eui-tab-body>\n            <ng-content select=\"docPagePatternSample\" />\n        </eui-tab-body>\n    </eui-tab>\n\n    <eui-tabs-right-content>\n        <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode()\">\n            <eui-icon-svg icon=\"eui-code\" />\n            View sources\n        </button>\n    </eui-tabs-right-content>\n</eui-tabs>\n\n@if (isShowGoTop && tabSelectedIndex === 0) {\n<button\n    type=\"button\"\n    euiButton\n    euiIconButton\n    euiOutline\n    euiRounded\n    euiSizeL\n    class=\"eui-button-fixed eui-u-sh-5\"\n    (click)=\"gotoTop()\"\n    title=\"Goto Top\"\n    aria-label=\"Goto Top\">\n    <!-- \uD83D\uDC46 -->\n    <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\" />\n</button>\n}\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}\n"], dependencies: [{ kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabsRightContentComponent, selector: "eui-tabs-right-content" }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i3$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i3$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i3$2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i3$2.EuiCardHeaderRightContentComponent, selector: "eui-card-header-right-content" }, { kind: "component", type: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i5$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }, { kind: "component", type: i4.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPagePatternComponent, isStandalone: true, selector: "eui-showcase-doc-page-pattern", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, anatomyImage: { classPropertyName: "anatomyImage", publicName: "anatomyImage", isSignal: true, isRequired: false, transformFunction: null }, docEntries: { classPropertyName: "docEntries", publicName: "docEntries", isSignal: true, isRequired: false, transformFunction: null }, dos: { classPropertyName: "dos", publicName: "dos", isSignal: true, isRequired: false, transformFunction: null }, donts: { classPropertyName: "donts", publicName: "donts", isSignal: true, isRequired: false, transformFunction: null }, sourceUrl: { classPropertyName: "sourceUrl", publicName: "sourceUrl", isSignal: true, isRequired: false, transformFunction: null }, figmaUrl: { classPropertyName: "figmaUrl", publicName: "figmaUrl", isSignal: true, isRequired: false, transformFunction: null }, figmaEmbedSrc: { classPropertyName: "figmaEmbedSrc", publicName: "figmaEmbedSrc", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:scroll": "checkScroll()" }, classAttribute: "doc-page-pattern" }, ngImport: i0, template: "<eui-tabs (tabActivate)=\"onTabActivate($event)\">\n  <eui-tab>\n    <eui-label>Usage and documentation</eui-label>\n    <eui-tab-body>\n      <h2 class=\"eui-u-c-primary eui-u-mb-none eui-u-text-h2\">{{ label() }}</h2>\n\n      <h3 class=\"eui-u-text-h3\">Information</h3>\n      <ng-content select=\"docPagePatternDoc\" />\n\n      @if (figmaEmbedSrc()) {\n        <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n        <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n      } @else {\n        @if (figmaUrl() !== 'PENDING_DS') {\n          <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Anatomy</h3>\n          <img\n            src=\"assets/images/design-system/{{ anatomyImage() }}\"\n            alt=\"Design anatomy image\"\n            width=\"90%\"\n            class=\"eui-u-sh-5 eui-u-mb-m\" />\n        }\n      }\n\n      @if (docEntries().length !== 0) {\n        <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Design system references</h3>\n        @for (ref of docEntries(); track ref) {\n          <eui-card class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n            <eui-card-header>\n              <eui-card-header-title>\n                <div class=\"eui-u-flex\">\n                  @if (ref?.id) {\n                    <eui-badge euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n                  }\n                  <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n                </div>\n              </eui-card-header-title>\n              <eui-card-header-right-content>\n                <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n                  @if (ref.mandatory) {\n                    <span euiLabel><strong> Mandatory </strong></span>\n                  }\n                  @if (!ref.mandatory) {\n                    <span euiLabel><strong> Optional </strong></span>\n                  }\n                </eui-chip>\n              </eui-card-header-right-content>\n            </eui-card-header>\n            <eui-card-content>\n              <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n              <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n              @if (ref.whenToUse) {\n                <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n                <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n              }\n              @if (ref.whenNotToUse) {\n                <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n                <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n              }\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  @if (ref.dos && ref.dos.length !== 0) {\n                    <h6 class=\"section-title eui-u-mt-xl\">\n                      <eui-icon-svg icon=\"thumbs-up\"\n                        set=\"sharp\"\n                        size=\"m\"\n                        fillColor=\"success-100\"\n                        class=\"eui-u-mr-m\" />\n                      <strong>Do's</strong>\n                    </h6>\n                    @for (do of ref.dos; track do) {\n                      <li>{{ do }}</li>\n                    }\n                  }\n                </div>\n                <div class=\"col-md-6\">\n                  @if (ref.donts && ref.donts.length !== 0) {\n                    <h6 class=\"section-title eui-u-mt-xl\">\n                      <eui-icon-svg icon=\"hand-right\"\n                        set=\"sharp\"\n                        size=\"m\"\n                        fillColor=\"danger-100\"\n                        class=\"eui-u-mr-m\" />\n                      <strong>Dont's</strong>\n                    </h6>\n                    @for (dont of ref.donts; track dont) {\n                      <li>{{ dont }}</li>\n                    }\n                  }\n                </div>\n              </div>\n            </eui-card-content>\n          </eui-card>\n        }\n      }\n\n      <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n        @if (figmaUrl() === 'PENDING_DS') {\n                Pending Design system publication. Will be available in a future release.\n        } @else {\n            <eui-card>\n                <eui-card-header>\n                    <eui-card-header-left-content>\n                        <img\n                            width=\"32\"\n                            height=\"32\"\n                            alt=\"Figma Logo\"\n                            src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABL1BMVEX/////cmLyTh6iWf8Kz4MavP7yTBr5YUWeUP8AzX3UuP//bVwAt/6jV///rKTyRgr2TwCxX+kA032m6Mf3m4uabPb/aVf/8O8AzHmbSf/xPAD/a1rxQgDyShaaR/8Avv74pJP/urP/6Ob/ZVLQ7//839n5tqj/xL7/b1f/9O/59f/r3v+65/9jzP6yef/p+P+u4//Mqv/iz//cxf/I7P/fvf+U2v71/fqO5LzW9ed74LIp043/y8b4rJz0dln/i3/zXTX2jnf/19P/emv0bEv/p5//l4zzWCz2h270dVf4g2D2Whzt5v+6hfuzbfCuWOjE2+6nz+6BxO5lu+5o1v9Nx/7BlP930v63rf+UoP90lP7n1v/Prv/iwf/Onf+hefiWZPZi36O07dLf9+2A4bX7S8Q6AAAGG0lEQVR4nO2aeVcaZxSHZ6JYhsHYFjsig3UhaHG3RkHBxMRE2zR2M5SuaUW//2cow4CgwMz7uzl65x3v8/+cM8+5y7tdwxAEQRAEQRAEQRAEQRAEQRAEQRCEiFJcOVqYDuDt0wAWV2pFboFAikcv8rl8fiqA/LE9Gtd1Hcd5ubjELTKC5eNcfu5JCBOfmWHYrnOyWOK2GWQhn58I01Mz9HDdp9xCd6g9UfJTNmw5mjVuqX5e5dT8AEPTLJxya92wdJZX9IMMTduMSMsphvcXmqFpOq+55TxeK2cobmgWIqBYhARRQ7PAvgOYmYIEYUPTmWE2PAZqkGRon/AKTqt3UaKh6b7lFCzmQEGCIW8pvgFzlGRov+QTrMEhpBhyrop4CEmGfEHEq5BmaBa4dm+vph7I0OZqp3PYYk83NE0eQUqSEg0dngXjCF3t6YbuIovhO7yTUg1tnsPwGaEMqXXIszmllCHVsMAhOPOghhxnKFIrpRo6HGu+GOpvuBT7OizFvpcalC0N1ZBnY0o4HZL3NDwnxGnC4YlqyHN8Wnm4nbfD8w5FajVEQ6YHU0oh0s74XBc1y4Q0JRkyJWkLxXffT48hlyClm1IMGd/0S3iakm6E2QQpVzUEQ4fnkqbDGdpOCYa8z2vwEQo3ZLvw7nAEKuJvwKw56vEdVoqoocP6PurzPaQIGrqRmBqCFMF5mkgIthIVqEXIsBCBFPVZzikvGoCh7axwi/VYOlbdoqobOicRmWrrsKw2Xqps6NoRCqBPaSGvMsGnZGg7NvsqOJTai1xuam4iMJahhrbr2KcRmNcbQam28O6HzwM584bVB/nGxzRPF9ln9YJ5v7tz/uMXo/lprzRzl1Jp5udffr24uKjXP3zYfsatEMDq3mZyNpmcHAsgmRr4bGu/nkgnuqTTifr2FsPfh7N2PhssN9xwvd6z61luRC+Sa5uz4XqDhuvzg36+ZD1icfxNze+O4daQ+PUcG2w2g6yNJdX8bhuuB/h5ionIpGpKNYC3DRvBgp7jNqNVHztfK/v1G26ECrYU9znFuuzMAoI9QxXBaCimkAj2DMNTNCqJ+i0UwRvDfUXBliJzu1lVbqK3DJ8pC7bgNdxU76L9hoBfIrHBKbgL5mjHUD1H23n6nNFwEg1h23ALEkwk5vkEU2gV+oYNTJCzn47BIfQM0RAyBhFdKTqG+6ggXyWe4yH0DOdhwwTTMQNeC31DaC3swmNISdKx5B6epGxp+pEUw706wTDBswGH9zNtwxShDLn2NQS/luHvJEOe9QI7NnUN/yAZpjkE31MazdjknzRDjpu3+BuuPaghxzk4/jGMv6FBMtSplz6C9TD+e5qd2O9L/3rAswXTpWnsz4fxP+M/gnua+N+1Ue9LN9AQMr4/4UGk3Hlzvs3gldh+t1B9POyEkPPdwjinva5BEWR9e3oE74fwxka7N2DyO77aoEIU3vEfwSyGYfx9j/M0EYigx+69zUStM1rd4p7m2uajNJ4Y99lE4xHMlxrejHDIAPQwQ41mhD1WU/6cdxDD57zT6XTPLrJz3j5r/3w8//er0fy3O+yrref7jbrHRiPSs/qGUW5WLr8MJsP9j59C89JqMR6Ipa9huRJqp7dhRkVPY8OrqpqftoYZVT9dDS+zyoJ6Gl6qR1BPQ0hQR8NDSFBDwwpQg1oaHoCC+hlWQUHtDCtYEepnWIYFdTO8jrshIYSaGQLbUU0N4UaqmyElSfUybMbeENyRamhIKUO9DCkh1MqwjG66tTO8ir0hfHASw8gR/ywlGja5/xuAZnjA/dsAtBX/ivu3AbCL0q4h918j4Jc0LcFL7r9GoCwXVoX7ryFwwfGsTo2GdHyqcv8zBp6mOq33bfAb7zL3L4M00WeZQ+4/hgGDqF0I0UrUbKnwge71NWukHZTHTDTbkva4UjbM6nRu6ke1FLM6FqGP2pKhsaBaFLUWbNXieFgxaluDXcrBc19WVc8ueovm6DBammfoDZXhA6ZW9lC/rdoIyplq9o6kZVmHMUjQPg4qVStrdclWD3VvMEM5aGYq19fXleZBbLJTEARBEARBEARBEARBEARBEARBEHz+B91xJIzYVK0AAAAAAElFTkSuQmCC\" />\n                    </eui-card-header-left-content>\n                    <eui-card-header-title>\n                        <a\n                            class=\"h5 eui-u-text-link-external\"\n                            href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl() }}\"\n                            target=\"blank\">\n                            <span class=\"eui-u-color-grey-75\">Layout component /</span>\n                            {{ label() }}\n                        </a>\n                    </eui-card-header-title>\n                </eui-card-header>\n            </eui-card>\n        }\n        </eui-tab-body>\n    </eui-tab>\n    <eui-tab>\n        <eui-label>Pattern sample</eui-label>\n        <eui-tab-body>\n            <ng-content select=\"docPagePatternSample\" />\n        </eui-tab-body>\n    </eui-tab>\n\n    <eui-tabs-right-content>\n        <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode()\">\n            <eui-icon-svg icon=\"eui-code\" />\n            View sources\n        </button>\n    </eui-tabs-right-content>\n</eui-tabs>\n\n@if (isShowGoTop && tabSelectedIndex === 0) {\n<button\n    type=\"button\"\n    euiButton\n    euiIconButton\n    euiOutline\n    euiRounded\n    euiSizeL\n    class=\"eui-button-fixed eui-u-sh-5\"\n    (click)=\"gotoTop()\"\n    title=\"Goto Top\"\n    aria-label=\"Goto Top\">\n    <!-- \uD83D\uDC46 -->\n    <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\" />\n</button>\n}\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}\n"], dependencies: [{ kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabsRightContentComponent, selector: "eui-tabs-right-content" }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i3$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$1.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i3$1.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i3$1.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i3$1.EuiCardHeaderRightContentComponent, selector: "eui-card-header-right-content" }, { kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i5.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "ariaLabel", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }, { kind: "component", type: i2$3.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternComponent, decorators: [{
             type: Component,
@@ -2063,7 +1666,7 @@ class DocPagePatternSampleRefsComponent {
         ...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleRefsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPagePatternSampleRefsComponent, isStandalone: true, selector: "eui-showcase-doc-pattern-sample-refs", inputs: { docEntries: { classPropertyName: "docEntries", publicName: "docEntries", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-showcase-doc-page-pattern-sample-refs" }, ngImport: i0, template: "<h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n\n<div class=\"row\">\n  @for (ref of docEntries(); track ref) {\n    <div class=\"col-md-6 eui-u-mb-3xl\">\n      <eui-card class=\"eui-u-height-100\">\n        <eui-card-header>\n          <eui-card-header-title>\n            <div class=\"eui-u-flex\">\n              @if (ref?.id) {\n                <eui-badge [euiDanger]=\"ref.mandatory\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n              }\n              <span class=\"eui-u-f-l\">{{ ref.name }}</span>\n              <eui-chip [euiDanger]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n                @if (ref.mandatory) {\n                  <span euiLabel><strong> Mandatory </strong></span>\n                }\n                @if (!ref.mandatory) {\n                  <span euiLabel><strong> Optional </strong></span>\n                }\n              </eui-chip>\n            </div>\n          </eui-card-header-title>\n        </eui-card-header>\n        <eui-card-content class=\"eui-u-display-flex eui-u-flex-column eui-u-flex-gap-s\">\n          <div class=\"eui-u-f-bold\">Description</div>\n          <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n          @if (ref.whenToUse) {\n            <div class=\"eui-u-f-bold\">When to use ?</div>\n            <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n          }\n          @if (ref.whenNotToUse) {\n            <div class=\"eui-u-f-bold\">When to not use ?</div>\n            <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n          }\n          <div class=\"row eui-u-mt-l\">\n            <div class=\"col-md-6\">\n              @if (ref.dos && ref.dos.length !== 0) {\n                <div class=\"eui-u-c-bg-success eui-u-p-xs\"></div>\n                <div class=\"eui-u-c-s-success eui-u-f-bold eui-u-mt-s eui-u-mb-xs\">Do's</div>\n                @for (do of ref.dos; track do) {\n                  <li>{{ do }}</li>\n                }\n              }\n            </div>\n            <div class=\"col-md-6\">\n              @if (ref.donts && ref.donts.length !== 0) {\n                <div class=\"eui-u-c-bg-danger eui-u-p-xs\"></div>\n                <div class=\"eui-u-c-s-danger eui-u-mt-s eui-u-mb-xs eui-u-f-bold\">Dont's</div>\n                @for (dont of ref.donts; track dont) {\n                  <li>{{ dont }}</li>\n                }\n              }\n            </div>\n          </div>\n        </eui-card-content>\n      </eui-card>\n    </div>\n  }\n</div>\n\n\n", styles: [":host{display:flex;flex-direction:column;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}:host .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-l-bold)}\n"], dependencies: [{ kind: "component", type: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i3$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i3$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i5$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPagePatternSampleRefsComponent, isStandalone: true, selector: "eui-showcase-doc-pattern-sample-refs", inputs: { docEntries: { classPropertyName: "docEntries", publicName: "docEntries", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-showcase-doc-page-pattern-sample-refs" }, ngImport: i0, template: "<h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n\n<div class=\"row\">\n  @for (ref of docEntries(); track ref) {\n    <div class=\"col-md-6 eui-u-mb-3xl\">\n      <eui-card class=\"eui-u-height-100\">\n        <eui-card-header>\n          <eui-card-header-title>\n            <div class=\"eui-u-flex\">\n              @if (ref?.id) {\n                <eui-badge [euiDanger]=\"ref.mandatory\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n              }\n              <span class=\"eui-u-f-l\">{{ ref.name }}</span>\n              <eui-chip [euiDanger]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n                @if (ref.mandatory) {\n                  <span euiLabel><strong> Mandatory </strong></span>\n                }\n                @if (!ref.mandatory) {\n                  <span euiLabel><strong> Optional </strong></span>\n                }\n              </eui-chip>\n            </div>\n          </eui-card-header-title>\n        </eui-card-header>\n        <eui-card-content class=\"eui-u-display-flex eui-u-flex-column eui-u-flex-gap-s\">\n          <div class=\"eui-u-f-bold\">Description</div>\n          <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n          @if (ref.whenToUse) {\n            <div class=\"eui-u-f-bold\">When to use ?</div>\n            <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n          }\n          @if (ref.whenNotToUse) {\n            <div class=\"eui-u-f-bold\">When to not use ?</div>\n            <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n          }\n          <div class=\"row eui-u-mt-l\">\n            <div class=\"col-md-6\">\n              @if (ref.dos && ref.dos.length !== 0) {\n                <div class=\"eui-u-c-bg-success eui-u-p-xs\"></div>\n                <div class=\"eui-u-c-s-success eui-u-f-bold eui-u-mt-s eui-u-mb-xs\">Do's</div>\n                @for (do of ref.dos; track do) {\n                  <li>{{ do }}</li>\n                }\n              }\n            </div>\n            <div class=\"col-md-6\">\n              @if (ref.donts && ref.donts.length !== 0) {\n                <div class=\"eui-u-c-bg-danger eui-u-p-xs\"></div>\n                <div class=\"eui-u-c-s-danger eui-u-mt-s eui-u-mb-xs eui-u-f-bold\">Dont's</div>\n                @for (dont of ref.donts; track dont) {\n                  <li>{{ dont }}</li>\n                }\n              }\n            </div>\n          </div>\n        </eui-card-content>\n      </eui-card>\n    </div>\n  }\n</div>\n\n\n", styles: [":host{display:flex;flex-direction:column;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}:host .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-l-bold)}\n"], dependencies: [{ kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i3$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$1.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i3$1.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i5.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "ariaLabel", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleRefsComponent, decorators: [{
             type: Component,
@@ -2119,7 +1722,7 @@ class DocPagePatternSampleComponent {
         window.open(showcaseRoot + this.codeFolder(), '_blank');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPagePatternSampleComponent, isStandalone: true, selector: "eui-showcase-doc-pattern-sample", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, docEntries: { classPropertyName: "docEntries", publicName: "docEntries", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, refsImage: { classPropertyName: "refsImage", publicName: "refsImage", isSignal: true, isRequired: false, transformFunction: null }, refsImage2: { classPropertyName: "refsImage2", publicName: "refsImage2", isSignal: true, isRequired: false, transformFunction: null }, figmaLink: { classPropertyName: "figmaLink", publicName: "figmaLink", isSignal: true, isRequired: false, transformFunction: null }, aiLink: { classPropertyName: "aiLink", publicName: "aiLink", isSignal: true, isRequired: false, transformFunction: null }, isSmall: { classPropertyName: "isSmall", publicName: "isSmall", isSignal: true, isRequired: false, transformFunction: null }, isTiny: { classPropertyName: "isTiny", publicName: "isTiny", isSignal: true, isRequired: false, transformFunction: null }, isMedium: { classPropertyName: "isMedium", publicName: "isMedium", isSignal: true, isRequired: false, transformFunction: null }, isLarge: { classPropertyName: "isLarge", publicName: "isLarge", isSignal: true, isRequired: false, transformFunction: null }, isExtraLarge: { classPropertyName: "isExtraLarge", publicName: "isExtraLarge", isSignal: true, isRequired: false, transformFunction: null }, hasAutoHeight: { classPropertyName: "hasAutoHeight", publicName: "hasAutoHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.no-code": "!codeFolder()" }, classAttribute: "eui-showcase-doc-page-pattern-sample" }, queries: [{ propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSampleDocDirective), descendants: true, isSignal: true }], ngImport: i0, template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label() }}</div>\n\n<div class=\"row\">\n@if (figmaLink()) {\n        <div class=\"col-6\">\n            <h4 class=\"eui-u-text-h4\">Figma reference</h4>\n            <span>\n                <a euiButton euiBasicButton euiPrimary href=\"{{figmaLink()}}\" class=\"eui-u-text-link-external\" target=\"_blank\">\n                    <svg viewBox=\"0 0 38 57\" style=\"height: 36px; width: 36px;\"><path fill=\"#1abcfe\" d=\"M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z\"></path><path fill=\"#0acf83\" d=\"M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z\"></path><path fill=\"#ff7262\" d=\"M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z\"></path><path fill=\"#f24e1e\" d=\"M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z\"></path><path fill=\"#a259ff\" d=\"M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z\"></path></svg>\n                    Link to Figma page pattern\n                </a>\n            </span>\n        </div>\n}\n@if (aiLink()) {\n        <div class=\"col-6\">\n            <h4 class=\"eui-u-text-h4\">AI reference</h4>\n            <span>\n                <a euiButton euiBasicButton euiPrimary href=\"{{aiLink()}}\" class=\"eui-u-text-link\">\n                    <svg viewBox=\"0 0 24 24\" style=\"height: 48px; width: 48px;\"  xmlns=\"http://www.w3.org/2000/svg\"><title>Kiro</title><path d=\"M18.8 0H5.2A5.2 5.2 0 000 5.2v13.6A5.2 5.2 0 005.2 24h13.6a5.2 5.2 0 005.2-5.2V5.2A5.2 5.2 0 0018.8 0z\" fill=\"#9046FF\"></path><path d=\"M7.97 16.376c-1.644 3.642 1.86 4.556 4.443 2.424.76 2.39 3.608.607 4.631-1.247 2.251-4.084 1.342-8.249 1.108-9.108-1.6-5.859-9.6-5.869-10.976.03-.323 1.033-.328 2.206-.507 3.423-.09.617-.16 1.009-.393 1.655-.139.373-.323.7-.62 1.257-.458.865-.264 2.53 2.101 1.665l.224-.1h-.01l-.001.001z\" fill=\"#fff\"></path><path d=\"M12.722 10.985c-.656 0-.755-.785-.755-1.252 0-.423.074-.756.218-.97a.61.61 0 01.537-.283c.229 0 .428.095.567.289.159.218.243.55.243.964 0 .785-.303 1.252-.805 1.252h-.005zm2.703 0c-.656 0-.755-.785-.755-1.252 0-.423.074-.756.219-.97a.61.61 0 01.536-.283c.229 0 .428.095.567.289.159.218.243.55.243.964 0 .785-.303 1.252-.805 1.252h-.005z\" fill=\"#000\"></path></svg>\n                    View AI generated page pattern\n                </a>\n            </span>\n        </div>\n}\n</div>\n\n@if (docContent()) {\n    <h4 class=\"eui-u-text-h4\">Information</h4>\n    <ng-content select=\"eui-showcase-doc-pattern-sample-doc\" />\n}\n\n\n<h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Anatomy</h4>\n\n<div class=\"content-wrapper\">\n    <div class=\"content\"\n        [class.small]=\"isSmall()\" [class.medium]=\"isMedium()\"\n        [class.large]=\"isLarge()\" [class.extra-large]=\"isExtraLarge()\" [class.tiny]=\"isTiny()\" [class.auto-height]=\"hasAutoHeight()\">\n        @for (ref of docEntries(); track ref) {\n            <eui-badge [euiDanger]=\"ref.mandatory\" [euiSecondary]=\"ref.outsidePattern\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-p-absolute\" [style]=\"ref.position\">\n                {{ref.id}}\n            </eui-badge>\n        }\n        <div class=\"sample-wrapper\">\n            <ng-content />\n        </div>\n    </div>\n\n    @if (codeFolder()) {\n        <div class=\"eui-u-flex eui-u-flex-justify-content-center eui-u-mt-l\">\n            <button euiButton euiCTAButton euiSizeS (click)=\"openCode()\">Check the code</button>\n        </div>\n    }\n</div>\n\n\n\n@if (refsImage()) {\n    <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n    <img class=\"refs-image\"\n        src=\"assets/images/design-patterns/{{ refsImage() }}\"\n        alt=\"Design anatomy image\"/>\n}\n\n@if (refsImage2()) {\n    <img class=\"refs-image\"\n        src=\"assets/images/design-patterns/{{ refsImage2() }}\"\n        alt=\"Design anatomy image\"/>\n}\n", styles: [":host{display:flex;flex-direction:column;width:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}:host .content-wrapper{display:flex;height:100%;width:100%;padding:2rem 4rem;background-color:var(--eui-c-bg);position:relative;flex-direction:column}:host .content{display:flex;height:40rem;width:100%;position:relative;background-color:var(--eui-c-bg);box-shadow:var(--eui-sh-2)}:host .content.tiny{height:8rem}:host .content.small{height:10rem}:host .content.medium{height:20rem}:host .content.large{height:50rem}:host .content.extra-large{height:75rem}:host .content.auto-height{height:auto}:host .sample-wrapper{display:block;width:100%}:host .sample-wrapper ::ng-deep .sample{display:flex;width:100%}:host .sample-wrapper ::ng-deep eui-header{height:90px}:host img.refs-image{width:fit-content;margin-bottom:var(--eui-s-7xl)}:host.no-code .content-wrapper{padding:2rem}\n"], dependencies: [{ kind: "component", type: i5$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPagePatternSampleComponent, isStandalone: true, selector: "eui-showcase-doc-pattern-sample", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, docEntries: { classPropertyName: "docEntries", publicName: "docEntries", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, refsImage: { classPropertyName: "refsImage", publicName: "refsImage", isSignal: true, isRequired: false, transformFunction: null }, refsImage2: { classPropertyName: "refsImage2", publicName: "refsImage2", isSignal: true, isRequired: false, transformFunction: null }, figmaLink: { classPropertyName: "figmaLink", publicName: "figmaLink", isSignal: true, isRequired: false, transformFunction: null }, aiLink: { classPropertyName: "aiLink", publicName: "aiLink", isSignal: true, isRequired: false, transformFunction: null }, isSmall: { classPropertyName: "isSmall", publicName: "isSmall", isSignal: true, isRequired: false, transformFunction: null }, isTiny: { classPropertyName: "isTiny", publicName: "isTiny", isSignal: true, isRequired: false, transformFunction: null }, isMedium: { classPropertyName: "isMedium", publicName: "isMedium", isSignal: true, isRequired: false, transformFunction: null }, isLarge: { classPropertyName: "isLarge", publicName: "isLarge", isSignal: true, isRequired: false, transformFunction: null }, isExtraLarge: { classPropertyName: "isExtraLarge", publicName: "isExtraLarge", isSignal: true, isRequired: false, transformFunction: null }, hasAutoHeight: { classPropertyName: "hasAutoHeight", publicName: "hasAutoHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.no-code": "!codeFolder()" }, classAttribute: "eui-showcase-doc-page-pattern-sample" }, queries: [{ propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSampleDocDirective), descendants: true, isSignal: true }], ngImport: i0, template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label() }}</div>\n\n<div class=\"row\">\n@if (figmaLink()) {\n        <div class=\"col-6\">\n            <h4 class=\"eui-u-text-h4\">Figma reference</h4>\n            <span>\n                <a euiButton euiBasicButton euiPrimary href=\"{{figmaLink()}}\" class=\"eui-u-text-link-external\" target=\"_blank\">\n                    <svg viewBox=\"0 0 38 57\" style=\"height: 36px; width: 36px;\"><path fill=\"#1abcfe\" d=\"M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z\"></path><path fill=\"#0acf83\" d=\"M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z\"></path><path fill=\"#ff7262\" d=\"M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z\"></path><path fill=\"#f24e1e\" d=\"M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z\"></path><path fill=\"#a259ff\" d=\"M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z\"></path></svg>\n                    Link to Figma page pattern\n                </a>\n            </span>\n        </div>\n}\n@if (aiLink()) {\n        <div class=\"col-6\">\n            <h4 class=\"eui-u-text-h4\">AI reference</h4>\n            <span>\n                <a euiButton euiBasicButton euiPrimary href=\"{{aiLink()}}\" class=\"eui-u-text-link\">\n                    <svg viewBox=\"0 0 24 24\" style=\"height: 48px; width: 48px;\"  xmlns=\"http://www.w3.org/2000/svg\"><title>Kiro</title><path d=\"M18.8 0H5.2A5.2 5.2 0 000 5.2v13.6A5.2 5.2 0 005.2 24h13.6a5.2 5.2 0 005.2-5.2V5.2A5.2 5.2 0 0018.8 0z\" fill=\"#9046FF\"></path><path d=\"M7.97 16.376c-1.644 3.642 1.86 4.556 4.443 2.424.76 2.39 3.608.607 4.631-1.247 2.251-4.084 1.342-8.249 1.108-9.108-1.6-5.859-9.6-5.869-10.976.03-.323 1.033-.328 2.206-.507 3.423-.09.617-.16 1.009-.393 1.655-.139.373-.323.7-.62 1.257-.458.865-.264 2.53 2.101 1.665l.224-.1h-.01l-.001.001z\" fill=\"#fff\"></path><path d=\"M12.722 10.985c-.656 0-.755-.785-.755-1.252 0-.423.074-.756.218-.97a.61.61 0 01.537-.283c.229 0 .428.095.567.289.159.218.243.55.243.964 0 .785-.303 1.252-.805 1.252h-.005zm2.703 0c-.656 0-.755-.785-.755-1.252 0-.423.074-.756.219-.97a.61.61 0 01.536-.283c.229 0 .428.095.567.289.159.218.243.55.243.964 0 .785-.303 1.252-.805 1.252h-.005z\" fill=\"#000\"></path></svg>\n                    View AI generated page pattern\n                </a>\n            </span>\n        </div>\n}\n</div>\n\n@if (docContent()) {\n    <h4 class=\"eui-u-text-h4\">Information</h4>\n    <ng-content select=\"eui-showcase-doc-pattern-sample-doc\" />\n}\n\n\n<h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Anatomy</h4>\n\n<div class=\"content-wrapper\">\n    <div class=\"content\"\n        [class.small]=\"isSmall()\" [class.medium]=\"isMedium()\"\n        [class.large]=\"isLarge()\" [class.extra-large]=\"isExtraLarge()\" [class.tiny]=\"isTiny()\" [class.auto-height]=\"hasAutoHeight()\">\n        @for (ref of docEntries(); track ref) {\n            <eui-badge [euiDanger]=\"ref.mandatory\" [euiSecondary]=\"ref.outsidePattern\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-p-absolute\" [style]=\"ref.position\">\n                {{ref.id}}\n            </eui-badge>\n        }\n        <div class=\"sample-wrapper\">\n            <ng-content />\n        </div>\n    </div>\n\n    @if (codeFolder()) {\n        <div class=\"eui-u-flex eui-u-flex-justify-content-center eui-u-mt-l\">\n            <button euiButton euiCTAButton euiSizeS (click)=\"openCode()\">Check the code</button>\n        </div>\n    }\n</div>\n\n\n\n@if (refsImage()) {\n    <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n    <img class=\"refs-image\"\n        src=\"assets/images/design-patterns/{{ refsImage() }}\"\n        alt=\"Design anatomy image\"/>\n}\n\n@if (refsImage2()) {\n    <img class=\"refs-image\"\n        src=\"assets/images/design-patterns/{{ refsImage2() }}\"\n        alt=\"Design anatomy image\"/>\n}\n", styles: [":host{display:flex;flex-direction:column;width:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}:host .content-wrapper{display:flex;height:100%;width:100%;padding:2rem 4rem;background-color:var(--eui-c-bg);position:relative;flex-direction:column}:host .content{display:flex;height:40rem;width:100%;position:relative;background-color:var(--eui-c-bg);box-shadow:var(--eui-sh-2)}:host .content.tiny{height:8rem}:host .content.small{height:10rem}:host .content.medium{height:20rem}:host .content.large{height:50rem}:host .content.extra-large{height:75rem}:host .content.auto-height{height:auto}:host .sample-wrapper{display:block;width:100%}:host .sample-wrapper ::ng-deep .sample{display:flex;width:100%}:host .sample-wrapper ::ng-deep eui-header{height:90px}:host img.refs-image{width:fit-content;margin-bottom:var(--eui-s-7xl)}:host.no-code .content-wrapper{padding:2rem}\n"], dependencies: [{ kind: "component", type: i5.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "ariaLabel", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleComponent, decorators: [{
             type: Component,
@@ -2196,7 +1799,7 @@ class DocPagePatternSimpleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPagePatternSimpleComponent, isStandalone: true, selector: "eui-showcase-doc-page-pattern-simple", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, anatomyImage: { classPropertyName: "anatomyImage", publicName: "anatomyImage", isSignal: true, isRequired: false, transformFunction: null }, docEntries: { classPropertyName: "docEntries", publicName: "docEntries", isSignal: true, isRequired: false, transformFunction: null }, dos: { classPropertyName: "dos", publicName: "dos", isSignal: true, isRequired: false, transformFunction: null }, donts: { classPropertyName: "donts", publicName: "donts", isSignal: true, isRequired: false, transformFunction: null }, sourceUrl: { classPropertyName: "sourceUrl", publicName: "sourceUrl", isSignal: true, isRequired: false, transformFunction: null }, figmaUrl: { classPropertyName: "figmaUrl", publicName: "figmaUrl", isSignal: true, isRequired: false, transformFunction: null }, figmaEmbedSrc: { classPropertyName: "figmaEmbedSrc", publicName: "figmaEmbedSrc", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:scroll": "checkScroll()" }, classAttribute: "doc-page-pattern" }, queries: [{ propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSimpleDocDirective), descendants: true, isSignal: true }], ngImport: i0, template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label() }}</div>\n\n\n<h4 class=\"eui-u-text-h4\">Information</h4>\n<ng-content select=\"docPagePatternDoc\" />\n\n@if (figmaEmbedSrc()) {\n    <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n    <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n} @else {\n    @if (figmaUrl() !== 'PENDING_DS') {\n        <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Anatomy</h4>\n        <img\n            src=\"assets/images/design-system/{{ anatomyImage() }}\"\n            alt=\"Design anatomy image\"\n            width=\"60%\"\n            class=\"eui-u-sh-5 eui-u-mb-m\" />\n    }\n}\n\n@if (docEntries().length !== 0) {\n  <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n  @for (ref of docEntries(); track ref) {\n    <eui-card class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n      <eui-card-header>\n        <eui-card-header-title>\n          <div class=\"eui-u-flex\">\n            @if (ref?.id) {\n              <eui-avatar euiSizeS euiDanger class=\"eui-u-mr-s\"><eui-avatar-text>{{ ref.id }}</eui-avatar-text></eui-avatar>\n            }\n            <span class=\"eui-u-f-xl\">{{ ref.name }}</span>\n            <eui-chip [euiDanger]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n              @if (ref.mandatory) {\n                <span euiLabel><strong> Mandatory </strong></span>\n              }\n              @if (!ref.mandatory) {\n                <span euiLabel><strong> Optional </strong></span>\n              }\n            </eui-chip>\n          </div>\n        </eui-card-header-title>\n      </eui-card-header>\n      <eui-card-content>\n        <div class=\"doc-page-section-title\">Description</div>\n        <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n        @if (ref.whenToUse) {\n          <div class=\"doc-page-section-title\">When to use ?</div>\n          <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n        }\n        @if (ref.whenNotToUse) {\n          <div class=\"doc-page-section-title\">When to not use ?</div>\n          <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n        }\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            @if (ref.dos && ref.dos.length !== 0) {\n              <div class=\"doc-page-section-title eui-u-c-s-success\">\n                <eui-icon-svg icon=\"thumbs-up\"\n                  set=\"sharp\"\n                  size=\"m\"\n                  fillColor=\"success-100\"\n                  class=\"eui-u-mr-m\" />\n                <strong>Do's</strong>\n              </div>\n              @for (do of ref.dos; track do) {\n                <li class=\"eui-u-c-s-success eui-u-f-bold\">{{ do }}</li>\n              }\n            }\n          </div>\n          <div class=\"col-md-6\">\n            @if (ref.donts && ref.donts.length !== 0) {\n              <div class=\"doc-page-section-title eui-u-c-s-danger\">\n                <eui-icon-svg icon=\"hand-right\"\n                  set=\"sharp\"\n                  size=\"m\"\n                  fillColor=\"danger-100\"\n                  class=\"eui-u-mr-m\" />\n                <strong>Dont's</strong>\n              </div>\n              @for (dont of ref.donts; track dont) {\n                <li  class=\"eui-u-c-s-danger eui-u-f-bold\">{{ dont }}</li>\n              }\n            }\n          </div>\n        </div>\n      </eui-card-content>\n    </eui-card>\n  }\n}\n\n<h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n@if (figmaUrl() === 'PENDING_DS') {\n    Pending Design system publication. Will be available in a future release.\n} @else {\n    <eui-card>\n        <eui-card-header>\n            <eui-card-header-left-content>\n                <img\n                    width=\"32\"\n                    height=\"32\"\n                    alt=\"Figma Logo\"\n                    src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABL1BMVEX/////cmLyTh6iWf8Kz4MavP7yTBr5YUWeUP8AzX3UuP//bVwAt/6jV///rKTyRgr2TwCxX+kA032m6Mf3m4uabPb/aVf/8O8AzHmbSf/xPAD/a1rxQgDyShaaR/8Avv74pJP/urP/6Ob/ZVLQ7//839n5tqj/xL7/b1f/9O/59f/r3v+65/9jzP6yef/p+P+u4//Mqv/iz//cxf/I7P/fvf+U2v71/fqO5LzW9ed74LIp043/y8b4rJz0dln/i3/zXTX2jnf/19P/emv0bEv/p5//l4zzWCz2h270dVf4g2D2Whzt5v+6hfuzbfCuWOjE2+6nz+6BxO5lu+5o1v9Nx/7BlP930v63rf+UoP90lP7n1v/Prv/iwf/Onf+hefiWZPZi36O07dLf9+2A4bX7S8Q6AAAGG0lEQVR4nO2aeVcaZxSHZ6JYhsHYFjsig3UhaHG3RkHBxMRE2zR2M5SuaUW//2cow4CgwMz7uzl65x3v8/+cM8+5y7tdwxAEQRAEQRAEQRAEQRAEQRAEQRCEiFJcOVqYDuDt0wAWV2pFboFAikcv8rl8fiqA/LE9Gtd1Hcd5ubjELTKC5eNcfu5JCBOfmWHYrnOyWOK2GWQhn58I01Mz9HDdp9xCd6g9UfJTNmw5mjVuqX5e5dT8AEPTLJxya92wdJZX9IMMTduMSMsphvcXmqFpOq+55TxeK2cobmgWIqBYhARRQ7PAvgOYmYIEYUPTmWE2PAZqkGRon/AKTqt3UaKh6b7lFCzmQEGCIW8pvgFzlGRov+QTrMEhpBhyrop4CEmGfEHEq5BmaBa4dm+vph7I0OZqp3PYYk83NE0eQUqSEg0dngXjCF3t6YbuIovhO7yTUg1tnsPwGaEMqXXIszmllCHVsMAhOPOghhxnKFIrpRo6HGu+GOpvuBT7OizFvpcalC0N1ZBnY0o4HZL3NDwnxGnC4YlqyHN8Wnm4nbfD8w5FajVEQ6YHU0oh0s74XBc1y4Q0JRkyJWkLxXffT48hlyClm1IMGd/0S3iakm6E2QQpVzUEQ4fnkqbDGdpOCYa8z2vwEQo3ZLvw7nAEKuJvwKw56vEdVoqoocP6PurzPaQIGrqRmBqCFMF5mkgIthIVqEXIsBCBFPVZzikvGoCh7axwi/VYOlbdoqobOicRmWrrsKw2Xqps6NoRCqBPaSGvMsGnZGg7NvsqOJTai1xuam4iMJahhrbr2KcRmNcbQam28O6HzwM584bVB/nGxzRPF9ln9YJ5v7tz/uMXo/lprzRzl1Jp5udffr24uKjXP3zYfsatEMDq3mZyNpmcHAsgmRr4bGu/nkgnuqTTifr2FsPfh7N2PhssN9xwvd6z61luRC+Sa5uz4XqDhuvzg36+ZD1icfxNze+O4daQ+PUcG2w2g6yNJdX8bhuuB/h5ionIpGpKNYC3DRvBgp7jNqNVHztfK/v1G26ECrYU9znFuuzMAoI9QxXBaCimkAj2DMNTNCqJ+i0UwRvDfUXBliJzu1lVbqK3DJ8pC7bgNdxU76L9hoBfIrHBKbgL5mjHUD1H23n6nNFwEg1h23ALEkwk5vkEU2gV+oYNTJCzn47BIfQM0RAyBhFdKTqG+6ggXyWe4yH0DOdhwwTTMQNeC31DaC3swmNISdKx5B6epGxp+pEUw706wTDBswGH9zNtwxShDLn2NQS/luHvJEOe9QI7NnUN/yAZpjkE31MazdjknzRDjpu3+BuuPaghxzk4/jGMv6FBMtSplz6C9TD+e5qd2O9L/3rAswXTpWnsz4fxP+M/gnua+N+1Ue9LN9AQMr4/4UGk3Hlzvs3gldh+t1B9POyEkPPdwjinva5BEWR9e3oE74fwxka7N2DyO77aoEIU3vEfwSyGYfx9j/M0EYigx+69zUStM1rd4p7m2uajNJ4Y99lE4xHMlxrejHDIAPQwQ41mhD1WU/6cdxDD57zT6XTPLrJz3j5r/3w8//er0fy3O+yrref7jbrHRiPSs/qGUW5WLr8MJsP9j59C89JqMR6Ipa9huRJqp7dhRkVPY8OrqpqftoYZVT9dDS+zyoJ6Gl6qR1BPQ0hQR8NDSFBDwwpQg1oaHoCC+hlWQUHtDCtYEepnWIYFdTO8jrshIYSaGQLbUU0N4UaqmyElSfUybMbeENyRamhIKUO9DCkh1MqwjG66tTO8ir0hfHASw8gR/ywlGja5/xuAZnjA/dsAtBX/ivu3AbCL0q4h918j4Jc0LcFL7r9GoCwXVoX7ryFwwfGsTo2GdHyqcv8zBp6mOq33bfAb7zL3L4M00WeZQ+4/hgGDqF0I0UrUbKnwge71NWukHZTHTDTbkva4UjbM6nRu6ke1FLM6FqGP2pKhsaBaFLUWbNXieFgxaluDXcrBc19WVc8ueovm6DBammfoDZXhA6ZW9lC/rdoIyplq9o6kZVmHMUjQPg4qVStrdclWD3VvMEM5aGYq19fXleZBbLJTEARBEARBEARBEARBEARBEARBEHz+B91xJIzYVK0AAAAAAElFTkSuQmCC\" />\n            </eui-card-header-left-content>\n            <eui-card-header-title>\n                <a\n                    class=\"h5 eui-u-text-link-external\"\n                    href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl() }}\"\n                    target=\"blank\">\n                    <span class=\"eui-u-color-grey-75\">Layout component /</span>\n                    {{ label() }}\n                </a>\n            </eui-card-header-title>\n        </eui-card-header>\n    </eui-card>\n}\n\n@if (isShowGoTop && tabSelectedIndex === 0) {\n<button\n    type=\"button\"\n    euiButton\n    euiIconButton\n    euiOutline\n    euiRounded\n    euiSizeL\n    class=\"eui-button-fixed eui-u-sh-5\"\n    (click)=\"gotoTop()\"\n    title=\"Goto Top\"\n    aria-label=\"Goto Top\">\n    <!-- \uD83D\uDC46 -->\n    <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\" />\n</button>\n}\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}.doc-page-pattern .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-bold)}\n"], dependencies: [{ kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i3$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i3$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i3$2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i5$2.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "hasNoBackground", "isReverse", "colorPalette"] }, { kind: "component", type: i5$2.EuiAvatarTextComponent, selector: "eui-avatar-text" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPagePatternSimpleComponent, isStandalone: true, selector: "eui-showcase-doc-page-pattern-simple", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, anatomyImage: { classPropertyName: "anatomyImage", publicName: "anatomyImage", isSignal: true, isRequired: false, transformFunction: null }, docEntries: { classPropertyName: "docEntries", publicName: "docEntries", isSignal: true, isRequired: false, transformFunction: null }, dos: { classPropertyName: "dos", publicName: "dos", isSignal: true, isRequired: false, transformFunction: null }, donts: { classPropertyName: "donts", publicName: "donts", isSignal: true, isRequired: false, transformFunction: null }, sourceUrl: { classPropertyName: "sourceUrl", publicName: "sourceUrl", isSignal: true, isRequired: false, transformFunction: null }, figmaUrl: { classPropertyName: "figmaUrl", publicName: "figmaUrl", isSignal: true, isRequired: false, transformFunction: null }, figmaEmbedSrc: { classPropertyName: "figmaEmbedSrc", publicName: "figmaEmbedSrc", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:scroll": "checkScroll()" }, classAttribute: "doc-page-pattern" }, queries: [{ propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSimpleDocDirective), descendants: true, isSignal: true }], ngImport: i0, template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label() }}</div>\n\n\n<h4 class=\"eui-u-text-h4\">Information</h4>\n<ng-content select=\"docPagePatternDoc\" />\n\n@if (figmaEmbedSrc()) {\n    <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n    <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n} @else {\n    @if (figmaUrl() !== 'PENDING_DS') {\n        <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Anatomy</h4>\n        <img\n            src=\"assets/images/design-system/{{ anatomyImage() }}\"\n            alt=\"Design anatomy image\"\n            width=\"60%\"\n            class=\"eui-u-sh-5 eui-u-mb-m\" />\n    }\n}\n\n@if (docEntries().length !== 0) {\n  <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n  @for (ref of docEntries(); track ref) {\n    <eui-card class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n      <eui-card-header>\n        <eui-card-header-title>\n          <div class=\"eui-u-flex\">\n            @if (ref?.id) {\n              <eui-avatar euiSizeS euiDanger class=\"eui-u-mr-s\"><eui-avatar-text>{{ ref.id }}</eui-avatar-text></eui-avatar>\n            }\n            <span class=\"eui-u-f-xl\">{{ ref.name }}</span>\n            <eui-chip [euiDanger]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n              @if (ref.mandatory) {\n                <span euiLabel><strong> Mandatory </strong></span>\n              }\n              @if (!ref.mandatory) {\n                <span euiLabel><strong> Optional </strong></span>\n              }\n            </eui-chip>\n          </div>\n        </eui-card-header-title>\n      </eui-card-header>\n      <eui-card-content>\n        <div class=\"doc-page-section-title\">Description</div>\n        <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n        @if (ref.whenToUse) {\n          <div class=\"doc-page-section-title\">When to use ?</div>\n          <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n        }\n        @if (ref.whenNotToUse) {\n          <div class=\"doc-page-section-title\">When to not use ?</div>\n          <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n        }\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            @if (ref.dos && ref.dos.length !== 0) {\n              <div class=\"doc-page-section-title eui-u-c-s-success\">\n                <eui-icon-svg icon=\"thumbs-up\"\n                  set=\"sharp\"\n                  size=\"m\"\n                  fillColor=\"success-100\"\n                  class=\"eui-u-mr-m\" />\n                <strong>Do's</strong>\n              </div>\n              @for (do of ref.dos; track do) {\n                <li class=\"eui-u-c-s-success eui-u-f-bold\">{{ do }}</li>\n              }\n            }\n          </div>\n          <div class=\"col-md-6\">\n            @if (ref.donts && ref.donts.length !== 0) {\n              <div class=\"doc-page-section-title eui-u-c-s-danger\">\n                <eui-icon-svg icon=\"hand-right\"\n                  set=\"sharp\"\n                  size=\"m\"\n                  fillColor=\"danger-100\"\n                  class=\"eui-u-mr-m\" />\n                <strong>Dont's</strong>\n              </div>\n              @for (dont of ref.donts; track dont) {\n                <li  class=\"eui-u-c-s-danger eui-u-f-bold\">{{ dont }}</li>\n              }\n            }\n          </div>\n        </div>\n      </eui-card-content>\n    </eui-card>\n  }\n}\n\n<h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n@if (figmaUrl() === 'PENDING_DS') {\n    Pending Design system publication. Will be available in a future release.\n} @else {\n    <eui-card>\n        <eui-card-header>\n            <eui-card-header-left-content>\n                <img\n                    width=\"32\"\n                    height=\"32\"\n                    alt=\"Figma Logo\"\n                    src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABL1BMVEX/////cmLyTh6iWf8Kz4MavP7yTBr5YUWeUP8AzX3UuP//bVwAt/6jV///rKTyRgr2TwCxX+kA032m6Mf3m4uabPb/aVf/8O8AzHmbSf/xPAD/a1rxQgDyShaaR/8Avv74pJP/urP/6Ob/ZVLQ7//839n5tqj/xL7/b1f/9O/59f/r3v+65/9jzP6yef/p+P+u4//Mqv/iz//cxf/I7P/fvf+U2v71/fqO5LzW9ed74LIp043/y8b4rJz0dln/i3/zXTX2jnf/19P/emv0bEv/p5//l4zzWCz2h270dVf4g2D2Whzt5v+6hfuzbfCuWOjE2+6nz+6BxO5lu+5o1v9Nx/7BlP930v63rf+UoP90lP7n1v/Prv/iwf/Onf+hefiWZPZi36O07dLf9+2A4bX7S8Q6AAAGG0lEQVR4nO2aeVcaZxSHZ6JYhsHYFjsig3UhaHG3RkHBxMRE2zR2M5SuaUW//2cow4CgwMz7uzl65x3v8/+cM8+5y7tdwxAEQRAEQRAEQRAEQRAEQRAEQRCEiFJcOVqYDuDt0wAWV2pFboFAikcv8rl8fiqA/LE9Gtd1Hcd5ubjELTKC5eNcfu5JCBOfmWHYrnOyWOK2GWQhn58I01Mz9HDdp9xCd6g9UfJTNmw5mjVuqX5e5dT8AEPTLJxya92wdJZX9IMMTduMSMsphvcXmqFpOq+55TxeK2cobmgWIqBYhARRQ7PAvgOYmYIEYUPTmWE2PAZqkGRon/AKTqt3UaKh6b7lFCzmQEGCIW8pvgFzlGRov+QTrMEhpBhyrop4CEmGfEHEq5BmaBa4dm+vph7I0OZqp3PYYk83NE0eQUqSEg0dngXjCF3t6YbuIovhO7yTUg1tnsPwGaEMqXXIszmllCHVsMAhOPOghhxnKFIrpRo6HGu+GOpvuBT7OizFvpcalC0N1ZBnY0o4HZL3NDwnxGnC4YlqyHN8Wnm4nbfD8w5FajVEQ6YHU0oh0s74XBc1y4Q0JRkyJWkLxXffT48hlyClm1IMGd/0S3iakm6E2QQpVzUEQ4fnkqbDGdpOCYa8z2vwEQo3ZLvw7nAEKuJvwKw56vEdVoqoocP6PurzPaQIGrqRmBqCFMF5mkgIthIVqEXIsBCBFPVZzikvGoCh7axwi/VYOlbdoqobOicRmWrrsKw2Xqps6NoRCqBPaSGvMsGnZGg7NvsqOJTai1xuam4iMJahhrbr2KcRmNcbQam28O6HzwM584bVB/nGxzRPF9ln9YJ5v7tz/uMXo/lprzRzl1Jp5udffr24uKjXP3zYfsatEMDq3mZyNpmcHAsgmRr4bGu/nkgnuqTTifr2FsPfh7N2PhssN9xwvd6z61luRC+Sa5uz4XqDhuvzg36+ZD1icfxNze+O4daQ+PUcG2w2g6yNJdX8bhuuB/h5ionIpGpKNYC3DRvBgp7jNqNVHztfK/v1G26ECrYU9znFuuzMAoI9QxXBaCimkAj2DMNTNCqJ+i0UwRvDfUXBliJzu1lVbqK3DJ8pC7bgNdxU76L9hoBfIrHBKbgL5mjHUD1H23n6nNFwEg1h23ALEkwk5vkEU2gV+oYNTJCzn47BIfQM0RAyBhFdKTqG+6ggXyWe4yH0DOdhwwTTMQNeC31DaC3swmNISdKx5B6epGxp+pEUw706wTDBswGH9zNtwxShDLn2NQS/luHvJEOe9QI7NnUN/yAZpjkE31MazdjknzRDjpu3+BuuPaghxzk4/jGMv6FBMtSplz6C9TD+e5qd2O9L/3rAswXTpWnsz4fxP+M/gnua+N+1Ue9LN9AQMr4/4UGk3Hlzvs3gldh+t1B9POyEkPPdwjinva5BEWR9e3oE74fwxka7N2DyO77aoEIU3vEfwSyGYfx9j/M0EYigx+69zUStM1rd4p7m2uajNJ4Y99lE4xHMlxrejHDIAPQwQ41mhD1WU/6cdxDD57zT6XTPLrJz3j5r/3w8//er0fy3O+yrref7jbrHRiPSs/qGUW5WLr8MJsP9j59C89JqMR6Ipa9huRJqp7dhRkVPY8OrqpqftoYZVT9dDS+zyoJ6Gl6qR1BPQ0hQR8NDSFBDwwpQg1oaHoCC+hlWQUHtDCtYEepnWIYFdTO8jrshIYSaGQLbUU0N4UaqmyElSfUybMbeENyRamhIKUO9DCkh1MqwjG66tTO8ir0hfHASw8gR/ywlGja5/xuAZnjA/dsAtBX/ivu3AbCL0q4h918j4Jc0LcFL7r9GoCwXVoX7ryFwwfGsTo2GdHyqcv8zBp6mOq33bfAb7zL3L4M00WeZQ+4/hgGDqF0I0UrUbKnwge71NWukHZTHTDTbkva4UjbM6nRu6ke1FLM6FqGP2pKhsaBaFLUWbNXieFgxaluDXcrBc19WVc8ueovm6DBammfoDZXhA6ZW9lC/rdoIyplq9o6kZVmHMUjQPg4qVStrdclWD3VvMEM5aGYq19fXleZBbLJTEARBEARBEARBEARBEARBEARBEHz+B91xJIzYVK0AAAAAAElFTkSuQmCC\" />\n            </eui-card-header-left-content>\n            <eui-card-header-title>\n                <a\n                    class=\"h5 eui-u-text-link-external\"\n                    href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl() }}\"\n                    target=\"blank\">\n                    <span class=\"eui-u-color-grey-75\">Layout component /</span>\n                    {{ label() }}\n                </a>\n            </eui-card-header-title>\n        </eui-card-header>\n    </eui-card>\n}\n\n@if (isShowGoTop && tabSelectedIndex === 0) {\n<button\n    type=\"button\"\n    euiButton\n    euiIconButton\n    euiOutline\n    euiRounded\n    euiSizeL\n    class=\"eui-button-fixed eui-u-sh-5\"\n    (click)=\"gotoTop()\"\n    title=\"Goto Top\"\n    aria-label=\"Goto Top\">\n    <!-- \uD83D\uDC46 -->\n    <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\" />\n</button>\n}\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}.doc-page-pattern .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-bold)}\n"], dependencies: [{ kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i3$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$1.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i3$1.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i3$1.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i5$1.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "ariaLabel", "hasShadow", "isShapeSquare", "hasNoBackground", "isReverse", "colorPalette"] }, { kind: "component", type: i5$1.EuiAvatarTextComponent, selector: "eui-avatar-text" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSimpleComponent, decorators: [{
             type: Component,
@@ -2256,7 +1859,7 @@ class DocSectionCodeComponent {
         return object;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocSectionCodeComponent, isStandalone: true, selector: "eui-showcase-doc-section-code", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, versionLabel: { classPropertyName: "versionLabel", publicName: "versionLabel", isSignal: true, isRequired: false, transformFunction: null }, isDeprecated: { classPropertyName: "isDeprecated", publicName: "isDeprecated", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sectionDescription", first: true, predicate: i0.forwardRef(() => DocSectionCodeDescriptionTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i0.forwardRef(() => DocSectionCodeHtmlTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeTS", first: true, predicate: i0.forwardRef(() => DocSectionCodeTsTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i0.forwardRef(() => DocSectionCodeServiceTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i0.forwardRef(() => DocSectionCodeCssTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i0.forwardRef(() => DocSectionCodeDocTagDirective), descendants: true, isSignal: 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            @if (versionLabel()) {\n                <span class=\"eui-u-color-danger\">{{ versionLabel() }}</span>\n            }\n            <button type=\"button\" euiButton [euiOutline]=\"!isCodeExpanded()\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n                @if (!isCodeExpanded()) {\n                    <span euiLabel>Code</span>\n                }\n                @if (isCodeExpanded()) {\n                    <span euiLabel>Hide Code</span>\n                }\n                <span euiIcon iconClass=\"eui-icon-code\"></span>\n            </button>\n        </div>\n    </div>\n    @if (isDeprecated()) {\n    <div>\n        <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n    </div>\n    }\n</h5>\n\n@if (sectionDescription()) {\n  <div class=\"eui-u-mv\">\n    <ng-content select=\"sectionDescription\" />\n  </div>\n}\n\n@if (isCodeExpanded()) {\n    <eui-tabs>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeHTML())\">\n            <eui-tab-header>\n                <eui-label>HTML</eui-label>\n                <eui-label euiSublabel>HyperText Markup Language</eui-label>\n            </eui-tab-header>\n            <eui-tab-body>\n                <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\" /></code></pre>\n            </eui-tab-body>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeTS())\">\n            <eui-tab-header>\n                <eui-label>TS</eui-label>\n                <eui-label euiSublabel>Typescript</eui-label>\n            </eui-tab-header>\n            <eui-tab-body>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\" /></code></pre>\n            </eui-tab-body>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE())\">\n            <eui-tab-header>\n                <eui-label>Service</eui-label>\n            </eui-tab-header>\n            <eui-tab-body>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\" /></code></pre>\n            </eui-tab-body>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeCSS())\">\n            <eui-tab-header>\n                <eui-label>CSS</eui-label>\n            </eui-tab-header>\n            <eui-tab-body>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\" /></code></pre>\n            </eui-tab-body>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeDOC())\">\n            <eui-tab-header>\n                <eui-label>DOC</eui-label>\n                <eui-label euiSublabel>Documentation</eui-label>\n            </eui-tab-header>\n            <eui-tab-body>\n                <div class=\"language-doc\">\n                    <ng-content select=\"sectionCodeDOC\" />\n                </div>\n            </eui-tab-body>\n        </eui-tab>\n    </eui-tabs>\n  @if (!sectionCodeHTML() && !sectionCodeTS() && !sectionCodeCSS()) {\n        <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content /></code></pre>\n  }\n}\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: "component", type: i4.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocSectionCodeComponent, isStandalone: true, selector: "eui-showcase-doc-section-code", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, versionLabel: { classPropertyName: "versionLabel", publicName: "versionLabel", isSignal: true, isRequired: false, transformFunction: null }, isDeprecated: { classPropertyName: "isDeprecated", publicName: "isDeprecated", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sectionDescription", first: true, predicate: i0.forwardRef(() => DocSectionCodeDescriptionTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i0.forwardRef(() => DocSectionCodeHtmlTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeTS", first: true, predicate: i0.forwardRef(() => DocSectionCodeTsTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i0.forwardRef(() => DocSectionCodeServiceTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i0.forwardRef(() => DocSectionCodeCssTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i0.forwardRef(() => DocSectionCodeDocTagDirective), descendants: true, isSignal: 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            @if (versionLabel()) {\n                <span class=\"eui-u-color-danger\">{{ versionLabel() }}</span>\n            }\n            <button type=\"button\" euiButton [euiOutline]=\"!isCodeExpanded()\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n                @if (!isCodeExpanded()) {\n                    <span euiLabel>Code</span>\n                }\n                @if (isCodeExpanded()) {\n                    <span euiLabel>Hide Code</span>\n                }\n                <span euiIcon iconClass=\"eui-icon-code\"></span>\n            </button>\n        </div>\n    </div>\n    @if (isDeprecated()) {\n    <div>\n        <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n    </div>\n    }\n</h5>\n\n@if (sectionDescription()) {\n  <div class=\"eui-u-mv\">\n    <ng-content select=\"sectionDescription\" />\n  </div>\n}\n\n@if (isCodeExpanded()) {\n    <eui-tabs>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeHTML())\">\n            <eui-tab-header>\n                <eui-label>HTML</eui-label>\n                <eui-label euiSublabel>HyperText Markup Language</eui-label>\n            </eui-tab-header>\n            <eui-tab-body>\n                <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\" /></code></pre>\n            </eui-tab-body>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeTS())\">\n            <eui-tab-header>\n                <eui-label>TS</eui-label>\n                <eui-label euiSublabel>Typescript</eui-label>\n            </eui-tab-header>\n            <eui-tab-body>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\" /></code></pre>\n            </eui-tab-body>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE())\">\n            <eui-tab-header>\n                <eui-label>Service</eui-label>\n            </eui-tab-header>\n            <eui-tab-body>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\" /></code></pre>\n            </eui-tab-body>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeCSS())\">\n            <eui-tab-header>\n                <eui-label>CSS</eui-label>\n            </eui-tab-header>\n            <eui-tab-body>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\" /></code></pre>\n            </eui-tab-body>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeDOC())\">\n            <eui-tab-header>\n                <eui-label>DOC</eui-label>\n                <eui-label euiSublabel>Documentation</eui-label>\n            </eui-tab-header>\n            <eui-tab-body>\n                <div class=\"language-doc\">\n                    <ng-content select=\"sectionCodeDOC\" />\n                </div>\n            </eui-tab-body>\n        </eui-tab>\n    </eui-tabs>\n  @if (!sectionCodeHTML() && !sectionCodeTS() && !sectionCodeCSS()) {\n        <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content /></code></pre>\n  }\n}\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: "component", type: i2$3.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeComponent, decorators: [{
             type: Component,
@@ -2420,6 +2023,8 @@ const EUI_SHOWCASE = [
     DocPageSamplesContentDirective,
     DocPageSectionsContentDirective,
     DocPageThemingContentDirective,
+    DocPageVisualSpecsContentDirective,
+    DocPagePlaygroundContentDirective,
     DocPageCodeFabComponent,
     DocPageCodeModalComponent,
     DocPagePatternComponent,
@@ -2449,5 +2054,5 @@ const EUI_SHOWCASE = [
  * Generated bundle index. Do not edit.
  */
 
-export { ConfigurationService, DocPageAccessibilityContentDirective, DocPageAccessibilityContentDirectiveV2, DocPageApiContentDirective, DocPageApiContentDirectiveV2, DocPageCodeComponent, DocPageCodeFabComponent, DocPageCodeModalComponent, DocPageComponent, DocPageComponentV2, DocPageDevGuideComponent, DocPageDevGuideComponentV2, DocPageInteractiveContentDirective, DocPageInteractiveContentDirectiveV2, DocPageOverviewContentDirective, DocPageOverviewContentDirectiveV2, DocPageOverviewDefaultContentDirective, DocPageOverviewDefaultContentDirectiveV2, DocPagePatternComponent, DocPagePatternDocDirective, DocPagePatternSampleComponent, DocPagePatternSampleDirective, DocPagePatternSampleDocDirective, DocPagePatternSampleRefsComponent, DocPagePatternSimpleComponent, DocPagePatternSimpleDocDirective, DocPageSamplesContentDirective, DocPageSamplesContentDirectiveV2, DocPageSectionsContentDirective, DocPageSectionsContentDirectiveV2, DocPageThemingContentDirective, DocPageThemingContentDirectiveV2, DocSampleApiComponent, DocSampleComponent, DocSectionCodeComponent, DocSectionCodeCssTagDirective, DocSectionCodeDescriptionTagDirective, DocSectionCodeDocTagDirective, DocSectionCodeHtmlTagDirective, DocSectionCodeServiceTagDirective, DocSectionCodeTsTagDirective, DocSectionComponent, EUI_SHOWCASE, EuiCodeHighlighterDirective, LoremIpsumSampleComponent, PACKAGE_JSON, PlaygroundComponent, StackblitzService, angularJsonFile, indexHtmlFile, mainFile, moduleFile, polyfillsFile, tsConfig };
+export { ConfigurationService, DocPageAccessibilityContentDirective, DocPageApiContentDirective, DocPageCodeComponent, DocPageCodeFabComponent, DocPageCodeModalComponent, DocPageComponent, DocPageDevGuideComponent, DocPageInteractiveContentDirective, DocPageOverviewContentDirective, DocPageOverviewDefaultContentDirective, DocPagePatternComponent, DocPagePatternDocDirective, DocPagePatternSampleComponent, DocPagePatternSampleDirective, DocPagePatternSampleDocDirective, DocPagePatternSampleRefsComponent, DocPagePatternSimpleComponent, DocPagePatternSimpleDocDirective, DocPagePlaygroundContentDirective, DocPageSamplesContentDirective, DocPageSectionsContentDirective, DocPageThemingContentDirective, DocPageVisualSpecsContentDirective, DocSampleApiComponent, DocSampleComponent, DocSectionCodeComponent, DocSectionCodeCssTagDirective, DocSectionCodeDescriptionTagDirective, DocSectionCodeDocTagDirective, DocSectionCodeHtmlTagDirective, DocSectionCodeServiceTagDirective, DocSectionCodeTsTagDirective, DocSectionComponent, EUI_SHOWCASE, EuiCodeHighlighterDirective, LoremIpsumSampleComponent, PACKAGE_JSON, PlaygroundComponent, StackblitzService, angularJsonFile, indexHtmlFile, mainFile, moduleFile, polyfillsFile, tsConfig };
 //# sourceMappingURL=eui-showcase.mjs.map