npm - @eui/showcase - Versions diffs - 14.0.23 → 14.0.24 - Mend

@eui/showcase 14.0.23 → 14.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/esm2020/lib/components/doc-page/doc-page.component.mjs CHANGED Viewed

@@ -217,7 +217,7 @@ export class DocPageComponent {
     }
 }
 /** @nocollapse */ DocPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DocPageComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.UxAppShellService }, { token: i3.DomSanitizer }, { token: i4.Location }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DocPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DocPageComponent, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", codeFolder: "codeFolder", showcase: "showcase" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(function () { return DocPageOverviewContentDirective; }) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(function () { return DocPageSamplesContentDirective; }) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(function () { return DocPageSectionsContentDirective; }) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(function () { return DocPageInteractiveContentDirective; }) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(function () { return DocPageAccessibilityContentDirective; }) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(function () { return DocPageApiContentDirective; }) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(function () { return DocPageThemingContentDirective; }) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i0, template: "<div class=\"doc-page-navigation-wrapper\" [class.eui-u-hidden]=\"isLoading\">\n    <div class=\"doc-page-main-column\">\n        <eui-page>\n            <eui-page-header label=\"{{label}}\" subLabel=\"{{subLabel}}\">\n                <eui-page-header-action-items>\n                    <eui-showcase-doc-page-code *ngIf=\"codeFolder\" codeFolder=\"{{codeFolder}}\" showcase=\"{{showcase}}\"></eui-showcase-doc-page-code>\n                    <eui-chip *ngIf=\"stateLabel\" [euiSuccess]=\"stateLabel === 'ACTIVE'\" [euiWarning]=\"stateLabel === 'NOT READY'\" [euiDanger]=\"stateLabel === 'DEPRECATED'\">\n                        <span euiLabel><strong>{{stateLabel}}</strong></span>\n                    </eui-chip>\n                </eui-page-header-action-items>\n            </eui-page-header>\n\n            <eui-page-content>\n                <eui-alert *ngIf=\"stateLabel === 'NOT READY' || isNotReady\" euiWarning>\n                    <p>\n                        This component <strong class=\"eui-u-color-warning-darkester-2\">is not ready for production</strong> usage yet, it's API is still subject to change during the coming weeks.\n                    </p>\n                    <p>\n                        For experimentation use only.\n                    </p>\n                </eui-alert>\n\n                <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiDanger>\n                    <p>\n                        This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n                    </p>\n                    <div *ngIf=\"cmp\">\n                        <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n                            It has been replaced by : <strong class=\"eui-u-color-success-darkest\">{{cmp.cmpReplacement}}</strong>.\n                            <!-- <br><br>\n                            You can find more information on the new component here : <a [routerLink]=\"cmp.cmpReplacementUrl\">{{cmp.cmpReplacementUrl}}</a> -->\n                        </div>\n                        <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n                            This component will be <strong>discontinued in future version of eUI</strong>\n                        </div>\n                        <div *ngIf=\"cmp.cmpReplacementNote\">\n                            <strong class=\"eui-u-color-warning\">{{cmp.cmpReplacementNote}}</strong>\n                        </div>\n                    </div>\n                </eui-alert>\n\n                <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n\n                <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelected)=\"onTabSelected($event)\">\n                    <eui-tab>\n                        <euiTabLabel>\n                            OVERVIEW\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"overview\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Overview</h4>\n                            <div *ngIf=\"pageOverviewContent.length > 0; else noOverview\">\n                                <ng-content select=\"docPageOverview\"></ng-content>\n                            </div>\n                            <ng-template #noOverview>\n                                Coming soon...\n                            </ng-template>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            API\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <ng-container *ngIf=\"apiUrlSafe\">\n                                <div class=\"flex-container\">\n                                    <a href=\"{{apiUrl}}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n                                </div>\n                                <div class=\"doc-page-api-iframe-wrapper\">\n                                    <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\"></iframe>\n                                </div>\n                            </ng-container>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            A11Y\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"accessibility\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Accessibility</h4>\n                            <ng-content select=\"docPageAccessibility\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            OPTIONS & SAMPLES\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"samples\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Options & samples</h4>\n                            <ng-content select=\"docPageSamples\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n                        <euiTabLabel>\n                            THEMING\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"theming\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Theming</h4>\n                            <ng-content select=\"docPageTheming\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n                        <euiTabLabel>\n                            {{pageInteractiveContent.first.title}}\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"interactive\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">\n                                {{pageInteractiveContent.first.subTitle}}\n                            </h4>\n                            <ng-content select=\"docPageInteractive\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n                </eui-tabs>\n\n                <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                    <h4 id=\"demo\" *ngIf=\"sections.length === 0\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Demo</h4>\n                    <ng-content select=\"docPageSections\"></ng-content>\n                </ng-container>\n            </eui-page-content>\n        </eui-page>\n    </div>\n\n    <div class=\"doc-page-navigation-column eui-u-hidden-desktop-down\">\n        <div id=\"doc-page-nav\">\n            <div class=\"doc-page-navigation-title\">In this page</div>\n            <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n                <ul class=\"doc-page-navigation\">\n                    <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n                        <!-- ALWAYS PRESENT in each page-->\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'overview'\" (click)=\"onNavClick('overview', 0)\"><span>OVERVIEW</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\" (click)=\"onNavClick('api', 1)\"><span>API</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\" (click)=\"onNavClick('a11y', 2)\"><span>A11Y</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\" (click)=\"onNavClick('samples', 3)\"><span>OPTIONS & SAMPLES</span></li>\n                        <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let sample of samples\">\n                                <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\" (click)=\"onNavClick(sample.id, 3)\"><span>{{sample.label}}</span></li>\n                            </ul>\n                        </li>\n\n                        <!-- OPTIONAL TABS-->\n                        <ng-container *ngIf=\"pageThemingContent.length > 0\">\n                            <li *ngIf=\"pageThemingContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\" (click)=\"onNavClick('theming', 4)\"><span>THEMING</span></li>\n                            <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 5)\">\n                                <span>{{pageInteractiveContent.first.title}}</span>\n                            </li>\n                        </ng-container>\n                        <ng-container *ngIf=\"pageThemingContent.length  === 0\">\n                            <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 4)\">\n                                <span>{{pageInteractiveContent.first.title}}</span>\n                            </li>\n                        </ng-container>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\" (click)=\"onNavClick('sections', null)\"><span>Sections</span></li>\n                        <li *ngIf=\"sections.length === 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\" (click)=\"onNavClick('demo', null)\"><span>Demo</span></li>\n                        <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let section of sections\">\n                                <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\" (click)=\"onNavClick(section.id, null)\"><span>{{section.label}}</span></li>\n                            </ul>\n                        </li>\n                    </ng-container>\n                </ul>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-base-spacing-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-base-color-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:99;box-shadow:var(--eui-base-shadow-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-title{font-weight:700;padding:var(--eui-base-spacing-s)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 6rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-10)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-25)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-base-color-primary-100);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-base-spacing-2xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-base-spacing-m)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-grey-15)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}@media screen and (max-width: 767px){.doc-page-navigation-wrapper .doc-page-main-column{padding-right:0;width:100%}.doc-page-navigation-wrapper .doc-page-navigation-column{display:none;width:0}}@media screen and (min-width: 768px) and (max-width: 995px){.doc-page-navigation-wrapper .doc-page-main-column{width:80%}.doc-page-navigation-wrapper .doc-page-navigation-column{width:20%}}@media screen and (max-width: 1550px){.doc-page-api-iframe-wrapper{display:none}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i5.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i5.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i5.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i6.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i6.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i6.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "isCollapsible", "isCollapsed", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "directive", type: i6.EuiPageHeaderActionItemsContentDirective, selector: "eui-page-header-action-items" }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i8.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["euiAlertMuted", "isCloseable"], outputs: ["close"] }, { kind: "component", type: i9.DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ DocPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DocPageComponent, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", codeFolder: "codeFolder", showcase: "showcase" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(function () { return DocPageOverviewContentDirective; }) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(function () { return DocPageSamplesContentDirective; }) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(function () { return DocPageSectionsContentDirective; }) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(function () { return DocPageInteractiveContentDirective; }) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(function () { return DocPageAccessibilityContentDirective; }) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(function () { return DocPageApiContentDirective; }) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(function () { return DocPageThemingContentDirective; }) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i0, template: "<div class=\"doc-page-navigation-wrapper\" [class.eui-u-hidden]=\"isLoading\">\n    <div class=\"doc-page-main-column\">\n        <eui-page>\n            <eui-page-header label=\"{{label}}\" subLabel=\"{{subLabel}}\">\n                <eui-page-header-action-items>\n                    <eui-showcase-doc-page-code *ngIf=\"codeFolder\" codeFolder=\"{{codeFolder}}\" showcase=\"{{showcase}}\"></eui-showcase-doc-page-code>\n                    <eui-chip *ngIf=\"stateLabel\" [euiSuccess]=\"stateLabel === 'ACTIVE'\" [euiWarning]=\"stateLabel === 'NOT READY'\" [euiDanger]=\"stateLabel === 'DEPRECATED'\">\n                        <span euiLabel><strong>{{stateLabel}}</strong></span>\n                    </eui-chip>\n                </eui-page-header-action-items>\n            </eui-page-header>\n\n            <eui-page-content>\n                <eui-alert *ngIf=\"stateLabel === 'NOT READY' || isNotReady\" euiWarning>\n                    <p>\n                        This component <strong class=\"eui-u-color-warning-darkester-2\">is not ready for production</strong> usage yet, it's API is still subject to change during the coming weeks.\n                    </p>\n                    <p>\n                        For experimentation use only.\n                    </p>\n                </eui-alert>\n\n                <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiDanger>\n                    <p>\n                        This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n                    </p>\n                    <div *ngIf=\"cmp\">\n                        <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n                            It has been replaced by : <strong class=\"eui-u-color-success-darkest\">{{cmp.cmpReplacement}}</strong>.\n                            <!-- <br><br>\n                            You can find more information on the new component here : <a [routerLink]=\"cmp.cmpReplacementUrl\">{{cmp.cmpReplacementUrl}}</a> -->\n                        </div>\n                        <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n                            This component will be <strong>discontinued in future version of eUI</strong>\n                        </div>\n                        <div *ngIf=\"cmp.cmpReplacementNote\">\n                            <strong class=\"eui-u-color-warning\">{{cmp.cmpReplacementNote}}</strong>\n                        </div>\n                    </div>\n                </eui-alert>\n\n                <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n\n                <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelected)=\"onTabSelected($event)\">\n                    <eui-tab>\n                        <euiTabLabel>\n                            OVERVIEW\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"overview\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Overview</h4>\n                            <div *ngIf=\"pageOverviewContent.length > 0; else noOverview\">\n                                <ng-content select=\"docPageOverview\"></ng-content>\n                            </div>\n                            <ng-template #noOverview>\n                                Coming soon...\n                            </ng-template>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            API\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <ng-container *ngIf=\"apiUrlSafe\">\n                                <div class=\"flex-container\">\n                                    <a href=\"{{apiUrl}}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n                                </div>\n                                <div class=\"doc-page-api-iframe-wrapper\">\n                                    <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\"></iframe>\n                                </div>\n                            </ng-container>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            A11Y\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"accessibility\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Accessibility</h4>\n                            <ng-content select=\"docPageAccessibility\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            OPTIONS & SAMPLES\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"samples\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Options & samples</h4>\n                            <ng-content select=\"docPageSamples\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n                        <euiTabLabel>\n                            THEMING\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"theming\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Theming</h4>\n                            <ng-content select=\"docPageTheming\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n                        <euiTabLabel>\n                            {{pageInteractiveContent.first.title}}\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"interactive\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">\n                                {{pageInteractiveContent.first.subTitle}}\n                            </h4>\n                            <ng-content select=\"docPageInteractive\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n                </eui-tabs>\n\n                <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                    <h4 id=\"demo\" *ngIf=\"sections.length === 0\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Demo</h4>\n                    <ng-content select=\"docPageSections\"></ng-content>\n                </ng-container>\n            </eui-page-content>\n        </eui-page>\n    </div>\n\n    <div class=\"doc-page-navigation-column eui-u-hidden-desktop-down\">\n        <div id=\"doc-page-nav\">\n            <div class=\"doc-page-navigation-title\">In this page</div>\n            <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n                <ul class=\"doc-page-navigation\">\n                    <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n                        <!-- ALWAYS PRESENT in each page-->\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'overview'\" (click)=\"onNavClick('overview', 0)\"><span>OVERVIEW</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\" (click)=\"onNavClick('api', 1)\"><span>API</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\" (click)=\"onNavClick('a11y', 2)\"><span>A11Y</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\" (click)=\"onNavClick('samples', 3)\"><span>OPTIONS & SAMPLES</span></li>\n                        <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let sample of samples\">\n                                <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\" (click)=\"onNavClick(sample.id, 3)\"><span>{{sample.label}}</span></li>\n                            </ul>\n                        </li>\n\n                        <!-- OPTIONAL TABS-->\n                        <ng-container *ngIf=\"pageThemingContent.length > 0\">\n                            <li *ngIf=\"pageThemingContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\" (click)=\"onNavClick('theming', 4)\"><span>THEMING</span></li>\n                            <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 5)\">\n                                <span>{{pageInteractiveContent.first.title}}</span>\n                            </li>\n                        </ng-container>\n                        <ng-container *ngIf=\"pageThemingContent.length  === 0\">\n                            <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 4)\">\n                                <span>{{pageInteractiveContent.first.title}}</span>\n                            </li>\n                        </ng-container>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\" (click)=\"onNavClick('sections', null)\"><span>Sections</span></li>\n                        <li *ngIf=\"sections.length === 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\" (click)=\"onNavClick('demo', null)\"><span>Demo</span></li>\n                        <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let section of sections\">\n                                <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\" (click)=\"onNavClick(section.id, null)\"><span>{{section.label}}</span></li>\n                            </ul>\n                        </li>\n                    </ng-container>\n                </ul>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-base-spacing-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-base-color-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:99;box-shadow:var(--eui-base-shadow-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-title{font-weight:700;padding:var(--eui-base-spacing-s)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 6rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-10)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-25)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-base-color-primary-100);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-base-spacing-2xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-base-spacing-m)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-grey-15)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}@media screen and (max-width: 767px){.doc-page-navigation-wrapper .doc-page-main-column{padding-right:0;width:100%}.doc-page-navigation-wrapper .doc-page-navigation-column{display:none;width:0}}@media screen and (min-width: 768px) and (max-width: 995px){.doc-page-navigation-wrapper .doc-page-main-column{width:80%}.doc-page-navigation-wrapper .doc-page-navigation-column{width:20%}}@media screen and (max-width: 1550px){.doc-page-api-iframe-wrapper{display:none}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isHandleChangeTab", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i5.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i5.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i5.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i6.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i6.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i6.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "isCollapsible", "isCollapsed", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "directive", type: i6.EuiPageHeaderActionItemsContentDirective, selector: "eui-page-header-action-items" }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i8.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["euiAlertMuted", "isCloseable"], outputs: ["close"] }, { kind: "component", type: i9.DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DocPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-showcase-doc-page', encapsulation: ViewEncapsulation.None, template: "<div class=\"doc-page-navigation-wrapper\" [class.eui-u-hidden]=\"isLoading\">\n    <div class=\"doc-page-main-column\">\n        <eui-page>\n            <eui-page-header label=\"{{label}}\" subLabel=\"{{subLabel}}\">\n                <eui-page-header-action-items>\n                    <eui-showcase-doc-page-code *ngIf=\"codeFolder\" codeFolder=\"{{codeFolder}}\" showcase=\"{{showcase}}\"></eui-showcase-doc-page-code>\n                    <eui-chip *ngIf=\"stateLabel\" [euiSuccess]=\"stateLabel === 'ACTIVE'\" [euiWarning]=\"stateLabel === 'NOT READY'\" [euiDanger]=\"stateLabel === 'DEPRECATED'\">\n                        <span euiLabel><strong>{{stateLabel}}</strong></span>\n                    </eui-chip>\n                </eui-page-header-action-items>\n            </eui-page-header>\n\n            <eui-page-content>\n                <eui-alert *ngIf=\"stateLabel === 'NOT READY' || isNotReady\" euiWarning>\n                    <p>\n                        This component <strong class=\"eui-u-color-warning-darkester-2\">is not ready for production</strong> usage yet, it's API is still subject to change during the coming weeks.\n                    </p>\n                    <p>\n                        For experimentation use only.\n                    </p>\n                </eui-alert>\n\n                <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiDanger>\n                    <p>\n                        This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n                    </p>\n                    <div *ngIf=\"cmp\">\n                        <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n                            It has been replaced by : <strong class=\"eui-u-color-success-darkest\">{{cmp.cmpReplacement}}</strong>.\n                            <!-- <br><br>\n                            You can find more information on the new component here : <a [routerLink]=\"cmp.cmpReplacementUrl\">{{cmp.cmpReplacementUrl}}</a> -->\n                        </div>\n                        <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n                            This component will be <strong>discontinued in future version of eUI</strong>\n                        </div>\n                        <div *ngIf=\"cmp.cmpReplacementNote\">\n                            <strong class=\"eui-u-color-warning\">{{cmp.cmpReplacementNote}}</strong>\n                        </div>\n                    </div>\n                </eui-alert>\n\n                <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n\n                <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelected)=\"onTabSelected($event)\">\n                    <eui-tab>\n                        <euiTabLabel>\n                            OVERVIEW\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"overview\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Overview</h4>\n                            <div *ngIf=\"pageOverviewContent.length > 0; else noOverview\">\n                                <ng-content select=\"docPageOverview\"></ng-content>\n                            </div>\n                            <ng-template #noOverview>\n                                Coming soon...\n                            </ng-template>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            API\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <ng-container *ngIf=\"apiUrlSafe\">\n                                <div class=\"flex-container\">\n                                    <a href=\"{{apiUrl}}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n                                </div>\n                                <div class=\"doc-page-api-iframe-wrapper\">\n                                    <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\"></iframe>\n                                </div>\n                            </ng-container>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            A11Y\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"accessibility\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Accessibility</h4>\n                            <ng-content select=\"docPageAccessibility\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            OPTIONS & SAMPLES\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"samples\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Options & samples</h4>\n                            <ng-content select=\"docPageSamples\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n                        <euiTabLabel>\n                            THEMING\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"theming\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Theming</h4>\n                            <ng-content select=\"docPageTheming\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n                        <euiTabLabel>\n                            {{pageInteractiveContent.first.title}}\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"interactive\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">\n                                {{pageInteractiveContent.first.subTitle}}\n                            </h4>\n                            <ng-content select=\"docPageInteractive\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n                </eui-tabs>\n\n                <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                    <h4 id=\"demo\" *ngIf=\"sections.length === 0\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Demo</h4>\n                    <ng-content select=\"docPageSections\"></ng-content>\n                </ng-container>\n            </eui-page-content>\n        </eui-page>\n    </div>\n\n    <div class=\"doc-page-navigation-column eui-u-hidden-desktop-down\">\n        <div id=\"doc-page-nav\">\n            <div class=\"doc-page-navigation-title\">In this page</div>\n            <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n                <ul class=\"doc-page-navigation\">\n                    <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n                        <!-- ALWAYS PRESENT in each page-->\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'overview'\" (click)=\"onNavClick('overview', 0)\"><span>OVERVIEW</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\" (click)=\"onNavClick('api', 1)\"><span>API</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\" (click)=\"onNavClick('a11y', 2)\"><span>A11Y</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\" (click)=\"onNavClick('samples', 3)\"><span>OPTIONS & SAMPLES</span></li>\n                        <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let sample of samples\">\n                                <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\" (click)=\"onNavClick(sample.id, 3)\"><span>{{sample.label}}</span></li>\n                            </ul>\n                        </li>\n\n                        <!-- OPTIONAL TABS-->\n                        <ng-container *ngIf=\"pageThemingContent.length > 0\">\n                            <li *ngIf=\"pageThemingContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\" (click)=\"onNavClick('theming', 4)\"><span>THEMING</span></li>\n                            <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 5)\">\n                                <span>{{pageInteractiveContent.first.title}}</span>\n                            </li>\n                        </ng-container>\n                        <ng-container *ngIf=\"pageThemingContent.length  === 0\">\n                            <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 4)\">\n                                <span>{{pageInteractiveContent.first.title}}</span>\n                            </li>\n                        </ng-container>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\" (click)=\"onNavClick('sections', null)\"><span>Sections</span></li>\n                        <li *ngIf=\"sections.length === 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\" (click)=\"onNavClick('demo', null)\"><span>Demo</span></li>\n                        <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let section of sections\">\n                                <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\" (click)=\"onNavClick(section.id, null)\"><span>{{section.label}}</span></li>\n                            </ul>\n                        </li>\n                    </ng-container>\n                </ul>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-base-spacing-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-base-color-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:99;box-shadow:var(--eui-base-shadow-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-title{font-weight:700;padding:var(--eui-base-spacing-s)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 6rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-10)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-25)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-base-color-primary-100);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-base-spacing-2xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-base-spacing-m)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-grey-15)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}@media screen and (max-width: 767px){.doc-page-navigation-wrapper .doc-page-main-column{padding-right:0;width:100%}.doc-page-navigation-wrapper .doc-page-navigation-column{display:none;width:0}}@media screen and (min-width: 768px) and (max-width: 995px){.doc-page-navigation-wrapper .doc-page-main-column{width:80%}.doc-page-navigation-wrapper .doc-page-navigation-column{width:20%}}@media screen and (max-width: 1550px){.doc-page-api-iframe-wrapper{display:none}}\n"] }]

