@eui/showcase 22.0.0-alpha.5 → 22.0.0-alpha.8

package/fesm2022/eui-showcase.mjs

@@ -730,6 +730,8 @@ class DocSampleComponent {
         this.renderPlayground = input(null, { ...(ngDevMode ? { debugName: "renderPlayground" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.isCodeButtonVisible = input(true, { ...(ngDevMode ? { debugName: "isCodeButtonVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.isInnerSection = input(false, { ...(ngDevMode ? { debugName: "isInnerSection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Host element ref — used by the doc-page to tell which projected section a sample belongs to. */
+        this.elementRef = inject(ElementRef);
         this.isCodeLoaded = false;
         this.isCodeLoading = false;
         this.isCodeExpanded = false;
@@ -1080,7 +1082,7 @@ class DocPageComponent {
             }
             // constructing categories, if at least one set, if not backward compat with old display
             const categoriesJson = {};
-            this.samples().forEach((s) => {
+            this.mainSamples().forEach((s) => {
                 // "Default" or "_default" sample are always put first in the nav list
                 const id = s.id();
                 const category = s.category();
@@ -1152,6 +1154,15 @@ class DocPageComponent {
         const category = this.CATEGORIES_DEF.find(cat => cat.id.toLowerCase() === name.toLowerCase());
         return category ? category.index : this.CATEGORIES_DEF.find(cat => cat.id === 'free-category').index;
     }
+    /**
+     * Samples that belong to the main "Options & samples" tab — i.e. everything EXCEPT
+     * the samples projected inside the optional `docPageWebComponent` section (which has its
+     * own tab). Without this filter the WebComponent samples would be double-counted into the
+     * main samples list and navigation.
+     */
+    mainSamples() {
+        return this.samples().filter(s => !s.elementRef?.nativeElement?.closest('docPageWebComponent'));
+    }
     ngOnDestroy() {
         if (this.scrollObserver) {
             this.scrollObserver.disconnect();
@@ -1187,7 +1198,7 @@ class DocPageComponent {
     }
     _buildCategories() {
         const categoriesJson = {};
-        this.samples().forEach((s) => {
+        this.mainSamples().forEach((s) => {
             const id = s.id();
             const category = s.category();
             const isDefault = id === '_default' || id === 'Default' || id === 'default';
@@ -1400,7 +1411,7 @@ class DocPageComponent {
         return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DocPageComponent, isStandalone: true, selector: "eui-showcase-doc-page", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, isNotReady: { classPropertyName: "isNotReady", publicName: "isNotReady", isSignal: true, isRequired: false, transformFunction: null }, isDeprecated: { classPropertyName: "isDeprecated", publicName: "isDeprecated", isSignal: true, isRequired: false, transformFunction: null }, isDemoComponentOnly: { classPropertyName: "isDemoComponentOnly", publicName: "isDemoComponentOnly", isSignal: true, isRequired: false, transformFunction: null }, isLegacy: { classPropertyName: "isLegacy", publicName: "isLegacy", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, showcase: { classPropertyName: "showcase", publicName: "showcase", isSignal: true, isRequired: false, transformFunction: null }, isNavigationVisible: { classPropertyName: "isNavigationVisible", publicName: "isNavigationVisible", isSignal: true, isRequired: false, transformFunction: null }, hasApi: { classPropertyName: "hasApi", publicName: "hasApi", isSignal: true, isRequired: false, transformFunction: null }, hasA11y: { classPropertyName: "hasA11y", publicName: "hasA11y", isSignal: true, isRequired: false, transformFunction: null }, customApiUrl: { classPropertyName: "customApiUrl", publicName: "customApiUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isNavigationVisible: "isNavigationVisibleChange" }, host: { classAttribute: "eui-doc-page" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true, isSignal: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true, isSignal: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirective), isSignal: true }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirective), isSignal: true }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirective), isSignal: true }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirective), isSignal: true }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirective), isSignal: true }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirective), isSignal: true }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirective), isSignal: true }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirective), isSignal: true }, { propertyName: "pageVisualSpecsContent", predicate: i0.forwardRef(() => DocPageVisualSpecsContentDirective) }, { propertyName: "pagePlaygroundContent", predicate: i0.forwardRef(() => DocPagePlaygroundContentDirective) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true, isSignal: true }, { propertyName: "navContent", first: true, predicate: ["navContent"], descendants: true }], ngImport: i0, template: "<eui-page>\n    <eui-page-content>\n        <eui-page-columns>\n            <eui-page-column>\n                <eui-page-column-body>\n                    <eui-page-header label=\"{{ label() || id() }}\" subLabel=\"{{ subLabel() }}\" class=\"eui-doc-page-title\">\n                        <eui-page-header-action-items>\n                          @if (codeFolder()) {\n                            <eui-showcase-doc-page-code\n                                codeFolder=\"{{ codeFolder() }}\"\n                                showcase=\"{{ showcase() }}\" />\n                          }\n                          @if (stateLabel) {\n                            <eui-chip euiSizeS isFilled\n                                [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                                [euiInfo]=\"isNotReadyInput()\"\n                                [euiWarning]=\"isDeprecatedInput()\"\n                                [euiDanger]=\"isDemoComponentOnly()\">\n                                {{ stateLabel }}\n                            </eui-chip>\n                          }\n                        </eui-page-header-action-items>\n                    </eui-page-header>\n\n          @if (stateLabel === 'LEGACY' || isLegacyInput()) {\n            <eui-alert euiDanger class=\"eui-u-mb-xl\">\n              <eui-alert-title>LEGACY component</eui-alert-title>\n              <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n              @if (cmp) {\n                <div>\n                  @if (cmp.cmpReplacement !== 'NONE') {\n                    <div>\n                      It has been replaced by :\n                      <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n                    </div>\n                  }\n                  @if (cmp.cmpReplacement === 'NONE') {\n                    <div>\n                      <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n                    </div>\n                  }\n                  @if (cmp.cmpReplacementNote) {\n                    <div>\n                      <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n                    </div>\n                  }\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'DEPRECATED' || isDeprecatedInput()) {\n            <eui-alert euiWarning class=\"eui-u-mb-xl\">\n              <eui-alert-title>DEPRECATED component</eui-alert-title>\n              This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n              @if (cmp) {\n                <div>\n                  This component has no replacement in current version AND won't have replacement in next version of eUI,\n                  <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'NOT_READY' || isNotReadyInput()) {\n            <eui-alert euiInfo class=\"eui-u-mb-xl\">\n              <eui-alert-title>NOT READY for production usage</eui-alert-title>\n              @if (cmp) {\n                <div>\n                  This component is under development / some features might be missing, it'll be available in a future release once\n                  validated.\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'NOT_READY' || isDemoComponentOnlyInput()) {\n            <eui-alert  euiDanger class=\"eui-u-mb-xl\">\n                <eui-alert-title>DEMO ONLY - NOT READY for production usage</eui-alert-title>\n                @if (cmp) {\n                <div>\n                    This component is under development - it's used for testing and demo purposes only, it shouldn't be used yet. It'll be available as draft in a future release once\n                    validated.\n                </div>\n                }\n            </eui-alert>\n          }\n\n          @if ((stateLabel || isNotReadyInput() || isDeprecatedInput()) && stateLabel !== 'ACTIVE') {\n            <div class=\"mb-5\"></div>\n          }\n\n          @if (pageSectionsContent().length === 0) {\n            <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n              <eui-tab id=\"samples\">\n                <eui-tab-header>\n                    <eui-tab-header-label>OPTIONS & SAMPLES</eui-tab-header-label>\n                </eui-tab-header>\n                <eui-tab-body>\n                  @if (cmp && cmp.metadata) {\n                    @if (cmpImportModule) {\n                      <div class=\"doc-page-section-title\">Module import</div>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n                    }\n                    @if (cmpImportStandalone) {\n                      <div class=\"doc-page-section-title\">Component import</div>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n                    }\n                    <br />\n                  }\n                  <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n                  @if (pageOverviewContent().length > 0) {\n                    <div>\n                      <ng-content select=\"docPageOverview\" />\n                    </div>\n                  }\n                  @if (pageOverviewDefaultContent().length > 0) {\n                    <div>\n                      <ng-content select=\"docPageOverviewDefault\" />\n                    </div>\n                  }\n                  <br />\n                  <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n                  <ng-content select=\"docPageSamples\" />\n                </eui-tab-body>\n              </eui-tab>\n              @if (hasApi()) {\n                <eui-tab id=\"api\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>API</eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    @if (apiUrlSafe) {\n                      <div class=\"flex-container\">\n                        <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n                      </div>\n                      <div class=\"doc-page-api-iframe-wrapper\">\n                        <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n                      </div>\n                    }\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (hasA11y()) {\n                <eui-tab id=\"a11y\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>A11Y</eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n                    @if (pageAccessibilityContent().length !== 0) {\n                      <ng-content select=\"docPageAccessibility\" />\n                      <p>\n                        For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n                      </p>\n                    }\n                    @if (pageAccessibilityContent().length === 0) {\n                      No accessibility rules applicable\n                    }\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if(pageVisualSpecsContent.length > 0) {\n                  <eui-tab id=\"visual-specs\">\n                      <eui-tab-header>\n                          <eui-tab-header-label>VISUAL SPECS</eui-tab-header-label>\n                      </eui-tab-header>\n                      <eui-tab-body>\n                          <div class=\"doc-page-section-title\">Visual specifications</div>\n                          <ng-content select=\"docPageVisualSpecs\"></ng-content>\n                      </eui-tab-body>\n                  </eui-tab>\n              }\n              @if(pagePlaygroundContent.length > 0) {\n                  <eui-tab id=\"playground\">\n                      <eui-tab-header>\n                          <eui-tab-header-label>PLAYGROUND</eui-tab-header-label>\n                      </eui-tab-header>\n                      <eui-tab-body>\n                          <div class=\"doc-page-section-title\">Playground</div>\n                          <ng-content select=\"docPagePlayground\"></ng-content>\n                      </eui-tab-body>\n                  </eui-tab>\n              }\n              @if (pageThemingContent().length > 0) {\n                <eui-tab id=\"theming\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>THEMING</eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n                    <ng-content select=\"docPageTheming\" />\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (pageInteractiveContent().length > 0) {\n                <eui-tab id=\"advanced\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>\n                          {{ pageInteractiveContent()[0].title() }}\n                      </eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"interactive\" class=\"doc-page-section-title\">\n                      {{ pageInteractiveContent()[0].subTitle() }}\n                    </div>\n                    <ng-content select=\"docPageInteractive\" />\n                  </eui-tab-body>\n                </eui-tab>\n              }\n            </eui-tabs>\n          }\n\n          @if (pageSectionsContent().length > 0) {\n            @if (sections().length === 0) {\n              <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n            }\n            <ng-content select=\"docPageSections\" />\n          }\n\n        </eui-page-column-body>\n      </eui-page-column>\n\n      @if (isNavigationVisible()) {\n        <eui-page-column\n          class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n          label=\"On this page\"\n          euiSizeVariant=\"4xl\"\n          isCollapsible\n          isRightCollapsible>\n          <eui-page-column-body>\n            <div class=\"doc-page-navigation-content\" #navContent tabindex=\"0\">\n              <ul class=\"doc-page-navigation\">\n                @if (pageSectionsContent().length === 0) {\n                  <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n                      (click)=\"onTabNavClick('samples')\">\n                      <span>OPTIONS & SAMPLES</span>\n                  </li>\n                  <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                    @if (categories.length > 0) {\n                      @if (hasCategories) {\n                        @for (category of categories; track category) {\n                          @if (category.name === 'Base') {\n                            @for (sample of category.samples; track sample; let i = $index) {\n                              <ul class=\"doc-page-navigation-list\">\n                                <li\n                                  class=\"doc-page-navigation-item\"\n                                  [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n                                  (click)=\"onNavClick(sample.id(), 0)\">\n                                  <span>{{ sample.label() || sample.id() }}</span>\n                                </li>\n                              </ul>\n                            }\n                          } @else {\n                            @if (category.name !== 'Base') {\n                              <div class=\"doc-page-navigation-category\">{{category.name}}</div>\n                            }\n                            @for (sample of category.samples; track sample) {\n                              <ul class=\"doc-page-navigation-list\">\n                                <li\n                                  class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n                                  [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id()\"\n                                  (click)=\"onNavClick(sample.id(), 0)\">\n                                  <span>{{ sample.label() || sample.id() }}</span>\n                                </li>\n                              </ul>\n                            }\n                          }\n                        }\n                      } @else {\n                        @for (sample of samples(); track sample; let i = $index) {\n                          <ul class=\"doc-page-navigation-list\">\n                            <li\n                              class=\"doc-page-navigation-item\"\n                              [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n                              (click)=\"onNavClick(sample.id(), 0)\">\n                              <span>{{ sample.label() || sample.id() }}</span>\n                            </li>\n                          </ul>\n                        }\n                      }\n                    }\n                  </li>\n                  @if (hasApi()) {\n                        <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n                            (click)=\"onTabNavClick('api')\">\n                            <span>API</span>\n                        </li>\n                    }\n                  @if (hasA11y()) {\n                        <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n                            (click)=\"onTabNavClick('a11y')\">\n                            <span>A11Y</span>\n                        </li>\n                  }\n                  <!-- OPTIONAL TABS-->\n                  @if (pageThemingContent().length > 0) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n                      (click)=\"onNavClick('theming', 3)\">\n                      <span>THEMING</span>\n                    </li>\n                    @if (pageInteractiveContent().length > 0) {\n                      <li\n                        class=\"doc-page-navigation-item\"\n                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                        (click)=\"onNavClick('advanced', 4)\">\n                        <span>{{ pageInteractiveContent()[0].title() }}</span>\n                      </li>\n                    }\n                    @if(pageVisualSpecsContent.length > 0) {\n                      <li\n                          class=\"doc-page-navigation-item\"\n                          [class.doc-page-navigation-item--selected]=\"fragmentId === 'visual-specs'\"\n                          (click)=\"onTabNavClick('visual-specs')\">\n                          <span>VISUAL SPECS</span>\n                      </li>\n                    }\n                    @if (pagePlaygroundContent.length > 0) {\n                        <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'playground'\"\n                            (click)=\"onTabNavClick('playground')\">\n                            <span>PLAYGROUND</span>\n                        </li>\n                    }\n                  }\n                }\n                @if (pageSectionsContent().length > 0) {\n                  <li\n                    class=\"doc-page-navigation-item\"\n                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n                    (click)=\"onNavClick('sections', null)\">\n                    <span>Sections</span>\n                  </li>\n                  @if (sections().length === 0) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n                      (click)=\"onNavClick('demo', null)\">\n                      <span>Demo</span>\n                    </li>\n                  }\n                  @if (sections().length > 0) {\n                    <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                      @for (section of sections(); track section; let i = $index) {\n                        <ul>\n                          <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n                            (click)=\"onNavClick(section.id(), null)\">\n                            <span>{{ section.label() || section.id() }}</span>\n                          </li>\n                        </ul>\n                      }\n                    </li>\n                  }\n                }\n              </ul>\n            </div>\n          </eui-page-column-body>\n        </eui-page-column>\n      }\n\n    </eui-page-columns>\n  </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }, { kind: "component", type: i1$1.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i1$1.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i2$2.EuiTabHeaderLabelComponent, selector: "eui-tab-header-label" }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i3.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i3.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isCollapsedHidden", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile", "hasSubColumns", "hasSubPanels"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i3.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i3.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i3.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i3.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DocPageComponent, isStandalone: true, selector: "eui-showcase-doc-page", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, isNotReady: { classPropertyName: "isNotReady", publicName: "isNotReady", isSignal: true, isRequired: false, transformFunction: null }, isDeprecated: { classPropertyName: "isDeprecated", publicName: "isDeprecated", isSignal: true, isRequired: false, transformFunction: null }, isDemoComponentOnly: { classPropertyName: "isDemoComponentOnly", publicName: "isDemoComponentOnly", isSignal: true, isRequired: false, transformFunction: null }, isLegacy: { classPropertyName: "isLegacy", publicName: "isLegacy", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, showcase: { classPropertyName: "showcase", publicName: "showcase", isSignal: true, isRequired: false, transformFunction: null }, isNavigationVisible: { classPropertyName: "isNavigationVisible", publicName: "isNavigationVisible", isSignal: true, isRequired: false, transformFunction: null }, hasApi: { classPropertyName: "hasApi", publicName: "hasApi", isSignal: true, isRequired: false, transformFunction: null }, hasA11y: { classPropertyName: "hasA11y", publicName: "hasA11y", isSignal: true, isRequired: false, transformFunction: null }, customApiUrl: { classPropertyName: "customApiUrl", publicName: "customApiUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isNavigationVisible: "isNavigationVisibleChange" }, host: { classAttribute: "eui-doc-page" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true, isSignal: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true, isSignal: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirective), isSignal: true }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirective), isSignal: true }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirective), isSignal: true }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirective), isSignal: true }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirective), isSignal: true }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirective), isSignal: true }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirective), isSignal: true }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirective), isSignal: true }, { propertyName: "pageVisualSpecsContent", predicate: i0.forwardRef(() => DocPageVisualSpecsContentDirective) }, { propertyName: "pagePlaygroundContent", predicate: i0.forwardRef(() => DocPagePlaygroundContentDirective) }, { propertyName: "pageWebComponentContent", predicate: i0.forwardRef(() => DocPageWebComponentContentDirective) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true, isSignal: true }, { propertyName: "navContent", first: true, predicate: ["navContent"], descendants: true }], ngImport: i0, template: "<eui-page>\n    <eui-page-content>\n        <eui-page-columns>\n            <eui-page-column>\n                <eui-page-column-body>\n                    <eui-page-header label=\"{{ label() || id() }}\" subLabel=\"{{ subLabel() }}\" class=\"eui-doc-page-title\">\n                        <eui-page-header-action-items>\n                          @if (codeFolder()) {\n                            <eui-showcase-doc-page-code\n                                codeFolder=\"{{ codeFolder() }}\"\n                                showcase=\"{{ showcase() }}\" />\n                          }\n                          @if (stateLabel) {\n                            <eui-chip euiSizeS isFilled\n                                [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                                [euiInfo]=\"isNotReadyInput()\"\n                                [euiWarning]=\"isDeprecatedInput()\"\n                                [euiDanger]=\"isDemoComponentOnly()\">\n                                {{ stateLabel }}\n                            </eui-chip>\n                          }\n                        </eui-page-header-action-items>\n                    </eui-page-header>\n\n          @if (stateLabel === 'LEGACY' || isLegacyInput()) {\n            <eui-alert euiDanger class=\"eui-u-mb-xl\">\n              <eui-alert-title>LEGACY component</eui-alert-title>\n              <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n              @if (cmp) {\n                <div>\n                  @if (cmp.cmpReplacement !== 'NONE') {\n                    <div>\n                      It has been replaced by :\n                      <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n                    </div>\n                  }\n                  @if (cmp.cmpReplacement === 'NONE') {\n                    <div>\n                      <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n                    </div>\n                  }\n                  @if (cmp.cmpReplacementNote) {\n                    <div>\n                      <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n                    </div>\n                  }\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'DEPRECATED' || isDeprecatedInput()) {\n            <eui-alert euiWarning class=\"eui-u-mb-xl\">\n              <eui-alert-title>DEPRECATED component</eui-alert-title>\n              This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n              @if (cmp) {\n                <div>\n                  This component has no replacement in current version AND won't have replacement in next version of eUI,\n                  <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'NOT_READY' || isNotReadyInput()) {\n            <eui-alert euiInfo class=\"eui-u-mb-xl\">\n              <eui-alert-title>NOT READY for production usage</eui-alert-title>\n              @if (cmp) {\n                <div>\n                  This component is under development / some features might be missing, it'll be available in a future release once\n                  validated.\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'NOT_READY' || isDemoComponentOnlyInput()) {\n            <eui-alert  euiDanger class=\"eui-u-mb-xl\">\n                <eui-alert-title>DEMO ONLY - NOT READY for production usage</eui-alert-title>\n                @if (cmp) {\n                <div>\n                    This component is under development - it's used for testing and demo purposes only, it shouldn't be used yet. It'll be available as draft in a future release once\n                    validated.\n                </div>\n                }\n            </eui-alert>\n          }\n\n          @if ((stateLabel || isNotReadyInput() || isDeprecatedInput()) && stateLabel !== 'ACTIVE') {\n            <div class=\"mb-5\"></div>\n          }\n\n          @if (pageSectionsContent().length === 0) {\n            <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n              <eui-tab id=\"samples\">\n                <eui-tab-header>\n                    <eui-tab-header-label>OPTIONS & SAMPLES</eui-tab-header-label>\n                </eui-tab-header>\n                <eui-tab-body>\n                  @if (cmp && cmp.metadata) {\n                    @if (cmpImportModule) {\n                      <div class=\"doc-page-section-title\">Module import</div>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n                    }\n                    @if (cmpImportStandalone) {\n                      <div class=\"doc-page-section-title\">Component import</div>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n                    }\n                    <br />\n                  }\n                  <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n                  @if (pageOverviewContent().length > 0) {\n                    <div>\n                      <ng-content select=\"docPageOverview\" />\n                    </div>\n                  }\n                  @if (pageOverviewDefaultContent().length > 0) {\n                    <div>\n                      <ng-content select=\"docPageOverviewDefault\" />\n                    </div>\n                  }\n                  <br />\n                  <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n                  <ng-content select=\"docPageSamples\" />\n                </eui-tab-body>\n              </eui-tab>\n              @if (hasApi()) {\n                <eui-tab id=\"api\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>API</eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    @if (apiUrlSafe) {\n                      <div class=\"flex-container\">\n                        <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n                      </div>\n                      <div class=\"doc-page-api-iframe-wrapper\">\n                        <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n                      </div>\n                    }\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (hasA11y()) {\n                <eui-tab id=\"a11y\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>A11Y</eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n                    @if (pageAccessibilityContent().length !== 0) {\n                      <ng-content select=\"docPageAccessibility\" />\n                      <p>\n                        For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n                      </p>\n                    }\n                    @if (pageAccessibilityContent().length === 0) {\n                      No accessibility rules applicable\n                    }\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if(pageVisualSpecsContent.length > 0) {\n                  <eui-tab id=\"visual-specs\">\n                      <eui-tab-header>\n                          <eui-tab-header-label>VISUAL SPECS</eui-tab-header-label>\n                      </eui-tab-header>\n                      <eui-tab-body>\n                          <div class=\"doc-page-section-title\">Visual specifications</div>\n                          <ng-content select=\"docPageVisualSpecs\"></ng-content>\n                      </eui-tab-body>\n                  </eui-tab>\n              }\n              @if(pagePlaygroundContent.length > 0) {\n                  <eui-tab id=\"playground\">\n                      <eui-tab-header>\n                          <eui-tab-header-label>PLAYGROUND</eui-tab-header-label>\n                      </eui-tab-header>\n                      <eui-tab-body>\n                          <div class=\"doc-page-section-title\">Playground</div>\n                          <ng-content select=\"docPagePlayground\"></ng-content>\n                      </eui-tab-body>\n                  </eui-tab>\n              }\n              @if(pageWebComponentContent.length > 0) {\n                  <eui-tab id=\"web-component\">\n                      <eui-tab-header>\n                          <eui-tab-header-label>WEB COMPONENT</eui-tab-header-label>\n                      </eui-tab-header>\n                      <eui-tab-body>\n                          <div class=\"doc-page-section-title\">Web Component</div>\n                          <ng-content select=\"docPageWebComponent\"></ng-content>\n                      </eui-tab-body>\n                  </eui-tab>\n              }\n              @if (pageThemingContent().length > 0) {\n                <eui-tab id=\"theming\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>THEMING</eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n                    <ng-content select=\"docPageTheming\" />\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (pageInteractiveContent().length > 0) {\n                <eui-tab id=\"advanced\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>\n                          {{ pageInteractiveContent()[0].title() }}\n                      </eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"interactive\" class=\"doc-page-section-title\">\n                      {{ pageInteractiveContent()[0].subTitle() }}\n                    </div>\n                    <ng-content select=\"docPageInteractive\" />\n                  </eui-tab-body>\n                </eui-tab>\n              }\n            </eui-tabs>\n          }\n\n          @if (pageSectionsContent().length > 0) {\n            @if (sections().length === 0) {\n              <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n            }\n            <ng-content select=\"docPageSections\" />\n          }\n\n        </eui-page-column-body>\n      </eui-page-column>\n\n      @if (isNavigationVisible()) {\n        <eui-page-column\n          class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n          label=\"On this page\"\n          euiSizeVariant=\"4xl\"\n          isCollapsible\n          isRightCollapsible>\n          <eui-page-column-body>\n            <div class=\"doc-page-navigation-content\" #navContent tabindex=\"0\">\n              <ul class=\"doc-page-navigation\">\n                @if (pageSectionsContent().length === 0) {\n                  <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n                      (click)=\"onTabNavClick('samples')\">\n                      <span>OPTIONS & SAMPLES</span>\n                  </li>\n                  <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                    @if (categories.length > 0) {\n                      @if (hasCategories) {\n                        @for (category of categories; track category) {\n                          @if (category.name === 'Base') {\n                            @for (sample of category.samples; track sample; let i = $index) {\n                              <ul class=\"doc-page-navigation-list\">\n                                <li\n                                  class=\"doc-page-navigation-item\"\n                                  [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n                                  (click)=\"onNavClick(sample.id(), 0)\">\n                                  <span>{{ sample.label() || sample.id() }}</span>\n                                </li>\n                              </ul>\n                            }\n                          } @else {\n                            @if (category.name !== 'Base') {\n                              <div class=\"doc-page-navigation-category\">{{category.name}}</div>\n                            }\n                            @for (sample of category.samples; track sample) {\n                              <ul class=\"doc-page-navigation-list\">\n                                <li\n                                  class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n                                  [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id()\"\n                                  (click)=\"onNavClick(sample.id(), 0)\">\n                                  <span>{{ sample.label() || sample.id() }}</span>\n                                </li>\n                              </ul>\n                            }\n                          }\n                        }\n                      } @else {\n                        @for (sample of mainSamples(); track sample; let i = $index) {\n                          <ul class=\"doc-page-navigation-list\">\n                            <li\n                              class=\"doc-page-navigation-item\"\n                              [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n                              (click)=\"onNavClick(sample.id(), 0)\">\n                              <span>{{ sample.label() || sample.id() }}</span>\n                            </li>\n                          </ul>\n                        }\n                      }\n                    }\n                  </li>\n                  @if (hasApi()) {\n                        <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n                            (click)=\"onTabNavClick('api')\">\n                            <span>API</span>\n                        </li>\n                    }\n                  @if (hasA11y()) {\n                        <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n                            (click)=\"onTabNavClick('a11y')\">\n                            <span>A11Y</span>\n                        </li>\n                  }\n                  <!-- OPTIONAL TABS-->\n                  @if (pageThemingContent().length > 0) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n                      (click)=\"onNavClick('theming', 3)\">\n                      <span>THEMING</span>\n                    </li>\n                    @if (pageInteractiveContent().length > 0) {\n                      <li\n                        class=\"doc-page-navigation-item\"\n                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                        (click)=\"onNavClick('advanced', 4)\">\n                        <span>{{ pageInteractiveContent()[0].title() }}</span>\n                      </li>\n                    }\n                    @if(pageVisualSpecsContent.length > 0) {\n                      <li\n                          class=\"doc-page-navigation-item\"\n                          [class.doc-page-navigation-item--selected]=\"fragmentId === 'visual-specs'\"\n                          (click)=\"onTabNavClick('visual-specs')\">\n                          <span>VISUAL SPECS</span>\n                      </li>\n                    }\n                    @if (pagePlaygroundContent.length > 0) {\n                        <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'playground'\"\n                            (click)=\"onTabNavClick('playground')\">\n                            <span>PLAYGROUND</span>\n                        </li>\n                    }\n                  }\n                  @if (pageWebComponentContent.length > 0) {\n                      <li\n                          class=\"doc-page-navigation-item\"\n                          [class.doc-page-navigation-item--selected]=\"fragmentId === 'web-component'\"\n                          (click)=\"onTabNavClick('web-component')\">\n                          <span>WEB COMPONENT</span>\n                      </li>\n                  }\n                }\n                @if (pageSectionsContent().length > 0) {\n                  <li\n                    class=\"doc-page-navigation-item\"\n                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n                    (click)=\"onNavClick('sections', null)\">\n                    <span>Sections</span>\n                  </li>\n                  @if (sections().length === 0) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n                      (click)=\"onNavClick('demo', null)\">\n                      <span>Demo</span>\n                    </li>\n                  }\n                  @if (sections().length > 0) {\n                    <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                      @for (section of sections(); track section; let i = $index) {\n                        <ul>\n                          <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n                            (click)=\"onNavClick(section.id(), null)\">\n                            <span>{{ section.label() || section.id() }}</span>\n                          </li>\n                        </ul>\n                      }\n                    </li>\n                  }\n                }\n              </ul>\n            </div>\n          </eui-page-column-body>\n        </eui-page-column>\n      }\n\n    </eui-page-columns>\n  </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }, { kind: "component", type: i1$1.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i1$1.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i2$2.EuiTabHeaderLabelComponent, selector: "eui-tab-header-label" }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i3.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i3.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isCollapsedHidden", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile", "hasSubColumns", "hasSubPanels"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i3.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i3.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i3.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i3.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageComponent, decorators: [{
             type: Component,
@@ -1411,13 +1422,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         ...EUI_TABS,
                         ...EUI_PAGE,
                         ...EUI_CHIP,
-                    ], template: "<eui-page>\n    <eui-page-content>\n        <eui-page-columns>\n            <eui-page-column>\n                <eui-page-column-body>\n                    <eui-page-header label=\"{{ label() || id() }}\" subLabel=\"{{ subLabel() }}\" class=\"eui-doc-page-title\">\n                        <eui-page-header-action-items>\n                          @if (codeFolder()) {\n                            <eui-showcase-doc-page-code\n                                codeFolder=\"{{ codeFolder() }}\"\n                                showcase=\"{{ showcase() }}\" />\n                          }\n                          @if (stateLabel) {\n                            <eui-chip euiSizeS isFilled\n                                [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                                [euiInfo]=\"isNotReadyInput()\"\n                                [euiWarning]=\"isDeprecatedInput()\"\n                                [euiDanger]=\"isDemoComponentOnly()\">\n                                {{ stateLabel }}\n                            </eui-chip>\n                          }\n                        </eui-page-header-action-items>\n                    </eui-page-header>\n\n          @if (stateLabel === 'LEGACY' || isLegacyInput()) {\n            <eui-alert euiDanger class=\"eui-u-mb-xl\">\n              <eui-alert-title>LEGACY component</eui-alert-title>\n              <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n              @if (cmp) {\n                <div>\n                  @if (cmp.cmpReplacement !== 'NONE') {\n                    <div>\n                      It has been replaced by :\n                      <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n                    </div>\n                  }\n                  @if (cmp.cmpReplacement === 'NONE') {\n                    <div>\n                      <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n                    </div>\n                  }\n                  @if (cmp.cmpReplacementNote) {\n                    <div>\n                      <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n                    </div>\n                  }\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'DEPRECATED' || isDeprecatedInput()) {\n            <eui-alert euiWarning class=\"eui-u-mb-xl\">\n              <eui-alert-title>DEPRECATED component</eui-alert-title>\n              This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n              @if (cmp) {\n                <div>\n                  This component has no replacement in current version AND won't have replacement in next version of eUI,\n                  <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'NOT_READY' || isNotReadyInput()) {\n            <eui-alert euiInfo class=\"eui-u-mb-xl\">\n              <eui-alert-title>NOT READY for production usage</eui-alert-title>\n              @if (cmp) {\n                <div>\n                  This component is under development / some features might be missing, it'll be available in a future release once\n                  validated.\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'NOT_READY' || isDemoComponentOnlyInput()) {\n            <eui-alert  euiDanger class=\"eui-u-mb-xl\">\n                <eui-alert-title>DEMO ONLY - NOT READY for production usage</eui-alert-title>\n                @if (cmp) {\n                <div>\n                    This component is under development - it's used for testing and demo purposes only, it shouldn't be used yet. It'll be available as draft in a future release once\n                    validated.\n                </div>\n                }\n            </eui-alert>\n          }\n\n          @if ((stateLabel || isNotReadyInput() || isDeprecatedInput()) && stateLabel !== 'ACTIVE') {\n            <div class=\"mb-5\"></div>\n          }\n\n          @if (pageSectionsContent().length === 0) {\n            <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n              <eui-tab id=\"samples\">\n                <eui-tab-header>\n                    <eui-tab-header-label>OPTIONS & SAMPLES</eui-tab-header-label>\n                </eui-tab-header>\n                <eui-tab-body>\n                  @if (cmp && cmp.metadata) {\n                    @if (cmpImportModule) {\n                      <div class=\"doc-page-section-title\">Module import</div>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n                    }\n                    @if (cmpImportStandalone) {\n                      <div class=\"doc-page-section-title\">Component import</div>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n                    }\n                    <br />\n                  }\n                  <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n                  @if (pageOverviewContent().length > 0) {\n                    <div>\n                      <ng-content select=\"docPageOverview\" />\n                    </div>\n                  }\n                  @if (pageOverviewDefaultContent().length > 0) {\n                    <div>\n                      <ng-content select=\"docPageOverviewDefault\" />\n                    </div>\n                  }\n                  <br />\n                  <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n                  <ng-content select=\"docPageSamples\" />\n                </eui-tab-body>\n              </eui-tab>\n              @if (hasApi()) {\n                <eui-tab id=\"api\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>API</eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    @if (apiUrlSafe) {\n                      <div class=\"flex-container\">\n                        <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n                      </div>\n                      <div class=\"doc-page-api-iframe-wrapper\">\n                        <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n                      </div>\n                    }\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (hasA11y()) {\n                <eui-tab id=\"a11y\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>A11Y</eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n                    @if (pageAccessibilityContent().length !== 0) {\n                      <ng-content select=\"docPageAccessibility\" />\n                      <p>\n                        For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n                      </p>\n                    }\n                    @if (pageAccessibilityContent().length === 0) {\n                      No accessibility rules applicable\n                    }\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if(pageVisualSpecsContent.length > 0) {\n                  <eui-tab id=\"visual-specs\">\n                      <eui-tab-header>\n                          <eui-tab-header-label>VISUAL SPECS</eui-tab-header-label>\n                      </eui-tab-header>\n                      <eui-tab-body>\n                          <div class=\"doc-page-section-title\">Visual specifications</div>\n                          <ng-content select=\"docPageVisualSpecs\"></ng-content>\n                      </eui-tab-body>\n                  </eui-tab>\n              }\n              @if(pagePlaygroundContent.length > 0) {\n                  <eui-tab id=\"playground\">\n                      <eui-tab-header>\n                          <eui-tab-header-label>PLAYGROUND</eui-tab-header-label>\n                      </eui-tab-header>\n                      <eui-tab-body>\n                          <div class=\"doc-page-section-title\">Playground</div>\n                          <ng-content select=\"docPagePlayground\"></ng-content>\n                      </eui-tab-body>\n                  </eui-tab>\n              }\n              @if (pageThemingContent().length > 0) {\n                <eui-tab id=\"theming\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>THEMING</eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n                    <ng-content select=\"docPageTheming\" />\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (pageInteractiveContent().length > 0) {\n                <eui-tab id=\"advanced\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>\n                          {{ pageInteractiveContent()[0].title() }}\n                      </eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"interactive\" class=\"doc-page-section-title\">\n                      {{ pageInteractiveContent()[0].subTitle() }}\n                    </div>\n                    <ng-content select=\"docPageInteractive\" />\n                  </eui-tab-body>\n                </eui-tab>\n              }\n            </eui-tabs>\n          }\n\n          @if (pageSectionsContent().length > 0) {\n            @if (sections().length === 0) {\n              <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n            }\n            <ng-content select=\"docPageSections\" />\n          }\n\n        </eui-page-column-body>\n      </eui-page-column>\n\n      @if (isNavigationVisible()) {\n        <eui-page-column\n          class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n          label=\"On this page\"\n          euiSizeVariant=\"4xl\"\n          isCollapsible\n          isRightCollapsible>\n          <eui-page-column-body>\n            <div class=\"doc-page-navigation-content\" #navContent tabindex=\"0\">\n              <ul class=\"doc-page-navigation\">\n                @if (pageSectionsContent().length === 0) {\n                  <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n                      (click)=\"onTabNavClick('samples')\">\n                      <span>OPTIONS & SAMPLES</span>\n                  </li>\n                  <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                    @if (categories.length > 0) {\n                      @if (hasCategories) {\n                        @for (category of categories; track category) {\n                          @if (category.name === 'Base') {\n                            @for (sample of category.samples; track sample; let i = $index) {\n                              <ul class=\"doc-page-navigation-list\">\n                                <li\n                                  class=\"doc-page-navigation-item\"\n                                  [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n                                  (click)=\"onNavClick(sample.id(), 0)\">\n                                  <span>{{ sample.label() || sample.id() }}</span>\n                                </li>\n                              </ul>\n                            }\n                          } @else {\n                            @if (category.name !== 'Base') {\n                              <div class=\"doc-page-navigation-category\">{{category.name}}</div>\n                            }\n                            @for (sample of category.samples; track sample) {\n                              <ul class=\"doc-page-navigation-list\">\n                                <li\n                                  class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n                                  [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id()\"\n                                  (click)=\"onNavClick(sample.id(), 0)\">\n                                  <span>{{ sample.label() || sample.id() }}</span>\n                                </li>\n                              </ul>\n                            }\n                          }\n                        }\n                      } @else {\n                        @for (sample of samples(); track sample; let i = $index) {\n                          <ul class=\"doc-page-navigation-list\">\n                            <li\n                              class=\"doc-page-navigation-item\"\n                              [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n                              (click)=\"onNavClick(sample.id(), 0)\">\n                              <span>{{ sample.label() || sample.id() }}</span>\n                            </li>\n                          </ul>\n                        }\n                      }\n                    }\n                  </li>\n                  @if (hasApi()) {\n                        <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n                            (click)=\"onTabNavClick('api')\">\n                            <span>API</span>\n                        </li>\n                    }\n                  @if (hasA11y()) {\n                        <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n                            (click)=\"onTabNavClick('a11y')\">\n                            <span>A11Y</span>\n                        </li>\n                  }\n                  <!-- OPTIONAL TABS-->\n                  @if (pageThemingContent().length > 0) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n                      (click)=\"onNavClick('theming', 3)\">\n                      <span>THEMING</span>\n                    </li>\n                    @if (pageInteractiveContent().length > 0) {\n                      <li\n                        class=\"doc-page-navigation-item\"\n                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                        (click)=\"onNavClick('advanced', 4)\">\n                        <span>{{ pageInteractiveContent()[0].title() }}</span>\n                      </li>\n                    }\n                    @if(pageVisualSpecsContent.length > 0) {\n                      <li\n                          class=\"doc-page-navigation-item\"\n                          [class.doc-page-navigation-item--selected]=\"fragmentId === 'visual-specs'\"\n                          (click)=\"onTabNavClick('visual-specs')\">\n                          <span>VISUAL SPECS</span>\n                      </li>\n                    }\n                    @if (pagePlaygroundContent.length > 0) {\n                        <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'playground'\"\n                            (click)=\"onTabNavClick('playground')\">\n                            <span>PLAYGROUND</span>\n                        </li>\n                    }\n                  }\n                }\n                @if (pageSectionsContent().length > 0) {\n                  <li\n                    class=\"doc-page-navigation-item\"\n                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n                    (click)=\"onNavClick('sections', null)\">\n                    <span>Sections</span>\n                  </li>\n                  @if (sections().length === 0) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n                      (click)=\"onNavClick('demo', null)\">\n                      <span>Demo</span>\n                    </li>\n                  }\n                  @if (sections().length > 0) {\n                    <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                      @for (section of sections(); track section; let i = $index) {\n                        <ul>\n                          <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n                            (click)=\"onNavClick(section.id(), null)\">\n                            <span>{{ section.label() || section.id() }}</span>\n                          </li>\n                        </ul>\n                      }\n                    </li>\n                  }\n                }\n              </ul>\n            </div>\n          </eui-page-column-body>\n        </eui-page-column>\n      }\n\n    </eui-page-columns>\n  </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
+                    ], template: "<eui-page>\n    <eui-page-content>\n        <eui-page-columns>\n            <eui-page-column>\n                <eui-page-column-body>\n                    <eui-page-header label=\"{{ label() || id() }}\" subLabel=\"{{ subLabel() }}\" class=\"eui-doc-page-title\">\n                        <eui-page-header-action-items>\n                          @if (codeFolder()) {\n                            <eui-showcase-doc-page-code\n                                codeFolder=\"{{ codeFolder() }}\"\n                                showcase=\"{{ showcase() }}\" />\n                          }\n                          @if (stateLabel) {\n                            <eui-chip euiSizeS isFilled\n                                [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n                                [euiInfo]=\"isNotReadyInput()\"\n                                [euiWarning]=\"isDeprecatedInput()\"\n                                [euiDanger]=\"isDemoComponentOnly()\">\n                                {{ stateLabel }}\n                            </eui-chip>\n                          }\n                        </eui-page-header-action-items>\n                    </eui-page-header>\n\n          @if (stateLabel === 'LEGACY' || isLegacyInput()) {\n            <eui-alert euiDanger class=\"eui-u-mb-xl\">\n              <eui-alert-title>LEGACY component</eui-alert-title>\n              <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n              @if (cmp) {\n                <div>\n                  @if (cmp.cmpReplacement !== 'NONE') {\n                    <div>\n                      It has been replaced by :\n                      <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n                    </div>\n                  }\n                  @if (cmp.cmpReplacement === 'NONE') {\n                    <div>\n                      <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n                    </div>\n                  }\n                  @if (cmp.cmpReplacementNote) {\n                    <div>\n                      <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n                    </div>\n                  }\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'DEPRECATED' || isDeprecatedInput()) {\n            <eui-alert euiWarning class=\"eui-u-mb-xl\">\n              <eui-alert-title>DEPRECATED component</eui-alert-title>\n              This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n              @if (cmp) {\n                <div>\n                  This component has no replacement in current version AND won't have replacement in next version of eUI,\n                  <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'NOT_READY' || isNotReadyInput()) {\n            <eui-alert euiInfo class=\"eui-u-mb-xl\">\n              <eui-alert-title>NOT READY for production usage</eui-alert-title>\n              @if (cmp) {\n                <div>\n                  This component is under development / some features might be missing, it'll be available in a future release once\n                  validated.\n                </div>\n              }\n            </eui-alert>\n          }\n\n          @if (stateLabel === 'NOT_READY' || isDemoComponentOnlyInput()) {\n            <eui-alert  euiDanger class=\"eui-u-mb-xl\">\n                <eui-alert-title>DEMO ONLY - NOT READY for production usage</eui-alert-title>\n                @if (cmp) {\n                <div>\n                    This component is under development - it's used for testing and demo purposes only, it shouldn't be used yet. It'll be available as draft in a future release once\n                    validated.\n                </div>\n                }\n            </eui-alert>\n          }\n\n          @if ((stateLabel || isNotReadyInput() || isDeprecatedInput()) && stateLabel !== 'ACTIVE') {\n            <div class=\"mb-5\"></div>\n          }\n\n          @if (pageSectionsContent().length === 0) {\n            <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n              <eui-tab id=\"samples\">\n                <eui-tab-header>\n                    <eui-tab-header-label>OPTIONS & SAMPLES</eui-tab-header-label>\n                </eui-tab-header>\n                <eui-tab-body>\n                  @if (cmp && cmp.metadata) {\n                    @if (cmpImportModule) {\n                      <div class=\"doc-page-section-title\">Module import</div>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n                    }\n                    @if (cmpImportStandalone) {\n                      <div class=\"doc-page-section-title\">Component import</div>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n                      <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n                    }\n                    <br />\n                  }\n                  <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n                  @if (pageOverviewContent().length > 0) {\n                    <div>\n                      <ng-content select=\"docPageOverview\" />\n                    </div>\n                  }\n                  @if (pageOverviewDefaultContent().length > 0) {\n                    <div>\n                      <ng-content select=\"docPageOverviewDefault\" />\n                    </div>\n                  }\n                  <br />\n                  <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n                  <ng-content select=\"docPageSamples\" />\n                </eui-tab-body>\n              </eui-tab>\n              @if (hasApi()) {\n                <eui-tab id=\"api\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>API</eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    @if (apiUrlSafe) {\n                      <div class=\"flex-container\">\n                        <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n                      </div>\n                      <div class=\"doc-page-api-iframe-wrapper\">\n                        <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n                      </div>\n                    }\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (hasA11y()) {\n                <eui-tab id=\"a11y\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>A11Y</eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n                    @if (pageAccessibilityContent().length !== 0) {\n                      <ng-content select=\"docPageAccessibility\" />\n                      <p>\n                        For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n                      </p>\n                    }\n                    @if (pageAccessibilityContent().length === 0) {\n                      No accessibility rules applicable\n                    }\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if(pageVisualSpecsContent.length > 0) {\n                  <eui-tab id=\"visual-specs\">\n                      <eui-tab-header>\n                          <eui-tab-header-label>VISUAL SPECS</eui-tab-header-label>\n                      </eui-tab-header>\n                      <eui-tab-body>\n                          <div class=\"doc-page-section-title\">Visual specifications</div>\n                          <ng-content select=\"docPageVisualSpecs\"></ng-content>\n                      </eui-tab-body>\n                  </eui-tab>\n              }\n              @if(pagePlaygroundContent.length > 0) {\n                  <eui-tab id=\"playground\">\n                      <eui-tab-header>\n                          <eui-tab-header-label>PLAYGROUND</eui-tab-header-label>\n                      </eui-tab-header>\n                      <eui-tab-body>\n                          <div class=\"doc-page-section-title\">Playground</div>\n                          <ng-content select=\"docPagePlayground\"></ng-content>\n                      </eui-tab-body>\n                  </eui-tab>\n              }\n              @if(pageWebComponentContent.length > 0) {\n                  <eui-tab id=\"web-component\">\n                      <eui-tab-header>\n                          <eui-tab-header-label>WEB COMPONENT</eui-tab-header-label>\n                      </eui-tab-header>\n                      <eui-tab-body>\n                          <div class=\"doc-page-section-title\">Web Component</div>\n                          <ng-content select=\"docPageWebComponent\"></ng-content>\n                      </eui-tab-body>\n                  </eui-tab>\n              }\n              @if (pageThemingContent().length > 0) {\n                <eui-tab id=\"theming\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>THEMING</eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n                    <ng-content select=\"docPageTheming\" />\n                  </eui-tab-body>\n                </eui-tab>\n              }\n              @if (pageInteractiveContent().length > 0) {\n                <eui-tab id=\"advanced\">\n                  <eui-tab-header>\n                      <eui-tab-header-label>\n                          {{ pageInteractiveContent()[0].title() }}\n                      </eui-tab-header-label>\n                  </eui-tab-header>\n                  <eui-tab-body>\n                    <div id=\"interactive\" class=\"doc-page-section-title\">\n                      {{ pageInteractiveContent()[0].subTitle() }}\n                    </div>\n                    <ng-content select=\"docPageInteractive\" />\n                  </eui-tab-body>\n                </eui-tab>\n              }\n            </eui-tabs>\n          }\n\n          @if (pageSectionsContent().length > 0) {\n            @if (sections().length === 0) {\n              <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n            }\n            <ng-content select=\"docPageSections\" />\n          }\n\n        </eui-page-column-body>\n      </eui-page-column>\n\n      @if (isNavigationVisible()) {\n        <eui-page-column\n          class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n          label=\"On this page\"\n          euiSizeVariant=\"4xl\"\n          isCollapsible\n          isRightCollapsible>\n          <eui-page-column-body>\n            <div class=\"doc-page-navigation-content\" #navContent tabindex=\"0\">\n              <ul class=\"doc-page-navigation\">\n                @if (pageSectionsContent().length === 0) {\n                  <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n                      (click)=\"onTabNavClick('samples')\">\n                      <span>OPTIONS & SAMPLES</span>\n                  </li>\n                  <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                    @if (categories.length > 0) {\n                      @if (hasCategories) {\n                        @for (category of categories; track category) {\n                          @if (category.name === 'Base') {\n                            @for (sample of category.samples; track sample; let i = $index) {\n                              <ul class=\"doc-page-navigation-list\">\n                                <li\n                                  class=\"doc-page-navigation-item\"\n                                  [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n                                  (click)=\"onNavClick(sample.id(), 0)\">\n                                  <span>{{ sample.label() || sample.id() }}</span>\n                                </li>\n                              </ul>\n                            }\n                          } @else {\n                            @if (category.name !== 'Base') {\n                              <div class=\"doc-page-navigation-category\">{{category.name}}</div>\n                            }\n                            @for (sample of category.samples; track sample) {\n                              <ul class=\"doc-page-navigation-list\">\n                                <li\n                                  class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n                                  [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id()\"\n                                  (click)=\"onNavClick(sample.id(), 0)\">\n                                  <span>{{ sample.label() || sample.id() }}</span>\n                                </li>\n                              </ul>\n                            }\n                          }\n                        }\n                      } @else {\n                        @for (sample of mainSamples(); track sample; let i = $index) {\n                          <ul class=\"doc-page-navigation-list\">\n                            <li\n                              class=\"doc-page-navigation-item\"\n                              [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n                              (click)=\"onNavClick(sample.id(), 0)\">\n                              <span>{{ sample.label() || sample.id() }}</span>\n                            </li>\n                          </ul>\n                        }\n                      }\n                    }\n                  </li>\n                  @if (hasApi()) {\n                        <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n                            (click)=\"onTabNavClick('api')\">\n                            <span>API</span>\n                        </li>\n                    }\n                  @if (hasA11y()) {\n                        <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n                            (click)=\"onTabNavClick('a11y')\">\n                            <span>A11Y</span>\n                        </li>\n                  }\n                  <!-- OPTIONAL TABS-->\n                  @if (pageThemingContent().length > 0) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n                      (click)=\"onNavClick('theming', 3)\">\n                      <span>THEMING</span>\n                    </li>\n                    @if (pageInteractiveContent().length > 0) {\n                      <li\n                        class=\"doc-page-navigation-item\"\n                        [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n                        (click)=\"onNavClick('advanced', 4)\">\n                        <span>{{ pageInteractiveContent()[0].title() }}</span>\n                      </li>\n                    }\n                    @if(pageVisualSpecsContent.length > 0) {\n                      <li\n                          class=\"doc-page-navigation-item\"\n                          [class.doc-page-navigation-item--selected]=\"fragmentId === 'visual-specs'\"\n                          (click)=\"onTabNavClick('visual-specs')\">\n                          <span>VISUAL SPECS</span>\n                      </li>\n                    }\n                    @if (pagePlaygroundContent.length > 0) {\n                        <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === 'playground'\"\n                            (click)=\"onTabNavClick('playground')\">\n                            <span>PLAYGROUND</span>\n                        </li>\n                    }\n                  }\n                  @if (pageWebComponentContent.length > 0) {\n                      <li\n                          class=\"doc-page-navigation-item\"\n                          [class.doc-page-navigation-item--selected]=\"fragmentId === 'web-component'\"\n                          (click)=\"onTabNavClick('web-component')\">\n                          <span>WEB COMPONENT</span>\n                      </li>\n                  }\n                }\n                @if (pageSectionsContent().length > 0) {\n                  <li\n                    class=\"doc-page-navigation-item\"\n                    [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n                    (click)=\"onNavClick('sections', null)\">\n                    <span>Sections</span>\n                  </li>\n                  @if (sections().length === 0) {\n                    <li\n                      class=\"doc-page-navigation-item\"\n                      [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n                      (click)=\"onNavClick('demo', null)\">\n                      <span>Demo</span>\n                    </li>\n                  }\n                  @if (sections().length > 0) {\n                    <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n                      @for (section of sections(); track section; let i = $index) {\n                        <ul>\n                          <li\n                            class=\"doc-page-navigation-item\"\n                            [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n                            (click)=\"onNavClick(section.id(), null)\">\n                            <span>{{ section.label() || section.id() }}</span>\n                          </li>\n                        </ul>\n                      }\n                    </li>\n                  }\n                }\n              </ul>\n            </div>\n          </eui-page-column-body>\n        </eui-page-column>\n      }\n\n    </eui-page-columns>\n  </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], subLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subLabel", required: false }] }], isNotReady: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNotReady", required: false }] }], isDeprecated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDeprecated", required: false }] }], isDemoComponentOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDemoComponentOnly", required: false }] }], isLegacy: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLegacy", required: false }] }], codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }], showcase: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcase", required: false }] }], isNavigationVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNavigationVisible", required: false }] }, { type: i0.Output, args: ["isNavigationVisibleChange"] }], hasApi: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasApi", required: false }] }], hasA11y: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasA11y", required: false }] }], customApiUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "customApiUrl", required: false }] }], samples: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSampleComponent), { ...{ descendants: true }, isSignal: true }] }], sections: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSectionComponent), { ...{ descendants: true }, isSignal: true }] }], pageOverviewContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewContentDirective), { isSignal: true }] }], pageOverviewDefaultContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewDefaultContentDirective), { isSignal: true }] }], pageSamplesContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSamplesContentDirective), { isSignal: true }] }], pageSectionsContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSectionsContentDirective), { isSignal: true }] }], pageInteractiveContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageInteractiveContentDirective), { isSignal: true }] }], pageAccessibilityContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageAccessibilityContentDirective), { isSignal: true }] }], pageApiContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageApiContentDirective), { isSignal: true }] }], pageThemingContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageThemingContentDirective), { isSignal: true }] }], pageVisualSpecsContent: [{
                 type: ContentChildren,
                 args: [forwardRef(() => DocPageVisualSpecsContentDirective)]
             }], pagePlaygroundContent: [{
                 type: ContentChildren,
                 args: [forwardRef(() => DocPagePlaygroundContentDirective)]
+            }], pageWebComponentContent: [{
+                type: ContentChildren,
+                args: [forwardRef(() => DocPageWebComponentContentDirective)]
             }], tabsContent: [{ type: i0.ViewChild, args: ['tabsContent', { isSignal: true }] }], navContent: [{
                 type: ViewChild,
                 args: ['navContent']
@@ -1501,6 +1515,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
             type: Directive,
             args: [{ selector: 'docPagePlayground' }]
         }] });
