@eui/showcase 21.0.0-next.12 → 21.0.0-next.14

package/fesm2022/eui-showcase.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, Input, Component, inject, ChangeDetectorRef, HostBinding, ViewEncapsulation, booleanAttribute, ViewChild, forwardRef, ContentChildren, Directive, HostListener, ContentChild, ElementRef } from '@angular/core';
+import { signal, Injectable, Input, Component, inject, ChangeDetectorRef, HostBinding, ViewEncapsulation, input, ElementRef, Renderer2, effect, Directive, booleanAttribute, ViewChild, forwardRef, ContentChildren, HostListener, ContentChild } from '@angular/core';
 import * as i2 from '@eui/components/eui-icon';
 import { EUI_ICON } from '@eui/components/eui-icon';
 import * as i2$1 from '@eui/components/eui-button';
@@ -808,6 +808,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                 }]
         }] });
 
+class EuiCodeHighlighterDirective {
+    constructor() {
+        this.code = input(...(ngDevMode ? [undefined, { debugName: "code" }] : []));
+        this.el = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        effect(() => {
+            // force update of nativeElement if code changes
+            if (this.code()) {
+                this.renderer.setProperty(this.el.nativeElement, 'textContent', this.code());
+            }
+            this.highlight();
+        });
+    }
+    ngAfterViewInit() {
+        this.highlight();
+    }
+    highlight() {
+        if (window['Prism']) {
+            window['Prism'].highlightElement(this.el.nativeElement);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EuiCodeHighlighterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.0", type: EuiCodeHighlighterDirective, isStandalone: true, selector: "[euiCode]", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EuiCodeHighlighterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[euiCode]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: false }] }] } });
+
 class DocSampleComponent {
     constructor() {
         this.id = '';
@@ -978,7 +1009,7 @@ class DocSampleComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DocSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.0", type: DocSampleComponent, isStandalone: true, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", category: "category", description: "description", defaultValue: "defaultValue", styleClass: "styleClass", renderPlayground: ["renderPlayground", "renderPlayground", booleanAttribute], isCodeButtonVisible: ["isCodeButtonVisible", "isCodeButtonVisible", booleanAttribute], isInnerSection: ["isInnerSection", "isInnerSection", booleanAttribute] }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<div class=\"doc-sample-title\">\n    <div class=\"doc-sample-title__label\" [class.doc-sample-title__label--inner]=\"isInnerSection\">\n        {{ label }}\n        <button\n            euiButton\n            euiIconButton\n            euiBasicButton\n            euiRounded\n            euiPrimary\n            euiSizeS\n            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    <div *ngIf=\"shouldRenderPlayground()\" class=\"doc-sample-title__items eui-u-mr-s\">\n        <button\n            *ngIf=\"isCodeButtonVisible\"\n            type=\"button\"\n            euiButton\n            [euiOutline]=\"!isCodeExpanded\"\n            euiPrimary\n            euiSizeS\n            (click)=\"onStackblitzOpen()\">\n            <span euiLabel>Stackblitz</span>\n            <eui-icon-svg icon=\"eui-flash\" />\n        </button>\n    </div>\n    <div class=\"doc-sample-title__items\">\n        <button\n            *ngIf=\"isCodeButtonVisible\"\n            type=\"button\"\n            euiButton\n            [euiOutline]=\"!isCodeExpanded\"\n            euiPrimary\n            euiSizeS\n            (click)=\"onToggleCode()\"\n            [euiDisabled]=\"isCodeLoading\">\n            <eui-icon-svg *ngIf=\"isCodeLoading\" isLoading></eui-icon-svg>\n            <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n            <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n            <eui-icon-svg icon=\"eui-code\" />\n        </button>\n    </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-card euiNoContentPadding class=\"eui-u-mb-m\">\n        <eui-card-content>\n            <eui-tabs (tabActivate)=\"onTabActivate($event)\">\n                <eui-tab [isVisible]=\"htmlContent\">\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>{{htmlContent}}</code></pre>\n                    </eui-tab-body>\n                </eui-tab>\n                <eui-tab [isVisible]=\"tsContent\">\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>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n                    </eui-tab-body>\n                </eui-tab>\n            </eui-tabs>\n        </eui-card-content>\n    </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-3xl);margin-top:var(--eui-s-8xl);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%;letter-spacing:-.75px;font:var(--eui-f-xl-bold)}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-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;letter-spacing:-.5px;margin:var(--eui-s-5xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-primary);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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i3.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i3.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i3.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab"] }, { kind: "component", type: i5.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: i4$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i4$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2$1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.0", type: DocSampleComponent, isStandalone: true, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", category: "category", description: "description", defaultValue: "defaultValue", styleClass: "styleClass", renderPlayground: ["renderPlayground", "renderPlayground", booleanAttribute], isCodeButtonVisible: ["isCodeButtonVisible", "isCodeButtonVisible", booleanAttribute], isInnerSection: ["isInnerSection", "isInnerSection", booleanAttribute] }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<div class=\"doc-sample-title\">\n    <div class=\"doc-sample-title__label\" [class.doc-sample-title__label--inner]=\"isInnerSection\">\n        {{ label }}\n        <button\n            euiButton\n            euiIconButton\n            euiBasicButton\n            euiRounded\n            euiPrimary\n            euiSizeS\n            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    <div *ngIf=\"shouldRenderPlayground()\" class=\"doc-sample-title__items eui-u-mr-s\">\n        <button\n            *ngIf=\"isCodeButtonVisible\"\n            type=\"button\"\n            euiButton\n            [euiOutline]=\"!isCodeExpanded\"\n            euiPrimary\n            euiSizeS\n            (click)=\"onStackblitzOpen()\">\n            <span euiLabel>Stackblitz</span>\n            <eui-icon-svg icon=\"eui-flash\" />\n        </button>\n    </div>\n    <div class=\"doc-sample-title__items\">\n        <button\n            *ngIf=\"isCodeButtonVisible\"\n            type=\"button\"\n            euiButton\n            [euiOutline]=\"!isCodeExpanded\"\n            euiPrimary\n            euiSizeS\n            (click)=\"onToggleCode()\"\n            [euiDisabled]=\"isCodeLoading\">\n            <eui-icon-svg *ngIf=\"isCodeLoading\" isLoading></eui-icon-svg>\n            <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n            <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n            <eui-icon-svg icon=\"eui-code\" />\n        </button>\n    </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-card euiNoContentPadding class=\"eui-u-mb-m\">\n        <eui-card-content>\n            <eui-tabs (tabActivate)=\"onTabActivate($event)\">\n                <eui-tab [isVisible]=\"htmlContent\">\n                    <eui-tab-header>\n                        <eui-label>HTML</eui-label>\n                    </eui-tab-header>\n                    <eui-tab-body>\n                        <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n                    </eui-tab-body>\n                </eui-tab>\n                <eui-tab [isVisible]=\"tsContent\">\n                    <eui-tab-header>\n                        <eui-label>Typescript</eui-label>\n                    </eui-tab-header>\n                    <eui-tab-body>\n                        <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n                    </eui-tab-body>\n                </eui-tab>\n            </eui-tabs>\n        </eui-card-content>\n    </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-3xl);margin-top:var(--eui-s-8xl);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%;letter-spacing:-.75px;font:var(--eui-f-xl-bold)}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-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;letter-spacing:-.5px;margin:var(--eui-s-5xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-primary);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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i3.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i3.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i3.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab"] }, { kind: "component", type: i5.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: i4$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander"], outputs: ["collapse"] }, { kind: "component", type: i4$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2$1.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: "21.0.0", ngImport: i0, type: DocSampleComponent, decorators: [{
             type: Component,
@@ -989,7 +1020,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         ...EUI_CARD,
                         ...EUI_ICON,
                         ...EUI_BUTTON,
-                    ], template: "<div class=\"doc-sample-title\">\n    <div class=\"doc-sample-title__label\" [class.doc-sample-title__label--inner]=\"isInnerSection\">\n        {{ label }}\n        <button\n            euiButton\n            euiIconButton\n            euiBasicButton\n            euiRounded\n            euiPrimary\n            euiSizeS\n            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    <div *ngIf=\"shouldRenderPlayground()\" class=\"doc-sample-title__items eui-u-mr-s\">\n        <button\n            *ngIf=\"isCodeButtonVisible\"\n            type=\"button\"\n            euiButton\n            [euiOutline]=\"!isCodeExpanded\"\n            euiPrimary\n            euiSizeS\n            (click)=\"onStackblitzOpen()\">\n            <span euiLabel>Stackblitz</span>\n            <eui-icon-svg icon=\"eui-flash\" />\n        </button>\n    </div>\n    <div class=\"doc-sample-title__items\">\n        <button\n            *ngIf=\"isCodeButtonVisible\"\n            type=\"button\"\n            euiButton\n            [euiOutline]=\"!isCodeExpanded\"\n            euiPrimary\n            euiSizeS\n            (click)=\"onToggleCode()\"\n            [euiDisabled]=\"isCodeLoading\">\n            <eui-icon-svg *ngIf=\"isCodeLoading\" isLoading></eui-icon-svg>\n            <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n            <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n            <eui-icon-svg icon=\"eui-code\" />\n        </button>\n    </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-card euiNoContentPadding class=\"eui-u-mb-m\">\n        <eui-card-content>\n            <eui-tabs (tabActivate)=\"onTabActivate($event)\">\n                <eui-tab [isVisible]=\"htmlContent\">\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>{{htmlContent}}</code></pre>\n                    </eui-tab-body>\n                </eui-tab>\n                <eui-tab [isVisible]=\"tsContent\">\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>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n                    </eui-tab-body>\n                </eui-tab>\n            </eui-tabs>\n        </eui-card-content>\n    </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-3xl);margin-top:var(--eui-s-8xl);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%;letter-spacing:-.75px;font:var(--eui-f-xl-bold)}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-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;letter-spacing:-.5px;margin:var(--eui-s-5xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-primary);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"] }]
+                        EuiCodeHighlighterDirective,
+                    ], template: "<div class=\"doc-sample-title\">\n    <div class=\"doc-sample-title__label\" [class.doc-sample-title__label--inner]=\"isInnerSection\">\n        {{ label }}\n        <button\n            euiButton\n            euiIconButton\n            euiBasicButton\n            euiRounded\n            euiPrimary\n            euiSizeS\n            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    <div *ngIf=\"shouldRenderPlayground()\" class=\"doc-sample-title__items eui-u-mr-s\">\n        <button\n            *ngIf=\"isCodeButtonVisible\"\n            type=\"button\"\n            euiButton\n            [euiOutline]=\"!isCodeExpanded\"\n            euiPrimary\n            euiSizeS\n            (click)=\"onStackblitzOpen()\">\n            <span euiLabel>Stackblitz</span>\n            <eui-icon-svg icon=\"eui-flash\" />\n        </button>\n    </div>\n    <div class=\"doc-sample-title__items\">\n        <button\n            *ngIf=\"isCodeButtonVisible\"\n            type=\"button\"\n            euiButton\n            [euiOutline]=\"!isCodeExpanded\"\n            euiPrimary\n            euiSizeS\n            (click)=\"onToggleCode()\"\n            [euiDisabled]=\"isCodeLoading\">\n            <eui-icon-svg *ngIf=\"isCodeLoading\" isLoading></eui-icon-svg>\n            <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n            <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n            <eui-icon-svg icon=\"eui-code\" />\n        </button>\n    </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-card euiNoContentPadding class=\"eui-u-mb-m\">\n        <eui-card-content>\n            <eui-tabs (tabActivate)=\"onTabActivate($event)\">\n                <eui-tab [isVisible]=\"htmlContent\">\n                    <eui-tab-header>\n                        <eui-label>HTML</eui-label>\n                    </eui-tab-header>\n                    <eui-tab-body>\n                        <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n                    </eui-tab-body>\n                </eui-tab>\n                <eui-tab [isVisible]=\"tsContent\">\n                    <eui-tab-header>\n                        <eui-label>Typescript</eui-label>\n                    </eui-tab-header>\n                    <eui-tab-body>\n                        <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n                    </eui-tab-body>\n                </eui-tab>\n            </eui-tabs>\n        </eui-card-content>\n    </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-3xl);margin-top:var(--eui-s-8xl);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%;letter-spacing:-.75px;font:var(--eui-f-xl-bold)}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-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;letter-spacing:-.5px;margin:var(--eui-s-5xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-primary);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"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], label: [{
@@ -1358,13 +1390,14 @@ class DocPageComponent {
         return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DocPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: DocPageComponent, isStandalone: true, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isLegacy: "isLegacy", codeFolder: "codeFolder", showcase: "showcase", isNavigationVisible: "isNavigationVisible", hasApi: "hasApi", hasA11y: "hasA11y", customApiUrl: "customApiUrl" }, host: { properties: { "class": "this.cssClass" } }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirective) }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirective) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirective) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirective) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirective) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirective) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirective) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirective) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i0, template: "<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 }}\" subLabel=\"{{ subLabel }}\" class=\"eui-doc-page-title\">\n                        <eui-page-header-action-items>\n                            <eui-showcase-doc-page-code\n                                *ngIf=\"codeFolder\"\n                                codeFolder=\"{{ codeFolder }}\"\n                                showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n                            <eui-chip euiSizeS isFilled\n                                *ngIf=\"stateLabel\"\n                                [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                                [euiInfo]=\"isNotReady\"\n                                [euiWarning]=\"isDeprecated\"\n                                [euiDanger]=\"isLegacy\">\n                                {{ stateLabel }}\n                            </eui-chip>\n                        </eui-page-header-action-items>\n                    </eui-page-header>\n\n                    <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger class=\"eui-u-mb-xl\">\n                        <eui-alert-title>LEGACY component</eui-alert-title>\n                        <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n                        <div *ngIf=\"cmp\">\n                            <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n                                It has been replaced by :\n                                <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n                            </div>\n                            <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n                                <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n                            </div>\n                            <div *ngIf=\"cmp.cmpReplacementNote\">\n                                <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n                            </div>\n                        </div>\n                    </eui-alert>\n\n                    <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning class=\"eui-u-mb-xl\">\n                        <eui-alert-title>DEPRECATED component</eui-alert-title>\n                        This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n                        <div *ngIf=\"cmp\">\n                            This component has no replacement in current version AND won't have replacement in next version of eUI,\n                            <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n                        </div>\n                    </eui-alert>\n\n                    <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo class=\"eui-u-mb-xl\">\n                        <eui-alert-title>NOT READY for production usage</eui-alert-title>\n                        <div *ngIf=\"cmp\">\n                            This component is under development / some features might be missing, it'll be available in a future release once\n                            validated.\n                        </div>\n                    </eui-alert>\n\n                    <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n                    <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (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                                <ng-container *ngIf=\"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                                </ng-container>\n\n                                <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n\n                                <div *ngIf=\"pageOverviewContent.length > 0\">\n                                    <ng-content select=\"docPageOverview\"></ng-content>\n                                </div>\n\n                                <div *ngIf=\"pageOverviewDefaultContent.length > 0\">\n                                    <ng-content select=\"docPageOverviewDefault\"></ng-content>\n                                </div>\n                                <br />\n\n                                <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n                                <ng-content select=\"docPageSamples\"></ng-content>\n                            </eui-tab-body>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"hasApi\">\n                            <eui-tab-header>\n                                <eui-label> API </eui-label>\n                            </eui-tab-header>\n                            <eui-tab-body>\n                                <ng-container *ngIf=\"apiUrlSafe\">\n                                    <div class=\"flex-container\">\n                                        <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n                                    </div>\n                                    <div class=\"doc-page-api-iframe-wrapper\">\n                                        <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n                                    </div>\n                                </ng-container>\n                            </eui-tab-body>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"hasA11y\">\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                                <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n                                    <ng-content select=\"docPageAccessibility\"></ng-content>\n                                    <p>\n                                        For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n                                    </p>\n                                </ng-container>\n                                <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n                                    No accessibility rules applicable\n                                </ng-container>\n                            </eui-tab-body>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"pageThemingContent.length > 0\">\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\"></ng-content>\n                            </eui-tab-body>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n                            <eui-tab-header>\n                                <eui-label>\n                                    {{ pageInteractiveContent.first.title }}\n                                </eui-label>\n                            </eui-tab-header>\n                            <eui-tab-body>\n                                <div id=\"interactive\" class=\"doc-page-section-title\">\n                                    {{ pageInteractiveContent.first.subTitle }}\n                                </div>\n                                <ng-content select=\"docPageInteractive\"></ng-content>\n                            </eui-tab-body>\n                        </eui-tab>\n                    </eui-tabs>\n\n                    <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                        <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n                        <ng-content select=\"docPageSections\"></ng-content>\n                    </ng-container>\n\n                </eui-page-column-body>\n            </eui-page-column>\n\n            <eui-page-column *ngIf=\"isNavigationVisible\"\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\n                    <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n                        <ul class=\"doc-page-navigation\">\n                            <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n                                <li\n                                    *ngIf=\"hasApi\"\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n                                    (click)=\"onNavClick('api', 1)\">\n                                    <span>API</span>\n                                </li>\n                                <li\n                                    *ngIf=\"hasA11y\"\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n                                    (click)=\"onNavClick('a11y', 2)\">\n                                    <span>A11Y</span>\n                                </li>\n\n                                <li\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n                                    (click)=\"onNavClick('samples', 0)\">\n                                    <span>OPTIONS & SAMPLES</span>\n                                </li>\n                                <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                                    <ng-container *ngIf=\"categories.length > 0\">\n                                        <ng-container *ngIf=\"hasCategories; else noCategories\">\n                                            <ng-container *ngFor=\"let category of categories\">\n                                                <ng-container *ngIf=\"category.name === 'Base'; else notBase\">\n                                                    <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n                                                        <li\n                                                            class=\"doc-page-navigation-item\"\n                                                            [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                                            (click)=\"onNavClick(sample.id, 0)\">\n                                                            <span>{{ sample.label }}</span>\n                                                        </li>\n                                                    </ul>\n                                                </ng-container>\n                                                <ng-template #notBase>\n                                                    <div *ngIf=\"category.name !== 'Base'\" class=\"doc-page-navigation-category\">{{category.name}}</div>\n                                                    <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n                                                        <li\n                                                            class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n                                                            [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                                            (click)=\"onNavClick(sample.id, 0)\">\n                                                            <span>{{ sample.label }}</span>\n                                                        </li>\n                                                    </ul>\n                                                </ng-template>\n                                            </ng-container>\n                                        </ng-container>\n\n                                        <ng-template #noCategories>\n                                            <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n                                                <li\n                                                    class=\"doc-page-navigation-item\"\n                                                    [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                                    (click)=\"onNavClick(sample.id, 0)\">\n                                                    <span>{{ sample.label }}</span>\n                                                </li>\n                                            </ul>\n                                        </ng-template>\n                                    </ng-container>\n                                </li>\n\n\n\n                                <!-- OPTIONAL TABS-->\n                                <ng-container *ngIf=\"pageThemingContent.length > 0\">\n                                    <li\n                                        *ngIf=\"pageThemingContent.length > 0\"\n                                        class=\"doc-page-navigation-item\"\n                                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n                                        (click)=\"onNavClick('theming', 3)\">\n                                        <span>THEMING</span>\n                                    </li>\n                                    <li\n                                        *ngIf=\"pageInteractiveContent.length > 0\"\n                                        class=\"doc-page-navigation-item\"\n                                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                                        (click)=\"onNavClick('advanced', 4)\">\n                                        <span>{{ pageInteractiveContent.first.title }}</span>\n                                    </li>\n                                </ng-container>\n                                <ng-container *ngIf=\"pageThemingContent.length === 0\">\n                                    <li\n                                        *ngIf=\"pageInteractiveContent.length > 0\"\n                                        class=\"doc-page-navigation-item\"\n                                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                                        (click)=\"onNavClick('advanced', 3)\">\n                                        <span>{{ pageInteractiveContent.first.title }}</span>\n                                    </li>\n                                </ng-container>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                                <li\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n                                    (click)=\"onNavClick('sections', null)\">\n                                    <span>Sections</span>\n                                </li>\n                                <li\n                                    *ngIf=\"sections.length === 0\"\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n                                    (click)=\"onNavClick('demo', null)\">\n                                    <span>Demo</span>\n                                </li>\n                                <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                                    <ul *ngFor=\"let section of sections\">\n                                        <li\n                                            class=\"doc-page-navigation-item\"\n                                            [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n                                            (click)=\"onNavClick(section.id, null)\">\n                                            <span>{{ section.label }}</span>\n                                        </li>\n                                    </ul>\n                                </li>\n                            </ng-container>\n                        </ul>\n                    </div>\n\n\n\n\n                </eui-page-column-body>\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 .eui-common-header__label-text{font:var(--eui-f-2xl)!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-2xl-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-3xl)}.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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { kind: "component", type: i2$3.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i2$3.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i3.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i3.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i3.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i3.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab"] }, { kind: "component", type: i4.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i4.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i4.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i4.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i4.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i4.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i4.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i5.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: i6.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled"], outputs: ["remove"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: DocPageComponent, isStandalone: true, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isLegacy: "isLegacy", codeFolder: "codeFolder", showcase: "showcase", isNavigationVisible: "isNavigationVisible", hasApi: "hasApi", hasA11y: "hasA11y", customApiUrl: "customApiUrl" }, host: { properties: { "class": "this.cssClass" } }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirective) }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirective) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirective) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirective) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirective) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirective) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirective) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirective) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i0, template: "<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 }}\" subLabel=\"{{ subLabel }}\" class=\"eui-doc-page-title\">\n                        <eui-page-header-action-items>\n                            <eui-showcase-doc-page-code\n                                *ngIf=\"codeFolder\"\n                                codeFolder=\"{{ codeFolder }}\"\n                                showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n                            <eui-chip euiSizeS isFilled\n                                *ngIf=\"stateLabel\"\n                                [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                                [euiInfo]=\"isNotReady\"\n                                [euiWarning]=\"isDeprecated\"\n                                [euiDanger]=\"isLegacy\">\n                                {{ stateLabel }}\n                            </eui-chip>\n                        </eui-page-header-action-items>\n                    </eui-page-header>\n\n                    <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger class=\"eui-u-mb-xl\">\n                        <eui-alert-title>LEGACY component</eui-alert-title>\n                        <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n                        <div *ngIf=\"cmp\">\n                            <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n                                It has been replaced by :\n                                <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n                            </div>\n                            <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n                                <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n                            </div>\n                            <div *ngIf=\"cmp.cmpReplacementNote\">\n                                <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n                            </div>\n                        </div>\n                    </eui-alert>\n\n                    <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning class=\"eui-u-mb-xl\">\n                        <eui-alert-title>DEPRECATED component</eui-alert-title>\n                        This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n                        <div *ngIf=\"cmp\">\n                            This component has no replacement in current version AND won't have replacement in next version of eUI,\n                            <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n                        </div>\n                    </eui-alert>\n\n                    <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo class=\"eui-u-mb-xl\">\n                        <eui-alert-title>NOT READY for production usage</eui-alert-title>\n                        <div *ngIf=\"cmp\">\n                            This component is under development / some features might be missing, it'll be available in a future release once\n                            validated.\n                        </div>\n                    </eui-alert>\n\n                    <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n                    <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (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                                <ng-container *ngIf=\"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                                </ng-container>\n\n                                <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n\n                                <div *ngIf=\"pageOverviewContent.length > 0\">\n                                    <ng-content select=\"docPageOverview\"></ng-content>\n                                </div>\n\n                                <div *ngIf=\"pageOverviewDefaultContent.length > 0\">\n                                    <ng-content select=\"docPageOverviewDefault\"></ng-content>\n                                </div>\n                                <br />\n\n                                <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n                                <ng-content select=\"docPageSamples\"></ng-content>\n                            </eui-tab-body>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"hasApi\">\n                            <eui-tab-header>\n                                <eui-label> API </eui-label>\n                            </eui-tab-header>\n                            <eui-tab-body>\n                                <ng-container *ngIf=\"apiUrlSafe\">\n                                    <div class=\"flex-container\">\n                                        <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n                                    </div>\n                                    <div class=\"doc-page-api-iframe-wrapper\">\n                                        <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n                                    </div>\n                                </ng-container>\n                            </eui-tab-body>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"hasA11y\">\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                                <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n                                    <ng-content select=\"docPageAccessibility\"></ng-content>\n                                    <p>\n                                        For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n                                    </p>\n                                </ng-container>\n                                <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n                                    No accessibility rules applicable\n                                </ng-container>\n                            </eui-tab-body>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"pageThemingContent.length > 0\">\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\"></ng-content>\n                            </eui-tab-body>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n                            <eui-tab-header>\n                                <eui-label>\n                                    {{ pageInteractiveContent.first.title }}\n                                </eui-label>\n                            </eui-tab-header>\n                            <eui-tab-body>\n                                <div id=\"interactive\" class=\"doc-page-section-title\">\n                                    {{ pageInteractiveContent.first.subTitle }}\n                                </div>\n                                <ng-content select=\"docPageInteractive\"></ng-content>\n                            </eui-tab-body>\n                        </eui-tab>\n                    </eui-tabs>\n\n                    <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                        <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n                        <ng-content select=\"docPageSections\"></ng-content>\n                    </ng-container>\n\n                </eui-page-column-body>\n            </eui-page-column>\n\n            <eui-page-column *ngIf=\"isNavigationVisible\"\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\n                    <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n                        <ul class=\"doc-page-navigation\">\n                            <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n                                <li\n                                    *ngIf=\"hasApi\"\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n                                    (click)=\"onNavClick('api', 1)\">\n                                    <span>API</span>\n                                </li>\n                                <li\n                                    *ngIf=\"hasA11y\"\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n                                    (click)=\"onNavClick('a11y', 2)\">\n                                    <span>A11Y</span>\n                                </li>\n\n                                <li\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n                                    (click)=\"onNavClick('samples', 0)\">\n                                    <span>OPTIONS & SAMPLES</span>\n                                </li>\n                                <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                                    <ng-container *ngIf=\"categories.length > 0\">\n                                        <ng-container *ngIf=\"hasCategories; else noCategories\">\n                                            <ng-container *ngFor=\"let category of categories\">\n                                                <ng-container *ngIf=\"category.name === 'Base'; else notBase\">\n                                                    <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n                                                        <li\n                                                            class=\"doc-page-navigation-item\"\n                                                            [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                                            (click)=\"onNavClick(sample.id, 0)\">\n                                                            <span>{{ sample.label }}</span>\n                                                        </li>\n                                                    </ul>\n                                                </ng-container>\n                                                <ng-template #notBase>\n                                                    <div *ngIf=\"category.name !== 'Base'\" class=\"doc-page-navigation-category\">{{category.name}}</div>\n                                                    <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n                                                        <li\n                                                            class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n                                                            [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                                            (click)=\"onNavClick(sample.id, 0)\">\n                                                            <span>{{ sample.label }}</span>\n                                                        </li>\n                                                    </ul>\n                                                </ng-template>\n                                            </ng-container>\n                                        </ng-container>\n\n                                        <ng-template #noCategories>\n                                            <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n                                                <li\n                                                    class=\"doc-page-navigation-item\"\n                                                    [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                                    (click)=\"onNavClick(sample.id, 0)\">\n                                                    <span>{{ sample.label }}</span>\n                                                </li>\n                                            </ul>\n                                        </ng-template>\n                                    </ng-container>\n                                </li>\n\n\n\n                                <!-- OPTIONAL TABS-->\n                                <ng-container *ngIf=\"pageThemingContent.length > 0\">\n                                    <li\n                                        *ngIf=\"pageThemingContent.length > 0\"\n                                        class=\"doc-page-navigation-item\"\n                                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n                                        (click)=\"onNavClick('theming', 3)\">\n                                        <span>THEMING</span>\n                                    </li>\n                                    <li\n                                        *ngIf=\"pageInteractiveContent.length > 0\"\n                                        class=\"doc-page-navigation-item\"\n                                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                                        (click)=\"onNavClick('advanced', 4)\">\n                                        <span>{{ pageInteractiveContent.first.title }}</span>\n                                    </li>\n                                </ng-container>\n                                <ng-container *ngIf=\"pageThemingContent.length === 0\">\n                                    <li\n                                        *ngIf=\"pageInteractiveContent.length > 0\"\n                                        class=\"doc-page-navigation-item\"\n                                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                                        (click)=\"onNavClick('advanced', 3)\">\n                                        <span>{{ pageInteractiveContent.first.title }}</span>\n                                    </li>\n                                </ng-container>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                                <li\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n                                    (click)=\"onNavClick('sections', null)\">\n                                    <span>Sections</span>\n                                </li>\n                                <li\n                                    *ngIf=\"sections.length === 0\"\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n                                    (click)=\"onNavClick('demo', null)\">\n                                    <span>Demo</span>\n                                </li>\n                                <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                                    <ul *ngFor=\"let section of sections\">\n                                        <li\n                                            class=\"doc-page-navigation-item\"\n                                            [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n                                            (click)=\"onNavClick(section.id, null)\">\n                                            <span>{{ section.label }}</span>\n                                        </li>\n                                    </ul>\n                                </li>\n                            </ng-container>\n                        </ul>\n                    </div>\n\n\n\n\n                </eui-page-column-body>\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 .eui-common-header__label-text{font:var(--eui-f-2xl)!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-2xl-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-3xl)}.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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }, { kind: "component", type: i2$3.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i2$3.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i3.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i3.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i3.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i3.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab"] }, { kind: "component", type: i4.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i4.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i4.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i4.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i4.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i4.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i4.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i5.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: i6.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled"], outputs: ["remove"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DocPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-showcase-doc-page', encapsulation: ViewEncapsulation.None, imports: [
                         CommonModule,
                         DocPageCodeComponent,
+                        EuiCodeHighlighterDirective,
                         ...EUI_ALERT,
                         ...EUI_TABS,
                         ...EUI_PAGE,
@@ -1820,7 +1853,7 @@ class DocPageComponentV2 {
         return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DocPageComponentV2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: DocPageComponentV2, isStandalone: true, selector: "eui-showcase-doc-page-v2", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isLegacy: "isLegacy", codeFolder: "codeFolder", showcase: "showcase", isNavigationVisible: "isNavigationVisible", hasApi: "hasApi", hasA11y: "hasA11y", customApiUrl: "customApiUrl" }, host: { properties: { "class": "this.cssClass" } }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirectiveV2) }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirectiveV2) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirectiveV2) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirectiveV2) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirectiveV2) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirectiveV2) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirectiveV2) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirectiveV2) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], 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 class=\"eui-doc-page-title\">\n                        <eui-page-header-label>{{label}}</eui-page-header-label> \n                        <eui-page-header-sub-label>{{subLabel}}</eui-page-header-sub-label>\n                        <eui-page-header-action-items>\n                            <eui-showcase-doc-page-code\n                                *ngIf=\"codeFolder\"\n                                codeFolder=\"{{ codeFolder }}\"\n                                showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n                            <eui-chip euiSizeS isFilled\n                                *ngIf=\"stateLabel\"\n                                [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                                [euiInfo]=\"isNotReady\"\n                                [euiWarning]=\"isDeprecated\"\n                                [euiDanger]=\"isLegacy\">\n                                {{ stateLabel }}\n                            </eui-chip>\n                        </eui-page-header-action-items>\n                    </eui-page-header>\n\n                    <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger class=\"eui-u-mb-xl\">\n                        <eui-alert-title>LEGACY component</eui-alert-title>\n                        <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n                        <div *ngIf=\"cmp\">\n                            <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n                                It has been replaced by :\n                                <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n                            </div>\n                            <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n                                <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n                            </div>\n                            <div *ngIf=\"cmp.cmpReplacementNote\">\n                                <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n                            </div>\n                        </div>\n                    </eui-alert>\n\n                    <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning class=\"eui-u-mb-xl\">\n                        <eui-alert-title>DEPRECATED component</eui-alert-title>\n                        This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n                        <div *ngIf=\"cmp\">\n                            This component has no replacement in current version AND won't have replacement in next version of eUI,\n                            <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n                        </div>\n                    </eui-alert>\n\n                    <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo class=\"eui-u-mb-xl\">\n                        <eui-alert-title>NOT READY for production usage</eui-alert-title>\n                        <div *ngIf=\"cmp\">\n                            This component is under development / some features might be missing, it'll be available in a future release once\n                            validated.\n                        </div>\n                    </eui-alert>\n\n                    <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n                    <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (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                                <ng-container *ngIf=\"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                                </ng-container>\n\n                                <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n\n                                <div *ngIf=\"pageOverviewContent.length > 0\">\n                                    <ng-content select=\"docPageOverview\"></ng-content>\n                                </div>\n\n                                <div *ngIf=\"pageOverviewDefaultContent.length > 0\">\n                                    <ng-content select=\"docPageOverviewDefault\"></ng-content>\n                                </div>\n                                <br />\n\n                                <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n                                <ng-content select=\"docPageSamples\"></ng-content>\n                            </eui-tab-body>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"hasApi\">\n                            <eui-tab-header>\n                                <eui-label> API </eui-label>\n                            </eui-tab-header>\n                            <eui-tab-body>\n                                <ng-container *ngIf=\"apiUrlSafe\">\n                                    <div class=\"flex-container\">\n                                        <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n                                    </div>\n                                    <div class=\"doc-page-api-iframe-wrapper\">\n                                        <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n                                    </div>\n                                </ng-container>\n                            </eui-tab-body>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"hasA11y\">\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                                <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n                                    <ng-content select=\"docPageAccessibility\"></ng-content>\n                                    <p>\n                                        For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n                                    </p>\n                                </ng-container>\n                                <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n                                    No accessibility rules applicable\n                                </ng-container>\n                            </eui-tab-body>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"pageThemingContent.length > 0\">\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\"></ng-content>\n                            </eui-tab-body>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n                            <eui-tab-header>\n                                <eui-label>\n                                    {{ pageInteractiveContent.first.title }}\n                                </eui-label>\n                            </eui-tab-header>\n                            <eui-tab-body>\n                                <div id=\"interactive\" class=\"doc-page-section-title\">\n                                    {{ pageInteractiveContent.first.subTitle }}\n                                </div>\n                                <ng-content select=\"docPageInteractive\"></ng-content>\n                            </eui-tab-body>\n                        </eui-tab>\n                    </eui-tabs>\n\n                    <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                        <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n                        <ng-content select=\"docPageSections\"></ng-content>\n                    </ng-container>\n\n                </eui-page-column-body>\n            </eui-page-column>\n\n            <eui-page-column *ngIf=\"isNavigationVisible\"\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\n                    <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n                        <ul class=\"doc-page-navigation\">\n                            <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n                                <li\n                                    *ngIf=\"hasApi\"\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n                                    (click)=\"onNavClick('api', 1)\">\n                                    <span>API</span>\n                                </li>\n                                <li\n                                    *ngIf=\"hasA11y\"\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n                                    (click)=\"onNavClick('a11y', 2)\">\n                                    <span>A11Y</span>\n                                </li>\n\n                                <li\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n                                    (click)=\"onNavClick('samples', 0)\">\n                                    <span>OPTIONS & SAMPLES</span>\n                                </li>\n                                <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                                    <ng-container *ngIf=\"categories.length > 0\">\n                                        <ng-container *ngIf=\"hasCategories; else noCategories\">\n                                            <ng-container *ngFor=\"let category of categories\">\n                                                <ng-container *ngIf=\"category.name === 'Base'; else notBase\">\n                                                    <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n                                                        <li\n                                                            class=\"doc-page-navigation-item\"\n                                                            [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                                            (click)=\"onNavClick(sample.id, 0)\">\n                                                            <span>{{ sample.label }}</span>\n                                                        </li>\n                                                    </ul>\n                                                </ng-container>\n                                                <ng-template #notBase>\n                                                    <div *ngIf=\"category.name !== 'Base'\" class=\"doc-page-navigation-category\">{{category.name}}</div>\n                                                    <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n                                                        <li\n                                                            class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n                                                            [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                                            (click)=\"onNavClick(sample.id, 0)\">\n                                                            <span>{{ sample.label }}</span>\n                                                        </li>\n                                                    </ul>\n                                                </ng-template>\n                                            </ng-container>\n                                        </ng-container>\n\n                                        <ng-template #noCategories>\n                                            <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n                                                <li\n                                                    class=\"doc-page-navigation-item\"\n                                                    [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                                    (click)=\"onNavClick(sample.id, 0)\">\n                                                    <span>{{ sample.label }}</span>\n                                                </li>\n                                            </ul>\n                                        </ng-template>\n                                    </ng-container>\n                                </li>\n\n\n\n                                <!-- OPTIONAL TABS-->\n                                <ng-container *ngIf=\"pageThemingContent.length > 0\">\n                                    <li\n                                        *ngIf=\"pageThemingContent.length > 0\"\n                                        class=\"doc-page-navigation-item\"\n                                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n                                        (click)=\"onNavClick('theming', 3)\">\n                                        <span>THEMING</span>\n                                    </li>\n                                    <li\n                                        *ngIf=\"pageInteractiveContent.length > 0\"\n                                        class=\"doc-page-navigation-item\"\n                                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                                        (click)=\"onNavClick('advanced', 4)\">\n                                        <span>{{ pageInteractiveContent.first.title }}</span>\n                                    </li>\n                                </ng-container>\n                                <ng-container *ngIf=\"pageThemingContent.length === 0\">\n                                    <li\n                                        *ngIf=\"pageInteractiveContent.length > 0\"\n                                        class=\"doc-page-navigation-item\"\n                                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                                        (click)=\"onNavClick('advanced', 3)\">\n                                        <span>{{ pageInteractiveContent.first.title }}</span>\n                                    </li>\n                                </ng-container>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                                <li\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n                                    (click)=\"onNavClick('sections', null)\">\n                                    <span>Sections</span>\n                                </li>\n                                <li\n                                    *ngIf=\"sections.length === 0\"\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n                                    (click)=\"onNavClick('demo', null)\">\n                                    <span>Demo</span>\n                                </li>\n                                <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                                    <ul *ngFor=\"let section of sections\">\n                                        <li\n                                            class=\"doc-page-navigation-item\"\n                                            [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n                                            (click)=\"onNavClick(section.id, null)\">\n                                            <span>{{ section.label }}</span>\n                                        </li>\n                                    </ul>\n                                </li>\n                            </ng-container>\n                        </ul>\n                    </div>\n\n\n\n\n                </eui-page-column-body>\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-2xl)!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-2xl-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-3xl)}.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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { kind: "component", type: i2$3.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i2$3.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i3.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i3.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i3.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i3.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab"] }, { kind: "component", type: i4$1.EuiPage, selector: "eui-page" }, { kind: "component", type: i4$1.EuiPageContent, selector: "eui-page-content" }, { kind: "component", type: i4$1.EuiPageHeader, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i4$1.EuiPageHeaderLabel, selector: "eui-page-header-label" }, { kind: "component", type: i4$1.EuiPageHeaderSubLabel, selector: "eui-page-header-sub-label" }, { kind: "component", type: i4$1.EuiPageHeaderActionItems, selector: "eui-page-header-action-items" }, { kind: "component", type: i4$1.EuiPageColumns, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i4$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: i4$1.EuiPageColumnHeader, selector: "eui-page-column-header", inputs: ["expandAriaLabel", "collapseAriaLabel"] }, { kind: "component", type: i4$1.EuiPageColumnHeaderLabel, selector: "eui-page-column-header-label" }, { kind: "component", type: i4$1.EuiPageColumnBody, selector: "eui-page-column-body" }, { kind: "component", type: i5.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: i6.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled"], outputs: ["remove"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: DocPageComponentV2, isStandalone: true, selector: "eui-showcase-doc-page-v2", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isLegacy: "isLegacy", codeFolder: "codeFolder", showcase: "showcase", isNavigationVisible: "isNavigationVisible", hasApi: "hasApi", hasA11y: "hasA11y", customApiUrl: "customApiUrl" }, host: { properties: { "class": "this.cssClass" } }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirectiveV2) }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirectiveV2) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirectiveV2) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirectiveV2) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirectiveV2) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirectiveV2) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirectiveV2) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirectiveV2) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], 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 class=\"eui-doc-page-title\">\n                        <eui-page-header-label>{{label}}</eui-page-header-label> \n                        <eui-page-header-sub-label>{{subLabel}}</eui-page-header-sub-label>\n                        <eui-page-header-action-items>\n                            <eui-showcase-doc-page-code\n                                *ngIf=\"codeFolder\"\n                                codeFolder=\"{{ codeFolder }}\"\n                                showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n                            <eui-chip euiSizeS isFilled\n                                *ngIf=\"stateLabel\"\n                                [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                                [euiInfo]=\"isNotReady\"\n                                [euiWarning]=\"isDeprecated\"\n                                [euiDanger]=\"isLegacy\">\n                                {{ stateLabel }}\n                            </eui-chip>\n                        </eui-page-header-action-items>\n                    </eui-page-header>\n\n                    <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger class=\"eui-u-mb-xl\">\n                        <eui-alert-title>LEGACY component</eui-alert-title>\n                        <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n                        <div *ngIf=\"cmp\">\n                            <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n                                It has been replaced by :\n                                <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n                            </div>\n                            <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n                                <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n                            </div>\n                            <div *ngIf=\"cmp.cmpReplacementNote\">\n                                <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n                            </div>\n                        </div>\n                    </eui-alert>\n\n                    <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning class=\"eui-u-mb-xl\">\n                        <eui-alert-title>DEPRECATED component</eui-alert-title>\n                        This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n                        <div *ngIf=\"cmp\">\n                            This component has no replacement in current version AND won't have replacement in next version of eUI,\n                            <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n                        </div>\n                    </eui-alert>\n\n                    <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo class=\"eui-u-mb-xl\">\n                        <eui-alert-title>NOT READY for production usage</eui-alert-title>\n                        <div *ngIf=\"cmp\">\n                            This component is under development / some features might be missing, it'll be available in a future release once\n                            validated.\n                        </div>\n                    </eui-alert>\n\n                    <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n                    <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (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                                <ng-container *ngIf=\"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                                </ng-container>\n\n                                <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n\n                                <div *ngIf=\"pageOverviewContent.length > 0\">\n                                    <ng-content select=\"docPageOverview\"></ng-content>\n                                </div>\n\n                                <div *ngIf=\"pageOverviewDefaultContent.length > 0\">\n                                    <ng-content select=\"docPageOverviewDefault\"></ng-content>\n                                </div>\n                                <br />\n\n                                <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n                                <ng-content select=\"docPageSamples\"></ng-content>\n                            </eui-tab-body>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"hasApi\">\n                            <eui-tab-header>\n                                <eui-label> API </eui-label>\n                            </eui-tab-header>\n                            <eui-tab-body>\n                                <ng-container *ngIf=\"apiUrlSafe\">\n                                    <div class=\"flex-container\">\n                                        <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n                                    </div>\n                                    <div class=\"doc-page-api-iframe-wrapper\">\n                                        <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n                                    </div>\n                                </ng-container>\n                            </eui-tab-body>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"hasA11y\">\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                                <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n                                    <ng-content select=\"docPageAccessibility\"></ng-content>\n                                    <p>\n                                        For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n                                    </p>\n                                </ng-container>\n                                <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n                                    No accessibility rules applicable\n                                </ng-container>\n                            </eui-tab-body>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"pageThemingContent.length > 0\">\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\"></ng-content>\n                            </eui-tab-body>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n                            <eui-tab-header>\n                                <eui-label>\n                                    {{ pageInteractiveContent.first.title }}\n                                </eui-label>\n                            </eui-tab-header>\n                            <eui-tab-body>\n                                <div id=\"interactive\" class=\"doc-page-section-title\">\n                                    {{ pageInteractiveContent.first.subTitle }}\n                                </div>\n                                <ng-content select=\"docPageInteractive\"></ng-content>\n                            </eui-tab-body>\n                        </eui-tab>\n                    </eui-tabs>\n\n                    <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                        <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n                        <ng-content select=\"docPageSections\"></ng-content>\n                    </ng-container>\n\n                </eui-page-column-body>\n            </eui-page-column>\n\n            <eui-page-column *ngIf=\"isNavigationVisible\"\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\n                    <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n                        <ul class=\"doc-page-navigation\">\n                            <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n                                <li\n                                    *ngIf=\"hasApi\"\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n                                    (click)=\"onNavClick('api', 1)\">\n                                    <span>API</span>\n                                </li>\n                                <li\n                                    *ngIf=\"hasA11y\"\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n                                    (click)=\"onNavClick('a11y', 2)\">\n                                    <span>A11Y</span>\n                                </li>\n\n                                <li\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n                                    (click)=\"onNavClick('samples', 0)\">\n                                    <span>OPTIONS & SAMPLES</span>\n                                </li>\n                                <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                                    <ng-container *ngIf=\"categories.length > 0\">\n                                        <ng-container *ngIf=\"hasCategories; else noCategories\">\n                                            <ng-container *ngFor=\"let category of categories\">\n                                                <ng-container *ngIf=\"category.name === 'Base'; else notBase\">\n                                                    <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n                                                        <li\n                                                            class=\"doc-page-navigation-item\"\n                                                            [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                                            (click)=\"onNavClick(sample.id, 0)\">\n                                                            <span>{{ sample.label }}</span>\n                                                        </li>\n                                                    </ul>\n                                                </ng-container>\n                                                <ng-template #notBase>\n                                                    <div *ngIf=\"category.name !== 'Base'\" class=\"doc-page-navigation-category\">{{category.name}}</div>\n                                                    <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n                                                        <li\n                                                            class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n                                                            [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                                            (click)=\"onNavClick(sample.id, 0)\">\n                                                            <span>{{ sample.label }}</span>\n                                                        </li>\n                                                    </ul>\n                                                </ng-template>\n                                            </ng-container>\n                                        </ng-container>\n\n                                        <ng-template #noCategories>\n                                            <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n                                                <li\n                                                    class=\"doc-page-navigation-item\"\n                                                    [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                                    (click)=\"onNavClick(sample.id, 0)\">\n                                                    <span>{{ sample.label }}</span>\n                                                </li>\n                                            </ul>\n                                        </ng-template>\n                                    </ng-container>\n                                </li>\n\n\n\n                                <!-- OPTIONAL TABS-->\n                                <ng-container *ngIf=\"pageThemingContent.length > 0\">\n                                    <li\n                                        *ngIf=\"pageThemingContent.length > 0\"\n                                        class=\"doc-page-navigation-item\"\n                                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n                                        (click)=\"onNavClick('theming', 3)\">\n                                        <span>THEMING</span>\n                                    </li>\n                                    <li\n                                        *ngIf=\"pageInteractiveContent.length > 0\"\n                                        class=\"doc-page-navigation-item\"\n                                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                                        (click)=\"onNavClick('advanced', 4)\">\n                                        <span>{{ pageInteractiveContent.first.title }}</span>\n                                    </li>\n                                </ng-container>\n                                <ng-container *ngIf=\"pageThemingContent.length === 0\">\n                                    <li\n                                        *ngIf=\"pageInteractiveContent.length > 0\"\n                                        class=\"doc-page-navigation-item\"\n                                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                                        (click)=\"onNavClick('advanced', 3)\">\n                                        <span>{{ pageInteractiveContent.first.title }}</span>\n                                    </li>\n                                </ng-container>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                                <li\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n                                    (click)=\"onNavClick('sections', null)\">\n                                    <span>Sections</span>\n                                </li>\n                                <li\n                                    *ngIf=\"sections.length === 0\"\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n                                    (click)=\"onNavClick('demo', null)\">\n                                    <span>Demo</span>\n                                </li>\n                                <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                                    <ul *ngFor=\"let section of sections\">\n                                        <li\n                                            class=\"doc-page-navigation-item\"\n                                            [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n                                            (click)=\"onNavClick(section.id, null)\">\n                                            <span>{{ section.label }}</span>\n                                        </li>\n                                    </ul>\n                                </li>\n                            </ng-container>\n                        </ul>\n                    </div>\n\n\n\n\n                </eui-page-column-body>\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-2xl)!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-2xl-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-3xl)}.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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { kind: "component", type: i2$3.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i2$3.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i3.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i3.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i3.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i3.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab"] }, { kind: "component", type: i4$1.EuiPage, selector: "eui-page" }, { kind: "component", type: i4$1.EuiPageContent, selector: "eui-page-content" }, { kind: "component", type: i4$1.EuiPageHeader, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i4$1.EuiPageHeaderLabel, selector: "eui-page-header-label" }, { kind: "component", type: i4$1.EuiPageHeaderSubLabel, selector: "eui-page-header-sub-label" }, { kind: "component", type: i4$1.EuiPageHeaderActionItems, selector: "eui-page-header-action-items" }, { kind: "component", type: i4$1.EuiPageColumns, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i4$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: i4$1.EuiPageColumnHeader, selector: "eui-page-column-header", inputs: ["expandAriaLabel", "collapseAriaLabel"] }, { kind: "component", type: i4$1.EuiPageColumnHeaderLabel, selector: "eui-page-column-header-label" }, { kind: "component", type: i4$1.EuiPageColumnBody, selector: "eui-page-column-body" }, { kind: "component", type: i5.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: i6.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled"], outputs: ["remove"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DocPageComponentV2, decorators: [{
             type: Component,
@@ -1833,6 +1866,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
                         ...EUI_LABEL,
                         ...EUI_CHIP,
                         ...EUI_BLOCK_CONTENT,
+                        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}}</eui-page-header-label> \n                        <eui-page-header-sub-label>{{subLabel}}</eui-page-header-sub-label>\n                        <eui-page-header-action-items>\n                            <eui-showcase-doc-page-code\n                                *ngIf=\"codeFolder\"\n                                codeFolder=\"{{ codeFolder }}\"\n                                showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n                            <eui-chip euiSizeS isFilled\n                                *ngIf=\"stateLabel\"\n                                [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                                [euiInfo]=\"isNotReady\"\n                                [euiWarning]=\"isDeprecated\"\n                                [euiDanger]=\"isLegacy\">\n                                {{ stateLabel }}\n                            </eui-chip>\n                        </eui-page-header-action-items>\n                    </eui-page-header>\n\n                    <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger class=\"eui-u-mb-xl\">\n                        <eui-alert-title>LEGACY component</eui-alert-title>\n                        <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n                        <div *ngIf=\"cmp\">\n                            <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n                                It has been replaced by :\n                                <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n                            </div>\n                            <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n                                <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n                            </div>\n                            <div *ngIf=\"cmp.cmpReplacementNote\">\n                                <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n                            </div>\n                        </div>\n                    </eui-alert>\n\n                    <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning class=\"eui-u-mb-xl\">\n                        <eui-alert-title>DEPRECATED component</eui-alert-title>\n                        This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n                        <div *ngIf=\"cmp\">\n                            This component has no replacement in current version AND won't have replacement in next version of eUI,\n                            <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n                        </div>\n                    </eui-alert>\n\n                    <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo class=\"eui-u-mb-xl\">\n                        <eui-alert-title>NOT READY for production usage</eui-alert-title>\n                        <div *ngIf=\"cmp\">\n                            This component is under development / some features might be missing, it'll be available in a future release once\n                            validated.\n                        </div>\n                    </eui-alert>\n\n                    <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n                    <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (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                                <ng-container *ngIf=\"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                                </ng-container>\n\n                                <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n\n                                <div *ngIf=\"pageOverviewContent.length > 0\">\n                                    <ng-content select=\"docPageOverview\"></ng-content>\n                                </div>\n\n                                <div *ngIf=\"pageOverviewDefaultContent.length > 0\">\n                                    <ng-content select=\"docPageOverviewDefault\"></ng-content>\n                                </div>\n                                <br />\n\n                                <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n                                <ng-content select=\"docPageSamples\"></ng-content>\n                            </eui-tab-body>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"hasApi\">\n                            <eui-tab-header>\n                                <eui-label> API </eui-label>\n                            </eui-tab-header>\n                            <eui-tab-body>\n                                <ng-container *ngIf=\"apiUrlSafe\">\n                                    <div class=\"flex-container\">\n                                        <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n                                    </div>\n                                    <div class=\"doc-page-api-iframe-wrapper\">\n                                        <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n                                    </div>\n                                </ng-container>\n                            </eui-tab-body>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"hasA11y\">\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                                <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n                                    <ng-content select=\"docPageAccessibility\"></ng-content>\n                                    <p>\n                                        For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n                                    </p>\n                                </ng-container>\n                                <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n                                    No accessibility rules applicable\n                                </ng-container>\n                            </eui-tab-body>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"pageThemingContent.length > 0\">\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\"></ng-content>\n                            </eui-tab-body>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n                            <eui-tab-header>\n                                <eui-label>\n                                    {{ pageInteractiveContent.first.title }}\n                                </eui-label>\n                            </eui-tab-header>\n                            <eui-tab-body>\n                                <div id=\"interactive\" class=\"doc-page-section-title\">\n                                    {{ pageInteractiveContent.first.subTitle }}\n                                </div>\n                                <ng-content select=\"docPageInteractive\"></ng-content>\n                            </eui-tab-body>\n                        </eui-tab>\n                    </eui-tabs>\n\n                    <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                        <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n                        <ng-content select=\"docPageSections\"></ng-content>\n                    </ng-container>\n\n                </eui-page-column-body>\n            </eui-page-column>\n\n            <eui-page-column *ngIf=\"isNavigationVisible\"\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\n                    <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n                        <ul class=\"doc-page-navigation\">\n                            <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n                                <li\n                                    *ngIf=\"hasApi\"\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n                                    (click)=\"onNavClick('api', 1)\">\n                                    <span>API</span>\n                                </li>\n                                <li\n                                    *ngIf=\"hasA11y\"\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n                                    (click)=\"onNavClick('a11y', 2)\">\n                                    <span>A11Y</span>\n                                </li>\n\n                                <li\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n                                    (click)=\"onNavClick('samples', 0)\">\n                                    <span>OPTIONS & SAMPLES</span>\n                                </li>\n                                <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                                    <ng-container *ngIf=\"categories.length > 0\">\n                                        <ng-container *ngIf=\"hasCategories; else noCategories\">\n                                            <ng-container *ngFor=\"let category of categories\">\n                                                <ng-container *ngIf=\"category.name === 'Base'; else notBase\">\n                                                    <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n                                                        <li\n                                                            class=\"doc-page-navigation-item\"\n                                                            [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                                            (click)=\"onNavClick(sample.id, 0)\">\n                                                            <span>{{ sample.label }}</span>\n                                                        </li>\n                                                    </ul>\n                                                </ng-container>\n                                                <ng-template #notBase>\n                                                    <div *ngIf=\"category.name !== 'Base'\" class=\"doc-page-navigation-category\">{{category.name}}</div>\n                                                    <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n                                                        <li\n                                                            class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n                                                            [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                                            (click)=\"onNavClick(sample.id, 0)\">\n                                                            <span>{{ sample.label }}</span>\n                                                        </li>\n                                                    </ul>\n                                                </ng-template>\n                                            </ng-container>\n                                        </ng-container>\n\n                                        <ng-template #noCategories>\n                                            <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n                                                <li\n                                                    class=\"doc-page-navigation-item\"\n                                                    [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n                                                    (click)=\"onNavClick(sample.id, 0)\">\n                                                    <span>{{ sample.label }}</span>\n                                                </li>\n                                            </ul>\n                                        </ng-template>\n                                    </ng-container>\n                                </li>\n\n\n\n                                <!-- OPTIONAL TABS-->\n                                <ng-container *ngIf=\"pageThemingContent.length > 0\">\n                                    <li\n                                        *ngIf=\"pageThemingContent.length > 0\"\n                                        class=\"doc-page-navigation-item\"\n                                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n                                        (click)=\"onNavClick('theming', 3)\">\n                                        <span>THEMING</span>\n                                    </li>\n                                    <li\n                                        *ngIf=\"pageInteractiveContent.length > 0\"\n                                        class=\"doc-page-navigation-item\"\n                                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                                        (click)=\"onNavClick('advanced', 4)\">\n                                        <span>{{ pageInteractiveContent.first.title }}</span>\n                                    </li>\n                                </ng-container>\n                                <ng-container *ngIf=\"pageThemingContent.length === 0\">\n                                    <li\n                                        *ngIf=\"pageInteractiveContent.length > 0\"\n                                        class=\"doc-page-navigation-item\"\n                                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                                        (click)=\"onNavClick('advanced', 3)\">\n                                        <span>{{ pageInteractiveContent.first.title }}</span>\n                                    </li>\n                                </ng-container>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                                <li\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n                                    (click)=\"onNavClick('sections', null)\">\n                                    <span>Sections</span>\n                                </li>\n                                <li\n                                    *ngIf=\"sections.length === 0\"\n                                    class=\"doc-page-navigation-item\"\n                                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n                                    (click)=\"onNavClick('demo', null)\">\n                                    <span>Demo</span>\n                                </li>\n                                <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                                    <ul *ngFor=\"let section of sections\">\n                                        <li\n                                            class=\"doc-page-navigation-item\"\n                                            [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n                                            (click)=\"onNavClick(section.id, null)\">\n                                            <span>{{ section.label }}</span>\n                                        </li>\n                                    </ul>\n                                </li>\n                            </ng-container>\n                        </ul>\n                    </div>\n\n\n\n\n                </eui-page-column-body>\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-2xl)!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-2xl-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-3xl)}.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: { cssClass: [{
                 type: HostBinding,
