@eui/showcase 18.0.0-rc.24 → 18.0.0-rc.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/esm2022/lib/components/doc-page/doc-page-dev-guide.component.mjs +9 -5
  2. package/esm2022/lib/components/doc-page/doc-page.component.mjs +2 -2
  3. package/fesm2022/eui-showcase.mjs +9 -5
  4. package/fesm2022/eui-showcase.mjs.map +1 -1
  5. package/lib/components/doc-page/doc-page-dev-guide.component.d.ts +1 -0
  6. package/lib/components/doc-page/doc-page-dev-guide.component.d.ts.map +1 -1
  7. package/package.json +3 -3
package/esm2022/lib/components/doc-page/doc-page-dev-guide.component.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { Component, ViewEncapsulation } from '@angular/core';
1
+ import { Component, ViewEncapsulation, HostBinding } from '@angular/core';
2
2
  import { map, take } from 'rxjs/operators';
3
3
  import * as i0 from "@angular/core";
4
4
  import * as i1 from "ngx-markdown";
@@ -12,6 +12,7 @@ export class DocPageDevGuideComponent {
12
12
  this.http = http;
13
13
  this.router = router;
14
14
  this.route = route;
15
+ this.cssClass = 'eui-doc-page';
15
16
  this.headers = [];
16
17
  this.subscription = this.route.url.subscribe((u) => {
17
18
  this._loadMdContent('/docs/' + u.join('/'));
@@ -84,10 +85,13 @@ export class DocPageDevGuideComponent {
84
85
  }
85
86
  }
86
87
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DocPageDevGuideComponent, deps: [{ token: i1.MarkdownService }, { token: i2.HttpClient }, { token: i3.Router }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
87
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: DocPageDevGuideComponent, selector: "eui-showcase-doc-page-dev-guide", ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <markdown class=\"doc-content\" [data]=\"markdown\"></markdown>\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column class=\"eui-u-hidden-mobile\"\n label=\"On this page\"\n size=\"4xl\"\n isCollapsible\n isRightCollapsible>\n\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <li class=\"doc-page-navigation-item\"\n *ngFor=\"let header of headers\" (click)=\"onNavClick(header.id)\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === header.id\">\n <span [ngClass]=\"header.level === 3 ? 'eui-u-ml-m eui-u-f-regular': ''\">\n {{header.label}}\n </span>\n </li>\n </ul>\n </div>\n </eui-page-column-body>\n\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".doc-page-navigation,.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-info-darker);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-info-darker);padding-left:var(--eui-s-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-neutral-lightest)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-info-bg);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.doc-page-section-title{margin-top:var(--eui-s-2xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-info-darker);letter-spacing:-1px;font:var(--eui-f-2xl-bold)}.doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-2xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-2xs);width:auto;display:table;color:var(--eui-c-neutral)}.doc-content h2{color:var(--eui-c-info-dark);margin-top:var(--eui-s-3xl)}.doc-content h3{color:var(--eui-c-neutral);margin-top:var(--eui-s-3xl)}.doc-content h4{margin-top:var(--eui-s-xl);text-decoration:underline;color:var(--eui-c-neutral-light)}.doc-content h5{font:var(--eui-f-bold);font-style:italic}.doc-content ul{margin-top:1rem}.doc-content ul li{list-style:circle;margin-left:2rem}.doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.doc-content ol li{counter-increment:item;margin-bottom:1rem}.doc-content ol li:before{margin-right:1.25rem;content:counter(item);background:var(--eui-c-info-dark);border-radius:50%;color:#fff;width:2rem;height:2rem;text-align:center;display:inline-block;font-size:1.25rem;font-weight:600}.doc-content ol li p:first-child{display:inline-block}.doc-content ol ol li{margin-top:1rem}.doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-info-dark);line-height:1.5rem}.doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.doc-content em.info{color:var(--eui-c-info-dark)}.doc-content em.warning{color:var(--eui-c-warning)}.doc-content table{border-collapse:collapse;width:100%}.doc-content table,.doc-content th,.doc-content td{padding:.25rem;border:1px solid var(--eui-c-neutral-light)}.doc-content td{text-align:left}.doc-content code.language-none{display:inline-block;background-color:var(--eui-c-neutral-bg-light)}.doc-content img{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i5.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i5.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["size", "label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i5.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i5.EuiPageColumnsComponent, selector: "eui-page-columns" }, { kind: "component", type: i5.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i1.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }], encapsulation: i0.ViewEncapsulation.None }); }
88
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: DocPageDevGuideComponent, selector: "eui-showcase-doc-page-dev-guide", host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <markdown class=\"doc-content\" [data]=\"markdown\"></markdown>\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column class=\"eui-u-hidden-mobile\"\n label=\"On this page\"\n size=\"4xl\"\n isCollapsible\n isRightCollapsible>\n\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <li class=\"doc-page-navigation-item\"\n *ngFor=\"let header of headers\" (click)=\"onNavClick(header.id)\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === header.id\">\n <span [ngClass]=\"header.level === 3 ? 'eui-u-ml-m eui-u-f-regular': ''\">\n {{header.label}}\n </span>\n </li>\n </ul>\n </div>\n </eui-page-column-body>\n\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-info-darker);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-info-darker);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-info-darker)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-neutral-lightest)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-info-bg);border-left:2px solid var(--eui-c-info-darker)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-2xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-info-darker);letter-spacing:-1px;font:var(--eui-f-2xl-bold)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-2xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-2xs);width:auto;display:table;color:var(--eui-c-neutral)}.eui-doc-page .doc-content h2{color:var(--eui-c-info-dark);margin-top:var(--eui-s-3xl)}.eui-doc-page .doc-content h3{color:var(--eui-c-neutral);margin-top:var(--eui-s-3xl)}.eui-doc-page .doc-content h4{margin-top:var(--eui-s-xl);text-decoration:underline;color:var(--eui-c-neutral-light)}.eui-doc-page .doc-content h5{font:var(--eui-f-bold);font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:2rem}.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:1.25rem;content:counter(item);background:var(--eui-c-info-dark);border-radius:50%;color:#fff;width:2rem;height:2rem;text-align:center;display:inline-block;font-size:1.25rem;font-weight:600}.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-info-dark);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-info-dark)}.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-neutral-light)}.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-neutral-bg-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i5.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i5.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["size", "label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i5.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i5.EuiPageColumnsComponent, selector: "eui-page-columns" }, { kind: "component", type: i5.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i1.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }], encapsulation: i0.ViewEncapsulation.None }); }
88
89
  }