package/esm2020/lib/components/doc-sample/doc-sample.component.mjs CHANGED Viewed

@@ -137,7 +137,7 @@ export class DocSampleComponent {
     }
 }
 /** @nocollapse */ DocSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DocSampleComponent, deps: [{ token: i1.HttpClient }, { token: i2.UxAppShellService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DocSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DocSampleComponent, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", styleClass: "styleClass" }, ngImport: i0, template: "<div class=\"doc-sample-title\">\n    <div class=\"doc-sample-title__label\"><strong>{{label}}</strong></div>\n    <div class=\"doc-sample-title__items\">\n        <button type=\"button\"\n                euiButton euiPrimary euiSizeS\n                [euiOutline]=\"!isCodeExpanded\"\n                [isLoading]=\"isCodeLoading\"\n                [euiDisabled]=\"isCodeLoading\"\n                (click)=\"onToggleCode()\">\n            <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n            <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n            <span euiIcon iconClass=\"eui-icon-code\"></span>\n        </button>\n    </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-card euiNoContentPadding>\n        <eui-card-content>\n            <eui-tabs (tabSelect)=\"onSelectedTab($event)\">\n                <eui-tab [isVisible]=\"htmlContent\">\n                    <euiTabLabel>\n                        HTML\n                        <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n                <eui-tab [isVisible]=\"tsContent\">\n                    <euiTabLabel>\n                        TS\n                        <euiTabSubLabel>Typescript</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n                <eui-tab euiWarning [isVisible]=\"htmlContent && tsContent\">\n                    <euiTabLabel>\n                        Playground\n                        <euiTabSubLabel>Stackblitz <eui-chip euiSizeS euiWarning>Experimental</eui-chip></euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <eui-playground [typescriptContent]=\"tsContent\"\n                                        [htmlContent]=\"htmlContent\"\n                                        [activated]=\"playground_activated\"></eui-playground>\n                    </euiTabContent>\n                </eui-tab>\n        </eui-tabs>\n        </eui-card-content>\n    </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}.doc-sample-title__label{font-size:var(--eui-base-font-size-xl)}.doc-sample-title__items{display:flex;margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["onCollapsed", "collapse"] }, { kind: "component", type: i4.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i5.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiRaisedButton", "isLoading", "euiIconButton", "euiLineWrap"] }, { kind: "component", type: i6.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i6.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i6.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i6.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i6.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "directive", type: i8.EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: i9.PlaygroundComponent, selector: "eui-playground", inputs: ["title", "htmlContent", "typescriptContent", "activated", "modules"] }] });
