@eui/showcase 22.0.0-alpha.26 → 22.0.0-alpha.27

package/fesm2022/eui-showcase.mjs

@@ -1046,9 +1046,13 @@ class DocPageComponent {
         /** Deployed base showcase URLs used to resolve WebComponent / React links from the page id. */
         this.webComponentShowcaseUrl = 'https://euidev.ecdevops.eu/eui-showcase-webcomponents-22.x/';
         this.reactShowcaseUrl = 'https://euidev.ecdevops.eu/eui-showcase-react-22.x/';
+        /** Deployed base URL of the composed EDS Storybook host. */
+        this.storybookShowcaseUrl = 'https://euidev.ecdevops.eu/eui-storybook-eds-22.x/';
         /** Local dev ports of the sibling showcases, used when this app is served on localhost. */
         this.webComponentShowcaseLocalPort = 4630;
         this.reactShowcaseLocalPort = 4620;
+        /** Local dev port of the composed Storybook shell (serve-all.mjs shell port). */
+        this.storybookShowcaseLocalPort = 6006;
         /**
          * The shared-manifest entry for this page (matched by `id`), once the manifest has loaded.
          * When set, it is the source of truth for the Figma / WebComponent / React links — the
@@ -1148,6 +1152,30 @@ class DocPageComponent {
         }
         return this.resolveShowcaseBase(this.reactShowcaseUrl, this.reactShowcaseLocalPort) + '#/' + this.id();
     }
+    /**
+     * Resolved Storybook link for this component (null when no stories exist).
+     *
+     * Deep-links into the composed EDS Storybook shell and opens this component's **Angular**
+     * Playground story. The shell composes the Angular framework Storybook under the `angular` ref,
+     * so the composed story id is `angular_angular-<labelSlug>--playground` (refId + the story's
+     * `Angular/<Label>` title slug). Falls back to the id when the manifest has no label.
+     */
+    storybookLink() {
+        const entry = this.manifestEntry();
+        const enabled = entry ? !!entry.availability?.storybook : false;
+        if (!enabled) {
+            return null;
+        }
+        // Story title is `Angular/<Label>`; Storybook slugs it to `angular-<label-slug>`.
+        const label = entry?.label || this.id().replace(/^eds-/, '');
+        const labelSlug = label
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '');
+        const storyId = `angular_angular-${labelSlug}--playground`;
+        const base = this.resolveShowcaseBase(this.storybookShowcaseUrl, this.storybookShowcaseLocalPort);
+        return `${base}?path=/story/${storyId}`;
+    }
     /** Figma link — from the manifest entry when present, else the docPageLinks directive. */
     figmaLink() {
         const entry = this.manifestEntry();
@@ -1565,7 +1593,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: "pageLinksContent", predicate: i0.forwardRef(() => DocPageLinksContentDirective), 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()) && !isDemoComponentOnlyInput()) {\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 (hasLinks()) {\n                    <div id=\"links\" class=\"doc-page-section-title\">Links</div>\n                    <div class=\"doc-page-links\">\n                      <!-- Figma -->\n                      @let figma = figmaLink();\n                      <a\n                        class=\"doc-page-link-card\"\n                        [class.doc-page-link-card--disabled]=\"!figma\"\n                        [attr.href]=\"figma || null\"\n                        [attr.target]=\"figma ? '_blank' : null\"\n                        [attr.rel]=\"figma ? 'noopener noreferrer' : null\"\n                        [attr.aria-disabled]=\"!figma\"\n                        [attr.tabindex]=\"figma ? 0 : -1\">\n                        <span class=\"doc-page-link-card__logo\">\n                          <svg viewBox=\"0 0 38 57\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n                            <path fill=\"#1abcfe\" d=\"M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z\"/>\n                            <path fill=\"#0acf83\" d=\"M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z\"/>\n                            <path fill=\"#ff7262\" d=\"M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z\"/>\n                            <path fill=\"#f24e1e\" d=\"M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z\"/>\n                            <path fill=\"#a259ff\" d=\"M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z\"/>\n                          </svg>\n                        </span>\n                        <span class=\"doc-page-link-card__text\">\n                          <span class=\"doc-page-link-card__title\">Figma</span>\n                          <span class=\"doc-page-link-card__subtitle\">{{ figma ? 'Open design file' : 'Not available' }}</span>\n                        </span>\n                      </a>\n\n                      <!-- Web component -->\n                      @let wc = webComponentLink();\n                      <a\n                        class=\"doc-page-link-card\"\n                        [class.doc-page-link-card--disabled]=\"!wc\"\n                        [attr.href]=\"wc || null\"\n                        [attr.target]=\"wc ? '_blank' : null\"\n                        [attr.rel]=\"wc ? 'noopener noreferrer' : null\"\n                        [attr.aria-disabled]=\"!wc\"\n                        [attr.tabindex]=\"wc ? 0 : -1\">\n                        <span class=\"doc-page-link-card__logo\">\n                          <svg viewBox=\"0 0 30 30\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n                            <path fill=\"#29abe2\" d=\"M15 1.5 27.5 8v14L15 28.5 2.5 22V8L15 1.5z\" opacity=\".15\"/>\n                            <path fill=\"none\" stroke=\"#29abe2\" stroke-width=\"2\" d=\"M15 2.5 26.5 9v12L15 27.5 3.5 21V9L15 2.5z\"/>\n                            <path fill=\"#29abe2\" d=\"m11 11-4 4 4 4 1.4-1.4L9.8 15l2.6-2.6zm8 0-1.4 1.4 2.6 2.6-2.6 2.6L19 19l4-4z\"/>\n                          </svg>\n                        </span>\n                        <span class=\"doc-page-link-card__text\">\n                          <span class=\"doc-page-link-card__title\">WebComponent</span>\n                          <span class=\"doc-page-link-card__subtitle\">{{ wc ? 'View component' : 'Not available' }}</span>\n                        </span>\n                      </a>\n\n                      <!-- React -->\n                      @let react = reactLink();\n                      <a\n                        class=\"doc-page-link-card\"\n                        [class.doc-page-link-card--disabled]=\"!react\"\n                        [attr.href]=\"react || null\"\n                        [attr.target]=\"react ? '_blank' : null\"\n                        [attr.rel]=\"react ? 'noopener noreferrer' : null\"\n                        [attr.aria-disabled]=\"!react\"\n                        [attr.tabindex]=\"react ? 0 : -1\">\n                        <span class=\"doc-page-link-card__logo\">\n                          <svg viewBox=\"-11.5 -10.23 23 20.46\" width=\"26\" height=\"26\" aria-hidden=\"true\" focusable=\"false\">\n                            <circle r=\"2.05\" fill=\"#61dafb\"/>\n                            <g fill=\"none\" stroke=\"#61dafb\" stroke-width=\"1\">\n                              <ellipse rx=\"11\" ry=\"4.2\"/>\n                              <ellipse rx=\"11\" ry=\"4.2\" transform=\"rotate(60)\"/>\n                              <ellipse rx=\"11\" ry=\"4.2\" transform=\"rotate(120)\"/>\n                            </g>\n                          </svg>\n                        </span>\n                        <span class=\"doc-page-link-card__text\">\n                          <span class=\"doc-page-link-card__title\">React</span>\n                          <span class=\"doc-page-link-card__subtitle\">{{ react ? 'View component' : 'Not available' }}</span>\n                        </span>\n                      </a>\n                    </div>\n                  }\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 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                }\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-links{display:flex;flex-wrap:wrap;gap:var(--eui-s-m);margin-bottom:var(--eui-s-2xl)}.eui-doc-page .doc-page-links .doc-page-link-card{display:flex;align-items:center;gap:var(--eui-s-s);flex:0 1 220px;min-width:200px;padding:var(--eui-s-s) var(--eui-s-m);border:1px solid var(--eui-c-divider);border-radius:var(--eui-br-m);background:var(--eui-c-surface-page);text-decoration:none;color:var(--eui-c-text);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.eui-doc-page .doc-page-links .doc-page-link-card:hover,.eui-doc-page .doc-page-links .doc-page-link-card:focus-visible{border-color:var(--eui-c-primary);box-shadow:var(--eui-sh-2);transform:translateY(-1px)}.eui-doc-page .doc-page-links .doc-page-link-card:focus-visible{outline:2px solid var(--eui-c-primary);outline-offset:2px}.eui-doc-page .doc-page-links .doc-page-link-card__logo{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;border-radius:var(--eui-br-m);background:var(--eui-c-surface-container-1)}.eui-doc-page .doc-page-links .doc-page-link-card__text{display:flex;flex-direction:column;min-width:0}.eui-doc-page .doc-page-links .doc-page-link-card__title{font:var(--eui-f-m-semi-bold);color:var(--eui-c-text)}.eui-doc-page .doc-page-links .doc-page-link-card__subtitle{font:var(--eui-f-s);color:var(--eui-c-text-lighter)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled{cursor:not-allowed;pointer-events:none;border-style:dashed;border-color:var(--eui-c-divider-dark);background:var(--eui-c-surface-container-1)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__logo{filter:grayscale(1);opacity:.45}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__title{color:var(--eui-c-text-lighter)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__subtitle{color:var(--eui-c-text-lightest);font-style:italic}.eui-doc-page .doc-page-links .doc-page-link-card--disabled:hover,.eui-doc-page .doc-page-links .doc-page-link-card--disabled:focus-visible{border-color:var(--eui-c-divider-dark);box-shadow:none;transform:none}.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: "pageLinksContent", predicate: i0.forwardRef(() => DocPageLinksContentDirective), 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()) && !isDemoComponentOnlyInput()) {\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 (hasLinks()) {\n                    <div id=\"links\" class=\"doc-page-section-title\">Links</div>\n                    <div class=\"doc-page-links\">\n                      <!-- Figma -->\n                      @let figma = figmaLink();\n                      <a\n                        class=\"doc-page-link-card\"\n                        [class.doc-page-link-card--disabled]=\"!figma\"\n                        [attr.href]=\"figma || null\"\n                        [attr.target]=\"figma ? '_blank' : null\"\n                        [attr.rel]=\"figma ? 'noopener noreferrer' : null\"\n                        [attr.aria-disabled]=\"!figma\"\n                        [attr.tabindex]=\"figma ? 0 : -1\">\n                        <span class=\"doc-page-link-card__logo\">\n                          <svg viewBox=\"0 0 38 57\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n                            <path fill=\"#1abcfe\" d=\"M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z\"/>\n                            <path fill=\"#0acf83\" d=\"M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z\"/>\n                            <path fill=\"#ff7262\" d=\"M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z\"/>\n                            <path fill=\"#f24e1e\" d=\"M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z\"/>\n                            <path fill=\"#a259ff\" d=\"M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z\"/>\n                          </svg>\n                        </span>\n                        <span class=\"doc-page-link-card__text\">\n                          <span class=\"doc-page-link-card__title\">Figma</span>\n                          <span class=\"doc-page-link-card__subtitle\">{{ figma ? 'Open design file' : 'Not available' }}</span>\n                        </span>\n                      </a>\n\n                      <!-- Web component -->\n                      @let wc = webComponentLink();\n                      <a\n                        class=\"doc-page-link-card\"\n                        [class.doc-page-link-card--disabled]=\"!wc\"\n                        [attr.href]=\"wc || null\"\n                        [attr.target]=\"wc ? '_blank' : null\"\n                        [attr.rel]=\"wc ? 'noopener noreferrer' : null\"\n                        [attr.aria-disabled]=\"!wc\"\n                        [attr.tabindex]=\"wc ? 0 : -1\">\n                        <span class=\"doc-page-link-card__logo\">\n                          <svg viewBox=\"0 0 30 30\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n                            <path fill=\"#29abe2\" d=\"M15 1.5 27.5 8v14L15 28.5 2.5 22V8L15 1.5z\" opacity=\".15\"/>\n                            <path fill=\"none\" stroke=\"#29abe2\" stroke-width=\"2\" d=\"M15 2.5 26.5 9v12L15 27.5 3.5 21V9L15 2.5z\"/>\n                            <path fill=\"#29abe2\" d=\"m11 11-4 4 4 4 1.4-1.4L9.8 15l2.6-2.6zm8 0-1.4 1.4 2.6 2.6-2.6 2.6L19 19l4-4z\"/>\n                          </svg>\n                        </span>\n                        <span class=\"doc-page-link-card__text\">\n                          <span class=\"doc-page-link-card__title\">WebComponent</span>\n                          <span class=\"doc-page-link-card__subtitle\">{{ wc ? 'View component' : 'Not available' }}</span>\n                        </span>\n                      </a>\n\n                      <!-- React -->\n                      @let react = reactLink();\n                      <a\n                        class=\"doc-page-link-card\"\n                        [class.doc-page-link-card--disabled]=\"!react\"\n                        [attr.href]=\"react || null\"\n                        [attr.target]=\"react ? '_blank' : null\"\n                        [attr.rel]=\"react ? 'noopener noreferrer' : null\"\n                        [attr.aria-disabled]=\"!react\"\n                        [attr.tabindex]=\"react ? 0 : -1\">\n                        <span class=\"doc-page-link-card__logo\">\n                          <svg viewBox=\"-11.5 -10.23 23 20.46\" width=\"26\" height=\"26\" aria-hidden=\"true\" focusable=\"false\">\n                            <circle r=\"2.05\" fill=\"#61dafb\"/>\n                            <g fill=\"none\" stroke=\"#61dafb\" stroke-width=\"1\">\n                              <ellipse rx=\"11\" ry=\"4.2\"/>\n                              <ellipse rx=\"11\" ry=\"4.2\" transform=\"rotate(60)\"/>\n                              <ellipse rx=\"11\" ry=\"4.2\" transform=\"rotate(120)\"/>\n                            </g>\n                          </svg>\n                        </span>\n                        <span class=\"doc-page-link-card__text\">\n                          <span class=\"doc-page-link-card__title\">React</span>\n                          <span class=\"doc-page-link-card__subtitle\">{{ react ? 'View component' : 'Not available' }}</span>\n                        </span>\n                      </a>\n\n                      <!-- Storybook -->\n                      <!-- @let storybook = storybookLink();\n                      <a\n                        class=\"doc-page-link-card\"\n                        [class.doc-page-link-card--disabled]=\"!storybook\"\n                        [attr.href]=\"storybook || null\"\n                        [attr.target]=\"storybook ? '_blank' : null\"\n                        [attr.rel]=\"storybook ? 'noopener noreferrer' : null\"\n                        [attr.aria-disabled]=\"!storybook\"\n                        [attr.tabindex]=\"storybook ? 0 : -1\">\n                        <span class=\"doc-page-link-card__logo\">\n                          <svg viewBox=\"0 0 32 32\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n                            <path fill=\"#ff4785\" d=\"M4.7 2.4 4 24.8a1.3 1.3 0 0 0 1.2 1.4l21.2 1.5a1.3 1.3 0 0 0 1.4-1.3V1.6A1.3 1.3 0 0 0 26.4.3L6 .1A1.3 1.3 0 0 0 4.7 1.4z\" transform=\"translate(1.7 2.3)\"/>\n                            <path fill=\"#fff\" d=\"M21.4 6.6l.2-3.8 1.6-.1.1 4a.3.3 0 0 1-.5.2l-1.2-.9-1.4 1.1a.3.3 0 0 1-.5-.3zM18.2 13c0 1 6.9.5 7.8-.2 0-5.6-3-8.6-8.5-8.6S9 7.3 9 11.7c0 7.7 10.3 7.8 10.3 12 0 1.2-.6 1.9-1.8 1.9-1.7 0-2.4-.9-2.3-3.8 0-.6-6.4-.8-6.6 0-.5 6.7 3.7 8.6 9 8.6 5 0 9-2.7 9-7.5 0-8.2-10.5-8-10.5-12.1 0-1.6 1.2-1.9 1.9-1.9.8 0 2.1.1 2 2.1z\"/>\n                          </svg>\n                        </span>\n                        <span class=\"doc-page-link-card__text\">\n                          <span class=\"doc-page-link-card__title\">Storybook</span>\n                          <span class=\"doc-page-link-card__subtitle\">{{ storybook ? 'Open playground' : 'Not available' }}</span>\n                        </span>\n                      </a> -->\n                    </div>\n                  }\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 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                }\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-links{display:flex;flex-wrap:wrap;gap:var(--eui-s-m);margin-bottom:var(--eui-s-2xl)}.eui-doc-page .doc-page-links .doc-page-link-card{display:flex;align-items:center;gap:var(--eui-s-s);flex:0 1 220px;min-width:200px;padding:var(--eui-s-s) var(--eui-s-m);border:1px solid var(--eui-c-divider);border-radius:var(--eui-br-m);background:var(--eui-c-surface-page);text-decoration:none;color:var(--eui-c-text);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.eui-doc-page .doc-page-links .doc-page-link-card:hover,.eui-doc-page .doc-page-links .doc-page-link-card:focus-visible{border-color:var(--eui-c-primary);box-shadow:var(--eui-sh-2);transform:translateY(-1px)}.eui-doc-page .doc-page-links .doc-page-link-card:focus-visible{outline:2px solid var(--eui-c-primary);outline-offset:2px}.eui-doc-page .doc-page-links .doc-page-link-card__logo{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;border-radius:var(--eui-br-m);background:var(--eui-c-surface-container-1)}.eui-doc-page .doc-page-links .doc-page-link-card__text{display:flex;flex-direction:column;min-width:0}.eui-doc-page .doc-page-links .doc-page-link-card__title{font:var(--eui-f-m-semi-bold);color:var(--eui-c-text)}.eui-doc-page .doc-page-links .doc-page-link-card__subtitle{font:var(--eui-f-s);color:var(--eui-c-text-lighter)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled{cursor:not-allowed;pointer-events:none;border-style:dashed;border-color:var(--eui-c-divider-dark);background:var(--eui-c-surface-container-1)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__logo{filter:grayscale(1);opacity:.45}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__title{color:var(--eui-c-text-lighter)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__subtitle{color:var(--eui-c-text-lightest);font-style:italic}.eui-doc-page .doc-page-links .doc-page-link-card--disabled:hover,.eui-doc-page .doc-page-links .doc-page-link-card--disabled:focus-visible{border-color:var(--eui-c-divider-dark);box-shadow:none;transform:none}.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,
@@ -1576,7 +1604,7 @@ 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()) && !isDemoComponentOnlyInput()) {\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 (hasLinks()) {\n                    <div id=\"links\" class=\"doc-page-section-title\">Links</div>\n                    <div class=\"doc-page-links\">\n                      <!-- Figma -->\n                      @let figma = figmaLink();\n                      <a\n                        class=\"doc-page-link-card\"\n                        [class.doc-page-link-card--disabled]=\"!figma\"\n                        [attr.href]=\"figma || null\"\n                        [attr.target]=\"figma ? '_blank' : null\"\n                        [attr.rel]=\"figma ? 'noopener noreferrer' : null\"\n                        [attr.aria-disabled]=\"!figma\"\n                        [attr.tabindex]=\"figma ? 0 : -1\">\n                        <span class=\"doc-page-link-card__logo\">\n                          <svg viewBox=\"0 0 38 57\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n                            <path fill=\"#1abcfe\" d=\"M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z\"/>\n                            <path fill=\"#0acf83\" d=\"M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z\"/>\n                            <path fill=\"#ff7262\" d=\"M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z\"/>\n                            <path fill=\"#f24e1e\" d=\"M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z\"/>\n                            <path fill=\"#a259ff\" d=\"M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z\"/>\n                          </svg>\n                        </span>\n                        <span class=\"doc-page-link-card__text\">\n                          <span class=\"doc-page-link-card__title\">Figma</span>\n                          <span class=\"doc-page-link-card__subtitle\">{{ figma ? 'Open design file' : 'Not available' }}</span>\n                        </span>\n                      </a>\n\n                      <!-- Web component -->\n                      @let wc = webComponentLink();\n                      <a\n                        class=\"doc-page-link-card\"\n                        [class.doc-page-link-card--disabled]=\"!wc\"\n                        [attr.href]=\"wc || null\"\n                        [attr.target]=\"wc ? '_blank' : null\"\n                        [attr.rel]=\"wc ? 'noopener noreferrer' : null\"\n                        [attr.aria-disabled]=\"!wc\"\n                        [attr.tabindex]=\"wc ? 0 : -1\">\n                        <span class=\"doc-page-link-card__logo\">\n                          <svg viewBox=\"0 0 30 30\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n                            <path fill=\"#29abe2\" d=\"M15 1.5 27.5 8v14L15 28.5 2.5 22V8L15 1.5z\" opacity=\".15\"/>\n                            <path fill=\"none\" stroke=\"#29abe2\" stroke-width=\"2\" d=\"M15 2.5 26.5 9v12L15 27.5 3.5 21V9L15 2.5z\"/>\n                            <path fill=\"#29abe2\" d=\"m11 11-4 4 4 4 1.4-1.4L9.8 15l2.6-2.6zm8 0-1.4 1.4 2.6 2.6-2.6 2.6L19 19l4-4z\"/>\n                          </svg>\n                        </span>\n                        <span class=\"doc-page-link-card__text\">\n                          <span class=\"doc-page-link-card__title\">WebComponent</span>\n                          <span class=\"doc-page-link-card__subtitle\">{{ wc ? 'View component' : 'Not available' }}</span>\n                        </span>\n                      </a>\n\n                      <!-- React -->\n                      @let react = reactLink();\n                      <a\n                        class=\"doc-page-link-card\"\n                        [class.doc-page-link-card--disabled]=\"!react\"\n                        [attr.href]=\"react || null\"\n                        [attr.target]=\"react ? '_blank' : null\"\n                        [attr.rel]=\"react ? 'noopener noreferrer' : null\"\n                        [attr.aria-disabled]=\"!react\"\n                        [attr.tabindex]=\"react ? 0 : -1\">\n                        <span class=\"doc-page-link-card__logo\">\n                          <svg viewBox=\"-11.5 -10.23 23 20.46\" width=\"26\" height=\"26\" aria-hidden=\"true\" focusable=\"false\">\n                            <circle r=\"2.05\" fill=\"#61dafb\"/>\n                            <g fill=\"none\" stroke=\"#61dafb\" stroke-width=\"1\">\n                              <ellipse rx=\"11\" ry=\"4.2\"/>\n                              <ellipse rx=\"11\" ry=\"4.2\" transform=\"rotate(60)\"/>\n                              <ellipse rx=\"11\" ry=\"4.2\" transform=\"rotate(120)\"/>\n                            </g>\n                          </svg>\n                        </span>\n                        <span class=\"doc-page-link-card__text\">\n                          <span class=\"doc-page-link-card__title\">React</span>\n                          <span class=\"doc-page-link-card__subtitle\">{{ react ? 'View component' : 'Not available' }}</span>\n                        </span>\n                      </a>\n                    </div>\n                  }\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 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                }\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-links{display:flex;flex-wrap:wrap;gap:var(--eui-s-m);margin-bottom:var(--eui-s-2xl)}.eui-doc-page .doc-page-links .doc-page-link-card{display:flex;align-items:center;gap:var(--eui-s-s);flex:0 1 220px;min-width:200px;padding:var(--eui-s-s) var(--eui-s-m);border:1px solid var(--eui-c-divider);border-radius:var(--eui-br-m);background:var(--eui-c-surface-page);text-decoration:none;color:var(--eui-c-text);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.eui-doc-page .doc-page-links .doc-page-link-card:hover,.eui-doc-page .doc-page-links .doc-page-link-card:focus-visible{border-color:var(--eui-c-primary);box-shadow:var(--eui-sh-2);transform:translateY(-1px)}.eui-doc-page .doc-page-links .doc-page-link-card:focus-visible{outline:2px solid var(--eui-c-primary);outline-offset:2px}.eui-doc-page .doc-page-links .doc-page-link-card__logo{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;border-radius:var(--eui-br-m);background:var(--eui-c-surface-container-1)}.eui-doc-page .doc-page-links .doc-page-link-card__text{display:flex;flex-direction:column;min-width:0}.eui-doc-page .doc-page-links .doc-page-link-card__title{font:var(--eui-f-m-semi-bold);color:var(--eui-c-text)}.eui-doc-page .doc-page-links .doc-page-link-card__subtitle{font:var(--eui-f-s);color:var(--eui-c-text-lighter)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled{cursor:not-allowed;pointer-events:none;border-style:dashed;border-color:var(--eui-c-divider-dark);background:var(--eui-c-surface-container-1)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__logo{filter:grayscale(1);opacity:.45}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__title{color:var(--eui-c-text-lighter)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__subtitle{color:var(--eui-c-text-lightest);font-style:italic}.eui-doc-page .doc-page-links .doc-page-link-card--disabled:hover,.eui-doc-page .doc-page-links .doc-page-link-card--disabled:focus-visible{border-color:var(--eui-c-divider-dark);box-shadow:none;transform:none}.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()) && !isDemoComponentOnlyInput()) {\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 (hasLinks()) {\n                    <div id=\"links\" class=\"doc-page-section-title\">Links</div>\n                    <div class=\"doc-page-links\">\n                      <!-- Figma -->\n                      @let figma = figmaLink();\n                      <a\n                        class=\"doc-page-link-card\"\n                        [class.doc-page-link-card--disabled]=\"!figma\"\n                        [attr.href]=\"figma || null\"\n                        [attr.target]=\"figma ? '_blank' : null\"\n                        [attr.rel]=\"figma ? 'noopener noreferrer' : null\"\n                        [attr.aria-disabled]=\"!figma\"\n                        [attr.tabindex]=\"figma ? 0 : -1\">\n                        <span class=\"doc-page-link-card__logo\">\n                          <svg viewBox=\"0 0 38 57\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n                            <path fill=\"#1abcfe\" d=\"M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z\"/>\n                            <path fill=\"#0acf83\" d=\"M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z\"/>\n                            <path fill=\"#ff7262\" d=\"M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z\"/>\n                            <path fill=\"#f24e1e\" d=\"M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z\"/>\n                            <path fill=\"#a259ff\" d=\"M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z\"/>\n                          </svg>\n                        </span>\n                        <span class=\"doc-page-link-card__text\">\n                          <span class=\"doc-page-link-card__title\">Figma</span>\n                          <span class=\"doc-page-link-card__subtitle\">{{ figma ? 'Open design file' : 'Not available' }}</span>\n                        </span>\n                      </a>\n\n                      <!-- Web component -->\n                      @let wc = webComponentLink();\n                      <a\n                        class=\"doc-page-link-card\"\n                        [class.doc-page-link-card--disabled]=\"!wc\"\n                        [attr.href]=\"wc || null\"\n                        [attr.target]=\"wc ? '_blank' : null\"\n                        [attr.rel]=\"wc ? 'noopener noreferrer' : null\"\n                        [attr.aria-disabled]=\"!wc\"\n                        [attr.tabindex]=\"wc ? 0 : -1\">\n                        <span class=\"doc-page-link-card__logo\">\n                          <svg viewBox=\"0 0 30 30\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n                            <path fill=\"#29abe2\" d=\"M15 1.5 27.5 8v14L15 28.5 2.5 22V8L15 1.5z\" opacity=\".15\"/>\n                            <path fill=\"none\" stroke=\"#29abe2\" stroke-width=\"2\" d=\"M15 2.5 26.5 9v12L15 27.5 3.5 21V9L15 2.5z\"/>\n                            <path fill=\"#29abe2\" d=\"m11 11-4 4 4 4 1.4-1.4L9.8 15l2.6-2.6zm8 0-1.4 1.4 2.6 2.6-2.6 2.6L19 19l4-4z\"/>\n                          </svg>\n                        </span>\n                        <span class=\"doc-page-link-card__text\">\n                          <span class=\"doc-page-link-card__title\">WebComponent</span>\n                          <span class=\"doc-page-link-card__subtitle\">{{ wc ? 'View component' : 'Not available' }}</span>\n                        </span>\n                      </a>\n\n                      <!-- React -->\n                      @let react = reactLink();\n                      <a\n                        class=\"doc-page-link-card\"\n                        [class.doc-page-link-card--disabled]=\"!react\"\n                        [attr.href]=\"react || null\"\n                        [attr.target]=\"react ? '_blank' : null\"\n                        [attr.rel]=\"react ? 'noopener noreferrer' : null\"\n                        [attr.aria-disabled]=\"!react\"\n                        [attr.tabindex]=\"react ? 0 : -1\">\n                        <span class=\"doc-page-link-card__logo\">\n                          <svg viewBox=\"-11.5 -10.23 23 20.46\" width=\"26\" height=\"26\" aria-hidden=\"true\" focusable=\"false\">\n                            <circle r=\"2.05\" fill=\"#61dafb\"/>\n                            <g fill=\"none\" stroke=\"#61dafb\" stroke-width=\"1\">\n                              <ellipse rx=\"11\" ry=\"4.2\"/>\n                              <ellipse rx=\"11\" ry=\"4.2\" transform=\"rotate(60)\"/>\n                              <ellipse rx=\"11\" ry=\"4.2\" transform=\"rotate(120)\"/>\n                            </g>\n                          </svg>\n                        </span>\n                        <span class=\"doc-page-link-card__text\">\n                          <span class=\"doc-page-link-card__title\">React</span>\n                          <span class=\"doc-page-link-card__subtitle\">{{ react ? 'View component' : 'Not available' }}</span>\n                        </span>\n                      </a>\n\n                      <!-- Storybook -->\n                      <!-- @let storybook = storybookLink();\n                      <a\n                        class=\"doc-page-link-card\"\n                        [class.doc-page-link-card--disabled]=\"!storybook\"\n                        [attr.href]=\"storybook || null\"\n                        [attr.target]=\"storybook ? '_blank' : null\"\n                        [attr.rel]=\"storybook ? 'noopener noreferrer' : null\"\n                        [attr.aria-disabled]=\"!storybook\"\n                        [attr.tabindex]=\"storybook ? 0 : -1\">\n                        <span class=\"doc-page-link-card__logo\">\n                          <svg viewBox=\"0 0 32 32\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n                            <path fill=\"#ff4785\" d=\"M4.7 2.4 4 24.8a1.3 1.3 0 0 0 1.2 1.4l21.2 1.5a1.3 1.3 0 0 0 1.4-1.3V1.6A1.3 1.3 0 0 0 26.4.3L6 .1A1.3 1.3 0 0 0 4.7 1.4z\" transform=\"translate(1.7 2.3)\"/>\n                            <path fill=\"#fff\" d=\"M21.4 6.6l.2-3.8 1.6-.1.1 4a.3.3 0 0 1-.5.2l-1.2-.9-1.4 1.1a.3.3 0 0 1-.5-.3zM18.2 13c0 1 6.9.5 7.8-.2 0-5.6-3-8.6-8.5-8.6S9 7.3 9 11.7c0 7.7 10.3 7.8 10.3 12 0 1.2-.6 1.9-1.8 1.9-1.7 0-2.4-.9-2.3-3.8 0-.6-6.4-.8-6.6 0-.5 6.7 3.7 8.6 9 8.6 5 0 9-2.7 9-7.5 0-8.2-10.5-8-10.5-12.1 0-1.6 1.2-1.9 1.9-1.9.8 0 2.1.1 2 2.1z\"/>\n                          </svg>\n                        </span>\n                        <span class=\"doc-page-link-card__text\">\n                          <span class=\"doc-page-link-card__title\">Storybook</span>\n                          <span class=\"doc-page-link-card__subtitle\">{{ storybook ? 'Open playground' : 'Not available' }}</span>\n                        </span>\n                      </a> -->\n                    </div>\n                  }\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 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                }\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-links{display:flex;flex-wrap:wrap;gap:var(--eui-s-m);margin-bottom:var(--eui-s-2xl)}.eui-doc-page .doc-page-links .doc-page-link-card{display:flex;align-items:center;gap:var(--eui-s-s);flex:0 1 220px;min-width:200px;padding:var(--eui-s-s) var(--eui-s-m);border:1px solid var(--eui-c-divider);border-radius:var(--eui-br-m);background:var(--eui-c-surface-page);text-decoration:none;color:var(--eui-c-text);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.eui-doc-page .doc-page-links .doc-page-link-card:hover,.eui-doc-page .doc-page-links .doc-page-link-card:focus-visible{border-color:var(--eui-c-primary);box-shadow:var(--eui-sh-2);transform:translateY(-1px)}.eui-doc-page .doc-page-links .doc-page-link-card:focus-visible{outline:2px solid var(--eui-c-primary);outline-offset:2px}.eui-doc-page .doc-page-links .doc-page-link-card__logo{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;border-radius:var(--eui-br-m);background:var(--eui-c-surface-container-1)}.eui-doc-page .doc-page-links .doc-page-link-card__text{display:flex;flex-direction:column;min-width:0}.eui-doc-page .doc-page-links .doc-page-link-card__title{font:var(--eui-f-m-semi-bold);color:var(--eui-c-text)}.eui-doc-page .doc-page-links .doc-page-link-card__subtitle{font:var(--eui-f-s);color:var(--eui-c-text-lighter)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled{cursor:not-allowed;pointer-events:none;border-style:dashed;border-color:var(--eui-c-divider-dark);background:var(--eui-c-surface-container-1)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__logo{filter:grayscale(1);opacity:.45}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__title{color:var(--eui-c-text-lighter)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__subtitle{color:var(--eui-c-text-lightest);font-style:italic}.eui-doc-page .doc-page-links .doc-page-link-card--disabled:hover,.eui-doc-page .doc-page-links .doc-page-link-card--disabled:focus-visible{border-color:var(--eui-c-divider-dark);box-shadow:none;transform:none}.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 }] }], pageLinksContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageLinksContentDirective), { 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)]