89
90
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DocPageDevGuideComponent, decorators: [{
90
91
  type: Component,
91
- args: [{ selector: 'eui-showcase-doc-page-dev-guide', encapsulation: ViewEncapsulation.None, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <markdown class=\"doc-content\" [data]=\"markdown\"></markdown>\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column class=\"eui-u-hidden-mobile\"\n label=\"On this page\"\n size=\"4xl\"\n isCollapsible\n isRightCollapsible>\n\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <li class=\"doc-page-navigation-item\"\n *ngFor=\"let header of headers\" (click)=\"onNavClick(header.id)\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === header.id\">\n <span [ngClass]=\"header.level === 3 ? 'eui-u-ml-m eui-u-f-regular': ''\">\n {{header.label}}\n </span>\n </li>\n </ul>\n </div>\n </eui-page-column-body>\n\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".doc-page-navigation,.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-info-darker);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-info-darker);padding-left:var(--eui-s-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-neutral-lightest)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-info-bg);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.doc-page-section-title{margin-top:var(--eui-s-2xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-info-darker);letter-spacing:-1px;font:var(--eui-f-2xl-bold)}.doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-2xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-2xs);width:auto;display:table;color:var(--eui-c-neutral)}.doc-content h2{color:var(--eui-c-info-dark);margin-top:var(--eui-s-3xl)}.doc-content h3{color:var(--eui-c-neutral);margin-top:var(--eui-s-3xl)}.doc-content h4{margin-top:var(--eui-s-xl);text-decoration:underline;color:var(--eui-c-neutral-light)}.doc-content h5{font:var(--eui-f-bold);font-style:italic}.doc-content ul{margin-top:1rem}.doc-content ul li{list-style:circle;margin-left:2rem}.doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.doc-content ol li{counter-increment:item;margin-bottom:1rem}.doc-content ol li:before{margin-right:1.25rem;content:counter(item);background:var(--eui-c-info-dark);border-radius:50%;color:#fff;width:2rem;height:2rem;text-align:center;display:inline-block;font-size:1.25rem;font-weight:600}.doc-content ol li p:first-child{display:inline-block}.doc-content ol ol li{margin-top:1rem}.doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-info-dark);line-height:1.5rem}.doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.doc-content em.info{color:var(--eui-c-info-dark)}.doc-content em.warning{color:var(--eui-c-warning)}.doc-content table{border-collapse:collapse;width:100%}.doc-content table,.doc-content th,.doc-content td{padding:.25rem;border:1px solid var(--eui-c-neutral-light)}.doc-content td{text-align:left}.doc-content code.language-none{display:inline-block;background-color:var(--eui-c-neutral-bg-light)}.doc-content img{max-width:100%}\n"] }]
92
- }], ctorParameters: () => [{ type: i1.MarkdownService }, { type: i2.HttpClient }, { type: i3.Router }, { type: i3.ActivatedRoute }] });
93
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9jLXBhZ2UtZGV2LWd1aWRlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9kb2MtcGFnZS9kb2MtcGFnZS1kZXYtZ3VpZGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL2RvYy1wYWdlL2RvYy1wYWdlLWRldi1ndWlkZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLGlCQUFpQixFQUE0QixNQUFNLGVBQWUsQ0FBQztBQUl2RixPQUFPLEVBQUUsR0FBRyxFQUFFLElBQUksRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7Ozs7O0FBUzNDLE1BQU0sT0FBTyx3QkFBd0I7SUFRakMsWUFDWSxlQUFnQyxFQUNoQyxJQUFnQixFQUNoQixNQUFjLEVBQ2QsS0FBcUI7UUFIckIsb0JBQWUsR0FBZixlQUFlLENBQWlCO1FBQ2hDLFNBQUksR0FBSixJQUFJLENBQVk7UUFDaEIsV0FBTSxHQUFOLE1BQU0sQ0FBUTtRQUNkLFVBQUssR0FBTCxLQUFLLENBQWdCO1FBUmpDLFlBQU8sR0FBd0QsRUFBRSxDQUFDO1FBVTlELElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUU7WUFDL0MsSUFBSSxDQUFDLGNBQWMsQ0FBQyxRQUFRLEdBQUcsQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQ2hELENBQUMsQ0FBQyxDQUFBO1FBRUYsMkJBQTJCO1FBQzNCLElBQUksQ0FBQyxlQUFlLENBQUMsUUFBUSxDQUFDLE9BQU8sR0FBRyxDQUFDLElBQVksRUFBRSxLQUFhLEVBQUUsR0FBRyxFQUFFLEVBQUU7WUFDekUsSUFBSSxLQUFLLEtBQUssQ0FBQyxJQUFJLEtBQUssS0FB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LElBQUksQ0FDcEUsR0FBRyxDQUFDLENBQUMsRUFBRSxFQUFFLEVBQUUsQ0FBQyxFQUFFLENBQUMsT0FBTyxDQUFDLElBQUksTUFBTSxDQUFDLGFBQWEsRUFBRSxHQUFHLENBQUMsRUFBRSxHQUFHLFdBQVcsY0FBYyxDQUFDLENBQUMsQ0FDeEYsQ0FBQyxTQUFTLENBQUMsQ0FBQyxFQUFFLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDLENBQUM7SUFDNUMsQ0FBQztJQUVPLGlCQUFpQixDQUFDLFVBQWtCO1FBQ3hDLDhDQUE4QztRQUM5QyxJQUFJLENBQUMsTUFBTSxDQUFDLG1CQUFtQixHQUFHLFFBQVEsQ0FBQztRQUMzQyxJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxFQUFFLEVBQUUsVUFBVSxFQUFFLElBQUksQ0FBQyxLQUFLLEVBQUUsUUFBUSxFQUFFLFVBQVUsRUFBRSxDQUFDLENBQUM7UUFFOUUsSUFBSSxVQUFVLEVBQUUsQ0FBQztZQUNiLFVBQVUsQ0FBQyxHQUFHLEVBQUU7Z0JBQ1osTUFBTSxHQUFHLEdBQUcsUUFBUSxDQUFDLGNBQWMsQ0FBQyxVQUFVLENBQUMsQ0FBQztnQkFDaEQsSUFBSSxHQUFHLEVBQUUsQ0FBQztvQkFDTixHQUFHLENBQUMsY0FBYyxFQUFFLENBQUM7Z0JBQ3pCLENBQUM7WUFDTCxDQUFDLENBQUMsQ0FBQztRQUNQLENBQUM7SUFDTCxDQUFDOzhHQWhHUSx3QkFBd0I7a0dBQXhCLHdCQUF3Qix1RUNickMsNDNDQWtDQTs7MkZEckJhLHdCQUF3QjtrQkFOcEMsU0FBUzsrQkFDSSxpQ0FBaUMsaUJBRzVCLGlCQUFpQixDQUFDLElBQUkiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIFZpZXdFbmNhcHN1bGF0aW9uLCBBZnRlclZpZXdJbml0LCBPbkRlc3Ryb3kgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEh0dHBDbGllbnQgfSBmcm9tICdAYW5ndWxhci9jb21tb24vaHR0cCc7XG5pbXBvcnQgeyBSb3V0ZXIsIEFjdGl2YXRlZFJvdXRlIH0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgbWFwLCB0YWtlIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgTWFya2Rvd25TZXJ2aWNlIH0gZnJvbSAnbmd4LW1hcmtkb3duJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdldWktc2hvd2Nhc2UtZG9jLXBhZ2UtZGV2LWd1aWRlJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vZG9jLXBhZ2UtZGV2LWd1aWRlLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9zaGFyZWQuc2NzcyddLFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIERvY1BhZ2VEZXZHdWlkZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uRGVzdHJveSwgQWZ0ZXJWaWV3SW5pdCB7XG5cbiAgICBtYXJrZG93bjogc3RyaW5nO1xuICAgIGlzRmlyc3Q6IGJvb2xlYW47XG4gICAgaGVhZGVyczogQXJyYXk8eyBpZDogc3RyaW5nLCBsYWJlbDogc3RyaW5nLCBsZXZlbDogbnVtYmVyIH0+ID0gW107XG4gICAgZnJhZ21lbnRJZDogc3RyaW5nO1xuICAgIHByaXZhdGUgc3Vic2NyaXB0aW9uOiBTdWJzY3JpcHRpb247XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgcHJpdmF0ZSBtYXJrZG93blNlcnZpY2U6IE1hcmtkb3duU2VydmljZSxcbiAgICAgICAgcHJpdmF0ZSBodHRwOiBIdHRwQ2xpZW50LFxuICAgICAgICBwcml2YXRlIHJvdXRlcjogUm91dGVyLFxuICAgICAgICBwcml2YXRlIHJvdXRlOiBBY3RpdmF0ZWRSb3V0ZSxcbiAgICApIHtcbiAgICAgICAgdGhpcy5zdWJzY3JpcHRpb24gPSB0aGlzLnJvdXRlLnVybC5zdWJzY3JpYmUoKHUpID0+IHtcbiAgICAgICAgICAgIHRoaXMuX2xvYWRNZENvbnRlbnQoJy9kb2NzLycgKyB1LmpvaW4oJy8nKSk7XG4gICAgICAgIH0pXG5cbiAgICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lXG4gICAgICAgIHRoaXMubWFya2Rvd25TZXJ2aWNlLnJlbmRlcmVyLmhlYWRpbmcgPSAodGV4dDogc3RyaW5nLCBsZXZlbDogbnVtYmVyLCBzdHIpID0+IHtcbiAgICAgICAgICAgIGlmIChsZXZlbCA9PT0gMiB8fCBsZXZlbCA9PT0gMykge1xuICAgICAgICAgICAgICAgIGNvbnN0IG5ld0hlYWRlciA9ICc8aCcgKyBsZXZlbCArICcgaWQ9XCInICsgc3RyICsgJ1wiPicgK1xuICAgICAgICAgICAgICAgICAgICB0ZXh0ICtcbiAgICAgICAgICAgICAgICAgICAgJzwvaCcgKyBsZXZlbCArICc+JztcbiAgICAgICAgICAgICAgICAgICAgY29uc29sZS5sb2codGV4dCk7XG4gICAgICAgICAgICAgICAgaWYgKHRleHQuaW5kZXhPZignPGEgJykgPT09IC0xICYmIHRleHQuaW5kZXhPZignPGVtPicpID09PSAtMSkge1xuICAgICAgICAgICAgICAgICAgICB0aGlzLmhlYWRlcnMucHVzaCh7IGlkOiBzdHIsIGxhYmVsOiB0ZXh0LCBsZXZlbCB9KTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgcmV0dXJuIG5ld0hlYWRlcjtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIHJldHVybiAnPGgnICsgbGV2ZWwgKyAnPicgK1xuICAgICAgICAgICAgICAgIHRleHQgK1xuICAgICAgICAgICAgICAgICc8L2gnICsgbGV2ZWwgKyAnPic7XG4gICAgICAgIH07XG4gICAgfVxuXG4gICAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgICAgICB0aGlzLnJvdXRlLmZyYWdtZW50LnBpcGUodGFrZSgxKSkuc3Vic2NyaWJlKChmcmFnbWVudCkgPT4ge1xuICAgICAgICAgICAgaWYgKGZyYWdtZW50KSB7XG4gICAgICAgICAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgIHRoaXMuZnJhZ21lbnRJZCA9IGZyYWdtZW50O1xuICAgICAgICAgICAgICAgICAgICBjb25zdCBmZ20gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChmcmFnbWVudCk7XG4gICAgICAgICAgICAgICAgICAgIGZnbS5zY3JvbGxJbnRvVmlldygpO1xuICAgICAgICAgICAgICAgIH0sIDEpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMuc3Vic2NyaXB0aW9uKSB7XG4gICAgICAgICAgICB0aGlzLnN1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgb25OYXZDbGljayhmcmFnbWVudElkOiBzdHJpbmcpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5fc2Nyb2xsVG9GcmFnbWVudChmcmFnbWVudElkKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIF9sb2FkTWRDb250ZW50KHVybD86IHN0cmluZyk6IHZvaWQge1xuICAgICAgICBsZXQgbWRQYXRoLCBjb250ZXh0Um9vdDtcbiAgICAgICAgY29uc3QgY3VycmVudFVybCA9IHdpbmRvdy5sb2NhdGlvbjtcbiAgICAgICAgY29uc3QgcGF0aE5hbWVBcnJheSA9IGN1cnJlbnRVcmwucGF0aG5hbWUuc3BsaXQoJy8nKTtcblxuICAgICAgICB0aGlzLmhlYWRlcnMgPSBbXTtcblxuICAgICAgICBpZiAodXJsKSB7XG4gICAgICAgICAgICBtZFBhdGggPSB1cmwuc3Vic3RyKDEpO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgbWRQYXRoID0gcGF0aE5hbWVBcnJheS5zbGljZShwYXRoTmFtZUFycmF5Lmxlbmd0aCAtIDMpLmpvaW4oJy8nKTtcbiAgICAgICAgfVxuXG4gICAgICAgIGNvbnRleHRSb290ID0gYCR7Y3VycmVudFVybC5wcm90b2NvbH0vLyR7Y3VycmVudFVybC5ob3N0fWA7XG4gICAgICAgIGlmIChwYXRoTmFtZUFycmF5WzFdICE9PSAnc2hvd2Nhc2UtZGV2LWd1aWRlJykge1xuICAgICAgICAgICAgY29udGV4dFJvb3QgKz0gYC8ke3BhdGhOYW1lQXJyYXlbMV19YDtcbiAgICAgICAgfVxuXG4gICAgICAgIGNvbnN0IGZpbGVQYXRoID0gYCR7Y29udGV4dFJvb3R9L2Fzc2V0cy8ke21kUGF0aH0ubWRgO1xuXG4gICAgICAgIHRoaXMuaHR0cC5nZXQ8c3RyaW5nPihmaWxlUGF0aCwgeyByZXNwb25zZVR5cGU6ICd0ZXh0JyBhcyAnanNvbicgfSkucGlwZShcbiAgICAgICAgICAgIG1hcCgobWQpID0+IG1kLnJlcGxhY2UobmV3IFJlZ0V4cCgnYXNzZXRzL2RvY3MnLCAnZycpLCBgJHtjb250ZXh0Um9vdH0vYXNzZXRzL2RvY3NgKSksXG4gICAgICAgICkuc3Vic2NyaWJlKChtZCkgPT4gdGhpcy5tYXJrZG93biA9IG1kKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIF9zY3JvbGxUb0ZyYWdtZW50KGZyYWdtZW50SWQ6IHN0cmluZyk6IHZvaWQge1xuICAgICAgICAvLyBmb3JjaW5nIHJlbG9hZCB3aGVuIGRlZXAgbGluayB3aXRoIGZyYWdtZW50XG4gICAgICAgIHRoaXMucm91dGVyLm9uU2FtZVVybE5hdmlnYXRpb24gPSAncmVsb2FkJztcbiAgICAgICAgdGhpcy5yb3V0ZXIubmF2aWdhdGUoWycuJ10sIHsgcmVsYXRpdmVUbzogdGhpcy5yb3V0ZSwgZnJhZ21lbnQ6IGZyYWdtZW50SWQgfSk7XG5cbiAgICAgICAgaWYgKGZyYWdtZW50SWQpIHtcbiAgICAgICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgICAgICAgIGNvbnN0IGZnbSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGZyYWdtZW50SWQpO1xuICAgICAgICAgICAgICAgIGlmIChmZ20pIHtcbiAgICAgICAgICAgICAgICAgICAgZmdtLnNjcm9sbEludG9WaWV3KCk7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfSk7XG4gICAgICAgIH1cbiAgICB9XG59XG4iLCI8ZXVpLXBhZ2U+XG4gICAgPGV1aS1wYWdlLWNvbnRlbnQ+XG4gICAgICAgIDxldWktcGFnZS1jb2x1bW5zPlxuICAgICAgICAgICAgPGV1aS1wYWdlLWNvbHVtbj5cbiAgICAgICAgICAgICAgICA8ZXVpLXBhZ2UtY29sdW1uLWJvZHk+XG4gICAgICAgICAgICAgICAgICAgIDxtYXJrZG93biBjbGFzcz1cImRvYy1jb250ZW50XCIgW2RhdGFdPVwibWFya2Rvd25cIj48L21hcmtkb3duPlxuICAgICAgICAgICAgICAgIDwvZXVpLXBhZ2UtY29sdW1uLWJvZHk+XG4gICAgICAgICAgICA8L2V1aS1wYWdlLWNvbHVtbj5cblxuICAgICAgICAgICAgPGV1aS1wYWdlLWNvbHVtbiBjbGFzcz1cImV1aS11LWhpZGRlbi1tb2JpbGVcIlxuICAgICAgICAgICAgICAgIGxhYmVsPVwiT24gdGhpcyBwYWdlXCJcbiAgICAgICAgICAgICAgICBzaXplPVwiNHhsXCJcbiAgICAgICAgICAgICAgICBpc0NvbGxhcHNpYmxlXG4gICAgICAgICAgICAgICAgaXNSaWdodENvbGxhcHNpYmxlPlxuXG4gICAgICAgICAgICAgICAgPGV1aS1wYWdlLWNvbHVtbi1ib2R5PlxuICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZG9jLXBhZ2UtbmF2aWdhdGlvbi1jb250ZW50XCIgdGFiaW5kZXg9XCIwXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8dWwgY2xhc3M9XCJkb2MtcGFnZS1uYXZpZ2F0aW9uXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPGxpIGNsYXNzPVwiZG9jLXBhZ2UtbmF2aWdhdGlvbi1pdGVtXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKm5nRm9yPVwibGV0IGhlYWRlciBvZiBoZWFkZXJzXCIgKGNsaWNrKT1cIm9uTmF2Q2xpY2soaGVhZGVyLmlkKVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtjbGFzcy5kb2MtcGFnZS1uYXZpZ2F0aW9uLWl0ZW0tLXNlbGVjdGVkXT1cImZyYWdtZW50SWQgPT09IGhlYWRlci5pZFwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHNwYW4gW25nQ2xhc3NdPVwiaGVhZGVyLmxldmVsID09PSAzID8gJ2V1aS11LW1sLW0gZXVpLXUtZi1yZWd1bGFyJzogJydcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB7e2hlYWRlci5sYWJlbH19XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9saT5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvdWw+XG4gICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDwvZXVpLXBhZ2UtY29sdW1uLWJvZHk+XG5cbiAgICAgICAgICAgIDwvZXVpLXBhZ2UtY29sdW1uPlxuXG4gICAgICAgIDwvZXVpLXBhZ2UtY29sdW1ucz5cbiAgICA8L2V1aS1wYWdlLWNvbnRlbnQ+XG48L2V1aS1wYWdlPlxuIl19
92
+ args: [{ selector: 'eui-showcase-doc-page-dev-guide', encapsulation: ViewEncapsulation.None, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <markdown class=\"doc-content\" [data]=\"markdown\"></markdown>\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column class=\"eui-u-hidden-mobile\"\n label=\"On this page\"\n size=\"4xl\"\n isCollapsible\n isRightCollapsible>\n\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <li class=\"doc-page-navigation-item\"\n *ngFor=\"let header of headers\" (click)=\"onNavClick(header.id)\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === header.id\">\n <span [ngClass]=\"header.level === 3 ? 'eui-u-ml-m eui-u-f-regular': ''\">\n {{header.label}}\n </span>\n </li>\n </ul>\n </div>\n </eui-page-column-body>\n\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-info-darker);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-info-darker);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-info-darker)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-neutral-lightest)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-info-bg);border-left:2px solid var(--eui-c-info-darker)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-2xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-info-darker);letter-spacing:-1px;font:var(--eui-f-2xl-bold)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-2xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-2xs);width:auto;display:table;color:var(--eui-c-neutral)}.eui-doc-page .doc-content h2{color:var(--eui-c-info-dark);margin-top:var(--eui-s-3xl)}.eui-doc-page .doc-content h3{color:var(--eui-c-neutral);margin-top:var(--eui-s-3xl)}.eui-doc-page .doc-content h4{margin-top:var(--eui-s-xl);text-decoration:underline;color:var(--eui-c-neutral-light)}.eui-doc-page .doc-content h5{font:var(--eui-f-bold);font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:2rem}.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:1.25rem;content:counter(item);background:var(--eui-c-info-dark);border-radius:50%;color:#fff;width:2rem;height:2rem;text-align:center;display:inline-block;font-size:1.25rem;font-weight:600}.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-info-dark);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-info-dark)}.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-neutral-light)}.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-neutral-bg-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
93
+ }], ctorParameters: () => [{ type: i1.MarkdownService }, { type: i2.HttpClient }, { type: i3.Router }, { type: i3.ActivatedRoute }], propDecorators: { cssClass: [{
94
+ type: HostBinding,
95
+ args: ['class']
96
+ }] } });
97
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9jLXBhZ2UtZGV2LWd1aWRlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9kb2MtcGFnZS9kb2MtcGFnZS1kZXYtZ3VpZGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL2RvYy1wYWdlL2RvYy1wYWdlLWRldi1ndWlkZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLGlCQUFpQixFQUE0QixXQUFXLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFJcEcsT0FBTyxFQUFFLEdBQUcsRUFBRSxJQUFJLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7OztBQVMzQyxNQUFNLE9BQU8sd0JBQXdCO0lBU2pDLFlBQ1ksZUFBZ0MsRUFDaEMsSUFBZ0IsRUFDaEIsTUFBYyxFQUNkLEtBQXFCO1FBSHJCLG9CQUFlLEdBQWYsZUFBZSxDQUFpQjtRQUNoQyxTQUFJLEdBQUosSUFBSSxDQUFZO1FBQ2hCLFdBQU0sR0FBTixNQUFNLENBQVE7UUFDZCxVQUFLLEdBQUwsS0FBSyxDQUFnQjtRQVpYLGFBQVEsR0FBRyxjQUFjLENBQUM7UUFJaEQsWUFBTyxHQUF3RCxFQUFFLENBQUM7UUFVOUQsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRTtZQUMvQyxJQUFJLENBQUMsY0FBYyxDQUFDLFFBQVEsR0FBRyxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFDaEQsQ0FBQyxDQUFDLENBQUE7UUFFRiwyQkFBMkI7UUFDM0IsSUFBSSxDQUFDLGVBQWUsQ0FBQyxRQUFRLENBQUMsT0FBTyxHQUFHLENBQUMsSUFBWSxFQUFFLEtBQWEsRUFBRSxHQUFHLEVBQUUsRUFBRTtZQUN6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RUFBRSxZQUFZLEVBQUUsTUFBZ0IsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUNwRSxHQUFHLENBQUMsQ0FBQyxFQUFFLEVBQUUsRUFBRSxDQUFDLEVBQUUsQ0FBQyxPQUFPLENBQUMsSUFBSSxNQUFNLENBQUMsYUFBYSxFQUFFLEdBQUcsQ0FBQyxFQUFFLEdBQUcsV0FBVyxjQUFjLENBQUMsQ0FBQyxDQUN4RixDQUFDLFNBQVMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUMsQ0FBQztJQUM1QyxDQUFDO0lBRU8saUJBQWlCLENBQUMsVUFBa0I7UUFDeEMsOENBQThDO1FBQzlDLElBQUksQ0FBQyxNQUFNLENBQUMsbUJBQW1CLEdBQUcsUUFBUSxDQUFDO1FBQzNDLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUMsR0FBRyxDQUFDLEVBQUUsRUFBRSxVQUFVLEVBQUUsSUFBSSxDQUFDLEtBQUssRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLENBQUMsQ0FBQztRQUU5RSxJQUFJLFVBQVUsRUFBRSxDQUFDO1lBQ2IsVUFBVSxDQUFDLEdBQUcsRUFBRTtnQkFDWixNQUFNLEdBQUcsR0FBRyxRQUFRLENBQUMsY0FBYyxDQUFDLFVBQVUsQ0FBQyxDQUFDO2dCQUNoRCxJQUFJLEdBQUcsRUFBRSxDQUFDO29CQUNOLEdBQUcsQ0FBQyxjQUFjLEVBQUUsQ0FBQztnQkFDekIsQ0FBQztZQUNMLENBQUMsQ0FBQyxDQUFDO1FBQ1AsQ0FBQztJQUNMLENBQUM7OEdBakdRLHdCQUF3QjtrR0FBeEIsd0JBQXdCLDJIQ2JyQyw0M0NBa0NBOzsyRkRyQmEsd0JBQXdCO2tCQU5wQyxTQUFTOytCQUNJLGlDQUFpQyxpQkFHNUIsaUJBQWlCLENBQUMsSUFBSTsrSkFHZixRQUFRO3NCQUE3QixXQUFXO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIFZpZXdFbmNhcHN1bGF0aW9uLCBBZnRlclZpZXdJbml0LCBPbkRlc3Ryb3ksIEhvc3RCaW5kaW5nIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBIdHRwQ2xpZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uL2h0dHAnO1xuaW1wb3J0IHsgUm91dGVyLCBBY3RpdmF0ZWRSb3V0ZSB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IG1hcCwgdGFrZSB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IE1hcmtkb3duU2VydmljZSB9IGZyb20gJ25neC1tYXJrZG93bic7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnZXVpLXNob3djYXNlLWRvYy1wYWdlLWRldi1ndWlkZScsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2RvYy1wYWdlLWRldi1ndWlkZS5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vc2hhcmVkLnNjc3MnXSxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBEb2NQYWdlRGV2R3VpZGVDb21wb25lbnQgaW1wbGVtZW50cyBPbkRlc3Ryb3ksIEFmdGVyVmlld0luaXQge1xuICAgIEBIb3N0QmluZGluZygnY2xhc3MnKSBjc3NDbGFzcyA9ICdldWktZG9jLXBhZ2UnO1xuXG4gICAgbWFya2Rvd246IHN0cmluZztcbiAgICBpc0ZpcnN0OiBib29sZWFuO1xuICAgIGhlYWRlcnM6IEFycmF5PHsgaWQ6IHN0cmluZywgbGFiZWw6IHN0cmluZywgbGV2ZWw6IG51bWJlciB9PiA9IFtdO1xuICAgIGZyYWdtZW50SWQ6IHN0cmluZztcbiAgICBwcml2YXRlIHN1YnNjcmlwdGlvbjogU3Vic2NyaXB0aW9uO1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIHByaXZhdGUgbWFya2Rvd25TZXJ2aWNlOiBNYXJrZG93blNlcnZpY2UsXG4gICAgICAgIHByaXZhdGUgaHR0cDogSHR0cENsaWVudCxcbiAgICAgICAgcHJpdmF0ZSByb3V0ZXI6IFJvdXRlcixcbiAgICAgICAgcHJpdmF0ZSByb3V0ZTogQWN0aXZhdGVkUm91dGUsXG4gICAgKSB7XG4gICAgICAgIHRoaXMuc3Vic2NyaXB0aW9uID0gdGhpcy5yb3V0ZS51cmwuc3Vic2NyaWJlKCh1KSA9PiB7XG4gICAgICAgICAgICB0aGlzLl9sb2FkTWRDb250ZW50KCcvZG9jcy8nICsgdS5qb2luKCcvJykpO1xuICAgICAgICB9KVxuXG4gICAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZVxuICAgICAgICB0aGlzLm1hcmtkb3duU2VydmljZS5yZW5kZXJlci5oZWFkaW5nID0gKHRleHQ6IHN0cmluZywgbGV2ZWw6IG51bWJlciwgc3RyKSA9PiB7XG4gICAgICAgICAgICBpZiAobGV2ZWwgPT09IDIgfHwgbGV2ZWwgPT09IDMpIHtcbiAgICAgICAgICAgICAgICBjb25zdCBuZXdIZWFkZXIgPSAnPGgnICsgbGV2ZWwgKyAnIGlkPVwiJyArIHN0ciArICdcIj4nICtcbiAgICAgICAgICAgICAgICAgICAgdGV4dCArXG4gICAgICAgICAgICAgICAgICAgICc8L2gnICsgbGV2ZWwgKyAnPic7XG4gICAgICAgICAgICAgICAgICAgIGNvbnNvbGUubG9nKHRleHQpO1xuICAgICAgICAgICAgICAgIGlmICh0ZXh0LmluZGV4T2YoJzxhICcpID09PSAtMSAmJiB0ZXh0LmluZGV4T2YoJzxlbT4nKSA9PT0gLTEpIHtcbiAgICAgICAgICAgICAgICAgICAgdGhpcy5oZWFkZXJzLnB1c2goeyBpZDogc3RyLCBsYWJlbDogdGV4dCwgbGV2ZWwgfSk7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIHJldHVybiBuZXdIZWFkZXI7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICByZXR1cm4gJzxoJyArIGxldmVsICsgJz4nICtcbiAgICAgICAgICAgICAgICB0ZXh0ICtcbiAgICAgICAgICAgICAgICAnPC9oJyArIGxldmVsICsgJz4nO1xuICAgICAgICB9O1xuICAgIH1cblxuICAgIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5yb3V0ZS5mcmFnbWVudC5waXBlKHRha2UoMSkpLnN1YnNjcmliZSgoZnJhZ21lbnQpID0+IHtcbiAgICAgICAgICAgIGlmIChmcmFnbWVudCkge1xuICAgICAgICAgICAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICB0aGlzLmZyYWdtZW50SWQgPSBmcmFnbWVudDtcbiAgICAgICAgICAgICAgICAgICAgY29uc3QgZmdtID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoZnJhZ21lbnQpO1xuICAgICAgICAgICAgICAgICAgICBmZ20uc2Nyb2xsSW50b1ZpZXcoKTtcbiAgICAgICAgICAgICAgICB9LCAxKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgICAgIGlmICh0aGlzLnN1YnNjcmlwdGlvbikge1xuICAgICAgICAgICAgdGhpcy5zdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIG9uTmF2Q2xpY2soZnJhZ21lbnRJZDogc3RyaW5nKTogdm9pZCB7XG4gICAgICAgIHRoaXMuX3Njcm9sbFRvRnJhZ21lbnQoZnJhZ21lbnRJZCk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBfbG9hZE1kQ29udGVudCh1cmw/OiBzdHJpbmcpOiB2b2lkIHtcbiAgICAgICAgbGV0IG1kUGF0aCwgY29udGV4dFJvb3Q7XG4gICAgICAgIGNvbnN0IGN1cnJlbnRVcmwgPSB3aW5kb3cubG9jYXRpb247XG4gICAgICAgIGNvbnN0IHBhdGhOYW1lQXJyYXkgPSBjdXJyZW50VXJsLnBhdGhuYW1lLnNwbGl0KCcvJyk7XG5cbiAgICAgICAgdGhpcy5oZWFkZXJzID0gW107XG5cbiAgICAgICAgaWYgKHVybCkge1xuICAgICAgICAgICAgbWRQYXRoID0gdXJsLnN1YnN0cigxKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIG1kUGF0aCA9IHBhdGhOYW1lQXJyYXkuc2xpY2UocGF0aE5hbWVBcnJheS5sZW5ndGggLSAzKS5qb2luKCcvJyk7XG4gICAgICAgIH1cblxuICAgICAgICBjb250ZXh0Um9vdCA9IGAke2N1cnJlbnRVcmwucHJvdG9jb2x9Ly8ke2N1cnJlbnRVcmwuaG9zdH1gO1xuICAgICAgICBpZiAocGF0aE5hbWVBcnJheVsxXSAhPT0gJ3Nob3djYXNlLWRldi1ndWlkZScpIHtcbiAgICAgICAgICAgIGNvbnRleHRSb290ICs9IGAvJHtwYXRoTmFtZUFycmF5WzFdfWA7XG4gICAgICAgIH1cblxuICAgICAgICBjb25zdCBmaWxlUGF0aCA9IGAke2NvbnRleHRSb290fS9hc3NldHMvJHttZFBhdGh9Lm1kYDtcblxuICAgICAgICB0aGlzLmh0dHAuZ2V0PHN0cmluZz4oZmlsZVBhdGgsIHsgcmVzcG9uc2VUeXBlOiAndGV4dCcgYXMgJ2pzb24nIH0pLnBpcGUoXG4gICAgICAgICAgICBtYXAoKG1kKSA9PiBtZC5yZXBsYWNlKG5ldyBSZWdFeHAoJ2Fzc2V0cy9kb2NzJywgJ2cnKSwgYCR7Y29udGV4dFJvb3R9L2Fzc2V0cy9kb2NzYCkpLFxuICAgICAgICApLnN1YnNjcmliZSgobWQpID0+IHRoaXMubWFya2Rvd24gPSBtZCk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBfc2Nyb2xsVG9GcmFnbWVudChmcmFnbWVudElkOiBzdHJpbmcpOiB2b2lkIHtcbiAgICAgICAgLy8gZm9yY2luZyByZWxvYWQgd2hlbiBkZWVwIGxpbmsgd2l0aCBmcmFnbWVudFxuICAgICAgICB0aGlzLnJvdXRlci5vblNhbWVVcmxOYXZpZ2F0aW9uID0gJ3JlbG9hZCc7XG4gICAgICAgIHRoaXMucm91dGVyLm5hdmlnYXRlKFsnLiddLCB7IHJlbGF0aXZlVG86IHRoaXMucm91dGUsIGZyYWdtZW50OiBmcmFnbWVudElkIH0pO1xuXG4gICAgICAgIGlmIChmcmFnbWVudElkKSB7XG4gICAgICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICAgICAgICBjb25zdCBmZ20gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChmcmFnbWVudElkKTtcbiAgICAgICAgICAgICAgICBpZiAoZmdtKSB7XG4gICAgICAgICAgICAgICAgICAgIGZnbS5zY3JvbGxJbnRvVmlldygpO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH0pO1xuICAgICAgICB9XG4gICAgfVxufVxuIiwiPGV1aS1wYWdlPlxuICAgIDxldWktcGFnZS1jb250ZW50PlxuICAgICAgICA8ZXVpLXBhZ2UtY29sdW1ucz5cbiAgICAgICAgICAgIDxldWktcGFnZS1jb2x1bW4+XG4gICAgICAgICAgICAgICAgPGV1aS1wYWdlLWNvbHVtbi1ib2R5PlxuICAgICAgICAgICAgICAgICAgICA8bWFya2Rvd24gY2xhc3M9XCJkb2MtY29udGVudFwiIFtkYXRhXT1cIm1hcmtkb3duXCI+PC9tYXJrZG93bj5cbiAgICAgICAgICAgICAgICA8L2V1aS1wYWdlLWNvbHVtbi1ib2R5PlxuICAgICAgICAgICAgPC9ldWktcGFnZS1jb2x1bW4+XG5cbiAgICAgICAgICAgIDxldWktcGFnZS1jb2x1bW4gY2xhc3M9XCJldWktdS1oaWRkZW4tbW9iaWxlXCJcbiAgICAgICAgICAgICAgICBsYWJlbD1cIk9uIHRoaXMgcGFnZVwiXG4gICAgICAgICAgICAgICAgc2l6ZT1cIjR4bFwiXG4gICAgICAgICAgICAgICAgaXNDb2xsYXBzaWJsZVxuICAgICAgICAgICAgICAgIGlzUmlnaHRDb2xsYXBzaWJsZT5cblxuICAgICAgICAgICAgICAgIDxldWktcGFnZS1jb2x1bW4tYm9keT5cbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImRvYy1wYWdlLW5hdmlnYXRpb24tY29udGVudFwiIHRhYmluZGV4PVwiMFwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPHVsIGNsYXNzPVwiZG9jLXBhZ2UtbmF2aWdhdGlvblwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxsaSBjbGFzcz1cImRvYy1wYWdlLW5hdmlnYXRpb24taXRlbVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICpuZ0Zvcj1cImxldCBoZWFkZXIgb2YgaGVhZGVyc1wiIChjbGljayk9XCJvbk5hdkNsaWNrKGhlYWRlci5pZClcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbY2xhc3MuZG9jLXBhZ2UtbmF2aWdhdGlvbi1pdGVtLS1zZWxlY3RlZF09XCJmcmFnbWVudElkID09PSBoZWFkZXIuaWRcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxzcGFuIFtuZ0NsYXNzXT1cImhlYWRlci5sZXZlbCA9PT0gMyA/ICdldWktdS1tbC1tIGV1aS11LWYtcmVndWxhcic6ICcnXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAge3toZWFkZXIubGFiZWx9fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvbGk+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L3VsPlxuICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8L2V1aS1wYWdlLWNvbHVtbi1ib2R5PlxuXG4gICAgICAgICAgICA8L2V1aS1wYWdlLWNvbHVtbj5cblxuICAgICAgICA8L2V1aS1wYWdlLWNvbHVtbnM+XG4gICAgPC9ldWktcGFnZS1jb250ZW50PlxuPC9ldWktcGFnZT5cbiJdfQ==
package/esm2022/lib/components/doc-page/doc-page.component.mjs CHANGED
@@ -284,11 +284,11 @@ export class DocPageComponent {
284
284
  return result;
285
285
  }