+/** @nocollapse */ DocSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DocSampleComponent, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", styleClass: "styleClass" }, ngImport: i0, template: "<div class=\"doc-sample-title\">\n    <div class=\"doc-sample-title__label\"><strong>{{label}}</strong></div>\n    <div class=\"doc-sample-title__items\">\n        <button type=\"button\"\n                euiButton euiPrimary euiSizeS\n                [euiOutline]=\"!isCodeExpanded\"\n                [isLoading]=\"isCodeLoading\"\n                [euiDisabled]=\"isCodeLoading\"\n                (click)=\"onToggleCode()\">\n            <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n            <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n            <span euiIcon iconClass=\"eui-icon-code\"></span>\n        </button>\n    </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-card euiNoContentPadding>\n        <eui-card-content>\n            <eui-tabs (tabSelect)=\"onSelectedTab($event)\">\n                <eui-tab [isVisible]=\"htmlContent\">\n                    <euiTabLabel>\n                        HTML\n                        <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n                <eui-tab [isVisible]=\"tsContent\">\n                    <euiTabLabel>\n                        TS\n                        <euiTabSubLabel>Typescript</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n                <eui-tab euiWarning [isVisible]=\"htmlContent && tsContent\">\n                    <euiTabLabel>\n                        Playground\n                        <euiTabSubLabel>Stackblitz <eui-chip euiSizeS euiWarning>Experimental</eui-chip></euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <eui-playground [typescriptContent]=\"tsContent\"\n                                        [htmlContent]=\"htmlContent\"\n                                        [activated]=\"playground_activated\"></eui-playground>\n                    </euiTabContent>\n                </eui-tab>\n        </eui-tabs>\n        </eui-card-content>\n    </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}.doc-sample-title__label{font-size:var(--eui-base-font-size-xl)}.doc-sample-title__items{display:flex;margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["onCollapsed", "collapse"] }, { kind: "component", type: i4.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i5.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiRaisedButton", "isLoading", "euiIconButton", "euiLineWrap"] }, { kind: "component", type: i6.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isHandleChangeTab", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i6.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i6.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i6.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i6.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "directive", type: i8.EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: i9.PlaygroundComponent, selector: "eui-playground", inputs: ["title", "htmlContent", "typescriptContent", "activated", "modules"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DocSampleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-showcase-doc-sample', template: "<div class=\"doc-sample-title\">\n    <div class=\"doc-sample-title__label\"><strong>{{label}}</strong></div>\n    <div class=\"doc-sample-title__items\">\n        <button type=\"button\"\n                euiButton euiPrimary euiSizeS\n                [euiOutline]=\"!isCodeExpanded\"\n                [isLoading]=\"isCodeLoading\"\n                [euiDisabled]=\"isCodeLoading\"\n                (click)=\"onToggleCode()\">\n            <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n            <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n            <span euiIcon iconClass=\"eui-icon-code\"></span>\n        </button>\n    </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-card euiNoContentPadding>\n        <eui-card-content>\n            <eui-tabs (tabSelect)=\"onSelectedTab($event)\">\n                <eui-tab [isVisible]=\"htmlContent\">\n                    <euiTabLabel>\n                        HTML\n                        <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n                <eui-tab [isVisible]=\"tsContent\">\n                    <euiTabLabel>\n                        TS\n                        <euiTabSubLabel>Typescript</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n                <eui-tab euiWarning [isVisible]=\"htmlContent && tsContent\">\n                    <euiTabLabel>\n                        Playground\n                        <euiTabSubLabel>Stackblitz <eui-chip euiSizeS euiWarning>Experimental</eui-chip></euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <eui-playground [typescriptContent]=\"tsContent\"\n                                        [htmlContent]=\"htmlContent\"\n                                        [activated]=\"playground_activated\"></eui-playground>\n                    </euiTabContent>\n                </eui-tab>\n        </eui-tabs>\n        </eui-card-content>\n    </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}.doc-sample-title__label{font-size:var(--eui-base-font-size-xl)}.doc-sample-title__items{display:flex;margin-left:auto}\n"] }]

