@eui/showcase 19.3.8-snapshot-1762158561167 → 19.3.8-snapshot-1762245120154

package/fesm2022/eui-showcase.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, Directive, booleanAttribute, HostBinding, Input, ViewEncapsulation, Component, ViewChild, forwardRef, ContentChildren, ContentChild, input, ElementRef, HostListener, SecurityContext, NgModule } from '@angular/core';
+import { inject, Injectable, signal, input, ElementRef, Renderer2, effect, Directive, booleanAttribute, HostBinding, Input, ViewEncapsulation, Component, ViewChild, forwardRef, ContentChildren, ContentChild, HostListener, SecurityContext, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@eui/components/eui-card';
@@ -549,16 +549,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }] });
 
 class EuiCodeHighlighterDirective {
-    constructor(el) {
-        this.el = el;
+    constructor() {
+        this.code = input();
+        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: "19.2.14", ngImport: i0, type: EuiCodeHighlighterDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EuiCodeHighlighterDirective, isStandalone: false, selector: "[euiCode]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EuiCodeHighlighterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: EuiCodeHighlighterDirective, isStandalone: false, selector: "[euiCode]", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EuiCodeHighlighterDirective, decorators: [{
             type: Directive,
@@ -566,7 +578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     selector: '[euiCode]',
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+        }], ctorParameters: () => [] });
 
 class DocSampleComponent {
     constructor(sb, _http, asService, cd, growlService, clipboard, router, conf) {
@@ -738,7 +750,7 @@ class DocSampleComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocSampleComponent, deps: [{ token: StackblitzService }, { token: i2.HttpClient }, { token: i3.EuiAppShellService }, { token: i0.ChangeDetectorRef }, { token: i3.EuiGrowlService }, { token: i4.Clipboard }, { token: i1.Router }, { token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.14", type: DocSampleComponent, isStandalone: false, 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=\"link\" set=\"outline\" size=\"l\" fillColor=\"neutral\"></eui-icon-svg>\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=\"flash:outline\"></eui-icon-svg>\n        </button>\n    </div>\n    <div class=\"doc-sample-title__items\">\n        <button\n            *ngIf=\"isCodeButtonVisible\"\n            type=\"button\"\n            euiButton\n            [euiOutline]=\"!isCodeExpanded\"\n            euiPrimary\n            euiSizeS\n            (click)=\"onToggleCode()\"\n            [euiDisabled]=\"isCodeLoading\">\n            <eui-icon-svg *ngIf=\"isCodeLoading\" isLoading></eui-icon-svg>\n            <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n            <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n            <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n        </button>\n    </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-card euiNoContentPadding>\n        <eui-card-content>\n            <eui-tabs (tabSelect)=\"onSelectedTab($event)\">\n                <eui-tab [isVisible]=\"htmlContent\">\n                    <euiTabLabel>\n                        HTML\n                        <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n                <eui-tab [isVisible]=\"tsContent\">\n                    <euiTabLabel>\n                        TS\n                        <euiTabSubLabel>Typescript</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n            </eui-tabs>\n        </eui-card-content>\n    </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-2xl);margin-top:var(--eui-s-6xl);width:100%}.eui-showcase-doc-sample:first-child{margin-top:var(--eui-s-xl)}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-s);border-bottom:1px solid var(--eui-c-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-3xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-primary-darker);font:var(--eui-f-l)!important}.eui-showcase-doc-sample .doc-sample-section-title:first-child,.eui-showcase-doc-sample h6.section-title:first-child{margin-top:var(--eui-s-m)!important}.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-darker);font:var(--eui-f-m)!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i2$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i3$1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i10.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i10.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "isHandleCloseOnClose"] }, { kind: "component", type: i10.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i10.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i10.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i4$1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: 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: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.14", type: DocSampleComponent, isStandalone: false, 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=\"link\" set=\"outline\" size=\"l\" fillColor=\"neutral\"></eui-icon-svg>\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=\"flash:outline\"></eui-icon-svg>\n        </button>\n    </div>\n    <div class=\"doc-sample-title__items\">\n        <button\n            *ngIf=\"isCodeButtonVisible\"\n            type=\"button\"\n            euiButton\n            [euiOutline]=\"!isCodeExpanded\"\n            euiPrimary\n            euiSizeS\n            (click)=\"onToggleCode()\"\n            [euiDisabled]=\"isCodeLoading\">\n            <eui-icon-svg *ngIf=\"isCodeLoading\" isLoading></eui-icon-svg>\n            <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n            <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n            <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n        </button>\n    </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-card euiNoContentPadding>\n        <eui-card-content>\n            <eui-tabs (tabSelect)=\"onSelectedTab($event)\">\n                <eui-tab [isVisible]=\"htmlContent\">\n                    <euiTabLabel>\n                        HTML\n                        <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n                <eui-tab [isVisible]=\"tsContent\">\n                    <euiTabLabel>\n                        TS\n                        <euiTabSubLabel>Typescript</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n            </eui-tabs>\n        </eui-card-content>\n    </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-2xl);margin-top:var(--eui-s-6xl);width:100%}.eui-showcase-doc-sample:first-child{margin-top:var(--eui-s-xl)}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-s);border-bottom:1px solid var(--eui-c-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-3xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-primary-darker);font:var(--eui-f-l)!important}.eui-showcase-doc-sample .doc-sample-section-title:first-child,.eui-showcase-doc-sample h6.section-title:first-child{margin-top:var(--eui-s-m)!important}.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-darker);font:var(--eui-f-m)!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i2$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i3$1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i10.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i10.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "isHandleCloseOnClose"] }, { kind: "component", type: i10.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i10.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i10.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i4$1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: 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: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocSampleComponent, decorators: [{
             type: Component,
@@ -1133,7 +1145,7 @@ class DocPageComponent {
         return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocPageComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i3.EuiAppShellService }, { token: i3$2.DomSanitizer }, { token: i1$1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocPageComponent, isStandalone: false, 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\" (tabSelect)=\"onTabSelected($event)\">\n                        <eui-tab>\n                            <euiTabLabel> OPTIONS & SAMPLES </euiTabLabel>\n                            <euiTabContent>\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                            </euiTabContent>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"hasApi\">\n                            <euiTabLabel> API </euiTabLabel>\n                            <euiTabContent>\n                                <ng-container *ngIf=\"apiUrlSafe\">\n                                    <div class=\"flex-container\">\n                                        <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n                                    </div>\n                                    <div class=\"doc-page-api-iframe-wrapper\">\n                                        <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n                                    </div>\n                                </ng-container>\n                            </euiTabContent>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"hasA11y\">\n                            <euiTabLabel> A11Y </euiTabLabel>\n                            <euiTabContent>\n                                <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n                                <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n                                    <ng-content select=\"docPageAccessibility\"></ng-content>\n                                    <p>\n                                        For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n                                    </p>\n                                </ng-container>\n                                <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n                                    No accessibility rules applicable\n                                </ng-container>\n                            </euiTabContent>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n                            <euiTabLabel> THEMING </euiTabLabel>\n                            <euiTabContent>\n                                <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n                                <ng-content select=\"docPageTheming\"></ng-content>\n                            </euiTabContent>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n                            <euiTabLabel>\n                                {{ pageInteractiveContent.first.title }}\n                            </euiTabLabel>\n                            <euiTabContent>\n                                <div id=\"interactive\" class=\"doc-page-section-title\">\n                                    {{ pageInteractiveContent.first.subTitle }}\n                                </div>\n                                <ng-content select=\"docPageInteractive\"></ng-content>\n                            </euiTabContent>\n                        </eui-tab>\n                    </eui-tabs>\n\n                    <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                        <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n                        <ng-content select=\"docPageSections\"></ng-content>\n                    </ng-container>\n\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-darker);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs);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-darker);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-s-secondary-surface-light);border-left:2px solid var(--eui-c-primary-darker)}.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-s-secondary-surface-light);border-left:2px solid var(--eui-c-s-secondary-border-lighter)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-bg);border-left:2px solid var(--eui-c-primary-darker)}.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-2xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary-darker);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-2xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-2xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-darkest);font:var(--eui-f-3xl)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-darker);margin-top:var(--eui-s-xl);font:var(--eui-f-xl)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-dark);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-m);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-lightest);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-s-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-s-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-s-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-s-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-s-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-s-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i10.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "isHandleCloseOnClose"] }, { kind: "component", type: i10.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i10.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i6.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i6.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: i6.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i6.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i6.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i6.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i6.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i8.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["ariaDescribedBy", "e2eAttr", "isMuted", "isBordered", "isCloseable", "isFocusable", "isVisible"], outputs: ["closeAlert"] }, { kind: "component", type: i8.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocPageComponent, isStandalone: false, 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\" (tabSelect)=\"onTabSelected($event)\">\n                        <eui-tab>\n                            <euiTabLabel> OPTIONS & SAMPLES </euiTabLabel>\n                            <euiTabContent>\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                            </euiTabContent>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"hasApi\">\n                            <euiTabLabel> API </euiTabLabel>\n                            <euiTabContent>\n                                <ng-container *ngIf=\"apiUrlSafe\">\n                                    <div class=\"flex-container\">\n                                        <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n                                    </div>\n                                    <div class=\"doc-page-api-iframe-wrapper\">\n                                        <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n                                    </div>\n                                </ng-container>\n                            </euiTabContent>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"hasA11y\">\n                            <euiTabLabel> A11Y </euiTabLabel>\n                            <euiTabContent>\n                                <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n                                <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n                                    <ng-content select=\"docPageAccessibility\"></ng-content>\n                                    <p>\n                                        For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n                                    </p>\n                                </ng-container>\n                                <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n                                    No accessibility rules applicable\n                                </ng-container>\n                            </euiTabContent>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n                            <euiTabLabel> THEMING </euiTabLabel>\n                            <euiTabContent>\n                                <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n                                <ng-content select=\"docPageTheming\"></ng-content>\n                            </euiTabContent>\n                        </eui-tab>\n\n                        <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n                            <euiTabLabel>\n                                {{ pageInteractiveContent.first.title }}\n                            </euiTabLabel>\n                            <euiTabContent>\n                                <div id=\"interactive\" class=\"doc-page-section-title\">\n                                    {{ pageInteractiveContent.first.subTitle }}\n                                </div>\n                                <ng-content select=\"docPageInteractive\"></ng-content>\n                            </euiTabContent>\n                        </eui-tab>\n                    </eui-tabs>\n\n                    <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                        <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n                        <ng-content select=\"docPageSections\"></ng-content>\n                    </ng-container>\n\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-darker);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs);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-darker);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-s-secondary-surface-light);border-left:2px solid var(--eui-c-primary-darker)}.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-s-secondary-surface-light);border-left:2px solid var(--eui-c-s-secondary-border-lighter)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-bg);border-left:2px solid var(--eui-c-primary-darker)}.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-2xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary-darker);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-2xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-2xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-darkest);font:var(--eui-f-3xl)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-darker);margin-top:var(--eui-s-xl);font:var(--eui-f-xl)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-dark);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-m);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-lightest);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-s-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-s-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-s-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-s-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-s-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-s-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i10.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "isHandleCloseOnClose"] }, { kind: "component", type: i10.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i10.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i6.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i6.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: i6.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i6.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i6.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i6.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i6.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i8.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["ariaDescribedBy", "e2eAttr", "isMuted", "isBordered", "isCloseable", "isFocusable", "isVisible"], outputs: ["closeAlert"] }, { kind: "component", type: i8.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocPageComponent, decorators: [{
             type: Component,
@@ -1295,7 +1307,7 @@ class DocSectionCodeComponent {
         return object;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocSectionCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocSectionCodeComponent, isStandalone: false, selector: "eui-showcase-doc-section-code", inputs: { label: "label", content: "content", styleClass: "styleClass", versionLabel: "versionLabel", isDeprecated: "isDeprecated", isCodeExpanded: "isCodeExpanded" }, queries: [{ propertyName: "sectionDescription", first: true, predicate: i0.forwardRef(() => DocSectionCodeDescriptionTagDirective), descendants: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i0.forwardRef(() => DocSectionCodeHtmlTagDirective), descendants: true }, { propertyName: "sectionCodeTS", first: true, predicate: i0.forwardRef(() => DocSectionCodeTsTagDirective), descendants: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i0.forwardRef(() => DocSectionCodeServiceTagDirective), descendants: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i0.forwardRef(() => DocSectionCodeCssTagDirective), descendants: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i0.forwardRef(() => DocSectionCodeDocTagDirective), descendants: true }], ngImport: i0, template: "<h5 class=\"section-title {{ styleClass }}\">\n    <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n        <div [class.app-section-code--deprecated]=\"isDeprecated\">\n            {{ label }}\n        </div>\n        <div class=\"ml-auto\">\n            <span *ngIf=\"versionLabel\" class=\"eui-u-color-danger\">{{ versionLabel }}</span>\n            <button type=\"button\" euiButton [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n                <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n                <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n                <span euiIcon iconClass=\"eui-icon-code\"></span>\n            </button>\n        </div>\n    </div>\n    <div *ngIf=\"isDeprecated\">\n        <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n    </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n    <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-tabs>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeHTML)\">\n            <euiTabLabel>\n                HTML\n                <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeTS)\">\n            <euiTabLabel>\n                TS\n                <euiTabSubLabel>Typescript</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE)\">\n            <euiTabLabel>Service</euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeCSS)\">\n            <euiTabLabel>CSS</euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeDOC)\">\n            <euiTabLabel>\n                DOC\n                <euiTabSubLabel>Documentation</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <div class=\"language-doc\">\n                    <ng-content select=\"sectionCodeDOC\"></ng-content>\n                </div>\n            </euiTabContent>\n        </eui-tab>\n    </eui-tabs>\n    <ng-template [ngIf]=\"!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS\">\n        <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content></ng-content></code></pre>\n    </ng-template>\n</ng-template>\n", styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i10.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i10.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "isHandleCloseOnClose"] }, { kind: "component", type: i10.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i10.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i10.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { 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: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocSectionCodeComponent, isStandalone: false, selector: "eui-showcase-doc-section-code", inputs: { label: "label", content: "content", styleClass: "styleClass", versionLabel: "versionLabel", isDeprecated: "isDeprecated", isCodeExpanded: "isCodeExpanded" }, queries: [{ propertyName: "sectionDescription", first: true, predicate: i0.forwardRef(() => DocSectionCodeDescriptionTagDirective), descendants: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i0.forwardRef(() => DocSectionCodeHtmlTagDirective), descendants: true }, { propertyName: "sectionCodeTS", first: true, predicate: i0.forwardRef(() => DocSectionCodeTsTagDirective), descendants: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i0.forwardRef(() => DocSectionCodeServiceTagDirective), descendants: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i0.forwardRef(() => DocSectionCodeCssTagDirective), descendants: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i0.forwardRef(() => DocSectionCodeDocTagDirective), descendants: true }], ngImport: i0, template: "<h5 class=\"section-title {{ styleClass }}\">\n    <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n        <div [class.app-section-code--deprecated]=\"isDeprecated\">\n            {{ label }}\n        </div>\n        <div class=\"ml-auto\">\n            <span *ngIf=\"versionLabel\" class=\"eui-u-color-danger\">{{ versionLabel }}</span>\n            <button type=\"button\" euiButton [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n                <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n                <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n                <span euiIcon iconClass=\"eui-icon-code\"></span>\n            </button>\n        </div>\n    </div>\n    <div *ngIf=\"isDeprecated\">\n        <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n    </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n    <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-tabs>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeHTML)\">\n            <euiTabLabel>\n                HTML\n                <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeTS)\">\n            <euiTabLabel>\n                TS\n                <euiTabSubLabel>Typescript</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE)\">\n            <euiTabLabel>Service</euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeCSS)\">\n            <euiTabLabel>CSS</euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeDOC)\">\n            <euiTabLabel>\n                DOC\n                <euiTabSubLabel>Documentation</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <div class=\"language-doc\">\n                    <ng-content select=\"sectionCodeDOC\"></ng-content>\n                </div>\n            </euiTabContent>\n        </eui-tab>\n    </eui-tabs>\n    <ng-template [ngIf]=\"!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS\">\n        <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content></ng-content></code></pre>\n    </ng-template>\n</ng-template>\n", styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i10.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i10.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "isHandleCloseOnClose"] }, { kind: "component", type: i10.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i10.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i10.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { 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: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocSectionCodeComponent, decorators: [{
             type: Component,