286
286
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DocPageComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.EuiAppShellService }, { token: i3.DomSanitizer }, { token: i4.Location }], target: i0.ɵɵFactoryTarget.Component }); }
287
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: DocPageComponent, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isLegacy: "isLegacy", codeFolder: "codeFolder", showcase: "showcase", isNavigationVisible: "isNavigationVisible", hasApi: "hasApi", hasA11y: "hasA11y" }, host: { properties: { "class": "this.cssClass" } }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirective) }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirective) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirective) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirective) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirective) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirective) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirective) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirective) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label }}\" subLabel=\"{{ subLabel }}\">\n <eui-page-header-action-items>\n <eui-showcase-doc-page-code\n *ngIf=\"codeFolder\"\n codeFolder=\"{{ codeFolder }}\"\n showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n <eui-chip\n *ngIf=\"stateLabel\"\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady\"\n [euiWarning]=\"isDeprecated\"\n [euiDanger]=\"isLegacy\">\n <span euiLabel>\n <strong>{{ stateLabel }}</strong>\n </span>\n </eui-chip>\n </eui-page-header-action-items>\n </eui-page-header>\n\n <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 19 release (end of 2024)</strong>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n <strong class=\"eui-u-color-danger\"> This component will be removed in eUI 18 release (end of 2023)</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacementNote\">\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n <div *ngIf=\"cmp\">\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 18 release (end of 2023)</strong>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n <div *ngIf=\"cmp\">\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelect)=\"onTabSelected($event)\">\n <eui-tab>\n <euiTabLabel> OPTIONS & SAMPLES </euiTabLabel>\n <euiTabContent>\n <ng-container *ngIf=\"cmp && cmp.metadata\">\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpModuleImport }}</code></pre>\n <br />\n </ng-container>\n\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n\n <div *ngIf=\"pageOverviewContent.length > 0\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n\n <div *ngIf=\"pageOverviewDefaultContent.length > 0\">\n <ng-content select=\"docPageOverviewDefault\"></ng-content>\n </div>\n <br />\n\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasApi\">\n <euiTabLabel> API </euiTabLabel>\n <euiTabContent>\n <ng-container *ngIf=\"apiUrlSafe\">\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\"></iframe>\n </div>\n </ng-container>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasA11y\">\n <euiTabLabel> A11Y </euiTabLabel>\n <euiTabContent>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n <ng-content select=\"docPageAccessibility\"></ng-content>\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n </ng-container>\n <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n No accessibility rules applicable\n </ng-container>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n <euiTabLabel> THEMING </euiTabLabel>\n <euiTabContent>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageTheming\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n <euiTabLabel>\n {{ pageInteractiveContent.first.title }}\n </euiTabLabel>\n <euiTabContent>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent.first.subTitle }}\n </div>\n <ng-content select=\"docPageInteractive\"></ng-content>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n <ng-content select=\"docPageSections\"></ng-content>\n </ng-container>\n\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column *ngIf=\"isNavigationVisible\" class=\"eui-u-hidden-mobile\"\n label=\"On this page\"\n size=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-body>\n\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n <li\n *ngIf=\"hasApi\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onNavClick('api', 1)\">\n <span>API</span>\n </li>\n <li\n *ngIf=\"hasA11y\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onNavClick('a11y', 2)\">\n <span>A11Y</span>\n </li>\n\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onNavClick('samples', 0)\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ng-container *ngIf=\"categories.length > 0\">\n <ng-container *ngIf=\"hasCategories; else noCategories\">\n <ng-container *ngFor=\"let category of categories\">\n <ng-container *ngIf=\"category.name === 'Base'; else notBase\">\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-container>\n <ng-template #notBase>\n <div *ngIf=\"category.name !== 'Base'\" class=\"doc-page-navigation-category\">{{category.name}}</div>\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-template #noCategories>\n <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </li>\n\n\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li\n *ngIf=\"pageThemingContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 3)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n <li\n *ngIf=\"sections.length === 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let section of sections\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n (click)=\"onNavClick(section.id, null)\">\n <span>{{ section.label }}</span>\n </li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n\n\n\n\n </eui-page-column-body>\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".doc-page-navigation,.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-info-darker);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-info-darker);padding-left:var(--eui-s-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-neutral-lightest)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-info-bg);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.doc-page-section-title{margin-top:var(--eui-s-2xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-info-darker);letter-spacing:-1px;font:var(--eui-f-2xl-bold)}.doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-2xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-2xs);width:auto;display:table;color:var(--eui-c-neutral)}.doc-content h2{color:var(--eui-c-info-dark);margin-top:var(--eui-s-3xl)}.doc-content h3{color:var(--eui-c-neutral);margin-top:var(--eui-s-3xl)}.doc-content h4{margin-top:var(--eui-s-xl);text-decoration:underline;color:var(--eui-c-neutral-light)}.doc-content h5{font:var(--eui-f-bold);font-style:italic}.doc-content ul{margin-top:1rem}.doc-content ul li{list-style:circle;margin-left:2rem}.doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.doc-content ol li{counter-increment:item;margin-bottom:1rem}.doc-content ol li:before{margin-right:1.25rem;content:counter(item);background:var(--eui-c-info-dark);border-radius:50%;color:#fff;width:2rem;height:2rem;text-align:center;display:inline-block;font-size:1.25rem;font-weight:600}.doc-content ol li p:first-child{display:inline-block}.doc-content ol ol li{margin-top:1rem}.doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-info-dark);line-height:1.5rem}.doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.doc-content em.info{color:var(--eui-c-info-dark)}.doc-content em.warning{color:var(--eui-c-warning)}.doc-content table{border-collapse:collapse;width:100%}.doc-content table,.doc-content th,.doc-content td{padding:.25rem;border:1px solid var(--eui-c-neutral-light)}.doc-content td{text-align:left}.doc-content code.language-none{display:inline-block;background-color:var(--eui-c-neutral-bg-light)}.doc-content img{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i5.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i5.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i5.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i6.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i6.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["size", "label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i6.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i6.EuiPageColumnsComponent, selector: "eui-page-columns" }, { kind: "component", type: i6.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i6.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i6.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i8.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["ariaDescribedBy", "e2eAttr", "isMuted", "isCloseable", "isFocusable", "isVisible"], outputs: ["closeAlert"] }, { kind: "component", type: i8.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i9.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: i10.EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: i11.DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None }); }
287
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0", type: DocPageComponent, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isLegacy: "isLegacy", codeFolder: "codeFolder", showcase: "showcase", isNavigationVisible: "isNavigationVisible", hasApi: "hasApi", hasA11y: "hasA11y" }, host: { properties: { "class": "this.cssClass" } }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirective) }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirective) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirective) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirective) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirective) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirective) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirective) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirective) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label }}\" subLabel=\"{{ subLabel }}\">\n <eui-page-header-action-items>\n <eui-showcase-doc-page-code\n *ngIf=\"codeFolder\"\n codeFolder=\"{{ codeFolder }}\"\n showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n <eui-chip\n *ngIf=\"stateLabel\"\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady\"\n [euiWarning]=\"isDeprecated\"\n [euiDanger]=\"isLegacy\">\n <span euiLabel>\n <strong>{{ stateLabel }}</strong>\n </span>\n </eui-chip>\n </eui-page-header-action-items>\n </eui-page-header>\n\n <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 19 release (end of 2024)</strong>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n <strong class=\"eui-u-color-danger\"> This component will be removed in eUI 18 release (end of 2023)</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacementNote\">\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n <div *ngIf=\"cmp\">\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 18 release (end of 2023)</strong>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n <div *ngIf=\"cmp\">\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelect)=\"onTabSelected($event)\">\n <eui-tab>\n <euiTabLabel> OPTIONS & SAMPLES </euiTabLabel>\n <euiTabContent>\n <ng-container *ngIf=\"cmp && cmp.metadata\">\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpModuleImport }}</code></pre>\n <br />\n </ng-container>\n\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n\n <div *ngIf=\"pageOverviewContent.length > 0\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n\n <div *ngIf=\"pageOverviewDefaultContent.length > 0\">\n <ng-content select=\"docPageOverviewDefault\"></ng-content>\n </div>\n <br />\n\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasApi\">\n <euiTabLabel> API </euiTabLabel>\n <euiTabContent>\n <ng-container *ngIf=\"apiUrlSafe\">\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\"></iframe>\n </div>\n </ng-container>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasA11y\">\n <euiTabLabel> A11Y </euiTabLabel>\n <euiTabContent>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n <ng-content select=\"docPageAccessibility\"></ng-content>\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n </ng-container>\n <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n No accessibility rules applicable\n </ng-container>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n <euiTabLabel> THEMING </euiTabLabel>\n <euiTabContent>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageTheming\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n <euiTabLabel>\n {{ pageInteractiveContent.first.title }}\n </euiTabLabel>\n <euiTabContent>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent.first.subTitle }}\n </div>\n <ng-content select=\"docPageInteractive\"></ng-content>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n <ng-content select=\"docPageSections\"></ng-content>\n </ng-container>\n\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column *ngIf=\"isNavigationVisible\" class=\"eui-u-hidden-mobile\"\n label=\"On this page\"\n size=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-body>\n\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n <li\n *ngIf=\"hasApi\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onNavClick('api', 1)\">\n <span>API</span>\n </li>\n <li\n *ngIf=\"hasA11y\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onNavClick('a11y', 2)\">\n <span>A11Y</span>\n </li>\n\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onNavClick('samples', 0)\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ng-container *ngIf=\"categories.length > 0\">\n <ng-container *ngIf=\"hasCategories; else noCategories\">\n <ng-container *ngFor=\"let category of categories\">\n <ng-container *ngIf=\"category.name === 'Base'; else notBase\">\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-container>\n <ng-template #notBase>\n <div *ngIf=\"category.name !== 'Base'\" class=\"doc-page-navigation-category\">{{category.name}}</div>\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-template #noCategories>\n <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </li>\n\n\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li\n *ngIf=\"pageThemingContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 3)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n <li\n *ngIf=\"sections.length === 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let section of sections\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n (click)=\"onNavClick(section.id, null)\">\n <span>{{ section.label }}</span>\n </li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n\n\n\n\n </eui-page-column-body>\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-info-darker);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-info-darker);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-info-darker)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-neutral-lightest)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-info-bg);border-left:2px solid var(--eui-c-info-darker)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-2xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-info-darker);letter-spacing:-1px;font:var(--eui-f-2xl-bold)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-2xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-2xs);width:auto;display:table;color:var(--eui-c-neutral)}.eui-doc-page .doc-content h2{color:var(--eui-c-info-dark);margin-top:var(--eui-s-3xl)}.eui-doc-page .doc-content h3{color:var(--eui-c-neutral);margin-top:var(--eui-s-3xl)}.eui-doc-page .doc-content h4{margin-top:var(--eui-s-xl);text-decoration:underline;color:var(--eui-c-neutral-light)}.eui-doc-page .doc-content h5{font:var(--eui-f-bold);font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:2rem}.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:1.25rem;content:counter(item);background:var(--eui-c-info-dark);border-radius:50%;color:#fff;width:2rem;height:2rem;text-align:center;display:inline-block;font-size:1.25rem;font-weight:600}.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-info-dark);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-info-dark)}.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-neutral-light)}.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-neutral-bg-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i5.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i5.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i5.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i6.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i6.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["size", "label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i6.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i6.EuiPageColumnsComponent, selector: "eui-page-columns" }, { kind: "component", type: i6.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i6.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i6.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i8.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["ariaDescribedBy", "e2eAttr", "isMuted", "isCloseable", "isFocusable", "isVisible"], outputs: ["closeAlert"] }, { kind: "component", type: i8.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i9.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: i10.EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: i11.DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None }); }
288
288
  }