package/esm2020/lib/components/doc-section-code/doc-section-code.component.mjs CHANGED Viewed

@@ -16,7 +16,7 @@ export class DocSectionCodeComponent {
     }
 }
 /** @nocollapse */ DocSectionCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DocSectionCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DocSectionCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DocSectionCodeComponent, selector: "eui-showcase-doc-section-code", inputs: { label: "label", content: "content", styleClass: "styleClass", versionLabel: "versionLabel", isDeprecated: "isDeprecated", isCodeExpanded: "isCodeExpanded" }, queries: [{ propertyName: "sectionDescription", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeDescriptionTagDirective; }), descendants: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeHtmlTagDirective; }), descendants: true }, { propertyName: "sectionCodeTS", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeTsTagDirective; }), descendants: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeServiceTagDirective; }), descendants: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeCssTagDirective; }), descendants: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeDocTagDirective; }), descendants: true }], ngImport: i0, template: "<h5 class=\"section-title {{styleClass}}\">\n    <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n        <span [class.app-section-code--deprecated]=\"isDeprecated\">\n            {{label}}\n        </span>\n        <button type=\"button\" class=\"ux-button ux-button--small ux-button--accent ux-button--icon-only ml-2\" style=\"margin-top: -7px;\" (click)=\"toggleCode()\">\n            <span class=\"eui-icon eui-icon-code\"></span>\n        </button>\n        <div *ngIf=\"versionLabel\" class=\"ml-auto\">\n            <span class=\"eui-u-color-danger\">{{versionLabel}}</span>\n        </div>\n    </div>\n    <div *ngIf=\"isDeprecated\">\n        <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n    </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n    <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-tabs>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeHTML)\">\n            <euiTabLabel>\n                HTML\n                <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeTS)\">\n            <euiTabLabel>\n                TS\n                <euiTabSubLabel>Typescript</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE)\">\n            <euiTabLabel>Service</euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeCSS)\">\n            <euiTabLabel>CSS</euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeDOC)\">\n            <euiTabLabel>\n                DOC\n                <euiTabSubLabel>Documentation</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <div class=\"language-doc\"><ng-content select=\"sectionCodeDOC\"></ng-content></div>\n            </euiTabContent>\n        </eui-tab>\n    </eui-tabs>\n    <ng-template [ngIf]=\"!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS\">\n        <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content></ng-content></code></pre>\n    </ng-template>\n</ng-template>\n", styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i2.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i2.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i2.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i2.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "directive", type: i3.EuiCodeHighlighterDirective, selector: "[euiCode]" }] });
+/** @nocollapse */ DocSectionCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DocSectionCodeComponent, selector: "eui-showcase-doc-section-code", inputs: { label: "label", content: "content", styleClass: "styleClass", versionLabel: "versionLabel", isDeprecated: "isDeprecated", isCodeExpanded: "isCodeExpanded" }, queries: [{ propertyName: "sectionDescription", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeDescriptionTagDirective; }), descendants: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeHtmlTagDirective; }), descendants: true }, { propertyName: "sectionCodeTS", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeTsTagDirective; }), descendants: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeServiceTagDirective; }), descendants: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeCssTagDirective; }), descendants: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeDocTagDirective; }), descendants: true }], ngImport: i0, template: "<h5 class=\"section-title {{styleClass}}\">\n    <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n        <span [class.app-section-code--deprecated]=\"isDeprecated\">\n            {{label}}\n        </span>\n        <button type=\"button\" class=\"ux-button ux-button--small ux-button--accent ux-button--icon-only ml-2\" style=\"margin-top: -7px;\" (click)=\"toggleCode()\">\n            <span class=\"eui-icon eui-icon-code\"></span>\n        </button>\n        <div *ngIf=\"versionLabel\" class=\"ml-auto\">\n            <span class=\"eui-u-color-danger\">{{versionLabel}}</span>\n        </div>\n    </div>\n    <div *ngIf=\"isDeprecated\">\n        <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n    </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n    <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-tabs>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeHTML)\">\n            <euiTabLabel>\n                HTML\n                <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeTS)\">\n            <euiTabLabel>\n                TS\n                <euiTabSubLabel>Typescript</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE)\">\n            <euiTabLabel>Service</euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeCSS)\">\n            <euiTabLabel>CSS</euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeDOC)\">\n            <euiTabLabel>\n                DOC\n                <euiTabSubLabel>Documentation</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <div class=\"language-doc\"><ng-content select=\"sectionCodeDOC\"></ng-content></div>\n            </euiTabContent>\n        </eui-tab>\n    </eui-tabs>\n    <ng-template [ngIf]=\"!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS\">\n        <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content></ng-content></code></pre>\n    </ng-template>\n</ng-template>\n", styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isHandleChangeTab", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i2.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i2.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i2.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i2.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "directive", type: i3.EuiCodeHighlighterDirective, selector: "[euiCode]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DocSectionCodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-showcase-doc-section-code', template: "<h5 class=\"section-title {{styleClass}}\">\n    <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n        <span [class.app-section-code--deprecated]=\"isDeprecated\">\n            {{label}}\n        </span>\n        <button type=\"button\" class=\"ux-button ux-button--small ux-button--accent ux-button--icon-only ml-2\" style=\"margin-top: -7px;\" (click)=\"toggleCode()\">\n            <span class=\"eui-icon eui-icon-code\"></span>\n        </button>\n        <div *ngIf=\"versionLabel\" class=\"ml-auto\">\n            <span class=\"eui-u-color-danger\">{{versionLabel}}</span>\n        </div>\n    </div>\n    <div *ngIf=\"isDeprecated\">\n        <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n    </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n    <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-tabs>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeHTML)\">\n            <euiTabLabel>\n                HTML\n                <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeTS)\">\n            <euiTabLabel>\n                TS\n                <euiTabSubLabel>Typescript</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE)\">\n            <euiTabLabel>Service</euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeCSS)\">\n            <euiTabLabel>CSS</euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeDOC)\">\n            <euiTabLabel>\n                DOC\n                <euiTabSubLabel>Documentation</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <div class=\"language-doc\"><ng-content select=\"sectionCodeDOC\"></ng-content></div>\n            </euiTabContent>\n        </eui-tab>\n    </eui-tabs>\n    <ng-template [ngIf]=\"!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS\">\n        <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content></ng-content></code></pre>\n    </ng-template>\n</ng-template>\n", styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"] }]

package/fesm2015/eui-showcase.mjs CHANGED Viewed

