@eui/showcase 18.0.0-rc.21 → 18.0.0-rc.23

package/esm2022/lib/eui-showcase.module.mjs

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, SecurityContext } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { EuiCardModule } from '@eui/components/eui-card';
 import { EuiButtonModule } from '@eui/components/eui-button';
@@ -22,10 +22,14 @@ import { DocPageCodeFabComponent, LoremIpsumSampleComponent, PlaygroundComponent
 import { DocPagePatternComponent, DocPagePatternDocDirective, DocPagePatternSampleDirective, } from './components/doc-page-pattern/doc-page-pattern.component';
 import { DocPageCodeModalComponent } from './components/doc-page-code-modal/doc-page-code-modal.component';
 import { StackblitzService } from './components/playground/stackblitz.service';
+import { DocPageDevGuideComponent } from './components/doc-page/doc-page-dev-guide.component';
+import { MarkdownModule } from 'ngx-markdown';
 import * as i0 from "@angular/core";
+import * as i1 from "ngx-markdown";
 const COMPONENTS = [
     EuiCodeHighlighterDirective,
     DocPageComponent,
+    DocPageDevGuideComponent,
     DocPageCodeComponent,
     DocPageCodeFabComponent,
     DocPageCodeModalComponent,
@@ -57,6 +61,7 @@ export class EuiShowcaseModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiShowcaseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: EuiShowcaseModule, declarations: [EuiCodeHighlighterDirective,
             DocPageComponent,
+            DocPageDevGuideComponent,
             DocPageCodeComponent,
             DocPageCodeFabComponent,
             DocPageCodeModalComponent,
@@ -93,8 +98,9 @@ export class EuiShowcaseModule {
             EuiBlockContentModule,
             EuiBadgeModule,
             EuiIconModule,
-            EuiLabelModule], exports: [EuiCodeHighlighterDirective,
+            EuiLabelModule, i1.MarkdownModule], exports: [EuiCodeHighlighterDirective,
             DocPageComponent,
+            DocPageDevGuideComponent,
             DocPageCodeComponent,
             DocPageCodeFabComponent,
             DocPageCodeModalComponent,
@@ -132,7 +138,8 @@ export class EuiShowcaseModule {
             EuiBlockContentModule,
             EuiBadgeModule,
             EuiIconModule,
-            EuiLabelModule] }); }
+            EuiLabelModule,
+            MarkdownModule.forRoot({ sanitize: SecurityContext.NONE })] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiShowcaseModule, decorators: [{
             type: NgModule,
@@ -151,9 +158,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                         EuiBadgeModule,
                         EuiIconModule,
                         EuiLabelModule,
+                        MarkdownModule.forRoot({ sanitize: SecurityContext.NONE }),
                     ],
                     exports: [...COMPONENTS],
                     providers: [StackblitzService],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXVpLXNob3djYXNlLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvZXVpLXNob3djYXNlLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUUvQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDekQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQzdELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDekQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3pELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUM3RCxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDM0QsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDMUUsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzNELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFFM0QsT0FBTyxFQUNILGdCQUFnQixFQUNoQiwrQkFBK0IsRUFDL0Isc0NBQXNDLEVBQ3RDLDhCQUE4QixFQUM5QiwwQkFBMEIsRUFDMUIsa0NBQWtDLEVBQ2xDLCtCQUErQixFQUMvQixvQ0FBb0MsRUFDcEMsOEJBQThCLEdBQ2pDLE1BQU0sMENBQTBDLENBQUM7QUFDbEQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sOENBQThDLENBQUM7QUFDbEYsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sc0RBQXNELENBQUM7QUFDN0YsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0RBQWdELENBQUM7QUFDckYsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sb0RBQW9ELENBQUM7QUFFMUYsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sa0VBQWtFLENBQUM7QUFDL0csT0FBTyxFQUNILHVCQUF1QixFQUN2Qiw4QkFBOEIsRUFDOUIsNEJBQTRCLEVBQzVCLGlDQUFpQyxFQUNqQyw2QkFBNkIsRUFDN0IsNkJBQTZCLEVBQzdCLHFDQUFxQyxHQUN4QyxNQUFNLDBEQUEwRCxDQUFDO0FBQ2xFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSx5QkFBeUIsRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGNBQWMsQ0FBQztBQUN2RyxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLDBCQUEwQixFQUMxQiw2QkFBNkIsR0FDaEMsTUFBTSwwREFBMEQsQ0FBQztBQUNsRSxPQUFPLEVBQUUseUJBQXlCLEVBQUUsTUFBTSxnRUFBZ0UsQ0FBQztBQUMzRyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQzs7QUFFL0UsTUFBTSxVQUFVLEdBQUc7SUFDZiwyQkFBMkI7SUFDM0IsZ0JBQWdCO0lBQ2hCLG9CQUFvQjtJQUNwQix1QkFBdUI7SUFDdkIseUJBQXlCO0lBQ3pCLCtCQUErQjtJQUMvQixzQ0FBc0M7SUFDdEMsMEJBQTBCO0lBQzFCLGtDQUFrQztJQUNsQyw4QkFBOEI7SUFDOUIsK0JBQStCO0lBQy9CLG9DQUFvQztJQUNwQyw4QkFBOEI7SUFDOUIsa0JBQWtCO0lBQ2xCLHFCQUFxQjtJQUNyQixtQkFBbUI7SUFDbkIsdUJBQXVCO0lBQ3ZCLDhCQUE4QjtJQUM5Qiw0QkFBNEI7SUFDNUIsaUNBQWlDO0lBQ2pDLDZCQUE2QjtJQUM3Qiw2QkFBNkI7SUFDN0IscUNBQXFDO0lBQ3JDLHlCQUF5QjtJQUN6QixtQkFBbUI7SUFDbkIsdUJBQXVCO0lBQ3ZCLDBCQUEwQjtJQUMxQiw2QkFBNkI7Q0FDaEMsQ0FBQztBQXFCRixNQUFNLE9BQU8saUJBQWlCOzhHQUFqQixpQkFBaUI7K0dBQWpCLGlCQUFpQixpQkFqRDFCLDJCQUEyQjtZQUMzQixnQkFBZ0I7WUFDaEIsb0JBQW9CO1lBQ3BCLHVCQUF1QjtZQUN2Qix5QkFBeUI7WUFDekIsK0JBQStCO1lBQy9CLHNDQUFzQztZQUN0QywwQkFBMEI7WUFDMUIsa0NBQWtDO1lBQ2xDLDhCQUE4QjtZQUM5QiwrQkFBK0I7WUFDL0Isb0NBQW9DO1lBQ3BDLDhCQUE4QjtZQUM5QixrQkFBa0I7WUFDbEIscUJBQXFCO1lBQ3JCLG1CQUFtQjtZQUNuQix1QkFBdUI7WUFDdkIsOEJBQThCO1lBQzlCLDRCQUE0QjtZQUM1QixpQ0FBaUM7WUFDakMsNkJBQTZCO1lBQzdCLDZCQUE2QjtZQUM3QixxQ0FBcUM7WUFDckMseUJBQXlCO1lBQ3pCLG1CQUFtQjtZQUNuQix1QkFBdUI7WUFDdkIsMEJBQTBCO1lBQzFCLDZCQUE2QixhQU16QixZQUFZO1lBQ1osYUFBYTtZQUNiLGVBQWU7WUFDZixhQUFhO1lBQ2IsYUFBYTtZQUNiLGFBQWE7WUFDYixlQUFlO1lBQ2YsY0FBYztZQUNkLHFCQUFxQjtZQUNyQixjQUFjO1lBQ2QsYUFBYTtZQUNiLGNBQWMsYUE1Q2xCLDJCQUEyQjtZQUMzQixnQkFBZ0I7WUFDaEIsb0JBQW9CO1lBQ3BCLHVCQUF1QjtZQUN2Qix5QkFBeUI7WUFDekIsK0JBQStCO1lBQy9CLHNDQUFzQztZQUN0QywwQkFBMEI7WUFDMUIsa0NBQWtDO1lBQ2xDLDhCQUE4QjtZQUM5QiwrQkFBK0I7WUFDL0Isb0NBQW9DO1lBQ3BDLDhCQUE4QjtZQUM5QixrQkFBa0I7WUFDbEIscUJBQXFCO1lBQ3JCLG1CQUFtQjtZQUNuQix1QkFBdUI7WUFDdkIsOEJBQThCO1lBQzlCLDRCQUE0QjtZQUM1QixpQ0FBaUM7WUFDakMsNkJBQTZCO1lBQzdCLDZCQUE2QjtZQUM3QixxQ0FBcUM7WUFDckMseUJBQXlCO1lBQ3pCLG1CQUFtQjtZQUNuQix1QkFBdUI7WUFDdkIsMEJBQTBCO1lBQzFCLDZCQUE2QjsrR0FzQnBCLGlCQUFpQixhQUZmLENBQUMsaUJBQWlCLENBQUMsWUFkMUIsWUFBWTtZQUNaLGFBQWE7WUFDYixlQUFlO1lBQ2YsYUFBYTtZQUNiLGFBQWE7WUFDYixhQUFhO1lBQ2IsZUFBZTtZQUNmLGNBQWM7WUFDZCxxQkFBcUI7WUFDckIsY0FBYztZQUNkLGFBQWE7WUFDYixjQUFjOzsyRkFLVCxpQkFBaUI7a0JBbkI3QixRQUFRO21CQUFDO29CQUNOLFlBQVksRUFBRSxDQUFDLEdBQUcsVUFBVSxDQUFDO29CQUM3QixPQUFPLEVBQUU7d0JBQ0wsWUFBWTt3QkFDWixhQUFhO3dCQUNiLGVBQWU7d0JBQ2YsYUFBYTt3QkFDYixhQUFhO3dCQUNiLGFBQWE7d0JBQ2IsZUFBZTt3QkFDZixjQUFjO3dCQUNkLHFCQUFxQjt3QkFDckIsY0FBYzt3QkFDZCxhQUFhO3dCQUNiLGNBQWM7cUJBQ2pCO29CQUNELE9BQU8sRUFBRSxDQUFDLEdBQUcsVUFBVSxDQUFDO29CQUN4QixTQUFTLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQztpQkFDakMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxuaW1wb3J0IHsgRXVpQ2FyZE1vZHVsZSB9IGZyb20gJ0BldWkvY29tcG9uZW50cy9ldWktY2FyZCc7XG5pbXBvcnQgeyBFdWlCdXR0b25Nb2R1bGUgfSBmcm9tICdAZXVpL2NvbXBvbmVudHMvZXVpLWJ1dHRvbic7XG5pbXBvcnQgeyBFdWlUYWJzTW9kdWxlIH0gZnJvbSAnQGV1aS9jb21wb25lbnRzL2V1aS10YWJzJztcbmltcG9ydCB7IEV1aVBhZ2VNb2R1bGUgfSBmcm9tICdAZXVpL2NvbXBvbmVudHMvZXVpLXBhZ2UnO1xuaW1wb3J0IHsgRXVpQ2hpcE1vZHVsZSB9IGZyb20gJ0BldWkvY29tcG9uZW50cy9ldWktY2hpcCc7XG5pbXBvcnQgeyBFdWlEaWFsb2dNb2R1bGUgfSBmcm9tICdAZXVpL2NvbXBvbmVudHMvZXVpLWRpYWxvZyc7XG5pbXBvcnQgeyBFdWlBbGVydE1vZHVsZSB9IGZyb20gJ0BldWkvY29tcG9uZW50cy9ldWktYWxlcnQnO1xuaW1wb3J0IHsgRXVpQmxvY2tDb250ZW50TW9kdWxlIH0gZnJvbSAnQGV1aS9jb21wb25lbnRzL2V1aS1ibG9jay1jb250ZW50JztcbmltcG9ydCB7IEV1aUJhZGdlTW9kdWxlIH0gZnJvbSAnQGV1aS9jb21wb25lbnRzL2V1aS1iYWRnZSc7XG5pbXBvcnQgeyBFdWlJY29uTW9kdWxlIH0gZnJvbSAnQGV1aS9jb21wb25lbnRzL2V1aS1pY29uJztcbmltcG9ydCB7IEV1aUxhYmVsTW9kdWxlIH0gZnJvbSAnQGV1aS9jb21wb25lbnRzL2V1aS1sYWJlbCc7XG5cbmltcG9ydCB7XG4gICAgRG9jUGFnZUNvbXBvbmVudCxcbiAgICBEb2NQYWdlT3ZlcnZpZXdDb250ZW50RGlyZWN0aXZlLFxuICAgIERvY1BhZ2VPdmVydmlld0RlZmF1bHRDb250ZW50RGlyZWN0aXZlLFxuICAgIERvY1BhZ2VTYW1wbGVzQ29udGVudERpcmVjdGl2ZSxcbiAgICBEb2NQYWdlQXBpQ29udGVudERpcmVjdGl2ZSxcbiAgICBEb2NQYWdlSW50ZXJhY3RpdmVDb250ZW50RGlyZWN0aXZlLFxuICAgIERvY1BhZ2VTZWN0aW9uc0NvbnRlbnREaXJlY3RpdmUsXG4gICAgRG9jUGFnZUFjY2Vzc2liaWxpdHlDb250ZW50RGlyZWN0aXZlLFxuICAgIERvY1BhZ2VUaGVtaW5nQ29udGVudERpcmVjdGl2ZSxcbn0gZnJvbSAnLi9jb21wb25lbnRzL2RvYy1wYWdlL2RvYy1wYWdlLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEb2NTYW1wbGVDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvZG9jLXNhbXBsZS9kb2Mtc2FtcGxlLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEb2NTYW1wbGVBcGlDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvZG9jLXNhbXBsZS1hcGkvZG9jLXNhbXBsZS1hcGkuY29tcG9uZW50JztcbmltcG9ydCB7IERvY1NlY3Rpb25Db21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvZG9jLXNlY3Rpb24vZG9jLXNlY3Rpb24uY29tcG9uZW50JztcbmltcG9ydCB7IERvY1BhZ2VDb2RlQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2RvYy1wYWdlLWNvZGUvZG9jLXBhZ2UtY29kZS5jb21wb25lbnQnO1xuXG5pbXBvcnQgeyBFdWlDb2RlSGlnaGxpZ2h0ZXJEaXJlY3RpdmUgfSBmcm9tICcuL2NvbXBvbmVudHMvZXVpLWNvZGUtaGlnaGxpZ2h0ZXIvZXVpLWNvZGUtaGlnaGxpZ2h0ZXIuY29tcG9uZW50JztcbmltcG9ydCB7XG4gICAgRG9jU2VjdGlvbkNvZGVDb21wb25lbnQsXG4gICAgRG9jU2VjdGlvbkNvZGVIdG1sVGFnRGlyZWN0aXZlLFxuICAgIERvY1NlY3Rpb25Db2RlVHNUYWdEaXJlY3RpdmUsXG4gICAgRG9jU2VjdGlvbkNvZGVTZXJ2aWNlVGFnRGlyZWN0aXZlLFxuICAgIERvY1NlY3Rpb25Db2RlQ3NzVGFnRGlyZWN0aXZlLFxuICAgIERvY1NlY3Rpb25Db2RlRG9jVGFnRGlyZWN0aXZlLFxuICAgIERvY1NlY3Rpb25Db2RlRGVzY3JpcHRpb25UYWdEaXJlY3RpdmUsXG59IGZyb20gJy4vY29tcG9uZW50cy9kb2Mtc2VjdGlvbi1jb2RlL2RvYy1zZWN0aW9uLWNvZGUuY29tcG9uZW50JztcbmltcG9ydCB7IERvY1BhZ2VDb2RlRmFiQ29tcG9uZW50LCBMb3JlbUlwc3VtU2FtcGxlQ29tcG9uZW50LCBQbGF5Z3JvdW5kQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzJztcbmltcG9ydCB7XG4gICAgRG9jUGFnZVBhdHRlcm5Db21wb25lbnQsXG4gICAgRG9jUGFnZVBhdHRlcm5Eb2NEaXJlY3RpdmUsXG4gICAgRG9jUGFnZVBhdHRlcm5TYW1wbGVEaXJlY3RpdmUsXG59IGZyb20gJy4vY29tcG9uZW50cy9kb2MtcGFnZS1wYXR0ZXJuL2RvYy1wYWdlLXBhdHRlcm4uY29tcG9uZW50JztcbmltcG9ydCB7IERvY1BhZ2VDb2RlTW9kYWxDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvZG9jLXBhZ2UtY29kZS1tb2RhbC9kb2MtcGFnZS1jb2RlLW1vZGFsLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBTdGFja2JsaXR6U2VydmljZSB9IGZyb20gJy4vY29tcG9uZW50cy9wbGF5Z3JvdW5kL3N0YWNrYmxpdHouc2VydmljZSc7XG5cbmNvbnN0IENPTVBPTkVOVFMgPSBbXG4gICAgRXVpQ29kZUhpZ2hsaWdodGVyRGlyZWN0aXZlLFxuICAgIERvY1BhZ2VDb21wb25lbnQsXG4gICAgRG9jUGFnZUNvZGVDb21wb25lbnQsXG4gICAgRG9jUGFnZUNvZGVGYWJDb21wb25lbnQsXG4gICAgRG9jUGFnZUNvZGVNb2RhbENvbXBvbmVudCxcbiAgICBEb2NQYWdlT3ZlcnZpZXdDb250ZW50RGlyZWN0aXZlLFxuICAgIERvY1BhZ2VPdmVydmlld0RlZmF1bHRDb250ZW50RGlyZWN0aXZlLFxuICAgIERvY1BhZ2VBcGlDb250ZW50RGlyZWN0aXZlLFxuICAgIERvY1BhZ2VJbnRlcmFjdGl2ZUNvbnRlbnREaXJlY3RpdmUsXG4gICAgRG9jUGFnZVNhbXBsZXNDb250ZW50RGlyZWN0aXZlLFxuICAgIERvY1BhZ2VTZWN0aW9uc0NvbnRlbnREaXJlY3RpdmUsXG4gICAgRG9jUGFnZUFjY2Vzc2liaWxpdHlDb250ZW50RGlyZWN0aXZlLFxuICAgIERvY1BhZ2VUaGVtaW5nQ29udGVudERpcmVjdGl2ZSxcbiAgICBEb2NTYW1wbGVDb21wb25lbnQsXG4gICAgRG9jU2FtcGxlQXBpQ29tcG9uZW50LFxuICAgIERvY1NlY3Rpb25Db21wb25lbnQsXG4gICAgRG9jU2VjdGlvbkNvZGVDb21wb25lbnQsXG4gICAgRG9jU2VjdGlvbkNvZGVIdG1sVGFnRGlyZWN0aXZlLFxuICAgIERvY1NlY3Rpb25Db2RlVHNUYWdEaXJlY3RpdmUsXG4gICAgRG9jU2VjdGlvbkNvZGVTZXJ2aWNlVGFnRGlyZWN0aXZlLFxuICAgIERvY1NlY3Rpb25Db2RlQ3NzVGFnRGlyZWN0aXZlLFxuICAgIERvY1NlY3Rpb25Db2RlRG9jVGFnRGlyZWN0aXZlLFxuICAgIERvY1NlY3Rpb25Db2RlRGVzY3JpcHRpb25UYWdEaXJlY3RpdmUsXG4gICAgTG9yZW1JcHN1bVNhbXBsZUNvbXBvbmVudCxcbiAgICBQbGF5Z3JvdW5kQ29tcG9uZW50LFxuICAgIERvY1BhZ2VQYXR0ZXJuQ29tcG9uZW50LFxuICAgIERvY1BhZ2VQYXR0ZXJuRG9jRGlyZWN0aXZlLFxuICAgIERvY1BhZ2VQYXR0ZXJuU2FtcGxlRGlyZWN0aXZlLFxuXTtcblxuQE5nTW9kdWxlKHtcbiAgICBkZWNsYXJhdGlvbnM6IFsuLi5DT01QT05FTlRTXSxcbiAgICBpbXBvcnRzOiBbXG4gICAgICAgIENvbW1vbk1vZHVsZSxcbiAgICAgICAgRXVpQ2FyZE1vZHVsZSxcbiAgICAgICAgRXVpQnV0dG9uTW9kdWxlLFxuICAgICAgICBFdWlUYWJzTW9kdWxlLFxuICAgICAgICBFdWlQYWdlTW9kdWxlLFxuICAgICAgICBFdWlDaGlwTW9kdWxlLFxuICAgICAgICBFdWlEaWFsb2dNb2R1bGUsXG4gICAgICAgIEV1aUFsZXJ0TW9kdWxlLFxuICAgICAgICBFdWlCbG9ja0NvbnRlbnRNb2R1bGUsXG4gICAgICAgIEV1aUJhZGdlTW9kdWxlLFxuICAgICAgICBFdWlJY29uTW9kdWxlLFxuICAgICAgICBFdWlMYWJlbE1vZHVsZSxcbiAgICBdLFxuICAgIGV4cG9ydHM6IFsuLi5DT01QT05FTlRTXSxcbiAgICBwcm92aWRlcnM6IFtTdGFja2JsaXR6U2VydmljZV0sXG59KVxuZXhwb3J0IGNsYXNzIEV1aVNob3djYXNlTW9kdWxlIHt9XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXVpLXNob3djYXNlLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvZXVpLXNob3djYXNlLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLGVBQWUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxRCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFL0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3pELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUM3RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDekQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3pELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDN0QsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzNELE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQzFFLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDekQsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBRTNELE9BQU8sRUFDSCxnQkFBZ0IsRUFDaEIsK0JBQStCLEVBQy9CLHNDQUFzQyxFQUN0Qyw4QkFBOEIsRUFDOUIsMEJBQTBCLEVBQzFCLGtDQUFrQyxFQUNsQywrQkFBK0IsRUFDL0Isb0NBQW9DLEVBQ3BDLDhCQUE4QixHQUNqQyxNQUFNLDBDQUEwQyxDQUFDO0FBQ2xELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDhDQUE4QyxDQUFDO0FBQ2xGLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHNEQUFzRCxDQUFDO0FBQzdGLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdEQUFnRCxDQUFDO0FBQ3JGLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLG9EQUFvRCxDQUFDO0FBRTFGLE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxNQUFNLGtFQUFrRSxDQUFDO0FBQy9HLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsOEJBQThCLEVBQzlCLDRCQUE0QixFQUM1QixpQ0FBaUMsRUFDakMsNkJBQTZCLEVBQzdCLDZCQUE2QixFQUM3QixxQ0FBcUMsR0FDeEMsTUFBTSwwREFBMEQsQ0FBQztBQUNsRSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUseUJBQXlCLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDdkcsT0FBTyxFQUNILHVCQUF1QixFQUN2QiwwQkFBMEIsRUFDMUIsNkJBQTZCLEdBQ2hDLE1BQU0sMERBQTBELENBQUM7QUFDbEUsT0FBTyxFQUFFLHlCQUF5QixFQUFFLE1BQU0sZ0VBQWdFLENBQUM7QUFDM0csT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sNENBQTRDLENBQUM7QUFDL0UsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sb0RBQW9ELENBQUM7QUFDOUYsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLGNBQWMsQ0FBQzs7O0FBRTlDLE1BQU0sVUFBVSxHQUFHO0lBQ2YsMkJBQTJCO0lBQzNCLGdCQUFnQjtJQUNoQix3QkFBd0I7SUFDeEIsb0JBQW9CO0lBQ3BCLHVCQUF1QjtJQUN2Qix5QkFBeUI7SUFDekIsK0JBQStCO0lBQy9CLHNDQUFzQztJQUN0QywwQkFBMEI7SUFDMUIsa0NBQWtDO0lBQ2xDLDhCQUE4QjtJQUM5QiwrQkFBK0I7SUFDL0Isb0NBQW9DO0lBQ3BDLDhCQUE4QjtJQUM5QixrQkFBa0I7SUFDbEIscUJBQXFCO0lBQ3JCLG1CQUFtQjtJQUNuQix1QkFBdUI7SUFDdkIsOEJBQThCO0lBQzlCLDRCQUE0QjtJQUM1QixpQ0FBaUM7SUFDakMsNkJBQTZCO0lBQzdCLDZCQUE2QjtJQUM3QixxQ0FBcUM7SUFDckMseUJBQXlCO0lBQ3pCLG1CQUFtQjtJQUNuQix1QkFBdUI7SUFDdkIsMEJBQTBCO0lBQzFCLDZCQUE2QjtDQUNoQyxDQUFDO0FBc0JGLE1BQU0sT0FBTyxpQkFBaUI7OEdBQWpCLGlCQUFpQjsrR0FBakIsaUJBQWlCLGlCQW5EMUIsMkJBQTJCO1lBQzNCLGdCQUFnQjtZQUNoQix3QkFBd0I7WUFDeEIsb0JBQW9CO1lBQ3BCLHVCQUF1QjtZQUN2Qix5QkFBeUI7WUFDekIsK0JBQStCO1lBQy9CLHNDQUFzQztZQUN0QywwQkFBMEI7WUFDMUIsa0NBQWtDO1lBQ2xDLDhCQUE4QjtZQUM5QiwrQkFBK0I7WUFDL0Isb0NBQW9DO1lBQ3BDLDhCQUE4QjtZQUM5QixrQkFBa0I7WUFDbEIscUJBQXFCO1lBQ3JCLG1CQUFtQjtZQUNuQix1QkFBdUI7WUFDdkIsOEJBQThCO1lBQzlCLDRCQUE0QjtZQUM1QixpQ0FBaUM7WUFDakMsNkJBQTZCO1lBQzdCLDZCQUE2QjtZQUM3QixxQ0FBcUM7WUFDckMseUJBQXlCO1lBQ3pCLG1CQUFtQjtZQUNuQix1QkFBdUI7WUFDdkIsMEJBQTBCO1lBQzFCLDZCQUE2QixhQU16QixZQUFZO1lBQ1osYUFBYTtZQUNiLGVBQWU7WUFDZixhQUFhO1lBQ2IsYUFBYTtZQUNiLGFBQWE7WUFDYixlQUFlO1lBQ2YsY0FBYztZQUNkLHFCQUFxQjtZQUNyQixjQUFjO1lBQ2QsYUFBYTtZQUNiLGNBQWMsZ0NBN0NsQiwyQkFBMkI7WUFDM0IsZ0JBQWdCO1lBQ2hCLHdCQUF3QjtZQUN4QixvQkFBb0I7WUFDcEIsdUJBQXVCO1lBQ3ZCLHlCQUF5QjtZQUN6QiwrQkFBK0I7WUFDL0Isc0NBQXNDO1lBQ3RDLDBCQUEwQjtZQUMxQixrQ0FBa0M7WUFDbEMsOEJBQThCO1lBQzlCLCtCQUErQjtZQUMvQixvQ0FBb0M7WUFDcEMsOEJBQThCO1lBQzlCLGtCQUFrQjtZQUNsQixxQkFBcUI7WUFDckIsbUJBQW1CO1lBQ25CLHVCQUF1QjtZQUN2Qiw4QkFBOEI7WUFDOUIsNEJBQTRCO1lBQzVCLGlDQUFpQztZQUNqQyw2QkFBNkI7WUFDN0IsNkJBQTZCO1lBQzdCLHFDQUFxQztZQUNyQyx5QkFBeUI7WUFDekIsbUJBQW1CO1lBQ25CLHVCQUF1QjtZQUN2QiwwQkFBMEI7WUFDMUIsNkJBQTZCOytHQXVCcEIsaUJBQWlCLGFBRmYsQ0FBQyxpQkFBaUIsQ0FBQyxZQWYxQixZQUFZO1lBQ1osYUFBYTtZQUNiLGVBQWU7WUFDZixhQUFhO1lBQ2IsYUFBYTtZQUNiLGFBQWE7WUFDYixlQUFlO1lBQ2YsY0FBYztZQUNkLHFCQUFxQjtZQUNyQixjQUFjO1lBQ2QsYUFBYTtZQUNiLGNBQWM7WUFDZCxjQUFjLENBQUMsT0FBTyxDQUFDLEVBQUUsUUFBUSxFQUFFLGVBQWUsQ0FBQyxJQUFJLEVBQUUsQ0FBQzs7MkZBS3JELGlCQUFpQjtrQkFwQjdCLFFBQVE7bUJBQUM7b0JBQ04sWUFBWSxFQUFFLENBQUMsR0FBRyxVQUFVLENBQUM7b0JBQzdCLE9BQU8sRUFBRTt3QkFDTCxZQUFZO3dCQUNaLGFBQWE7d0JBQ2IsZUFBZTt3QkFDZixhQUFhO3dCQUNiLGFBQWE7d0JBQ2IsYUFBYTt3QkFDYixlQUFlO3dCQUNmLGNBQWM7d0JBQ2QscUJBQXFCO3dCQUNyQixjQUFjO3dCQUNkLGFBQWE7d0JBQ2IsY0FBYzt3QkFDZCxjQUFjLENBQUMsT0FBTyxDQUFDLEVBQUUsUUFBUSxFQUFFLGVBQWUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztxQkFDN0Q7b0JBQ0QsT0FBTyxFQUFFLENBQUMsR0FBRyxVQUFVLENBQUM7b0JBQ3hCLFNBQVMsRUFBRSxDQUFDLGlCQUFpQixDQUFDO2lCQUNqQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlLCBTZWN1cml0eUNvbnRleHQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbmltcG9ydCB7IEV1aUNhcmRNb2R1bGUgfSBmcm9tICdAZXVpL2NvbXBvbmVudHMvZXVpLWNhcmQnO1xuaW1wb3J0IHsgRXVpQnV0dG9uTW9kdWxlIH0gZnJvbSAnQGV1aS9jb21wb25lbnRzL2V1aS1idXR0b24nO1xuaW1wb3J0IHsgRXVpVGFic01vZHVsZSB9IGZyb20gJ0BldWkvY29tcG9uZW50cy9ldWktdGFicyc7XG5pbXBvcnQgeyBFdWlQYWdlTW9kdWxlIH0gZnJvbSAnQGV1aS9jb21wb25lbnRzL2V1aS1wYWdlJztcbmltcG9ydCB7IEV1aUNoaXBNb2R1bGUgfSBmcm9tICdAZXVpL2NvbXBvbmVudHMvZXVpLWNoaXAnO1xuaW1wb3J0IHsgRXVpRGlhbG9nTW9kdWxlIH0gZnJvbSAnQGV1aS9jb21wb25lbnRzL2V1aS1kaWFsb2cnO1xuaW1wb3J0IHsgRXVpQWxlcnRNb2R1bGUgfSBmcm9tICdAZXVpL2NvbXBvbmVudHMvZXVpLWFsZXJ0JztcbmltcG9ydCB7IEV1aUJsb2NrQ29udGVudE1vZHVsZSB9IGZyb20gJ0BldWkvY29tcG9uZW50cy9ldWktYmxvY2stY29udGVudCc7XG5pbXBvcnQgeyBFdWlCYWRnZU1vZHVsZSB9IGZyb20gJ0BldWkvY29tcG9uZW50cy9ldWktYmFkZ2UnO1xuaW1wb3J0IHsgRXVpSWNvbk1vZHVsZSB9IGZyb20gJ0BldWkvY29tcG9uZW50cy9ldWktaWNvbic7XG5pbXBvcnQgeyBFdWlMYWJlbE1vZHVsZSB9IGZyb20gJ0BldWkvY29tcG9uZW50cy9ldWktbGFiZWwnO1xuXG5pbXBvcnQge1xuICAgIERvY1BhZ2VDb21wb25lbnQsXG4gICAgRG9jUGFnZU92ZXJ2aWV3Q29udGVudERpcmVjdGl2ZSxcbiAgICBEb2NQYWdlT3ZlcnZpZXdEZWZhdWx0Q29udGVudERpcmVjdGl2ZSxcbiAgICBEb2NQYWdlU2FtcGxlc0NvbnRlbnREaXJlY3RpdmUsXG4gICAgRG9jUGFnZUFwaUNvbnRlbnREaXJlY3RpdmUsXG4gICAgRG9jUGFnZUludGVyYWN0aXZlQ29udGVudERpcmVjdGl2ZSxcbiAgICBEb2NQYWdlU2VjdGlvbnNDb250ZW50RGlyZWN0aXZlLFxuICAgIERvY1BhZ2VBY2Nlc3NpYmlsaXR5Q29udGVudERpcmVjdGl2ZSxcbiAgICBEb2NQYWdlVGhlbWluZ0NvbnRlbnREaXJlY3RpdmUsXG59IGZyb20gJy4vY29tcG9uZW50cy9kb2MtcGFnZS9kb2MtcGFnZS5jb21wb25lbnQnO1xuaW1wb3J0IHsgRG9jU2FtcGxlQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2RvYy1zYW1wbGUvZG9jLXNhbXBsZS5jb21wb25lbnQnO1xuaW1wb3J0IHsgRG9jU2FtcGxlQXBpQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2RvYy1zYW1wbGUtYXBpL2RvYy1zYW1wbGUtYXBpLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEb2NTZWN0aW9uQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2RvYy1zZWN0aW9uL2RvYy1zZWN0aW9uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEb2NQYWdlQ29kZUNvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9kb2MtcGFnZS1jb2RlL2RvYy1wYWdlLWNvZGUuY29tcG9uZW50JztcblxuaW1wb3J0IHsgRXVpQ29kZUhpZ2hsaWdodGVyRGlyZWN0aXZlIH0gZnJvbSAnLi9jb21wb25lbnRzL2V1aS1jb2RlLWhpZ2hsaWdodGVyL2V1aS1jb2RlLWhpZ2hsaWdodGVyLmNvbXBvbmVudCc7XG5pbXBvcnQge1xuICAgIERvY1NlY3Rpb25Db2RlQ29tcG9uZW50LFxuICAgIERvY1NlY3Rpb25Db2RlSHRtbFRhZ0RpcmVjdGl2ZSxcbiAgICBEb2NTZWN0aW9uQ29kZVRzVGFnRGlyZWN0aXZlLFxuICAgIERvY1NlY3Rpb25Db2RlU2VydmljZVRhZ0RpcmVjdGl2ZSxcbiAgICBEb2NTZWN0aW9uQ29kZUNzc1RhZ0RpcmVjdGl2ZSxcbiAgICBEb2NTZWN0aW9uQ29kZURvY1RhZ0RpcmVjdGl2ZSxcbiAgICBEb2NTZWN0aW9uQ29kZURlc2NyaXB0aW9uVGFnRGlyZWN0aXZlLFxufSBmcm9tICcuL2NvbXBvbmVudHMvZG9jLXNlY3Rpb24tY29kZS9kb2Mtc2VjdGlvbi1jb2RlLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEb2NQYWdlQ29kZUZhYkNvbXBvbmVudCwgTG9yZW1JcHN1bVNhbXBsZUNvbXBvbmVudCwgUGxheWdyb3VuZENvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cyc7XG5pbXBvcnQge1xuICAgIERvY1BhZ2VQYXR0ZXJuQ29tcG9uZW50LFxuICAgIERvY1BhZ2VQYXR0ZXJuRG9jRGlyZWN0aXZlLFxuICAgIERvY1BhZ2VQYXR0ZXJuU2FtcGxlRGlyZWN0aXZlLFxufSBmcm9tICcuL2NvbXBvbmVudHMvZG9jLXBhZ2UtcGF0dGVybi9kb2MtcGFnZS1wYXR0ZXJuLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEb2NQYWdlQ29kZU1vZGFsQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2RvYy1wYWdlLWNvZGUtbW9kYWwvZG9jLXBhZ2UtY29kZS1tb2RhbC5jb21wb25lbnQnO1xuaW1wb3J0IHsgU3RhY2tibGl0elNlcnZpY2UgfSBmcm9tICcuL2NvbXBvbmVudHMvcGxheWdyb3VuZC9zdGFja2JsaXR6LnNlcnZpY2UnO1xuaW1wb3J0IHsgRG9jUGFnZURldkd1aWRlQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2RvYy1wYWdlL2RvYy1wYWdlLWRldi1ndWlkZS5jb21wb25lbnQnO1xuaW1wb3J0IHsgTWFya2Rvd25Nb2R1bGUgfSBmcm9tICduZ3gtbWFya2Rvd24nO1xuXG5jb25zdCBDT01QT05FTlRTID0gW1xuICAgIEV1aUNvZGVIaWdobGlnaHRlckRpcmVjdGl2ZSxcbiAgICBEb2NQYWdlQ29tcG9uZW50LFxuICAgIERvY1BhZ2VEZXZHdWlkZUNvbXBvbmVudCxcbiAgICBEb2NQYWdlQ29kZUNvbXBvbmVudCxcbiAgICBEb2NQYWdlQ29kZUZhYkNvbXBvbmVudCxcbiAgICBEb2NQYWdlQ29kZU1vZGFsQ29tcG9uZW50LFxuICAgIERvY1BhZ2VPdmVydmlld0NvbnRlbnREaXJlY3RpdmUsXG4gICAgRG9jUGFnZU92ZXJ2aWV3RGVmYXVsdENvbnRlbnREaXJlY3RpdmUsXG4gICAgRG9jUGFnZUFwaUNvbnRlbnREaXJlY3RpdmUsXG4gICAgRG9jUGFnZUludGVyYWN0aXZlQ29udGVudERpcmVjdGl2ZSxcbiAgICBEb2NQYWdlU2FtcGxlc0NvbnRlbnREaXJlY3RpdmUsXG4gICAgRG9jUGFnZVNlY3Rpb25zQ29udGVudERpcmVjdGl2ZSxcbiAgICBEb2NQYWdlQWNjZXNzaWJpbGl0eUNvbnRlbnREaXJlY3RpdmUsXG4gICAgRG9jUGFnZVRoZW1pbmdDb250ZW50RGlyZWN0aXZlLFxuICAgIERvY1NhbXBsZUNvbXBvbmVudCxcbiAgICBEb2NTYW1wbGVBcGlDb21wb25lbnQsXG4gICAgRG9jU2VjdGlvbkNvbXBvbmVudCxcbiAgICBEb2NTZWN0aW9uQ29kZUNvbXBvbmVudCxcbiAgICBEb2NTZWN0aW9uQ29kZUh0bWxUYWdEaXJlY3RpdmUsXG4gICAgRG9jU2VjdGlvbkNvZGVUc1RhZ0RpcmVjdGl2ZSxcbiAgICBEb2NTZWN0aW9uQ29kZVNlcnZpY2VUYWdEaXJlY3RpdmUsXG4gICAgRG9jU2VjdGlvbkNvZGVDc3NUYWdEaXJlY3RpdmUsXG4gICAgRG9jU2VjdGlvbkNvZGVEb2NUYWdEaXJlY3RpdmUsXG4gICAgRG9jU2VjdGlvbkNvZGVEZXNjcmlwdGlvblRhZ0RpcmVjdGl2ZSxcbiAgICBMb3JlbUlwc3VtU2FtcGxlQ29tcG9uZW50LFxuICAgIFBsYXlncm91bmRDb21wb25lbnQsXG4gICAgRG9jUGFnZVBhdHRlcm5Db21wb25lbnQsXG4gICAgRG9jUGFnZVBhdHRlcm5Eb2NEaXJlY3RpdmUsXG4gICAgRG9jUGFnZVBhdHRlcm5TYW1wbGVEaXJlY3RpdmUsXG5dO1xuXG5ATmdNb2R1bGUoe1xuICAgIGRlY2xhcmF0aW9uczogWy4uLkNPTVBPTkVOVFNdLFxuICAgIGltcG9ydHM6IFtcbiAgICAgICAgQ29tbW9uTW9kdWxlLFxuICAgICAgICBFdWlDYXJkTW9kdWxlLFxuICAgICAgICBFdWlCdXR0b25Nb2R1bGUsXG4gICAgICAgIEV1aVRhYnNNb2R1bGUsXG4gICAgICAgIEV1aVBhZ2VNb2R1bGUsXG4gICAgICAgIEV1aUNoaXBNb2R1bGUsXG4gICAgICAgIEV1aURpYWxvZ01vZHVsZSxcbiAgICAgICAgRXVpQWxlcnRNb2R1bGUsXG4gICAgICAgIEV1aUJsb2NrQ29udGVudE1vZHVsZSxcbiAgICAgICAgRXVpQmFkZ2VNb2R1bGUsXG4gICAgICAgIEV1aUljb25Nb2R1bGUsXG4gICAgICAgIEV1aUxhYmVsTW9kdWxlLFxuICAgICAgICBNYXJrZG93bk1vZHVsZS5mb3JSb290KHsgc2FuaXRpemU6IFNlY3VyaXR5Q29udGV4dC5OT05FIH0pLFxuICAgIF0sXG4gICAgZXhwb3J0czogWy4uLkNPTVBPTkVOVFNdLFxuICAgIHByb3ZpZGVyczogW1N0YWNrYmxpdHpTZXJ2aWNlXSxcbn0pXG5leHBvcnQgY2xhc3MgRXVpU2hvd2Nhc2VNb2R1bGUge31cbiJdfQ==

package/fesm2022/eui-showcase.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, Directive, booleanAttribute, Component, ViewEncapsulation, Input, HostBinding, ContentChildren, forwardRef, ViewChild, ContentChild, ElementRef, HostListener, NgModule } from '@angular/core';
+import { inject, Injectable, Directive, booleanAttribute, Component, ViewEncapsulation, Input, HostBinding, ContentChildren, forwardRef, ViewChild, ContentChild, ElementRef, HostListener, SecurityContext, NgModule } from '@angular/core';
 import * as i4$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@eui/components/eui-card';