@@ -2101,7 +2135,7 @@ class DocPagePatternComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DocPagePatternComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: DocPagePatternComponent, isStandalone: true, selector: "eui-showcase-doc-page-pattern", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", docEntries: "docEntries", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl", figmaEmbedSrc: "figmaEmbedSrc" }, host: { listeners: { "window:scroll": "checkScroll()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "sampleContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSampleDirective), descendants: true }, { propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternDocDirective), descendants: true }], ngImport: i0, template: "<eui-tabs (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\"></ng-content>\n\n            <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\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            </ng-container>\n            <ng-template #screenshot>\n                <ng-container *ngIf=\"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                </ng-container>\n            </ng-template>\n\n            <ng-container *ngIf=\"docEntries.length !== 0\">\n                <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Design system references</h3>\n\n                <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n                    <eui-card-header>\n                        <eui-card-header-title>\n                            <div class=\"eui-u-flex\">\n                                <eui-badge *ngIf=\"ref?.id\" euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n                                <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n                            </div>\n                        </eui-card-header-title>\n                        <eui-card-header-right-content>\n                            <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n                                <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n                                <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\n                            </eui-chip>\n                        </eui-card-header-right-content>\n                    </eui-card-header>\n                    <eui-card-content>\n                        <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n                        <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n\n                        <ng-container *ngIf=\"ref.whenToUse\">\n                            <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n                            <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n                        </ng-container>\n                        <ng-container *ngIf=\"ref.whenNotToUse\">\n                            <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n                            <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n                        </ng-container>\n                        <div class=\"row\">\n                            <div class=\"col-md-6\">\n                                <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n                                    <h6 class=\"section-title eui-u-mt-xl\">\n                                        <eui-icon-svg\n                                            icon=\"thumbs-up\"\n                                            set=\"sharp\"\n                                            size=\"m\"\n                                            fillColor=\"success-100\"\n                                            class=\"eui-u-mr-m\"></eui-icon-svg>\n                                        <strong>Do's</strong>\n                                    </h6>\n                                    <li *ngFor=\"let do of ref.dos\">{{ do }}</li>\n                                </ng-container>\n                            </div>\n                            <div class=\"col-md-6\">\n                                <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n                                    <h6 class=\"section-title eui-u-mt-xl\">\n                                        <eui-icon-svg\n                                            icon=\"hand-right\"\n                                            set=\"sharp\"\n                                            size=\"m\"\n                                            fillColor=\"danger-100\"\n                                            class=\"eui-u-mr-m\"></eui-icon-svg>\n                                        <strong>Dont's</strong>\n                                    </h6>\n                                    <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </eui-card-content>\n                </eui-card>\n            </ng-container>\n\n            <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n            <ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n                Pending Design system publication. Will be available in a future release.\n            </ng-container>\n            <ng-template #figmaOK>\n                <eui-card>\n                    <eui-card-header>\n                        <eui-card-header-left-content>\n                            <img\n                                width=\"32\"\n                                height=\"32\"\n                                alt=\"Figma Logo\"\n                                src=\"data:image/png;base64,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\" />\n                        </eui-card-header-left-content>\n                        <eui-card-header-title>\n                            <a\n                                class=\"h5 eui-u-text-link-external\"\n                                href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n                                target=\"blank\">\n                                <span class=\"eui-u-color-grey-75\">Layout component /</span>\n                                {{ label }}\n                            </a>\n                        </eui-card-header-title>\n                    </eui-card-header>\n                </eui-card>\n            </ng-template>\n        </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\"></ng-content>\n        </eui-tab-body>\n    </eui-tab>\n\n    <eui-tabs-right-content>\n        <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode($event)\">\n            <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n            View sources\n        </button>\n    </eui-tabs-right-content>\n</eui-tabs>\n\n<button\n    type=\"button\"\n    *ngIf=\"isShowGoTop && tabSelectedIndex === 0\"\n    euiButton\n    euiIconButton\n    euiOutline\n    euiRounded\n    euiSizeL\n    class=\"eui-button-fixed eui-u-sh-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\"></eui-icon-svg>\n</button>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i3.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i3.EuiTabsRightContentComponent, selector: "eui-tabs-right-content" }, { kind: "component", type: i3.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i3.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab"] }, { kind: "component", type: i4$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i4$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i4$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i4$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i4$2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i4$2.EuiCardHeaderRightContentComponent, selector: "eui-card-header-right-content" }, { kind: "component", type: i6.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i6$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i5.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: "14.0.0", version: "21.0.0", type: DocPagePatternComponent, isStandalone: true, selector: "eui-showcase-doc-page-pattern", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", docEntries: "docEntries", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl", figmaEmbedSrc: "figmaEmbedSrc" }, host: { listeners: { "window:scroll": "checkScroll()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "sampleContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSampleDirective), descendants: true }, { propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternDocDirective), descendants: true }], ngImport: i0, template: "<eui-tabs (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\"></ng-content>\n\n            <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\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            </ng-container>\n            <ng-template #screenshot>\n                <ng-container *ngIf=\"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                </ng-container>\n            </ng-template>\n\n            <ng-container *ngIf=\"docEntries.length !== 0\">\n                <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Design system references</h3>\n\n                <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n                    <eui-card-header>\n                        <eui-card-header-title>\n                            <div class=\"eui-u-flex\">\n                                <eui-badge *ngIf=\"ref?.id\" euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n                                <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n                            </div>\n                        </eui-card-header-title>\n                        <eui-card-header-right-content>\n                            <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n                                <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n                                <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\n                            </eui-chip>\n                        </eui-card-header-right-content>\n                    </eui-card-header>\n                    <eui-card-content>\n                        <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n                        <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n\n                        <ng-container *ngIf=\"ref.whenToUse\">\n                            <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n                            <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n                        </ng-container>\n                        <ng-container *ngIf=\"ref.whenNotToUse\">\n                            <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n                            <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n                        </ng-container>\n                        <div class=\"row\">\n                            <div class=\"col-md-6\">\n                                <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n                                    <h6 class=\"section-title eui-u-mt-xl\">\n                                        <eui-icon-svg\n                                            icon=\"thumbs-up\"\n                                            set=\"sharp\"\n                                            size=\"m\"\n                                            fillColor=\"success-100\"\n                                            class=\"eui-u-mr-m\"></eui-icon-svg>\n                                        <strong>Do's</strong>\n                                    </h6>\n                                    <li *ngFor=\"let do of ref.dos\">{{ do }}</li>\n                                </ng-container>\n                            </div>\n                            <div class=\"col-md-6\">\n                                <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n                                    <h6 class=\"section-title eui-u-mt-xl\">\n                                        <eui-icon-svg\n                                            icon=\"hand-right\"\n                                            set=\"sharp\"\n                                            size=\"m\"\n                                            fillColor=\"danger-100\"\n                                            class=\"eui-u-mr-m\"></eui-icon-svg>\n                                        <strong>Dont's</strong>\n                                    </h6>\n                                    <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </eui-card-content>\n                </eui-card>\n            </ng-container>\n\n            <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n            <ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n                Pending Design system publication. Will be available in a future release.\n            </ng-container>\n            <ng-template #figmaOK>\n                <eui-card>\n                    <eui-card-header>\n                        <eui-card-header-left-content>\n                            <img\n                                width=\"32\"\n                                height=\"32\"\n                                alt=\"Figma Logo\"\n                                src=\"data:image/png;base64,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\" />\n                        </eui-card-header-left-content>\n                        <eui-card-header-title>\n                            <a\n                                class=\"h5 eui-u-text-link-external\"\n                                href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n                                target=\"blank\">\n                                <span class=\"eui-u-color-grey-75\">Layout component /</span>\n                                {{ label }}\n                            </a>\n                        </eui-card-header-title>\n                    </eui-card-header>\n                </eui-card>\n            </ng-template>\n        </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\"></ng-content>\n        </eui-tab-body>\n    </eui-tab>\n\n    <eui-tabs-right-content>\n        <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode($event)\">\n            <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n            View sources\n        </button>\n    </eui-tabs-right-content>\n</eui-tabs>\n\n<button\n    type=\"button\"\n    *ngIf=\"isShowGoTop && tabSelectedIndex === 0\"\n    euiButton\n    euiIconButton\n    euiOutline\n    euiRounded\n    euiSizeL\n    class=\"eui-button-fixed eui-u-sh-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\"></eui-icon-svg>\n</button>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i3.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i3.EuiTabsRightContentComponent, selector: "eui-tabs-right-content" }, { kind: "component", type: i3.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i3.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab"] }, { kind: "component", type: i4$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander"], outputs: ["collapse"] }, { kind: "component", type: i4$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i4$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i4$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i4$2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i4$2.EuiCardHeaderRightContentComponent, selector: "eui-card-header-right-content" }, { kind: "component", type: i6.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i6$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i5.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: "21.0.0", ngImport: i0, type: DocPagePatternComponent, decorators: [{
             type: Component,
@@ -2152,7 +2186,7 @@ class DocPagePatternSampleRefsComponent {
         this.docEntries = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DocPagePatternSampleRefsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: DocPagePatternSampleRefsComponent, isStandalone: true, selector: "eui-showcase-doc-pattern-sample-refs", inputs: { docEntries: "docEntries", codeFolder: "codeFolder" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n\n<div class=\"row\">\n    <div class=\"col-md-6 eui-u-mb-3xl\" *ngFor=\"let ref of docEntries\">\n        <eui-card class=\"eui-u-height-100\">\n            <eui-card-header>\n                <eui-card-header-title>\n                    <div class=\"eui-u-flex\">\n                        <eui-badge *ngIf=\"ref?.id\" [euiDanger]=\"ref.mandatory\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\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                        <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n                        <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\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\n                <ng-container *ngIf=\"ref.whenToUse\">\n                    <div class=\"eui-u-f-bold\">When to use ?</div>\n                    <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n                </ng-container>\n                <ng-container *ngIf=\"ref.whenNotToUse\">\n                    <div class=\"eui-u-f-bold\">When to not use ?</div>\n                    <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n                </ng-container>\n                <div class=\"row eui-u-mt-l\">\n                    <div class=\"col-md-6\">\n                        <ng-container *ngIf=\"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                            <li *ngFor=\"let do of ref.dos\">{{ do }}</li>\n                        </ng-container>\n                    </div>\n                    <div class=\"col-md-6\">\n                        <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n                            <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                            <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n                        </ng-container>\n                    </div>\n                </div>\n            </eui-card-content>\n        </eui-card>\n    </div>\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i4$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i4$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i4$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i4$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i6$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: DocPagePatternSampleRefsComponent, isStandalone: true, selector: "eui-showcase-doc-pattern-sample-refs", inputs: { docEntries: "docEntries", codeFolder: "codeFolder" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n\n<div class=\"row\">\n    <div class=\"col-md-6 eui-u-mb-3xl\" *ngFor=\"let ref of docEntries\">\n        <eui-card class=\"eui-u-height-100\">\n            <eui-card-header>\n                <eui-card-header-title>\n                    <div class=\"eui-u-flex\">\n                        <eui-badge *ngIf=\"ref?.id\" [euiDanger]=\"ref.mandatory\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\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                        <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n                        <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\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\n                <ng-container *ngIf=\"ref.whenToUse\">\n                    <div class=\"eui-u-f-bold\">When to use ?</div>\n                    <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n                </ng-container>\n                <ng-container *ngIf=\"ref.whenNotToUse\">\n                    <div class=\"eui-u-f-bold\">When to not use ?</div>\n                    <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n                </ng-container>\n                <div class=\"row eui-u-mt-l\">\n                    <div class=\"col-md-6\">\n                        <ng-container *ngIf=\"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                            <li *ngFor=\"let do of ref.dos\">{{ do }}</li>\n                        </ng-container>\n                    </div>\n                    <div class=\"col-md-6\">\n                        <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n                            <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                            <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n                        </ng-container>\n                    </div>\n                </div>\n            </eui-card-content>\n        </eui-card>\n    </div>\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i4$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander"], outputs: ["collapse"] }, { kind: "component", type: i4$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i4$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i4$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i6$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DocPagePatternSampleRefsComponent, decorators: [{
             type: Component,
@@ -2297,7 +2331,7 @@ class DocPagePatternSimpleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DocPagePatternSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: DocPagePatternSimpleComponent, isStandalone: true, selector: "eui-showcase-doc-page-pattern-simple", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", docEntries: "docEntries", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl", figmaEmbedSrc: "figmaEmbedSrc" }, host: { listeners: { "window:scroll": "checkScroll()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSimpleDocDirective), descendants: 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\"></ng-content>\n\n<ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\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</ng-container>\n<ng-template #screenshot>\n    <ng-container *ngIf=\"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    </ng-container>\n</ng-template>\n\n<ng-container *ngIf=\"docEntries.length !== 0\">\n    <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n\n    <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n        <eui-card-header>\n            <eui-card-header-title>\n                <div class=\"eui-u-flex\">\n                    <eui-avatar *ngIf=\"ref?.id\" euiSizeS euiDanger class=\"eui-u-mr-s\"><eui-avatar-text>{{ ref.id }}</eui-avatar-text></eui-avatar>\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                    <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n                    <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\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\n            <ng-container *ngIf=\"ref.whenToUse\">\n                <div class=\"doc-page-section-title\">When to use ?</div>\n                <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n            </ng-container>\n            <ng-container *ngIf=\"ref.whenNotToUse\">\n                <div class=\"doc-page-section-title\">When to not use ?</div>\n                <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n            </ng-container>\n            <div class=\"row\">\n                <div class=\"col-md-6\">\n                    <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n                        <div class=\"doc-page-section-title eui-u-c-s-success\">\n                            <eui-icon-svg\n                                icon=\"thumbs-up\"\n                                set=\"sharp\"\n                                size=\"m\"\n                                fillColor=\"success-100\"\n                                class=\"eui-u-mr-m\"></eui-icon-svg>\n                            <strong>Do's</strong>\n                        </div>\n                        <li *ngFor=\"let do of ref.dos\" class=\"eui-u-c-s-success eui-u-f-bold\">{{ do }}</li>\n                    </ng-container>\n                </div>\n                <div class=\"col-md-6\">\n                    <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n                        <div class=\"doc-page-section-title eui-u-c-s-danger\">\n                            <eui-icon-svg\n                                icon=\"hand-right\"\n                                set=\"sharp\"\n                                size=\"m\"\n                                fillColor=\"danger-100\"\n                                class=\"eui-u-mr-m\"></eui-icon-svg>\n                            <strong>Dont's</strong>\n                        </div>\n                        <li *ngFor=\"let dont of ref.donts\"  class=\"eui-u-c-s-danger eui-u-f-bold\">{{ dont }}</li>\n                    </ng-container>\n                </div>\n            </div>\n        </eui-card-content>\n    </eui-card>\n</ng-container>\n\n<h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n<ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n    Pending Design system publication. Will be available in a future release.\n</ng-container>\n<ng-template #figmaOK>\n    <eui-card>\n        <eui-card-header>\n            <eui-card-header-left-content>\n                <img\n                    width=\"32\"\n                    height=\"32\"\n                    alt=\"Figma Logo\"\n                    src=\"data:image/png;base64,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\" />\n            </eui-card-header-left-content>\n            <eui-card-header-title>\n                <a\n                    class=\"h5 eui-u-text-link-external\"\n                    href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n                    target=\"blank\">\n                    <span class=\"eui-u-color-grey-75\">Layout component /</span>\n                    {{ label }}\n                </a>\n            </eui-card-header-title>\n        </eui-card-header>\n    </eui-card>\n</ng-template>\n\n<button\n    type=\"button\"\n    *ngIf=\"isShowGoTop && tabSelectedIndex === 0\"\n    euiButton\n    euiIconButton\n    euiOutline\n    euiRounded\n    euiSizeL\n    class=\"eui-button-fixed eui-u-sh-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\"></eui-icon-svg>\n</button>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) 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-2xl-bold)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i4$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i4$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i4$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i4$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i4$2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i6.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i6$2.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "hasNoBackground", "isReverse"] }, { kind: "component", type: i6$2.EuiAvatarTextComponent, selector: "eui-avatar-text" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: DocPagePatternSimpleComponent, isStandalone: true, selector: "eui-showcase-doc-page-pattern-simple", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", docEntries: "docEntries", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl", figmaEmbedSrc: "figmaEmbedSrc" }, host: { listeners: { "window:scroll": "checkScroll()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSimpleDocDirective), descendants: 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\"></ng-content>\n\n<ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\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</ng-container>\n<ng-template #screenshot>\n    <ng-container *ngIf=\"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    </ng-container>\n</ng-template>\n\n<ng-container *ngIf=\"docEntries.length !== 0\">\n    <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n\n    <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n        <eui-card-header>\n            <eui-card-header-title>\n                <div class=\"eui-u-flex\">\n                    <eui-avatar *ngIf=\"ref?.id\" euiSizeS euiDanger class=\"eui-u-mr-s\"><eui-avatar-text>{{ ref.id }}</eui-avatar-text></eui-avatar>\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                    <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n                    <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\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\n            <ng-container *ngIf=\"ref.whenToUse\">\n                <div class=\"doc-page-section-title\">When to use ?</div>\n                <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n            </ng-container>\n            <ng-container *ngIf=\"ref.whenNotToUse\">\n                <div class=\"doc-page-section-title\">When to not use ?</div>\n                <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n            </ng-container>\n            <div class=\"row\">\n                <div class=\"col-md-6\">\n                    <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n                        <div class=\"doc-page-section-title eui-u-c-s-success\">\n                            <eui-icon-svg\n                                icon=\"thumbs-up\"\n                                set=\"sharp\"\n                                size=\"m\"\n                                fillColor=\"success-100\"\n                                class=\"eui-u-mr-m\"></eui-icon-svg>\n                            <strong>Do's</strong>\n                        </div>\n                        <li *ngFor=\"let do of ref.dos\" class=\"eui-u-c-s-success eui-u-f-bold\">{{ do }}</li>\n                    </ng-container>\n                </div>\n                <div class=\"col-md-6\">\n                    <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n                        <div class=\"doc-page-section-title eui-u-c-s-danger\">\n                            <eui-icon-svg\n                                icon=\"hand-right\"\n                                set=\"sharp\"\n                                size=\"m\"\n                                fillColor=\"danger-100\"\n                                class=\"eui-u-mr-m\"></eui-icon-svg>\n                            <strong>Dont's</strong>\n                        </div>\n                        <li *ngFor=\"let dont of ref.donts\"  class=\"eui-u-c-s-danger eui-u-f-bold\">{{ dont }}</li>\n                    </ng-container>\n                </div>\n            </div>\n        </eui-card-content>\n    </eui-card>\n</ng-container>\n\n<h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n<ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n    Pending Design system publication. Will be available in a future release.\n</ng-container>\n<ng-template #figmaOK>\n    <eui-card>\n        <eui-card-header>\n            <eui-card-header-left-content>\n                <img\n                    width=\"32\"\n                    height=\"32\"\n                    alt=\"Figma Logo\"\n                    src=\"data:image/png;base64,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\" />\n            </eui-card-header-left-content>\n            <eui-card-header-title>\n                <a\n                    class=\"h5 eui-u-text-link-external\"\n                    href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n                    target=\"blank\">\n                    <span class=\"eui-u-color-grey-75\">Layout component /</span>\n                    {{ label }}\n                </a>\n            </eui-card-header-title>\n        </eui-card-header>\n    </eui-card>\n</ng-template>\n\n<button\n    type=\"button\"\n    *ngIf=\"isShowGoTop && tabSelectedIndex === 0\"\n    euiButton\n    euiIconButton\n    euiOutline\n    euiRounded\n    euiSizeL\n    class=\"eui-button-fixed eui-u-sh-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\"></eui-icon-svg>\n</button>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) 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-2xl-bold)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i4$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander"], outputs: ["collapse"] }, { kind: "component", type: i4$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i4$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i4$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i4$2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i6.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i6$2.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "hasNoBackground", "isReverse"] }, { kind: "component", type: i6$2.EuiAvatarTextComponent, selector: "eui-avatar-text" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DocPagePatternSimpleComponent, decorators: [{
             type: Component,
@@ -2452,25 +2486,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
             args: [{ selector: 'sectionCodeDOC' }]
         }] });
 
-class EuiCodeHighlighterDirective {
-    constructor() {
-        this.el = inject(ElementRef);
-    }
-    ngAfterViewInit() {
-        if (window['Prism']) {
-            window['Prism'].highlightElement(this.el.nativeElement);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EuiCodeHighlighterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: EuiCodeHighlighterDirective, isStandalone: true, selector: "[euiCode]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EuiCodeHighlighterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[euiCode]',
-                }]
-        }] });
-
 class LoremIpsumSampleComponent {
     constructor() {
         this.textSize = 'large';