@@ -571,7 +571,7 @@ class DocSampleComponent {
     }
 }
 /** @nocollapse */ DocSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DocSampleComponent, deps: [{ token: i2$1.HttpClient }, { token: i2.UxAppShellService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DocSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DocSampleComponent, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", styleClass: "styleClass" }, ngImport: i0, template: "<div class=\"doc-sample-title\">\n    <div class=\"doc-sample-title__label\"><strong>{{label}}</strong></div>\n    <div class=\"doc-sample-title__items\">\n        <button type=\"button\"\n                euiButton euiPrimary euiSizeS\n                [euiOutline]=\"!isCodeExpanded\"\n                [isLoading]=\"isCodeLoading\"\n                [euiDisabled]=\"isCodeLoading\"\n                (click)=\"onToggleCode()\">\n            <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n            <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n            <span euiIcon iconClass=\"eui-icon-code\"></span>\n        </button>\n    </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-card euiNoContentPadding>\n        <eui-card-content>\n            <eui-tabs (tabSelect)=\"onSelectedTab($event)\">\n                <eui-tab [isVisible]=\"htmlContent\">\n                    <euiTabLabel>\n                        HTML\n                        <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n                <eui-tab [isVisible]=\"tsContent\">\n                    <euiTabLabel>\n                        TS\n                        <euiTabSubLabel>Typescript</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n                <eui-tab euiWarning [isVisible]=\"htmlContent && tsContent\">\n                    <euiTabLabel>\n                        Playground\n                        <euiTabSubLabel>Stackblitz <eui-chip euiSizeS euiWarning>Experimental</eui-chip></euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <eui-playground [typescriptContent]=\"tsContent\"\n                                        [htmlContent]=\"htmlContent\"\n                                        [activated]=\"playground_activated\"></eui-playground>\n                    </euiTabContent>\n                </eui-tab>\n        </eui-tabs>\n        </eui-card-content>\n    </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}.doc-sample-title__label{font-size:var(--eui-base-font-size-xl)}.doc-sample-title__items{display:flex;margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["onCollapsed", "collapse"] }, { kind: "component", type: i4$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i5.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiRaisedButton", "isLoading", "euiIconButton", "euiLineWrap"] }, { kind: "component", type: i6.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i6.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i6.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i6.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i6.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: PlaygroundComponent, selector: "eui-playground", inputs: ["title", "htmlContent", "typescriptContent", "activated", "modules"] }] });