@@ -16,7 +16,7 @@ import * as i3$2 from '@eui/components/eui-dialog';
 import { EuiDialogModule } from '@eui/components/eui-dialog';
 import * as i8 from '@eui/components/eui-alert';
 import { EuiAlertModule } from '@eui/components/eui-alert';
-import * as i1$1 from '@eui/components/eui-block-content';
+import * as i1$2 from '@eui/components/eui-block-content';
 import { EuiBlockContentModule } from '@eui/components/eui-block-content';
 import * as i6$1 from '@eui/components/eui-badge';
 import { EuiBadgeModule } from '@eui/components/eui-badge';
@@ -25,7 +25,7 @@ import { EuiIconModule } from '@eui/components/eui-icon';
 import * as i11 from '@eui/components/eui-label';
 import { EuiLabelModule } from '@eui/components/eui-label';
 import { lastValueFrom, forkJoin, Observable } from 'rxjs';
-import { map, catchError } from 'rxjs/operators';
+import { map, catchError, take } from 'rxjs/operators';
 import sdk from '@stackblitz/sdk';
 import * as i2 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
@@ -34,6 +34,8 @@ import * as i4 from '@angular/cdk/clipboard';
 import * as i1 from '@angular/router';
 import * as i3$1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
+import * as i1$1 from 'ngx-markdown';
+import { MarkdownModule } from 'ngx-markdown';
 
 const polyfillsFile = 'import \'zone.js\';';
 const mainFile = (moduleName, componentName) => `
@@ -736,6 +738,7 @@ class DocPageComponent {
         this.asService = asService;
         this.sanitizer = sanitizer;
         this.location = location;
+        this.cssClass = 'eui-doc-page';
         this.isNotReady = false;
         this.isDeprecated = false;
         this.isLegacy = false;
@@ -999,12 +1002,15 @@ class DocPageComponent {
         return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DocPageComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i3.EuiAppShellService }, { token: i3$1.DomSanitizer }, { token: i4$1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: DocPageComponent, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isLegacy: "isLegacy", codeFolder: "codeFolder", showcase: "showcase", isNavigationVisible: "isNavigationVisible", hasApi: "hasApi", hasA11y: "hasA11y" }, 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 }}\">\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\n                                *ngIf=\"stateLabel\"\n                                [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                                [euiInfo]=\"isNotReady\"\n                                [euiWarning]=\"isDeprecated\"\n                                [euiDanger]=\"isLegacy\">\n                                <span euiLabel>\n                                    <strong>{{ stateLabel }}</strong>\n                                </span>\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 19 release (end of 2024)</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 will be removed in eUI 18 release (end of 2023)</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 18 release (end of 2023)</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                                    <div class=\"doc-page-section-title\">Module import</div>\n                                    <pre><code class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpModuleImport }}</code></pre>\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\"></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\" class=\"eui-u-hidden-mobile\"\n                label=\"In this page\"\n                size=\"2xl\"\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=\"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                                <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                                    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: [".doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-s-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-c-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:auto;box-shadow:var(--eui-sh-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-wrapper .language-javascript:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:0!important;transition:none}.doc-page-navigation-wrapper .language-javascript:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:0!important;transition:none}.doc-page-navigation-wrapper .language-javascript [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:0!important;transition:none}.doc-page-navigation-title{padding:var(--eui-s-s);font:var(--eui-f-xl)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 7.25rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-c-neutral-bg-light)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-s-xs);margin:0;padding:0}.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-info-darker);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-s-3xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-info-darker);padding-left:var(--eui-s-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-info-darker)}.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)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-neutral-lightest)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-info-bg);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.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}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.doc-page-section-title{margin-top:var(--eui-s-2xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-info-darker);letter-spacing:-1px;font:var(--eui-f-2xl-bold)}.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-neutral)}@media screen and (max-width: 767px){.doc-page-navigation-wrapper .doc-page-main-column{padding-right:0;width:100%}.doc-page-navigation-wrapper .doc-page-navigation-column{display:none;width:0}}@media screen and (min-width: 768px) and (max-width: 995px){.doc-page-navigation-wrapper .doc-page-main-column{width:80%}.doc-page-navigation-wrapper .doc-page-navigation-column{width:20%}}@media screen and (max-width: 1550px){.doc-page-api-iframe-wrapper{display:none}}\n"], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i9.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i9.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i9.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: ["size", "label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i6.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i6.EuiPageColumnsComponent, selector: "eui-page-columns" }, { 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"], outputs: ["remove"] }, { kind: "component", type: i8.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["ariaDescribedBy", "e2eAttr", "isMuted", "isCloseable", "isFocusable", "isVisible"], outputs: ["closeAlert"] }, { kind: "component", type: i8.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i11.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]" }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: DocPageComponent, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isLegacy: "isLegacy", codeFolder: "codeFolder", showcase: "showcase", isNavigationVisible: "isNavigationVisible", hasApi: "hasApi", hasA11y: "hasA11y" }, 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 }}\">\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\n                                *ngIf=\"stateLabel\"\n                                [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                                [euiInfo]=\"isNotReady\"\n                                [euiWarning]=\"isDeprecated\"\n                                [euiDanger]=\"isLegacy\">\n                                <span euiLabel>\n                                    <strong>{{ stateLabel }}</strong>\n                                </span>\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 19 release (end of 2024)</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 will be removed in eUI 18 release (end of 2023)</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 18 release (end of 2023)</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                                    <div class=\"doc-page-section-title\">Module import</div>\n                                    <pre><code class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpModuleImport }}</code></pre>\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\"></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\" class=\"eui-u-hidden-mobile\"\n                label=\"On this page\"\n                size=\"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: [".doc-page-navigation,.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-info-darker);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-info-darker);padding-left:var(--eui-s-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-info-darker)}.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)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-neutral-lightest)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-info-bg);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.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}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.doc-page-section-title{margin-top:var(--eui-s-2xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-info-darker);letter-spacing:-1px;font:var(--eui-f-2xl-bold)}.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-neutral)}.doc-content h2{color:var(--eui-c-info-dark);margin-top:var(--eui-s-3xl)}.doc-content h3{color:var(--eui-c-neutral);margin-top:var(--eui-s-3xl)}.doc-content h4{margin-top:var(--eui-s-xl);text-decoration:underline;color:var(--eui-c-neutral-light)}.doc-content h5{font:var(--eui-f-bold);font-style:italic}.doc-content ul{margin-top:1rem}.doc-content ul li{list-style:circle;margin-left:2rem}.doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.doc-content ol li{counter-increment:item;margin-bottom:1rem}.doc-content ol li:before{margin-right:1.25rem;content:counter(item);background:var(--eui-c-info-dark);border-radius:50%;color:#fff;width:2rem;height:2rem;text-align:center;display:inline-block;font-size:1.25rem;font-weight:600}.doc-content ol li p:first-child{display:inline-block}.doc-content ol ol li{margin-top:1rem}.doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-info-dark);line-height:1.5rem}.doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.doc-content em.info{color:var(--eui-c-info-dark)}.doc-content em.warning{color:var(--eui-c-warning)}.doc-content table{border-collapse:collapse;width:100%}.doc-content table,.doc-content th,.doc-content td{padding:.25rem;border:1px solid var(--eui-c-neutral-light)}.doc-content td{text-align:left}.doc-content code.language-none{display:inline-block;background-color:var(--eui-c-neutral-bg-light)}.doc-content img{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i9.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i9.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i9.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: ["size", "label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i6.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i6.EuiPageColumnsComponent, selector: "eui-page-columns" }, { 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"], outputs: ["remove"] }, { kind: "component", type: i8.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["ariaDescribedBy", "e2eAttr", "isMuted", "isCloseable", "isFocusable", "isVisible"], outputs: ["closeAlert"] }, { kind: "component", type: i8.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i11.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]" }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DocPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-showcase-doc-page', encapsulation: ViewEncapsulation.None, 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 }}\">\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\n                                *ngIf=\"stateLabel\"\n                                [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                                [euiInfo]=\"isNotReady\"\n                                [euiWarning]=\"isDeprecated\"\n                                [euiDanger]=\"isLegacy\">\n                                <span euiLabel>\n                                    <strong>{{ stateLabel }}</strong>\n                                </span>\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 19 release (end of 2024)</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 will be removed in eUI 18 release (end of 2023)</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 18 release (end of 2023)</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                                    <div class=\"doc-page-section-title\">Module import</div>\n                                    <pre><code class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpModuleImport }}</code></pre>\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\"></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\" class=\"eui-u-hidden-mobile\"\n                label=\"In this page\"\n                size=\"2xl\"\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=\"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                                <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                                    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: [".doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-s-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-c-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:auto;box-shadow:var(--eui-sh-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-wrapper .language-javascript:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:0!important;transition:none}.doc-page-navigation-wrapper .language-javascript:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:0!important;transition:none}.doc-page-navigation-wrapper .language-javascript [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:0!important;transition:none}.doc-page-navigation-title{padding:var(--eui-s-s);font:var(--eui-f-xl)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 7.25rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-c-neutral-bg-light)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-c-neutral-lightest);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-s-xs);margin:0;padding:0}.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-info-darker);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-s-3xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-info-darker);padding-left:var(--eui-s-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-info-darker)}.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)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-neutral-lightest)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-info-bg);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.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}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.doc-page-section-title{margin-top:var(--eui-s-2xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-info-darker);letter-spacing:-1px;font:var(--eui-f-2xl-bold)}.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-neutral)}@media screen and (max-width: 767px){.doc-page-navigation-wrapper .doc-page-main-column{padding-right:0;width:100%}.doc-page-navigation-wrapper .doc-page-navigation-column{display:none;width:0}}@media screen and (min-width: 768px) and (max-width: 995px){.doc-page-navigation-wrapper .doc-page-main-column{width:80%}.doc-page-navigation-wrapper .doc-page-navigation-column{width:20%}}@media screen and (max-width: 1550px){.doc-page-api-iframe-wrapper{display:none}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i3.EuiAppShellService }, { type: i3$1.DomSanitizer }, { type: i4$1.Location }], propDecorators: { id: [{
+            args: [{ selector: 'eui-showcase-doc-page', encapsulation: ViewEncapsulation.None, 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 }}\">\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\n                                *ngIf=\"stateLabel\"\n                                [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                                [euiInfo]=\"isNotReady\"\n                                [euiWarning]=\"isDeprecated\"\n                                [euiDanger]=\"isLegacy\">\n                                <span euiLabel>\n                                    <strong>{{ stateLabel }}</strong>\n                                </span>\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 19 release (end of 2024)</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 will be removed in eUI 18 release (end of 2023)</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 18 release (end of 2023)</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                                    <div class=\"doc-page-section-title\">Module import</div>\n                                    <pre><code class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpModuleImport }}</code></pre>\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\"></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\" class=\"eui-u-hidden-mobile\"\n                label=\"On this page\"\n                size=\"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: [".doc-page-navigation,.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-info-darker);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-info-darker);padding-left:var(--eui-s-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-info-darker)}.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)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-neutral-lightest)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-info-bg);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.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}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.doc-page-section-title{margin-top:var(--eui-s-2xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-info-darker);letter-spacing:-1px;font:var(--eui-f-2xl-bold)}.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-neutral)}.doc-content h2{color:var(--eui-c-info-dark);margin-top:var(--eui-s-3xl)}.doc-content h3{color:var(--eui-c-neutral);margin-top:var(--eui-s-3xl)}.doc-content h4{margin-top:var(--eui-s-xl);text-decoration:underline;color:var(--eui-c-neutral-light)}.doc-content h5{font:var(--eui-f-bold);font-style:italic}.doc-content ul{margin-top:1rem}.doc-content ul li{list-style:circle;margin-left:2rem}.doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.doc-content ol li{counter-increment:item;margin-bottom:1rem}.doc-content ol li:before{margin-right:1.25rem;content:counter(item);background:var(--eui-c-info-dark);border-radius:50%;color:#fff;width:2rem;height:2rem;text-align:center;display:inline-block;font-size:1.25rem;font-weight:600}.doc-content ol li p:first-child{display:inline-block}.doc-content ol ol li{margin-top:1rem}.doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-info-dark);line-height:1.5rem}.doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.doc-content em.info{color:var(--eui-c-info-dark)}.doc-content em.warning{color:var(--eui-c-warning)}.doc-content table{border-collapse:collapse;width:100%}.doc-content table,.doc-content th,.doc-content td{padding:.25rem;border:1px solid var(--eui-c-neutral-light)}.doc-content td{text-align:left}.doc-content code.language-none{display:inline-block;background-color:var(--eui-c-neutral-bg-light)}.doc-content img{max-width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i3.EuiAppShellService }, { type: i3$1.DomSanitizer }, { type: i4$1.Location }], propDecorators: { cssClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], id: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -1242,6 +1248,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
             args: [{ selector: 'sectionCodeDOC' }]
         }] });
 
+class DocPageDevGuideComponent {
+    constructor(markdownService, http, router, route) {
+        this.markdownService = markdownService;
+        this.http = http;
+        this.router = router;
+        this.route = route;
+        this.headers = [];
+        this.subscription = this.route.url.subscribe((u) => {
+            this._loadMdContent('/docs/' + u.join('/'));
+        });
+        // eslint-disable-next-line
+        this.markdownService.renderer.heading = (text, level, str) => {
+            if (level === 2 || level === 3) {
+                const newHeader = '<h' + level + ' id="' + str + '">' +
+                    text +
+                    '</h' + level + '>';
+                console.log(text);
+                if (text.indexOf('<a ') === -1 && text.indexOf('<em>') === -1) {
+                    this.headers.push({ id: str, label: text, level });
+                }
+                return newHeader;
+            }
+            return '<h' + level + '>' +
+                text +
+                '</h' + level + '>';
+        };
+    }
+    ngAfterViewInit() {
+        this.route.fragment.pipe(take(1)).subscribe((fragment) => {
+            if (fragment) {
+                setTimeout(() => {
+                    this.fragmentId = fragment;
+                    const fgm = document.getElementById(fragment);
+                    fgm.scrollIntoView();
+                }, 1);
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    onNavClick(fragmentId) {
+        this._scrollToFragment(fragmentId);
+    }
+    _loadMdContent(url) {
+        let mdPath, contextRoot;
+        const currentUrl = window.location;
+        const pathNameArray = currentUrl.pathname.split('/');
+        this.headers = [];
+        if (url) {
+            mdPath = url.substr(1);
+        }
+        else {
+            mdPath = pathNameArray.slice(pathNameArray.length - 3).join('/');
+        }
+        contextRoot = `${currentUrl.protocol}//${currentUrl.host}`;
+        if (pathNameArray[1] !== 'showcase-dev-guide') {
+            contextRoot += `/${pathNameArray[1]}`;
+        }
+        const filePath = `${contextRoot}/assets/${mdPath}.md`;
+        this.http.get(filePath, { responseType: 'text' }).pipe(map((md) => md.replace(new RegExp('assets/docs', 'g'), `${contextRoot}/assets/docs`))).subscribe((md) => this.markdown = md);
+    }
+    _scrollToFragment(fragmentId) {
+        // forcing reload when deep link with fragment
+        this.router.onSameUrlNavigation = 'reload';
+        this.router.navigate(['.'], { relativeTo: this.route, fragment: fragmentId });
+        if (fragmentId) {
+            setTimeout(() => {
+                const fgm = document.getElementById(fragmentId);
+                if (fgm) {
+                    fgm.scrollIntoView();
+                }
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DocPageDevGuideComponent, deps: [{ token: i1$1.MarkdownService }, { token: i2.HttpClient }, { token: i1.Router }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: DocPageDevGuideComponent, selector: "eui-showcase-doc-page-dev-guide", ngImport: i0, template: "<eui-page>\n    <eui-page-content>\n        <eui-page-columns>\n            <eui-page-column>\n                <eui-page-column-body>\n                    <markdown class=\"doc-content\" [data]=\"markdown\"></markdown>\n                </eui-page-column-body>\n            </eui-page-column>\n\n            <eui-page-column class=\"eui-u-hidden-mobile\"\n                label=\"On this page\"\n                size=\"4xl\"\n                isCollapsible\n                isRightCollapsible>\n\n                <eui-page-column-body>\n                    <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n                        <ul class=\"doc-page-navigation\">\n                            <li class=\"doc-page-navigation-item\"\n                                *ngFor=\"let header of headers\" (click)=\"onNavClick(header.id)\"\n                                [class.doc-page-navigation-item--selected]=\"fragmentId === header.id\">\n                                    <span [ngClass]=\"header.level === 3 ? 'eui-u-ml-m eui-u-f-regular': ''\">\n                                        {{header.label}}\n                                    </span>\n                            </li>\n                        </ul>\n                    </div>\n                </eui-page-column-body>\n\n            </eui-page-column>\n\n        </eui-page-columns>\n    </eui-page-content>\n</eui-page>\n", styles: [".doc-page-navigation,.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-info-darker);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-info-darker);padding-left:var(--eui-s-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-info-darker)}.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)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-neutral-lightest)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-info-bg);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.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}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.doc-page-section-title{margin-top:var(--eui-s-2xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-info-darker);letter-spacing:-1px;font:var(--eui-f-2xl-bold)}.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-neutral)}.doc-content h2{color:var(--eui-c-info-dark);margin-top:var(--eui-s-3xl)}.doc-content h3{color:var(--eui-c-neutral);margin-top:var(--eui-s-3xl)}.doc-content h4{margin-top:var(--eui-s-xl);text-decoration:underline;color:var(--eui-c-neutral-light)}.doc-content h5{font:var(--eui-f-bold);font-style:italic}.doc-content ul{margin-top:1rem}.doc-content ul li{list-style:circle;margin-left:2rem}.doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.doc-content ol li{counter-increment:item;margin-bottom:1rem}.doc-content ol li:before{margin-right:1.25rem;content:counter(item);background:var(--eui-c-info-dark);border-radius:50%;color:#fff;width:2rem;height:2rem;text-align:center;display:inline-block;font-size:1.25rem;font-weight:600}.doc-content ol li p:first-child{display:inline-block}.doc-content ol ol li{margin-top:1rem}.doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-info-dark);line-height:1.5rem}.doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.doc-content em.info{color:var(--eui-c-info-dark)}.doc-content em.warning{color:var(--eui-c-warning)}.doc-content table{border-collapse:collapse;width:100%}.doc-content table,.doc-content th,.doc-content td{padding:.25rem;border:1px solid var(--eui-c-neutral-light)}.doc-content td{text-align:left}.doc-content code.language-none{display:inline-block;background-color:var(--eui-c-neutral-bg-light)}.doc-content img{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i6.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i6.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["size", "label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i6.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i6.EuiPageColumnsComponent, selector: "eui-page-columns" }, { kind: "component", type: i6.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i1$1.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DocPageDevGuideComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-showcase-doc-page-dev-guide', encapsulation: ViewEncapsulation.None, template: "<eui-page>\n    <eui-page-content>\n        <eui-page-columns>\n            <eui-page-column>\n                <eui-page-column-body>\n                    <markdown class=\"doc-content\" [data]=\"markdown\"></markdown>\n                </eui-page-column-body>\n            </eui-page-column>\n\n            <eui-page-column class=\"eui-u-hidden-mobile\"\n                label=\"On this page\"\n                size=\"4xl\"\n                isCollapsible\n                isRightCollapsible>\n\n                <eui-page-column-body>\n                    <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n                        <ul class=\"doc-page-navigation\">\n                            <li class=\"doc-page-navigation-item\"\n                                *ngFor=\"let header of headers\" (click)=\"onNavClick(header.id)\"\n                                [class.doc-page-navigation-item--selected]=\"fragmentId === header.id\">\n                                    <span [ngClass]=\"header.level === 3 ? 'eui-u-ml-m eui-u-f-regular': ''\">\n                                        {{header.label}}\n                                    </span>\n                            </li>\n                        </ul>\n                    </div>\n                </eui-page-column-body>\n\n            </eui-page-column>\n\n        </eui-page-columns>\n    </eui-page-content>\n</eui-page>\n", styles: [".doc-page-navigation,.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-info-darker);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-info-darker);padding-left:var(--eui-s-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-info-darker)}.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)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-neutral-lightest)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-info-bg);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.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}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.doc-page-section-title{margin-top:var(--eui-s-2xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-info-darker);letter-spacing:-1px;font:var(--eui-f-2xl-bold)}.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-neutral)}.doc-content h2{color:var(--eui-c-info-dark);margin-top:var(--eui-s-3xl)}.doc-content h3{color:var(--eui-c-neutral);margin-top:var(--eui-s-3xl)}.doc-content h4{margin-top:var(--eui-s-xl);text-decoration:underline;color:var(--eui-c-neutral-light)}.doc-content h5{font:var(--eui-f-bold);font-style:italic}.doc-content ul{margin-top:1rem}.doc-content ul li{list-style:circle;margin-left:2rem}.doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.doc-content ol li{counter-increment:item;margin-bottom:1rem}.doc-content ol li:before{margin-right:1.25rem;content:counter(item);background:var(--eui-c-info-dark);border-radius:50%;color:#fff;width:2rem;height:2rem;text-align:center;display:inline-block;font-size:1.25rem;font-weight:600}.doc-content ol li p:first-child{display:inline-block}.doc-content ol ol li{margin-top:1rem}.doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-info-dark);line-height:1.5rem}.doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.doc-content em.info{color:var(--eui-c-info-dark)}.doc-content em.warning{color:var(--eui-c-warning)}.doc-content table{border-collapse:collapse;width:100%}.doc-content table,.doc-content th,.doc-content td{padding:.25rem;border:1px solid var(--eui-c-neutral-light)}.doc-content td{text-align:left}.doc-content code.language-none{display:inline-block;background-color:var(--eui-c-neutral-bg-light)}.doc-content img{max-width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.MarkdownService }, { type: i2.HttpClient }, { type: i1.Router }, { type: i1.ActivatedRoute }] });
+
 class DocPageCodeModalComponent {
     constructor(asService) {
         this.asService = asService;
@@ -1374,7 +1465,7 @@ class PlaygroundComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: PlaygroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: PlaygroundComponent, selector: "eui-playground", inputs: { title: "title", htmlContent: "htmlContent", sampleId: "sampleId", typescriptContent: "typescriptContent", activated: "activated", modules: "modules" }, viewQueries: [{ propertyName: "stackblitzElWrapper", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n    <iframe #container id=\"stackblitz-{{sampleId}}\"></iframe>\n</eui-block-content>\n", dependencies: [{ kind: "component", type: i1$1.EuiBlockContentComponent, selector: "eui-block-content", inputs: ["role", "ariaLabel", "isBlocked"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: PlaygroundComponent, selector: "eui-playground", inputs: { title: "title", htmlContent: "htmlContent", sampleId: "sampleId", typescriptContent: "typescriptContent", activated: "activated", modules: "modules" }, viewQueries: [{ propertyName: "stackblitzElWrapper", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n    <iframe #container id=\"stackblitz-{{sampleId}}\"></iframe>\n</eui-block-content>\n", dependencies: [{ kind: "component", type: i1$2.EuiBlockContentComponent, selector: "eui-block-content", inputs: ["role", "ariaLabel", "isBlocked"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: PlaygroundComponent, decorators: [{
             type: Component,
@@ -1498,6 +1589,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
 const COMPONENTS = [
     EuiCodeHighlighterDirective,
     DocPageComponent,
+    DocPageDevGuideComponent,
     DocPageCodeComponent,
     DocPageCodeFabComponent,
     DocPageCodeModalComponent,
@@ -1529,6 +1621,7 @@ class EuiShowcaseModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiShowcaseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0", ngImport: i0, type: EuiShowcaseModule, declarations: [EuiCodeHighlighterDirective,
             DocPageComponent,
+            DocPageDevGuideComponent,
             DocPageCodeComponent,
             DocPageCodeFabComponent,
             DocPageCodeModalComponent,
@@ -1565,8 +1658,9 @@ class EuiShowcaseModule {
             EuiBlockContentModule,
             EuiBadgeModule,
             EuiIconModule,
-            EuiLabelModule], exports: [EuiCodeHighlighterDirective,
+            EuiLabelModule, i1$1.MarkdownModule], exports: [EuiCodeHighlighterDirective,
             DocPageComponent,
+            DocPageDevGuideComponent,
             DocPageCodeComponent,
             DocPageCodeFabComponent,
             DocPageCodeModalComponent,
@@ -1604,7 +1698,8 @@ class EuiShowcaseModule {
             EuiBlockContentModule,
             EuiBadgeModule,
             EuiIconModule,
-            EuiLabelModule] }); }
+            EuiLabelModule,
+            MarkdownModule.forRoot({ sanitize: SecurityContext.NONE })] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: EuiShowcaseModule, decorators: [{
             type: NgModule,
@@ -1623,6 +1718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
                         EuiBadgeModule,
                         EuiIconModule,
                         EuiLabelModule,
+                        MarkdownModule.forRoot({ sanitize: SecurityContext.NONE }),
                     ],
                     exports: [...COMPONENTS],
                     providers: [StackblitzService],
@@ -1633,5 +1729,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DocPageAccessibilityContentDirective, DocPageApiContentDirective, DocPageCodeComponent, DocPageCodeFabComponent, DocPageCodeModalComponent, DocPageComponent, DocPageInteractiveContentDirective, DocPageOverviewContentDirective, DocPageOverviewDefaultContentDirective, DocPagePatternComponent, DocPagePatternDocDirective, DocPagePatternSampleDirective, DocPageSamplesContentDirective, DocPageSectionsContentDirective, DocPageThemingContentDirective, DocSampleApiComponent, DocSampleComponent, DocSectionCodeComponent, DocSectionCodeCssTagDirective, DocSectionCodeDescriptionTagDirective, DocSectionCodeDocTagDirective, DocSectionCodeHtmlTagDirective, DocSectionCodeServiceTagDirective, DocSectionCodeTsTagDirective, DocSectionComponent, EuiCodeHighlighterDirective, EuiShowcaseModule, LoremIpsumSampleComponent, PACKAGE_JSON, PlaygroundComponent, angularJsonFile, indexHtmlFile, mainFile, moduleFile, polyfillsFile, tsConfig };
+export { DocPageAccessibilityContentDirective, DocPageApiContentDirective, DocPageCodeComponent, DocPageCodeFabComponent, DocPageCodeModalComponent, DocPageComponent, DocPageDevGuideComponent, DocPageInteractiveContentDirective, DocPageOverviewContentDirective, DocPageOverviewDefaultContentDirective, DocPagePatternComponent, DocPagePatternDocDirective, DocPagePatternSampleDirective, DocPageSamplesContentDirective, DocPageSectionsContentDirective, DocPageThemingContentDirective, DocSampleApiComponent, DocSampleComponent, DocSectionCodeComponent, DocSectionCodeCssTagDirective, DocSectionCodeDescriptionTagDirective, DocSectionCodeDocTagDirective, DocSectionCodeHtmlTagDirective, DocSectionCodeServiceTagDirective, DocSectionCodeTsTagDirective, DocSectionComponent, EuiCodeHighlighterDirective, EuiShowcaseModule, LoremIpsumSampleComponent, PACKAGE_JSON, PlaygroundComponent, angularJsonFile, indexHtmlFile, mainFile, moduleFile, polyfillsFile, tsConfig };
 //# sourceMappingURL=eui-showcase.mjs.map