@eui/showcase 22.0.0-alpha.3 → 22.0.0-alpha.30
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.
- package/fesm2022/eui-showcase.mjs +266 -57
- package/fesm2022/eui-showcase.mjs.map +1 -1
- package/package.json +4 -3
- package/types/eui-showcase.d.ts +118 -21
- package/types/eui-showcase.d.ts.map +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, Injectable, input, Component, inject, ChangeDetectorRef, afterNextRender, ViewEncapsulation,
|
|
2
|
+
import { signal, Injectable, input, Component, inject, ChangeDetectorRef, DestroyRef, ElementRef, afterNextRender, ViewEncapsulation, Renderer2, effect, Directive, booleanAttribute, model, contentChildren, forwardRef, viewChild, NgZone, Injector, ViewChild, ContentChildren, HostListener, contentChild } from '@angular/core';
|
|
3
3
|
import * as i1 from '@eui/components/eui-icon';
|
|
4
4
|
import { EUI_ICON } from '@eui/components/eui-icon';
|
|
5
5
|
import * as i2 from '@eui/components/eui-button';
|
|
@@ -9,7 +9,7 @@ import { Router, ActivatedRoute } from '@angular/router';
|
|
|
9
9
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
10
10
|
import { take, map, switchMap, catchError } from 'rxjs/operators';
|
|
11
11
|
import * as i2$1 from 'ngx-markdown';
|
|
12
|
-
import {
|
|
12
|
+
import { MarkdownModule } from 'ngx-markdown';
|
|
13
13
|
import * as i3 from '@eui/components/eui-page';
|
|
14
14
|
import { EUI_PAGE } from '@eui/components/eui-page';
|
|
15
15
|
import { NgClass, Location } from '@angular/common';
|
|
@@ -90,7 +90,6 @@ class DocPageCodeComponent {
|
|
|
90
90
|
...(ngDevMode ? [{ debugName: "showcase" }] : /* istanbul ignore next */ []));
|
|
91
91
|
}
|
|
92
92
|
onOpenCode() {
|
|
93
|
-
// eslint-disable-next-line max-len
|
|
94
93
|
const sourceRootPath = `https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-${this.showcase()}/-/blob/master/src/app/`;
|
|
95
94
|
window.open(sourceRootPath + this.codeFolder(), '_blank');
|
|
96
95
|
}
|
|
@@ -111,16 +110,40 @@ class DocPageDevGuideComponent {
|
|
|
111
110
|
...(ngDevMode ? [{ debugName: "rootDocsFolder" }] : /* istanbul ignore next */ []));
|
|
112
111
|
this.showcaseName = input('showcase-dev-guide', /* @ts-ignore */
|
|
113
112
|
...(ngDevMode ? [{ debugName: "showcaseName" }] : /* istanbul ignore next */ []));
|
|
113
|
+
/**
|
|
114
|
+
* Opt-in Mermaid rendering for ```mermaid fenced blocks. When enabled, Mermaid is lazy-loaded
|
|
115
|
+
* (and exposed on `window.mermaid`, which ngx-markdown's renderer requires) before the markdown
|
|
116
|
+
* is rendered, and the `mermaid` attribute is set on the `<markdown>` element.
|
|
117
|
+
*/
|
|
118
|
+
this.mermaid = input(false, /* @ts-ignore */
|
|
119
|
+
...(ngDevMode ? [{ debugName: "mermaid" }] : /* istanbul ignore next */ []));
|
|
120
|
+
/** True once Mermaid has been loaded (only when `mermaid` is enabled) — gates the render. */
|
|
121
|
+
this.mermaidReady = false;
|
|
114
122
|
this.headers = [];
|
|
115
|
-
this.markdownService = inject(MarkdownService);
|
|
116
123
|
this.http = inject(HttpClient);
|
|
117
124
|
this.router = inject(Router);
|
|
118
125
|
this.route = inject(ActivatedRoute);
|
|
119
126
|
this.cdRef = inject(ChangeDetectorRef);
|
|
120
|
-
this.
|
|
127
|
+
this.destroyRef = inject(DestroyRef);
|
|
128
|
+
this.elementRef = inject(ElementRef);
|
|
129
|
+
}
|
|
130
|
+
ngOnInit() {
|
|
131
|
+
// The "On this page" nav is built from the rendered DOM in `onMarkdownReady()` (bound to
|
|
132
|
+
// the `<markdown>` (ready) event), not via a marked heading-renderer hook — the host may
|
|
133
|
+
// install a global `MARKED_OPTIONS` renderer that overrides ours, so the DOM is the only
|
|
134
|
+
// reliable source of headings.
|
|
135
|
+
// Lazy-load Mermaid only when opted in — ngx-markdown's renderer reads a global `mermaid`,
|
|
136
|
+
// so expose the imported module on `window` before any markdown renders.
|
|
137
|
+
if (this.mermaid()) {
|
|
138
|
+
void this._loadMermaid();
|
|
139
|
+
}
|
|
140
|
+
// Subscribe here (not in the constructor): the `rootDocsFolder` / `showcaseName` inputs are
|
|
141
|
+
// only resolved after construction, so reading them in the constructor would always use the
|
|
142
|
+
// defaults and fetch the wrong markdown path.
|
|
143
|
+
this.route.url.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((u) => {
|
|
121
144
|
this._loadMdContent(`/${this.rootDocsFolder()}/` + u.join('/'));
|
|
122
145
|
});
|
|
123
|
-
this.route.fragment.pipe(take(1), takeUntilDestroyed()).subscribe((fragment) => {
|
|
146
|
+
this.route.fragment.pipe(take(1), takeUntilDestroyed(this.destroyRef)).subscribe((fragment) => {
|
|
124
147
|
if (fragment) {
|
|
125
148
|
this.fragmentId = fragment;
|
|
126
149
|
afterNextRender(() => {
|
|
@@ -131,27 +154,41 @@ class DocPageDevGuideComponent {
|
|
|
131
154
|
}
|
|
132
155
|
});
|
|
133
156
|
}
|
|
134
|
-
ngOnInit() {
|
|
135
|
-
/**
|
|
136
|
-
* callback for heading renderer. It will be called for each heading in the markdown.
|
|
137
|
-
*/
|
|
138
|
-
this.markdownService.renderer.heading = ({ raw, text, depth }) => {
|
|
139
|
-
if (depth === 2 || depth === 3) {
|
|
140
|
-
const newHeader = `<h${depth} id="${raw}">${text}</h${depth}>`;
|
|
141
|
-
if (text.indexOf('<a ') === -1 && text.indexOf('<em>') === -1) {
|
|
142
|
-
this.headers.push({ id: raw, label: raw, level: depth });
|
|
143
|
-
}
|
|
144
|
-
return newHeader;
|
|
145
|
-
}
|
|
146
|
-
return `<h${depth}>${text}</h${depth}>`;
|
|
147
|
-
};
|
|
148
|
-
}
|
|
149
|
-
ngAfterViewInit() {
|
|
150
|
-
// Fragment scrolling is handled in constructor via afterNextRender
|
|
151
|
-
}
|
|
152
157
|
onNavClick(fragmentId) {
|
|
153
158
|
this._scrollToFragment(fragmentId);
|
|
154
159
|
}
|
|
160
|
+
/**
|
|
161
|
+
* Build the "On this page" nav from the rendered markdown DOM. This runs on the `<markdown>`
|
|
162
|
+
* `(ready)` event rather than via a marked heading-renderer hook, because the host may install
|
|
163
|
+
* its own global marked renderer (`MARKED_OPTIONS`) that overrides ours — so the only reliable
|
|
164
|
+
* source of headings is the actual rendered output. Section headings are rendered either as
|
|
165
|
+
* `<h2>`/`<h3>` or (with the eUI renderer) as `.doc-page-section-subtitle`; handle both, and
|
|
166
|
+
* assign a stable `id` so click-to-scroll works.
|
|
167
|
+
*/
|
|
168
|
+
onMarkdownReady() {
|
|
169
|
+
const root = this.elementRef.nativeElement.querySelector('markdown');
|
|
170
|
+
if (!root) {
|
|
171
|
+
return;
|
|
172
|
+
}
|
|
173
|
+
const nodes = root.querySelectorAll('h2, h3, .doc-page-section-subtitle');
|
|
174
|
+
const headers = [];
|
|
175
|
+
nodes.forEach((node) => {
|
|
176
|
+
const label = (node.textContent ?? '').trim();
|
|
177
|
+
if (!label) {
|
|
178
|
+
return;
|
|
179
|
+
}
|
|
180
|
+
const id = label.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
|
|
181
|
+
node.id = id;
|
|
182
|
+
const level = node.tagName === 'H3' ? 3 : 2;
|
|
183
|
+
headers.push({ id, label, level });
|
|
184
|
+
});
|
|
185
|
+
this.headers = headers;
|
|
186
|
+
this.cdRef.detectChanges();
|
|
187
|
+
// If we arrived with a fragment, scroll to it now that ids exist.
|
|
188
|
+
if (this.fragmentId) {
|
|
189
|
+
document.getElementById(this.fragmentId)?.scrollIntoView();
|
|
190
|
+
}
|
|
191
|
+
}
|
|
155
192
|
_loadMdContent(url) {
|
|
156
193
|
let mdPath, contextRoot;
|
|
157
194
|
const currentUrl = window.location;
|
|
@@ -187,8 +224,28 @@ class DocPageDevGuideComponent {
|
|
|
187
224
|
});
|
|
188
225
|
}
|
|
189
226
|
}
|
|
227
|
+
/**
|
|
228
|
+
* Lazy-load Mermaid and expose it as `window.mermaid` (ngx-markdown's renderer reads that
|
|
229
|
+
* global). Runs only when the `mermaid` input is enabled. Flips `mermaidReady` so the template
|
|
230
|
+
* renders `<markdown mermaid>` once Mermaid is available.
|
|
231
|
+
*/
|
|
232
|
+
async _loadMermaid() {
|
|
233
|
+
try {
|
|
234
|
+
const win = window;
|
|
235
|
+
if (!win.mermaid) {
|
|
236
|
+
const mermaid = (await import('mermaid')).default;
|
|
237
|
+
win.mermaid = mermaid;
|
|
238
|
+
}
|
|
239
|
+
this.mermaidReady = true;
|
|
240
|
+
this.cdRef.detectChanges();
|
|
241
|
+
}
|
|
242
|
+
catch {
|
|
243
|
+
// Mermaid unavailable — fall back to rendering without diagram support.
|
|
244
|
+
this.mermaidReady = false;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
190
247
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageDevGuideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
191
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DocPageDevGuideComponent, isStandalone: true, selector: "eui-showcase-doc-page-dev-guide", inputs: { rootDocsFolder: { classPropertyName: "rootDocsFolder", publicName: "rootDocsFolder", isSignal: true, isRequired: false, transformFunction: null }, showcaseName: { classPropertyName: "showcaseName", publicName: "showcaseName", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-doc-page" }, ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <span id=\"top\"></span>\n <markdown class=\"doc-content\" [data]=\"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 euiSizeVariant=\"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 @for (header of headers; track header.id) {\n <li class=\"doc-page-navigation-item\" (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 }\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 .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i3.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isCollapsedHidden", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile", "hasSubColumns", "hasSubPanels"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i3.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i3.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "ngmodule", type: MarkdownModule }, { kind: "component", type: i2$1.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
248
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DocPageDevGuideComponent, isStandalone: true, selector: "eui-showcase-doc-page-dev-guide", inputs: { rootDocsFolder: { classPropertyName: "rootDocsFolder", publicName: "rootDocsFolder", isSignal: true, isRequired: false, transformFunction: null }, showcaseName: { classPropertyName: "showcaseName", publicName: "showcaseName", isSignal: true, isRequired: false, transformFunction: null }, mermaid: { classPropertyName: "mermaid", publicName: "mermaid", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-doc-page" }, ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <span id=\"top\"></span>\n @if (!mermaid() || mermaidReady) {\n <markdown class=\"doc-content\" [data]=\"markdown\" [mermaid]=\"mermaid()\" (ready)=\"onMarkdownReady()\" />\n }\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 euiSizeVariant=\"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 @for (header of headers; track header.id) {\n <li class=\"doc-page-navigation-item\" (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 }\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 .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-links{display:flex;flex-wrap:wrap;gap:var(--eui-s-m);margin-bottom:var(--eui-s-2xl)}.eui-doc-page .doc-page-links .doc-page-link-card{display:flex;align-items:center;gap:var(--eui-s-s);flex:0 1 220px;min-width:200px;padding:var(--eui-s-s) var(--eui-s-m);border:1px solid var(--eui-c-divider);border-radius:var(--eui-br-m);background:var(--eui-c-surface-page);text-decoration:none;color:var(--eui-c-text);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.eui-doc-page .doc-page-links .doc-page-link-card:hover,.eui-doc-page .doc-page-links .doc-page-link-card:focus-visible{border-color:var(--eui-c-primary);box-shadow:var(--eui-sh-2);transform:translateY(-1px)}.eui-doc-page .doc-page-links .doc-page-link-card:focus-visible{outline:2px solid var(--eui-c-primary);outline-offset:2px}.eui-doc-page .doc-page-links .doc-page-link-card__logo{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;border-radius:var(--eui-br-m);background:var(--eui-c-surface-container-1)}.eui-doc-page .doc-page-links .doc-page-link-card__text{display:flex;flex-direction:column;min-width:0}.eui-doc-page .doc-page-links .doc-page-link-card__title{font:var(--eui-f-m-semi-bold);color:var(--eui-c-text)}.eui-doc-page .doc-page-links .doc-page-link-card__subtitle{font:var(--eui-f-s);color:var(--eui-c-text-lighter)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled{cursor:not-allowed;pointer-events:none;border-style:dashed;border-color:var(--eui-c-divider-dark);background:var(--eui-c-surface-container-1)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__logo{filter:grayscale(1);opacity:.45}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__title{color:var(--eui-c-text-lighter)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__subtitle{color:var(--eui-c-text-lightest);font-style:italic}.eui-doc-page .doc-page-links .doc-page-link-card--disabled:hover,.eui-doc-page .doc-page-links .doc-page-link-card--disabled:focus-visible{border-color:var(--eui-c-divider-dark);box-shadow:none;transform:none}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i3.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isCollapsedHidden", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile", "hasSubColumns", "hasSubPanels"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i3.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i3.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "ngmodule", type: MarkdownModule }, { kind: "component", type: i2$1.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
192
249
|
}
|
|
193
250
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageDevGuideComponent, decorators: [{
|
|
194
251
|
type: Component,
|
|
@@ -196,8 +253,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
196
253
|
NgClass,
|
|
197
254
|
...EUI_PAGE,
|
|
198
255
|
MarkdownModule,
|
|
199
|
-
], template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <span id=\"top\"></span>\n <markdown class=\"doc-content\" [data]=\"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 euiSizeVariant=\"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 @for (header of headers; track header.id) {\n <li class=\"doc-page-navigation-item\" (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 }\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 .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
|
|
200
|
-
}],
|
|
256
|
+
], template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <span id=\"top\"></span>\n @if (!mermaid() || mermaidReady) {\n <markdown class=\"doc-content\" [data]=\"markdown\" [mermaid]=\"mermaid()\" (ready)=\"onMarkdownReady()\" />\n }\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 euiSizeVariant=\"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 @for (header of headers; track header.id) {\n <li class=\"doc-page-navigation-item\" (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 }\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 .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-links{display:flex;flex-wrap:wrap;gap:var(--eui-s-m);margin-bottom:var(--eui-s-2xl)}.eui-doc-page .doc-page-links .doc-page-link-card{display:flex;align-items:center;gap:var(--eui-s-s);flex:0 1 220px;min-width:200px;padding:var(--eui-s-s) var(--eui-s-m);border:1px solid var(--eui-c-divider);border-radius:var(--eui-br-m);background:var(--eui-c-surface-page);text-decoration:none;color:var(--eui-c-text);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.eui-doc-page .doc-page-links .doc-page-link-card:hover,.eui-doc-page .doc-page-links .doc-page-link-card:focus-visible{border-color:var(--eui-c-primary);box-shadow:var(--eui-sh-2);transform:translateY(-1px)}.eui-doc-page .doc-page-links .doc-page-link-card:focus-visible{outline:2px solid var(--eui-c-primary);outline-offset:2px}.eui-doc-page .doc-page-links .doc-page-link-card__logo{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;border-radius:var(--eui-br-m);background:var(--eui-c-surface-container-1)}.eui-doc-page .doc-page-links .doc-page-link-card__text{display:flex;flex-direction:column;min-width:0}.eui-doc-page .doc-page-links .doc-page-link-card__title{font:var(--eui-f-m-semi-bold);color:var(--eui-c-text)}.eui-doc-page .doc-page-links .doc-page-link-card__subtitle{font:var(--eui-f-s);color:var(--eui-c-text-lighter)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled{cursor:not-allowed;pointer-events:none;border-style:dashed;border-color:var(--eui-c-divider-dark);background:var(--eui-c-surface-container-1)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__logo{filter:grayscale(1);opacity:.45}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__title{color:var(--eui-c-text-lighter)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__subtitle{color:var(--eui-c-text-lightest);font-style:italic}.eui-doc-page .doc-page-links .doc-page-link-card--disabled:hover,.eui-doc-page .doc-page-links .doc-page-link-card--disabled:focus-visible{border-color:var(--eui-c-divider-dark);box-shadow:none;transform:none}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
|
|
257
|
+
}], propDecorators: { rootDocsFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootDocsFolder", required: false }] }], showcaseName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcaseName", required: false }] }], mermaid: [{ type: i0.Input, args: [{ isSignal: true, alias: "mermaid", required: false }] }] } });
|
|
201
258
|
|
|
202
259
|
const polyfillsFile = 'import \'zone.js\';';
|
|
203
260
|
const mainFile = (moduleName, componentName) => `
|
|
@@ -645,8 +702,6 @@ class StackblitzService {
|
|
|
645
702
|
const extraDependencies = {
|
|
646
703
|
'ngx-moment': '~6.0.0',
|
|
647
704
|
'ngx-mask': '^14.0.0',
|
|
648
|
-
'cleave.js': '^1.6.0',
|
|
649
|
-
'@types/cleave.js': '1.4.12',
|
|
650
705
|
moment: '^2.19.3',
|
|
651
706
|
extend: '^3.0.2',
|
|
652
707
|
'@faker-js/faker': '^9.0.0',
|
|
@@ -736,6 +791,8 @@ class DocSampleComponent {
|
|
|
736
791
|
this.renderPlayground = input(null, { ...(ngDevMode ? { debugName: "renderPlayground" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
737
792
|
this.isCodeButtonVisible = input(true, { ...(ngDevMode ? { debugName: "isCodeButtonVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
738
793
|
this.isInnerSection = input(false, { ...(ngDevMode ? { debugName: "isInnerSection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
794
|
+
/** Host element ref — used by the doc-page to tell which projected section a sample belongs to. */
|
|
795
|
+
this.elementRef = inject(ElementRef);
|
|
739
796
|
this.isCodeLoaded = false;
|
|
740
797
|
this.isCodeLoading = false;
|
|
741
798
|
this.isCodeExpanded = false;
|
|
@@ -952,6 +1009,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
952
1009
|
}, template: "<div id=\"sections\" class=\"doc-section-title\">{{label() || id()}}</div>\n\n<ng-content />\n", styles: [".eui-showcase-doc-section{display:block;margin-bottom:var(--eui-s-7xl);padding:var(--eui-s-m)}.doc-section-title{display:flex;align-items:center;width:100%;margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-xs);border-bottom:1px solid var(--eui-c-divider-light);font:var(--eui-f-xl-bold)}.doc-sample-section-title{border-bottom:1px solid var(--eui-c-divider);letter-spacing:-.25px;margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-primary-dark);font:var(--eui-f-l)}.doc-sample-section-title:first-child{margin-top:0}\n"] }]
|
|
953
1010
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }] } });
|
|
954
1011
|
|
|
1012
|
+
/**
|
|
1013
|
+
* Module-level cache of the shared EDS component manifest, shared across all doc-page instances
|
|
1014
|
+
* (fetched at most once per app session). `undefined` = not yet loaded; `null` = load failed.
|
|
1015
|
+
*/
|
|
1016
|
+
let edsManifestCache;
|
|
1017
|
+
let edsManifestLoad;
|
|
955
1018
|
class DocPageComponent {
|
|
956
1019
|
constructor() {
|
|
957
1020
|
this.id = input(undefined, /* @ts-ignore */
|
|
@@ -960,9 +1023,14 @@ class DocPageComponent {
|
|
|
960
1023
|
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
961
1024
|
this.subLabel = input(undefined, /* @ts-ignore */
|
|
962
1025
|
...(ngDevMode ? [{ debugName: "subLabel" }] : /* istanbul ignore next */ []));
|
|
963
|
-
this.
|
|
964
|
-
|
|
965
|
-
this.
|
|
1026
|
+
this.isNotReady = input(false, /* @ts-ignore */
|
|
1027
|
+
...(ngDevMode ? [{ debugName: "isNotReady" }] : /* istanbul ignore next */ []));
|
|
1028
|
+
this.isDeprecated = input(false, /* @ts-ignore */
|
|
1029
|
+
...(ngDevMode ? [{ debugName: "isDeprecated" }] : /* istanbul ignore next */ []));
|
|
1030
|
+
this.isDemoComponentOnly = input(false, /* @ts-ignore */
|
|
1031
|
+
...(ngDevMode ? [{ debugName: "isDemoComponentOnly" }] : /* istanbul ignore next */ []));
|
|
1032
|
+
this.isLegacy = input(false, /* @ts-ignore */
|
|
1033
|
+
...(ngDevMode ? [{ debugName: "isLegacy" }] : /* istanbul ignore next */ []));
|
|
966
1034
|
this.codeFolder = input(undefined, /* @ts-ignore */
|
|
967
1035
|
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
968
1036
|
this.showcase = input('ux', /* @ts-ignore */
|
|
@@ -975,13 +1043,33 @@ class DocPageComponent {
|
|
|
975
1043
|
...(ngDevMode ? [{ debugName: "hasA11y" }] : /* istanbul ignore next */ []));
|
|
976
1044
|
this.customApiUrl = input(null, /* @ts-ignore */
|
|
977
1045
|
...(ngDevMode ? [{ debugName: "customApiUrl" }] : /* istanbul ignore next */ []));
|
|
1046
|
+
/** Deployed base showcase URLs used to resolve WebComponent / React links from the page id. */
|
|
1047
|
+
this.webComponentShowcaseUrl = 'https://euidev.ecdevops.eu/eui-showcase-webcomponents-22.x/';
|
|
1048
|
+
this.reactShowcaseUrl = 'https://euidev.ecdevops.eu/eui-showcase-react-22.x/';
|
|
1049
|
+
/** Deployed base URL of the composed EDS Storybook host. */
|
|
1050
|
+
this.storybookShowcaseUrl = 'https://euidev.ecdevops.eu/eui-storybook-eds-22.x/';
|
|
1051
|
+
/** Local dev ports of the sibling showcases, used when this app is served on localhost. */
|
|
1052
|
+
this.webComponentShowcaseLocalPort = 4630;
|
|
1053
|
+
this.reactShowcaseLocalPort = 4620;
|
|
1054
|
+
/** Local dev port of the composed Storybook shell (serve-all.mjs shell port). */
|
|
1055
|
+
this.storybookShowcaseLocalPort = 6006;
|
|
1056
|
+
/**
|
|
1057
|
+
* The shared-manifest entry for this page (matched by `id`), once the manifest has loaded.
|
|
1058
|
+
* When set, it is the source of truth for the Figma / WebComponent / React links — the
|
|
1059
|
+
* hand-authored `docPageLinks` directive is only a fallback (kept for non-EDS showcases and
|
|
1060
|
+
* during migration). Signal so the links recompute when the async manifest resolves.
|
|
1061
|
+
*/
|
|
1062
|
+
this.manifestEntry = signal(null, /* @ts-ignore */
|
|
1063
|
+
...(ngDevMode ? [{ debugName: "manifestEntry" }] : /* istanbul ignore next */ []));
|
|
978
1064
|
// Writable signals for properties that are both input-driven and internally mutated
|
|
979
|
-
this.
|
|
980
|
-
...(ngDevMode ? [{ debugName: "
|
|
981
|
-
this.
|
|
982
|
-
...(ngDevMode ? [{ debugName: "
|
|
983
|
-
this.
|
|
984
|
-
...(ngDevMode ? [{ debugName: "
|
|
1065
|
+
this.isNotReadyInput = signal(false, /* @ts-ignore */
|
|
1066
|
+
...(ngDevMode ? [{ debugName: "isNotReadyInput" }] : /* istanbul ignore next */ []));
|
|
1067
|
+
this.isDeprecatedInput = signal(false, /* @ts-ignore */
|
|
1068
|
+
...(ngDevMode ? [{ debugName: "isDeprecatedInput" }] : /* istanbul ignore next */ []));
|
|
1069
|
+
this.isLegacyInput = signal(false, /* @ts-ignore */
|
|
1070
|
+
...(ngDevMode ? [{ debugName: "isLegacyInput" }] : /* istanbul ignore next */ []));
|
|
1071
|
+
this.isDemoComponentOnlyInput = signal(false, /* @ts-ignore */
|
|
1072
|
+
...(ngDevMode ? [{ debugName: "isDemoComponentOnlyInput" }] : /* istanbul ignore next */ []));
|
|
985
1073
|
this.isLoading = true;
|
|
986
1074
|
this.isNavClicked = true;
|
|
987
1075
|
this.hasCategories = false;
|
|
@@ -991,6 +1079,8 @@ class DocPageComponent {
|
|
|
991
1079
|
this.isDestroyed = false;
|
|
992
1080
|
this.samples = contentChildren(DocSampleComponent, { ...(ngDevMode ? { debugName: "samples" } : /* istanbul ignore next */ {}), descendants: true });
|
|
993
1081
|
this.sections = contentChildren(DocSectionComponent, { ...(ngDevMode ? { debugName: "sections" } : /* istanbul ignore next */ {}), descendants: true });
|
|
1082
|
+
this.pageLinksContent = contentChildren(forwardRef(() => DocPageLinksContentDirective), /* @ts-ignore */
|
|
1083
|
+
...(ngDevMode ? [{ debugName: "pageLinksContent" }] : /* istanbul ignore next */ []));
|
|
994
1084
|
this.pageOverviewContent = contentChildren(forwardRef(() => DocPageOverviewContentDirective), /* @ts-ignore */
|
|
995
1085
|
...(ngDevMode ? [{ debugName: "pageOverviewContent" }] : /* istanbul ignore next */ []));
|
|
996
1086
|
this.pageOverviewDefaultContent = contentChildren(forwardRef(() => DocPageOverviewDefaultContentDirective), /* @ts-ignore */
|
|
@@ -1023,6 +1113,7 @@ class DocPageComponent {
|
|
|
1023
1113
|
{ index: 80, id: 'Misc' },
|
|
1024
1114
|
];
|
|
1025
1115
|
this.location = inject(Location);
|
|
1116
|
+
this.httpClient = inject(HttpClient);
|
|
1026
1117
|
this.router = inject(Router);
|
|
1027
1118
|
this.route = inject(ActivatedRoute);
|
|
1028
1119
|
this.asService = inject(EuiAppShellService);
|
|
@@ -1031,14 +1122,107 @@ class DocPageComponent {
|
|
|
1031
1122
|
this.destroyRef = inject(DestroyRef);
|
|
1032
1123
|
this.injector = inject(Injector);
|
|
1033
1124
|
}
|
|
1125
|
+
/** Builds a showcase base URL, swapping to the localhost dev server when served locally. */
|
|
1126
|
+
resolveShowcaseBase(deployedBase, localPort) {
|
|
1127
|
+
const { hostname, protocol } = window.location;
|
|
1128
|
+
if (hostname === 'localhost' || hostname === '127.0.0.1') {
|
|
1129
|
+
return `${protocol}//${hostname}:${localPort}/`;
|
|
1130
|
+
}
|
|
1131
|
+
return deployedBase;
|
|
1132
|
+
}
|
|
1133
|
+
/** Whether the Links section has anything to show (a manifest entry or a docPageLinks slot). */
|
|
1134
|
+
hasLinks() {
|
|
1135
|
+
return !!this.manifestEntry() || this.pageLinksContent().length > 0;
|
|
1136
|
+
}
|
|
1137
|
+
/** Resolved WebComponent showcase link for this component (null when not enabled). */
|
|
1138
|
+
webComponentLink() {
|
|
1139
|
+
const entry = this.manifestEntry();
|
|
1140
|
+
const enabled = entry ? !!entry.availability?.webcomponents : !!this.pageLinksContent()[0]?.hasWebComponent();
|
|
1141
|
+
if (!enabled) {
|
|
1142
|
+
return null;
|
|
1143
|
+
}
|
|
1144
|
+
return this.resolveShowcaseBase(this.webComponentShowcaseUrl, this.webComponentShowcaseLocalPort) + '#/' + this.id();
|
|
1145
|
+
}
|
|
1146
|
+
/** Resolved React showcase link for this component (null when not enabled). */
|
|
1147
|
+
reactLink() {
|
|
1148
|
+
const entry = this.manifestEntry();
|
|
1149
|
+
const enabled = entry ? !!entry.availability?.react : !!this.pageLinksContent()[0]?.hasReact();
|
|
1150
|
+
if (!enabled) {
|
|
1151
|
+
return null;
|
|
1152
|
+
}
|
|
1153
|
+
return this.resolveShowcaseBase(this.reactShowcaseUrl, this.reactShowcaseLocalPort) + '#/' + this.id();
|
|
1154
|
+
}
|
|
1155
|
+
/**
|
|
1156
|
+
* Resolved Storybook link for this component (null when no stories exist).
|
|
1157
|
+
*
|
|
1158
|
+
* Deep-links into the composed EDS Storybook shell and opens this component's **Angular**
|
|
1159
|
+
* Playground story. The shell composes the Angular framework Storybook under the `angular` ref,
|
|
1160
|
+
* so the composed story id is `angular_angular-<labelSlug>--playground` (refId + the story's
|
|
1161
|
+
* `Angular/<Label>` title slug). Falls back to the id when the manifest has no label.
|
|
1162
|
+
*/
|
|
1163
|
+
storybookLink() {
|
|
1164
|
+
const entry = this.manifestEntry();
|
|
1165
|
+
const enabled = entry ? !!entry.availability?.storybook : false;
|
|
1166
|
+
if (!enabled) {
|
|
1167
|
+
return null;
|
|
1168
|
+
}
|
|
1169
|
+
// Story title is `Angular/<Label>`; Storybook slugs it to `angular-<label-slug>`.
|
|
1170
|
+
const label = entry?.label || this.id().replace(/^eds-/, '');
|
|
1171
|
+
const labelSlug = label
|
|
1172
|
+
.toLowerCase()
|
|
1173
|
+
.replace(/[^a-z0-9]+/g, '-')
|
|
1174
|
+
.replace(/^-+|-+$/g, '');
|
|
1175
|
+
const storyId = `angular_angular-${labelSlug}--playground`;
|
|
1176
|
+
const base = this.resolveShowcaseBase(this.storybookShowcaseUrl, this.storybookShowcaseLocalPort);
|
|
1177
|
+
return `${base}?path=/story/${storyId}`;
|
|
1178
|
+
}
|
|
1179
|
+
/** Figma link — from the manifest entry when present, else the docPageLinks directive. */
|
|
1180
|
+
figmaLink() {
|
|
1181
|
+
const entry = this.manifestEntry();
|
|
1182
|
+
if (entry) {
|
|
1183
|
+
return entry.figmaLink || null;
|
|
1184
|
+
}
|
|
1185
|
+
return this.pageLinksContent()[0]?.figmaLink() ?? null;
|
|
1186
|
+
}
|
|
1187
|
+
/** Fetch (and cache) the shared EDS manifest, then resolve this page's entry by id. */
|
|
1188
|
+
loadManifestEntry() {
|
|
1189
|
+
const id = this.id();
|
|
1190
|
+
if (!id) {
|
|
1191
|
+
return;
|
|
1192
|
+
}
|
|
1193
|
+
const apply = (byId) => {
|
|
1194
|
+
if (byId && !this.isDestroyed) {
|
|
1195
|
+
this.manifestEntry.set(byId.get(id) ?? null);
|
|
1196
|
+
}
|
|
1197
|
+
};
|
|
1198
|
+
if (edsManifestCache !== undefined) {
|
|
1199
|
+
apply(edsManifestCache);
|
|
1200
|
+
return;
|
|
1201
|
+
}
|
|
1202
|
+
if (!edsManifestLoad) {
|
|
1203
|
+
edsManifestLoad = new Promise((resolve) => {
|
|
1204
|
+
this.httpClient.get('assets/eds/eds-components.json').subscribe({
|
|
1205
|
+
next: (manifest) => {
|
|
1206
|
+
edsManifestCache = new Map((manifest?.components ?? []).map((c) => [c.id, c]));
|
|
1207
|
+
resolve(edsManifestCache);
|
|
1208
|
+
},
|
|
1209
|
+
error: () => {
|
|
1210
|
+
edsManifestCache = null;
|
|
1211
|
+
resolve(null);
|
|
1212
|
+
},
|
|
1213
|
+
});
|
|
1214
|
+
});
|
|
1215
|
+
}
|
|
1216
|
+
edsManifestLoad.then(apply);
|
|
1217
|
+
}
|
|
1034
1218
|
ngOnInit() {
|
|
1035
1219
|
// Sync input signals to writable signals
|
|
1036
|
-
if (this.
|
|
1037
|
-
this.
|
|
1038
|
-
if (this.
|
|
1039
|
-
this.
|
|
1040
|
-
if (this.
|
|
1041
|
-
this.
|
|
1220
|
+
if (this.isNotReady())
|
|
1221
|
+
this.isNotReadyInput.set(true);
|
|
1222
|
+
if (this.isDeprecated())
|
|
1223
|
+
this.isDeprecatedInput.set(true);
|
|
1224
|
+
if (this.isLegacy())
|
|
1225
|
+
this.isLegacyInput.set(true);
|
|
1042
1226
|
this.destroyRef.onDestroy(() => this.isDestroyed = true);
|
|
1043
1227
|
afterNextRender(() => {
|
|
1044
1228
|
this.asService.isBlockDocumentActive = true;
|
|
@@ -1050,6 +1234,12 @@ class DocPageComponent {
|
|
|
1050
1234
|
// The template already handles id() as fallback via label() || id()
|
|
1051
1235
|
}
|
|
1052
1236
|
this.fragmentId = this.route.snapshot.fragment;
|
|
1237
|
+
// EDS doc pages derive their Figma / WebComponent / React links from the shared
|
|
1238
|
+
// @eui/eds-styles manifest (keyed by page id) instead of a hand-authored docPageLinks.
|
|
1239
|
+
// EDS pages are identified by their `eds-*` id (they don't set showcase="eds").
|
|
1240
|
+
if (this.showcase() === 'eds' || String(this.id() ?? '').startsWith('eds-')) {
|
|
1241
|
+
this.loadManifestEntry();
|
|
1242
|
+
}
|
|
1053
1243
|
}
|
|
1054
1244
|
ngAfterViewInit() {
|
|
1055
1245
|
// Getting API url
|
|
@@ -1079,7 +1269,7 @@ class DocPageComponent {
|
|
|
1079
1269
|
}
|
|
1080
1270
|
// constructing categories, if at least one set, if not backward compat with old display
|
|
1081
1271
|
const categoriesJson = {};
|
|
1082
|
-
this.
|
|
1272
|
+
this.mainSamples().forEach((s) => {
|
|
1083
1273
|
// "Default" or "_default" sample are always put first in the nav list
|
|
1084
1274
|
const id = s.id();
|
|
1085
1275
|
const category = s.category();
|
|
@@ -1151,6 +1341,10 @@ class DocPageComponent {
|
|
|
1151
1341
|
const category = this.CATEGORIES_DEF.find(cat => cat.id.toLowerCase() === name.toLowerCase());
|
|
1152
1342
|
return category ? category.index : this.CATEGORIES_DEF.find(cat => cat.id === 'free-category').index;
|
|
1153
1343
|
}
|
|
1344
|
+
/** Samples that belong to the main "Options & samples" tab. */
|
|
1345
|
+
mainSamples() {
|
|
1346
|
+
return [...this.samples()];
|
|
1347
|
+
}
|
|
1154
1348
|
ngOnDestroy() {
|
|
1155
1349
|
if (this.scrollObserver) {
|
|
1156
1350
|
this.scrollObserver.disconnect();
|
|
@@ -1186,7 +1380,7 @@ class DocPageComponent {
|
|
|
1186
1380
|
}
|
|
1187
1381
|
_buildCategories() {
|
|
1188
1382
|
const categoriesJson = {};
|
|
1189
|
-
this.
|
|
1383
|
+
this.mainSamples().forEach((s) => {
|
|
1190
1384
|
const id = s.id();
|
|
1191
1385
|
const category = s.category();
|
|
1192
1386
|
const isDefault = id === '_default' || id === 'Default' || id === 'default';
|
|
@@ -1296,7 +1490,7 @@ class DocPageComponent {
|
|
|
1296
1490
|
{
|
|
1297
1491
|
id: item.label,
|
|
1298
1492
|
alternateId: item.name,
|
|
1299
|
-
status: item.markerTypeClass,
|
|
1493
|
+
status: item.markerTypeClass ?? item.statusMetadata?.colorVariant,
|
|
1300
1494
|
cmpReplacement: item.cmpReplacement,
|
|
1301
1495
|
cmpReplacementUrl: item.cmpReplacementUrl,
|
|
1302
1496
|
cmpReplacementNote: item.cmpReplacementNote,
|
|
@@ -1353,17 +1547,18 @@ class DocPageComponent {
|
|
|
1353
1547
|
case 'warning':
|
|
1354
1548
|
this.stateLabel = 'will be removed in eUI 21';
|
|
1355
1549
|
this.stateTypeClass = 'warning';
|
|
1356
|
-
this.
|
|
1550
|
+
this.isDeprecatedInput.set(true);
|
|
1357
1551
|
break;
|
|
1358
1552
|
case 'danger':
|
|
1359
|
-
this.stateLabel = '
|
|
1553
|
+
this.stateLabel = 'DEMO ONLY';
|
|
1360
1554
|
this.stateTypeClass = 'danger';
|
|
1361
|
-
this.
|
|
1555
|
+
this.isLegacyInput.set(true);
|
|
1556
|
+
this.isDemoComponentOnlyInput.set(true);
|
|
1362
1557
|
break;
|
|
1363
1558
|
case 'info':
|
|
1364
1559
|
this.stateLabel = 'NOT READY';
|
|
1365
1560
|
this.stateTypeClass = 'accent';
|
|
1366
|
-
this.
|
|
1561
|
+
this.isNotReadyInput.set(true);
|
|
1367
1562
|
break;
|
|
1368
1563
|
}
|
|
1369
1564
|
if (this.cmp.metadata?.moduleName) {
|
|
@@ -1398,7 +1593,7 @@ class DocPageComponent {
|
|
|
1398
1593
|
return result;
|
|
1399
1594
|
}
|
|
1400
1595
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1401
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DocPageComponent, isStandalone: true, selector: "eui-showcase-doc-page", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, isNotReadyInput: { classPropertyName: "isNotReadyInput", publicName: "isNotReady", isSignal: true, isRequired: false, transformFunction: null }, isDeprecatedInput: { classPropertyName: "isDeprecatedInput", publicName: "isDeprecated", isSignal: true, isRequired: false, transformFunction: null }, isLegacyInput: { classPropertyName: "isLegacyInput", publicName: "isLegacy", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, showcase: { classPropertyName: "showcase", publicName: "showcase", isSignal: true, isRequired: false, transformFunction: null }, isNavigationVisible: { classPropertyName: "isNavigationVisible", publicName: "isNavigationVisible", isSignal: true, isRequired: false, transformFunction: null }, hasApi: { classPropertyName: "hasApi", publicName: "hasApi", isSignal: true, isRequired: false, transformFunction: null }, hasA11y: { classPropertyName: "hasA11y", publicName: "hasA11y", isSignal: true, isRequired: false, transformFunction: null }, customApiUrl: { classPropertyName: "customApiUrl", publicName: "customApiUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isNavigationVisible: "isNavigationVisibleChange" }, host: { classAttribute: "eui-doc-page" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true, isSignal: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true, isSignal: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirective), isSignal: true }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirective), isSignal: true }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirective), isSignal: true }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirective), isSignal: true }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirective), isSignal: true }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirective), isSignal: true }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirective), isSignal: true }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirective), isSignal: true }, { propertyName: "pageVisualSpecsContent", predicate: i0.forwardRef(() => DocPageVisualSpecsContentDirective) }, { propertyName: "pagePlaygroundContent", predicate: i0.forwardRef(() => DocPagePlaygroundContentDirective) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true, isSignal: true }, { propertyName: "navContent", first: true, predicate: ["navContent"], descendants: true }], ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label() || id() }}\" subLabel=\"{{ subLabel() }}\" class=\"eui-doc-page-title\">\n <eui-page-header-action-items>\n @if (codeFolder()) {\n <eui-showcase-doc-page-code\n codeFolder=\"{{ codeFolder() }}\"\n showcase=\"{{ showcase() }}\" />\n }\n @if (stateLabel) {\n <eui-chip euiSizeS isFilled\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady()\"\n [euiWarning]=\"isDeprecated()\"\n [euiDanger]=\"isLegacy()\">\n {{ stateLabel }}\n </eui-chip>\n }\n </eui-page-header-action-items>\n </eui-page-header>\n\n @if (stateLabel === 'LEGACY' || isLegacy()) {\n <eui-alert euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n @if (cmp) {\n <div>\n @if (cmp.cmpReplacement !== 'NONE') {\n <div>\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n }\n @if (cmp.cmpReplacement === 'NONE') {\n <div>\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n }\n @if (cmp.cmpReplacementNote) {\n <div>\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n }\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'DEPRECATED' || isDeprecated()) {\n <eui-alert euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n @if (cmp) {\n <div>\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'NOT_READY' || isNotReady()) {\n <eui-alert euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n @if (cmp) {\n <div>\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n }\n </eui-alert>\n }\n\n @if ((stateLabel || isNotReady() || isDeprecated()) && stateLabel !== 'ACTIVE') {\n <div class=\"mb-5\"></div>\n }\n\n @if (pageSectionsContent().length === 0) {\n <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n <eui-tab id=\"samples\">\n <eui-tab-header>\n <eui-tab-header-label>OPTIONS & SAMPLES</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (cmp && cmp.metadata) {\n @if (cmpImportModule) {\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n }\n @if (cmpImportStandalone) {\n <div class=\"doc-page-section-title\">Component import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n }\n <br />\n }\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n @if (pageOverviewContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverview\" />\n </div>\n }\n @if (pageOverviewDefaultContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverviewDefault\" />\n </div>\n }\n <br />\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\" />\n </eui-tab-body>\n </eui-tab>\n @if (hasApi()) {\n <eui-tab id=\"api\">\n <eui-tab-header>\n <eui-tab-header-label>API</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (apiUrlSafe) {\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if (hasA11y()) {\n <eui-tab id=\"a11y\">\n <eui-tab-header>\n <eui-tab-header-label>A11Y</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n @if (pageAccessibilityContent().length !== 0) {\n <ng-content select=\"docPageAccessibility\" />\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n }\n @if (pageAccessibilityContent().length === 0) {\n No accessibility rules applicable\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if(pageVisualSpecsContent.length > 0) {\n <eui-tab id=\"visual-specs\">\n <eui-tab-header>\n <eui-tab-header-label>VISUAL SPECS</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Visual specifications</div>\n <ng-content select=\"docPageVisualSpecs\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n }\n @if(pagePlaygroundContent.length > 0) {\n <eui-tab id=\"playground\">\n <eui-tab-header>\n <eui-tab-header-label>PLAYGROUND</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Playground</div>\n <ng-content select=\"docPagePlayground\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageThemingContent().length > 0) {\n <eui-tab id=\"theming\">\n <eui-tab-header>\n <eui-tab-header-label>THEMING</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageTheming\" />\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageInteractiveContent().length > 0) {\n <eui-tab id=\"advanced\">\n <eui-tab-header>\n <eui-tab-header-label>\n {{ pageInteractiveContent()[0].title() }}\n </eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent()[0].subTitle() }}\n </div>\n <ng-content select=\"docPageInteractive\" />\n </eui-tab-body>\n </eui-tab>\n }\n </eui-tabs>\n }\n\n @if (pageSectionsContent().length > 0) {\n @if (sections().length === 0) {\n <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n }\n <ng-content select=\"docPageSections\" />\n }\n\n </eui-page-column-body>\n </eui-page-column>\n\n @if (isNavigationVisible()) {\n <eui-page-column\n class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" #navContent tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @if (pageSectionsContent().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onTabNavClick('samples')\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n @if (hasApi()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onTabNavClick('api')\">\n <span>API</span>\n </li>\n }\n @if (hasA11y()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onTabNavClick('a11y')\">\n <span>A11Y</span>\n </li>\n }\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @if (categories.length > 0) {\n @if (hasCategories) {\n @for (category of categories; track category) {\n @if (category.name === 'Base') {\n @for (sample of category.samples; track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n } @else {\n @if (category.name !== 'Base') {\n <div class=\"doc-page-navigation-category\">{{category.name}}</div>\n }\n @for (sample of category.samples; track sample) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id()\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n }\n }\n } @else {\n @for (sample of samples(); track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n }\n }\n </li>\n <!-- OPTIONAL TABS-->\n @if (pageThemingContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n @if (pageInteractiveContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent()[0].title() }}</span>\n </li>\n }\n @if(pageVisualSpecsContent.length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'visual-specs'\"\n (click)=\"onTabNavClick('visual-specs')\">\n <span>VISUAL SPECS</span>\n </li>\n }\n @if (pagePlaygroundContent.length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'playground'\"\n (click)=\"onTabNavClick('playground')\">\n <span>PLAYGROUND</span>\n </li>\n }\n }\n }\n @if (pageSectionsContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n @if (sections().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n }\n @if (sections().length > 0) {\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @for (section of sections(); track section; let i = $index) {\n <ul>\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(section.id(), null)\">\n <span>{{ section.label() || section.id() }}</span>\n </li>\n </ul>\n }\n </li>\n }\n }\n </ul>\n </div>\n </eui-page-column-body>\n </eui-page-column>\n }\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }, { kind: "component", type: i1$1.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i1$1.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i2$2.EuiTabHeaderLabelComponent, selector: "eui-tab-header-label" }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i3.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i3.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isCollapsedHidden", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile", "hasSubColumns", "hasSubPanels"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i3.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i3.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i3.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i3.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1596
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DocPageComponent, isStandalone: true, selector: "eui-showcase-doc-page", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, isNotReady: { classPropertyName: "isNotReady", publicName: "isNotReady", isSignal: true, isRequired: false, transformFunction: null }, isDeprecated: { classPropertyName: "isDeprecated", publicName: "isDeprecated", isSignal: true, isRequired: false, transformFunction: null }, isDemoComponentOnly: { classPropertyName: "isDemoComponentOnly", publicName: "isDemoComponentOnly", isSignal: true, isRequired: false, transformFunction: null }, isLegacy: { classPropertyName: "isLegacy", publicName: "isLegacy", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, showcase: { classPropertyName: "showcase", publicName: "showcase", isSignal: true, isRequired: false, transformFunction: null }, isNavigationVisible: { classPropertyName: "isNavigationVisible", publicName: "isNavigationVisible", isSignal: true, isRequired: false, transformFunction: null }, hasApi: { classPropertyName: "hasApi", publicName: "hasApi", isSignal: true, isRequired: false, transformFunction: null }, hasA11y: { classPropertyName: "hasA11y", publicName: "hasA11y", isSignal: true, isRequired: false, transformFunction: null }, customApiUrl: { classPropertyName: "customApiUrl", publicName: "customApiUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isNavigationVisible: "isNavigationVisibleChange" }, host: { classAttribute: "eui-doc-page" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true, isSignal: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true, isSignal: true }, { propertyName: "pageLinksContent", predicate: i0.forwardRef(() => DocPageLinksContentDirective), isSignal: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirective), isSignal: true }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirective), isSignal: true }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirective), isSignal: true }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirective), isSignal: true }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirective), isSignal: true }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirective), isSignal: true }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirective), isSignal: true }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirective), isSignal: true }, { propertyName: "pageVisualSpecsContent", predicate: i0.forwardRef(() => DocPageVisualSpecsContentDirective) }, { propertyName: "pagePlaygroundContent", predicate: i0.forwardRef(() => DocPagePlaygroundContentDirective) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true, isSignal: true }, { propertyName: "navContent", first: true, predicate: ["navContent"], descendants: true }], ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label() || id() }}\" subLabel=\"{{ subLabel() }}\" class=\"eui-doc-page-title\">\n <eui-page-header-action-items>\n @if (codeFolder()) {\n <eui-showcase-doc-page-code\n codeFolder=\"{{ codeFolder() }}\"\n showcase=\"{{ showcase() }}\" />\n }\n @if (stateLabel) {\n <eui-chip euiSizeS isFilled\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReadyInput()\"\n [euiWarning]=\"isDeprecatedInput()\"\n [euiDanger]=\"isDemoComponentOnly()\">\n {{ stateLabel }}\n </eui-chip>\n }\n </eui-page-header-action-items>\n </eui-page-header>\n\n @if ((stateLabel === 'LEGACY' || isLegacyInput()) && !isDemoComponentOnlyInput()) {\n <eui-alert euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n @if (cmp) {\n <div>\n @if (cmp.cmpReplacement !== 'NONE') {\n <div>\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n }\n @if (cmp.cmpReplacement === 'NONE') {\n <div>\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n }\n @if (cmp.cmpReplacementNote) {\n <div>\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n }\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'DEPRECATED' || isDeprecatedInput()) {\n <eui-alert euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n @if (cmp) {\n <div>\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'NOT_READY' || isNotReadyInput()) {\n <eui-alert euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n @if (cmp) {\n <div>\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'NOT_READY' || isDemoComponentOnlyInput()) {\n <eui-alert euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>DEMO ONLY - NOT READY for production usage</eui-alert-title>\n @if (cmp) {\n <div>\n This component is under development - it's used for testing and demo purposes only, it shouldn't be used yet. It'll be available as draft in a future release once\n validated.\n </div>\n }\n </eui-alert>\n }\n\n @if ((stateLabel || isNotReadyInput() || isDeprecatedInput()) && stateLabel !== 'ACTIVE') {\n <div class=\"mb-5\"></div>\n }\n\n @if (pageSectionsContent().length === 0) {\n <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n <eui-tab id=\"samples\">\n <eui-tab-header>\n <eui-tab-header-label>OPTIONS & SAMPLES</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (hasLinks()) {\n <div id=\"links\" class=\"doc-page-section-title\">Links</div>\n <div class=\"doc-page-links\">\n <!-- Figma -->\n @let figma = figmaLink();\n <a\n class=\"doc-page-link-card\"\n [class.doc-page-link-card--disabled]=\"!figma\"\n [attr.href]=\"figma || null\"\n [attr.target]=\"figma ? '_blank' : null\"\n [attr.rel]=\"figma ? 'noopener noreferrer' : null\"\n [attr.aria-disabled]=\"!figma\"\n [attr.tabindex]=\"figma ? 0 : -1\">\n <span class=\"doc-page-link-card__logo\">\n <svg viewBox=\"0 0 38 57\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"#1abcfe\" d=\"M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z\"/>\n <path fill=\"#0acf83\" d=\"M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z\"/>\n <path fill=\"#ff7262\" d=\"M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z\"/>\n <path fill=\"#f24e1e\" d=\"M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z\"/>\n <path fill=\"#a259ff\" d=\"M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z\"/>\n </svg>\n </span>\n <span class=\"doc-page-link-card__text\">\n <span class=\"doc-page-link-card__title\">Figma</span>\n <span class=\"doc-page-link-card__subtitle\">{{ figma ? 'Open design file' : 'Not available' }}</span>\n </span>\n </a>\n\n <!-- Web component -->\n @let wc = webComponentLink();\n <a\n class=\"doc-page-link-card\"\n [class.doc-page-link-card--disabled]=\"!wc\"\n [attr.href]=\"wc || null\"\n [attr.target]=\"wc ? '_blank' : null\"\n [attr.rel]=\"wc ? 'noopener noreferrer' : null\"\n [attr.aria-disabled]=\"!wc\"\n [attr.tabindex]=\"wc ? 0 : -1\">\n <span class=\"doc-page-link-card__logo\">\n <svg viewBox=\"0 0 30 30\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"#29abe2\" d=\"M15 1.5 27.5 8v14L15 28.5 2.5 22V8L15 1.5z\" opacity=\".15\"/>\n <path fill=\"none\" stroke=\"#29abe2\" stroke-width=\"2\" d=\"M15 2.5 26.5 9v12L15 27.5 3.5 21V9L15 2.5z\"/>\n <path fill=\"#29abe2\" d=\"m11 11-4 4 4 4 1.4-1.4L9.8 15l2.6-2.6zm8 0-1.4 1.4 2.6 2.6-2.6 2.6L19 19l4-4z\"/>\n </svg>\n </span>\n <span class=\"doc-page-link-card__text\">\n <span class=\"doc-page-link-card__title\">WebComponent</span>\n <span class=\"doc-page-link-card__subtitle\">{{ wc ? 'View component' : 'Not available' }}</span>\n </span>\n </a>\n\n <!-- React -->\n @let react = reactLink();\n <a\n class=\"doc-page-link-card\"\n [class.doc-page-link-card--disabled]=\"!react\"\n [attr.href]=\"react || null\"\n [attr.target]=\"react ? '_blank' : null\"\n [attr.rel]=\"react ? 'noopener noreferrer' : null\"\n [attr.aria-disabled]=\"!react\"\n [attr.tabindex]=\"react ? 0 : -1\">\n <span class=\"doc-page-link-card__logo\">\n <svg viewBox=\"-11.5 -10.23 23 20.46\" width=\"26\" height=\"26\" aria-hidden=\"true\" focusable=\"false\">\n <circle r=\"2.05\" fill=\"#61dafb\"/>\n <g fill=\"none\" stroke=\"#61dafb\" stroke-width=\"1\">\n <ellipse rx=\"11\" ry=\"4.2\"/>\n <ellipse rx=\"11\" ry=\"4.2\" transform=\"rotate(60)\"/>\n <ellipse rx=\"11\" ry=\"4.2\" transform=\"rotate(120)\"/>\n </g>\n </svg>\n </span>\n <span class=\"doc-page-link-card__text\">\n <span class=\"doc-page-link-card__title\">React</span>\n <span class=\"doc-page-link-card__subtitle\">{{ react ? 'View component' : 'Not available' }}</span>\n </span>\n </a>\n\n <!-- Storybook -->\n <!-- @let storybook = storybookLink();\n <a\n class=\"doc-page-link-card\"\n [class.doc-page-link-card--disabled]=\"!storybook\"\n [attr.href]=\"storybook || null\"\n [attr.target]=\"storybook ? '_blank' : null\"\n [attr.rel]=\"storybook ? 'noopener noreferrer' : null\"\n [attr.aria-disabled]=\"!storybook\"\n [attr.tabindex]=\"storybook ? 0 : -1\">\n <span class=\"doc-page-link-card__logo\">\n <svg viewBox=\"0 0 32 32\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"#ff4785\" d=\"M4.7 2.4 4 24.8a1.3 1.3 0 0 0 1.2 1.4l21.2 1.5a1.3 1.3 0 0 0 1.4-1.3V1.6A1.3 1.3 0 0 0 26.4.3L6 .1A1.3 1.3 0 0 0 4.7 1.4z\" transform=\"translate(1.7 2.3)\"/>\n <path fill=\"#fff\" d=\"M21.4 6.6l.2-3.8 1.6-.1.1 4a.3.3 0 0 1-.5.2l-1.2-.9-1.4 1.1a.3.3 0 0 1-.5-.3zM18.2 13c0 1 6.9.5 7.8-.2 0-5.6-3-8.6-8.5-8.6S9 7.3 9 11.7c0 7.7 10.3 7.8 10.3 12 0 1.2-.6 1.9-1.8 1.9-1.7 0-2.4-.9-2.3-3.8 0-.6-6.4-.8-6.6 0-.5 6.7 3.7 8.6 9 8.6 5 0 9-2.7 9-7.5 0-8.2-10.5-8-10.5-12.1 0-1.6 1.2-1.9 1.9-1.9.8 0 2.1.1 2 2.1z\"/>\n </svg>\n </span>\n <span class=\"doc-page-link-card__text\">\n <span class=\"doc-page-link-card__title\">Storybook</span>\n <span class=\"doc-page-link-card__subtitle\">{{ storybook ? 'Open playground' : 'Not available' }}</span>\n </span>\n </a> -->\n </div>\n }\n @if (cmp && cmp.metadata) {\n @if (cmpImportModule) {\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n }\n @if (cmpImportStandalone) {\n <div class=\"doc-page-section-title\">Component import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n }\n <br />\n }\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n @if (pageOverviewContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverview\" />\n </div>\n }\n @if (pageOverviewDefaultContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverviewDefault\" />\n </div>\n }\n <br />\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\" />\n </eui-tab-body>\n </eui-tab>\n @if (hasApi()) {\n <eui-tab id=\"api\">\n <eui-tab-header>\n <eui-tab-header-label>API</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (apiUrlSafe) {\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if (hasA11y()) {\n <eui-tab id=\"a11y\">\n <eui-tab-header>\n <eui-tab-header-label>A11Y</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n @if (pageAccessibilityContent().length !== 0) {\n <ng-content select=\"docPageAccessibility\" />\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n }\n @if (pageAccessibilityContent().length === 0) {\n No accessibility rules applicable\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if(pageVisualSpecsContent.length > 0) {\n <eui-tab id=\"visual-specs\">\n <eui-tab-header>\n <eui-tab-header-label>VISUAL SPECS</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Visual specifications</div>\n <ng-content select=\"docPageVisualSpecs\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n }\n @if(pagePlaygroundContent.length > 0) {\n <eui-tab id=\"playground\">\n <eui-tab-header>\n <eui-tab-header-label>PLAYGROUND</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Playground</div>\n <ng-content select=\"docPagePlayground\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageThemingContent().length > 0) {\n <eui-tab id=\"theming\">\n <eui-tab-header>\n <eui-tab-header-label>THEMING</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageTheming\" />\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageInteractiveContent().length > 0) {\n <eui-tab id=\"advanced\">\n <eui-tab-header>\n <eui-tab-header-label>\n {{ pageInteractiveContent()[0].title() }}\n </eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent()[0].subTitle() }}\n </div>\n <ng-content select=\"docPageInteractive\" />\n </eui-tab-body>\n </eui-tab>\n }\n </eui-tabs>\n }\n\n @if (pageSectionsContent().length > 0) {\n @if (sections().length === 0) {\n <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n }\n <ng-content select=\"docPageSections\" />\n }\n\n </eui-page-column-body>\n </eui-page-column>\n\n @if (isNavigationVisible()) {\n <eui-page-column\n class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" #navContent tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @if (pageSectionsContent().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onTabNavClick('samples')\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @if (categories.length > 0) {\n @if (hasCategories) {\n @for (category of categories; track category) {\n @if (category.name === 'Base') {\n @for (sample of category.samples; track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n } @else {\n @if (category.name !== 'Base') {\n <div class=\"doc-page-navigation-category\">{{category.name}}</div>\n }\n @for (sample of category.samples; track sample) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id()\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n }\n }\n } @else {\n @for (sample of mainSamples(); track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n }\n }\n </li>\n @if (hasApi()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onTabNavClick('api')\">\n <span>API</span>\n </li>\n }\n @if (hasA11y()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onTabNavClick('a11y')\">\n <span>A11Y</span>\n </li>\n }\n <!-- OPTIONAL TABS-->\n @if (pageThemingContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n @if (pageInteractiveContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent()[0].title() }}</span>\n </li>\n }\n @if(pageVisualSpecsContent.length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'visual-specs'\"\n (click)=\"onTabNavClick('visual-specs')\">\n <span>VISUAL SPECS</span>\n </li>\n }\n @if (pagePlaygroundContent.length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'playground'\"\n (click)=\"onTabNavClick('playground')\">\n <span>PLAYGROUND</span>\n </li>\n }\n }\n }\n @if (pageSectionsContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n @if (sections().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n }\n @if (sections().length > 0) {\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @for (section of sections(); track section; let i = $index) {\n <ul>\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(section.id(), null)\">\n <span>{{ section.label() || section.id() }}</span>\n </li>\n </ul>\n }\n </li>\n }\n }\n </ul>\n </div>\n </eui-page-column-body>\n </eui-page-column>\n }\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-links{display:flex;flex-wrap:wrap;gap:var(--eui-s-m);margin-bottom:var(--eui-s-2xl)}.eui-doc-page .doc-page-links .doc-page-link-card{display:flex;align-items:center;gap:var(--eui-s-s);flex:0 1 220px;min-width:200px;padding:var(--eui-s-s) var(--eui-s-m);border:1px solid var(--eui-c-divider);border-radius:var(--eui-br-m);background:var(--eui-c-surface-page);text-decoration:none;color:var(--eui-c-text);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.eui-doc-page .doc-page-links .doc-page-link-card:hover,.eui-doc-page .doc-page-links .doc-page-link-card:focus-visible{border-color:var(--eui-c-primary);box-shadow:var(--eui-sh-2);transform:translateY(-1px)}.eui-doc-page .doc-page-links .doc-page-link-card:focus-visible{outline:2px solid var(--eui-c-primary);outline-offset:2px}.eui-doc-page .doc-page-links .doc-page-link-card__logo{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;border-radius:var(--eui-br-m);background:var(--eui-c-surface-container-1)}.eui-doc-page .doc-page-links .doc-page-link-card__text{display:flex;flex-direction:column;min-width:0}.eui-doc-page .doc-page-links .doc-page-link-card__title{font:var(--eui-f-m-semi-bold);color:var(--eui-c-text)}.eui-doc-page .doc-page-links .doc-page-link-card__subtitle{font:var(--eui-f-s);color:var(--eui-c-text-lighter)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled{cursor:not-allowed;pointer-events:none;border-style:dashed;border-color:var(--eui-c-divider-dark);background:var(--eui-c-surface-container-1)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__logo{filter:grayscale(1);opacity:.45}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__title{color:var(--eui-c-text-lighter)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__subtitle{color:var(--eui-c-text-lightest);font-style:italic}.eui-doc-page .doc-page-links .doc-page-link-card--disabled:hover,.eui-doc-page .doc-page-links .doc-page-link-card--disabled:focus-visible{border-color:var(--eui-c-divider-dark);box-shadow:none;transform:none}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }, { kind: "component", type: i1$1.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i1$1.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i2$2.EuiTabHeaderLabelComponent, selector: "eui-tab-header-label" }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i3.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i3.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isCollapsedHidden", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile", "hasSubColumns", "hasSubPanels"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i3.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i3.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i3.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i3.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1402
1597
|
}
|
|
1403
1598
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageComponent, decorators: [{
|
|
1404
1599
|
type: Component,
|
|
@@ -1408,10 +1603,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
1408
1603
|
...EUI_ALERT,
|
|
1409
1604
|
...EUI_TABS,
|
|
1410
1605
|
...EUI_PAGE,
|
|
1411
|
-
...EUI_LABEL,
|
|
1412
1606
|
...EUI_CHIP,
|
|
1413
|
-
], template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label() || id() }}\" subLabel=\"{{ subLabel() }}\" class=\"eui-doc-page-title\">\n <eui-page-header-action-items>\n @if (codeFolder()) {\n <eui-showcase-doc-page-code\n codeFolder=\"{{ codeFolder() }}\"\n showcase=\"{{ showcase() }}\" />\n }\n @if (stateLabel) {\n <eui-chip euiSizeS isFilled\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady()\"\n [euiWarning]=\"isDeprecated()\"\n [euiDanger]=\"isLegacy()\">\n {{ stateLabel }}\n </eui-chip>\n }\n </eui-page-header-action-items>\n </eui-page-header>\n\n @if (stateLabel === 'LEGACY' || isLegacy()) {\n <eui-alert euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n @if (cmp) {\n <div>\n @if (cmp.cmpReplacement !== 'NONE') {\n <div>\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n }\n @if (cmp.cmpReplacement === 'NONE') {\n <div>\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n }\n @if (cmp.cmpReplacementNote) {\n <div>\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n }\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'DEPRECATED' || isDeprecated()) {\n <eui-alert euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n @if (cmp) {\n <div>\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'NOT_READY' || isNotReady()) {\n <eui-alert euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n @if (cmp) {\n <div>\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n }\n </eui-alert>\n }\n\n @if ((stateLabel || isNotReady() || isDeprecated()) && stateLabel !== 'ACTIVE') {\n <div class=\"mb-5\"></div>\n }\n\n @if (pageSectionsContent().length === 0) {\n <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n <eui-tab id=\"samples\">\n <eui-tab-header>\n <eui-tab-header-label>OPTIONS & SAMPLES</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (cmp && cmp.metadata) {\n @if (cmpImportModule) {\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n }\n @if (cmpImportStandalone) {\n <div class=\"doc-page-section-title\">Component import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n }\n <br />\n }\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n @if (pageOverviewContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverview\" />\n </div>\n }\n @if (pageOverviewDefaultContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverviewDefault\" />\n </div>\n }\n <br />\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\" />\n </eui-tab-body>\n </eui-tab>\n @if (hasApi()) {\n <eui-tab id=\"api\">\n <eui-tab-header>\n <eui-tab-header-label>API</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (apiUrlSafe) {\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if (hasA11y()) {\n <eui-tab id=\"a11y\">\n <eui-tab-header>\n <eui-tab-header-label>A11Y</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n @if (pageAccessibilityContent().length !== 0) {\n <ng-content select=\"docPageAccessibility\" />\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n }\n @if (pageAccessibilityContent().length === 0) {\n No accessibility rules applicable\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if(pageVisualSpecsContent.length > 0) {\n <eui-tab id=\"visual-specs\">\n <eui-tab-header>\n <eui-tab-header-label>VISUAL SPECS</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Visual specifications</div>\n <ng-content select=\"docPageVisualSpecs\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n }\n @if(pagePlaygroundContent.length > 0) {\n <eui-tab id=\"playground\">\n <eui-tab-header>\n <eui-tab-header-label>PLAYGROUND</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Playground</div>\n <ng-content select=\"docPagePlayground\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageThemingContent().length > 0) {\n <eui-tab id=\"theming\">\n <eui-tab-header>\n <eui-tab-header-label>THEMING</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageTheming\" />\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageInteractiveContent().length > 0) {\n <eui-tab id=\"advanced\">\n <eui-tab-header>\n <eui-tab-header-label>\n {{ pageInteractiveContent()[0].title() }}\n </eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent()[0].subTitle() }}\n </div>\n <ng-content select=\"docPageInteractive\" />\n </eui-tab-body>\n </eui-tab>\n }\n </eui-tabs>\n }\n\n @if (pageSectionsContent().length > 0) {\n @if (sections().length === 0) {\n <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n }\n <ng-content select=\"docPageSections\" />\n }\n\n </eui-page-column-body>\n </eui-page-column>\n\n @if (isNavigationVisible()) {\n <eui-page-column\n class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" #navContent tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @if (pageSectionsContent().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onTabNavClick('samples')\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n @if (hasApi()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onTabNavClick('api')\">\n <span>API</span>\n </li>\n }\n @if (hasA11y()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onTabNavClick('a11y')\">\n <span>A11Y</span>\n </li>\n }\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @if (categories.length > 0) {\n @if (hasCategories) {\n @for (category of categories; track category) {\n @if (category.name === 'Base') {\n @for (sample of category.samples; track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n } @else {\n @if (category.name !== 'Base') {\n <div class=\"doc-page-navigation-category\">{{category.name}}</div>\n }\n @for (sample of category.samples; track sample) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id()\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n }\n }\n } @else {\n @for (sample of samples(); track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n }\n }\n </li>\n <!-- OPTIONAL TABS-->\n @if (pageThemingContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n @if (pageInteractiveContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent()[0].title() }}</span>\n </li>\n }\n @if(pageVisualSpecsContent.length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'visual-specs'\"\n (click)=\"onTabNavClick('visual-specs')\">\n <span>VISUAL SPECS</span>\n </li>\n }\n @if (pagePlaygroundContent.length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'playground'\"\n (click)=\"onTabNavClick('playground')\">\n <span>PLAYGROUND</span>\n </li>\n }\n }\n }\n @if (pageSectionsContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n @if (sections().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n }\n @if (sections().length > 0) {\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @for (section of sections(); track section; let i = $index) {\n <ul>\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(section.id(), null)\">\n <span>{{ section.label() || section.id() }}</span>\n </li>\n </ul>\n }\n </li>\n }\n }\n </ul>\n </div>\n </eui-page-column-body>\n </eui-page-column>\n }\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
|
|
1414
|
-
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], subLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subLabel", required: false }] }],
|
|
1607
|
+
], template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label() || id() }}\" subLabel=\"{{ subLabel() }}\" class=\"eui-doc-page-title\">\n <eui-page-header-action-items>\n @if (codeFolder()) {\n <eui-showcase-doc-page-code\n codeFolder=\"{{ codeFolder() }}\"\n showcase=\"{{ showcase() }}\" />\n }\n @if (stateLabel) {\n <eui-chip euiSizeS isFilled\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReadyInput()\"\n [euiWarning]=\"isDeprecatedInput()\"\n [euiDanger]=\"isDemoComponentOnly()\">\n {{ stateLabel }}\n </eui-chip>\n }\n </eui-page-header-action-items>\n </eui-page-header>\n\n @if ((stateLabel === 'LEGACY' || isLegacyInput()) && !isDemoComponentOnlyInput()) {\n <eui-alert euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n @if (cmp) {\n <div>\n @if (cmp.cmpReplacement !== 'NONE') {\n <div>\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n }\n @if (cmp.cmpReplacement === 'NONE') {\n <div>\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n }\n @if (cmp.cmpReplacementNote) {\n <div>\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n }\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'DEPRECATED' || isDeprecatedInput()) {\n <eui-alert euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n @if (cmp) {\n <div>\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'NOT_READY' || isNotReadyInput()) {\n <eui-alert euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n @if (cmp) {\n <div>\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'NOT_READY' || isDemoComponentOnlyInput()) {\n <eui-alert euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>DEMO ONLY - NOT READY for production usage</eui-alert-title>\n @if (cmp) {\n <div>\n This component is under development - it's used for testing and demo purposes only, it shouldn't be used yet. It'll be available as draft in a future release once\n validated.\n </div>\n }\n </eui-alert>\n }\n\n @if ((stateLabel || isNotReadyInput() || isDeprecatedInput()) && stateLabel !== 'ACTIVE') {\n <div class=\"mb-5\"></div>\n }\n\n @if (pageSectionsContent().length === 0) {\n <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n <eui-tab id=\"samples\">\n <eui-tab-header>\n <eui-tab-header-label>OPTIONS & SAMPLES</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (hasLinks()) {\n <div id=\"links\" class=\"doc-page-section-title\">Links</div>\n <div class=\"doc-page-links\">\n <!-- Figma -->\n @let figma = figmaLink();\n <a\n class=\"doc-page-link-card\"\n [class.doc-page-link-card--disabled]=\"!figma\"\n [attr.href]=\"figma || null\"\n [attr.target]=\"figma ? '_blank' : null\"\n [attr.rel]=\"figma ? 'noopener noreferrer' : null\"\n [attr.aria-disabled]=\"!figma\"\n [attr.tabindex]=\"figma ? 0 : -1\">\n <span class=\"doc-page-link-card__logo\">\n <svg viewBox=\"0 0 38 57\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"#1abcfe\" d=\"M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z\"/>\n <path fill=\"#0acf83\" d=\"M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z\"/>\n <path fill=\"#ff7262\" d=\"M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z\"/>\n <path fill=\"#f24e1e\" d=\"M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z\"/>\n <path fill=\"#a259ff\" d=\"M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z\"/>\n </svg>\n </span>\n <span class=\"doc-page-link-card__text\">\n <span class=\"doc-page-link-card__title\">Figma</span>\n <span class=\"doc-page-link-card__subtitle\">{{ figma ? 'Open design file' : 'Not available' }}</span>\n </span>\n </a>\n\n <!-- Web component -->\n @let wc = webComponentLink();\n <a\n class=\"doc-page-link-card\"\n [class.doc-page-link-card--disabled]=\"!wc\"\n [attr.href]=\"wc || null\"\n [attr.target]=\"wc ? '_blank' : null\"\n [attr.rel]=\"wc ? 'noopener noreferrer' : null\"\n [attr.aria-disabled]=\"!wc\"\n [attr.tabindex]=\"wc ? 0 : -1\">\n <span class=\"doc-page-link-card__logo\">\n <svg viewBox=\"0 0 30 30\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"#29abe2\" d=\"M15 1.5 27.5 8v14L15 28.5 2.5 22V8L15 1.5z\" opacity=\".15\"/>\n <path fill=\"none\" stroke=\"#29abe2\" stroke-width=\"2\" d=\"M15 2.5 26.5 9v12L15 27.5 3.5 21V9L15 2.5z\"/>\n <path fill=\"#29abe2\" d=\"m11 11-4 4 4 4 1.4-1.4L9.8 15l2.6-2.6zm8 0-1.4 1.4 2.6 2.6-2.6 2.6L19 19l4-4z\"/>\n </svg>\n </span>\n <span class=\"doc-page-link-card__text\">\n <span class=\"doc-page-link-card__title\">WebComponent</span>\n <span class=\"doc-page-link-card__subtitle\">{{ wc ? 'View component' : 'Not available' }}</span>\n </span>\n </a>\n\n <!-- React -->\n @let react = reactLink();\n <a\n class=\"doc-page-link-card\"\n [class.doc-page-link-card--disabled]=\"!react\"\n [attr.href]=\"react || null\"\n [attr.target]=\"react ? '_blank' : null\"\n [attr.rel]=\"react ? 'noopener noreferrer' : null\"\n [attr.aria-disabled]=\"!react\"\n [attr.tabindex]=\"react ? 0 : -1\">\n <span class=\"doc-page-link-card__logo\">\n <svg viewBox=\"-11.5 -10.23 23 20.46\" width=\"26\" height=\"26\" aria-hidden=\"true\" focusable=\"false\">\n <circle r=\"2.05\" fill=\"#61dafb\"/>\n <g fill=\"none\" stroke=\"#61dafb\" stroke-width=\"1\">\n <ellipse rx=\"11\" ry=\"4.2\"/>\n <ellipse rx=\"11\" ry=\"4.2\" transform=\"rotate(60)\"/>\n <ellipse rx=\"11\" ry=\"4.2\" transform=\"rotate(120)\"/>\n </g>\n </svg>\n </span>\n <span class=\"doc-page-link-card__text\">\n <span class=\"doc-page-link-card__title\">React</span>\n <span class=\"doc-page-link-card__subtitle\">{{ react ? 'View component' : 'Not available' }}</span>\n </span>\n </a>\n\n <!-- Storybook -->\n <!-- @let storybook = storybookLink();\n <a\n class=\"doc-page-link-card\"\n [class.doc-page-link-card--disabled]=\"!storybook\"\n [attr.href]=\"storybook || null\"\n [attr.target]=\"storybook ? '_blank' : null\"\n [attr.rel]=\"storybook ? 'noopener noreferrer' : null\"\n [attr.aria-disabled]=\"!storybook\"\n [attr.tabindex]=\"storybook ? 0 : -1\">\n <span class=\"doc-page-link-card__logo\">\n <svg viewBox=\"0 0 32 32\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"#ff4785\" d=\"M4.7 2.4 4 24.8a1.3 1.3 0 0 0 1.2 1.4l21.2 1.5a1.3 1.3 0 0 0 1.4-1.3V1.6A1.3 1.3 0 0 0 26.4.3L6 .1A1.3 1.3 0 0 0 4.7 1.4z\" transform=\"translate(1.7 2.3)\"/>\n <path fill=\"#fff\" d=\"M21.4 6.6l.2-3.8 1.6-.1.1 4a.3.3 0 0 1-.5.2l-1.2-.9-1.4 1.1a.3.3 0 0 1-.5-.3zM18.2 13c0 1 6.9.5 7.8-.2 0-5.6-3-8.6-8.5-8.6S9 7.3 9 11.7c0 7.7 10.3 7.8 10.3 12 0 1.2-.6 1.9-1.8 1.9-1.7 0-2.4-.9-2.3-3.8 0-.6-6.4-.8-6.6 0-.5 6.7 3.7 8.6 9 8.6 5 0 9-2.7 9-7.5 0-8.2-10.5-8-10.5-12.1 0-1.6 1.2-1.9 1.9-1.9.8 0 2.1.1 2 2.1z\"/>\n </svg>\n </span>\n <span class=\"doc-page-link-card__text\">\n <span class=\"doc-page-link-card__title\">Storybook</span>\n <span class=\"doc-page-link-card__subtitle\">{{ storybook ? 'Open playground' : 'Not available' }}</span>\n </span>\n </a> -->\n </div>\n }\n @if (cmp && cmp.metadata) {\n @if (cmpImportModule) {\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n }\n @if (cmpImportStandalone) {\n <div class=\"doc-page-section-title\">Component import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n }\n <br />\n }\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n @if (pageOverviewContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverview\" />\n </div>\n }\n @if (pageOverviewDefaultContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverviewDefault\" />\n </div>\n }\n <br />\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\" />\n </eui-tab-body>\n </eui-tab>\n @if (hasApi()) {\n <eui-tab id=\"api\">\n <eui-tab-header>\n <eui-tab-header-label>API</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (apiUrlSafe) {\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if (hasA11y()) {\n <eui-tab id=\"a11y\">\n <eui-tab-header>\n <eui-tab-header-label>A11Y</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n @if (pageAccessibilityContent().length !== 0) {\n <ng-content select=\"docPageAccessibility\" />\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n }\n @if (pageAccessibilityContent().length === 0) {\n No accessibility rules applicable\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if(pageVisualSpecsContent.length > 0) {\n <eui-tab id=\"visual-specs\">\n <eui-tab-header>\n <eui-tab-header-label>VISUAL SPECS</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Visual specifications</div>\n <ng-content select=\"docPageVisualSpecs\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n }\n @if(pagePlaygroundContent.length > 0) {\n <eui-tab id=\"playground\">\n <eui-tab-header>\n <eui-tab-header-label>PLAYGROUND</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Playground</div>\n <ng-content select=\"docPagePlayground\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageThemingContent().length > 0) {\n <eui-tab id=\"theming\">\n <eui-tab-header>\n <eui-tab-header-label>THEMING</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageTheming\" />\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageInteractiveContent().length > 0) {\n <eui-tab id=\"advanced\">\n <eui-tab-header>\n <eui-tab-header-label>\n {{ pageInteractiveContent()[0].title() }}\n </eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent()[0].subTitle() }}\n </div>\n <ng-content select=\"docPageInteractive\" />\n </eui-tab-body>\n </eui-tab>\n }\n </eui-tabs>\n }\n\n @if (pageSectionsContent().length > 0) {\n @if (sections().length === 0) {\n <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n }\n <ng-content select=\"docPageSections\" />\n }\n\n </eui-page-column-body>\n </eui-page-column>\n\n @if (isNavigationVisible()) {\n <eui-page-column\n class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" #navContent tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @if (pageSectionsContent().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onTabNavClick('samples')\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @if (categories.length > 0) {\n @if (hasCategories) {\n @for (category of categories; track category) {\n @if (category.name === 'Base') {\n @for (sample of category.samples; track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n } @else {\n @if (category.name !== 'Base') {\n <div class=\"doc-page-navigation-category\">{{category.name}}</div>\n }\n @for (sample of category.samples; track sample) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id()\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n }\n }\n } @else {\n @for (sample of mainSamples(); track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n }\n }\n </li>\n @if (hasApi()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onTabNavClick('api')\">\n <span>API</span>\n </li>\n }\n @if (hasA11y()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onTabNavClick('a11y')\">\n <span>A11Y</span>\n </li>\n }\n <!-- OPTIONAL TABS-->\n @if (pageThemingContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n @if (pageInteractiveContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent()[0].title() }}</span>\n </li>\n }\n @if(pageVisualSpecsContent.length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'visual-specs'\"\n (click)=\"onTabNavClick('visual-specs')\">\n <span>VISUAL SPECS</span>\n </li>\n }\n @if (pagePlaygroundContent.length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'playground'\"\n (click)=\"onTabNavClick('playground')\">\n <span>PLAYGROUND</span>\n </li>\n }\n }\n }\n @if (pageSectionsContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n @if (sections().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n }\n @if (sections().length > 0) {\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @for (section of sections(); track section; let i = $index) {\n <ul>\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(section.id(), null)\">\n <span>{{ section.label() || section.id() }}</span>\n </li>\n </ul>\n }\n </li>\n }\n }\n </ul>\n </div>\n </eui-page-column-body>\n </eui-page-column>\n }\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-links{display:flex;flex-wrap:wrap;gap:var(--eui-s-m);margin-bottom:var(--eui-s-2xl)}.eui-doc-page .doc-page-links .doc-page-link-card{display:flex;align-items:center;gap:var(--eui-s-s);flex:0 1 220px;min-width:200px;padding:var(--eui-s-s) var(--eui-s-m);border:1px solid var(--eui-c-divider);border-radius:var(--eui-br-m);background:var(--eui-c-surface-page);text-decoration:none;color:var(--eui-c-text);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.eui-doc-page .doc-page-links .doc-page-link-card:hover,.eui-doc-page .doc-page-links .doc-page-link-card:focus-visible{border-color:var(--eui-c-primary);box-shadow:var(--eui-sh-2);transform:translateY(-1px)}.eui-doc-page .doc-page-links .doc-page-link-card:focus-visible{outline:2px solid var(--eui-c-primary);outline-offset:2px}.eui-doc-page .doc-page-links .doc-page-link-card__logo{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;border-radius:var(--eui-br-m);background:var(--eui-c-surface-container-1)}.eui-doc-page .doc-page-links .doc-page-link-card__text{display:flex;flex-direction:column;min-width:0}.eui-doc-page .doc-page-links .doc-page-link-card__title{font:var(--eui-f-m-semi-bold);color:var(--eui-c-text)}.eui-doc-page .doc-page-links .doc-page-link-card__subtitle{font:var(--eui-f-s);color:var(--eui-c-text-lighter)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled{cursor:not-allowed;pointer-events:none;border-style:dashed;border-color:var(--eui-c-divider-dark);background:var(--eui-c-surface-container-1)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__logo{filter:grayscale(1);opacity:.45}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__title{color:var(--eui-c-text-lighter)}.eui-doc-page .doc-page-links .doc-page-link-card--disabled .doc-page-link-card__subtitle{color:var(--eui-c-text-lightest);font-style:italic}.eui-doc-page .doc-page-links .doc-page-link-card--disabled:hover,.eui-doc-page .doc-page-links .doc-page-link-card--disabled:focus-visible{border-color:var(--eui-c-divider-dark);box-shadow:none;transform:none}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
|
|
1608
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], subLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subLabel", required: false }] }], isNotReady: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNotReady", required: false }] }], isDeprecated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDeprecated", required: false }] }], isDemoComponentOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDemoComponentOnly", required: false }] }], isLegacy: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLegacy", required: false }] }], codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }], showcase: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcase", required: false }] }], isNavigationVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNavigationVisible", required: false }] }, { type: i0.Output, args: ["isNavigationVisibleChange"] }], hasApi: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasApi", required: false }] }], hasA11y: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasA11y", required: false }] }], customApiUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "customApiUrl", required: false }] }], samples: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSampleComponent), { ...{ descendants: true }, isSignal: true }] }], sections: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSectionComponent), { ...{ descendants: true }, isSignal: true }] }], pageLinksContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageLinksContentDirective), { isSignal: true }] }], pageOverviewContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewContentDirective), { isSignal: true }] }], pageOverviewDefaultContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewDefaultContentDirective), { isSignal: true }] }], pageSamplesContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSamplesContentDirective), { isSignal: true }] }], pageSectionsContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSectionsContentDirective), { isSignal: true }] }], pageInteractiveContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageInteractiveContentDirective), { isSignal: true }] }], pageAccessibilityContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageAccessibilityContentDirective), { isSignal: true }] }], pageApiContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageApiContentDirective), { isSignal: true }] }], pageThemingContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageThemingContentDirective), { isSignal: true }] }], pageVisualSpecsContent: [{
|
|
1415
1609
|
type: ContentChildren,
|
|
1416
1610
|
args: [forwardRef(() => DocPageVisualSpecsContentDirective)]
|
|
1417
1611
|
}], pagePlaygroundContent: [{
|
|
@@ -1452,6 +1646,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
1452
1646
|
type: Directive,
|
|
1453
1647
|
args: [{ selector: 'docPageInteractive' }]
|
|
1454
1648
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }] } });
|
|
1649
|
+
class DocPageLinksContentDirective {
|
|
1650
|
+
constructor() {
|
|
1651
|
+
this.figmaLink = input(undefined, /* @ts-ignore */
|
|
1652
|
+
...(ngDevMode ? [{ debugName: "figmaLink" }] : /* istanbul ignore next */ []));
|
|
1653
|
+
this.hasWebComponent = input(false, { ...(ngDevMode ? { debugName: "hasWebComponent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1654
|
+
this.hasReact = input(false, { ...(ngDevMode ? { debugName: "hasReact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1655
|
+
}
|
|
1656
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageLinksContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1657
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: DocPageLinksContentDirective, isStandalone: true, selector: "docPageLinks", inputs: { figmaLink: { classPropertyName: "figmaLink", publicName: "figmaLink", isSignal: true, isRequired: false, transformFunction: null }, hasWebComponent: { classPropertyName: "hasWebComponent", publicName: "hasWebComponent", isSignal: true, isRequired: false, transformFunction: null }, hasReact: { classPropertyName: "hasReact", publicName: "hasReact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
1658
|
+
}
|
|
1659
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageLinksContentDirective, decorators: [{
|
|
1660
|
+
type: Directive,
|
|
1661
|
+
args: [{ selector: 'docPageLinks' }]
|
|
1662
|
+
}], propDecorators: { figmaLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "figmaLink", required: false }] }], hasWebComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasWebComponent", required: false }] }], hasReact: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasReact", required: false }] }] } });
|
|
1455
1663
|
class DocPageSamplesContentDirective {
|
|
1456
1664
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageSamplesContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1457
1665
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocPageSamplesContentDirective, isStandalone: true, selector: "docPageSamples", ngImport: i0 }); }
|
|
@@ -1540,7 +1748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
1540
1748
|
args: [{ selector: 'eui-showcase-doc-page-code-fab', imports: [
|
|
1541
1749
|
...EUI_ICON,
|
|
1542
1750
|
...EUI_DIALOG,
|
|
1543
|
-
...EUI_BUTTON
|
|
1751
|
+
...EUI_BUTTON,
|
|
1544
1752
|
], template: "@if (hasContentDialog()) {\n <div class=\"eui-button-fixed eui-u-mb-6xl\">\n <div class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-cta-surface\">\n <eui-icon-svg icon=\"eui-code\" size=\"l\" (click)=\"toggleCode()\" />\n </div>\n </div>\n\n <eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"'50vw'\">\n @if (codeFolder()) {\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onOpenCode()\">\n <eui-icon-svg icon=\"eui-code\" set=\"eui\" size=\"m\" fillColor=\"grey-100\" class=\"eui-u-mr-xs\" /> VIEW SOURCES\n </button>\n }\n <ng-content />\n <p class=\"eui-u-text-paragraph\">Use the <kbd class=\"eui-u-text-kbd\">View sources</kbd> button to access the code source of the page.</p>\n </eui-dialog>\n\n} @else {\n\n <div class=\"eui-button-fixed eui-u-mb-6xl\">\n <button class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-cta-surface\" (click)=\"onOpenCode()\">\n <eui-icon-svg icon=\"eui-code\" size=\"l\" />\n </button>\n </div>\n\n}\n\n" }]
|
|
1545
1753
|
}], propDecorators: { codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }], showcase: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcase", required: false }] }], hasContentDialog: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasContentDialog", required: false }] }], dialog: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }] } });
|
|
1546
1754
|
|
|
@@ -2018,6 +2226,7 @@ const EUI_SHOWCASE = [
|
|
|
2018
2226
|
DocPageComponent,
|
|
2019
2227
|
DocPageDevGuideComponent,
|
|
2020
2228
|
DocPageInteractiveContentDirective,
|
|
2229
|
+
DocPageLinksContentDirective,
|
|
2021
2230
|
DocPageOverviewContentDirective,
|
|
2022
2231
|
DocPageOverviewDefaultContentDirective,
|
|
2023
2232
|
DocPageSamplesContentDirective,
|
|
@@ -2054,5 +2263,5 @@ const EUI_SHOWCASE = [
|
|
|
2054
2263
|
* Generated bundle index. Do not edit.
|
|
2055
2264
|
*/
|
|
2056
2265
|
|
|
2057
|
-
export { ConfigurationService, DocPageAccessibilityContentDirective, DocPageApiContentDirective, DocPageCodeComponent, DocPageCodeFabComponent, DocPageCodeModalComponent, DocPageComponent, DocPageDevGuideComponent, DocPageInteractiveContentDirective, DocPageOverviewContentDirective, DocPageOverviewDefaultContentDirective, DocPagePatternComponent, DocPagePatternDocDirective, DocPagePatternSampleComponent, DocPagePatternSampleDirective, DocPagePatternSampleDocDirective, DocPagePatternSampleRefsComponent, DocPagePatternSimpleComponent, DocPagePatternSimpleDocDirective, DocPagePlaygroundContentDirective, DocPageSamplesContentDirective, DocPageSectionsContentDirective, DocPageThemingContentDirective, DocPageVisualSpecsContentDirective, DocSampleApiComponent, DocSampleComponent, DocSectionCodeComponent, DocSectionCodeCssTagDirective, DocSectionCodeDescriptionTagDirective, DocSectionCodeDocTagDirective, DocSectionCodeHtmlTagDirective, DocSectionCodeServiceTagDirective, DocSectionCodeTsTagDirective, DocSectionComponent, EUI_SHOWCASE, EuiCodeHighlighterDirective, LoremIpsumSampleComponent, PACKAGE_JSON, PlaygroundComponent, StackblitzService, angularJsonFile, indexHtmlFile, mainFile, moduleFile, polyfillsFile, tsConfig };
|
|
2266
|
+
export { ConfigurationService, DocPageAccessibilityContentDirective, DocPageApiContentDirective, DocPageCodeComponent, DocPageCodeFabComponent, DocPageCodeModalComponent, DocPageComponent, DocPageDevGuideComponent, DocPageInteractiveContentDirective, DocPageLinksContentDirective, DocPageOverviewContentDirective, DocPageOverviewDefaultContentDirective, DocPagePatternComponent, DocPagePatternDocDirective, DocPagePatternSampleComponent, DocPagePatternSampleDirective, DocPagePatternSampleDocDirective, DocPagePatternSampleRefsComponent, DocPagePatternSimpleComponent, DocPagePatternSimpleDocDirective, DocPagePlaygroundContentDirective, DocPageSamplesContentDirective, DocPageSectionsContentDirective, DocPageThemingContentDirective, DocPageVisualSpecsContentDirective, DocSampleApiComponent, DocSampleComponent, DocSectionCodeComponent, DocSectionCodeCssTagDirective, DocSectionCodeDescriptionTagDirective, DocSectionCodeDocTagDirective, DocSectionCodeHtmlTagDirective, DocSectionCodeServiceTagDirective, DocSectionCodeTsTagDirective, DocSectionComponent, EUI_SHOWCASE, EuiCodeHighlighterDirective, LoremIpsumSampleComponent, PACKAGE_JSON, PlaygroundComponent, StackblitzService, angularJsonFile, indexHtmlFile, mainFile, moduleFile, polyfillsFile, tsConfig };
|
|
2058
2267
|
//# sourceMappingURL=eui-showcase.mjs.map
|