+/** @nocollapse */ DocSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DocSampleComponent, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", styleClass: "styleClass" }, ngImport: i0, template: "<div class=\"doc-sample-title\">\n    <div class=\"doc-sample-title__label\"><strong>{{label}}</strong></div>\n    <div class=\"doc-sample-title__items\">\n        <button type=\"button\"\n                euiButton euiPrimary euiSizeS\n                [euiOutline]=\"!isCodeExpanded\"\n                [isLoading]=\"isCodeLoading\"\n                [euiDisabled]=\"isCodeLoading\"\n                (click)=\"onToggleCode()\">\n            <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n            <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n            <span euiIcon iconClass=\"eui-icon-code\"></span>\n        </button>\n    </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-card euiNoContentPadding>\n        <eui-card-content>\n            <eui-tabs (tabSelect)=\"onSelectedTab($event)\">\n                <eui-tab [isVisible]=\"htmlContent\">\n                    <euiTabLabel>\n                        HTML\n                        <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n                <eui-tab [isVisible]=\"tsContent\">\n                    <euiTabLabel>\n                        TS\n                        <euiTabSubLabel>Typescript</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n                <eui-tab euiWarning [isVisible]=\"htmlContent && tsContent\">\n                    <euiTabLabel>\n                        Playground\n                        <euiTabSubLabel>Stackblitz <eui-chip euiSizeS euiWarning>Experimental</eui-chip></euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <eui-playground [typescriptContent]=\"tsContent\"\n                                        [htmlContent]=\"htmlContent\"\n                                        [activated]=\"playground_activated\"></eui-playground>\n                    </euiTabContent>\n                </eui-tab>\n        </eui-tabs>\n        </eui-card-content>\n    </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}.doc-sample-title__label{font-size:var(--eui-base-font-size-xl)}.doc-sample-title__items{display:flex;margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["onCollapsed", "collapse"] }, { kind: "component", type: i4$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i5.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiRaisedButton", "isLoading", "euiIconButton", "euiLineWrap"] }, { kind: "component", type: i6.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isHandleChangeTab", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i6.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i6.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i6.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i6.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: PlaygroundComponent, selector: "eui-playground", inputs: ["title", "htmlContent", "typescriptContent", "activated", "modules"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DocSampleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-showcase-doc-sample', template: "<div class=\"doc-sample-title\">\n    <div class=\"doc-sample-title__label\"><strong>{{label}}</strong></div>\n    <div class=\"doc-sample-title__items\">\n        <button type=\"button\"\n                euiButton euiPrimary euiSizeS\n                [euiOutline]=\"!isCodeExpanded\"\n                [isLoading]=\"isCodeLoading\"\n                [euiDisabled]=\"isCodeLoading\"\n                (click)=\"onToggleCode()\">\n            <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n            <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n            <span euiIcon iconClass=\"eui-icon-code\"></span>\n        </button>\n    </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-card euiNoContentPadding>\n        <eui-card-content>\n            <eui-tabs (tabSelect)=\"onSelectedTab($event)\">\n                <eui-tab [isVisible]=\"htmlContent\">\n                    <euiTabLabel>\n                        HTML\n                        <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n                <eui-tab [isVisible]=\"tsContent\">\n                    <euiTabLabel>\n                        TS\n                        <euiTabSubLabel>Typescript</euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n                    </euiTabContent>\n                </eui-tab>\n                <eui-tab euiWarning [isVisible]=\"htmlContent && tsContent\">\n                    <euiTabLabel>\n                        Playground\n                        <euiTabSubLabel>Stackblitz <eui-chip euiSizeS euiWarning>Experimental</eui-chip></euiTabSubLabel>\n                    </euiTabLabel>\n                    <euiTabContent>\n                        <eui-playground [typescriptContent]=\"tsContent\"\n                                        [htmlContent]=\"htmlContent\"\n                                        [activated]=\"playground_activated\"></eui-playground>\n                    </euiTabContent>\n                </eui-tab>\n        </eui-tabs>\n        </eui-card-content>\n    </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}.doc-sample-title__label{font-size:var(--eui-base-font-size-xl)}.doc-sample-title__items{display:flex;margin-left:auto}\n"] }]
@@ -836,7 +836,7 @@ class DocPageComponent {
     }
 }
 /** @nocollapse */ DocPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DocPageComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.UxAppShellService }, { token: i3$1.DomSanitizer }, { token: i4.Location }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DocPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DocPageComponent, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", codeFolder: "codeFolder", showcase: "showcase" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(function () { return DocPageOverviewContentDirective; }) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(function () { return DocPageSamplesContentDirective; }) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(function () { return DocPageSectionsContentDirective; }) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(function () { return DocPageInteractiveContentDirective; }) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(function () { return DocPageAccessibilityContentDirective; }) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(function () { return DocPageApiContentDirective; }) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(function () { return DocPageThemingContentDirective; }) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i0, template: "<div class=\"doc-page-navigation-wrapper\" [class.eui-u-hidden]=\"isLoading\">\n    <div class=\"doc-page-main-column\">\n        <eui-page>\n            <eui-page-header label=\"{{label}}\" subLabel=\"{{subLabel}}\">\n                <eui-page-header-action-items>\n                    <eui-showcase-doc-page-code *ngIf=\"codeFolder\" codeFolder=\"{{codeFolder}}\" showcase=\"{{showcase}}\"></eui-showcase-doc-page-code>\n                    <eui-chip *ngIf=\"stateLabel\" [euiSuccess]=\"stateLabel === 'ACTIVE'\" [euiWarning]=\"stateLabel === 'NOT READY'\" [euiDanger]=\"stateLabel === 'DEPRECATED'\">\n                        <span euiLabel><strong>{{stateLabel}}</strong></span>\n                    </eui-chip>\n                </eui-page-header-action-items>\n            </eui-page-header>\n\n            <eui-page-content>\n                <eui-alert *ngIf=\"stateLabel === 'NOT READY' || isNotReady\" euiWarning>\n                    <p>\n                        This component <strong class=\"eui-u-color-warning-darkester-2\">is not ready for production</strong> usage yet, it's API is still subject to change during the coming weeks.\n                    </p>\n                    <p>\n                        For experimentation use only.\n                    </p>\n                </eui-alert>\n\n                <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiDanger>\n                    <p>\n                        This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n                    </p>\n                    <div *ngIf=\"cmp\">\n                        <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n                            It has been replaced by : <strong class=\"eui-u-color-success-darkest\">{{cmp.cmpReplacement}}</strong>.\n                            <!-- <br><br>\n                            You can find more information on the new component here : <a [routerLink]=\"cmp.cmpReplacementUrl\">{{cmp.cmpReplacementUrl}}</a> -->\n                        </div>\n                        <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n                            This component will be <strong>discontinued in future version of eUI</strong>\n                        </div>\n                        <div *ngIf=\"cmp.cmpReplacementNote\">\n                            <strong class=\"eui-u-color-warning\">{{cmp.cmpReplacementNote}}</strong>\n                        </div>\n                    </div>\n                </eui-alert>\n\n                <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n\n                <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelected)=\"onTabSelected($event)\">\n                    <eui-tab>\n                        <euiTabLabel>\n                            OVERVIEW\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"overview\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Overview</h4>\n                            <div *ngIf=\"pageOverviewContent.length > 0; else noOverview\">\n                                <ng-content select=\"docPageOverview\"></ng-content>\n                            </div>\n                            <ng-template #noOverview>\n                                Coming soon...\n                            </ng-template>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            API\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <ng-container *ngIf=\"apiUrlSafe\">\n                                <div class=\"flex-container\">\n                                    <a href=\"{{apiUrl}}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n                                </div>\n                                <div class=\"doc-page-api-iframe-wrapper\">\n                                    <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\"></iframe>\n                                </div>\n                            </ng-container>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            A11Y\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"accessibility\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Accessibility</h4>\n                            <ng-content select=\"docPageAccessibility\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            OPTIONS & SAMPLES\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"samples\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Options & samples</h4>\n                            <ng-content select=\"docPageSamples\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n                        <euiTabLabel>\n                            THEMING\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"theming\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Theming</h4>\n                            <ng-content select=\"docPageTheming\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n                        <euiTabLabel>\n                            {{pageInteractiveContent.first.title}}\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"interactive\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">\n                                {{pageInteractiveContent.first.subTitle}}\n                            </h4>\n                            <ng-content select=\"docPageInteractive\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n                </eui-tabs>\n\n                <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                    <h4 id=\"demo\" *ngIf=\"sections.length === 0\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Demo</h4>\n                    <ng-content select=\"docPageSections\"></ng-content>\n                </ng-container>\n            </eui-page-content>\n        </eui-page>\n    </div>\n\n    <div class=\"doc-page-navigation-column eui-u-hidden-desktop-down\">\n        <div id=\"doc-page-nav\">\n            <div class=\"doc-page-navigation-title\">In this page</div>\n            <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n                <ul class=\"doc-page-navigation\">\n                    <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n                        <!-- ALWAYS PRESENT in each page-->\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'overview'\" (click)=\"onNavClick('overview', 0)\"><span>OVERVIEW</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\" (click)=\"onNavClick('api', 1)\"><span>API</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\" (click)=\"onNavClick('a11y', 2)\"><span>A11Y</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\" (click)=\"onNavClick('samples', 3)\"><span>OPTIONS & SAMPLES</span></li>\n                        <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let sample of samples\">\n                                <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\" (click)=\"onNavClick(sample.id, 3)\"><span>{{sample.label}}</span></li>\n                            </ul>\n                        </li>\n\n                        <!-- OPTIONAL TABS-->\n                        <ng-container *ngIf=\"pageThemingContent.length > 0\">\n                            <li *ngIf=\"pageThemingContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\" (click)=\"onNavClick('theming', 4)\"><span>THEMING</span></li>\n                            <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 5)\">\n                                <span>{{pageInteractiveContent.first.title}}</span>\n                            </li>\n                        </ng-container>\n                        <ng-container *ngIf=\"pageThemingContent.length  === 0\">\n                            <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 4)\">\n                                <span>{{pageInteractiveContent.first.title}}</span>\n                            </li>\n                        </ng-container>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\" (click)=\"onNavClick('sections', null)\"><span>Sections</span></li>\n                        <li *ngIf=\"sections.length === 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\" (click)=\"onNavClick('demo', null)\"><span>Demo</span></li>\n                        <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let section of sections\">\n                                <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\" (click)=\"onNavClick(section.id, null)\"><span>{{section.label}}</span></li>\n                            </ul>\n                        </li>\n                    </ng-container>\n                </ul>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-base-spacing-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-base-color-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:99;box-shadow:var(--eui-base-shadow-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-title{font-weight:700;padding:var(--eui-base-spacing-s)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 6rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-10)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-25)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-base-color-primary-100);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-base-spacing-2xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-base-spacing-m)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-grey-15)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}@media screen and (max-width: 767px){.doc-page-navigation-wrapper .doc-page-main-column{padding-right:0;width:100%}.doc-page-navigation-wrapper .doc-page-navigation-column{display:none;width:0}}@media screen and (min-width: 768px) and (max-width: 995px){.doc-page-navigation-wrapper .doc-page-main-column{width:80%}.doc-page-navigation-wrapper .doc-page-navigation-column{width:20%}}@media screen and (max-width: 1550px){.doc-page-api-iframe-wrapper{display:none}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i6.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i6.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i6.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i6$1.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i6$1.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i6$1.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "isCollapsible", "isCollapsed", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "directive", type: i6$1.EuiPageHeaderActionItemsContentDirective, selector: "eui-page-header-action-items" }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i8.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["euiAlertMuted", "isCloseable"], outputs: ["close"] }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ DocPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DocPageComponent, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", codeFolder: "codeFolder", showcase: "showcase" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(function () { return DocPageOverviewContentDirective; }) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(function () { return DocPageSamplesContentDirective; }) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(function () { return DocPageSectionsContentDirective; }) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(function () { return DocPageInteractiveContentDirective; }) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(function () { return DocPageAccessibilityContentDirective; }) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(function () { return DocPageApiContentDirective; }) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(function () { return DocPageThemingContentDirective; }) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i0, template: "<div class=\"doc-page-navigation-wrapper\" [class.eui-u-hidden]=\"isLoading\">\n    <div class=\"doc-page-main-column\">\n        <eui-page>\n            <eui-page-header label=\"{{label}}\" subLabel=\"{{subLabel}}\">\n                <eui-page-header-action-items>\n                    <eui-showcase-doc-page-code *ngIf=\"codeFolder\" codeFolder=\"{{codeFolder}}\" showcase=\"{{showcase}}\"></eui-showcase-doc-page-code>\n                    <eui-chip *ngIf=\"stateLabel\" [euiSuccess]=\"stateLabel === 'ACTIVE'\" [euiWarning]=\"stateLabel === 'NOT READY'\" [euiDanger]=\"stateLabel === 'DEPRECATED'\">\n                        <span euiLabel><strong>{{stateLabel}}</strong></span>\n                    </eui-chip>\n                </eui-page-header-action-items>\n            </eui-page-header>\n\n            <eui-page-content>\n                <eui-alert *ngIf=\"stateLabel === 'NOT READY' || isNotReady\" euiWarning>\n                    <p>\n                        This component <strong class=\"eui-u-color-warning-darkester-2\">is not ready for production</strong> usage yet, it's API is still subject to change during the coming weeks.\n                    </p>\n                    <p>\n                        For experimentation use only.\n                    </p>\n                </eui-alert>\n\n                <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiDanger>\n                    <p>\n                        This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n                    </p>\n                    <div *ngIf=\"cmp\">\n                        <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n                            It has been replaced by : <strong class=\"eui-u-color-success-darkest\">{{cmp.cmpReplacement}}</strong>.\n                            <!-- <br><br>\n                            You can find more information on the new component here : <a [routerLink]=\"cmp.cmpReplacementUrl\">{{cmp.cmpReplacementUrl}}</a> -->\n                        </div>\n                        <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n                            This component will be <strong>discontinued in future version of eUI</strong>\n                        </div>\n                        <div *ngIf=\"cmp.cmpReplacementNote\">\n                            <strong class=\"eui-u-color-warning\">{{cmp.cmpReplacementNote}}</strong>\n                        </div>\n                    </div>\n                </eui-alert>\n\n                <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n\n                <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelected)=\"onTabSelected($event)\">\n                    <eui-tab>\n                        <euiTabLabel>\n                            OVERVIEW\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"overview\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Overview</h4>\n                            <div *ngIf=\"pageOverviewContent.length > 0; else noOverview\">\n                                <ng-content select=\"docPageOverview\"></ng-content>\n                            </div>\n                            <ng-template #noOverview>\n                                Coming soon...\n                            </ng-template>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            API\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <ng-container *ngIf=\"apiUrlSafe\">\n                                <div class=\"flex-container\">\n                                    <a href=\"{{apiUrl}}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n                                </div>\n                                <div class=\"doc-page-api-iframe-wrapper\">\n                                    <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\"></iframe>\n                                </div>\n                            </ng-container>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            A11Y\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"accessibility\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Accessibility</h4>\n                            <ng-content select=\"docPageAccessibility\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            OPTIONS & SAMPLES\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"samples\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Options & samples</h4>\n                            <ng-content select=\"docPageSamples\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n                        <euiTabLabel>\n                            THEMING\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"theming\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Theming</h4>\n                            <ng-content select=\"docPageTheming\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n                        <euiTabLabel>\n                            {{pageInteractiveContent.first.title}}\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"interactive\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">\n                                {{pageInteractiveContent.first.subTitle}}\n                            </h4>\n                            <ng-content select=\"docPageInteractive\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n                </eui-tabs>\n\n                <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                    <h4 id=\"demo\" *ngIf=\"sections.length === 0\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Demo</h4>\n                    <ng-content select=\"docPageSections\"></ng-content>\n                </ng-container>\n            </eui-page-content>\n        </eui-page>\n    </div>\n\n    <div class=\"doc-page-navigation-column eui-u-hidden-desktop-down\">\n        <div id=\"doc-page-nav\">\n            <div class=\"doc-page-navigation-title\">In this page</div>\n            <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n                <ul class=\"doc-page-navigation\">\n                    <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n                        <!-- ALWAYS PRESENT in each page-->\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'overview'\" (click)=\"onNavClick('overview', 0)\"><span>OVERVIEW</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\" (click)=\"onNavClick('api', 1)\"><span>API</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\" (click)=\"onNavClick('a11y', 2)\"><span>A11Y</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\" (click)=\"onNavClick('samples', 3)\"><span>OPTIONS & SAMPLES</span></li>\n                        <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let sample of samples\">\n                                <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\" (click)=\"onNavClick(sample.id, 3)\"><span>{{sample.label}}</span></li>\n                            </ul>\n                        </li>\n\n                        <!-- OPTIONAL TABS-->\n                        <ng-container *ngIf=\"pageThemingContent.length > 0\">\n                            <li *ngIf=\"pageThemingContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\" (click)=\"onNavClick('theming', 4)\"><span>THEMING</span></li>\n                            <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 5)\">\n                                <span>{{pageInteractiveContent.first.title}}</span>\n                            </li>\n                        </ng-container>\n                        <ng-container *ngIf=\"pageThemingContent.length  === 0\">\n                            <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 4)\">\n                                <span>{{pageInteractiveContent.first.title}}</span>\n                            </li>\n                        </ng-container>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\" (click)=\"onNavClick('sections', null)\"><span>Sections</span></li>\n                        <li *ngIf=\"sections.length === 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\" (click)=\"onNavClick('demo', null)\"><span>Demo</span></li>\n                        <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let section of sections\">\n                                <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\" (click)=\"onNavClick(section.id, null)\"><span>{{section.label}}</span></li>\n                            </ul>\n                        </li>\n                    </ng-container>\n                </ul>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-base-spacing-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-base-color-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:99;box-shadow:var(--eui-base-shadow-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-title{font-weight:700;padding:var(--eui-base-spacing-s)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 6rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-10)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-25)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-base-color-primary-100);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-base-spacing-2xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-base-spacing-m)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-grey-15)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}@media screen and (max-width: 767px){.doc-page-navigation-wrapper .doc-page-main-column{padding-right:0;width:100%}.doc-page-navigation-wrapper .doc-page-navigation-column{display:none;width:0}}@media screen and (min-width: 768px) and (max-width: 995px){.doc-page-navigation-wrapper .doc-page-main-column{width:80%}.doc-page-navigation-wrapper .doc-page-navigation-column{width:20%}}@media screen and (max-width: 1550px){.doc-page-api-iframe-wrapper{display:none}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isHandleChangeTab", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i6.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i6.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i6.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i6$1.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i6$1.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i6$1.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "isCollapsible", "isCollapsed", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "directive", type: i6$1.EuiPageHeaderActionItemsContentDirective, selector: "eui-page-header-action-items" }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i8.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["euiAlertMuted", "isCloseable"], outputs: ["close"] }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DocPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-showcase-doc-page', encapsulation: ViewEncapsulation.None, template: "<div class=\"doc-page-navigation-wrapper\" [class.eui-u-hidden]=\"isLoading\">\n    <div class=\"doc-page-main-column\">\n        <eui-page>\n            <eui-page-header label=\"{{label}}\" subLabel=\"{{subLabel}}\">\n                <eui-page-header-action-items>\n                    <eui-showcase-doc-page-code *ngIf=\"codeFolder\" codeFolder=\"{{codeFolder}}\" showcase=\"{{showcase}}\"></eui-showcase-doc-page-code>\n                    <eui-chip *ngIf=\"stateLabel\" [euiSuccess]=\"stateLabel === 'ACTIVE'\" [euiWarning]=\"stateLabel === 'NOT READY'\" [euiDanger]=\"stateLabel === 'DEPRECATED'\">\n                        <span euiLabel><strong>{{stateLabel}}</strong></span>\n                    </eui-chip>\n                </eui-page-header-action-items>\n            </eui-page-header>\n\n            <eui-page-content>\n                <eui-alert *ngIf=\"stateLabel === 'NOT READY' || isNotReady\" euiWarning>\n                    <p>\n                        This component <strong class=\"eui-u-color-warning-darkester-2\">is not ready for production</strong> usage yet, it's API is still subject to change during the coming weeks.\n                    </p>\n                    <p>\n                        For experimentation use only.\n                    </p>\n                </eui-alert>\n\n                <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiDanger>\n                    <p>\n                        This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n                    </p>\n                    <div *ngIf=\"cmp\">\n                        <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n                            It has been replaced by : <strong class=\"eui-u-color-success-darkest\">{{cmp.cmpReplacement}}</strong>.\n                            <!-- <br><br>\n                            You can find more information on the new component here : <a [routerLink]=\"cmp.cmpReplacementUrl\">{{cmp.cmpReplacementUrl}}</a> -->\n                        </div>\n                        <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n                            This component will be <strong>discontinued in future version of eUI</strong>\n                        </div>\n                        <div *ngIf=\"cmp.cmpReplacementNote\">\n                            <strong class=\"eui-u-color-warning\">{{cmp.cmpReplacementNote}}</strong>\n                        </div>\n                    </div>\n                </eui-alert>\n\n                <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n\n                <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelected)=\"onTabSelected($event)\">\n                    <eui-tab>\n                        <euiTabLabel>\n                            OVERVIEW\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"overview\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Overview</h4>\n                            <div *ngIf=\"pageOverviewContent.length > 0; else noOverview\">\n                                <ng-content select=\"docPageOverview\"></ng-content>\n                            </div>\n                            <ng-template #noOverview>\n                                Coming soon...\n                            </ng-template>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            API\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <ng-container *ngIf=\"apiUrlSafe\">\n                                <div class=\"flex-container\">\n                                    <a href=\"{{apiUrl}}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n                                </div>\n                                <div class=\"doc-page-api-iframe-wrapper\">\n                                    <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\"></iframe>\n                                </div>\n                            </ng-container>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            A11Y\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"accessibility\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Accessibility</h4>\n                            <ng-content select=\"docPageAccessibility\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab>\n                        <euiTabLabel>\n                            OPTIONS & SAMPLES\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"samples\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Options & samples</h4>\n                            <ng-content select=\"docPageSamples\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n                        <euiTabLabel>\n                            THEMING\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"theming\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Theming</h4>\n                            <ng-content select=\"docPageTheming\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n\n                    <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n                        <euiTabLabel>\n                            {{pageInteractiveContent.first.title}}\n                        </euiTabLabel>\n                        <euiTabContent>\n                            <h4 id=\"interactive\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">\n                                {{pageInteractiveContent.first.subTitle}}\n                            </h4>\n                            <ng-content select=\"docPageInteractive\"></ng-content>\n                        </euiTabContent>\n                    </eui-tab>\n                </eui-tabs>\n\n                <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                    <h4 id=\"demo\" *ngIf=\"sections.length === 0\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Demo</h4>\n                    <ng-content select=\"docPageSections\"></ng-content>\n                </ng-container>\n            </eui-page-content>\n        </eui-page>\n    </div>\n\n    <div class=\"doc-page-navigation-column eui-u-hidden-desktop-down\">\n        <div id=\"doc-page-nav\">\n            <div class=\"doc-page-navigation-title\">In this page</div>\n            <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n                <ul class=\"doc-page-navigation\">\n                    <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n                        <!-- ALWAYS PRESENT in each page-->\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'overview'\" (click)=\"onNavClick('overview', 0)\"><span>OVERVIEW</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\" (click)=\"onNavClick('api', 1)\"><span>API</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\" (click)=\"onNavClick('a11y', 2)\"><span>A11Y</span></li>\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\" (click)=\"onNavClick('samples', 3)\"><span>OPTIONS & SAMPLES</span></li>\n                        <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let sample of samples\">\n                                <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\" (click)=\"onNavClick(sample.id, 3)\"><span>{{sample.label}}</span></li>\n                            </ul>\n                        </li>\n\n                        <!-- OPTIONAL TABS-->\n                        <ng-container *ngIf=\"pageThemingContent.length > 0\">\n                            <li *ngIf=\"pageThemingContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\" (click)=\"onNavClick('theming', 4)\"><span>THEMING</span></li>\n                            <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 5)\">\n                                <span>{{pageInteractiveContent.first.title}}</span>\n                            </li>\n                        </ng-container>\n                        <ng-container *ngIf=\"pageThemingContent.length  === 0\">\n                            <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 4)\">\n                                <span>{{pageInteractiveContent.first.title}}</span>\n                            </li>\n                        </ng-container>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n                        <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\" (click)=\"onNavClick('sections', null)\"><span>Sections</span></li>\n                        <li *ngIf=\"sections.length === 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\" (click)=\"onNavClick('demo', null)\"><span>Demo</span></li>\n                        <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                            <ul *ngFor=\"let section of sections\">\n                                <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\" (click)=\"onNavClick(section.id, null)\"><span>{{section.label}}</span></li>\n                            </ul>\n                        </li>\n                    </ng-container>\n                </ul>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-base-spacing-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-base-color-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:99;box-shadow:var(--eui-base-shadow-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-title{font-weight:700;padding:var(--eui-base-spacing-s)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 6rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-10)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-25)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-base-color-primary-100);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-base-spacing-2xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-base-spacing-m)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-grey-15)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}@media screen and (max-width: 767px){.doc-page-navigation-wrapper .doc-page-main-column{padding-right:0;width:100%}.doc-page-navigation-wrapper .doc-page-navigation-column{display:none;width:0}}@media screen and (min-width: 768px) and (max-width: 995px){.doc-page-navigation-wrapper .doc-page-main-column{width:80%}.doc-page-navigation-wrapper .doc-page-navigation-column{width:20%}}@media screen and (max-width: 1550px){.doc-page-api-iframe-wrapper{display:none}}\n"] }]