+class DocPageWebComponentContentDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageWebComponentContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocPageWebComponentContentDirective, isStandalone: true, selector: "docPageWebComponent", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageWebComponentContentDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'docPageWebComponent' }]
+        }] });
 class DocPageThemingContentDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageThemingContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocPageThemingContentDirective, isStandalone: true, selector: "docPageTheming", ngImport: i0 }); }
@@ -2026,6 +2048,7 @@ const EUI_SHOWCASE = [
     DocPageThemingContentDirective,
     DocPageVisualSpecsContentDirective,
     DocPagePlaygroundContentDirective,
+    DocPageWebComponentContentDirective,
     DocPageCodeFabComponent,
     DocPageCodeModalComponent,
     DocPagePatternComponent,
@@ -2055,5 +2078,5 @@ const EUI_SHOWCASE = [
  * Generated bundle index. Do not edit.
  */
 
-export { ConfigurationService, DocPageAccessibilityContentDirective, DocPageApiContentDirective, DocPageCodeComponent, DocPageCodeFabComponent, DocPageCodeModalComponent, DocPageComponent, DocPageDevGuideComponent, DocPageInteractiveContentDirective, DocPageOverviewContentDirective, DocPageOverviewDefaultContentDirective, DocPagePatternComponent, DocPagePatternDocDirective, DocPagePatternSampleComponent, DocPagePatternSampleDirective, DocPagePatternSampleDocDirective, DocPagePatternSampleRefsComponent, DocPagePatternSimpleComponent, DocPagePatternSimpleDocDirective, DocPagePlaygroundContentDirective, DocPageSamplesContentDirective, DocPageSectionsContentDirective, DocPageThemingContentDirective, DocPageVisualSpecsContentDirective, DocSampleApiComponent, DocSampleComponent, DocSectionCodeComponent, DocSectionCodeCssTagDirective, DocSectionCodeDescriptionTagDirective, DocSectionCodeDocTagDirective, DocSectionCodeHtmlTagDirective, DocSectionCodeServiceTagDirective, DocSectionCodeTsTagDirective, DocSectionComponent, EUI_SHOWCASE, EuiCodeHighlighterDirective, LoremIpsumSampleComponent, PACKAGE_JSON, PlaygroundComponent, StackblitzService, angularJsonFile, indexHtmlFile, mainFile, moduleFile, polyfillsFile, tsConfig };
+export { ConfigurationService, DocPageAccessibilityContentDirective, DocPageApiContentDirective, DocPageCodeComponent, DocPageCodeFabComponent, DocPageCodeModalComponent, DocPageComponent, DocPageDevGuideComponent, DocPageInteractiveContentDirective, DocPageOverviewContentDirective, DocPageOverviewDefaultContentDirective, DocPagePatternComponent, DocPagePatternDocDirective, DocPagePatternSampleComponent, DocPagePatternSampleDirective, DocPagePatternSampleDocDirective, DocPagePatternSampleRefsComponent, DocPagePatternSimpleComponent, DocPagePatternSimpleDocDirective, DocPagePlaygroundContentDirective, DocPageSamplesContentDirective, DocPageSectionsContentDirective, DocPageThemingContentDirective, DocPageVisualSpecsContentDirective, DocPageWebComponentContentDirective, DocSampleApiComponent, DocSampleComponent, DocSectionCodeComponent, DocSectionCodeCssTagDirective, DocSectionCodeDescriptionTagDirective, DocSectionCodeDocTagDirective, DocSectionCodeHtmlTagDirective, DocSectionCodeServiceTagDirective, DocSectionCodeTsTagDirective, DocSectionComponent, EUI_SHOWCASE, EuiCodeHighlighterDirective, LoremIpsumSampleComponent, PACKAGE_JSON, PlaygroundComponent, StackblitzService, angularJsonFile, indexHtmlFile, mainFile, moduleFile, polyfillsFile, tsConfig };
 //# sourceMappingURL=eui-showcase.mjs.map