289
289
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0", ngImport: i0, type: DocPageComponent, decorators: [{
290
290
  type: Component,
291
- args: [{ selector: 'eui-showcase-doc-page', encapsulation: ViewEncapsulation.None, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label }}\" subLabel=\"{{ subLabel }}\">\n <eui-page-header-action-items>\n <eui-showcase-doc-page-code\n *ngIf=\"codeFolder\"\n codeFolder=\"{{ codeFolder }}\"\n showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n <eui-chip\n *ngIf=\"stateLabel\"\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady\"\n [euiWarning]=\"isDeprecated\"\n [euiDanger]=\"isLegacy\">\n <span euiLabel>\n <strong>{{ stateLabel }}</strong>\n </span>\n </eui-chip>\n </eui-page-header-action-items>\n </eui-page-header>\n\n <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 19 release (end of 2024)</strong>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n <strong class=\"eui-u-color-danger\"> This component will be removed in eUI 18 release (end of 2023)</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacementNote\">\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n <div *ngIf=\"cmp\">\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 18 release (end of 2023)</strong>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n <div *ngIf=\"cmp\">\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelect)=\"onTabSelected($event)\">\n <eui-tab>\n <euiTabLabel> OPTIONS & SAMPLES </euiTabLabel>\n <euiTabContent>\n <ng-container *ngIf=\"cmp && cmp.metadata\">\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpModuleImport }}</code></pre>\n <br />\n </ng-container>\n\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n\n <div *ngIf=\"pageOverviewContent.length > 0\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n\n <div *ngIf=\"pageOverviewDefaultContent.length > 0\">\n <ng-content select=\"docPageOverviewDefault\"></ng-content>\n </div>\n <br />\n\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasApi\">\n <euiTabLabel> API </euiTabLabel>\n <euiTabContent>\n <ng-container *ngIf=\"apiUrlSafe\">\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\"></iframe>\n </div>\n </ng-container>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasA11y\">\n <euiTabLabel> A11Y </euiTabLabel>\n <euiTabContent>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n <ng-content select=\"docPageAccessibility\"></ng-content>\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n </ng-container>\n <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n No accessibility rules applicable\n </ng-container>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n <euiTabLabel> THEMING </euiTabLabel>\n <euiTabContent>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageTheming\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n <euiTabLabel>\n {{ pageInteractiveContent.first.title }}\n </euiTabLabel>\n <euiTabContent>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent.first.subTitle }}\n </div>\n <ng-content select=\"docPageInteractive\"></ng-content>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n <ng-content select=\"docPageSections\"></ng-content>\n </ng-container>\n\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column *ngIf=\"isNavigationVisible\" class=\"eui-u-hidden-mobile\"\n label=\"On this page\"\n size=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-body>\n\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n <li\n *ngIf=\"hasApi\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onNavClick('api', 1)\">\n <span>API</span>\n </li>\n <li\n *ngIf=\"hasA11y\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onNavClick('a11y', 2)\">\n <span>A11Y</span>\n </li>\n\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onNavClick('samples', 0)\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ng-container *ngIf=\"categories.length > 0\">\n <ng-container *ngIf=\"hasCategories; else noCategories\">\n <ng-container *ngFor=\"let category of categories\">\n <ng-container *ngIf=\"category.name === 'Base'; else notBase\">\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-container>\n <ng-template #notBase>\n <div *ngIf=\"category.name !== 'Base'\" class=\"doc-page-navigation-category\">{{category.name}}</div>\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-template #noCategories>\n <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </li>\n\n\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li\n *ngIf=\"pageThemingContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 3)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n <li\n *ngIf=\"sections.length === 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let section of sections\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n (click)=\"onNavClick(section.id, null)\">\n <span>{{ section.label }}</span>\n </li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n\n\n\n\n </eui-page-column-body>\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".doc-page-navigation,.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-info-darker);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-info-darker);padding-left:var(--eui-s-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-neutral-lightest)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-info-bg);border-left:2px solid var(--eui-c-info-darker)}.doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.doc-page-section-title{margin-top:var(--eui-s-2xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-info-darker);letter-spacing:-1px;font:var(--eui-f-2xl-bold)}.doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-2xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-2xs);width:auto;display:table;color:var(--eui-c-neutral)}.doc-content h2{color:var(--eui-c-info-dark);margin-top:var(--eui-s-3xl)}.doc-content h3{color:var(--eui-c-neutral);margin-top:var(--eui-s-3xl)}.doc-content h4{margin-top:var(--eui-s-xl);text-decoration:underline;color:var(--eui-c-neutral-light)}.doc-content h5{font:var(--eui-f-bold);font-style:italic}.doc-content ul{margin-top:1rem}.doc-content ul li{list-style:circle;margin-left:2rem}.doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.doc-content ol li{counter-increment:item;margin-bottom:1rem}.doc-content ol li:before{margin-right:1.25rem;content:counter(item);background:var(--eui-c-info-dark);border-radius:50%;color:#fff;width:2rem;height:2rem;text-align:center;display:inline-block;font-size:1.25rem;font-weight:600}.doc-content ol li p:first-child{display:inline-block}.doc-content ol ol li{margin-top:1rem}.doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-info-dark);line-height:1.5rem}.doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.doc-content em.info{color:var(--eui-c-info-dark)}.doc-content em.warning{color:var(--eui-c-warning)}.doc-content table{border-collapse:collapse;width:100%}.doc-content table,.doc-content th,.doc-content td{padding:.25rem;border:1px solid var(--eui-c-neutral-light)}.doc-content td{text-align:left}.doc-content code.language-none{display:inline-block;background-color:var(--eui-c-neutral-bg-light)}.doc-content img{max-width:100%}\n"] }]
291
+ args: [{ selector: 'eui-showcase-doc-page', encapsulation: ViewEncapsulation.None, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label }}\" subLabel=\"{{ subLabel }}\">\n <eui-page-header-action-items>\n <eui-showcase-doc-page-code\n *ngIf=\"codeFolder\"\n codeFolder=\"{{ codeFolder }}\"\n showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n <eui-chip\n *ngIf=\"stateLabel\"\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady\"\n [euiWarning]=\"isDeprecated\"\n [euiDanger]=\"isLegacy\">\n <span euiLabel>\n <strong>{{ stateLabel }}</strong>\n </span>\n </eui-chip>\n </eui-page-header-action-items>\n </eui-page-header>\n\n <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 19 release (end of 2024)</strong>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n <strong class=\"eui-u-color-danger\"> This component will be removed in eUI 18 release (end of 2023)</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacementNote\">\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n <div *ngIf=\"cmp\">\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 18 release (end of 2023)</strong>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n <div *ngIf=\"cmp\">\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelect)=\"onTabSelected($event)\">\n <eui-tab>\n <euiTabLabel> OPTIONS & SAMPLES </euiTabLabel>\n <euiTabContent>\n <ng-container *ngIf=\"cmp && cmp.metadata\">\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpModuleImport }}</code></pre>\n <br />\n </ng-container>\n\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n\n <div *ngIf=\"pageOverviewContent.length > 0\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n\n <div *ngIf=\"pageOverviewDefaultContent.length > 0\">\n <ng-content select=\"docPageOverviewDefault\"></ng-content>\n </div>\n <br />\n\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasApi\">\n <euiTabLabel> API </euiTabLabel>\n <euiTabContent>\n <ng-container *ngIf=\"apiUrlSafe\">\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\"></iframe>\n </div>\n </ng-container>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasA11y\">\n <euiTabLabel> A11Y </euiTabLabel>\n <euiTabContent>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n <ng-content select=\"docPageAccessibility\"></ng-content>\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n </ng-container>\n <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n No accessibility rules applicable\n </ng-container>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n <euiTabLabel> THEMING </euiTabLabel>\n <euiTabContent>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageTheming\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n <euiTabLabel>\n {{ pageInteractiveContent.first.title }}\n </euiTabLabel>\n <euiTabContent>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent.first.subTitle }}\n </div>\n <ng-content select=\"docPageInteractive\"></ng-content>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n <ng-content select=\"docPageSections\"></ng-content>\n </ng-container>\n\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column *ngIf=\"isNavigationVisible\" class=\"eui-u-hidden-mobile\"\n label=\"On this page\"\n size=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-body>\n\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n <li\n *ngIf=\"hasApi\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onNavClick('api', 1)\">\n <span>API</span>\n </li>\n <li\n *ngIf=\"hasA11y\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onNavClick('a11y', 2)\">\n <span>A11Y</span>\n </li>\n\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onNavClick('samples', 0)\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ng-container *ngIf=\"categories.length > 0\">\n <ng-container *ngIf=\"hasCategories; else noCategories\">\n <ng-container *ngFor=\"let category of categories\">\n <ng-container *ngIf=\"category.name === 'Base'; else notBase\">\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-container>\n <ng-template #notBase>\n <div *ngIf=\"category.name !== 'Base'\" class=\"doc-page-navigation-category\">{{category.name}}</div>\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-template #noCategories>\n <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </li>\n\n\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li\n *ngIf=\"pageThemingContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 3)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n <li\n *ngIf=\"sections.length === 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let section of sections\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n (click)=\"onNavClick(section.id, null)\">\n <span>{{ section.label }}</span>\n </li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n\n\n\n\n </eui-page-column-body>\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-info-darker);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-info-darker);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-info-darker)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-neutral-bg-light);border-left:2px solid var(--eui-c-neutral-lightest)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-info-bg);border-left:2px solid var(--eui-c-info-darker)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-2xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-info-darker);letter-spacing:-1px;font:var(--eui-f-2xl-bold)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-2xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-2xs);width:auto;display:table;color:var(--eui-c-neutral)}.eui-doc-page .doc-content h2{color:var(--eui-c-info-dark);margin-top:var(--eui-s-3xl)}.eui-doc-page .doc-content h3{color:var(--eui-c-neutral);margin-top:var(--eui-s-3xl)}.eui-doc-page .doc-content h4{margin-top:var(--eui-s-xl);text-decoration:underline;color:var(--eui-c-neutral-light)}.eui-doc-page .doc-content h5{font:var(--eui-f-bold);font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:2rem}.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:1.25rem;content:counter(item);background:var(--eui-c-info-dark);border-radius:50%;color:#fff;width:2rem;height:2rem;text-align:center;display:inline-block;font-size:1.25rem;font-weight:600}.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-info-dark);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-info-dark)}.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-neutral-light)}.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-neutral-bg-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
292
292
  }], ctorParameters: () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.EuiAppShellService }, { type: i3.DomSanitizer }, { type: i4.Location }], propDecorators: { cssClass: [{
293
293
  type: HostBinding,
294
294
  args: ['class']