@@ -974,7 +974,7 @@ class DocSectionCodeComponent {
     }
 }
 /** @nocollapse */ DocSectionCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DocSectionCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DocSectionCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DocSectionCodeComponent, selector: "eui-showcase-doc-section-code", inputs: { label: "label", content: "content", styleClass: "styleClass", versionLabel: "versionLabel", isDeprecated: "isDeprecated", isCodeExpanded: "isCodeExpanded" }, queries: [{ propertyName: "sectionDescription", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeDescriptionTagDirective; }), descendants: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeHtmlTagDirective; }), descendants: true }, { propertyName: "sectionCodeTS", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeTsTagDirective; }), descendants: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeServiceTagDirective; }), descendants: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeCssTagDirective; }), descendants: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeDocTagDirective; }), descendants: true }], ngImport: i0, template: "<h5 class=\"section-title {{styleClass}}\">\n    <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n        <span [class.app-section-code--deprecated]=\"isDeprecated\">\n            {{label}}\n        </span>\n        <button type=\"button\" class=\"ux-button ux-button--small ux-button--accent ux-button--icon-only ml-2\" style=\"margin-top: -7px;\" (click)=\"toggleCode()\">\n            <span class=\"eui-icon eui-icon-code\"></span>\n        </button>\n        <div *ngIf=\"versionLabel\" class=\"ml-auto\">\n            <span class=\"eui-u-color-danger\">{{versionLabel}}</span>\n        </div>\n    </div>\n    <div *ngIf=\"isDeprecated\">\n        <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n    </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n    <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-tabs>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeHTML)\">\n            <euiTabLabel>\n                HTML\n                <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeTS)\">\n            <euiTabLabel>\n                TS\n                <euiTabSubLabel>Typescript</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE)\">\n            <euiTabLabel>Service</euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeCSS)\">\n            <euiTabLabel>CSS</euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeDOC)\">\n            <euiTabLabel>\n                DOC\n                <euiTabSubLabel>Documentation</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <div class=\"language-doc\"><ng-content select=\"sectionCodeDOC\"></ng-content></div>\n            </euiTabContent>\n        </eui-tab>\n    </eui-tabs>\n    <ng-template [ngIf]=\"!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS\">\n        <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content></ng-content></code></pre>\n    </ng-template>\n</ng-template>\n", styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i6.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i6.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i6.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i6.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }] });
+/** @nocollapse */ DocSectionCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DocSectionCodeComponent, selector: "eui-showcase-doc-section-code", inputs: { label: "label", content: "content", styleClass: "styleClass", versionLabel: "versionLabel", isDeprecated: "isDeprecated", isCodeExpanded: "isCodeExpanded" }, queries: [{ propertyName: "sectionDescription", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeDescriptionTagDirective; }), descendants: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeHtmlTagDirective; }), descendants: true }, { propertyName: "sectionCodeTS", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeTsTagDirective; }), descendants: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeServiceTagDirective; }), descendants: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeCssTagDirective; }), descendants: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeDocTagDirective; }), descendants: true }], ngImport: i0, template: "<h5 class=\"section-title {{styleClass}}\">\n    <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n        <span [class.app-section-code--deprecated]=\"isDeprecated\">\n            {{label}}\n        </span>\n        <button type=\"button\" class=\"ux-button ux-button--small ux-button--accent ux-button--icon-only ml-2\" style=\"margin-top: -7px;\" (click)=\"toggleCode()\">\n            <span class=\"eui-icon eui-icon-code\"></span>\n        </button>\n        <div *ngIf=\"versionLabel\" class=\"ml-auto\">\n            <span class=\"eui-u-color-danger\">{{versionLabel}}</span>\n        </div>\n    </div>\n    <div *ngIf=\"isDeprecated\">\n        <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n    </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n    <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-tabs>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeHTML)\">\n            <euiTabLabel>\n                HTML\n                <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeTS)\">\n            <euiTabLabel>\n                TS\n                <euiTabSubLabel>Typescript</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE)\">\n            <euiTabLabel>Service</euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeCSS)\">\n            <euiTabLabel>CSS</euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeDOC)\">\n            <euiTabLabel>\n                DOC\n                <euiTabSubLabel>Documentation</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <div class=\"language-doc\"><ng-content select=\"sectionCodeDOC\"></ng-content></div>\n            </euiTabContent>\n        </eui-tab>\n    </eui-tabs>\n    <ng-template [ngIf]=\"!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS\">\n        <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content></ng-content></code></pre>\n    </ng-template>\n</ng-template>\n", styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isHandleChangeTab", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i6.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i6.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i6.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i6.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DocSectionCodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-showcase-doc-section-code', template: "<h5 class=\"section-title {{styleClass}}\">\n    <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n        <span [class.app-section-code--deprecated]=\"isDeprecated\">\n            {{label}}\n        </span>\n        <button type=\"button\" class=\"ux-button ux-button--small ux-button--accent ux-button--icon-only ml-2\" style=\"margin-top: -7px;\" (click)=\"toggleCode()\">\n            <span class=\"eui-icon eui-icon-code\"></span>\n        </button>\n        <div *ngIf=\"versionLabel\" class=\"ml-auto\">\n            <span class=\"eui-u-color-danger\">{{versionLabel}}</span>\n        </div>\n    </div>\n    <div *ngIf=\"isDeprecated\">\n        <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n    </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n    <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n    <eui-tabs>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeHTML)\">\n            <euiTabLabel>\n                HTML\n                <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeTS)\">\n            <euiTabLabel>\n                TS\n                <euiTabSubLabel>Typescript</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE)\">\n            <euiTabLabel>Service</euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeCSS)\">\n            <euiTabLabel>CSS</euiTabLabel>\n            <euiTabContent>\n                <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\"></ng-content></code></pre>\n            </euiTabContent>\n        </eui-tab>\n        <eui-tab [isVisible]=\"isDefined(sectionCodeDOC)\">\n            <euiTabLabel>\n                DOC\n                <euiTabSubLabel>Documentation</euiTabSubLabel>\n            </euiTabLabel>\n            <euiTabContent>\n                <div class=\"language-doc\"><ng-content select=\"sectionCodeDOC\"></ng-content></div>\n            </euiTabContent>\n        </eui-tab>\n    </eui-tabs>\n    <ng-template [ngIf]=\"!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS\">\n        <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content></ng-content></code></pre>\n    </ng-template>\n</ng-template>\n", styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"] }]