@eui/showcase 23.0.0-alpha.1 → 23.0.0-alpha.11
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 +707 -1293
- package/fesm2022/eui-showcase.mjs.map +1 -1
- package/package.json +11 -10
- package/types/eui-showcase.d.ts +262 -345
- package/types/eui-showcase.d.ts.map +1 -1
|
@@ -1,44 +1,41 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, Injectable,
|
|
3
|
-
import * as
|
|
2
|
+
import { signal, Injectable, input, Component, inject, ChangeDetectorRef, afterNextRender, ViewEncapsulation, ElementRef, Renderer2, effect, Directive, booleanAttribute, model, contentChildren, forwardRef, viewChild, NgZone, DestroyRef, Injector, ViewChild, ContentChildren, HostListener, contentChild } from '@angular/core';
|
|
3
|
+
import * as i1 from '@eui/components/eui-icon';
|
|
4
4
|
import { EUI_ICON } from '@eui/components/eui-icon';
|
|
5
|
-
import * as i2
|
|
5
|
+
import * as i2 from '@eui/components/eui-button';
|
|
6
6
|
import { EUI_BUTTON } from '@eui/components/eui-button';
|
|
7
7
|
import { HttpClient } from '@angular/common/http';
|
|
8
8
|
import { Router, ActivatedRoute } from '@angular/router';
|
|
9
|
-
import {
|
|
10
|
-
import
|
|
9
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
10
|
+
import { take, map, switchMap, catchError } from 'rxjs/operators';
|
|
11
|
+
import * as i2$1 from 'ngx-markdown';
|
|
11
12
|
import { MarkdownService, MarkdownModule } from 'ngx-markdown';
|
|
12
|
-
import * as
|
|
13
|
+
import * as i3 from '@eui/components/eui-page';
|
|
13
14
|
import { EUI_PAGE } from '@eui/components/eui-page';
|
|
14
|
-
import
|
|
15
|
-
import { NgClass, CommonModule, Location } from '@angular/common';
|
|
16
|
-
import * as i4$1 from '@eui/components/eui-page-v2';
|
|
17
|
-
import { EUI_PAGE as EUI_PAGE$1 } from '@eui/components/eui-page-v2';
|
|
15
|
+
import { NgClass, Location } from '@angular/common';
|
|
18
16
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
19
17
|
import { Clipboard } from '@angular/cdk/clipboard';
|
|
20
18
|
import { lastValueFrom, forkJoin, Observable } from 'rxjs';
|
|
21
19
|
import { EuiAppShellService, EuiGrowlService } from '@eui/core';
|
|
22
|
-
import * as
|
|
20
|
+
import * as i2$2 from '@eui/components/eui-tabs';
|
|
23
21
|
import { EUI_TABS } from '@eui/components/eui-tabs';
|
|
24
22
|
import sdk from '@stackblitz/sdk';
|
|
25
|
-
import * as
|
|
23
|
+
import * as i2$3 from '@eui/components/eui-label';
|
|
26
24
|
import { EUI_LABEL } from '@eui/components/eui-label';
|
|
27
|
-
import * as
|
|
25
|
+
import * as i3$1 from '@eui/components/eui-card';
|
|
28
26
|
import { EUI_CARD } from '@eui/components/eui-card';
|
|
29
|
-
import * as
|
|
27
|
+
import * as i1$1 from '@eui/components/eui-alert';
|
|
30
28
|
import { EUI_ALERT } from '@eui/components/eui-alert';
|
|
31
|
-
import * as
|
|
29
|
+
import * as i4 from '@eui/components/eui-chip';
|
|
32
30
|
import { EUI_CHIP } from '@eui/components/eui-chip';
|
|
33
|
-
import * as
|
|
34
|
-
import { EUI_BLOCK_CONTENT } from '@eui/components/eui-block-content';
|
|
35
|
-
import * as i3$1 from '@eui/components/eui-dialog';
|
|
31
|
+
import * as i2$4 from '@eui/components/eui-dialog';
|
|
36
32
|
import { EUI_DIALOG } from '@eui/components/eui-dialog';
|
|
37
|
-
import
|
|
38
|
-
import * as i6$1 from '@eui/components/eui-badge';
|
|
33
|
+
import * as i5 from '@eui/components/eui-badge';
|
|
39
34
|
import { EUI_BADGE } from '@eui/components/eui-badge';
|
|
40
|
-
import * as
|
|
35
|
+
import * as i5$1 from '@eui/components/eui-avatar';
|
|
41
36
|
import { EUI_AVATAR } from '@eui/components/eui-avatar';
|
|
37
|
+
import * as i1$2 from '@eui/components/eui-block-content';
|
|
38
|
+
import { EUI_BLOCK_CONTENT } from '@eui/components/eui-block-content';
|
|
42
39
|
|
|
43
40
|
/**
|
|
44
41
|
* A service to update and configure the Showcase module state.
|
|
@@ -51,7 +48,8 @@ class ConfigurationService {
|
|
|
51
48
|
*
|
|
52
49
|
* Default value for renderPlayground will be true.
|
|
53
50
|
*/
|
|
54
|
-
this.state = signal({ renderPlayground: true },
|
|
51
|
+
this.state = signal({ renderPlayground: true }, /* @ts-ignore */
|
|
52
|
+
...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
55
53
|
}
|
|
56
54
|
/**
|
|
57
55
|
* Update the state of configuration. Deep merge is not available thus if
|
|
@@ -74,10 +72,10 @@ class ConfigurationService {
|
|
|
74
72
|
get configuration() {
|
|
75
73
|
return this.state.asReadonly();
|
|
76
74
|
}
|
|
77
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
78
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
75
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
76
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ConfigurationService, providedIn: 'root' }); }
|
|
79
77
|
}
|
|
80
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
78
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ConfigurationService, decorators: [{
|
|
81
79
|
type: Injectable,
|
|
82
80
|
args: [{
|
|
83
81
|
providedIn: 'root',
|
|
@@ -86,206 +84,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
86
84
|
|
|
87
85
|
class DocPageCodeComponent {
|
|
88
86
|
constructor() {
|
|
89
|
-
this.codeFolder = ''
|
|
90
|
-
|
|
87
|
+
this.codeFolder = input('', /* @ts-ignore */
|
|
88
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
89
|
+
this.showcase = input('ux', /* @ts-ignore */
|
|
90
|
+
...(ngDevMode ? [{ debugName: "showcase" }] : /* istanbul ignore next */ []));
|
|
91
91
|
}
|
|
92
92
|
onOpenCode() {
|
|
93
93
|
// eslint-disable-next-line max-len
|
|
94
|
-
const sourceRootPath = `https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-${this.showcase}/-/blob/master/src/app/`;
|
|
95
|
-
window.open(sourceRootPath + this.codeFolder, '_blank');
|
|
94
|
+
const sourceRootPath = `https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-${this.showcase()}/-/blob/master/src/app/`;
|
|
95
|
+
window.open(sourceRootPath + this.codeFolder(), '_blank');
|
|
96
96
|
}
|
|
97
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
98
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
97
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
98
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: DocPageCodeComponent, isStandalone: true, selector: "eui-showcase-doc-page-code", inputs: { codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, showcase: { classPropertyName: "showcase", publicName: "showcase", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button type=\"button\" euiButton euiCTAButton (click)=\"onOpenCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\" />\n</button>\n", dependencies: [{ kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }] }); }
|
|
99
99
|
}
|
|
100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
100
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeComponent, decorators: [{
|
|
101
101
|
type: Component,
|
|
102
102
|
args: [{ selector: 'eui-showcase-doc-page-code', imports: [
|
|
103
103
|
...EUI_ICON,
|
|
104
104
|
...EUI_BUTTON,
|
|
105
105
|
], template: "<button type=\"button\" euiButton euiCTAButton (click)=\"onOpenCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\" />\n</button>\n" }]
|
|
106
|
-
}], propDecorators: { codeFolder: [{
|
|
107
|
-
type: Input
|
|
108
|
-
}], showcase: [{
|
|
109
|
-
type: Input
|
|
110
|
-
}] } });
|
|
106
|
+
}], propDecorators: { codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }], showcase: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcase", required: false }] }] } });
|
|
111
107
|
|
|
112
108
|
class DocPageDevGuideComponent {
|
|
113
109
|
constructor() {
|
|
114
|
-
this.
|
|
115
|
-
|
|
116
|
-
this.showcaseName = 'showcase-dev-guide'
|
|
110
|
+
this.rootDocsFolder = input('docs', /* @ts-ignore */
|
|
111
|
+
...(ngDevMode ? [{ debugName: "rootDocsFolder" }] : /* istanbul ignore next */ []));
|
|
112
|
+
this.showcaseName = input('showcase-dev-guide', /* @ts-ignore */
|
|
113
|
+
...(ngDevMode ? [{ debugName: "showcaseName" }] : /* istanbul ignore next */ []));
|
|
117
114
|
this.headers = [];
|
|
118
115
|
this.markdownService = inject(MarkdownService);
|
|
119
116
|
this.http = inject(HttpClient);
|
|
120
117
|
this.router = inject(Router);
|
|
121
118
|
this.route = inject(ActivatedRoute);
|
|
122
|
-
this.cdRef = inject(
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
this.subscription = this.route.url.subscribe((u) => {
|
|
126
|
-
this._loadMdContent(`/${this.rootDocsFolder}/` + u.join('/'));
|
|
119
|
+
this.cdRef = inject(ChangeDetectorRef);
|
|
120
|
+
this.route.url.pipe(takeUntilDestroyed()).subscribe((u) => {
|
|
121
|
+
this._loadMdContent(`/${this.rootDocsFolder()}/` + u.join('/'));
|
|
127
122
|
});
|
|
128
|
-
|
|
129
|
-
* callback for heading renderer. It will be called for each heading in the markdown.
|
|
130
|
-
*
|
|
131
|
-
* @param text the encoded heading text
|
|
132
|
-
* @param level the heading level
|
|
133
|
-
* @param raw the raw heading text (decoded)
|
|
134
|
-
*/
|
|
135
|
-
// TODO v21
|
|
136
|
-
// this.markdownService.renderer.heading = ({ raw, text, depth }: Tokens.Heading): string => {
|
|
137
|
-
// if (depth === 2 || depth === 3) {
|
|
138
|
-
// const newHeader = `<h${depth} id="${raw}">${text}</h${depth}>`;
|
|
139
|
-
// if (text.indexOf('<a ') === -1 && text.indexOf('<em>') === -1) {
|
|
140
|
-
// this.headers.push({ id: raw, label: raw, level: depth });
|
|
141
|
-
// }
|
|
142
|
-
// return newHeader;
|
|
143
|
-
// }
|
|
144
|
-
// return `<h${depth}>${text}</h${depth}>`;
|
|
145
|
-
// };
|
|
146
|
-
this.markdownService.renderer.heading = (text, level, raw) => {
|
|
147
|
-
if (level === 2 || level === 3) {
|
|
148
|
-
const newHeader = `<h${level} id="${raw}">${text}</h${level}>`;
|
|
149
|
-
if (text.indexOf('<a ') === -1 && text.indexOf('<em>') === -1) {
|
|
150
|
-
this.headers.push({ id: raw, label: raw, level: level });
|
|
151
|
-
}
|
|
152
|
-
return newHeader;
|
|
153
|
-
}
|
|
154
|
-
return `<h${level}>${text}</h${level}>`;
|
|
155
|
-
};
|
|
156
|
-
// this.markdownService.renderer.heading = ({ text, level, raw }: Tokens.Heading) => {
|
|
157
|
-
// const escapedText = text.toLowerCase().replace(/[^\w]+/g, '-');
|
|
158
|
-
// return '<h' + level + '>' +
|
|
159
|
-
// '<a name="' + escapedText + '" class="anchor" href="#' + escapedText + '">' +
|
|
160
|
-
// '<span class="header-link"></span>' +
|
|
161
|
-
// '</a>' + text +
|
|
162
|
-
// '</h' + level + '>';
|
|
163
|
-
// };
|
|
164
|
-
}
|
|
165
|
-
ngAfterViewInit() {
|
|
166
|
-
this.route.fragment.pipe(take(1)).subscribe((fragment) => {
|
|
123
|
+
this.route.fragment.pipe(take(1), takeUntilDestroyed()).subscribe((fragment) => {
|
|
167
124
|
if (fragment) {
|
|
168
|
-
|
|
169
|
-
|
|
125
|
+
this.fragmentId = fragment;
|
|
126
|
+
afterNextRender(() => {
|
|
170
127
|
this.cdRef.detectChanges();
|
|
171
128
|
const fgm = document.getElementById(fragment);
|
|
172
129
|
fgm?.scrollIntoView();
|
|
173
|
-
}
|
|
130
|
+
});
|
|
174
131
|
}
|
|
175
132
|
});
|
|
176
133
|
}
|
|
177
|
-
ngOnDestroy() {
|
|
178
|
-
if (this.subscription) {
|
|
179
|
-
this.subscription.unsubscribe();
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
onNavClick(fragmentId) {
|
|
183
|
-
this._scrollToFragment(fragmentId);
|
|
184
|
-
}
|
|
185
|
-
_loadMdContent(url) {
|
|
186
|
-
let mdPath, contextRoot;
|
|
187
|
-
const currentUrl = window.location;
|
|
188
|
-
const pathNameArray = currentUrl.pathname.split('/');
|
|
189
|
-
this.headers = [];
|
|
190
|
-
if (url) {
|
|
191
|
-
mdPath = url.substr(1);
|
|
192
|
-
}
|
|
193
|
-
else {
|
|
194
|
-
mdPath = pathNameArray.slice(pathNameArray.length - 3).join('/');
|
|
195
|
-
}
|
|
196
|
-
contextRoot = `${currentUrl.protocol}//${currentUrl.host}`;
|
|
197
|
-
if (pathNameArray[1] !== this.showcaseName) {
|
|
198
|
-
contextRoot += `/${pathNameArray[1]}`;
|
|
199
|
-
}
|
|
200
|
-
const filePath = `${contextRoot}/assets/${mdPath}.md`;
|
|
201
|
-
this.http.get(filePath, { responseType: 'text' }).pipe(map((md) => md.replace(new RegExp(`assets/${this.rootDocsFolder}`, 'g'), `${contextRoot}/assets/${this.rootDocsFolder}`))).subscribe((md) => {
|
|
202
|
-
this.markdown = md;
|
|
203
|
-
this.cdRef.detectChanges();
|
|
204
|
-
const top = document.getElementById('top');
|
|
205
|
-
top.scrollIntoView();
|
|
206
|
-
});
|
|
207
|
-
}
|
|
208
|
-
_scrollToFragment(fragmentId) {
|
|
209
|
-
// forcing reload when deep link with fragment
|
|
210
|
-
this.router.onSameUrlNavigation = 'reload';
|
|
211
|
-
this.router.navigate(['.'], { relativeTo: this.route, fragment: fragmentId });
|
|
212
|
-
if (fragmentId) {
|
|
213
|
-
setTimeout(() => {
|
|
214
|
-
const fgm = document.getElementById(fragmentId);
|
|
215
|
-
if (fgm) {
|
|
216
|
-
fgm.scrollIntoView();
|
|
217
|
-
}
|
|
218
|
-
});
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DocPageDevGuideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
222
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: DocPageDevGuideComponent, isStandalone: true, selector: "eui-showcase-doc-page-dev-guide", inputs: { rootDocsFolder: "rootDocsFolder", showcaseName: "showcaseName" }, host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <span id=\"top\"></span>\n <markdown class=\"doc-content\" [data]=\"markdown\"></markdown>\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column class=\"eui-u-hidden-mobile\"\n label=\"On this page\"\n 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-3xl-semi-bold)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-4xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-primary);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid 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:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-2xl-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-2xl-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: i4.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i4.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isCollapsedHidden", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile", "hasSubColumns"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i4.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i4.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i4.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "ngmodule", type: MarkdownModule }, { kind: "component", type: i2$2.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 }); }
|
|
223
|
-
}
|
|
224
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DocPageDevGuideComponent, decorators: [{
|
|
225
|
-
type: Component,
|
|
226
|
-
args: [{ selector: 'eui-showcase-doc-page-dev-guide', encapsulation: ViewEncapsulation.None, imports: [
|
|
227
|
-
NgClass,
|
|
228
|
-
...EUI_PAGE,
|
|
229
|
-
MarkdownModule, // .forRoot({ sanitize: SecurityContext.NONE }),
|
|
230
|
-
], 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\"></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-3xl-semi-bold)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-4xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-primary);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid 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:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-2xl-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-2xl-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"] }]
|
|
231
|
-
}], propDecorators: { cssClass: [{
|
|
232
|
-
type: HostBinding,
|
|
233
|
-
args: ['class']
|
|
234
|
-
}], rootDocsFolder: [{
|
|
235
|
-
type: Input
|
|
236
|
-
}], showcaseName: [{
|
|
237
|
-
type: Input
|
|
238
|
-
}] } });
|
|
239
|
-
|
|
240
|
-
class DocPageDevGuideComponentV2 {
|
|
241
|
-
constructor() {
|
|
242
|
-
this.cssClass = 'eui-doc-page';
|
|
243
|
-
this.rootDocsFolder = 'docs';
|
|
244
|
-
this.showcaseName = 'showcase-dev-guide';
|
|
245
|
-
this.headers = [];
|
|
246
|
-
this.markdownService = inject(MarkdownService);
|
|
247
|
-
this.http = inject(HttpClient);
|
|
248
|
-
this.router = inject(Router);
|
|
249
|
-
this.route = inject(ActivatedRoute);
|
|
250
|
-
}
|
|
251
134
|
ngOnInit() {
|
|
252
|
-
this.subscription = this.route.url.subscribe((u) => {
|
|
253
|
-
this._loadMdContent(`/${this.rootDocsFolder}/` + u.join('/'));
|
|
254
|
-
});
|
|
255
135
|
/**
|
|
256
136
|
* callback for heading renderer. It will be called for each heading in the markdown.
|
|
257
|
-
*
|
|
258
|
-
* @param text the encoded heading text
|
|
259
|
-
* @param level the heading level
|
|
260
|
-
* @param raw the raw heading text (decoded)
|
|
261
137
|
*/
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
// return newHeader;
|
|
270
|
-
// }
|
|
271
|
-
// return `<h${depth}>${text}</h${depth}>`;
|
|
272
|
-
// };
|
|
273
|
-
}
|
|
274
|
-
ngAfterViewInit() {
|
|
275
|
-
this.route.fragment.pipe(take(1)).subscribe((fragment) => {
|
|
276
|
-
if (fragment) {
|
|
277
|
-
setTimeout(() => {
|
|
278
|
-
this.fragmentId = fragment;
|
|
279
|
-
const fgm = document.getElementById(fragment);
|
|
280
|
-
fgm.scrollIntoView();
|
|
281
|
-
}, 1);
|
|
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;
|
|
282
145
|
}
|
|
283
|
-
|
|
146
|
+
return `<h${depth}>${text}</h${depth}>`;
|
|
147
|
+
};
|
|
284
148
|
}
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
this.subscription.unsubscribe();
|
|
288
|
-
}
|
|
149
|
+
ngAfterViewInit() {
|
|
150
|
+
// Fragment scrolling is handled in constructor via afterNextRender
|
|
289
151
|
}
|
|
290
152
|
onNavClick(fragmentId) {
|
|
291
153
|
this._scrollToFragment(fragmentId);
|
|
@@ -296,24 +158,24 @@ class DocPageDevGuideComponentV2 {
|
|
|
296
158
|
const pathNameArray = currentUrl.pathname.split('/');
|
|
297
159
|
this.headers = [];
|
|
298
160
|
if (url) {
|
|
299
|
-
mdPath = url.
|
|
161
|
+
mdPath = url.substring(1);
|
|
300
162
|
}
|
|
301
163
|
else {
|
|
302
164
|
mdPath = pathNameArray.slice(pathNameArray.length - 3).join('/');
|
|
303
165
|
}
|
|
304
166
|
contextRoot = `${currentUrl.protocol}//${currentUrl.host}`;
|
|
305
|
-
if (pathNameArray[1] !== this.showcaseName) {
|
|
167
|
+
if (pathNameArray[1] !== this.showcaseName()) {
|
|
306
168
|
contextRoot += `/${pathNameArray[1]}`;
|
|
307
169
|
}
|
|
308
170
|
const filePath = `${contextRoot}/assets/${mdPath}.md`;
|
|
309
|
-
this.http.get(filePath, { responseType: 'text' }).pipe(map((md) => md.replace(new RegExp(`assets/${this.rootDocsFolder}`, 'g'), `${contextRoot}/assets/${this.rootDocsFolder}`))).subscribe((md) => {
|
|
171
|
+
this.http.get(filePath, { responseType: 'text' }).pipe(map((md) => md.replace(new RegExp(`assets/${this.rootDocsFolder()}`, 'g'), `${contextRoot}/assets/${this.rootDocsFolder()}`))).subscribe((md) => {
|
|
310
172
|
this.markdown = md;
|
|
173
|
+
this.cdRef.detectChanges();
|
|
311
174
|
const top = document.getElementById('top');
|
|
312
|
-
top
|
|
175
|
+
top?.scrollIntoView();
|
|
313
176
|
});
|
|
314
177
|
}
|
|
315
178
|
_scrollToFragment(fragmentId) {
|
|
316
|
-
// forcing reload when deep link with fragment
|
|
317
179
|
this.router.onSameUrlNavigation = 'reload';
|
|
318
180
|
this.router.navigate(['.'], { relativeTo: this.route, fragment: fragmentId });
|
|
319
181
|
if (fragmentId) {
|
|
@@ -325,24 +187,17 @@ class DocPageDevGuideComponentV2 {
|
|
|
325
187
|
});
|
|
326
188
|
}
|
|
327
189
|
}
|
|
328
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
329
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
190
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageDevGuideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
191
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }); }
|
|
330
192
|
}
|
|
331
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
193
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageDevGuideComponent, decorators: [{
|
|
332
194
|
type: Component,
|
|
333
|
-
args: [{ selector: 'eui-showcase-doc-page-dev-guide
|
|
195
|
+
args: [{ selector: 'eui-showcase-doc-page-dev-guide', encapsulation: ViewEncapsulation.None, host: { class: 'eui-doc-page' }, imports: [
|
|
334
196
|
NgClass,
|
|
335
|
-
...EUI_PAGE
|
|
336
|
-
MarkdownModule,
|
|
337
|
-
], 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\"
|
|
338
|
-
}], propDecorators: {
|
|
339
|
-
type: HostBinding,
|
|
340
|
-
args: ['class']
|
|
341
|
-
}], rootDocsFolder: [{
|
|
342
|
-
type: Input
|
|
343
|
-
}], showcaseName: [{
|
|
344
|
-
type: Input
|
|
345
|
-
}] } });
|
|
197
|
+
...EUI_PAGE,
|
|
198
|
+
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
|
+
}], ctorParameters: () => [], propDecorators: { rootDocsFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootDocsFolder", required: false }] }], showcaseName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcaseName", required: false }] }] } });
|
|
346
201
|
|
|
347
202
|
const polyfillsFile = 'import \'zone.js\';';
|
|
348
203
|
const mainFile = (moduleName, componentName) => `
|
|
@@ -353,7 +208,7 @@ import { BrowserModule${!moduleName ? ', bootstrapApplication' : ''} } from '@an
|
|
|
353
208
|
import { InjectionToken, ${!moduleName ? 'importProvidersFrom' : 'NgModule'} } from '@angular/core';
|
|
354
209
|
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
|
|
355
210
|
import { reducers as coreReducers, CoreModule, EUI_CONFIG_TOKEN } from '@eui/core';
|
|
356
|
-
import {
|
|
211
|
+
import { provideTranslateService, TranslatePipe } from '@ngx-translate/core';
|
|
357
212
|
|
|
358
213
|
${moduleName ? `import { ${componentName}, ${moduleName} } from './component';` : `import { ${componentName} } from './component';`}
|
|
359
214
|
|
|
@@ -364,10 +219,10 @@ ${moduleName ? `
|
|
|
364
219
|
imports: [
|
|
365
220
|
BrowserModule,
|
|
366
221
|
CoreModule.forRoot(),
|
|
367
|
-
TranslateModule.forRoot(),
|
|
368
222
|
${moduleName},
|
|
369
223
|
],
|
|
370
224
|
providers: [
|
|
225
|
+
provideTranslateService(),
|
|
371
226
|
provideHttpClient(withInterceptorsFromDi()),
|
|
372
227
|
{
|
|
373
228
|
provide: REDUCER_TOKEN,
|
|
@@ -422,8 +277,8 @@ bootstrapApplication(${componentName}, {
|
|
|
422
277
|
BrowserAnimationsModule,
|
|
423
278
|
BrowserModule,
|
|
424
279
|
CoreModule.forRoot(),
|
|
425
|
-
TranslateModule.forRoot(),
|
|
426
280
|
),
|
|
281
|
+
provideTranslateService(),
|
|
427
282
|
],
|
|
428
283
|
});
|
|
429
284
|
`}
|
|
@@ -435,7 +290,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
|
435
290
|
import { RouterModule } from '@angular/router';
|
|
436
291
|
import { APP_BASE_HREF } from '@angular/common';
|
|
437
292
|
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
|
|
438
|
-
import {
|
|
293
|
+
import { provideTranslateService, TranslatePipe } from '@ngx-translate/core';
|
|
439
294
|
import { FormsModule } from '@angular/forms';
|
|
440
295
|
import { CommonModule } from '@angular/common';
|
|
441
296
|
import { EuiAllModule } from '@eui/components';
|
|
@@ -464,13 +319,13 @@ export const REDUCER_TOKEN = new InjectionToken<any>('Registered Reducers');
|
|
|
464
319
|
RouterModule.forRoot([]),
|
|
465
320
|
EuiCoreModule.forRoot(),
|
|
466
321
|
EffectsModule.forRoot([...CoreModuleEffects]),
|
|
467
|
-
TranslateModule.forRoot(translateConfig),
|
|
468
322
|
` +
|
|
469
323
|
m.map((i) => `${i.name},`).join('') +
|
|
470
324
|
`
|
|
471
325
|
],
|
|
472
326
|
declarations: [${componentName}],
|
|
473
327
|
providers: [
|
|
328
|
+
provideTranslateService(translateConfig),
|
|
474
329
|
provideHttpClient(withInterceptorsFromDi()),
|
|
475
330
|
{
|
|
476
331
|
provide: REDUCER_TOKEN,
|
|
@@ -685,19 +540,39 @@ class StackblitzService {
|
|
|
685
540
|
* @param sampleId
|
|
686
541
|
*/
|
|
687
542
|
openStackBlitz(htmlContent, typescriptContent, title, sampleId) {
|
|
543
|
+
this.openStackBlitzWithFiles([
|
|
544
|
+
{ name: 'component.html', content: htmlContent },
|
|
545
|
+
{ name: 'component.ts', content: typescriptContent },
|
|
546
|
+
], title, sampleId);
|
|
547
|
+
}
|
|
548
|
+
/**
|
|
549
|
+
* Open a stackblitz project with all sample files
|
|
550
|
+
* @param files Array of file objects with name and content
|
|
551
|
+
* @param title
|
|
552
|
+
* @param sampleId
|
|
553
|
+
*/
|
|
554
|
+
openStackBlitzWithFiles(files, title, sampleId) {
|
|
688
555
|
this.getStackblitzDependencies()
|
|
689
556
|
.then((deps) => {
|
|
690
557
|
const { dependencies, devDependencies } = deps;
|
|
558
|
+
const tsFile = files.find(f => f.name === 'component.ts');
|
|
559
|
+
const typescriptContent = tsFile?.content || '';
|
|
691
560
|
const { selector } = this.extractComponentMetadata(typescriptContent);
|
|
692
561
|
const moduleName = this.extractModuleName(typescriptContent);
|
|
693
562
|
const componentName = this.extractComponentName(typescriptContent);
|
|
563
|
+
const sampleFiles = {};
|
|
564
|
+
files.forEach(f => {
|
|
565
|
+
const content = f.name === 'component.ts' && moduleName
|
|
566
|
+
? this.appendVitalNgModules(f.content)
|
|
567
|
+
: f.content;
|
|
568
|
+
sampleFiles[`src/${f.name}`] = content;
|
|
569
|
+
});
|
|
694
570
|
const project = {
|
|
695
571
|
title: title,
|
|
696
572
|
description: `An eUI example for the ${title}.`,
|
|
697
573
|
template: 'node',
|
|
698
574
|
files: {
|
|
699
|
-
|
|
700
|
-
'src/component.ts': moduleName ? this.appendVitalNgModules(typescriptContent) : typescriptContent,
|
|
575
|
+
...sampleFiles,
|
|
701
576
|
'src/main.ts': mainFile(moduleName, componentName),
|
|
702
577
|
'src/polyfills.ts': polyfillsFile,
|
|
703
578
|
'src/index.html': indexHtmlFile(selector),
|
|
@@ -718,8 +593,9 @@ class StackblitzService {
|
|
|
718
593
|
},
|
|
719
594
|
dependencies,
|
|
720
595
|
};
|
|
596
|
+
const openFiles = files.map(f => `src/${f.name}`);
|
|
721
597
|
return sdk.openProject(project, {
|
|
722
|
-
openFile:
|
|
598
|
+
openFile: openFiles,
|
|
723
599
|
zenMode: true,
|
|
724
600
|
});
|
|
725
601
|
});
|
|
@@ -757,6 +633,7 @@ class StackblitzService {
|
|
|
757
633
|
'rxjs',
|
|
758
634
|
'tslib',
|
|
759
635
|
'zone.js',
|
|
636
|
+
'deepmerge-ts',
|
|
760
637
|
];
|
|
761
638
|
const stackblitzDevDependencies = ['@angular-devkit/build-angular', '@angular/cli', '@angular/compiler-cli', 'typescript'];
|
|
762
639
|
return this.getCurrentShowcaseEuiVersion()
|
|
@@ -772,6 +649,7 @@ class StackblitzService {
|
|
|
772
649
|
'@types/cleave.js': '1.4.12',
|
|
773
650
|
moment: '^2.19.3',
|
|
774
651
|
extend: '^3.0.2',
|
|
652
|
+
'@faker-js/faker': '^9.0.0',
|
|
775
653
|
};
|
|
776
654
|
// filter devDependencies to only what stackblitz needs
|
|
777
655
|
filteredArr = Object.entries(dependencies).filter((v) => stackblitzDevDependencies.find((s) => s === v[0]));
|
|
@@ -799,10 +677,10 @@ class StackblitzService {
|
|
|
799
677
|
getCurrentShowcaseEuiVersion() {
|
|
800
678
|
return lastValueFrom(this.http.get('assets/app-metadata.json', { responseType: 'json' })).then((res) => res?.appVersion || 'latest');
|
|
801
679
|
}
|
|
802
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
803
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
680
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StackblitzService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
681
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StackblitzService, providedIn: 'root' }); }
|
|
804
682
|
}
|
|
805
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
683
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StackblitzService, decorators: [{
|
|
806
684
|
type: Injectable,
|
|
807
685
|
args: [{
|
|
808
686
|
providedIn: 'root',
|
|
@@ -811,7 +689,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
811
689
|
|
|
812
690
|
class EuiCodeHighlighterDirective {
|
|
813
691
|
constructor() {
|
|
814
|
-
this.code = input(
|
|
692
|
+
this.code = input(/* @ts-ignore */
|
|
693
|
+
...(ngDevMode ? [undefined, { debugName: "code" }] : /* istanbul ignore next */ []));
|
|
815
694
|
this.el = inject(ElementRef);
|
|
816
695
|
this.renderer = inject(Renderer2);
|
|
817
696
|
effect(() => {
|
|
@@ -830,10 +709,10 @@ class EuiCodeHighlighterDirective {
|
|
|
830
709
|
window['Prism'].highlightElement(this.el.nativeElement);
|
|
831
710
|
}
|
|
832
711
|
}
|
|
833
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
834
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
712
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EuiCodeHighlighterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
713
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: EuiCodeHighlighterDirective, isStandalone: true, selector: "[euiCode]", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
835
714
|
}
|
|
836
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
715
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EuiCodeHighlighterDirective, decorators: [{
|
|
837
716
|
type: Directive,
|
|
838
717
|
args: [{
|
|
839
718
|
selector: '[euiCode]',
|
|
@@ -842,17 +721,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
842
721
|
|
|
843
722
|
class DocSampleComponent {
|
|
844
723
|
constructor() {
|
|
845
|
-
this.id = ''
|
|
846
|
-
|
|
847
|
-
this.
|
|
848
|
-
|
|
849
|
-
this.
|
|
850
|
-
|
|
851
|
-
this.
|
|
724
|
+
this.id = input('', /* @ts-ignore */
|
|
725
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
726
|
+
this.label = input('', /* @ts-ignore */
|
|
727
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
728
|
+
this.category = input(undefined, /* @ts-ignore */
|
|
729
|
+
...(ngDevMode ? [{ debugName: "category" }] : /* istanbul ignore next */ []));
|
|
730
|
+
this.description = input(undefined, /* @ts-ignore */
|
|
731
|
+
...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
732
|
+
this.defaultValue = input(undefined, /* @ts-ignore */
|
|
733
|
+
...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
|
|
734
|
+
this.styleClass = input('', /* @ts-ignore */
|
|
735
|
+
...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
|
|
736
|
+
this.renderPlayground = input(null, { ...(ngDevMode ? { debugName: "renderPlayground" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
737
|
+
this.isCodeButtonVisible = input(true, { ...(ngDevMode ? { debugName: "isCodeButtonVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
738
|
+
this.isInnerSection = input(false, { ...(ngDevMode ? { debugName: "isInnerSection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
852
739
|
this.isCodeLoaded = false;
|
|
853
740
|
this.isCodeLoading = false;
|
|
854
741
|
this.isCodeExpanded = false;
|
|
855
742
|
this.playground_activated = false;
|
|
743
|
+
this.sampleFiles = [];
|
|
856
744
|
this.conf = inject(ConfigurationService);
|
|
857
745
|
this.sb = inject(StackblitzService);
|
|
858
746
|
this._http = inject(HttpClient);
|
|
@@ -862,11 +750,6 @@ class DocSampleComponent {
|
|
|
862
750
|
this.clipboard = inject(Clipboard);
|
|
863
751
|
this.router = inject(Router);
|
|
864
752
|
}
|
|
865
|
-
ngAfterContentInit() {
|
|
866
|
-
if (!this.label) {
|
|
867
|
-
this.label = this.id;
|
|
868
|
-
}
|
|
869
|
-
}
|
|
870
753
|
copyCurrentUrlToClipboard(id) {
|
|
871
754
|
try {
|
|
872
755
|
const baseDomain = window?.location?.origin;
|
|
@@ -927,18 +810,17 @@ class DocSampleComponent {
|
|
|
927
810
|
* open the code sample in stackblitz
|
|
928
811
|
*/
|
|
929
812
|
onStackblitzOpen() {
|
|
930
|
-
this.loadCodeFiles().subscribe((
|
|
931
|
-
this.
|
|
932
|
-
this.htmlContent = this.filterOutExcludeContent(demo.html);
|
|
933
|
-
this.sb.openStackBlitz(this.htmlContent, this.tsContent, 'eUI Playground', this.id);
|
|
813
|
+
this.loadCodeFiles().subscribe(() => {
|
|
814
|
+
this.sb.openStackBlitzWithFiles(this.sampleFiles.map(f => ({ name: f.name, content: f.content })), 'eUI Playground', this.id());
|
|
934
815
|
});
|
|
935
816
|
}
|
|
936
817
|
/**
|
|
937
818
|
* returns whenever playground should render. Input has precedence over Configuration service
|
|
938
819
|
*/
|
|
939
820
|
shouldRenderPlayground() {
|
|
940
|
-
|
|
941
|
-
|
|
821
|
+
const renderPlayground = this.renderPlayground();
|
|
822
|
+
return renderPlayground === undefined || renderPlayground === null ?
|
|
823
|
+
this.conf.configuration().renderPlayground : renderPlayground;
|
|
942
824
|
}
|
|
943
825
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
944
826
|
_getComponent(id) {
|
|
@@ -962,6 +844,37 @@ class DocSampleComponent {
|
|
|
962
844
|
}
|
|
963
845
|
loadCodeFiles() {
|
|
964
846
|
this.isCodeLoading = true;
|
|
847
|
+
const samplesPath = this.getSamplesPath();
|
|
848
|
+
return this._http.get(`${samplesPath}/metadata.json`).pipe(switchMap(metadata => {
|
|
849
|
+
const requests = {};
|
|
850
|
+
metadata.files.forEach(f => {
|
|
851
|
+
requests[f.name] = this._http.get(`${samplesPath}/${f.name}`, { responseType: 'text' });
|
|
852
|
+
});
|
|
853
|
+
return forkJoin(requests).pipe(map(contents => {
|
|
854
|
+
this.sampleFiles = metadata.files.map(f => ({
|
|
855
|
+
name: f.name,
|
|
856
|
+
type: f.type,
|
|
857
|
+
content: this.filterOutExcludeContent(contents[f.name]),
|
|
858
|
+
label: f.classType || f.className || this.getFileLabel(f.name, f.type),
|
|
859
|
+
}));
|
|
860
|
+
// Keep backward compat
|
|
861
|
+
const tsFile = this.sampleFiles.find(f => f.name === 'component.ts');
|
|
862
|
+
const htmlFile = this.sampleFiles.find(f => f.name === 'component.html');
|
|
863
|
+
this.tsContent = tsFile?.content ?? '';
|
|
864
|
+
this.htmlContent = htmlFile?.content ?? '';
|
|
865
|
+
this.isCodeLoaded = true;
|
|
866
|
+
this.isCodeLoading = false;
|
|
867
|
+
return { typescript: this.tsContent, html: this.htmlContent };
|
|
868
|
+
}));
|
|
869
|
+
}), catchError((error) => {
|
|
870
|
+
this.growlService.growlError(`Issue while fetching : ${error.url} : ${error.status}-${error.statusText}`);
|
|
871
|
+
this.isCodeLoading = false;
|
|
872
|
+
return new Observable((subscriber) => {
|
|
873
|
+
subscriber.error(error);
|
|
874
|
+
});
|
|
875
|
+
}));
|
|
876
|
+
}
|
|
877
|
+
getSamplesPath() {
|
|
965
878
|
const url = window.location;
|
|
966
879
|
const pathName = url.pathname;
|
|
967
880
|
const pathNameArray = pathName.split('/');
|
|
@@ -983,36 +896,21 @@ class DocSampleComponent {
|
|
|
983
896
|
}
|
|
984
897
|
samplePathArray = samplePathArray.reverse();
|
|
985
898
|
samplePathArray.push('samples');
|
|
986
|
-
samplePathArray.push(this.id);
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
this.isCodeLoading = false;
|
|
999
|
-
return { typescript: responses.typescript, html: responses.html };
|
|
1000
|
-
}), catchError((error) => {
|
|
1001
|
-
this.growlService.growlError(`Issue while fetching : ${error.url} : ${error.status}-${error.statusText}`);
|
|
1002
|
-
return new Observable((subscriber) => {
|
|
1003
|
-
try {
|
|
1004
|
-
subscriber.error(error);
|
|
1005
|
-
}
|
|
1006
|
-
catch (err) {
|
|
1007
|
-
subscriber.error(error);
|
|
1008
|
-
}
|
|
1009
|
-
});
|
|
1010
|
-
}));
|
|
899
|
+
samplePathArray.push(this.id());
|
|
900
|
+
return `assets/samples/${samplePathArray.join('/')}`;
|
|
901
|
+
}
|
|
902
|
+
getFileLabel(name, type) {
|
|
903
|
+
const labels = { typescript: 'Typescript', html: 'HTML', scss: 'SCSS', css: 'CSS' };
|
|
904
|
+
return name === 'component.ts' ? 'Typescript'
|
|
905
|
+
: name === 'component.html' ? 'HTML'
|
|
906
|
+
: `${name} (${labels[type] || type})`;
|
|
907
|
+
}
|
|
908
|
+
getCodeLanguage(type) {
|
|
909
|
+
const languages = { typescript: 'language-javascript', html: 'language-markup', scss: 'language-css', css: 'language-css' };
|
|
910
|
+
return languages[type] || 'language-markup';
|
|
1011
911
|
}
|
|
1012
912
|
/**
|
|
1013
|
-
* filter out the content between the pattern below in both html and ts files.
|
|
1014
|
-
* exclude some part of the code from being rendered in the code sample or stackblitz but we still want to keep
|
|
1015
|
-
* it in the actual file for other purposes (e.g. for testing, or for rendering in the playground but not in the code sample)
|
|
913
|
+
* filter out the content between the pattern below in both html and ts files.
|
|
1016
914
|
* @param content the content of the file to filter out the exclude content
|
|
1017
915
|
*/
|
|
1018
916
|
filterOutExcludeContent(content) {
|
|
@@ -1020,98 +918,99 @@ class DocSampleComponent {
|
|
|
1020
918
|
const patternTS = /\n?\/\/\s*EXCLUDE_START[\s\S]*?\/\/\s*EXCLUDE_END\n?/g;
|
|
1021
919
|
return content.replace(patternHtml, '').replace(patternTS, '');
|
|
1022
920
|
}
|
|
1023
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1024
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
921
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
922
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocSampleComponent, isStandalone: true, selector: "eui-showcase-doc-sample", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, renderPlayground: { classPropertyName: "renderPlayground", publicName: "renderPlayground", isSignal: true, isRequired: false, transformFunction: null }, isCodeButtonVisible: { classPropertyName: "isCodeButtonVisible", publicName: "isCodeButtonVisible", isSignal: true, isRequired: false, transformFunction: null }, isInnerSection: { classPropertyName: "isInnerSection", publicName: "isInnerSection", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-showcase-doc-sample" }, ngImport: i0, template: "<div class=\"doc-sample-title\">\n <div class=\"doc-sample-title__label\" [class.doc-sample-title__label--inner]=\"isInnerSection()\">\n {{ label() || id() }}\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiPrimary\n euiSizeS\n aria-label=\"Click to copy link url to keyboard\"\n (click)=\"copyCurrentUrlToClipboard(id())\"\n class=\"doc-sample-title__link\"\n tabindex=\"-1\">\n <eui-icon-svg icon=\"eui-link\" size=\"l\" fillColor=\"secondary\" />\n </button>\n </div>\n @if (shouldRenderPlayground()) {\n <div class=\"doc-sample-title__items eui-u-mr-s\">\n @if (isCodeButtonVisible()) {\n <button\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeXS\n (click)=\"onStackblitzOpen()\">\n <span euiLabel>Stackblitz</span>\n <eui-icon-svg icon=\"eui-flash\" />\n </button>\n }\n </div>\n }\n <div class=\"doc-sample-title__items\">\n @if (isCodeButtonVisible()) {\n <button\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeXS\n (click)=\"onToggleCode()\"\n [euiDisabled]=\"isCodeLoading\">\n @if (isCodeLoading) {\n <eui-icon-svg isLoading />\n }\n @if (!isCodeExpanded) {\n <span euiLabel>Code</span>\n }\n @if (isCodeExpanded) {\n <span euiLabel>Hide Code</span>\n }\n <eui-icon-svg icon=\"eui-code\" />\n </button>\n }\n </div>\n</div>\n\n@if(isCodeExpanded) {\n <eui-card euiNoContentPadding class=\"eui-u-mb-m\">\n <eui-card-content>\n <eui-tabs (tabActivate)=\"onTabActivate($event)\">\n @for (file of sampleFiles; track file.name) {\n <eui-tab>\n <eui-tab-header>\n <eui-label>{{ file.label }}</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code [class]=\"getCodeLanguage(file.type)\" euiCode>{{ file.type === 'typescript' ? filterOutModuleAndImports(file.content) : file.content }}</code></pre>\n </eui-tab-body>\n </eui-tab>\n }\n </eui-tabs>\n </eui-card-content>\n </eui-card>\n}\n\n<ng-content />\n", styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-5xl);margin-top:var(--eui-s-10xl);width:100%}.eui-showcase-doc-sample:first-child{margin-top:var(--eui-s-xl)}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-s);border-bottom:1px solid var(--eui-c-divider)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-s-xl);width:100%;font:var(--eui-f-xl-semi-bold)}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-text-light);font:var(--eui-f-l)}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-s-m)}.eui-showcase-doc-sample .doc-sample-section-title,.eui-showcase-doc-sample h6.section-title{border-bottom:none;margin:var(--eui-s-9xl) 0 var(--eui-s-xs) 0;width:auto;display:table;color:var(--eui-c-info);font:var(--eui-f-l)!important}.eui-showcase-doc-sample .doc-sample-section-title:first-child,.eui-showcase-doc-sample h6.section-title:first-child{margin-top:var(--eui-s-m)!important}.eui-showcase-doc-sample .doc-sample-section-subtitle{border-bottom:none;letter-spacing:-.25px;margin:var(--eui-s-xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-primary);font:var(--eui-f)!important}\n"], dependencies: [{ 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.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i2$3.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i3$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1025
923
|
}
|
|
1026
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
924
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSampleComponent, decorators: [{
|
|
1027
925
|
type: Component,
|
|
1028
|
-
args: [{ selector: 'eui-showcase-doc-sample', encapsulation: ViewEncapsulation.None, imports: [
|
|
1029
|
-
CommonModule,
|
|
926
|
+
args: [{ selector: 'eui-showcase-doc-sample', encapsulation: ViewEncapsulation.None, host: { class: 'eui-showcase-doc-sample' }, imports: [
|
|
1030
927
|
...EUI_TABS,
|
|
1031
928
|
...EUI_LABEL,
|
|
1032
929
|
...EUI_CARD,
|
|
1033
930
|
...EUI_ICON,
|
|
1034
931
|
...EUI_BUTTON,
|
|
1035
932
|
EuiCodeHighlighterDirective,
|
|
1036
|
-
], template: "<div class=\"doc-sample-title\">\n <div class=\"doc-sample-title__label\" [class.doc-sample-title__label--inner]=\"isInnerSection\">\n {{ label }}\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiPrimary\n euiSizeS\n aria-label=\"Click to copy link url to keyboard\"\n (click)=\"copyCurrentUrlToClipboard(id)\"\n class=\"doc-sample-title__link\"\n tabindex=\"-1\">\n <eui-icon-svg icon=\"eui-link\" size=\"l\" fillColor=\"secondary\" />\n </button>\n </div>\n
|
|
1037
|
-
}], propDecorators: { id: [{
|
|
1038
|
-
type: Input
|
|
1039
|
-
}], label: [{
|
|
1040
|
-
type: Input
|
|
1041
|
-
}], category: [{
|
|
1042
|
-
type: Input
|
|
1043
|
-
}], description: [{
|
|
1044
|
-
type: Input
|
|
1045
|
-
}], defaultValue: [{
|
|
1046
|
-
type: Input
|
|
1047
|
-
}], styleClass: [{
|
|
1048
|
-
type: Input
|
|
1049
|
-
}], renderPlayground: [{
|
|
1050
|
-
type: Input,
|
|
1051
|
-
args: [{ transform: booleanAttribute }]
|
|
1052
|
-
}], isCodeButtonVisible: [{
|
|
1053
|
-
type: Input,
|
|
1054
|
-
args: [{ transform: booleanAttribute }]
|
|
1055
|
-
}], isInnerSection: [{
|
|
1056
|
-
type: Input,
|
|
1057
|
-
args: [{ transform: booleanAttribute }]
|
|
1058
|
-
}], classes: [{
|
|
1059
|
-
type: HostBinding,
|
|
1060
|
-
args: ['class']
|
|
1061
|
-
}] } });
|
|
933
|
+
], template: "<div class=\"doc-sample-title\">\n <div class=\"doc-sample-title__label\" [class.doc-sample-title__label--inner]=\"isInnerSection()\">\n {{ label() || id() }}\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiPrimary\n euiSizeS\n aria-label=\"Click to copy link url to keyboard\"\n (click)=\"copyCurrentUrlToClipboard(id())\"\n class=\"doc-sample-title__link\"\n tabindex=\"-1\">\n <eui-icon-svg icon=\"eui-link\" size=\"l\" fillColor=\"secondary\" />\n </button>\n </div>\n @if (shouldRenderPlayground()) {\n <div class=\"doc-sample-title__items eui-u-mr-s\">\n @if (isCodeButtonVisible()) {\n <button\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeXS\n (click)=\"onStackblitzOpen()\">\n <span euiLabel>Stackblitz</span>\n <eui-icon-svg icon=\"eui-flash\" />\n </button>\n }\n </div>\n }\n <div class=\"doc-sample-title__items\">\n @if (isCodeButtonVisible()) {\n <button\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeXS\n (click)=\"onToggleCode()\"\n [euiDisabled]=\"isCodeLoading\">\n @if (isCodeLoading) {\n <eui-icon-svg isLoading />\n }\n @if (!isCodeExpanded) {\n <span euiLabel>Code</span>\n }\n @if (isCodeExpanded) {\n <span euiLabel>Hide Code</span>\n }\n <eui-icon-svg icon=\"eui-code\" />\n </button>\n }\n </div>\n</div>\n\n@if(isCodeExpanded) {\n <eui-card euiNoContentPadding class=\"eui-u-mb-m\">\n <eui-card-content>\n <eui-tabs (tabActivate)=\"onTabActivate($event)\">\n @for (file of sampleFiles; track file.name) {\n <eui-tab>\n <eui-tab-header>\n <eui-label>{{ file.label }}</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code [class]=\"getCodeLanguage(file.type)\" euiCode>{{ file.type === 'typescript' ? filterOutModuleAndImports(file.content) : file.content }}</code></pre>\n </eui-tab-body>\n </eui-tab>\n }\n </eui-tabs>\n </eui-card-content>\n </eui-card>\n}\n\n<ng-content />\n", styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-5xl);margin-top:var(--eui-s-10xl);width:100%}.eui-showcase-doc-sample:first-child{margin-top:var(--eui-s-xl)}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-s);border-bottom:1px solid var(--eui-c-divider)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-s-xl);width:100%;font:var(--eui-f-xl-semi-bold)}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-text-light);font:var(--eui-f-l)}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-s-m)}.eui-showcase-doc-sample .doc-sample-section-title,.eui-showcase-doc-sample h6.section-title{border-bottom:none;margin:var(--eui-s-9xl) 0 var(--eui-s-xs) 0;width:auto;display:table;color:var(--eui-c-info);font:var(--eui-f-l)!important}.eui-showcase-doc-sample .doc-sample-section-title:first-child,.eui-showcase-doc-sample h6.section-title:first-child{margin-top:var(--eui-s-m)!important}.eui-showcase-doc-sample .doc-sample-section-subtitle{border-bottom:none;letter-spacing:-.25px;margin:var(--eui-s-xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-primary);font:var(--eui-f)!important}\n"] }]
|
|
934
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], renderPlayground: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderPlayground", required: false }] }], isCodeButtonVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCodeButtonVisible", required: false }] }], isInnerSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInnerSection", required: false }] }] } });
|
|
1062
935
|
|
|
1063
936
|
class DocSectionComponent {
|
|
1064
937
|
constructor() {
|
|
1065
|
-
this.
|
|
1066
|
-
|
|
1067
|
-
this.label = ''
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
}
|
|
1075
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DocSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1076
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: DocSectionComponent, isStandalone: true, selector: "eui-showcase-doc-section", inputs: { id: "id", label: "label", styleClass: "styleClass" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<div id=\"sections\" class=\"doc-section-title\">{{label}}</div>\n<!-- <h4 id=\"sections\" class=\"eui-u-font-bold eui-u-color-info eui-u-text-h4 mb-3\">{{ label }}</h4> -->\n\n<ng-content></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"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
938
|
+
this.id = input('', /* @ts-ignore */
|
|
939
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
940
|
+
this.label = input('', /* @ts-ignore */
|
|
941
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
942
|
+
this.styleClass = input('', /* @ts-ignore */
|
|
943
|
+
...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
|
|
944
|
+
}
|
|
945
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
946
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: DocSectionComponent, isStandalone: true, selector: "eui-showcase-doc-section", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-showcase-doc-section" }, ngImport: i0, 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"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1077
947
|
}
|
|
1078
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
948
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionComponent, decorators: [{
|
|
1079
949
|
type: Component,
|
|
1080
|
-
args: [{ selector: 'eui-showcase-doc-section', encapsulation: ViewEncapsulation.None,
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
}], id: [{
|
|
1085
|
-
type: Input
|
|
1086
|
-
}], label: [{
|
|
1087
|
-
type: Input
|
|
1088
|
-
}], styleClass: [{
|
|
1089
|
-
type: Input
|
|
1090
|
-
}] } });
|
|
950
|
+
args: [{ selector: 'eui-showcase-doc-section', encapsulation: ViewEncapsulation.None, host: {
|
|
951
|
+
class: 'eui-showcase-doc-section',
|
|
952
|
+
}, 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
|
+
}], 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 }] }] } });
|
|
1091
954
|
|
|
1092
955
|
class DocPageComponent {
|
|
1093
956
|
constructor() {
|
|
1094
|
-
this.
|
|
1095
|
-
|
|
1096
|
-
this.
|
|
1097
|
-
|
|
1098
|
-
this.
|
|
1099
|
-
|
|
1100
|
-
this.
|
|
1101
|
-
this.
|
|
1102
|
-
this.
|
|
957
|
+
this.id = input(undefined, /* @ts-ignore */
|
|
958
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
959
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
960
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
961
|
+
this.subLabel = input(undefined, /* @ts-ignore */
|
|
962
|
+
...(ngDevMode ? [{ debugName: "subLabel" }] : /* istanbul ignore next */ []));
|
|
963
|
+
this.isNotReadyInput = input(false, { ...(ngDevMode ? { debugName: "isNotReadyInput" } : /* istanbul ignore next */ {}), alias: 'isNotReady' });
|
|
964
|
+
this.isDeprecatedInput = input(false, { ...(ngDevMode ? { debugName: "isDeprecatedInput" } : /* istanbul ignore next */ {}), alias: 'isDeprecated' });
|
|
965
|
+
this.isLegacyInput = input(false, { ...(ngDevMode ? { debugName: "isLegacyInput" } : /* istanbul ignore next */ {}), alias: 'isLegacy' });
|
|
966
|
+
this.codeFolder = input(undefined, /* @ts-ignore */
|
|
967
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
968
|
+
this.showcase = input('ux', /* @ts-ignore */
|
|
969
|
+
...(ngDevMode ? [{ debugName: "showcase" }] : /* istanbul ignore next */ []));
|
|
970
|
+
this.isNavigationVisible = model(true, /* @ts-ignore */
|
|
971
|
+
...(ngDevMode ? [{ debugName: "isNavigationVisible" }] : /* istanbul ignore next */ []));
|
|
972
|
+
this.hasApi = input(true, /* @ts-ignore */
|
|
973
|
+
...(ngDevMode ? [{ debugName: "hasApi" }] : /* istanbul ignore next */ []));
|
|
974
|
+
this.hasA11y = input(true, /* @ts-ignore */
|
|
975
|
+
...(ngDevMode ? [{ debugName: "hasA11y" }] : /* istanbul ignore next */ []));
|
|
976
|
+
this.customApiUrl = input(null, /* @ts-ignore */
|
|
977
|
+
...(ngDevMode ? [{ debugName: "customApiUrl" }] : /* istanbul ignore next */ []));
|
|
978
|
+
// Writable signals for properties that are both input-driven and internally mutated
|
|
979
|
+
this.isNotReady = signal(false, /* @ts-ignore */
|
|
980
|
+
...(ngDevMode ? [{ debugName: "isNotReady" }] : /* istanbul ignore next */ []));
|
|
981
|
+
this.isDeprecated = signal(false, /* @ts-ignore */
|
|
982
|
+
...(ngDevMode ? [{ debugName: "isDeprecated" }] : /* istanbul ignore next */ []));
|
|
983
|
+
this.isLegacy = signal(false, /* @ts-ignore */
|
|
984
|
+
...(ngDevMode ? [{ debugName: "isLegacy" }] : /* istanbul ignore next */ []));
|
|
1103
985
|
this.isLoading = true;
|
|
1104
986
|
this.isNavClicked = true;
|
|
1105
987
|
this.hasCategories = false;
|
|
1106
988
|
this.categories = [];
|
|
989
|
+
this.scrollHandler = null;
|
|
990
|
+
this.scrollContainer = null;
|
|
991
|
+
this.isDestroyed = false;
|
|
992
|
+
this.samples = contentChildren(DocSampleComponent, { ...(ngDevMode ? { debugName: "samples" } : /* istanbul ignore next */ {}), descendants: true });
|
|
993
|
+
this.sections = contentChildren(DocSectionComponent, { ...(ngDevMode ? { debugName: "sections" } : /* istanbul ignore next */ {}), descendants: true });
|
|
994
|
+
this.pageOverviewContent = contentChildren(forwardRef(() => DocPageOverviewContentDirective), /* @ts-ignore */
|
|
995
|
+
...(ngDevMode ? [{ debugName: "pageOverviewContent" }] : /* istanbul ignore next */ []));
|
|
996
|
+
this.pageOverviewDefaultContent = contentChildren(forwardRef(() => DocPageOverviewDefaultContentDirective), /* @ts-ignore */
|
|
997
|
+
...(ngDevMode ? [{ debugName: "pageOverviewDefaultContent" }] : /* istanbul ignore next */ []));
|
|
998
|
+
this.pageSamplesContent = contentChildren(forwardRef(() => DocPageSamplesContentDirective), /* @ts-ignore */
|
|
999
|
+
...(ngDevMode ? [{ debugName: "pageSamplesContent" }] : /* istanbul ignore next */ []));
|
|
1000
|
+
this.pageSectionsContent = contentChildren(forwardRef(() => DocPageSectionsContentDirective), /* @ts-ignore */
|
|
1001
|
+
...(ngDevMode ? [{ debugName: "pageSectionsContent" }] : /* istanbul ignore next */ []));
|
|
1002
|
+
this.pageInteractiveContent = contentChildren(forwardRef(() => DocPageInteractiveContentDirective), /* @ts-ignore */
|
|
1003
|
+
...(ngDevMode ? [{ debugName: "pageInteractiveContent" }] : /* istanbul ignore next */ []));
|
|
1004
|
+
this.pageAccessibilityContent = contentChildren(forwardRef(() => DocPageAccessibilityContentDirective), /* @ts-ignore */
|
|
1005
|
+
...(ngDevMode ? [{ debugName: "pageAccessibilityContent" }] : /* istanbul ignore next */ []));
|
|
1006
|
+
this.pageApiContent = contentChildren(forwardRef(() => DocPageApiContentDirective), /* @ts-ignore */
|
|
1007
|
+
...(ngDevMode ? [{ debugName: "pageApiContent" }] : /* istanbul ignore next */ []));
|
|
1008
|
+
this.pageThemingContent = contentChildren(forwardRef(() => DocPageThemingContentDirective), /* @ts-ignore */
|
|
1009
|
+
...(ngDevMode ? [{ debugName: "pageThemingContent" }] : /* istanbul ignore next */ []));
|
|
1010
|
+
this.tabsContent = viewChild('tabsContent', /* @ts-ignore */
|
|
1011
|
+
...(ngDevMode ? [{ debugName: "tabsContent" }] : /* istanbul ignore next */ []));
|
|
1107
1012
|
this.sanitizer = inject(DomSanitizer);
|
|
1108
|
-
this.
|
|
1109
|
-
{ index: 0, id: 'samples' },
|
|
1110
|
-
{ index: 1, id: 'api' },
|
|
1111
|
-
{ index: 2, id: 'a11y' },
|
|
1112
|
-
{ index: 3, id: 'theming' },
|
|
1113
|
-
{ index: 4, id: 'advanced' },
|
|
1114
|
-
];
|
|
1013
|
+
this.scrollObserver = null;
|
|
1115
1014
|
this.CATEGORIES_DEF = [
|
|
1116
1015
|
{ index: 0, id: 'Base' },
|
|
1117
1016
|
{ index: 10, id: 'Variants' },
|
|
@@ -1127,43 +1026,64 @@ class DocPageComponent {
|
|
|
1127
1026
|
this.router = inject(Router);
|
|
1128
1027
|
this.route = inject(ActivatedRoute);
|
|
1129
1028
|
this.asService = inject(EuiAppShellService);
|
|
1029
|
+
this.cdr = inject(ChangeDetectorRef);
|
|
1030
|
+
this.ngZone = inject(NgZone);
|
|
1031
|
+
this.destroyRef = inject(DestroyRef);
|
|
1032
|
+
this.injector = inject(Injector);
|
|
1130
1033
|
}
|
|
1131
1034
|
ngOnInit() {
|
|
1132
|
-
|
|
1035
|
+
// Sync input signals to writable signals
|
|
1036
|
+
if (this.isNotReadyInput())
|
|
1037
|
+
this.isNotReady.set(true);
|
|
1038
|
+
if (this.isDeprecatedInput())
|
|
1039
|
+
this.isDeprecated.set(true);
|
|
1040
|
+
if (this.isLegacyInput())
|
|
1041
|
+
this.isLegacy.set(true);
|
|
1042
|
+
this.destroyRef.onDestroy(() => this.isDestroyed = true);
|
|
1043
|
+
afterNextRender(() => {
|
|
1133
1044
|
this.asService.isBlockDocumentActive = true;
|
|
1134
|
-
});
|
|
1045
|
+
}, { injector: this.injector });
|
|
1135
1046
|
this.appMetadata = this.asService.state.appMetadata;
|
|
1136
|
-
|
|
1137
|
-
|
|
1047
|
+
const id = this.id();
|
|
1048
|
+
if (id && !this.label()) {
|
|
1049
|
+
// label is a signal, but it's an input - we can't mutate it.
|
|
1050
|
+
// The template already handles id() as fallback via label() || id()
|
|
1138
1051
|
}
|
|
1139
1052
|
this.fragmentId = this.route.snapshot.fragment;
|
|
1140
1053
|
}
|
|
1141
1054
|
ngAfterViewInit() {
|
|
1142
|
-
//
|
|
1055
|
+
// Getting API url
|
|
1143
1056
|
try {
|
|
1144
1057
|
this.apiUrl = this._getApiUrl();
|
|
1145
|
-
|
|
1058
|
+
afterNextRender(() => {
|
|
1146
1059
|
this.apiUrlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.apiUrl);
|
|
1147
|
-
});
|
|
1060
|
+
}, { injector: this.injector });
|
|
1148
1061
|
}
|
|
1149
1062
|
catch (e) {
|
|
1150
|
-
|
|
1063
|
+
// API URL construction failed - non-critical
|
|
1151
1064
|
}
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
const sampleTabIndex = 0;
|
|
1065
|
+
afterNextRender(() => {
|
|
1066
|
+
let tab;
|
|
1155
1067
|
let tabIndex;
|
|
1156
|
-
|
|
1157
|
-
|
|
1068
|
+
const sampleTabIndex = 0;
|
|
1069
|
+
if (this.tabsContent()) {
|
|
1070
|
+
this.tabsContent()?._tabs().forEach((tabInstance, index) => {
|
|
1071
|
+
if (tabInstance.id() === this.fragmentId) {
|
|
1072
|
+
tabIndex = index;
|
|
1073
|
+
tab = tabInstance;
|
|
1074
|
+
}
|
|
1075
|
+
});
|
|
1158
1076
|
}
|
|
1159
|
-
|
|
1160
|
-
tabIndex =
|
|
1077
|
+
if (!tab && !tabIndex) {
|
|
1078
|
+
tabIndex = sampleTabIndex;
|
|
1161
1079
|
}
|
|
1162
1080
|
// constructing categories, if at least one set, if not backward compat with old display
|
|
1163
1081
|
const categoriesJson = {};
|
|
1164
|
-
this.samples.forEach((s) => {
|
|
1082
|
+
this.samples().forEach((s) => {
|
|
1165
1083
|
// "Default" or "_default" sample are always put first in the nav list
|
|
1166
|
-
|
|
1084
|
+
const id = s.id();
|
|
1085
|
+
const category = s.category();
|
|
1086
|
+
if (!category && id !== '_default' && id !== 'Default' && id !== 'default') {
|
|
1167
1087
|
if (!categoriesJson['others']) {
|
|
1168
1088
|
categoriesJson['others'] = [];
|
|
1169
1089
|
categoriesJson['others'].push(s);
|
|
@@ -1173,7 +1093,7 @@ class DocPageComponent {
|
|
|
1173
1093
|
}
|
|
1174
1094
|
}
|
|
1175
1095
|
else {
|
|
1176
|
-
if (
|
|
1096
|
+
if (id === '_default' || id === 'Default' || id === 'default') {
|
|
1177
1097
|
if (!categoriesJson['Base']) {
|
|
1178
1098
|
categoriesJson['Base'] = [];
|
|
1179
1099
|
categoriesJson['Base'].push(s);
|
|
@@ -1184,12 +1104,12 @@ class DocPageComponent {
|
|
|
1184
1104
|
}
|
|
1185
1105
|
else {
|
|
1186
1106
|
this.hasCategories = true;
|
|
1187
|
-
if (!categoriesJson[
|
|
1188
|
-
categoriesJson[
|
|
1189
|
-
categoriesJson[
|
|
1107
|
+
if (!categoriesJson[category]) {
|
|
1108
|
+
categoriesJson[category] = [];
|
|
1109
|
+
categoriesJson[category].push(s);
|
|
1190
1110
|
}
|
|
1191
1111
|
else {
|
|
1192
|
-
categoriesJson[
|
|
1112
|
+
categoriesJson[category].push(s);
|
|
1193
1113
|
}
|
|
1194
1114
|
}
|
|
1195
1115
|
}
|
|
@@ -1201,14 +1121,14 @@ class DocPageComponent {
|
|
|
1201
1121
|
const existingCategory = this.categories.find(cat => cat.name.toLowerCase() === normalizedKey);
|
|
1202
1122
|
if (existingCategory) {
|
|
1203
1123
|
existingCategory.samples = [...existingCategory.samples, ...categoriesJson[c]].sort((a, b) => {
|
|
1204
|
-
return a.label.localeCompare(b.label);
|
|
1124
|
+
return a.label().localeCompare(b.label());
|
|
1205
1125
|
});
|
|
1206
1126
|
}
|
|
1207
1127
|
else {
|
|
1208
1128
|
this.categories.push({
|
|
1209
1129
|
name: c,
|
|
1210
1130
|
samples: categoriesJson[c].sort((a, b) => {
|
|
1211
|
-
return a.label.localeCompare(b.label);
|
|
1131
|
+
return a.label().localeCompare(b.label());
|
|
1212
1132
|
}),
|
|
1213
1133
|
});
|
|
1214
1134
|
}
|
|
@@ -1222,13 +1142,35 @@ class DocPageComponent {
|
|
|
1222
1142
|
this._scrollToFragment(this.fragmentId, tabIndex, true, true);
|
|
1223
1143
|
this.asService.isBlockDocumentActive = false;
|
|
1224
1144
|
this.isLoading = false;
|
|
1145
|
+
this.isNavClicked = false;
|
|
1146
|
+
// setTimeout(() => this.setupScrollSpy(), 500);
|
|
1225
1147
|
}, 1);
|
|
1226
|
-
});
|
|
1148
|
+
}, { injector: this.injector });
|
|
1227
1149
|
}
|
|
1228
1150
|
getCategoryIndex(name) {
|
|
1229
1151
|
const category = this.CATEGORIES_DEF.find(cat => cat.id.toLowerCase() === name.toLowerCase());
|
|
1230
1152
|
return category ? category.index : this.CATEGORIES_DEF.find(cat => cat.id === 'free-category').index;
|
|
1231
1153
|
}
|
|
1154
|
+
ngOnDestroy() {
|
|
1155
|
+
if (this.scrollObserver) {
|
|
1156
|
+
this.scrollObserver.disconnect();
|
|
1157
|
+
this.scrollObserver = null;
|
|
1158
|
+
}
|
|
1159
|
+
if (this.scrollHandler && this.scrollContainer) {
|
|
1160
|
+
this.scrollContainer.removeEventListener('scroll', this.scrollHandler);
|
|
1161
|
+
}
|
|
1162
|
+
}
|
|
1163
|
+
onTabNavClick(tabId) {
|
|
1164
|
+
let tabIndex;
|
|
1165
|
+
this.tabsContent()?._tabs().forEach((tabInstance, index) => {
|
|
1166
|
+
if (tabInstance.id() === tabId) {
|
|
1167
|
+
tabIndex = index;
|
|
1168
|
+
}
|
|
1169
|
+
});
|
|
1170
|
+
console.log(tabId, tabIndex);
|
|
1171
|
+
this.onNavClick(tabId, tabIndex);
|
|
1172
|
+
this._scrollNavToSelectedItem();
|
|
1173
|
+
}
|
|
1232
1174
|
onNavClick(fragmentId, tabIndex) {
|
|
1233
1175
|
this.fragmentId = fragmentId;
|
|
1234
1176
|
this.isNavClicked = true;
|
|
@@ -1236,23 +1178,62 @@ class DocPageComponent {
|
|
|
1236
1178
|
}
|
|
1237
1179
|
onTabActivate(event) {
|
|
1238
1180
|
if (!this.isLoading && !this.isNavClicked) {
|
|
1239
|
-
const tabId =
|
|
1240
|
-
this._scrollToFragment(tabId, event.index, false, false);
|
|
1181
|
+
const tabId = event.tab.id;
|
|
1182
|
+
this._scrollToFragment(tabId(), event.index, false, false);
|
|
1241
1183
|
}
|
|
1242
1184
|
this.isNavClicked = false;
|
|
1185
|
+
this._scrollNavToSelectedItem();
|
|
1186
|
+
}
|
|
1187
|
+
_buildCategories() {
|
|
1188
|
+
const categoriesJson = {};
|
|
1189
|
+
this.samples().forEach((s) => {
|
|
1190
|
+
const id = s.id();
|
|
1191
|
+
const category = s.category();
|
|
1192
|
+
const isDefault = id === '_default' || id === 'Default' || id === 'default';
|
|
1193
|
+
if (isDefault) {
|
|
1194
|
+
(categoriesJson['Base'] ??= []).push(s);
|
|
1195
|
+
}
|
|
1196
|
+
else if (category) {
|
|
1197
|
+
this.hasCategories = true;
|
|
1198
|
+
(categoriesJson[category] ??= []).push(s);
|
|
1199
|
+
}
|
|
1200
|
+
else {
|
|
1201
|
+
(categoriesJson['others'] ??= []).push(s);
|
|
1202
|
+
}
|
|
1203
|
+
});
|
|
1204
|
+
Object.keys(categoriesJson).forEach((c) => {
|
|
1205
|
+
const normalizedKey = c.toLowerCase();
|
|
1206
|
+
const existingCategory = this.categories.find(cat => cat.name.toLowerCase() === normalizedKey);
|
|
1207
|
+
if (existingCategory) {
|
|
1208
|
+
existingCategory.samples = [...existingCategory.samples, ...categoriesJson[c]].sort((a, b) => a.label().localeCompare(b.label()));
|
|
1209
|
+
}
|
|
1210
|
+
else {
|
|
1211
|
+
this.categories.push({
|
|
1212
|
+
name: c,
|
|
1213
|
+
samples: categoriesJson[c].sort((a, b) => a.label().localeCompare(b.label())),
|
|
1214
|
+
});
|
|
1215
|
+
}
|
|
1216
|
+
});
|
|
1217
|
+
this.categories.sort((a, b) => this.getCategoryIndex(a.name) - this.getCategoryIndex(b.name));
|
|
1218
|
+
const othersIndex = this.categories.findIndex(v => v.name === 'others');
|
|
1219
|
+
if (othersIndex > -1) {
|
|
1220
|
+
this.categories.push(this.categories.splice(othersIndex, 1)[0]);
|
|
1221
|
+
}
|
|
1243
1222
|
}
|
|
1244
1223
|
_scrollToFragment(fragmentId, tabIndex, init, changeTab) {
|
|
1245
1224
|
if (init) {
|
|
1246
|
-
|
|
1247
|
-
|
|
1225
|
+
const tabsContent = this.tabsContent();
|
|
1226
|
+
if (tabsContent) {
|
|
1227
|
+
tabsContent.activateTab(tabIndex);
|
|
1248
1228
|
}
|
|
1249
1229
|
}
|
|
1250
1230
|
else {
|
|
1251
1231
|
if (changeTab) {
|
|
1252
1232
|
this.router.onSameUrlNavigation = 'reload';
|
|
1253
1233
|
this.router.navigate(['.'], { relativeTo: this.route, fragment: fragmentId }).then(() => {
|
|
1254
|
-
|
|
1255
|
-
|
|
1234
|
+
const tabsContent = this.tabsContent();
|
|
1235
|
+
if (tabsContent) {
|
|
1236
|
+
tabsContent.activateTab(tabIndex);
|
|
1256
1237
|
}
|
|
1257
1238
|
});
|
|
1258
1239
|
}
|
|
@@ -1270,6 +1251,44 @@ class DocPageComponent {
|
|
|
1270
1251
|
});
|
|
1271
1252
|
}
|
|
1272
1253
|
}
|
|
1254
|
+
_scrollNavToSelectedItem() {
|
|
1255
|
+
if (!this.navContent?.nativeElement) {
|
|
1256
|
+
return;
|
|
1257
|
+
}
|
|
1258
|
+
// Use requestAnimationFrame to ensure DOM has updated after tab change,
|
|
1259
|
+
// avoiding race conditions with eui-menu's scrollToItem
|
|
1260
|
+
requestAnimationFrame(() => {
|
|
1261
|
+
const container = this.navContent.nativeElement;
|
|
1262
|
+
const selectedItem = container.querySelector('.doc-page-navigation-item--selected');
|
|
1263
|
+
if (selectedItem) {
|
|
1264
|
+
// Check if the selected item is visible within its scroll container
|
|
1265
|
+
const scrollParent = this._getScrollParent(container);
|
|
1266
|
+
if (scrollParent) {
|
|
1267
|
+
const itemRect = selectedItem.getBoundingClientRect();
|
|
1268
|
+
const parentRect = scrollParent.getBoundingClientRect();
|
|
1269
|
+
const isVisible = itemRect.top >= parentRect.top && itemRect.bottom <= parentRect.bottom;
|
|
1270
|
+
if (!isVisible) {
|
|
1271
|
+
selectedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
1272
|
+
}
|
|
1273
|
+
}
|
|
1274
|
+
else {
|
|
1275
|
+
selectedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
1276
|
+
}
|
|
1277
|
+
}
|
|
1278
|
+
});
|
|
1279
|
+
}
|
|
1280
|
+
_getScrollParent(element) {
|
|
1281
|
+
let parent = element.parentElement;
|
|
1282
|
+
while (parent) {
|
|
1283
|
+
const style = getComputedStyle(parent);
|
|
1284
|
+
if (style.overflow === 'auto' || style.overflow === 'scroll' ||
|
|
1285
|
+
style.overflowY === 'auto' || style.overflowY === 'scroll') {
|
|
1286
|
+
return parent;
|
|
1287
|
+
}
|
|
1288
|
+
parent = parent.parentElement;
|
|
1289
|
+
}
|
|
1290
|
+
return null;
|
|
1291
|
+
}
|
|
1273
1292
|
_getComponentStatus(id) {
|
|
1274
1293
|
const flatten = (links) => links
|
|
1275
1294
|
? links.reduce((result, item) => [
|
|
@@ -1288,21 +1307,9 @@ class DocPageComponent {
|
|
|
1288
1307
|
], [])
|
|
1289
1308
|
: [];
|
|
1290
1309
|
const flatLinks = flatten(this.asService.state.sidebarLinks);
|
|
1291
|
-
|
|
1292
|
-
// console.log('from get component status');
|
|
1293
|
-
// console.log(id);
|
|
1294
|
-
// console.log(flatLinks);
|
|
1295
|
-
// console.log(idBasedCmp);
|
|
1296
|
-
if (idBasedCmp) {
|
|
1297
|
-
return idBasedCmp;
|
|
1298
|
-
}
|
|
1299
|
-
else {
|
|
1300
|
-
const alternateIdBasedCmp = flatLinks.filter((item) => item.alternateId === id)[0];
|
|
1301
|
-
return alternateIdBasedCmp;
|
|
1302
|
-
}
|
|
1310
|
+
return flatLinks.find((item) => item.id === id) ?? flatLinks.find((item) => item.alternateId === id);
|
|
1303
1311
|
}
|
|
1304
1312
|
_getApiUrl() {
|
|
1305
|
-
// console.log('getApiUrl');
|
|
1306
1313
|
const url = window.location;
|
|
1307
1314
|
const protocol = url.protocol;
|
|
1308
1315
|
const host = url.host;
|
|
@@ -1310,24 +1317,20 @@ class DocPageComponent {
|
|
|
1310
1317
|
const pathNameArray = pathName.split('/');
|
|
1311
1318
|
let name = pathNameArray[pathNameArray.length - 1];
|
|
1312
1319
|
let category = pathNameArray[pathNameArray.length - 2];
|
|
1313
|
-
let showcaseType;
|
|
1314
|
-
showcaseType = pathNameArray[pathNameArray.length - 3];
|
|
1315
|
-
if (showcaseType?.indexOf('eui-showcase') === -1) {
|
|
1316
|
-
showcaseType = pathNameArray[pathNameArray.length - 4];
|
|
1317
|
-
}
|
|
1318
1320
|
let protocolGen = protocol;
|
|
1319
1321
|
let hostGen = host;
|
|
1322
|
+
const cmpType = pathNameArray[pathNameArray.length - 1];
|
|
1320
1323
|
if (host.indexOf('localhost') > -1) {
|
|
1321
1324
|
protocolGen = 'https:';
|
|
1322
1325
|
hostGen = 'euidev.ecdevops.eu';
|
|
1323
1326
|
}
|
|
1324
1327
|
const appVersionNumber = this.appMetadata.appVersion.split('.')[0];
|
|
1325
1328
|
let docTypeRoot = `eui-docs-eui-${appVersionNumber}.x`;
|
|
1326
|
-
if (
|
|
1329
|
+
if (cmpType && cmpType.indexOf('ecl-') > -1) {
|
|
1327
1330
|
docTypeRoot = `eui-docs-ecl-${appVersionNumber}.x`;
|
|
1328
1331
|
}
|
|
1329
|
-
if (
|
|
1330
|
-
docTypeRoot = `eui-docs-mobile
|
|
1332
|
+
if (cmpType && cmpType.indexOf('euim-') > -1) {
|
|
1333
|
+
docTypeRoot = `eui-docs-eui-mobile-${appVersionNumber}.x`;
|
|
1331
1334
|
}
|
|
1332
1335
|
if (category === 'layout-components' || category === 'externals' || category === 'layout' || category === 'atoms') {
|
|
1333
1336
|
category = 'components';
|
|
@@ -1341,7 +1344,6 @@ class DocPageComponent {
|
|
|
1341
1344
|
if (this.cmp && this.cmp.alternateApiCategory) {
|
|
1342
1345
|
category = this.cmp.alternateApiCategory;
|
|
1343
1346
|
}
|
|
1344
|
-
// console.log(this.cmp);
|
|
1345
1347
|
if (this.cmp) {
|
|
1346
1348
|
switch (this.cmp.status) {
|
|
1347
1349
|
case 'success':
|
|
@@ -1351,20 +1353,19 @@ class DocPageComponent {
|
|
|
1351
1353
|
case 'warning':
|
|
1352
1354
|
this.stateLabel = 'will be removed in eUI 21';
|
|
1353
1355
|
this.stateTypeClass = 'warning';
|
|
1354
|
-
this.isDeprecated
|
|
1356
|
+
this.isDeprecated.set(true);
|
|
1355
1357
|
break;
|
|
1356
1358
|
case 'danger':
|
|
1357
1359
|
this.stateLabel = 'will be removed in eUI 21';
|
|
1358
1360
|
this.stateTypeClass = 'danger';
|
|
1359
|
-
this.isLegacy
|
|
1361
|
+
this.isLegacy.set(true);
|
|
1360
1362
|
break;
|
|
1361
1363
|
case 'info':
|
|
1362
1364
|
this.stateLabel = 'NOT READY';
|
|
1363
1365
|
this.stateTypeClass = 'accent';
|
|
1364
|
-
this.isNotReady
|
|
1366
|
+
this.isNotReady.set(true);
|
|
1365
1367
|
break;
|
|
1366
1368
|
}
|
|
1367
|
-
// construct cmp module import string
|
|
1368
1369
|
if (this.cmp.metadata?.moduleName) {
|
|
1369
1370
|
this.cmpImportModule = `import { ${this.cmp.metadata?.moduleName} } from '@eui/${this.cmp.metadata?.subEntryName}';`;
|
|
1370
1371
|
}
|
|
@@ -1375,39 +1376,33 @@ class DocPageComponent {
|
|
|
1375
1376
|
}
|
|
1376
1377
|
}
|
|
1377
1378
|
catch (e) {
|
|
1378
|
-
|
|
1379
|
+
// Component status resolution failed - non-critical
|
|
1379
1380
|
}
|
|
1380
1381
|
});
|
|
1381
1382
|
const formattedName = this._camelCaseString(name + '-' + category.slice(0, -1), '-', true);
|
|
1382
|
-
|
|
1383
|
+
const customApiUrl = this.customApiUrl();
|
|
1384
|
+
return customApiUrl ? `${protocolGen}//${hostGen}/${docTypeRoot}/${customApiUrl}.html` : `${protocolGen}//${hostGen}/${docTypeRoot}/${category}/${formattedName}.html`;
|
|
1383
1385
|
}
|
|
1384
|
-
_camelCaseString(
|
|
1385
|
-
const stringArray =
|
|
1386
|
+
_camelCaseString(str, separator, first) {
|
|
1387
|
+
const stringArray = str.split(separator);
|
|
1386
1388
|
let result = '';
|
|
1387
|
-
let s;
|
|
1388
1389
|
for (let i = 0; i < stringArray.length; i++) {
|
|
1389
|
-
s = stringArray[i];
|
|
1390
|
+
const s = stringArray[i];
|
|
1390
1391
|
if (i === 0) {
|
|
1391
|
-
|
|
1392
|
-
result += s.substring(0, 1).toUpperCase() + s.substr(1);
|
|
1393
|
-
}
|
|
1394
|
-
else {
|
|
1395
|
-
result += s;
|
|
1396
|
-
}
|
|
1392
|
+
result += first ? s.substring(0, 1).toUpperCase() + s.substring(1) : s;
|
|
1397
1393
|
}
|
|
1398
1394
|
else {
|
|
1399
|
-
result += s.substring(0, 1).toUpperCase() + s.
|
|
1395
|
+
result += s.substring(0, 1).toUpperCase() + s.substring(1);
|
|
1400
1396
|
}
|
|
1401
1397
|
}
|
|
1402
1398
|
return result;
|
|
1403
1399
|
}
|
|
1404
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1405
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: DocPageComponent, isStandalone: true, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isLegacy: "isLegacy", codeFolder: "codeFolder", showcase: "showcase", isNavigationVisible: "isNavigationVisible", hasApi: "hasApi", hasA11y: "hasA11y", customApiUrl: "customApiUrl" }, host: { properties: { "class": "this.cssClass" } }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirective) }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirective) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirective) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirective) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirective) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirective) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirective) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirective) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label }}\" subLabel=\"{{ subLabel }}\" class=\"eui-doc-page-title\">\n <eui-page-header-action-items>\n <eui-showcase-doc-page-code\n *ngIf=\"codeFolder\"\n codeFolder=\"{{ codeFolder }}\"\n showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n <eui-chip euiSizeS isFilled\n *ngIf=\"stateLabel\"\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady\"\n [euiWarning]=\"isDeprecated\"\n [euiDanger]=\"isLegacy\">\n {{ stateLabel }}\n </eui-chip>\n </eui-page-header-action-items>\n </eui-page-header>\n\n <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacementNote\">\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n <div *ngIf=\"cmp\">\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n <div *ngIf=\"cmp\">\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-tab-header>\n <eui-label> OPTIONS & SAMPLES </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <ng-container *ngIf=\"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 </ng-container>\n\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n\n <div *ngIf=\"pageOverviewContent.length > 0\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n\n <div *ngIf=\"pageOverviewDefaultContent.length > 0\">\n <ng-content select=\"docPageOverviewDefault\"></ng-content>\n </div>\n <br />\n\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasApi\">\n <eui-tab-header>\n <eui-label> API </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <ng-container *ngIf=\"apiUrlSafe\">\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n </ng-container>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasA11y\">\n <eui-tab-header>\n <eui-label> A11Y </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n <ng-content select=\"docPageAccessibility\"></ng-content>\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n </ng-container>\n <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n No accessibility rules applicable\n </ng-container>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n <eui-tab-header>\n <eui-label> THEMING </eui-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\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n <eui-tab-header>\n <eui-label>\n {{ pageInteractiveContent.first.title }}\n </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent.first.subTitle }}\n </div>\n <ng-content select=\"docPageInteractive\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n </eui-tabs>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n <ng-content select=\"docPageSections\"></ng-content>\n </ng-container>\n\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column *ngIf=\"isNavigationVisible\"\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\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n <li\n *ngIf=\"hasApi\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onNavClick('api', 1)\">\n <span>API</span>\n </li>\n <li\n *ngIf=\"hasA11y\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onNavClick('a11y', 2)\">\n <span>A11Y</span>\n </li>\n\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onNavClick('samples', 0)\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ng-container *ngIf=\"categories.length > 0\">\n <ng-container *ngIf=\"hasCategories; else noCategories\">\n <ng-container *ngFor=\"let category of categories\">\n <ng-container *ngIf=\"category.name === 'Base'; else notBase\">\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-container>\n <ng-template #notBase>\n <div *ngIf=\"category.name !== 'Base'\" class=\"doc-page-navigation-category\">{{category.name}}</div>\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-template #noCategories>\n <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </li>\n\n\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li\n *ngIf=\"pageThemingContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 3)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n <li\n *ngIf=\"sections.length === 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let section of sections\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n (click)=\"onNavClick(section.id, null)\">\n <span>{{ section.label }}</span>\n </li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n\n\n\n\n </eui-page-column-body>\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .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-3xl-semi-bold)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-4xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-primary);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid 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:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-2xl-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-2xl-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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }, { kind: "component", type: i2$3.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i2$3.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i3.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i3.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i3.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i3.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab"] }, { kind: "component", type: i4.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i4.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isCollapsedHidden", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile", "hasSubColumns"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i4.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i4.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i4.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i4.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i4.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i5.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i6.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1400
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1401
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }); }
|
|
1406
1402
|
}
|
|
1407
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1403
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageComponent, decorators: [{
|
|
1408
1404
|
type: Component,
|
|
1409
|
-
args: [{ selector: 'eui-showcase-doc-page', encapsulation: ViewEncapsulation.None, imports: [
|
|
1410
|
-
CommonModule,
|
|
1405
|
+
args: [{ selector: 'eui-showcase-doc-page', encapsulation: ViewEncapsulation.None, host: { class: 'eui-doc-page' }, imports: [
|
|
1411
1406
|
DocPageCodeComponent,
|
|
1412
1407
|
EuiCodeHighlighterDirective,
|
|
1413
1408
|
...EUI_ALERT,
|
|
@@ -1415,705 +1410,211 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1415
1410
|
...EUI_PAGE,
|
|
1416
1411
|
...EUI_LABEL,
|
|
1417
1412
|
...EUI_CHIP,
|
|
1418
|
-
...EUI_BLOCK_CONTENT,
|
|
1419
|
-
], template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label }}\" subLabel=\"{{ subLabel }}\" class=\"eui-doc-page-title\">\n <eui-page-header-action-items>\n <eui-showcase-doc-page-code\n *ngIf=\"codeFolder\"\n codeFolder=\"{{ codeFolder }}\"\n showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n <eui-chip euiSizeS isFilled\n *ngIf=\"stateLabel\"\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady\"\n [euiWarning]=\"isDeprecated\"\n [euiDanger]=\"isLegacy\">\n {{ stateLabel }}\n </eui-chip>\n </eui-page-header-action-items>\n </eui-page-header>\n\n <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacementNote\">\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n <div *ngIf=\"cmp\">\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n <div *ngIf=\"cmp\">\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-tab-header>\n <eui-label> OPTIONS & SAMPLES </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <ng-container *ngIf=\"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 </ng-container>\n\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n\n <div *ngIf=\"pageOverviewContent.length > 0\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n\n <div *ngIf=\"pageOverviewDefaultContent.length > 0\">\n <ng-content select=\"docPageOverviewDefault\"></ng-content>\n </div>\n <br />\n\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasApi\">\n <eui-tab-header>\n <eui-label> API </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <ng-container *ngIf=\"apiUrlSafe\">\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n </ng-container>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasA11y\">\n <eui-tab-header>\n <eui-label> A11Y </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n <ng-content select=\"docPageAccessibility\"></ng-content>\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n </ng-container>\n <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n No accessibility rules applicable\n </ng-container>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n <eui-tab-header>\n <eui-label> THEMING </eui-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\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n <eui-tab-header>\n <eui-label>\n {{ pageInteractiveContent.first.title }}\n </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent.first.subTitle }}\n </div>\n <ng-content select=\"docPageInteractive\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n </eui-tabs>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n <ng-content select=\"docPageSections\"></ng-content>\n </ng-container>\n\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column *ngIf=\"isNavigationVisible\"\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\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n <li\n *ngIf=\"hasApi\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onNavClick('api', 1)\">\n <span>API</span>\n </li>\n <li\n *ngIf=\"hasA11y\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onNavClick('a11y', 2)\">\n <span>A11Y</span>\n </li>\n\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onNavClick('samples', 0)\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ng-container *ngIf=\"categories.length > 0\">\n <ng-container *ngIf=\"hasCategories; else noCategories\">\n <ng-container *ngFor=\"let category of categories\">\n <ng-container *ngIf=\"category.name === 'Base'; else notBase\">\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-container>\n <ng-template #notBase>\n <div *ngIf=\"category.name !== 'Base'\" class=\"doc-page-navigation-category\">{{category.name}}</div>\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-template #noCategories>\n <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </li>\n\n\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li\n *ngIf=\"pageThemingContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 3)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n <li\n *ngIf=\"sections.length === 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let section of sections\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n (click)=\"onNavClick(section.id, null)\">\n <span>{{ section.label }}</span>\n </li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n\n\n\n\n </eui-page-column-body>\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .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-3xl-semi-bold)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-4xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-primary);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid 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:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-2xl-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-2xl-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"] }]
|
|
1420
|
-
}], propDecorators: { cssClass: [{
|
|
1421
|
-
type: HostBinding,
|
|
1422
|
-
args: ['class']
|
|
1423
|
-
}], id: [{
|
|
1424
|
-
type: Input
|
|
1425
|
-
}], label: [{
|
|
1426
|
-
type: Input
|
|
1427
|
-
}], subLabel: [{
|
|
1428
|
-
type: Input
|
|
1429
|
-
}], isNotReady: [{
|
|
1430
|
-
type: Input
|
|
1431
|
-
}], isDeprecated: [{
|
|
1432
|
-
type: Input
|
|
1433
|
-
}], isLegacy: [{
|
|
1434
|
-
type: Input
|
|
1435
|
-
}], codeFolder: [{
|
|
1436
|
-
type: Input
|
|
1437
|
-
}], showcase: [{
|
|
1438
|
-
type: Input
|
|
1439
|
-
}], isNavigationVisible: [{
|
|
1440
|
-
type: Input
|
|
1441
|
-
}], hasApi: [{
|
|
1442
|
-
type: Input
|
|
1443
|
-
}], hasA11y: [{
|
|
1444
|
-
type: Input
|
|
1445
|
-
}], customApiUrl: [{
|
|
1446
|
-
type: Input
|
|
1447
|
-
}], samples: [{
|
|
1448
|
-
type: ContentChildren,
|
|
1449
|
-
args: [DocSampleComponent, { descendants: true }]
|
|
1450
|
-
}], sections: [{
|
|
1451
|
-
type: ContentChildren,
|
|
1452
|
-
args: [DocSectionComponent, { descendants: true }]
|
|
1453
|
-
}], pageOverviewContent: [{
|
|
1454
|
-
type: ContentChildren,
|
|
1455
|
-
args: [forwardRef(() => DocPageOverviewContentDirective)]
|
|
1456
|
-
}], pageOverviewDefaultContent: [{
|
|
1457
|
-
type: ContentChildren,
|
|
1458
|
-
args: [forwardRef(() => DocPageOverviewDefaultContentDirective)]
|
|
1459
|
-
}], pageSamplesContent: [{
|
|
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 }] }], isNotReadyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNotReady", required: false }] }], isDeprecatedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDeprecated", required: false }] }], isLegacyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLegacy", required: false }] }], codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }], showcase: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcase", required: false }] }], isNavigationVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNavigationVisible", required: false }] }, { type: i0.Output, args: ["isNavigationVisibleChange"] }], hasApi: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasApi", required: false }] }], hasA11y: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasA11y", required: false }] }], customApiUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "customApiUrl", required: false }] }], samples: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSampleComponent), { ...{ descendants: true }, isSignal: true }] }], sections: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSectionComponent), { ...{ descendants: true }, isSignal: true }] }], pageOverviewContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewContentDirective), { isSignal: true }] }], pageOverviewDefaultContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewDefaultContentDirective), { isSignal: true }] }], pageSamplesContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSamplesContentDirective), { isSignal: true }] }], pageSectionsContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSectionsContentDirective), { isSignal: true }] }], pageInteractiveContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageInteractiveContentDirective), { isSignal: true }] }], pageAccessibilityContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageAccessibilityContentDirective), { isSignal: true }] }], pageApiContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageApiContentDirective), { isSignal: true }] }], pageThemingContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageThemingContentDirective), { isSignal: true }] }], pageVisualSpecsContent: [{
|
|
1460
1415
|
type: ContentChildren,
|
|
1461
|
-
args: [forwardRef(() =>
|
|
1462
|
-
}],
|
|
1416
|
+
args: [forwardRef(() => DocPageVisualSpecsContentDirective)]
|
|
1417
|
+
}], pagePlaygroundContent: [{
|
|
1463
1418
|
type: ContentChildren,
|
|
1464
|
-
args: [forwardRef(() =>
|
|
1465
|
-
}],
|
|
1466
|
-
type: ContentChildren,
|
|
1467
|
-
args: [forwardRef(() => DocPageInteractiveContentDirective)]
|
|
1468
|
-
}], pageAccessibilityContent: [{
|
|
1469
|
-
type: ContentChildren,
|
|
1470
|
-
args: [forwardRef(() => DocPageAccessibilityContentDirective)]
|
|
1471
|
-
}], pageApiContent: [{
|
|
1472
|
-
type: ContentChildren,
|
|
1473
|
-
args: [forwardRef(() => DocPageApiContentDirective)]
|
|
1474
|
-
}], pageThemingContent: [{
|
|
1475
|
-
type: ContentChildren,
|
|
1476
|
-
args: [forwardRef(() => DocPageThemingContentDirective)]
|
|
1477
|
-
}], tabsContent: [{
|
|
1419
|
+
args: [forwardRef(() => DocPagePlaygroundContentDirective)]
|
|
1420
|
+
}], tabsContent: [{ type: i0.ViewChild, args: ['tabsContent', { isSignal: true }] }], navContent: [{
|
|
1478
1421
|
type: ViewChild,
|
|
1479
|
-
args: ['
|
|
1422
|
+
args: ['navContent']
|
|
1480
1423
|
}] } });
|
|
1481
1424
|
/* eslint-disable @angular-eslint/directive-selector */
|
|
1482
1425
|
class DocPageOverviewContentDirective {
|
|
1483
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1484
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1426
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageOverviewContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1427
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageOverviewContentDirective, isStandalone: true, selector: "docPageOverview", ngImport: i0 }); }
|
|
1485
1428
|
}
|
|
1486
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1429
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageOverviewContentDirective, decorators: [{
|
|
1487
1430
|
type: Directive,
|
|
1488
1431
|
args: [{ selector: 'docPageOverview' }]
|
|
1489
1432
|
}] });
|
|
1490
1433
|
class DocPageOverviewDefaultContentDirective {
|
|
1491
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1492
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1434
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageOverviewDefaultContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1435
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageOverviewDefaultContentDirective, isStandalone: true, selector: "docPageOverviewDefault", ngImport: i0 }); }
|
|
1493
1436
|
}
|
|
1494
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1437
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageOverviewDefaultContentDirective, decorators: [{
|
|
1495
1438
|
type: Directive,
|
|
1496
1439
|
args: [{ selector: 'docPageOverviewDefault' }]
|
|
1497
1440
|
}] });
|
|
1498
1441
|
class DocPageInteractiveContentDirective {
|
|
1499
1442
|
constructor() {
|
|
1500
|
-
this.title = 'ADVANCED EXAMPLES'
|
|
1501
|
-
|
|
1443
|
+
this.title = input('ADVANCED EXAMPLES', /* @ts-ignore */
|
|
1444
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
1445
|
+
this.subTitle = input('Advanced use cases', /* @ts-ignore */
|
|
1446
|
+
...(ngDevMode ? [{ debugName: "subTitle" }] : /* istanbul ignore next */ []));
|
|
1502
1447
|
}
|
|
1503
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1504
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
1448
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageInteractiveContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1449
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: DocPageInteractiveContentDirective, isStandalone: true, selector: "docPageInteractive", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
1505
1450
|
}
|
|
1506
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1451
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageInteractiveContentDirective, decorators: [{
|
|
1507
1452
|
type: Directive,
|
|
1508
1453
|
args: [{ selector: 'docPageInteractive' }]
|
|
1509
|
-
}], propDecorators: { title: [{
|
|
1510
|
-
type: Input
|
|
1511
|
-
}], subTitle: [{
|
|
1512
|
-
type: Input
|
|
1513
|
-
}] } });
|
|
1454
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }] } });
|
|
1514
1455
|
class DocPageSamplesContentDirective {
|
|
1515
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1516
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1456
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageSamplesContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1457
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageSamplesContentDirective, isStandalone: true, selector: "docPageSamples", ngImport: i0 }); }
|
|
1517
1458
|
}
|
|
1518
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1459
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageSamplesContentDirective, decorators: [{
|
|
1519
1460
|
type: Directive,
|
|
1520
1461
|
args: [{ selector: 'docPageSamples' }]
|
|
1521
1462
|
}] });
|
|
1522
1463
|
class DocPageSectionsContentDirective {
|
|
1523
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1524
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1464
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageSectionsContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1465
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageSectionsContentDirective, isStandalone: true, selector: "docPageSections", ngImport: i0 }); }
|
|
1525
1466
|
}
|
|
1526
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1467
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageSectionsContentDirective, decorators: [{
|
|
1527
1468
|
type: Directive,
|
|
1528
1469
|
args: [{ selector: 'docPageSections' }]
|
|
1529
1470
|
}] });
|
|
1530
1471
|
class DocPageAccessibilityContentDirective {
|
|
1531
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1532
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1472
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageAccessibilityContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1473
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageAccessibilityContentDirective, isStandalone: true, selector: "docPageAccessibility", ngImport: i0 }); }
|
|
1533
1474
|
}
|
|
1534
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1475
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageAccessibilityContentDirective, decorators: [{
|
|
1535
1476
|
type: Directive,
|
|
1536
1477
|
args: [{ selector: 'docPageAccessibility' }]
|
|
1537
1478
|
}] });
|
|
1538
1479
|
class DocPageApiContentDirective {
|
|
1539
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1540
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1480
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageApiContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1481
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageApiContentDirective, isStandalone: true, selector: "docPageApi", ngImport: i0 }); }
|
|
1541
1482
|
}
|
|
1542
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1483
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageApiContentDirective, decorators: [{
|
|
1543
1484
|
type: Directive,
|
|
1544
1485
|
args: [{ selector: 'docPageApi' }]
|
|
1545
1486
|
}] });
|
|
1546
|
-
class
|
|
1547
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1548
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1549
|
-
}
|
|
1550
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DocPageThemingContentDirective, decorators: [{
|
|
1551
|
-
type: Directive,
|
|
1552
|
-
args: [{ selector: 'docPageTheming' }]
|
|
1553
|
-
}] });
|
|
1554
|
-
|
|
1555
|
-
class DocPageComponentV2 {
|
|
1556
|
-
constructor() {
|
|
1557
|
-
this.cssClass = 'eui-doc-page';
|
|
1558
|
-
this.isNotReady = false;
|
|
1559
|
-
this.isDeprecated = false;
|
|
1560
|
-
this.isLegacy = false;
|
|
1561
|
-
this.showcase = 'ux';
|
|
1562
|
-
this.isNavigationVisible = true;
|
|
1563
|
-
this.hasApi = true;
|
|
1564
|
-
this.hasA11y = true;
|
|
1565
|
-
this.customApiUrl = null;
|
|
1566
|
-
this.isLoading = true;
|
|
1567
|
-
this.isNavClicked = true;
|
|
1568
|
-
this.hasCategories = false;
|
|
1569
|
-
this.categories = [];
|
|
1570
|
-
this.sanitizer = inject(DomSanitizer);
|
|
1571
|
-
this.TABS_DEF = [
|
|
1572
|
-
{ index: 0, id: 'samples' },
|
|
1573
|
-
{ index: 1, id: 'api' },
|
|
1574
|
-
{ index: 2, id: 'a11y' },
|
|
1575
|
-
{ index: 3, id: 'theming' },
|
|
1576
|
-
{ index: 4, id: 'advanced' },
|
|
1577
|
-
];
|
|
1578
|
-
this.CATEGORIES_DEF = [
|
|
1579
|
-
{ index: 0, id: 'Base' },
|
|
1580
|
-
{ index: 10, id: 'Variants' },
|
|
1581
|
-
{ index: 20, id: 'Options' },
|
|
1582
|
-
{ index: 30, id: 'Main Features' },
|
|
1583
|
-
{ index: 40, id: 'free-category' },
|
|
1584
|
-
{ index: 50, id: 'Reactive Forms' },
|
|
1585
|
-
{ index: 60, id: 'Event Handlers' },
|
|
1586
|
-
{ index: 70, id: 'Composition' },
|
|
1587
|
-
{ index: 80, id: 'Misc' },
|
|
1588
|
-
];
|
|
1589
|
-
this.location = inject(Location);
|
|
1590
|
-
this.router = inject(Router);
|
|
1591
|
-
this.route = inject(ActivatedRoute);
|
|
1592
|
-
this.asService = inject(EuiAppShellService);
|
|
1593
|
-
}
|
|
1594
|
-
ngOnInit() {
|
|
1595
|
-
setTimeout(() => {
|
|
1596
|
-
this.asService.isBlockDocumentActive = true;
|
|
1597
|
-
});
|
|
1598
|
-
this.appMetadata = this.asService.state.appMetadata;
|
|
1599
|
-
if (this.id && !this.label) {
|
|
1600
|
-
this.label = this.id;
|
|
1601
|
-
}
|
|
1602
|
-
this.fragmentId = this.route.snapshot.fragment;
|
|
1603
|
-
}
|
|
1604
|
-
ngAfterViewInit() {
|
|
1605
|
-
// getting API url
|
|
1606
|
-
try {
|
|
1607
|
-
this.apiUrl = this._getApiUrl();
|
|
1608
|
-
setTimeout(() => {
|
|
1609
|
-
this.apiUrlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.apiUrl);
|
|
1610
|
-
});
|
|
1611
|
-
}
|
|
1612
|
-
catch (e) {
|
|
1613
|
-
console.log(e);
|
|
1614
|
-
}
|
|
1615
|
-
setTimeout(() => {
|
|
1616
|
-
const tab = this.TABS_DEF.filter((t) => t.id === this.fragmentId)[0];
|
|
1617
|
-
const sampleTabIndex = 0;
|
|
1618
|
-
let tabIndex;
|
|
1619
|
-
if (!tab) {
|
|
1620
|
-
tabIndex = sampleTabIndex;
|
|
1621
|
-
}
|
|
1622
|
-
else {
|
|
1623
|
-
tabIndex = tab.index;
|
|
1624
|
-
}
|
|
1625
|
-
// constructing categories, if at least one set, if not backward compat with old display
|
|
1626
|
-
const categoriesJson = {};
|
|
1627
|
-
this.samples.forEach((s) => {
|
|
1628
|
-
// "Default" or "_default" sample are always put first in the nav list
|
|
1629
|
-
if (!s.category && s.id !== '_default' && s.id !== 'Default' && s.id !== 'default') {
|
|
1630
|
-
if (!categoriesJson['others']) {
|
|
1631
|
-
categoriesJson['others'] = [];
|
|
1632
|
-
categoriesJson['others'].push(s);
|
|
1633
|
-
}
|
|
1634
|
-
else {
|
|
1635
|
-
categoriesJson['others'].push(s);
|
|
1636
|
-
}
|
|
1637
|
-
}
|
|
1638
|
-
else {
|
|
1639
|
-
if (s.id === '_default' || s.id === 'Default' || s.id === 'default') {
|
|
1640
|
-
if (!categoriesJson['Base']) {
|
|
1641
|
-
categoriesJson['Base'] = [];
|
|
1642
|
-
categoriesJson['Base'].push(s);
|
|
1643
|
-
}
|
|
1644
|
-
else {
|
|
1645
|
-
categoriesJson['Base'].push(s);
|
|
1646
|
-
}
|
|
1647
|
-
}
|
|
1648
|
-
else {
|
|
1649
|
-
this.hasCategories = true;
|
|
1650
|
-
if (!categoriesJson[s.category]) {
|
|
1651
|
-
categoriesJson[s.category] = [];
|
|
1652
|
-
categoriesJson[s.category].push(s);
|
|
1653
|
-
}
|
|
1654
|
-
else {
|
|
1655
|
-
categoriesJson[s.category].push(s);
|
|
1656
|
-
}
|
|
1657
|
-
}
|
|
1658
|
-
}
|
|
1659
|
-
});
|
|
1660
|
-
// making the list of categories iterable for display
|
|
1661
|
-
// console.log(categoriesJson)
|
|
1662
|
-
Object.keys(categoriesJson).forEach((c) => {
|
|
1663
|
-
const normalizedKey = c.toLowerCase();
|
|
1664
|
-
const existingCategory = this.categories.find(cat => cat.name.toLowerCase() === normalizedKey);
|
|
1665
|
-
if (existingCategory) {
|
|
1666
|
-
existingCategory.samples = [...existingCategory.samples, ...categoriesJson[c]].sort((a, b) => {
|
|
1667
|
-
return a.label.localeCompare(b.label);
|
|
1668
|
-
});
|
|
1669
|
-
}
|
|
1670
|
-
else {
|
|
1671
|
-
this.categories.push({
|
|
1672
|
-
name: c,
|
|
1673
|
-
samples: categoriesJson[c].sort((a, b) => {
|
|
1674
|
-
return a.label.localeCompare(b.label);
|
|
1675
|
-
}),
|
|
1676
|
-
});
|
|
1677
|
-
}
|
|
1678
|
-
});
|
|
1679
|
-
// push the "others" at the end of the nav list
|
|
1680
|
-
this.categories.push(this.categories.splice(this.categories.findIndex(v => v.name == 'others'), 1)[0]);
|
|
1681
|
-
this.categories.sort((a, b) => {
|
|
1682
|
-
return this.getCategoryIndex(a.name) - this.getCategoryIndex(b.name);
|
|
1683
|
-
});
|
|
1684
|
-
setTimeout(() => {
|
|
1685
|
-
this._scrollToFragment(this.fragmentId, tabIndex, true, true);
|
|
1686
|
-
this.asService.isBlockDocumentActive = false;
|
|
1687
|
-
this.isLoading = false;
|
|
1688
|
-
}, 1);
|
|
1689
|
-
});
|
|
1690
|
-
}
|
|
1691
|
-
getCategoryIndex(name) {
|
|
1692
|
-
const category = this.CATEGORIES_DEF.find(cat => cat.id.toLowerCase() === name.toLowerCase());
|
|
1693
|
-
return category ? category.index : this.CATEGORIES_DEF.find(cat => cat.id === 'free-category').index;
|
|
1694
|
-
}
|
|
1695
|
-
onNavClick(fragmentId, tabIndex) {
|
|
1696
|
-
this.fragmentId = fragmentId;
|
|
1697
|
-
this.isNavClicked = true;
|
|
1698
|
-
this._scrollToFragment(this.fragmentId, tabIndex, false, true);
|
|
1699
|
-
}
|
|
1700
|
-
onTabActivate(event) {
|
|
1701
|
-
if (!this.isLoading && !this.isNavClicked) {
|
|
1702
|
-
const tabId = this.TABS_DEF.filter((t) => t.index === event.index)[0].id;
|
|
1703
|
-
this._scrollToFragment(tabId, event.index, false, false);
|
|
1704
|
-
}
|
|
1705
|
-
this.isNavClicked = false;
|
|
1706
|
-
}
|
|
1707
|
-
_scrollToFragment(fragmentId, tabIndex, init, changeTab) {
|
|
1708
|
-
if (init) {
|
|
1709
|
-
if (this.tabsContent) {
|
|
1710
|
-
this.tabsContent.activateTab(tabIndex);
|
|
1711
|
-
}
|
|
1712
|
-
}
|
|
1713
|
-
else {
|
|
1714
|
-
if (changeTab) {
|
|
1715
|
-
this.router.onSameUrlNavigation = 'reload';
|
|
1716
|
-
this.router.navigate(['.'], { relativeTo: this.route, fragment: fragmentId }).then(() => {
|
|
1717
|
-
if (this.tabsContent) {
|
|
1718
|
-
this.tabsContent.activateTab(tabIndex);
|
|
1719
|
-
}
|
|
1720
|
-
});
|
|
1721
|
-
}
|
|
1722
|
-
else {
|
|
1723
|
-
const routeRoot = this.router.url.split('#')[0];
|
|
1724
|
-
this.location.go(`${routeRoot}#${fragmentId}`);
|
|
1725
|
-
}
|
|
1726
|
-
}
|
|
1727
|
-
if (fragmentId) {
|
|
1728
|
-
setTimeout(() => {
|
|
1729
|
-
const fgm = document.getElementById(fragmentId);
|
|
1730
|
-
if (fgm) {
|
|
1731
|
-
fgm.scrollIntoView();
|
|
1732
|
-
}
|
|
1733
|
-
});
|
|
1734
|
-
}
|
|
1735
|
-
}
|
|
1736
|
-
_getComponentStatus(id) {
|
|
1737
|
-
const flatten = (links) => links
|
|
1738
|
-
? links.reduce((result, item) => [
|
|
1739
|
-
...result,
|
|
1740
|
-
{
|
|
1741
|
-
id: item.label,
|
|
1742
|
-
alternateId: item.name,
|
|
1743
|
-
status: item.markerTypeClass,
|
|
1744
|
-
cmpReplacement: item.cmpReplacement,
|
|
1745
|
-
cmpReplacementUrl: item.cmpReplacementUrl,
|
|
1746
|
-
cmpReplacementNote: item.cmpReplacementNote,
|
|
1747
|
-
alternateApiCategory: item.alternateApiCategory,
|
|
1748
|
-
metadata: item.metadata,
|
|
1749
|
-
},
|
|
1750
|
-
...flatten(item.children),
|
|
1751
|
-
], [])
|
|
1752
|
-
: [];
|
|
1753
|
-
const flatLinks = flatten(this.asService.state.sidebarLinks);
|
|
1754
|
-
const idBasedCmp = flatLinks.filter((item) => item.id === id)[0];
|
|
1755
|
-
// console.log('from get component status');
|
|
1756
|
-
// console.log(id);
|
|
1757
|
-
// console.log(flatLinks);
|
|
1758
|
-
// console.log(idBasedCmp);
|
|
1759
|
-
if (idBasedCmp) {
|
|
1760
|
-
return idBasedCmp;
|
|
1761
|
-
}
|
|
1762
|
-
else {
|
|
1763
|
-
const alternateIdBasedCmp = flatLinks.filter((item) => item.alternateId === id)[0];
|
|
1764
|
-
return alternateIdBasedCmp;
|
|
1765
|
-
}
|
|
1766
|
-
}
|
|
1767
|
-
_getApiUrl() {
|
|
1768
|
-
// console.log('getApiUrl');
|
|
1769
|
-
const url = window.location;
|
|
1770
|
-
const protocol = url.protocol;
|
|
1771
|
-
const host = url.host;
|
|
1772
|
-
const pathName = url.pathname;
|
|
1773
|
-
const pathNameArray = pathName.split('/');
|
|
1774
|
-
let name = pathNameArray[pathNameArray.length - 1];
|
|
1775
|
-
let category = pathNameArray[pathNameArray.length - 2];
|
|
1776
|
-
let showcaseType;
|
|
1777
|
-
showcaseType = pathNameArray[pathNameArray.length - 3];
|
|
1778
|
-
if (showcaseType?.indexOf('eui-showcase') === -1) {
|
|
1779
|
-
showcaseType = pathNameArray[pathNameArray.length - 4];
|
|
1780
|
-
}
|
|
1781
|
-
let protocolGen = protocol;
|
|
1782
|
-
let hostGen = host;
|
|
1783
|
-
if (host.indexOf('localhost') > -1) {
|
|
1784
|
-
protocolGen = 'https:';
|
|
1785
|
-
hostGen = 'euidev.ecdevops.eu';
|
|
1786
|
-
}
|
|
1787
|
-
const appVersionNumber = this.appMetadata.appVersion.split('.')[0];
|
|
1788
|
-
let docTypeRoot = `eui-docs-eui-${appVersionNumber}.x`;
|
|
1789
|
-
if (showcaseType && showcaseType.indexOf('-ecl') > -1) {
|
|
1790
|
-
docTypeRoot = `eui-docs-ecl-${appVersionNumber}.x`;
|
|
1791
|
-
}
|
|
1792
|
-
if (showcaseType && showcaseType.indexOf('-mobile') > -1) {
|
|
1793
|
-
docTypeRoot = `eui-docs-mobile-core-${appVersionNumber}.x`;
|
|
1794
|
-
}
|
|
1795
|
-
if (category === 'layout-components' || category === 'externals' || category === 'layout' || category === 'atoms') {
|
|
1796
|
-
category = 'components';
|
|
1797
|
-
}
|
|
1798
|
-
setTimeout(() => {
|
|
1799
|
-
if (name.indexOf('-service') > -1 || name.indexOf('-template') > -1) {
|
|
1800
|
-
name = name.replace('-service', '').replace('-template', '');
|
|
1801
|
-
}
|
|
1802
|
-
try {
|
|
1803
|
-
this.cmp = this._getComponentStatus(name);
|
|
1804
|
-
if (this.cmp && this.cmp.alternateApiCategory) {
|
|
1805
|
-
category = this.cmp.alternateApiCategory;
|
|
1806
|
-
}
|
|
1807
|
-
// console.log(this.cmp);
|
|
1808
|
-
if (this.cmp) {
|
|
1809
|
-
switch (this.cmp.status) {
|
|
1810
|
-
case 'success':
|
|
1811
|
-
this.stateLabel = 'ACTIVE';
|
|
1812
|
-
this.stateTypeClass = 'success';
|
|
1813
|
-
break;
|
|
1814
|
-
case 'warning':
|
|
1815
|
-
this.stateLabel = 'will be removed in eUI 21';
|
|
1816
|
-
this.stateTypeClass = 'warning';
|
|
1817
|
-
this.isDeprecated = true;
|
|
1818
|
-
break;
|
|
1819
|
-
case 'danger':
|
|
1820
|
-
this.stateLabel = 'will be removed in eUI 21';
|
|
1821
|
-
this.stateTypeClass = 'danger';
|
|
1822
|
-
this.isLegacy = true;
|
|
1823
|
-
break;
|
|
1824
|
-
case 'info':
|
|
1825
|
-
this.stateLabel = 'NOT READY';
|
|
1826
|
-
this.stateTypeClass = 'accent';
|
|
1827
|
-
this.isNotReady = true;
|
|
1828
|
-
break;
|
|
1829
|
-
}
|
|
1830
|
-
// construct cmp module import string
|
|
1831
|
-
if (this.cmp.metadata?.moduleName) {
|
|
1832
|
-
this.cmpImportModule = `import { ${this.cmp.metadata?.moduleName} } from '@eui/${this.cmp.metadata?.subEntryName}';`;
|
|
1833
|
-
}
|
|
1834
|
-
if (this.cmp.metadata?.exportName) {
|
|
1835
|
-
this.cmpImportStandalone = `import { ${this.cmp.metadata?.exportName} } from '@eui/${this.cmp.metadata?.subEntryName}';`;
|
|
1836
|
-
this.cmpImportStandaloneCmp = `@Component({\n...\n imports: [...${this.cmp.metadata?.exportName}],\n...\n})`;
|
|
1837
|
-
}
|
|
1838
|
-
}
|
|
1839
|
-
}
|
|
1840
|
-
catch (e) {
|
|
1841
|
-
console.log(e);
|
|
1842
|
-
}
|
|
1843
|
-
});
|
|
1844
|
-
const formattedName = this._camelCaseString(name + '-' + category.slice(0, -1), '-', true);
|
|
1845
|
-
return this.customApiUrl ? `${protocolGen}//${hostGen}/${docTypeRoot}/${category}/${this.customApiUrl}.html` : `${protocolGen}//${hostGen}/${docTypeRoot}/${category}/${formattedName}.html`;
|
|
1846
|
-
}
|
|
1847
|
-
_camelCaseString(string, separator, first) {
|
|
1848
|
-
const stringArray = string.split(separator);
|
|
1849
|
-
let result = '';
|
|
1850
|
-
let s;
|
|
1851
|
-
for (let i = 0; i < stringArray.length; i++) {
|
|
1852
|
-
s = stringArray[i];
|
|
1853
|
-
if (i === 0) {
|
|
1854
|
-
if (first) {
|
|
1855
|
-
result += s.substring(0, 1).toUpperCase() + s.substr(1);
|
|
1856
|
-
}
|
|
1857
|
-
else {
|
|
1858
|
-
result += s;
|
|
1859
|
-
}
|
|
1860
|
-
}
|
|
1861
|
-
else {
|
|
1862
|
-
result += s.substring(0, 1).toUpperCase() + s.substr(1);
|
|
1863
|
-
}
|
|
1864
|
-
}
|
|
1865
|
-
return result;
|
|
1866
|
-
}
|
|
1867
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DocPageComponentV2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1868
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: DocPageComponentV2, isStandalone: true, selector: "eui-showcase-doc-page-v2", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isLegacy: "isLegacy", codeFolder: "codeFolder", showcase: "showcase", isNavigationVisible: "isNavigationVisible", hasApi: "hasApi", hasA11y: "hasA11y", customApiUrl: "customApiUrl" }, host: { properties: { "class": "this.cssClass" } }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirectiveV2) }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirectiveV2) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirectiveV2) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirectiveV2) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirectiveV2) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirectiveV2) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirectiveV2) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirectiveV2) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header class=\"eui-doc-page-title\">\n <eui-page-header-label>{{label}}</eui-page-header-label> \n <eui-page-header-sub-label>{{subLabel}}</eui-page-header-sub-label>\n <eui-page-header-action-items>\n <eui-showcase-doc-page-code\n *ngIf=\"codeFolder\"\n codeFolder=\"{{ codeFolder }}\"\n showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n <eui-chip euiSizeS isFilled\n *ngIf=\"stateLabel\"\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady\"\n [euiWarning]=\"isDeprecated\"\n [euiDanger]=\"isLegacy\">\n {{ stateLabel }}\n </eui-chip>\n </eui-page-header-action-items>\n </eui-page-header>\n\n <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacementNote\">\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n <div *ngIf=\"cmp\">\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n <div *ngIf=\"cmp\">\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-tab-header>\n <eui-label> OPTIONS & SAMPLES </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <ng-container *ngIf=\"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 </ng-container>\n\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n\n <div *ngIf=\"pageOverviewContent.length > 0\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n\n <div *ngIf=\"pageOverviewDefaultContent.length > 0\">\n <ng-content select=\"docPageOverviewDefault\"></ng-content>\n </div>\n <br />\n\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasApi\">\n <eui-tab-header>\n <eui-label> API </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <ng-container *ngIf=\"apiUrlSafe\">\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n </ng-container>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasA11y\">\n <eui-tab-header>\n <eui-label> A11Y </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n <ng-content select=\"docPageAccessibility\"></ng-content>\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n </ng-container>\n <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n No accessibility rules applicable\n </ng-container>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n <eui-tab-header>\n <eui-label> THEMING </eui-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\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n <eui-tab-header>\n <eui-label>\n {{ pageInteractiveContent.first.title }}\n </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent.first.subTitle }}\n </div>\n <ng-content select=\"docPageInteractive\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n </eui-tabs>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n <ng-content select=\"docPageSections\"></ng-content>\n </ng-container>\n\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column *ngIf=\"isNavigationVisible\"\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-header>\n <eui-page-column-header-label>\n On this page\n </eui-page-column-header-label>\n </eui-page-column-header>\n <eui-page-column-body>\n\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n <li\n *ngIf=\"hasApi\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onNavClick('api', 1)\">\n <span>API</span>\n </li>\n <li\n *ngIf=\"hasA11y\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onNavClick('a11y', 2)\">\n <span>A11Y</span>\n </li>\n\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onNavClick('samples', 0)\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ng-container *ngIf=\"categories.length > 0\">\n <ng-container *ngIf=\"hasCategories; else noCategories\">\n <ng-container *ngFor=\"let category of categories\">\n <ng-container *ngIf=\"category.name === 'Base'; else notBase\">\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-container>\n <ng-template #notBase>\n <div *ngIf=\"category.name !== 'Base'\" class=\"doc-page-navigation-category\">{{category.name}}</div>\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-template #noCategories>\n <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </li>\n\n\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li\n *ngIf=\"pageThemingContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 3)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n <li\n *ngIf=\"sections.length === 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let section of sections\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n (click)=\"onNavClick(section.id, null)\">\n <span>{{ section.label }}</span>\n </li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n\n\n\n\n </eui-page-column-body>\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page{display:flex;width:100%;height:100%}.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 .eui-common-header__label-text{font:var(--eui-f-2xl)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-4xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-primary);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid 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:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-2xl-bold)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-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-3xl)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-xl);font:var(--eui-f-xl)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);font:var(--eui-f-l-bold)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { kind: "component", type: i2$3.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i2$3.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i3.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i3.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i3.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i3.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab"] }, { kind: "component", type: i4$1.EuiPage, selector: "eui-page" }, { kind: "component", type: i4$1.EuiPageContent, selector: "eui-page-content" }, { kind: "component", type: i4$1.EuiPageHeader, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i4$1.EuiPageHeaderLabel, selector: "eui-page-header-label" }, { kind: "component", type: i4$1.EuiPageHeaderSubLabel, selector: "eui-page-header-sub-label" }, { kind: "component", type: i4$1.EuiPageHeaderActionItems, selector: "eui-page-header-action-items" }, { kind: "component", type: i4$1.EuiPageColumns, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i4$1.EuiPageColumn, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile"], outputs: ["collapse", "headerCollapse"] }, { kind: "component", type: i4$1.EuiPageColumnHeader, selector: "eui-page-column-header", inputs: ["expandAriaLabel", "collapseAriaLabel"] }, { kind: "component", type: i4$1.EuiPageColumnHeaderLabel, selector: "eui-page-column-header-label" }, { kind: "component", type: i4$1.EuiPageColumnBody, selector: "eui-page-column-body" }, { kind: "component", type: i5.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i6.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1869
|
-
}
|
|
1870
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DocPageComponentV2, decorators: [{
|
|
1871
|
-
type: Component,
|
|
1872
|
-
args: [{ selector: 'eui-showcase-doc-page-v2', encapsulation: ViewEncapsulation.None, imports: [
|
|
1873
|
-
CommonModule,
|
|
1874
|
-
DocPageCodeComponent,
|
|
1875
|
-
...EUI_ALERT,
|
|
1876
|
-
...EUI_TABS,
|
|
1877
|
-
...EUI_PAGE$1,
|
|
1878
|
-
...EUI_LABEL,
|
|
1879
|
-
...EUI_CHIP,
|
|
1880
|
-
...EUI_BLOCK_CONTENT,
|
|
1881
|
-
EuiCodeHighlighterDirective,
|
|
1882
|
-
], template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header class=\"eui-doc-page-title\">\n <eui-page-header-label>{{label}}</eui-page-header-label> \n <eui-page-header-sub-label>{{subLabel}}</eui-page-header-sub-label>\n <eui-page-header-action-items>\n <eui-showcase-doc-page-code\n *ngIf=\"codeFolder\"\n codeFolder=\"{{ codeFolder }}\"\n showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n <eui-chip euiSizeS isFilled\n *ngIf=\"stateLabel\"\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady\"\n [euiWarning]=\"isDeprecated\"\n [euiDanger]=\"isLegacy\">\n {{ stateLabel }}\n </eui-chip>\n </eui-page-header-action-items>\n </eui-page-header>\n\n <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacementNote\">\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n <div *ngIf=\"cmp\">\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n <div *ngIf=\"cmp\">\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-tab-header>\n <eui-label> OPTIONS & SAMPLES </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <ng-container *ngIf=\"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 </ng-container>\n\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n\n <div *ngIf=\"pageOverviewContent.length > 0\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n\n <div *ngIf=\"pageOverviewDefaultContent.length > 0\">\n <ng-content select=\"docPageOverviewDefault\"></ng-content>\n </div>\n <br />\n\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasApi\">\n <eui-tab-header>\n <eui-label> API </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <ng-container *ngIf=\"apiUrlSafe\">\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n </ng-container>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasA11y\">\n <eui-tab-header>\n <eui-label> A11Y </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n <ng-content select=\"docPageAccessibility\"></ng-content>\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n </ng-container>\n <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n No accessibility rules applicable\n </ng-container>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n <eui-tab-header>\n <eui-label> THEMING </eui-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\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n <eui-tab-header>\n <eui-label>\n {{ pageInteractiveContent.first.title }}\n </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent.first.subTitle }}\n </div>\n <ng-content select=\"docPageInteractive\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n </eui-tabs>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n <ng-content select=\"docPageSections\"></ng-content>\n </ng-container>\n\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column *ngIf=\"isNavigationVisible\"\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-header>\n <eui-page-column-header-label>\n On this page\n </eui-page-column-header-label>\n </eui-page-column-header>\n <eui-page-column-body>\n\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n <li\n *ngIf=\"hasApi\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onNavClick('api', 1)\">\n <span>API</span>\n </li>\n <li\n *ngIf=\"hasA11y\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onNavClick('a11y', 2)\">\n <span>A11Y</span>\n </li>\n\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onNavClick('samples', 0)\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ng-container *ngIf=\"categories.length > 0\">\n <ng-container *ngIf=\"hasCategories; else noCategories\">\n <ng-container *ngFor=\"let category of categories\">\n <ng-container *ngIf=\"category.name === 'Base'; else notBase\">\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-container>\n <ng-template #notBase>\n <div *ngIf=\"category.name !== 'Base'\" class=\"doc-page-navigation-category\">{{category.name}}</div>\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-template #noCategories>\n <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </li>\n\n\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li\n *ngIf=\"pageThemingContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 3)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n <li\n *ngIf=\"sections.length === 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let section of sections\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n (click)=\"onNavClick(section.id, null)\">\n <span>{{ section.label }}</span>\n </li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n\n\n\n\n </eui-page-column-body>\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page{display:flex;width:100%;height:100%}.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 .eui-common-header__label-text{font:var(--eui-f-2xl)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-4xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-primary);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid 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:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-2xl-bold)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-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-3xl)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-xl);font:var(--eui-f-xl)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);font:var(--eui-f-l-bold)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-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"] }]
|
|
1883
|
-
}], propDecorators: { cssClass: [{
|
|
1884
|
-
type: HostBinding,
|
|
1885
|
-
args: ['class']
|
|
1886
|
-
}], id: [{
|
|
1887
|
-
type: Input
|
|
1888
|
-
}], label: [{
|
|
1889
|
-
type: Input
|
|
1890
|
-
}], subLabel: [{
|
|
1891
|
-
type: Input
|
|
1892
|
-
}], isNotReady: [{
|
|
1893
|
-
type: Input
|
|
1894
|
-
}], isDeprecated: [{
|
|
1895
|
-
type: Input
|
|
1896
|
-
}], isLegacy: [{
|
|
1897
|
-
type: Input
|
|
1898
|
-
}], codeFolder: [{
|
|
1899
|
-
type: Input
|
|
1900
|
-
}], showcase: [{
|
|
1901
|
-
type: Input
|
|
1902
|
-
}], isNavigationVisible: [{
|
|
1903
|
-
type: Input
|
|
1904
|
-
}], hasApi: [{
|
|
1905
|
-
type: Input
|
|
1906
|
-
}], hasA11y: [{
|
|
1907
|
-
type: Input
|
|
1908
|
-
}], customApiUrl: [{
|
|
1909
|
-
type: Input
|
|
1910
|
-
}], samples: [{
|
|
1911
|
-
type: ContentChildren,
|
|
1912
|
-
args: [DocSampleComponent, { descendants: true }]
|
|
1913
|
-
}], sections: [{
|
|
1914
|
-
type: ContentChildren,
|
|
1915
|
-
args: [DocSectionComponent, { descendants: true }]
|
|
1916
|
-
}], pageOverviewContent: [{
|
|
1917
|
-
type: ContentChildren,
|
|
1918
|
-
args: [forwardRef(() => DocPageOverviewContentDirectiveV2)]
|
|
1919
|
-
}], pageOverviewDefaultContent: [{
|
|
1920
|
-
type: ContentChildren,
|
|
1921
|
-
args: [forwardRef(() => DocPageOverviewDefaultContentDirectiveV2)]
|
|
1922
|
-
}], pageSamplesContent: [{
|
|
1923
|
-
type: ContentChildren,
|
|
1924
|
-
args: [forwardRef(() => DocPageSamplesContentDirectiveV2)]
|
|
1925
|
-
}], pageSectionsContent: [{
|
|
1926
|
-
type: ContentChildren,
|
|
1927
|
-
args: [forwardRef(() => DocPageSectionsContentDirectiveV2)]
|
|
1928
|
-
}], pageInteractiveContent: [{
|
|
1929
|
-
type: ContentChildren,
|
|
1930
|
-
args: [forwardRef(() => DocPageInteractiveContentDirectiveV2)]
|
|
1931
|
-
}], pageAccessibilityContent: [{
|
|
1932
|
-
type: ContentChildren,
|
|
1933
|
-
args: [forwardRef(() => DocPageAccessibilityContentDirectiveV2)]
|
|
1934
|
-
}], pageApiContent: [{
|
|
1935
|
-
type: ContentChildren,
|
|
1936
|
-
args: [forwardRef(() => DocPageApiContentDirectiveV2)]
|
|
1937
|
-
}], pageThemingContent: [{
|
|
1938
|
-
type: ContentChildren,
|
|
1939
|
-
args: [forwardRef(() => DocPageThemingContentDirectiveV2)]
|
|
1940
|
-
}], tabsContent: [{
|
|
1941
|
-
type: ViewChild,
|
|
1942
|
-
args: ['tabsContent']
|
|
1943
|
-
}] } });
|
|
1944
|
-
/* eslint-disable @angular-eslint/directive-selector */
|
|
1945
|
-
class DocPageOverviewContentDirectiveV2 {
|
|
1946
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DocPageOverviewContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1947
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: DocPageOverviewContentDirectiveV2, isStandalone: true, selector: "docPageOverviewV2", ngImport: i0 }); }
|
|
1948
|
-
}
|
|
1949
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DocPageOverviewContentDirectiveV2, decorators: [{
|
|
1950
|
-
type: Directive,
|
|
1951
|
-
args: [{ selector: 'docPageOverviewV2' }]
|
|
1952
|
-
}] });
|
|
1953
|
-
class DocPageOverviewDefaultContentDirectiveV2 {
|
|
1954
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DocPageOverviewDefaultContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1955
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: DocPageOverviewDefaultContentDirectiveV2, isStandalone: true, selector: "docPageOverviewDefaultV2", ngImport: i0 }); }
|
|
1956
|
-
}
|
|
1957
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DocPageOverviewDefaultContentDirectiveV2, decorators: [{
|
|
1958
|
-
type: Directive,
|
|
1959
|
-
args: [{ selector: 'docPageOverviewDefaultV2' }]
|
|
1960
|
-
}] });
|
|
1961
|
-
class DocPageInteractiveContentDirectiveV2 {
|
|
1962
|
-
constructor() {
|
|
1963
|
-
this.title = 'ADVANCED EXAMPLES';
|
|
1964
|
-
this.subTitle = 'Advanced use cases';
|
|
1965
|
-
}
|
|
1966
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DocPageInteractiveContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1967
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: DocPageInteractiveContentDirectiveV2, isStandalone: true, selector: "docPageInteractiveV2", inputs: { title: "title", subTitle: "subTitle" }, ngImport: i0 }); }
|
|
1968
|
-
}
|
|
1969
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DocPageInteractiveContentDirectiveV2, decorators: [{
|
|
1970
|
-
type: Directive,
|
|
1971
|
-
args: [{ selector: 'docPageInteractiveV2' }]
|
|
1972
|
-
}], propDecorators: { title: [{
|
|
1973
|
-
type: Input
|
|
1974
|
-
}], subTitle: [{
|
|
1975
|
-
type: Input
|
|
1976
|
-
}] } });
|
|
1977
|
-
class DocPageSamplesContentDirectiveV2 {
|
|
1978
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DocPageSamplesContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1979
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: DocPageSamplesContentDirectiveV2, isStandalone: true, selector: "docPageSamplesV2", ngImport: i0 }); }
|
|
1980
|
-
}
|
|
1981
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DocPageSamplesContentDirectiveV2, decorators: [{
|
|
1982
|
-
type: Directive,
|
|
1983
|
-
args: [{ selector: 'docPageSamplesV2' }]
|
|
1984
|
-
}] });
|
|
1985
|
-
class DocPageSectionsContentDirectiveV2 {
|
|
1986
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DocPageSectionsContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1987
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: DocPageSectionsContentDirectiveV2, isStandalone: true, selector: "docPageSectionsV2", ngImport: i0 }); }
|
|
1988
|
-
}
|
|
1989
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DocPageSectionsContentDirectiveV2, decorators: [{
|
|
1990
|
-
type: Directive,
|
|
1991
|
-
args: [{ selector: 'docPageSectionsV2' }]
|
|
1992
|
-
}] });
|
|
1993
|
-
class DocPageAccessibilityContentDirectiveV2 {
|
|
1994
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DocPageAccessibilityContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1995
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: DocPageAccessibilityContentDirectiveV2, isStandalone: true, selector: "docPageAccessibilityV2", ngImport: i0 }); }
|
|
1487
|
+
class DocPageVisualSpecsContentDirective {
|
|
1488
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageVisualSpecsContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1489
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageVisualSpecsContentDirective, isStandalone: true, selector: "docPageVisualSpecs", ngImport: i0 }); }
|
|
1996
1490
|
}
|
|
1997
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1491
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageVisualSpecsContentDirective, decorators: [{
|
|
1998
1492
|
type: Directive,
|
|
1999
|
-
args: [{ selector: '
|
|
1493
|
+
args: [{ selector: 'docPageVisualSpecs' }]
|
|
2000
1494
|
}] });
|
|
2001
|
-
class
|
|
2002
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2003
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1495
|
+
class DocPagePlaygroundContentDirective {
|
|
1496
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePlaygroundContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1497
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPagePlaygroundContentDirective, isStandalone: true, selector: "docPagePlayground", ngImport: i0 }); }
|
|
2004
1498
|
}
|
|
2005
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1499
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePlaygroundContentDirective, decorators: [{
|
|
2006
1500
|
type: Directive,
|
|
2007
|
-
args: [{ selector: '
|
|
1501
|
+
args: [{ selector: 'docPagePlayground' }]
|
|
2008
1502
|
}] });
|
|
2009
|
-
class
|
|
2010
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2011
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1503
|
+
class DocPageThemingContentDirective {
|
|
1504
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageThemingContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1505
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageThemingContentDirective, isStandalone: true, selector: "docPageTheming", ngImport: i0 }); }
|
|
2012
1506
|
}
|
|
2013
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1507
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageThemingContentDirective, decorators: [{
|
|
2014
1508
|
type: Directive,
|
|
2015
|
-
args: [{ selector: '
|
|
1509
|
+
args: [{ selector: 'docPageTheming' }]
|
|
2016
1510
|
}] });
|
|
2017
1511
|
|
|
2018
1512
|
class DocPageCodeFabComponent {
|
|
2019
1513
|
constructor() {
|
|
2020
|
-
this.codeFolder = ''
|
|
2021
|
-
|
|
2022
|
-
this.
|
|
1514
|
+
this.codeFolder = input('', /* @ts-ignore */
|
|
1515
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
1516
|
+
this.showcase = input('design-patterns', /* @ts-ignore */
|
|
1517
|
+
...(ngDevMode ? [{ debugName: "showcase" }] : /* istanbul ignore next */ []));
|
|
1518
|
+
this.hasContentDialog = input(true, /* @ts-ignore */
|
|
1519
|
+
...(ngDevMode ? [{ debugName: "hasContentDialog" }] : /* istanbul ignore next */ []));
|
|
1520
|
+
this.dialog = viewChild('dialog', /* @ts-ignore */
|
|
1521
|
+
...(ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []));
|
|
2023
1522
|
this.asService = inject(EuiAppShellService);
|
|
2024
1523
|
}
|
|
2025
1524
|
toggleCode() {
|
|
2026
|
-
this.dialog
|
|
1525
|
+
this.dialog()?.openDialog();
|
|
2027
1526
|
}
|
|
2028
1527
|
onClose() {
|
|
2029
|
-
this.dialog
|
|
1528
|
+
this.dialog()?.closeDialog();
|
|
2030
1529
|
}
|
|
2031
1530
|
onOpenCode() {
|
|
2032
|
-
// eslint-disable-next-line max-len
|
|
2033
1531
|
const showcaseRoot = 'https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-ux-components/-/blob/master/src/app/features';
|
|
2034
|
-
const sourceRootPath = `${showcaseRoot}/showcase-${this.showcase}/`;
|
|
2035
|
-
window.open(sourceRootPath + this.codeFolder, '_blank');
|
|
1532
|
+
const sourceRootPath = `${showcaseRoot}/showcase-${this.showcase()}/`;
|
|
1533
|
+
window.open(sourceRootPath + this.codeFolder(), '_blank');
|
|
2036
1534
|
}
|
|
2037
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2038
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1535
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeFabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1536
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPageCodeFabComponent, isStandalone: true, selector: "eui-showcase-doc-page-code-fab", inputs: { codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, showcase: { classPropertyName: "showcase", publicName: "showcase", isSignal: true, isRequired: false, transformFunction: null }, hasContentDialog: { classPropertyName: "hasContentDialog", publicName: "hasContentDialog", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, 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", dependencies: [{ kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2$4.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "hasClosedOnClickOutside", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter", "classList"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }] }); }
|
|
2039
1537
|
}
|
|
2040
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1538
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeFabComponent, decorators: [{
|
|
2041
1539
|
type: Component,
|
|
2042
1540
|
args: [{ selector: 'eui-showcase-doc-page-code-fab', imports: [
|
|
2043
|
-
CommonModule,
|
|
2044
|
-
EuiTooltipDirective,
|
|
2045
1541
|
...EUI_ICON,
|
|
2046
1542
|
...EUI_DIALOG,
|
|
2047
|
-
...EUI_BUTTON
|
|
2048
|
-
], 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
|
|
2049
|
-
}], propDecorators: { codeFolder: [{
|
|
2050
|
-
type: Input
|
|
2051
|
-
}], showcase: [{
|
|
2052
|
-
type: Input
|
|
2053
|
-
}], hasContentDialog: [{
|
|
2054
|
-
type: Input
|
|
2055
|
-
}], dialog: [{
|
|
2056
|
-
type: ViewChild,
|
|
2057
|
-
args: ['dialog']
|
|
2058
|
-
}] } });
|
|
1543
|
+
...EUI_BUTTON
|
|
1544
|
+
], 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
|
+
}], 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 }] }] } });
|
|
2059
1546
|
|
|
2060
1547
|
class DocPageCodeModalComponent {
|
|
2061
1548
|
constructor() {
|
|
2062
|
-
this.width = '95vw'
|
|
1549
|
+
this.width = input('95vw', /* @ts-ignore */
|
|
1550
|
+
...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
1551
|
+
this.dialog = viewChild('dialog', /* @ts-ignore */
|
|
1552
|
+
...(ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []));
|
|
2063
1553
|
this.asService = inject(EuiAppShellService);
|
|
2064
1554
|
}
|
|
2065
1555
|
toggleCode() {
|
|
2066
|
-
this.dialog
|
|
1556
|
+
this.dialog()?.openDialog();
|
|
2067
1557
|
}
|
|
2068
1558
|
onClose() {
|
|
2069
|
-
this.dialog
|
|
1559
|
+
this.dialog()?.closeDialog();
|
|
2070
1560
|
}
|
|
2071
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2072
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1561
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1562
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: DocPageCodeModalComponent, isStandalone: true, selector: "eui-showcase-doc-page-code-modal", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "<button type=\"button\" euiButton euiCTAButton (click)=\"toggleCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\" />\n</button>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"width()\">\n <ng-content />\n</eui-dialog>\n", dependencies: [{ kind: "component", type: i2$4.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "hasClosedOnClickOutside", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter", "classList"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }] }); }
|
|
2073
1563
|
}
|
|
2074
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1564
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeModalComponent, decorators: [{
|
|
2075
1565
|
type: Component,
|
|
2076
1566
|
args: [{ selector: 'eui-showcase-doc-page-code-modal', imports: [
|
|
2077
|
-
CommonModule,
|
|
2078
1567
|
...EUI_DIALOG,
|
|
2079
1568
|
...EUI_ICON,
|
|
2080
|
-
], template: "<button type=\"button\" euiButton euiCTAButton (click)=\"toggleCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\" />\n</button>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"width\">\n <ng-content
|
|
2081
|
-
}], propDecorators: { width: [{
|
|
2082
|
-
type: Input
|
|
2083
|
-
}], dialog: [{
|
|
2084
|
-
type: ViewChild,
|
|
2085
|
-
args: ['dialog']
|
|
2086
|
-
}] } });
|
|
1569
|
+
], template: "<button type=\"button\" euiButton euiCTAButton (click)=\"toggleCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\" />\n</button>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"width()\">\n <ng-content />\n</eui-dialog>\n" }]
|
|
1570
|
+
}], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], dialog: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }] } });
|
|
2087
1571
|
|
|
2088
|
-
/* eslint-disable max-len */
|
|
2089
1572
|
/* eslint-disable */
|
|
2090
1573
|
class DocPagePatternSampleDirective {
|
|
2091
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2092
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1574
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1575
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPagePatternSampleDirective, isStandalone: true, selector: "docPagePatternSample", ngImport: i0 }); }
|
|
2093
1576
|
}
|
|
2094
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1577
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleDirective, decorators: [{
|
|
2095
1578
|
type: Directive,
|
|
2096
1579
|
args: [{ selector: 'docPagePatternSample' }]
|
|
2097
1580
|
}] });
|
|
2098
1581
|
class DocPagePatternDocDirective {
|
|
2099
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2100
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1582
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1583
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPagePatternDocDirective, isStandalone: true, selector: "docPagePatternDoc", ngImport: i0 }); }
|
|
2101
1584
|
}
|
|
2102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1585
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternDocDirective, decorators: [{
|
|
2103
1586
|
type: Directive,
|
|
2104
1587
|
args: [{ selector: 'docPagePatternDoc' }]
|
|
2105
1588
|
}] });
|
|
2106
1589
|
class DocPagePatternComponent {
|
|
2107
1590
|
constructor() {
|
|
2108
|
-
this.
|
|
2109
|
-
|
|
2110
|
-
this.
|
|
1591
|
+
this.id = input(undefined, /* @ts-ignore */
|
|
1592
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
1593
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
1594
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1595
|
+
this.anatomyImage = input(undefined, /* @ts-ignore */
|
|
1596
|
+
...(ngDevMode ? [{ debugName: "anatomyImage" }] : /* istanbul ignore next */ []));
|
|
1597
|
+
this.docEntries = input([], /* @ts-ignore */
|
|
1598
|
+
...(ngDevMode ? [{ debugName: "docEntries" }] : /* istanbul ignore next */ []));
|
|
1599
|
+
this.dos = input([], /* @ts-ignore */
|
|
1600
|
+
...(ngDevMode ? [{ debugName: "dos" }] : /* istanbul ignore next */ []));
|
|
1601
|
+
this.donts = input([], /* @ts-ignore */
|
|
1602
|
+
...(ngDevMode ? [{ debugName: "donts" }] : /* istanbul ignore next */ []));
|
|
1603
|
+
this.sourceUrl = input(undefined, /* @ts-ignore */
|
|
1604
|
+
...(ngDevMode ? [{ debugName: "sourceUrl" }] : /* istanbul ignore next */ []));
|
|
1605
|
+
this.figmaUrl = input(undefined, /* @ts-ignore */
|
|
1606
|
+
...(ngDevMode ? [{ debugName: "figmaUrl" }] : /* istanbul ignore next */ []));
|
|
1607
|
+
this.figmaEmbedSrc = input(undefined, /* @ts-ignore */
|
|
1608
|
+
...(ngDevMode ? [{ debugName: "figmaEmbedSrc" }] : /* istanbul ignore next */ []));
|
|
2111
1609
|
this.topPosToStartShowing = 100;
|
|
2112
1610
|
this.tabSelectedIndex = 0;
|
|
2113
1611
|
this.sanitizer = inject(DomSanitizer);
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
|
|
1612
|
+
effect(() => {
|
|
1613
|
+
const figmaEmbedSrc = this.figmaEmbedSrc();
|
|
1614
|
+
if (figmaEmbedSrc) {
|
|
1615
|
+
this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(figmaEmbedSrc);
|
|
1616
|
+
}
|
|
1617
|
+
});
|
|
2117
1618
|
}
|
|
2118
1619
|
checkScroll() {
|
|
2119
1620
|
const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
|
|
@@ -2124,17 +1625,10 @@ class DocPagePatternComponent {
|
|
|
2124
1625
|
this.isShowGoTop = false;
|
|
2125
1626
|
}
|
|
2126
1627
|
}
|
|
2127
|
-
|
|
2128
|
-
if (this.figmaEmbedSrc) {
|
|
2129
|
-
this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.figmaEmbedSrc);
|
|
2130
|
-
const iFrame = document.getElementById('iframe-figma');
|
|
2131
|
-
}
|
|
2132
|
-
}
|
|
2133
|
-
onNavigateToCode(event) {
|
|
2134
|
-
// eslint-disable-next-line max-len
|
|
1628
|
+
onNavigateToCode() {
|
|
2135
1629
|
const showcase = 'ux-patterns';
|
|
2136
1630
|
const sourceRootPath = `https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-${showcase}/-/blob/master/src/app/features/`;
|
|
2137
|
-
window.open(sourceRootPath + this.sourceUrl, '_blank');
|
|
1631
|
+
window.open(sourceRootPath + this.sourceUrl(), '_blank');
|
|
2138
1632
|
}
|
|
2139
1633
|
onTabActivate(event) {
|
|
2140
1634
|
this.tabSelectedIndex = event.index;
|
|
@@ -2146,170 +1640,139 @@ class DocPagePatternComponent {
|
|
|
2146
1640
|
behavior: 'smooth',
|
|
2147
1641
|
});
|
|
2148
1642
|
}
|
|
2149
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2150
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: DocPagePatternComponent, isStandalone: true, selector: "eui-showcase-doc-page-pattern", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", docEntries: "docEntries", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl", figmaEmbedSrc: "figmaEmbedSrc" }, host: { listeners: { "window:scroll": "checkScroll()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "sampleContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSampleDirective), descendants: true }, { propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternDocDirective), descendants: true }], ngImport: i0, template: "<eui-tabs (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-label>Usage and documentation</eui-label>\n <eui-tab-body>\n <h2 class=\"eui-u-c-primary eui-u-mb-none eui-u-text-h2\">{{ label }}</h2>\n\n <h3 class=\"eui-u-text-h3\">Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n </ng-container>\n <ng-template #screenshot>\n <ng-container *ngIf=\"figmaUrl !== 'PENDING_DS'\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Anatomy</h3>\n <img\n src=\"assets/images/design-system/{{ anatomyImage }}\"\n alt=\"Design anatomy image\"\n width=\"90%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n </ng-container>\n </ng-template>\n\n <ng-container *ngIf=\"docEntries.length !== 0\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Design system references</h3>\n\n <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n <eui-badge *ngIf=\"ref?.id\" euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n </div>\n </eui-card-header-title>\n <eui-card-header-right-content>\n <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\n </eui-chip>\n </eui-card-header-right-content>\n </eui-card-header>\n <eui-card-content>\n <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n\n <ng-container *ngIf=\"ref.whenToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n </ng-container>\n <ng-container *ngIf=\"ref.whenNotToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n </ng-container>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Do's</strong>\n </h6>\n <li *ngFor=\"let do of ref.dos\">{{ do }}</li>\n </ng-container>\n </div>\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Dont's</strong>\n </h6>\n <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n </ng-container>\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </ng-container>\n\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n <ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n Pending Design system publication. Will be available in a future release.\n </ng-container>\n <ng-template #figmaOK>\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n </ng-template>\n </eui-tab-body>\n </eui-tab>\n <eui-tab>\n <eui-label>Pattern sample</eui-label>\n <eui-tab-body>\n <ng-content select=\"docPagePatternSample\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tabs-right-content>\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode($event)\">\n <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n View sources\n </button>\n </eui-tabs-right-content>\n</eui-tabs>\n\n<button\n type=\"button\"\n *ngIf=\"isShowGoTop && tabSelectedIndex === 0\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-sh-5\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\"></eui-icon-svg>\n</button>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i3.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i3.EuiTabsRightContentComponent, selector: "eui-tabs-right-content" }, { kind: "component", type: i3.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i3.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab"] }, { kind: "component", type: i4$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i4$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i4$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i4$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i4$2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i4$2.EuiCardHeaderRightContentComponent, selector: "eui-card-header-right-content" }, { kind: "component", type: i6.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i6$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }, { kind: "component", type: i5.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1643
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1644
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPagePatternComponent, isStandalone: true, selector: "eui-showcase-doc-page-pattern", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, anatomyImage: { classPropertyName: "anatomyImage", publicName: "anatomyImage", isSignal: true, isRequired: false, transformFunction: null }, docEntries: { classPropertyName: "docEntries", publicName: "docEntries", isSignal: true, isRequired: false, transformFunction: null }, dos: { classPropertyName: "dos", publicName: "dos", isSignal: true, isRequired: false, transformFunction: null }, donts: { classPropertyName: "donts", publicName: "donts", isSignal: true, isRequired: false, transformFunction: null }, sourceUrl: { classPropertyName: "sourceUrl", publicName: "sourceUrl", isSignal: true, isRequired: false, transformFunction: null }, figmaUrl: { classPropertyName: "figmaUrl", publicName: "figmaUrl", isSignal: true, isRequired: false, transformFunction: null }, figmaEmbedSrc: { classPropertyName: "figmaEmbedSrc", publicName: "figmaEmbedSrc", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:scroll": "checkScroll()" }, classAttribute: "doc-page-pattern" }, ngImport: i0, template: "<eui-tabs (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-label>Usage and documentation</eui-label>\n <eui-tab-body>\n <h2 class=\"eui-u-c-primary eui-u-mb-none eui-u-text-h2\">{{ label() }}</h2>\n\n <h3 class=\"eui-u-text-h3\">Information</h3>\n <ng-content select=\"docPagePatternDoc\" />\n\n @if (figmaEmbedSrc()) {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n } @else {\n @if (figmaUrl() !== 'PENDING_DS') {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Anatomy</h3>\n <img\n src=\"assets/images/design-system/{{ anatomyImage() }}\"\n alt=\"Design anatomy image\"\n width=\"90%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n }\n }\n\n @if (docEntries().length !== 0) {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Design system references</h3>\n @for (ref of docEntries(); track ref) {\n <eui-card class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n @if (ref?.id) {\n <eui-badge euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n }\n <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n </div>\n </eui-card-header-title>\n <eui-card-header-right-content>\n <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n @if (ref.mandatory) {\n <span euiLabel><strong> Mandatory </strong></span>\n }\n @if (!ref.mandatory) {\n <span euiLabel><strong> Optional </strong></span>\n }\n </eui-chip>\n </eui-card-header-right-content>\n </eui-card-header>\n <eui-card-content>\n <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n @if (ref.whenToUse) {\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n }\n @if (ref.whenNotToUse) {\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n }\n <div class=\"row\">\n <div class=\"col-md-6\">\n @if (ref.dos && ref.dos.length !== 0) {\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\" />\n <strong>Do's</strong>\n </h6>\n @for (do of ref.dos; track do) {\n <li>{{ do }}</li>\n }\n }\n </div>\n <div class=\"col-md-6\">\n @if (ref.donts && ref.donts.length !== 0) {\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\" />\n <strong>Dont's</strong>\n </h6>\n @for (dont of ref.donts; track dont) {\n <li>{{ dont }}</li>\n }\n }\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n }\n }\n\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n @if (figmaUrl() === 'PENDING_DS') {\n Pending Design system publication. Will be available in a future release.\n } @else {\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl() }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label() }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n }\n </eui-tab-body>\n </eui-tab>\n <eui-tab>\n <eui-label>Pattern sample</eui-label>\n <eui-tab-body>\n <ng-content select=\"docPagePatternSample\" />\n </eui-tab-body>\n </eui-tab>\n\n <eui-tabs-right-content>\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode()\">\n <eui-icon-svg icon=\"eui-code\" />\n View sources\n </button>\n </eui-tabs-right-content>\n</eui-tabs>\n\n@if (isShowGoTop && tabSelectedIndex === 0) {\n<button\n type=\"button\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-sh-5\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\" />\n</button>\n}\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}\n"], dependencies: [{ kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabsRightContentComponent, selector: "eui-tabs-right-content" }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i3$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$1.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i3$1.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i3$1.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i3$1.EuiCardHeaderRightContentComponent, selector: "eui-card-header-right-content" }, { kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i5.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "ariaLabel", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }, { kind: "component", type: i2$3.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2151
1645
|
}
|
|
2152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1646
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternComponent, decorators: [{
|
|
2153
1647
|
type: Component,
|
|
2154
|
-
args: [{ selector: 'eui-showcase-doc-page-pattern', encapsulation: ViewEncapsulation.None, imports: [
|
|
2155
|
-
CommonModule,
|
|
1648
|
+
args: [{ selector: 'eui-showcase-doc-page-pattern', encapsulation: ViewEncapsulation.None, host: { class: 'doc-page-pattern' }, imports: [
|
|
2156
1649
|
...EUI_ICON,
|
|
2157
1650
|
...EUI_TABS,
|
|
2158
1651
|
...EUI_CARD,
|
|
2159
1652
|
...EUI_CHIP,
|
|
2160
1653
|
...EUI_BADGE,
|
|
2161
1654
|
...EUI_LABEL,
|
|
2162
|
-
], template: "<eui-tabs (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-label>Usage and documentation</eui-label>\n <eui-tab-body>\n <h2 class=\"eui-u-c-primary eui-u-mb-none eui-u-text-h2\">{{ label }}</h2>\n\n <h3 class=\"eui-u-text-h3\">Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n </ng-container>\n <ng-template #screenshot>\n <ng-container *ngIf=\"figmaUrl !== 'PENDING_DS'\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Anatomy</h3>\n <img\n src=\"assets/images/design-system/{{ anatomyImage }}\"\n alt=\"Design anatomy image\"\n width=\"90%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n </ng-container>\n </ng-template>\n\n <ng-container *ngIf=\"docEntries.length !== 0\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Design system references</h3>\n\n <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n <eui-badge *ngIf=\"ref?.id\" euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n </div>\n </eui-card-header-title>\n <eui-card-header-right-content>\n <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\n </eui-chip>\n </eui-card-header-right-content>\n </eui-card-header>\n <eui-card-content>\n <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n\n <ng-container *ngIf=\"ref.whenToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n </ng-container>\n <ng-container *ngIf=\"ref.whenNotToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n </ng-container>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Do's</strong>\n </h6>\n <li *ngFor=\"let do of ref.dos\">{{ do }}</li>\n </ng-container>\n </div>\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Dont's</strong>\n </h6>\n <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n </ng-container>\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </ng-container>\n\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n <ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n Pending Design system publication. Will be available in a future release.\n </ng-container>\n <ng-template #figmaOK>\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n </ng-template>\n </eui-tab-body>\n </eui-tab>\n <eui-tab>\n <eui-label>Pattern sample</eui-label>\n <eui-tab-body>\n <ng-content select=\"docPagePatternSample\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tabs-right-content>\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode($event)\">\n <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n View sources\n </button>\n </eui-tabs-right-content>\n</eui-tabs>\n\n<button\n type=\"button\"\n *ngIf=\"isShowGoTop && tabSelectedIndex === 0\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-sh-5\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\"></eui-icon-svg>\n</button>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}\n"] }]
|
|
2163
|
-
}], propDecorators: {
|
|
2164
|
-
type: HostBinding,
|
|
2165
|
-
args: ['class']
|
|
2166
|
-
}], sampleContent: [{
|
|
2167
|
-
type: ContentChild,
|
|
2168
|
-
args: [forwardRef(() => DocPagePatternSampleDirective)]
|
|
2169
|
-
}], docContent: [{
|
|
2170
|
-
type: ContentChild,
|
|
2171
|
-
args: [forwardRef(() => DocPagePatternDocDirective)]
|
|
2172
|
-
}], id: [{
|
|
2173
|
-
type: Input
|
|
2174
|
-
}], label: [{
|
|
2175
|
-
type: Input
|
|
2176
|
-
}], anatomyImage: [{
|
|
2177
|
-
type: Input
|
|
2178
|
-
}], docEntries: [{
|
|
2179
|
-
type: Input
|
|
2180
|
-
}], dos: [{
|
|
2181
|
-
type: Input
|
|
2182
|
-
}], donts: [{
|
|
2183
|
-
type: Input
|
|
2184
|
-
}], sourceUrl: [{
|
|
2185
|
-
type: Input
|
|
2186
|
-
}], figmaUrl: [{
|
|
2187
|
-
type: Input
|
|
2188
|
-
}], figmaEmbedSrc: [{
|
|
2189
|
-
type: Input
|
|
2190
|
-
}], checkScroll: [{
|
|
1655
|
+
], template: "<eui-tabs (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-label>Usage and documentation</eui-label>\n <eui-tab-body>\n <h2 class=\"eui-u-c-primary eui-u-mb-none eui-u-text-h2\">{{ label() }}</h2>\n\n <h3 class=\"eui-u-text-h3\">Information</h3>\n <ng-content select=\"docPagePatternDoc\" />\n\n @if (figmaEmbedSrc()) {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n } @else {\n @if (figmaUrl() !== 'PENDING_DS') {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Anatomy</h3>\n <img\n src=\"assets/images/design-system/{{ anatomyImage() }}\"\n alt=\"Design anatomy image\"\n width=\"90%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n }\n }\n\n @if (docEntries().length !== 0) {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Design system references</h3>\n @for (ref of docEntries(); track ref) {\n <eui-card class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n @if (ref?.id) {\n <eui-badge euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n }\n <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n </div>\n </eui-card-header-title>\n <eui-card-header-right-content>\n <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n @if (ref.mandatory) {\n <span euiLabel><strong> Mandatory </strong></span>\n }\n @if (!ref.mandatory) {\n <span euiLabel><strong> Optional </strong></span>\n }\n </eui-chip>\n </eui-card-header-right-content>\n </eui-card-header>\n <eui-card-content>\n <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n @if (ref.whenToUse) {\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n }\n @if (ref.whenNotToUse) {\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n }\n <div class=\"row\">\n <div class=\"col-md-6\">\n @if (ref.dos && ref.dos.length !== 0) {\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\" />\n <strong>Do's</strong>\n </h6>\n @for (do of ref.dos; track do) {\n <li>{{ do }}</li>\n }\n }\n </div>\n <div class=\"col-md-6\">\n @if (ref.donts && ref.donts.length !== 0) {\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\" />\n <strong>Dont's</strong>\n </h6>\n @for (dont of ref.donts; track dont) {\n <li>{{ dont }}</li>\n }\n }\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n }\n }\n\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n @if (figmaUrl() === 'PENDING_DS') {\n Pending Design system publication. Will be available in a future release.\n } @else {\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABL1BMVEX/////cmLyTh6iWf8Kz4MavP7yTBr5YUWeUP8AzX3UuP//bVwAt/6jV///rKTyRgr2TwCxX+kA032m6Mf3m4uabPb/aVf/8O8AzHmbSf/xPAD/a1rxQgDyShaaR/8Avv74pJP/urP/6Ob/ZVLQ7//839n5tqj/xL7/b1f/9O/59f/r3v+65/9jzP6yef/p+P+u4//Mqv/iz//cxf/I7P/fvf+U2v71/fqO5LzW9ed74LIp043/y8b4rJz0dln/i3/zXTX2jnf/19P/emv0bEv/p5//l4zzWCz2h270dVf4g2D2Whzt5v+6hfuzbfCuWOjE2+6nz+6BxO5lu+5o1v9Nx/7BlP930v63rf+UoP90lP7n1v/Prv/iwf/Onf+hefiWZPZi36O07dLf9+2A4bX7S8Q6AAAGG0lEQVR4nO2aeVcaZxSHZ6JYhsHYFjsig3UhaHG3RkHBxMRE2zR2M5SuaUW//2cow4CgwMz7uzl65x3v8/+cM8+5y7tdwxAEQRAEQRAEQRAEQRAEQRAEQRCEiFJcOVqYDuDt0wAWV2pFboFAikcv8rl8fiqA/LE9Gtd1Hcd5ubjELTKC5eNcfu5JCBOfmWHYrnOyWOK2GWQhn58I01Mz9HDdp9xCd6g9UfJTNmw5mjVuqX5e5dT8AEPTLJxya92wdJZX9IMMTduMSMsphvcXmqFpOq+55TxeK2cobmgWIqBYhARRQ7PAvgOYmYIEYUPTmWE2PAZqkGRon/AKTqt3UaKh6b7lFCzmQEGCIW8pvgFzlGRov+QTrMEhpBhyrop4CEmGfEHEq5BmaBa4dm+vph7I0OZqp3PYYk83NE0eQUqSEg0dngXjCF3t6YbuIovhO7yTUg1tnsPwGaEMqXXIszmllCHVsMAhOPOghhxnKFIrpRo6HGu+GOpvuBT7OizFvpcalC0N1ZBnY0o4HZL3NDwnxGnC4YlqyHN8Wnm4nbfD8w5FajVEQ6YHU0oh0s74XBc1y4Q0JRkyJWkLxXffT48hlyClm1IMGd/0S3iakm6E2QQpVzUEQ4fnkqbDGdpOCYa8z2vwEQo3ZLvw7nAEKuJvwKw56vEdVoqoocP6PurzPaQIGrqRmBqCFMF5mkgIthIVqEXIsBCBFPVZzikvGoCh7axwi/VYOlbdoqobOicRmWrrsKw2Xqps6NoRCqBPaSGvMsGnZGg7NvsqOJTai1xuam4iMJahhrbr2KcRmNcbQam28O6HzwM584bVB/nGxzRPF9ln9YJ5v7tz/uMXo/lprzRzl1Jp5udffr24uKjXP3zYfsatEMDq3mZyNpmcHAsgmRr4bGu/nkgnuqTTifr2FsPfh7N2PhssN9xwvd6z61luRC+Sa5uz4XqDhuvzg36+ZD1icfxNze+O4daQ+PUcG2w2g6yNJdX8bhuuB/h5ionIpGpKNYC3DRvBgp7jNqNVHztfK/v1G26ECrYU9znFuuzMAoI9QxXBaCimkAj2DMNTNCqJ+i0UwRvDfUXBliJzu1lVbqK3DJ8pC7bgNdxU76L9hoBfIrHBKbgL5mjHUD1H23n6nNFwEg1h23ALEkwk5vkEU2gV+oYNTJCzn47BIfQM0RAyBhFdKTqG+6ggXyWe4yH0DOdhwwTTMQNeC31DaC3swmNISdKx5B6epGxp+pEUw706wTDBswGH9zNtwxShDLn2NQS/luHvJEOe9QI7NnUN/yAZpjkE31MazdjknzRDjpu3+BuuPaghxzk4/jGMv6FBMtSplz6C9TD+e5qd2O9L/3rAswXTpWnsz4fxP+M/gnua+N+1Ue9LN9AQMr4/4UGk3Hlzvs3gldh+t1B9POyEkPPdwjinva5BEWR9e3oE74fwxka7N2DyO77aoEIU3vEfwSyGYfx9j/M0EYigx+69zUStM1rd4p7m2uajNJ4Y99lE4xHMlxrejHDIAPQwQ41mhD1WU/6cdxDD57zT6XTPLrJz3j5r/3w8//er0fy3O+yrref7jbrHRiPSs/qGUW5WLr8MJsP9j59C89JqMR6Ipa9huRJqp7dhRkVPY8OrqpqftoYZVT9dDS+zyoJ6Gl6qR1BPQ0hQR8NDSFBDwwpQg1oaHoCC+hlWQUHtDCtYEepnWIYFdTO8jrshIYSaGQLbUU0N4UaqmyElSfUybMbeENyRamhIKUO9DCkh1MqwjG66tTO8ir0hfHASw8gR/ywlGja5/xuAZnjA/dsAtBX/ivu3AbCL0q4h918j4Jc0LcFL7r9GoCwXVoX7ryFwwfGsTo2GdHyqcv8zBp6mOq33bfAb7zL3L4M00WeZQ+4/hgGDqF0I0UrUbKnwge71NWukHZTHTDTbkva4UjbM6nRu6ke1FLM6FqGP2pKhsaBaFLUWbNXieFgxaluDXcrBc19WVc8ueovm6DBammfoDZXhA6ZW9lC/rdoIyplq9o6kZVmHMUjQPg4qVStrdclWD3VvMEM5aGYq19fXleZBbLJTEARBEARBEARBEARBEARBEARBEHz+B91xJIzYVK0AAAAAAElFTkSuQmCC\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl() }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label() }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n }\n </eui-tab-body>\n </eui-tab>\n <eui-tab>\n <eui-label>Pattern sample</eui-label>\n <eui-tab-body>\n <ng-content select=\"docPagePatternSample\" />\n </eui-tab-body>\n </eui-tab>\n\n <eui-tabs-right-content>\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode()\">\n <eui-icon-svg icon=\"eui-code\" />\n View sources\n </button>\n </eui-tabs-right-content>\n</eui-tabs>\n\n@if (isShowGoTop && tabSelectedIndex === 0) {\n<button\n type=\"button\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-sh-5\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\" />\n</button>\n}\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}\n"] }]
|
|
1656
|
+
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], anatomyImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "anatomyImage", required: false }] }], docEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "docEntries", required: false }] }], dos: [{ type: i0.Input, args: [{ isSignal: true, alias: "dos", required: false }] }], donts: [{ type: i0.Input, args: [{ isSignal: true, alias: "donts", required: false }] }], sourceUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceUrl", required: false }] }], figmaUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "figmaUrl", required: false }] }], figmaEmbedSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "figmaEmbedSrc", required: false }] }], checkScroll: [{
|
|
2191
1657
|
type: HostListener,
|
|
2192
1658
|
args: ['window:scroll']
|
|
2193
1659
|
}] } });
|
|
2194
1660
|
|
|
2195
1661
|
class DocPagePatternSampleRefsComponent {
|
|
2196
1662
|
constructor() {
|
|
2197
|
-
this.
|
|
2198
|
-
|
|
1663
|
+
this.docEntries = input([], /* @ts-ignore */
|
|
1664
|
+
...(ngDevMode ? [{ debugName: "docEntries" }] : /* istanbul ignore next */ []));
|
|
1665
|
+
this.codeFolder = input(undefined, /* @ts-ignore */
|
|
1666
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
2199
1667
|
}
|
|
2200
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2201
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1668
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleRefsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1669
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPagePatternSampleRefsComponent, isStandalone: true, selector: "eui-showcase-doc-pattern-sample-refs", inputs: { docEntries: { classPropertyName: "docEntries", publicName: "docEntries", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-showcase-doc-page-pattern-sample-refs" }, ngImport: i0, template: "<h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n\n<div class=\"row\">\n @for (ref of docEntries(); track ref) {\n <div class=\"col-md-6 eui-u-mb-3xl\">\n <eui-card class=\"eui-u-height-100\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n @if (ref?.id) {\n <eui-badge [euiDanger]=\"ref.mandatory\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n }\n <span class=\"eui-u-f-l\">{{ ref.name }}</span>\n <eui-chip [euiDanger]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n @if (ref.mandatory) {\n <span euiLabel><strong> Mandatory </strong></span>\n }\n @if (!ref.mandatory) {\n <span euiLabel><strong> Optional </strong></span>\n }\n </eui-chip>\n </div>\n </eui-card-header-title>\n </eui-card-header>\n <eui-card-content class=\"eui-u-display-flex eui-u-flex-column eui-u-flex-gap-s\">\n <div class=\"eui-u-f-bold\">Description</div>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n @if (ref.whenToUse) {\n <div class=\"eui-u-f-bold\">When to use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n }\n @if (ref.whenNotToUse) {\n <div class=\"eui-u-f-bold\">When to not use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n }\n <div class=\"row eui-u-mt-l\">\n <div class=\"col-md-6\">\n @if (ref.dos && ref.dos.length !== 0) {\n <div class=\"eui-u-c-bg-success eui-u-p-xs\"></div>\n <div class=\"eui-u-c-s-success eui-u-f-bold eui-u-mt-s eui-u-mb-xs\">Do's</div>\n @for (do of ref.dos; track do) {\n <li>{{ do }}</li>\n }\n }\n </div>\n <div class=\"col-md-6\">\n @if (ref.donts && ref.donts.length !== 0) {\n <div class=\"eui-u-c-bg-danger eui-u-p-xs\"></div>\n <div class=\"eui-u-c-s-danger eui-u-mt-s eui-u-mb-xs eui-u-f-bold\">Dont's</div>\n @for (dont of ref.donts; track dont) {\n <li>{{ dont }}</li>\n }\n }\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </div>\n }\n</div>\n\n\n", styles: [":host{display:flex;flex-direction:column;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}:host .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-l-bold)}\n"], dependencies: [{ kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i3$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$1.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i3$1.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i5.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "ariaLabel", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }] }); }
|
|
2202
1670
|
}
|
|
2203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1671
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleRefsComponent, decorators: [{
|
|
2204
1672
|
type: Component,
|
|
2205
|
-
args: [{ selector: 'eui-showcase-doc-pattern-sample-refs', imports: [
|
|
2206
|
-
CommonModule,
|
|
1673
|
+
args: [{ selector: 'eui-showcase-doc-pattern-sample-refs', host: { class: 'eui-showcase-doc-page-pattern-sample-refs' }, imports: [
|
|
2207
1674
|
...EUI_CHIP,
|
|
2208
1675
|
...EUI_CARD,
|
|
2209
1676
|
...EUI_BADGE,
|
|
2210
|
-
], template: "<h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n\n<div class=\"row\">\n <div class=\"col-md-6 eui-u-mb-3xl\"
|
|
2211
|
-
}], propDecorators: {
|
|
2212
|
-
type: HostBinding,
|
|
2213
|
-
args: ['class']
|
|
2214
|
-
}], docEntries: [{
|
|
2215
|
-
type: Input
|
|
2216
|
-
}], codeFolder: [{
|
|
2217
|
-
type: Input
|
|
2218
|
-
}] } });
|
|
1677
|
+
], template: "<h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n\n<div class=\"row\">\n @for (ref of docEntries(); track ref) {\n <div class=\"col-md-6 eui-u-mb-3xl\">\n <eui-card class=\"eui-u-height-100\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n @if (ref?.id) {\n <eui-badge [euiDanger]=\"ref.mandatory\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n }\n <span class=\"eui-u-f-l\">{{ ref.name }}</span>\n <eui-chip [euiDanger]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n @if (ref.mandatory) {\n <span euiLabel><strong> Mandatory </strong></span>\n }\n @if (!ref.mandatory) {\n <span euiLabel><strong> Optional </strong></span>\n }\n </eui-chip>\n </div>\n </eui-card-header-title>\n </eui-card-header>\n <eui-card-content class=\"eui-u-display-flex eui-u-flex-column eui-u-flex-gap-s\">\n <div class=\"eui-u-f-bold\">Description</div>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n @if (ref.whenToUse) {\n <div class=\"eui-u-f-bold\">When to use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n }\n @if (ref.whenNotToUse) {\n <div class=\"eui-u-f-bold\">When to not use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n }\n <div class=\"row eui-u-mt-l\">\n <div class=\"col-md-6\">\n @if (ref.dos && ref.dos.length !== 0) {\n <div class=\"eui-u-c-bg-success eui-u-p-xs\"></div>\n <div class=\"eui-u-c-s-success eui-u-f-bold eui-u-mt-s eui-u-mb-xs\">Do's</div>\n @for (do of ref.dos; track do) {\n <li>{{ do }}</li>\n }\n }\n </div>\n <div class=\"col-md-6\">\n @if (ref.donts && ref.donts.length !== 0) {\n <div class=\"eui-u-c-bg-danger eui-u-p-xs\"></div>\n <div class=\"eui-u-c-s-danger eui-u-mt-s eui-u-mb-xs eui-u-f-bold\">Dont's</div>\n @for (dont of ref.donts; track dont) {\n <li>{{ dont }}</li>\n }\n }\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </div>\n }\n</div>\n\n\n", styles: [":host{display:flex;flex-direction:column;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}:host .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-l-bold)}\n"] }]
|
|
1678
|
+
}], propDecorators: { docEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "docEntries", required: false }] }], codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }] } });
|
|
2219
1679
|
|
|
2220
1680
|
/* eslint-disable */
|
|
2221
1681
|
class DocPagePatternSampleDocDirective {
|
|
2222
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2223
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1682
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1683
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPagePatternSampleDocDirective, isStandalone: true, selector: "eui-showcase-doc-pattern-sample-doc", ngImport: i0 }); }
|
|
2224
1684
|
}
|
|
2225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1685
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleDocDirective, decorators: [{
|
|
2226
1686
|
type: Directive,
|
|
2227
1687
|
args: [{ selector: 'eui-showcase-doc-pattern-sample-doc' }]
|
|
2228
1688
|
}] });
|
|
2229
1689
|
class DocPagePatternSampleComponent {
|
|
2230
1690
|
constructor() {
|
|
2231
|
-
this.
|
|
2232
|
-
|
|
2233
|
-
this.
|
|
2234
|
-
|
|
2235
|
-
this.
|
|
2236
|
-
|
|
2237
|
-
this.
|
|
2238
|
-
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
1691
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
1692
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1693
|
+
this.docEntries = input([], /* @ts-ignore */
|
|
1694
|
+
...(ngDevMode ? [{ debugName: "docEntries" }] : /* istanbul ignore next */ []));
|
|
1695
|
+
this.codeFolder = input(undefined, /* @ts-ignore */
|
|
1696
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
1697
|
+
this.refsImage = input(undefined, /* @ts-ignore */
|
|
1698
|
+
...(ngDevMode ? [{ debugName: "refsImage" }] : /* istanbul ignore next */ []));
|
|
1699
|
+
this.refsImage2 = input(undefined, /* @ts-ignore */
|
|
1700
|
+
...(ngDevMode ? [{ debugName: "refsImage2" }] : /* istanbul ignore next */ []));
|
|
1701
|
+
this.figmaLink = input(undefined, /* @ts-ignore */
|
|
1702
|
+
...(ngDevMode ? [{ debugName: "figmaLink" }] : /* istanbul ignore next */ []));
|
|
1703
|
+
this.aiLink = input(undefined, /* @ts-ignore */
|
|
1704
|
+
...(ngDevMode ? [{ debugName: "aiLink" }] : /* istanbul ignore next */ []));
|
|
1705
|
+
this.isSmall = input(false, /* @ts-ignore */
|
|
1706
|
+
...(ngDevMode ? [{ debugName: "isSmall" }] : /* istanbul ignore next */ []));
|
|
1707
|
+
this.isTiny = input(false, /* @ts-ignore */
|
|
1708
|
+
...(ngDevMode ? [{ debugName: "isTiny" }] : /* istanbul ignore next */ []));
|
|
1709
|
+
this.isMedium = input(false, /* @ts-ignore */
|
|
1710
|
+
...(ngDevMode ? [{ debugName: "isMedium" }] : /* istanbul ignore next */ []));
|
|
1711
|
+
this.isLarge = input(false, /* @ts-ignore */
|
|
1712
|
+
...(ngDevMode ? [{ debugName: "isLarge" }] : /* istanbul ignore next */ []));
|
|
1713
|
+
this.isExtraLarge = input(false, /* @ts-ignore */
|
|
1714
|
+
...(ngDevMode ? [{ debugName: "isExtraLarge" }] : /* istanbul ignore next */ []));
|
|
1715
|
+
this.hasAutoHeight = input(false, /* @ts-ignore */
|
|
1716
|
+
...(ngDevMode ? [{ debugName: "hasAutoHeight" }] : /* istanbul ignore next */ []));
|
|
1717
|
+
this.docContent = contentChild(forwardRef(() => DocPagePatternSampleDocDirective), /* @ts-ignore */
|
|
1718
|
+
...(ngDevMode ? [{ debugName: "docContent" }] : /* istanbul ignore next */ []));
|
|
2244
1719
|
}
|
|
2245
1720
|
openCode() {
|
|
2246
|
-
// eslint-disable-next-line max-len
|
|
2247
1721
|
const showcaseRoot = 'https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-ux-components/-/blob/master/src/app/features/showcase-design-patterns/';
|
|
2248
|
-
window.open(showcaseRoot + this.codeFolder, '_blank');
|
|
1722
|
+
window.open(showcaseRoot + this.codeFolder(), '_blank');
|
|
2249
1723
|
}
|
|
2250
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2251
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1724
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1725
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPagePatternSampleComponent, isStandalone: true, selector: "eui-showcase-doc-pattern-sample", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, docEntries: { classPropertyName: "docEntries", publicName: "docEntries", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, refsImage: { classPropertyName: "refsImage", publicName: "refsImage", isSignal: true, isRequired: false, transformFunction: null }, refsImage2: { classPropertyName: "refsImage2", publicName: "refsImage2", isSignal: true, isRequired: false, transformFunction: null }, figmaLink: { classPropertyName: "figmaLink", publicName: "figmaLink", isSignal: true, isRequired: false, transformFunction: null }, aiLink: { classPropertyName: "aiLink", publicName: "aiLink", isSignal: true, isRequired: false, transformFunction: null }, isSmall: { classPropertyName: "isSmall", publicName: "isSmall", isSignal: true, isRequired: false, transformFunction: null }, isTiny: { classPropertyName: "isTiny", publicName: "isTiny", isSignal: true, isRequired: false, transformFunction: null }, isMedium: { classPropertyName: "isMedium", publicName: "isMedium", isSignal: true, isRequired: false, transformFunction: null }, isLarge: { classPropertyName: "isLarge", publicName: "isLarge", isSignal: true, isRequired: false, transformFunction: null }, isExtraLarge: { classPropertyName: "isExtraLarge", publicName: "isExtraLarge", isSignal: true, isRequired: false, transformFunction: null }, hasAutoHeight: { classPropertyName: "hasAutoHeight", publicName: "hasAutoHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.no-code": "!codeFolder()" }, classAttribute: "eui-showcase-doc-page-pattern-sample" }, queries: [{ propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSampleDocDirective), descendants: true, isSignal: true }], ngImport: i0, template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label() }}</div>\n\n<div class=\"row\">\n@if (figmaLink()) {\n <div class=\"col-6\">\n <h4 class=\"eui-u-text-h4\">Figma reference</h4>\n <span>\n <a euiButton euiBasicButton euiPrimary href=\"{{figmaLink()}}\" class=\"eui-u-text-link-external\" target=\"_blank\">\n <svg viewBox=\"0 0 38 57\" style=\"height: 36px; width: 36px;\"><path fill=\"#1abcfe\" d=\"M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z\"></path><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\"></path><path fill=\"#ff7262\" d=\"M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z\"></path><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\"></path><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\"></path></svg>\n Link to Figma page pattern\n </a>\n </span>\n </div>\n}\n@if (aiLink()) {\n <div class=\"col-6\">\n <h4 class=\"eui-u-text-h4\">AI reference</h4>\n <span>\n <a euiButton euiBasicButton euiPrimary href=\"{{aiLink()}}\" class=\"eui-u-text-link\">\n <svg viewBox=\"0 0 24 24\" style=\"height: 48px; width: 48px;\" xmlns=\"http://www.w3.org/2000/svg\"><title>Kiro</title><path d=\"M18.8 0H5.2A5.2 5.2 0 000 5.2v13.6A5.2 5.2 0 005.2 24h13.6a5.2 5.2 0 005.2-5.2V5.2A5.2 5.2 0 0018.8 0z\" fill=\"#9046FF\"></path><path d=\"M7.97 16.376c-1.644 3.642 1.86 4.556 4.443 2.424.76 2.39 3.608.607 4.631-1.247 2.251-4.084 1.342-8.249 1.108-9.108-1.6-5.859-9.6-5.869-10.976.03-.323 1.033-.328 2.206-.507 3.423-.09.617-.16 1.009-.393 1.655-.139.373-.323.7-.62 1.257-.458.865-.264 2.53 2.101 1.665l.224-.1h-.01l-.001.001z\" fill=\"#fff\"></path><path d=\"M12.722 10.985c-.656 0-.755-.785-.755-1.252 0-.423.074-.756.218-.97a.61.61 0 01.537-.283c.229 0 .428.095.567.289.159.218.243.55.243.964 0 .785-.303 1.252-.805 1.252h-.005zm2.703 0c-.656 0-.755-.785-.755-1.252 0-.423.074-.756.219-.97a.61.61 0 01.536-.283c.229 0 .428.095.567.289.159.218.243.55.243.964 0 .785-.303 1.252-.805 1.252h-.005z\" fill=\"#000\"></path></svg>\n View AI generated page pattern\n </a>\n </span>\n </div>\n}\n</div>\n\n@if (docContent()) {\n <h4 class=\"eui-u-text-h4\">Information</h4>\n <ng-content select=\"eui-showcase-doc-pattern-sample-doc\" />\n}\n\n\n<h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Anatomy</h4>\n\n<div class=\"content-wrapper\">\n <div class=\"content\"\n [class.small]=\"isSmall()\" [class.medium]=\"isMedium()\"\n [class.large]=\"isLarge()\" [class.extra-large]=\"isExtraLarge()\" [class.tiny]=\"isTiny()\" [class.auto-height]=\"hasAutoHeight()\">\n @for (ref of docEntries(); track ref) {\n <eui-badge [euiDanger]=\"ref.mandatory\" [euiSecondary]=\"ref.outsidePattern\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-p-absolute\" [style]=\"ref.position\">\n {{ref.id}}\n </eui-badge>\n }\n <div class=\"sample-wrapper\">\n <ng-content />\n </div>\n </div>\n\n @if (codeFolder()) {\n <div class=\"eui-u-flex eui-u-flex-justify-content-center eui-u-mt-l\">\n <button euiButton euiCTAButton euiSizeS (click)=\"openCode()\">Check the code</button>\n </div>\n }\n</div>\n\n\n\n@if (refsImage()) {\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n <img class=\"refs-image\"\n src=\"assets/images/design-patterns/{{ refsImage() }}\"\n alt=\"Design anatomy image\"/>\n}\n\n@if (refsImage2()) {\n <img class=\"refs-image\"\n src=\"assets/images/design-patterns/{{ refsImage2() }}\"\n alt=\"Design anatomy image\"/>\n}\n", styles: [":host{display:flex;flex-direction:column;width:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}:host .content-wrapper{display:flex;height:100%;width:100%;padding:2rem 4rem;background-color:var(--eui-c-bg);position:relative;flex-direction:column}:host .content{display:flex;height:40rem;width:100%;position:relative;background-color:var(--eui-c-bg);box-shadow:var(--eui-sh-2)}:host .content.tiny{height:8rem}:host .content.small{height:10rem}:host .content.medium{height:20rem}:host .content.large{height:50rem}:host .content.extra-large{height:75rem}:host .content.auto-height{height:auto}:host .sample-wrapper{display:block;width:100%}:host .sample-wrapper ::ng-deep .sample{display:flex;width:100%}:host .sample-wrapper ::ng-deep eui-header{height:90px}:host img.refs-image{width:fit-content;margin-bottom:var(--eui-s-7xl)}:host.no-code .content-wrapper{padding:2rem}\n"], dependencies: [{ kind: "component", type: i5.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "ariaLabel", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }] }); }
|
|
2252
1726
|
}
|
|
2253
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1727
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleComponent, decorators: [{
|
|
2254
1728
|
type: Component,
|
|
2255
|
-
args: [{ selector: 'eui-showcase-doc-pattern-sample', imports: [
|
|
2256
|
-
CommonModule,
|
|
1729
|
+
args: [{ selector: 'eui-showcase-doc-pattern-sample', host: { class: 'eui-showcase-doc-page-pattern-sample', '[class.no-code]': '!codeFolder()' }, imports: [
|
|
2257
1730
|
...EUI_BADGE,
|
|
2258
1731
|
...EUI_BUTTON,
|
|
2259
|
-
], template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label }}</div>\n\n@if (figmaLink) {\n
|
|
2260
|
-
}], propDecorators: {
|
|
2261
|
-
type: HostBinding,
|
|
2262
|
-
args: ['class']
|
|
2263
|
-
}], label: [{
|
|
2264
|
-
type: Input
|
|
2265
|
-
}], docEntries: [{
|
|
2266
|
-
type: Input
|
|
2267
|
-
}], codeFolder: [{
|
|
2268
|
-
type: Input
|
|
2269
|
-
}], refsImage: [{
|
|
2270
|
-
type: Input
|
|
2271
|
-
}], refsImage2: [{
|
|
2272
|
-
type: Input
|
|
2273
|
-
}], figmaLink: [{
|
|
2274
|
-
type: Input
|
|
2275
|
-
}], isSmall: [{
|
|
2276
|
-
type: Input
|
|
2277
|
-
}], isTiny: [{
|
|
2278
|
-
type: Input
|
|
2279
|
-
}], isMedium: [{
|
|
2280
|
-
type: Input
|
|
2281
|
-
}], isLarge: [{
|
|
2282
|
-
type: Input
|
|
2283
|
-
}], isExtraLarge: [{
|
|
2284
|
-
type: Input
|
|
2285
|
-
}], hasAutoHeight: [{
|
|
2286
|
-
type: Input
|
|
2287
|
-
}], docContent: [{
|
|
2288
|
-
type: ContentChild,
|
|
2289
|
-
args: [forwardRef(() => DocPagePatternSampleDocDirective)]
|
|
2290
|
-
}] } });
|
|
1732
|
+
], template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label() }}</div>\n\n<div class=\"row\">\n@if (figmaLink()) {\n <div class=\"col-6\">\n <h4 class=\"eui-u-text-h4\">Figma reference</h4>\n <span>\n <a euiButton euiBasicButton euiPrimary href=\"{{figmaLink()}}\" class=\"eui-u-text-link-external\" target=\"_blank\">\n <svg viewBox=\"0 0 38 57\" style=\"height: 36px; width: 36px;\"><path fill=\"#1abcfe\" d=\"M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z\"></path><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\"></path><path fill=\"#ff7262\" d=\"M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z\"></path><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\"></path><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\"></path></svg>\n Link to Figma page pattern\n </a>\n </span>\n </div>\n}\n@if (aiLink()) {\n <div class=\"col-6\">\n <h4 class=\"eui-u-text-h4\">AI reference</h4>\n <span>\n <a euiButton euiBasicButton euiPrimary href=\"{{aiLink()}}\" class=\"eui-u-text-link\">\n <svg viewBox=\"0 0 24 24\" style=\"height: 48px; width: 48px;\" xmlns=\"http://www.w3.org/2000/svg\"><title>Kiro</title><path d=\"M18.8 0H5.2A5.2 5.2 0 000 5.2v13.6A5.2 5.2 0 005.2 24h13.6a5.2 5.2 0 005.2-5.2V5.2A5.2 5.2 0 0018.8 0z\" fill=\"#9046FF\"></path><path d=\"M7.97 16.376c-1.644 3.642 1.86 4.556 4.443 2.424.76 2.39 3.608.607 4.631-1.247 2.251-4.084 1.342-8.249 1.108-9.108-1.6-5.859-9.6-5.869-10.976.03-.323 1.033-.328 2.206-.507 3.423-.09.617-.16 1.009-.393 1.655-.139.373-.323.7-.62 1.257-.458.865-.264 2.53 2.101 1.665l.224-.1h-.01l-.001.001z\" fill=\"#fff\"></path><path d=\"M12.722 10.985c-.656 0-.755-.785-.755-1.252 0-.423.074-.756.218-.97a.61.61 0 01.537-.283c.229 0 .428.095.567.289.159.218.243.55.243.964 0 .785-.303 1.252-.805 1.252h-.005zm2.703 0c-.656 0-.755-.785-.755-1.252 0-.423.074-.756.219-.97a.61.61 0 01.536-.283c.229 0 .428.095.567.289.159.218.243.55.243.964 0 .785-.303 1.252-.805 1.252h-.005z\" fill=\"#000\"></path></svg>\n View AI generated page pattern\n </a>\n </span>\n </div>\n}\n</div>\n\n@if (docContent()) {\n <h4 class=\"eui-u-text-h4\">Information</h4>\n <ng-content select=\"eui-showcase-doc-pattern-sample-doc\" />\n}\n\n\n<h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Anatomy</h4>\n\n<div class=\"content-wrapper\">\n <div class=\"content\"\n [class.small]=\"isSmall()\" [class.medium]=\"isMedium()\"\n [class.large]=\"isLarge()\" [class.extra-large]=\"isExtraLarge()\" [class.tiny]=\"isTiny()\" [class.auto-height]=\"hasAutoHeight()\">\n @for (ref of docEntries(); track ref) {\n <eui-badge [euiDanger]=\"ref.mandatory\" [euiSecondary]=\"ref.outsidePattern\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-p-absolute\" [style]=\"ref.position\">\n {{ref.id}}\n </eui-badge>\n }\n <div class=\"sample-wrapper\">\n <ng-content />\n </div>\n </div>\n\n @if (codeFolder()) {\n <div class=\"eui-u-flex eui-u-flex-justify-content-center eui-u-mt-l\">\n <button euiButton euiCTAButton euiSizeS (click)=\"openCode()\">Check the code</button>\n </div>\n }\n</div>\n\n\n\n@if (refsImage()) {\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n <img class=\"refs-image\"\n src=\"assets/images/design-patterns/{{ refsImage() }}\"\n alt=\"Design anatomy image\"/>\n}\n\n@if (refsImage2()) {\n <img class=\"refs-image\"\n src=\"assets/images/design-patterns/{{ refsImage2() }}\"\n alt=\"Design anatomy image\"/>\n}\n", styles: [":host{display:flex;flex-direction:column;width:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}:host .content-wrapper{display:flex;height:100%;width:100%;padding:2rem 4rem;background-color:var(--eui-c-bg);position:relative;flex-direction:column}:host .content{display:flex;height:40rem;width:100%;position:relative;background-color:var(--eui-c-bg);box-shadow:var(--eui-sh-2)}:host .content.tiny{height:8rem}:host .content.small{height:10rem}:host .content.medium{height:20rem}:host .content.large{height:50rem}:host .content.extra-large{height:75rem}:host .content.auto-height{height:auto}:host .sample-wrapper{display:block;width:100%}:host .sample-wrapper ::ng-deep .sample{display:flex;width:100%}:host .sample-wrapper ::ng-deep eui-header{height:90px}:host img.refs-image{width:fit-content;margin-bottom:var(--eui-s-7xl)}:host.no-code .content-wrapper{padding:2rem}\n"] }]
|
|
1733
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], docEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "docEntries", required: false }] }], codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }], refsImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "refsImage", required: false }] }], refsImage2: [{ type: i0.Input, args: [{ isSignal: true, alias: "refsImage2", required: false }] }], figmaLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "figmaLink", required: false }] }], aiLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiLink", required: false }] }], isSmall: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSmall", required: false }] }], isTiny: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTiny", required: false }] }], isMedium: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMedium", required: false }] }], isLarge: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLarge", required: false }] }], isExtraLarge: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExtraLarge", required: false }] }], hasAutoHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasAutoHeight", required: false }] }], docContent: [{ type: i0.ContentChild, args: [forwardRef(() => DocPagePatternSampleDocDirective), { isSignal: true }] }] } });
|
|
2291
1734
|
|
|
2292
|
-
/* eslint-disable max-len */
|
|
2293
1735
|
/* eslint-disable */
|
|
2294
1736
|
class DocPagePatternSimpleDocDirective {
|
|
2295
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2296
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1737
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSimpleDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1738
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPagePatternSimpleDocDirective, isStandalone: true, selector: "docPagePatternDoc", ngImport: i0 }); }
|
|
2297
1739
|
}
|
|
2298
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1740
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSimpleDocDirective, decorators: [{
|
|
2299
1741
|
type: Directive,
|
|
2300
1742
|
args: [{ selector: 'docPagePatternDoc' }]
|
|
2301
1743
|
}] });
|
|
1744
|
+
const REPOSITORY_URL = (showcase) => `https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-${showcase}/-/blob/master/src/app/features/`;
|
|
2302
1745
|
class DocPagePatternSimpleComponent {
|
|
2303
1746
|
constructor() {
|
|
2304
|
-
this.
|
|
2305
|
-
|
|
2306
|
-
this.
|
|
1747
|
+
this.docContent = contentChild(forwardRef(() => DocPagePatternSimpleDocDirective), /* @ts-ignore */
|
|
1748
|
+
...(ngDevMode ? [{ debugName: "docContent" }] : /* istanbul ignore next */ []));
|
|
1749
|
+
this.id = input(undefined, /* @ts-ignore */
|
|
1750
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
1751
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
1752
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1753
|
+
this.anatomyImage = input(undefined, /* @ts-ignore */
|
|
1754
|
+
...(ngDevMode ? [{ debugName: "anatomyImage" }] : /* istanbul ignore next */ []));
|
|
1755
|
+
this.docEntries = input([], /* @ts-ignore */
|
|
1756
|
+
...(ngDevMode ? [{ debugName: "docEntries" }] : /* istanbul ignore next */ []));
|
|
1757
|
+
this.dos = input([], /* @ts-ignore */
|
|
1758
|
+
...(ngDevMode ? [{ debugName: "dos" }] : /* istanbul ignore next */ []));
|
|
1759
|
+
this.donts = input([], /* @ts-ignore */
|
|
1760
|
+
...(ngDevMode ? [{ debugName: "donts" }] : /* istanbul ignore next */ []));
|
|
1761
|
+
this.sourceUrl = input(undefined, /* @ts-ignore */
|
|
1762
|
+
...(ngDevMode ? [{ debugName: "sourceUrl" }] : /* istanbul ignore next */ []));
|
|
1763
|
+
this.figmaUrl = input(undefined, /* @ts-ignore */
|
|
1764
|
+
...(ngDevMode ? [{ debugName: "figmaUrl" }] : /* istanbul ignore next */ []));
|
|
1765
|
+
this.figmaEmbedSrc = input(undefined, /* @ts-ignore */
|
|
1766
|
+
...(ngDevMode ? [{ debugName: "figmaEmbedSrc" }] : /* istanbul ignore next */ []));
|
|
2307
1767
|
this.topPosToStartShowing = 100;
|
|
2308
1768
|
this.tabSelectedIndex = 0;
|
|
2309
1769
|
this.sanitizer = inject(DomSanitizer);
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
1770
|
+
effect(() => {
|
|
1771
|
+
const figmaEmbedSrc = this.figmaEmbedSrc();
|
|
1772
|
+
if (figmaEmbedSrc) {
|
|
1773
|
+
this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(figmaEmbedSrc);
|
|
1774
|
+
}
|
|
1775
|
+
});
|
|
2313
1776
|
}
|
|
2314
1777
|
checkScroll() {
|
|
2315
1778
|
const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
|
|
@@ -2320,17 +1783,10 @@ class DocPagePatternSimpleComponent {
|
|
|
2320
1783
|
this.isShowGoTop = false;
|
|
2321
1784
|
}
|
|
2322
1785
|
}
|
|
2323
|
-
|
|
2324
|
-
if (this.figmaEmbedSrc) {
|
|
2325
|
-
this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.figmaEmbedSrc);
|
|
2326
|
-
const iFrame = document.getElementById('iframe-figma');
|
|
2327
|
-
}
|
|
2328
|
-
}
|
|
2329
|
-
onNavigateToCode(event) {
|
|
2330
|
-
// eslint-disable-next-line max-len
|
|
1786
|
+
onNavigateToCode() {
|
|
2331
1787
|
const showcase = 'ux-patterns';
|
|
2332
|
-
const sourceRootPath =
|
|
2333
|
-
window.open(sourceRootPath + this.sourceUrl, '_blank');
|
|
1788
|
+
const sourceRootPath = REPOSITORY_URL(showcase);
|
|
1789
|
+
window.open(sourceRootPath + this.sourceUrl(), '_blank');
|
|
2334
1790
|
}
|
|
2335
1791
|
onTabSelect(event) {
|
|
2336
1792
|
this.tabSelectedIndex = event.index;
|
|
@@ -2342,209 +1798,180 @@ class DocPagePatternSimpleComponent {
|
|
|
2342
1798
|
behavior: 'smooth',
|
|
2343
1799
|
});
|
|
2344
1800
|
}
|
|
2345
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2346
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: DocPagePatternSimpleComponent, isStandalone: true, selector: "eui-showcase-doc-page-pattern-simple", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", docEntries: "docEntries", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl", figmaEmbedSrc: "figmaEmbedSrc" }, host: { listeners: { "window:scroll": "checkScroll()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSimpleDocDirective), descendants: true }], ngImport: i0, template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label }}</div>\n\n\n<h4 class=\"eui-u-text-h4\">Information</h4>\n<ng-content select=\"docPagePatternDoc\"></ng-content>\n\n<ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n</ng-container>\n<ng-template #screenshot>\n <ng-container *ngIf=\"figmaUrl !== 'PENDING_DS'\">\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Anatomy</h4>\n <img\n src=\"assets/images/design-system/{{ anatomyImage }}\"\n alt=\"Design anatomy image\"\n width=\"60%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n </ng-container>\n</ng-template>\n\n<ng-container *ngIf=\"docEntries.length !== 0\">\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n\n <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n <eui-avatar *ngIf=\"ref?.id\" euiSizeS euiDanger class=\"eui-u-mr-s\"><eui-avatar-text>{{ ref.id }}</eui-avatar-text></eui-avatar>\n <span class=\"eui-u-f-xl\">{{ ref.name }}</span>\n <eui-chip [euiDanger]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\n </eui-chip> \n </div>\n </eui-card-header-title>\n </eui-card-header>\n <eui-card-content>\n <div class=\"doc-page-section-title\">Description</div>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n\n <ng-container *ngIf=\"ref.whenToUse\">\n <div class=\"doc-page-section-title\">When to use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n </ng-container>\n <ng-container *ngIf=\"ref.whenNotToUse\">\n <div class=\"doc-page-section-title\">When to not use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n </ng-container>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n <div class=\"doc-page-section-title eui-u-c-s-success\">\n <eui-icon-svg\n icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Do's</strong>\n </div>\n <li *ngFor=\"let do of ref.dos\" class=\"eui-u-c-s-success eui-u-f-bold\">{{ do }}</li>\n </ng-container>\n </div>\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n <div class=\"doc-page-section-title eui-u-c-s-danger\">\n <eui-icon-svg\n icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Dont's</strong>\n </div>\n <li *ngFor=\"let dont of ref.donts\" class=\"eui-u-c-s-danger eui-u-f-bold\">{{ dont }}</li>\n </ng-container>\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n</ng-container>\n\n<h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n<ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n Pending Design system publication. Will be available in a future release.\n</ng-container>\n<ng-template #figmaOK>\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABL1BMVEX/////cmLyTh6iWf8Kz4MavP7yTBr5YUWeUP8AzX3UuP//bVwAt/6jV///rKTyRgr2TwCxX+kA032m6Mf3m4uabPb/aVf/8O8AzHmbSf/xPAD/a1rxQgDyShaaR/8Avv74pJP/urP/6Ob/ZVLQ7//839n5tqj/xL7/b1f/9O/59f/r3v+65/9jzP6yef/p+P+u4//Mqv/iz//cxf/I7P/fvf+U2v71/fqO5LzW9ed74LIp043/y8b4rJz0dln/i3/zXTX2jnf/19P/emv0bEv/p5//l4zzWCz2h270dVf4g2D2Whzt5v+6hfuzbfCuWOjE2+6nz+6BxO5lu+5o1v9Nx/7BlP930v63rf+UoP90lP7n1v/Prv/iwf/Onf+hefiWZPZi36O07dLf9+2A4bX7S8Q6AAAGG0lEQVR4nO2aeVcaZxSHZ6JYhsHYFjsig3UhaHG3RkHBxMRE2zR2M5SuaUW//2cow4CgwMz7uzl65x3v8/+cM8+5y7tdwxAEQRAEQRAEQRAEQRAEQRAEQRCEiFJcOVqYDuDt0wAWV2pFboFAikcv8rl8fiqA/LE9Gtd1Hcd5ubjELTKC5eNcfu5JCBOfmWHYrnOyWOK2GWQhn58I01Mz9HDdp9xCd6g9UfJTNmw5mjVuqX5e5dT8AEPTLJxya92wdJZX9IMMTduMSMsphvcXmqFpOq+55TxeK2cobmgWIqBYhARRQ7PAvgOYmYIEYUPTmWE2PAZqkGRon/AKTqt3UaKh6b7lFCzmQEGCIW8pvgFzlGRov+QTrMEhpBhyrop4CEmGfEHEq5BmaBa4dm+vph7I0OZqp3PYYk83NE0eQUqSEg0dngXjCF3t6YbuIovhO7yTUg1tnsPwGaEMqXXIszmllCHVsMAhOPOghhxnKFIrpRo6HGu+GOpvuBT7OizFvpcalC0N1ZBnY0o4HZL3NDwnxGnC4YlqyHN8Wnm4nbfD8w5FajVEQ6YHU0oh0s74XBc1y4Q0JRkyJWkLxXffT48hlyClm1IMGd/0S3iakm6E2QQpVzUEQ4fnkqbDGdpOCYa8z2vwEQo3ZLvw7nAEKuJvwKw56vEdVoqoocP6PurzPaQIGrqRmBqCFMF5mkgIthIVqEXIsBCBFPVZzikvGoCh7axwi/VYOlbdoqobOicRmWrrsKw2Xqps6NoRCqBPaSGvMsGnZGg7NvsqOJTai1xuam4iMJahhrbr2KcRmNcbQam28O6HzwM584bVB/nGxzRPF9ln9YJ5v7tz/uMXo/lprzRzl1Jp5udffr24uKjXP3zYfsatEMDq3mZyNpmcHAsgmRr4bGu/nkgnuqTTifr2FsPfh7N2PhssN9xwvd6z61luRC+Sa5uz4XqDhuvzg36+ZD1icfxNze+O4daQ+PUcG2w2g6yNJdX8bhuuB/h5ionIpGpKNYC3DRvBgp7jNqNVHztfK/v1G26ECrYU9znFuuzMAoI9QxXBaCimkAj2DMNTNCqJ+i0UwRvDfUXBliJzu1lVbqK3DJ8pC7bgNdxU76L9hoBfIrHBKbgL5mjHUD1H23n6nNFwEg1h23ALEkwk5vkEU2gV+oYNTJCzn47BIfQM0RAyBhFdKTqG+6ggXyWe4yH0DOdhwwTTMQNeC31DaC3swmNISdKx5B6epGxp+pEUw706wTDBswGH9zNtwxShDLn2NQS/luHvJEOe9QI7NnUN/yAZpjkE31MazdjknzRDjpu3+BuuPaghxzk4/jGMv6FBMtSplz6C9TD+e5qd2O9L/3rAswXTpWnsz4fxP+M/gnua+N+1Ue9LN9AQMr4/4UGk3Hlzvs3gldh+t1B9POyEkPPdwjinva5BEWR9e3oE74fwxka7N2DyO77aoEIU3vEfwSyGYfx9j/M0EYigx+69zUStM1rd4p7m2uajNJ4Y99lE4xHMlxrejHDIAPQwQ41mhD1WU/6cdxDD57zT6XTPLrJz3j5r/3w8//er0fy3O+yrref7jbrHRiPSs/qGUW5WLr8MJsP9j59C89JqMR6Ipa9huRJqp7dhRkVPY8OrqpqftoYZVT9dDS+zyoJ6Gl6qR1BPQ0hQR8NDSFBDwwpQg1oaHoCC+hlWQUHtDCtYEepnWIYFdTO8jrshIYSaGQLbUU0N4UaqmyElSfUybMbeENyRamhIKUO9DCkh1MqwjG66tTO8ir0hfHASw8gR/ywlGja5/xuAZnjA/dsAtBX/ivu3AbCL0q4h918j4Jc0LcFL7r9GoCwXVoX7ryFwwfGsTo2GdHyqcv8zBp6mOq33bfAb7zL3L4M00WeZQ+4/hgGDqF0I0UrUbKnwge71NWukHZTHTDTbkva4UjbM6nRu6ke1FLM6FqGP2pKhsaBaFLUWbNXieFgxaluDXcrBc19WVc8ueovm6DBammfoDZXhA6ZW9lC/rdoIyplq9o6kZVmHMUjQPg4qVStrdclWD3VvMEM5aGYq19fXleZBbLJTEARBEARBEARBEARBEARBEARBEHz+B91xJIzYVK0AAAAAAElFTkSuQmCC\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n</ng-template>\n\n<button\n type=\"button\"\n *ngIf=\"isShowGoTop && tabSelectedIndex === 0\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-sh-5\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\"></eui-icon-svg>\n</button>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}.doc-page-pattern .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-2xl-bold)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i4$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i4$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i4$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i4$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i4$2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i6.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i6$2.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "hasNoBackground", "isReverse", "colorPalette"] }, { kind: "component", type: i6$2.EuiAvatarTextComponent, selector: "eui-avatar-text" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1801
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1802
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPagePatternSimpleComponent, isStandalone: true, selector: "eui-showcase-doc-page-pattern-simple", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, anatomyImage: { classPropertyName: "anatomyImage", publicName: "anatomyImage", isSignal: true, isRequired: false, transformFunction: null }, docEntries: { classPropertyName: "docEntries", publicName: "docEntries", isSignal: true, isRequired: false, transformFunction: null }, dos: { classPropertyName: "dos", publicName: "dos", isSignal: true, isRequired: false, transformFunction: null }, donts: { classPropertyName: "donts", publicName: "donts", isSignal: true, isRequired: false, transformFunction: null }, sourceUrl: { classPropertyName: "sourceUrl", publicName: "sourceUrl", isSignal: true, isRequired: false, transformFunction: null }, figmaUrl: { classPropertyName: "figmaUrl", publicName: "figmaUrl", isSignal: true, isRequired: false, transformFunction: null }, figmaEmbedSrc: { classPropertyName: "figmaEmbedSrc", publicName: "figmaEmbedSrc", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:scroll": "checkScroll()" }, classAttribute: "doc-page-pattern" }, queries: [{ propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSimpleDocDirective), descendants: true, isSignal: true }], ngImport: i0, template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label() }}</div>\n\n\n<h4 class=\"eui-u-text-h4\">Information</h4>\n<ng-content select=\"docPagePatternDoc\" />\n\n@if (figmaEmbedSrc()) {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n} @else {\n @if (figmaUrl() !== 'PENDING_DS') {\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Anatomy</h4>\n <img\n src=\"assets/images/design-system/{{ anatomyImage() }}\"\n alt=\"Design anatomy image\"\n width=\"60%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n }\n}\n\n@if (docEntries().length !== 0) {\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n @for (ref of docEntries(); track ref) {\n <eui-card class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n @if (ref?.id) {\n <eui-avatar euiSizeS euiDanger class=\"eui-u-mr-s\"><eui-avatar-text>{{ ref.id }}</eui-avatar-text></eui-avatar>\n }\n <span class=\"eui-u-f-xl\">{{ ref.name }}</span>\n <eui-chip [euiDanger]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n @if (ref.mandatory) {\n <span euiLabel><strong> Mandatory </strong></span>\n }\n @if (!ref.mandatory) {\n <span euiLabel><strong> Optional </strong></span>\n }\n </eui-chip>\n </div>\n </eui-card-header-title>\n </eui-card-header>\n <eui-card-content>\n <div class=\"doc-page-section-title\">Description</div>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n @if (ref.whenToUse) {\n <div class=\"doc-page-section-title\">When to use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n }\n @if (ref.whenNotToUse) {\n <div class=\"doc-page-section-title\">When to not use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n }\n <div class=\"row\">\n <div class=\"col-md-6\">\n @if (ref.dos && ref.dos.length !== 0) {\n <div class=\"doc-page-section-title eui-u-c-s-success\">\n <eui-icon-svg icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\" />\n <strong>Do's</strong>\n </div>\n @for (do of ref.dos; track do) {\n <li class=\"eui-u-c-s-success eui-u-f-bold\">{{ do }}</li>\n }\n }\n </div>\n <div class=\"col-md-6\">\n @if (ref.donts && ref.donts.length !== 0) {\n <div class=\"doc-page-section-title eui-u-c-s-danger\">\n <eui-icon-svg icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\" />\n <strong>Dont's</strong>\n </div>\n @for (dont of ref.donts; track dont) {\n <li class=\"eui-u-c-s-danger eui-u-f-bold\">{{ dont }}</li>\n }\n }\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n }\n}\n\n<h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n@if (figmaUrl() === 'PENDING_DS') {\n Pending Design system publication. Will be available in a future release.\n} @else {\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl() }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label() }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n}\n\n@if (isShowGoTop && tabSelectedIndex === 0) {\n<button\n type=\"button\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-sh-5\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\" />\n</button>\n}\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}.doc-page-pattern .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-bold)}\n"], dependencies: [{ kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i3$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$1.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i3$1.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i3$1.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i5$1.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "ariaLabel", "hasShadow", "isShapeSquare", "hasNoBackground", "isReverse", "colorPalette"] }, { kind: "component", type: i5$1.EuiAvatarTextComponent, selector: "eui-avatar-text" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2347
1803
|
}
|
|
2348
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1804
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSimpleComponent, decorators: [{
|
|
2349
1805
|
type: Component,
|
|
2350
|
-
args: [{ selector: 'eui-showcase-doc-page-pattern-simple', encapsulation: ViewEncapsulation.None, imports: [
|
|
2351
|
-
CommonModule,
|
|
1806
|
+
args: [{ selector: 'eui-showcase-doc-page-pattern-simple', encapsulation: ViewEncapsulation.None, host: { class: 'doc-page-pattern' }, imports: [
|
|
2352
1807
|
...EUI_BUTTON,
|
|
2353
|
-
...EUI_TABS,
|
|
2354
1808
|
...EUI_ICON,
|
|
2355
1809
|
...EUI_CARD,
|
|
2356
1810
|
...EUI_CHIP,
|
|
2357
1811
|
...EUI_AVATAR,
|
|
2358
|
-
], template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label }}</div>\n\n\n<h4 class=\"eui-u-text-h4\">Information</h4>\n<ng-content select=\"docPagePatternDoc\"
|
|
2359
|
-
}], propDecorators: {
|
|
2360
|
-
type: HostBinding,
|
|
2361
|
-
args: ['class']
|
|
2362
|
-
}], docContent: [{
|
|
2363
|
-
type: ContentChild,
|
|
2364
|
-
args: [forwardRef(() => DocPagePatternSimpleDocDirective)]
|
|
2365
|
-
}], id: [{
|
|
2366
|
-
type: Input
|
|
2367
|
-
}], label: [{
|
|
2368
|
-
type: Input
|
|
2369
|
-
}], anatomyImage: [{
|
|
2370
|
-
type: Input
|
|
2371
|
-
}], docEntries: [{
|
|
2372
|
-
type: Input
|
|
2373
|
-
}], dos: [{
|
|
2374
|
-
type: Input
|
|
2375
|
-
}], donts: [{
|
|
2376
|
-
type: Input
|
|
2377
|
-
}], sourceUrl: [{
|
|
2378
|
-
type: Input
|
|
2379
|
-
}], figmaUrl: [{
|
|
2380
|
-
type: Input
|
|
2381
|
-
}], figmaEmbedSrc: [{
|
|
2382
|
-
type: Input
|
|
2383
|
-
}], checkScroll: [{
|
|
1812
|
+
], template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label() }}</div>\n\n\n<h4 class=\"eui-u-text-h4\">Information</h4>\n<ng-content select=\"docPagePatternDoc\" />\n\n@if (figmaEmbedSrc()) {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n} @else {\n @if (figmaUrl() !== 'PENDING_DS') {\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Anatomy</h4>\n <img\n src=\"assets/images/design-system/{{ anatomyImage() }}\"\n alt=\"Design anatomy image\"\n width=\"60%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n }\n}\n\n@if (docEntries().length !== 0) {\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n @for (ref of docEntries(); track ref) {\n <eui-card class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n @if (ref?.id) {\n <eui-avatar euiSizeS euiDanger class=\"eui-u-mr-s\"><eui-avatar-text>{{ ref.id }}</eui-avatar-text></eui-avatar>\n }\n <span class=\"eui-u-f-xl\">{{ ref.name }}</span>\n <eui-chip [euiDanger]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n @if (ref.mandatory) {\n <span euiLabel><strong> Mandatory </strong></span>\n }\n @if (!ref.mandatory) {\n <span euiLabel><strong> Optional </strong></span>\n }\n </eui-chip>\n </div>\n </eui-card-header-title>\n </eui-card-header>\n <eui-card-content>\n <div class=\"doc-page-section-title\">Description</div>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n @if (ref.whenToUse) {\n <div class=\"doc-page-section-title\">When to use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n }\n @if (ref.whenNotToUse) {\n <div class=\"doc-page-section-title\">When to not use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n }\n <div class=\"row\">\n <div class=\"col-md-6\">\n @if (ref.dos && ref.dos.length !== 0) {\n <div class=\"doc-page-section-title eui-u-c-s-success\">\n <eui-icon-svg icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\" />\n <strong>Do's</strong>\n </div>\n @for (do of ref.dos; track do) {\n <li class=\"eui-u-c-s-success eui-u-f-bold\">{{ do }}</li>\n }\n }\n </div>\n <div class=\"col-md-6\">\n @if (ref.donts && ref.donts.length !== 0) {\n <div class=\"doc-page-section-title eui-u-c-s-danger\">\n <eui-icon-svg icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\" />\n <strong>Dont's</strong>\n </div>\n @for (dont of ref.donts; track dont) {\n <li class=\"eui-u-c-s-danger eui-u-f-bold\">{{ dont }}</li>\n }\n }\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n }\n}\n\n<h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n@if (figmaUrl() === 'PENDING_DS') {\n Pending Design system publication. Will be available in a future release.\n} @else {\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl() }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label() }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n}\n\n@if (isShowGoTop && tabSelectedIndex === 0) {\n<button\n type=\"button\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-sh-5\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\" />\n</button>\n}\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}.doc-page-pattern .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-bold)}\n"] }]
|
|
1813
|
+
}], ctorParameters: () => [], propDecorators: { docContent: [{ type: i0.ContentChild, args: [forwardRef(() => DocPagePatternSimpleDocDirective), { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], anatomyImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "anatomyImage", required: false }] }], docEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "docEntries", required: false }] }], dos: [{ type: i0.Input, args: [{ isSignal: true, alias: "dos", required: false }] }], donts: [{ type: i0.Input, args: [{ isSignal: true, alias: "donts", required: false }] }], sourceUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceUrl", required: false }] }], figmaUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "figmaUrl", required: false }] }], figmaEmbedSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "figmaEmbedSrc", required: false }] }], checkScroll: [{
|
|
2384
1814
|
type: HostListener,
|
|
2385
1815
|
args: ['window:scroll']
|
|
2386
1816
|
}] } });
|
|
2387
1817
|
|
|
2388
1818
|
class DocSampleApiComponent {
|
|
2389
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2390
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1819
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSampleApiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1820
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: DocSampleApiComponent, isStandalone: true, selector: "eui-showcase-doc-sample-api", ngImport: i0, template: "" }); }
|
|
2391
1821
|
}
|
|
2392
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1822
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSampleApiComponent, decorators: [{
|
|
2393
1823
|
type: Component,
|
|
2394
1824
|
args: [{ selector: 'eui-showcase-doc-sample-api', template: "" }]
|
|
2395
1825
|
}] });
|
|
2396
1826
|
|
|
2397
1827
|
class DocSectionCodeComponent {
|
|
2398
1828
|
constructor() {
|
|
2399
|
-
this.
|
|
2400
|
-
|
|
1829
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
1830
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1831
|
+
this.content = input(undefined, /* @ts-ignore */
|
|
1832
|
+
...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
|
|
1833
|
+
this.styleClass = input(undefined, /* @ts-ignore */
|
|
1834
|
+
...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
|
|
1835
|
+
this.versionLabel = input(undefined, /* @ts-ignore */
|
|
1836
|
+
...(ngDevMode ? [{ debugName: "versionLabel" }] : /* istanbul ignore next */ []));
|
|
1837
|
+
this.isDeprecated = input(false, /* @ts-ignore */
|
|
1838
|
+
...(ngDevMode ? [{ debugName: "isDeprecated" }] : /* istanbul ignore next */ []));
|
|
1839
|
+
this.isCodeExpanded = signal(false, /* @ts-ignore */
|
|
1840
|
+
...(ngDevMode ? [{ debugName: "isCodeExpanded" }] : /* istanbul ignore next */ []));
|
|
1841
|
+
this.sectionDescription = contentChild(forwardRef(() => DocSectionCodeDescriptionTagDirective), /* @ts-ignore */
|
|
1842
|
+
...(ngDevMode ? [{ debugName: "sectionDescription" }] : /* istanbul ignore next */ []));
|
|
1843
|
+
this.sectionCodeHTML = contentChild(forwardRef(() => DocSectionCodeHtmlTagDirective), /* @ts-ignore */
|
|
1844
|
+
...(ngDevMode ? [{ debugName: "sectionCodeHTML" }] : /* istanbul ignore next */ []));
|
|
1845
|
+
this.sectionCodeTS = contentChild(forwardRef(() => DocSectionCodeTsTagDirective), /* @ts-ignore */
|
|
1846
|
+
...(ngDevMode ? [{ debugName: "sectionCodeTS" }] : /* istanbul ignore next */ []));
|
|
1847
|
+
this.sectionCodeSERVICE = contentChild(forwardRef(() => DocSectionCodeServiceTagDirective), /* @ts-ignore */
|
|
1848
|
+
...(ngDevMode ? [{ debugName: "sectionCodeSERVICE" }] : /* istanbul ignore next */ []));
|
|
1849
|
+
this.sectionCodeCSS = contentChild(forwardRef(() => DocSectionCodeCssTagDirective), /* @ts-ignore */
|
|
1850
|
+
...(ngDevMode ? [{ debugName: "sectionCodeCSS" }] : /* istanbul ignore next */ []));
|
|
1851
|
+
this.sectionCodeDOC = contentChild(forwardRef(() => DocSectionCodeDocTagDirective), /* @ts-ignore */
|
|
1852
|
+
...(ngDevMode ? [{ debugName: "sectionCodeDOC" }] : /* istanbul ignore next */ []));
|
|
2401
1853
|
}
|
|
2402
1854
|
toggleCode() {
|
|
2403
|
-
this.isCodeExpanded
|
|
1855
|
+
this.isCodeExpanded.update(v => !v);
|
|
2404
1856
|
}
|
|
2405
1857
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2406
1858
|
isDefined(object) {
|
|
2407
1859
|
return object;
|
|
2408
1860
|
}
|
|
2409
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2410
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1861
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1862
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocSectionCodeComponent, isStandalone: true, selector: "eui-showcase-doc-section-code", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, versionLabel: { classPropertyName: "versionLabel", publicName: "versionLabel", isSignal: true, isRequired: false, transformFunction: null }, isDeprecated: { classPropertyName: "isDeprecated", publicName: "isDeprecated", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sectionDescription", first: true, predicate: i0.forwardRef(() => DocSectionCodeDescriptionTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i0.forwardRef(() => DocSectionCodeHtmlTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeTS", first: true, predicate: i0.forwardRef(() => DocSectionCodeTsTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i0.forwardRef(() => DocSectionCodeServiceTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i0.forwardRef(() => DocSectionCodeCssTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i0.forwardRef(() => DocSectionCodeDocTagDirective), descendants: true, isSignal: true }], ngImport: i0, template: "<h5 class=\"section-title {{ styleClass() }}\">\n <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n <div [class.app-section-code--deprecated]=\"isDeprecated()\">\n {{ label() }}\n </div>\n <div class=\"ml-auto\">\n @if (versionLabel()) {\n <span class=\"eui-u-color-danger\">{{ versionLabel() }}</span>\n }\n <button type=\"button\" euiButton [euiOutline]=\"!isCodeExpanded()\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n @if (!isCodeExpanded()) {\n <span euiLabel>Code</span>\n }\n @if (isCodeExpanded()) {\n <span euiLabel>Hide Code</span>\n }\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n </div>\n @if (isDeprecated()) {\n <div>\n <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n </div>\n }\n</h5>\n\n@if (sectionDescription()) {\n <div class=\"eui-u-mv\">\n <ng-content select=\"sectionDescription\" />\n </div>\n}\n\n@if (isCodeExpanded()) {\n <eui-tabs>\n <eui-tab [isVisible]=\"isDefined(sectionCodeHTML())\">\n <eui-tab-header>\n <eui-label>HTML</eui-label>\n <eui-label euiSublabel>HyperText Markup Language</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\" /></code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeTS())\">\n <eui-tab-header>\n <eui-label>TS</eui-label>\n <eui-label euiSublabel>Typescript</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\" /></code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE())\">\n <eui-tab-header>\n <eui-label>Service</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\" /></code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeCSS())\">\n <eui-tab-header>\n <eui-label>CSS</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\" /></code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeDOC())\">\n <eui-tab-header>\n <eui-label>DOC</eui-label>\n <eui-label euiSublabel>Documentation</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"language-doc\">\n <ng-content select=\"sectionCodeDOC\" />\n </div>\n </eui-tab-body>\n </eui-tab>\n </eui-tabs>\n @if (!sectionCodeHTML() && !sectionCodeTS() && !sectionCodeCSS()) {\n <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content /></code></pre>\n }\n}\n", styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"], dependencies: [{ kind: "component", type: i2$3.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "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.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }] }); }
|
|
2411
1863
|
}
|
|
2412
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1864
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeComponent, decorators: [{
|
|
2413
1865
|
type: Component,
|
|
2414
1866
|
args: [{ selector: 'eui-showcase-doc-section-code', imports: [
|
|
2415
|
-
CommonModule,
|
|
2416
1867
|
...EUI_LABEL,
|
|
2417
1868
|
...EUI_TABS,
|
|
2418
1869
|
...EUI_BUTTON,
|
|
2419
|
-
], template: "<h5 class=\"section-title {{ styleClass }}\">\n <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n <div [class.app-section-code--deprecated]=\"isDeprecated\">\n {{ label }}\n </div>\n <div class=\"ml-auto\">\n
|
|
2420
|
-
}], propDecorators: { label: [{
|
|
2421
|
-
type: Input
|
|
2422
|
-
}], content: [{
|
|
2423
|
-
type: Input
|
|
2424
|
-
}], styleClass: [{
|
|
2425
|
-
type: Input
|
|
2426
|
-
}], versionLabel: [{
|
|
2427
|
-
type: Input
|
|
2428
|
-
}], isDeprecated: [{
|
|
2429
|
-
type: Input
|
|
2430
|
-
}], isCodeExpanded: [{
|
|
2431
|
-
type: Input
|
|
2432
|
-
}], sectionDescription: [{
|
|
2433
|
-
type: ContentChild,
|
|
2434
|
-
args: [forwardRef(() => DocSectionCodeDescriptionTagDirective)]
|
|
2435
|
-
}], sectionCodeHTML: [{
|
|
2436
|
-
type: ContentChild,
|
|
2437
|
-
args: [forwardRef(() => DocSectionCodeHtmlTagDirective)]
|
|
2438
|
-
}], sectionCodeTS: [{
|
|
2439
|
-
type: ContentChild,
|
|
2440
|
-
args: [forwardRef(() => DocSectionCodeTsTagDirective)]
|
|
2441
|
-
}], sectionCodeSERVICE: [{
|
|
2442
|
-
type: ContentChild,
|
|
2443
|
-
args: [forwardRef(() => DocSectionCodeServiceTagDirective)]
|
|
2444
|
-
}], sectionCodeCSS: [{
|
|
2445
|
-
type: ContentChild,
|
|
2446
|
-
args: [forwardRef(() => DocSectionCodeCssTagDirective)]
|
|
2447
|
-
}], sectionCodeDOC: [{
|
|
2448
|
-
type: ContentChild,
|
|
2449
|
-
args: [forwardRef(() => DocSectionCodeDocTagDirective)]
|
|
2450
|
-
}] } });
|
|
1870
|
+
], template: "<h5 class=\"section-title {{ styleClass() }}\">\n <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n <div [class.app-section-code--deprecated]=\"isDeprecated()\">\n {{ label() }}\n </div>\n <div class=\"ml-auto\">\n @if (versionLabel()) {\n <span class=\"eui-u-color-danger\">{{ versionLabel() }}</span>\n }\n <button type=\"button\" euiButton [euiOutline]=\"!isCodeExpanded()\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n @if (!isCodeExpanded()) {\n <span euiLabel>Code</span>\n }\n @if (isCodeExpanded()) {\n <span euiLabel>Hide Code</span>\n }\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n </div>\n @if (isDeprecated()) {\n <div>\n <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n </div>\n }\n</h5>\n\n@if (sectionDescription()) {\n <div class=\"eui-u-mv\">\n <ng-content select=\"sectionDescription\" />\n </div>\n}\n\n@if (isCodeExpanded()) {\n <eui-tabs>\n <eui-tab [isVisible]=\"isDefined(sectionCodeHTML())\">\n <eui-tab-header>\n <eui-label>HTML</eui-label>\n <eui-label euiSublabel>HyperText Markup Language</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\" /></code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeTS())\">\n <eui-tab-header>\n <eui-label>TS</eui-label>\n <eui-label euiSublabel>Typescript</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\" /></code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE())\">\n <eui-tab-header>\n <eui-label>Service</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\" /></code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeCSS())\">\n <eui-tab-header>\n <eui-label>CSS</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\" /></code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeDOC())\">\n <eui-tab-header>\n <eui-label>DOC</eui-label>\n <eui-label euiSublabel>Documentation</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"language-doc\">\n <ng-content select=\"sectionCodeDOC\" />\n </div>\n </eui-tab-body>\n </eui-tab>\n </eui-tabs>\n @if (!sectionCodeHTML() && !sectionCodeTS() && !sectionCodeCSS()) {\n <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content /></code></pre>\n }\n}\n", styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"] }]
|
|
1871
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], versionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "versionLabel", required: false }] }], isDeprecated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDeprecated", required: false }] }], sectionDescription: [{ type: i0.ContentChild, args: [forwardRef(() => DocSectionCodeDescriptionTagDirective), { isSignal: true }] }], sectionCodeHTML: [{ type: i0.ContentChild, args: [forwardRef(() => DocSectionCodeHtmlTagDirective), { isSignal: true }] }], sectionCodeTS: [{ type: i0.ContentChild, args: [forwardRef(() => DocSectionCodeTsTagDirective), { isSignal: true }] }], sectionCodeSERVICE: [{ type: i0.ContentChild, args: [forwardRef(() => DocSectionCodeServiceTagDirective), { isSignal: true }] }], sectionCodeCSS: [{ type: i0.ContentChild, args: [forwardRef(() => DocSectionCodeCssTagDirective), { isSignal: true }] }], sectionCodeDOC: [{ type: i0.ContentChild, args: [forwardRef(() => DocSectionCodeDocTagDirective), { isSignal: true }] }] } });
|
|
2451
1872
|
/* eslint-disable @angular-eslint/directive-selector */
|
|
2452
1873
|
class DocSectionCodeDescriptionTagDirective {
|
|
2453
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2454
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1874
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1875
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocSectionCodeDescriptionTagDirective, isStandalone: true, selector: "sectionDescription", ngImport: i0 }); }
|
|
2455
1876
|
}
|
|
2456
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1877
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, decorators: [{
|
|
2457
1878
|
type: Directive,
|
|
2458
1879
|
args: [{ selector: 'sectionDescription' }]
|
|
2459
1880
|
}] });
|
|
2460
1881
|
class DocSectionCodeHtmlTagDirective {
|
|
2461
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2462
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1882
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeHtmlTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1883
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocSectionCodeHtmlTagDirective, isStandalone: true, selector: "sectionCodeHTML", ngImport: i0 }); }
|
|
2463
1884
|
}
|
|
2464
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1885
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeHtmlTagDirective, decorators: [{
|
|
2465
1886
|
type: Directive,
|
|
2466
1887
|
args: [{ selector: 'sectionCodeHTML' }]
|
|
2467
1888
|
}] });
|
|
2468
1889
|
class DocSectionCodeTsTagDirective {
|
|
2469
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2470
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1890
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeTsTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1891
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocSectionCodeTsTagDirective, isStandalone: true, selector: "sectionCodeTS", ngImport: i0 }); }
|
|
2471
1892
|
}
|
|
2472
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1893
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeTsTagDirective, decorators: [{
|
|
2473
1894
|
type: Directive,
|
|
2474
1895
|
args: [{ selector: 'sectionCodeTS' }]
|
|
2475
1896
|
}] });
|
|
2476
1897
|
class DocSectionCodeServiceTagDirective {
|
|
2477
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2478
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1898
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeServiceTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1899
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocSectionCodeServiceTagDirective, isStandalone: true, selector: "sectionCodeSERVICE", ngImport: i0 }); }
|
|
2479
1900
|
}
|
|
2480
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1901
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeServiceTagDirective, decorators: [{
|
|
2481
1902
|
type: Directive,
|
|
2482
1903
|
args: [{ selector: 'sectionCodeSERVICE' }]
|
|
2483
1904
|
}] });
|
|
2484
1905
|
class DocSectionCodeCssTagDirective {
|
|
2485
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2486
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1906
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeCssTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1907
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocSectionCodeCssTagDirective, isStandalone: true, selector: "sectionCodeCSS", ngImport: i0 }); }
|
|
2487
1908
|
}
|
|
2488
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1909
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeCssTagDirective, decorators: [{
|
|
2489
1910
|
type: Directive,
|
|
2490
1911
|
args: [{ selector: 'sectionCodeCSS' }]
|
|
2491
1912
|
}] });
|
|
2492
1913
|
class DocSectionCodeDocTagDirective {
|
|
2493
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2494
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1914
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeDocTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1915
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocSectionCodeDocTagDirective, isStandalone: true, selector: "sectionCodeDOC", ngImport: i0 }); }
|
|
2495
1916
|
}
|
|
2496
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1917
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeDocTagDirective, decorators: [{
|
|
2497
1918
|
type: Directive,
|
|
2498
1919
|
args: [{ selector: 'sectionCodeDOC' }]
|
|
2499
1920
|
}] });
|
|
2500
1921
|
|
|
2501
1922
|
class LoremIpsumSampleComponent {
|
|
2502
1923
|
constructor() {
|
|
2503
|
-
this.textSize = 'large'
|
|
1924
|
+
this.textSize = input('large', /* @ts-ignore */
|
|
1925
|
+
...(ngDevMode ? [{ debugName: "textSize" }] : /* istanbul ignore next */ []));
|
|
2504
1926
|
}
|
|
2505
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2506
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: LoremIpsumSampleComponent, isStandalone: true, selector: "eui-showcase-doc-lorem-ipsum", inputs: { textSize: "textSize" }, ngImport: i0, template: "<div *ngIf=\"textSize === 'small'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"eui-u-mb-m\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque. Aenean\n consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed vitae tellus ac nisl facilisis posuere. Mauris cursus dui nec arcu molestie sodales. Morbi vel enim semper, luctus odio vitae,\n lacinia nisl. Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium. Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"eui-u-mb-m\">Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.</div>\n</div>\n\n<div *ngIf=\"textSize === 'medium'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"eui-u-mb-m\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus. Curabitur venenatis eros at eros ultrices, eu feugiat eros\n efficitur. Sed quis nulla non augue scelerisque gravida vitae sed neque. Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"eui-u-mb-m\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci. Suspendisse eu augue at nibh egestas eleifend. Ut tristique enim in\n lectus aliquam, non tincidunt tortor vulputate. Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"eui-u-mb-m\">\n Vestibulum hendrerit risus a libero gravida venenatis. Mauris non enim sit amet odio pellentesque scelerisque in et velit. Quisque\n efficitur eros ut magna rutrum aliquet. Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui. Nullam commodo mi quis\n nibh euismod interdum. In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"eui-u-mb-m\">\n Ut eget tellus a magna fermentum tempor at id erat. Nam fringilla eros sed leo facilisis, et mollis orci elementum. Donec\n consectetur libero sed arcu rhoncus, vel elementum augue mollis. Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed pharetra lorem in justo rhoncus tempor. Phasellus vel elit eget massa consectetur porttitor eu ut ex. Donec sed ex sit amet\n purus blandit pharetra. Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"eui-u-mb-m\">\n Pellentesque convallis nulla in lectus molestie mollis. Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"eui-u-mb-m\">Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.</div>\n <div class=\"eui-u-mb-m\">\n Pellentesque gravida diam quis orci suscipit hendrerit. Vestibulum congue sapien sed pretium gravida. Nullam ornare lectus sed\n pulvinar fringilla. Nam dictum eros sit amet lectus aliquet tincidunt. Quisque eu augue eget felis tincidunt hendrerit. Aenean vel\n lorem vel sem consequat congue.\n </div>\n <div class=\"eui-u-mb-m\">Phasellus finibus libero at blandit sollicitudin. Praesent pulvinar libero a lorem scelerisque sodales.</div>\n <div class=\"eui-u-mb-m\">Donec tempor quam eget turpis dignissim egestas. Pellentesque vulputate nisi eu ornare euismod.</div>\n</div>\n\n<div *ngIf=\"textSize === 'large'\">\n <div class=\"eui-u-mb-m\">\n Lorem ipsum dolor sit amet consectetur. Nec maecenas turpis eget curabitur. Neque accumsan nulla vestibulum vulputate. Etiam lorem\n sit leo aliquam. Penatibus suspendisse sit in metus sodales pretium erat tempor. Congue aliquam varius nec pellentesque. Diam\n tincidunt neque aliquam a natoque egestas nibh in urna. Volutpat enim erat magna sociis blandit odio ut convallis. Montes blandit\n maecenas pellentesque magna. Ipsum at porta justo massa aliquet vulputate sit. Nec non semper urna morbi nec ut in eu. Tristique\n morbi nam tempus id.\n </div>\n <div class=\"eui-u-mb-m\">\n Amet eu phasellus dignissim lacus. Pellentesque tristique sed leo eu mattis quam ut sem sed. Id lacus erat urna arcu ac risus\n sodales. Scelerisque risus auctor erat mattis habitant facilisis. Orci velit nunc fermentum condimentum volutpat. Nec tellus at\n risus cras. Malesuada ultrices vestibulum arcu sagittis quis purus. Sit ultricies suspendisse ante augue malesuada mattis eget\n fermentum et. Lobortis et ridiculus turpis elit a mi faucibus. Sit vitae nunc etiam euismod massa nisi nibh arcu nulla. Elit ipsum\n lorem vestibulum nulla senectus curabitur. Turpis non eu eu rhoncus. Dictum porttitor pulvinar commodo nec sapien est at erat et.\n Nisl pellentesque pellentesque tempus tristique commodo eget urna tempor. Porta mi accumsan senectus risus eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Velit vulputate amet id tellus. Quam aliquet eros hendrerit cursus id et amet in nam. Eget elementum diam ut magna porttitor. Cursus\n neque vulputate malesuada congue enim. Ac in sed et justo adipiscing habitasse elit tincidunt dictum. Dui ornare ac ligula duis. Sit\n mi a eu dictum est magna morbi. Morbi hendrerit non senectus sit platea gravida id. Fermentum vulputate arcu pretium cras elit.\n </div>\n <div class=\"eui-u-mb-m\">\n Enim et nunc eget ac commodo sagittis. Turpis facilisi enim enim nisi eu sed. Amet viverra felis in ac orci ullamcorper. At\n ridiculus enim nec velit nulla luctus lorem non ultricies. Urna gravida sem curabitur quis diam ut porttitor aliquam sapien. Id\n adipiscing libero feugiat imperdiet senectus mattis non nulla condimentum.\n </div>\n <div class=\"eui-u-mb-m\">\n Etiam felis parturient et amet. Enim neque eu risus ante tristique nisl nisl vulputate. Arcu turpis semper vitae ultrices sit\n ultrices. Sed arcu pharetra vel sapien in. Turpis vestibulum tellus quis arcu egestas viverra cursus quisque. Eu volutpat mauris\n sagittis integer fermentum fringilla penatibus. Velit et quis et arcu velit tortor.\n </div>\n <div class=\"eui-u-mb-m\">\n Nisl fringilla nibh eu nunc pellentesque dignissim vestibulum mus porttitor. Consequat non eu nulla lectus ultrices. Viverra duis\n enim aliquet ut massa laoreet consequat. Sociis dignissim sodales vitae maecenas nec aliquam. Volutpat feugiat urna id sed. In\n fringilla dui neque montes ut et lorem velit consequat. Ut fermentum amet dictum proin et. Aenean odio ac quisque ultrices tellus\n mattis posuere et curabitur. Proin est suspendisse iaculis nullam eros sit amet aliquam laoreet. Libero tincidunt quis et odio\n imperdiet risus neque. Odio et dui duis odio accumsan. Lacus nibh urna at risus euismod lobortis cursus. Porta risus mi gravida\n aliquet. Leo viverra diam vulputate sollicitudin cursus erat sed.\n </div>\n <div class=\"eui-u-mb-m\">\n Erat consectetur sem nulla sed viverra ipsum adipiscing nunc. Porttitor eget sodales integer maecenas tortor quam sit pharetra\n lorem. Egestas ut mauris urna vitae a mollis. Nam cursus amet sit dolor. Mattis mattis laoreet sed massa proin tristique ullamcorper\n commodo. Sit in tortor posuere nec lorem fringilla.\n </div>\n <div class=\"eui-u-mb-m\">\n Fringilla elementum quisque vitae pharetra risus pellentesque eu nulla. Enim egestas velit est tempor ut vulputate tellus tincidunt\n ut. Non enim lorem nec in mattis. Vitae nulla vitae lectus varius aliquet massa lectus morbi. Placerat vel consectetur commodo nibh\n ullamcorper vitae tellus sed. Nisi lacus quis at malesuada elementum. Turpis et ut egestas adipiscing et ac. Auctor aliquam dictum\n dolor diam sit tellus tempus. Elementum venenatis arcu id a. Duis imperdiet id elementum tempor facilisis rhoncus rhoncus posuere\n egestas. Imperdiet odio lorem posuere sit. Molestie amet quisque tellus phasellus nisi. Lobortis mi faucibus elit semper. Ipsum eu\n adipiscing fringilla at felis maecenas. Egestas tortor odio laoreet neque.\n </div>\n <div class=\"eui-u-mb-m\">\n Sollicitudin rhoncus nunc ultricies lorem massa sagittis integer elit. Consequat mauris elementum sed imperdiet libero odio non\n amet. Tortor condimentum non convallis posuere pulvinar. Neque malesuada volutpat sit quis. Ac justo gravida vitae mollis. Ut tellus\n nunc ultrices egestas vitae tellus sed. Pellentesque nunc id quisque scelerisque et pellentesque eu ultricies.\n </div>\n <div class=\"eui-u-mb-m\">\n Dolor rhoncus tempor netus sit mauris. Turpis curabitur amet eu lectus sem habitant magna non. Eros lorem eu lectus proin venenatis\n tellus. Velit praesent consectetur ligula venenatis magna sed dictum. Quisque vivamus ipsum mattis morbi pulvinar bibendum. Netus\n risus sit adipiscing augue augue eget est.\n </div>\n <div class=\"eui-u-mb-m\">\n Justo feugiat duis fames in luctus elit. Sit id in turpis quam habitasse amet ut sed sem. Ut luctus amet sit lacinia sed eu sed a\n senectus. Fusce gravida augue quis bibendum aliquet. Quam egestas quam iaculis urna condimentum amet. Odio aliquam massa vel\n vestibulum tincidunt dolor tincidunt netus facilisi. Ut sociis metus pellentesque leo amet. Diam lectus pretium id tincidunt\n habitasse. Eget tortor quisque tristique scelerisque quam vestibulum morbi ornare pellentesque. Nunc eget volutpat id mauris amet ut\n aliquet nunc dictumst. Elit blandit a suspendisse commodo. Velit quis ut varius leo pharetra risus leo eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Consequat phasellus ullamcorper mauris id tortor ultrices nunc. Lacinia eu sapien rhoncus lacinia sed augue justo molestie ornare.\n Integer ridiculus gravida pulvinar iaculis nisl eleifend senectus. Imperdiet vitae orci massa ac eget etiam est nulla. Netus nibh\n ipsum auctor eros nunc aliquam enim. Donec pretium vel amet blandit sed quisque sed. Tempor ipsum nunc leo ultricies ut. Odio tellus\n ultricies diam cras. Diam maecenas amet gravida nunc. Feugiat egestas eget ullamcorper consequat. Varius faucibus nisl dolor dolor\n diam ultrices odio iaculis lorem. Egestas tristique est egestas ornare. Tortor eu orci orci posuere blandit amet sit semper\n pharetra. Sed dictumst dolor phasellus urna nisl auctor sit in vulputate.\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
1927
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LoremIpsumSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1928
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: LoremIpsumSampleComponent, isStandalone: true, selector: "eui-showcase-doc-lorem-ipsum", inputs: { textSize: { classPropertyName: "textSize", publicName: "textSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (textSize() === 'small') {\n <div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n <div class=\"eui-u-mb-m\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque. Aenean\n consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed vitae tellus ac nisl facilisis posuere. Mauris cursus dui nec arcu molestie sodales. Morbi vel enim semper, luctus odio vitae,\n lacinia nisl. Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium. Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"eui-u-mb-m\">Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.</div>\n </div>\n}\n\n@if (textSize() === 'medium') {\n <div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n <div class=\"eui-u-mb-m\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus. Curabitur venenatis eros at eros ultrices, eu feugiat eros\n efficitur. Sed quis nulla non augue scelerisque gravida vitae sed neque. Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"eui-u-mb-m\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci. Suspendisse eu augue at nibh egestas eleifend. Ut tristique enim in\n lectus aliquam, non tincidunt tortor vulputate. Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"eui-u-mb-m\">\n Vestibulum hendrerit risus a libero gravida venenatis. Mauris non enim sit amet odio pellentesque scelerisque in et velit. Quisque\n efficitur eros ut magna rutrum aliquet. Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui. Nullam commodo mi quis\n nibh euismod interdum. In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"eui-u-mb-m\">\n Ut eget tellus a magna fermentum tempor at id erat. Nam fringilla eros sed leo facilisis, et mollis orci elementum. Donec\n consectetur libero sed arcu rhoncus, vel elementum augue mollis. Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed pharetra lorem in justo rhoncus tempor. Phasellus vel elit eget massa consectetur porttitor eu ut ex. Donec sed ex sit amet\n purus blandit pharetra. Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"eui-u-mb-m\">\n Pellentesque convallis nulla in lectus molestie mollis. Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"eui-u-mb-m\">Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.</div>\n <div class=\"eui-u-mb-m\">\n Pellentesque gravida diam quis orci suscipit hendrerit. Vestibulum congue sapien sed pretium gravida. Nullam ornare lectus sed\n pulvinar fringilla. Nam dictum eros sit amet lectus aliquet tincidunt. Quisque eu augue eget felis tincidunt hendrerit. Aenean vel\n lorem vel sem consequat congue.\n </div>\n <div class=\"eui-u-mb-m\">Phasellus finibus libero at blandit sollicitudin. Praesent pulvinar libero a lorem scelerisque sodales.</div>\n <div class=\"eui-u-mb-m\">Donec tempor quam eget turpis dignissim egestas. Pellentesque vulputate nisi eu ornare euismod.</div>\n </div>\n}\n\n@if (textSize() === 'large') {\n <div>\n <div class=\"eui-u-mb-m\">\n Lorem ipsum dolor sit amet consectetur. Nec maecenas turpis eget curabitur. Neque accumsan nulla vestibulum vulputate. Etiam lorem\n sit leo aliquam. Penatibus suspendisse sit in metus sodales pretium erat tempor. Congue aliquam varius nec pellentesque. Diam\n tincidunt neque aliquam a natoque egestas nibh in urna. Volutpat enim erat magna sociis blandit odio ut convallis. Montes blandit\n maecenas pellentesque magna. Ipsum at porta justo massa aliquet vulputate sit. Nec non semper urna morbi nec ut in eu. Tristique\n morbi nam tempus id.\n </div>\n <div class=\"eui-u-mb-m\">\n Amet eu phasellus dignissim lacus. Pellentesque tristique sed leo eu mattis quam ut sem sed. Id lacus erat urna arcu ac risus\n sodales. Scelerisque risus auctor erat mattis habitant facilisis. Orci velit nunc fermentum condimentum volutpat. Nec tellus at\n risus cras. Malesuada ultrices vestibulum arcu sagittis quis purus. Sit ultricies suspendisse ante augue malesuada mattis eget\n fermentum et. Lobortis et ridiculus turpis elit a mi faucibus. Sit vitae nunc etiam euismod massa nisi nibh arcu nulla. Elit ipsum\n lorem vestibulum nulla senectus curabitur. Turpis non eu eu rhoncus. Dictum porttitor pulvinar commodo nec sapien est at erat et.\n Nisl pellentesque pellentesque tempus tristique commodo eget urna tempor. Porta mi accumsan senectus risus eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Velit vulputate amet id tellus. Quam aliquet eros hendrerit cursus id et amet in nam. Eget elementum diam ut magna porttitor. Cursus\n neque vulputate malesuada congue enim. Ac in sed et justo adipiscing habitasse elit tincidunt dictum. Dui ornare ac ligula duis. Sit\n mi a eu dictum est magna morbi. Morbi hendrerit non senectus sit platea gravida id. Fermentum vulputate arcu pretium cras elit.\n </div>\n <div class=\"eui-u-mb-m\">\n Enim et nunc eget ac commodo sagittis. Turpis facilisi enim enim nisi eu sed. Amet viverra felis in ac orci ullamcorper. At\n ridiculus enim nec velit nulla luctus lorem non ultricies. Urna gravida sem curabitur quis diam ut porttitor aliquam sapien. Id\n adipiscing libero feugiat imperdiet senectus mattis non nulla condimentum.\n </div>\n <div class=\"eui-u-mb-m\">\n Etiam felis parturient et amet. Enim neque eu risus ante tristique nisl nisl vulputate. Arcu turpis semper vitae ultrices sit\n ultrices. Sed arcu pharetra vel sapien in. Turpis vestibulum tellus quis arcu egestas viverra cursus quisque. Eu volutpat mauris\n sagittis integer fermentum fringilla penatibus. Velit et quis et arcu velit tortor.\n </div>\n <div class=\"eui-u-mb-m\">\n Nisl fringilla nibh eu nunc pellentesque dignissim vestibulum mus porttitor. Consequat non eu nulla lectus ultrices. Viverra duis\n enim aliquet ut massa laoreet consequat. Sociis dignissim sodales vitae maecenas nec aliquam. Volutpat feugiat urna id sed. In\n fringilla dui neque montes ut et lorem velit consequat. Ut fermentum amet dictum proin et. Aenean odio ac quisque ultrices tellus\n mattis posuere et curabitur. Proin est suspendisse iaculis nullam eros sit amet aliquam laoreet. Libero tincidunt quis et odio\n imperdiet risus neque. Odio et dui duis odio accumsan. Lacus nibh urna at risus euismod lobortis cursus. Porta risus mi gravida\n aliquet. Leo viverra diam vulputate sollicitudin cursus erat sed.\n </div>\n <div class=\"eui-u-mb-m\">\n Erat consectetur sem nulla sed viverra ipsum adipiscing nunc. Porttitor eget sodales integer maecenas tortor quam sit pharetra\n lorem. Egestas ut mauris urna vitae a mollis. Nam cursus amet sit dolor. Mattis mattis laoreet sed massa proin tristique ullamcorper\n commodo. Sit in tortor posuere nec lorem fringilla.\n </div>\n <div class=\"eui-u-mb-m\">\n Fringilla elementum quisque vitae pharetra risus pellentesque eu nulla. Enim egestas velit est tempor ut vulputate tellus tincidunt\n ut. Non enim lorem nec in mattis. Vitae nulla vitae lectus varius aliquet massa lectus morbi. Placerat vel consectetur commodo nibh\n ullamcorper vitae tellus sed. Nisi lacus quis at malesuada elementum. Turpis et ut egestas adipiscing et ac. Auctor aliquam dictum\n dolor diam sit tellus tempus. Elementum venenatis arcu id a. Duis imperdiet id elementum tempor facilisis rhoncus rhoncus posuere\n egestas. Imperdiet odio lorem posuere sit. Molestie amet quisque tellus phasellus nisi. Lobortis mi faucibus elit semper. Ipsum eu\n adipiscing fringilla at felis maecenas. Egestas tortor odio laoreet neque.\n </div>\n <div class=\"eui-u-mb-m\">\n Sollicitudin rhoncus nunc ultricies lorem massa sagittis integer elit. Consequat mauris elementum sed imperdiet libero odio non\n amet. Tortor condimentum non convallis posuere pulvinar. Neque malesuada volutpat sit quis. Ac justo gravida vitae mollis. Ut tellus\n nunc ultrices egestas vitae tellus sed. Pellentesque nunc id quisque scelerisque et pellentesque eu ultricies.\n </div>\n <div class=\"eui-u-mb-m\">\n Dolor rhoncus tempor netus sit mauris. Turpis curabitur amet eu lectus sem habitant magna non. Eros lorem eu lectus proin venenatis\n tellus. Velit praesent consectetur ligula venenatis magna sed dictum. Quisque vivamus ipsum mattis morbi pulvinar bibendum. Netus\n risus sit adipiscing augue augue eget est.\n </div>\n <div class=\"eui-u-mb-m\">\n Justo feugiat duis fames in luctus elit. Sit id in turpis quam habitasse amet ut sed sem. Ut luctus amet sit lacinia sed eu sed a\n senectus. Fusce gravida augue quis bibendum aliquet. Quam egestas quam iaculis urna condimentum amet. Odio aliquam massa vel\n vestibulum tincidunt dolor tincidunt netus facilisi. Ut sociis metus pellentesque leo amet. Diam lectus pretium id tincidunt\n habitasse. Eget tortor quisque tristique scelerisque quam vestibulum morbi ornare pellentesque. Nunc eget volutpat id mauris amet ut\n aliquet nunc dictumst. Elit blandit a suspendisse commodo. Velit quis ut varius leo pharetra risus leo eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Consequat phasellus ullamcorper mauris id tortor ultrices nunc. Lacinia eu sapien rhoncus lacinia sed augue justo molestie ornare.\n Integer ridiculus gravida pulvinar iaculis nisl eleifend senectus. Imperdiet vitae orci massa ac eget etiam est nulla. Netus nibh\n ipsum auctor eros nunc aliquam enim. Donec pretium vel amet blandit sed quisque sed. Tempor ipsum nunc leo ultricies ut. Odio tellus\n ultricies diam cras. Diam maecenas amet gravida nunc. Feugiat egestas eget ullamcorper consequat. Varius faucibus nisl dolor dolor\n diam ultrices odio iaculis lorem. Egestas tristique est egestas ornare. Tortor eu orci orci posuere blandit amet sit semper\n pharetra. Sed dictumst dolor phasellus urna nisl auctor sit in vulputate.\n </div>\n </div>\n}\n" }); }
|
|
2507
1929
|
}
|
|
2508
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1930
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LoremIpsumSampleComponent, decorators: [{
|
|
2509
1931
|
type: Component,
|
|
2510
|
-
args: [{ selector: 'eui-showcase-doc-lorem-ipsum', imports: [
|
|
2511
|
-
|
|
2512
|
-
], template: "<div *ngIf=\"textSize === 'small'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"eui-u-mb-m\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque. Aenean\n consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed vitae tellus ac nisl facilisis posuere. Mauris cursus dui nec arcu molestie sodales. Morbi vel enim semper, luctus odio vitae,\n lacinia nisl. Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium. Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"eui-u-mb-m\">Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.</div>\n</div>\n\n<div *ngIf=\"textSize === 'medium'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"eui-u-mb-m\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus. Curabitur venenatis eros at eros ultrices, eu feugiat eros\n efficitur. Sed quis nulla non augue scelerisque gravida vitae sed neque. Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"eui-u-mb-m\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci. Suspendisse eu augue at nibh egestas eleifend. Ut tristique enim in\n lectus aliquam, non tincidunt tortor vulputate. Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"eui-u-mb-m\">\n Vestibulum hendrerit risus a libero gravida venenatis. Mauris non enim sit amet odio pellentesque scelerisque in et velit. Quisque\n efficitur eros ut magna rutrum aliquet. Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui. Nullam commodo mi quis\n nibh euismod interdum. In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"eui-u-mb-m\">\n Ut eget tellus a magna fermentum tempor at id erat. Nam fringilla eros sed leo facilisis, et mollis orci elementum. Donec\n consectetur libero sed arcu rhoncus, vel elementum augue mollis. Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed pharetra lorem in justo rhoncus tempor. Phasellus vel elit eget massa consectetur porttitor eu ut ex. Donec sed ex sit amet\n purus blandit pharetra. Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"eui-u-mb-m\">\n Pellentesque convallis nulla in lectus molestie mollis. Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"eui-u-mb-m\">Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.</div>\n <div class=\"eui-u-mb-m\">\n Pellentesque gravida diam quis orci suscipit hendrerit. Vestibulum congue sapien sed pretium gravida. Nullam ornare lectus sed\n pulvinar fringilla. Nam dictum eros sit amet lectus aliquet tincidunt. Quisque eu augue eget felis tincidunt hendrerit. Aenean vel\n lorem vel sem consequat congue.\n </div>\n <div class=\"eui-u-mb-m\">Phasellus finibus libero at blandit sollicitudin. Praesent pulvinar libero a lorem scelerisque sodales.</div>\n <div class=\"eui-u-mb-m\">Donec tempor quam eget turpis dignissim egestas. Pellentesque vulputate nisi eu ornare euismod.</div>\n</div>\n\n<div *ngIf=\"textSize === 'large'\">\n <div class=\"eui-u-mb-m\">\n Lorem ipsum dolor sit amet consectetur. Nec maecenas turpis eget curabitur. Neque accumsan nulla vestibulum vulputate. Etiam lorem\n sit leo aliquam. Penatibus suspendisse sit in metus sodales pretium erat tempor. Congue aliquam varius nec pellentesque. Diam\n tincidunt neque aliquam a natoque egestas nibh in urna. Volutpat enim erat magna sociis blandit odio ut convallis. Montes blandit\n maecenas pellentesque magna. Ipsum at porta justo massa aliquet vulputate sit. Nec non semper urna morbi nec ut in eu. Tristique\n morbi nam tempus id.\n </div>\n <div class=\"eui-u-mb-m\">\n Amet eu phasellus dignissim lacus. Pellentesque tristique sed leo eu mattis quam ut sem sed. Id lacus erat urna arcu ac risus\n sodales. Scelerisque risus auctor erat mattis habitant facilisis. Orci velit nunc fermentum condimentum volutpat. Nec tellus at\n risus cras. Malesuada ultrices vestibulum arcu sagittis quis purus. Sit ultricies suspendisse ante augue malesuada mattis eget\n fermentum et. Lobortis et ridiculus turpis elit a mi faucibus. Sit vitae nunc etiam euismod massa nisi nibh arcu nulla. Elit ipsum\n lorem vestibulum nulla senectus curabitur. Turpis non eu eu rhoncus. Dictum porttitor pulvinar commodo nec sapien est at erat et.\n Nisl pellentesque pellentesque tempus tristique commodo eget urna tempor. Porta mi accumsan senectus risus eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Velit vulputate amet id tellus. Quam aliquet eros hendrerit cursus id et amet in nam. Eget elementum diam ut magna porttitor. Cursus\n neque vulputate malesuada congue enim. Ac in sed et justo adipiscing habitasse elit tincidunt dictum. Dui ornare ac ligula duis. Sit\n mi a eu dictum est magna morbi. Morbi hendrerit non senectus sit platea gravida id. Fermentum vulputate arcu pretium cras elit.\n </div>\n <div class=\"eui-u-mb-m\">\n Enim et nunc eget ac commodo sagittis. Turpis facilisi enim enim nisi eu sed. Amet viverra felis in ac orci ullamcorper. At\n ridiculus enim nec velit nulla luctus lorem non ultricies. Urna gravida sem curabitur quis diam ut porttitor aliquam sapien. Id\n adipiscing libero feugiat imperdiet senectus mattis non nulla condimentum.\n </div>\n <div class=\"eui-u-mb-m\">\n Etiam felis parturient et amet. Enim neque eu risus ante tristique nisl nisl vulputate. Arcu turpis semper vitae ultrices sit\n ultrices. Sed arcu pharetra vel sapien in. Turpis vestibulum tellus quis arcu egestas viverra cursus quisque. Eu volutpat mauris\n sagittis integer fermentum fringilla penatibus. Velit et quis et arcu velit tortor.\n </div>\n <div class=\"eui-u-mb-m\">\n Nisl fringilla nibh eu nunc pellentesque dignissim vestibulum mus porttitor. Consequat non eu nulla lectus ultrices. Viverra duis\n enim aliquet ut massa laoreet consequat. Sociis dignissim sodales vitae maecenas nec aliquam. Volutpat feugiat urna id sed. In\n fringilla dui neque montes ut et lorem velit consequat. Ut fermentum amet dictum proin et. Aenean odio ac quisque ultrices tellus\n mattis posuere et curabitur. Proin est suspendisse iaculis nullam eros sit amet aliquam laoreet. Libero tincidunt quis et odio\n imperdiet risus neque. Odio et dui duis odio accumsan. Lacus nibh urna at risus euismod lobortis cursus. Porta risus mi gravida\n aliquet. Leo viverra diam vulputate sollicitudin cursus erat sed.\n </div>\n <div class=\"eui-u-mb-m\">\n Erat consectetur sem nulla sed viverra ipsum adipiscing nunc. Porttitor eget sodales integer maecenas tortor quam sit pharetra\n lorem. Egestas ut mauris urna vitae a mollis. Nam cursus amet sit dolor. Mattis mattis laoreet sed massa proin tristique ullamcorper\n commodo. Sit in tortor posuere nec lorem fringilla.\n </div>\n <div class=\"eui-u-mb-m\">\n Fringilla elementum quisque vitae pharetra risus pellentesque eu nulla. Enim egestas velit est tempor ut vulputate tellus tincidunt\n ut. Non enim lorem nec in mattis. Vitae nulla vitae lectus varius aliquet massa lectus morbi. Placerat vel consectetur commodo nibh\n ullamcorper vitae tellus sed. Nisi lacus quis at malesuada elementum. Turpis et ut egestas adipiscing et ac. Auctor aliquam dictum\n dolor diam sit tellus tempus. Elementum venenatis arcu id a. Duis imperdiet id elementum tempor facilisis rhoncus rhoncus posuere\n egestas. Imperdiet odio lorem posuere sit. Molestie amet quisque tellus phasellus nisi. Lobortis mi faucibus elit semper. Ipsum eu\n adipiscing fringilla at felis maecenas. Egestas tortor odio laoreet neque.\n </div>\n <div class=\"eui-u-mb-m\">\n Sollicitudin rhoncus nunc ultricies lorem massa sagittis integer elit. Consequat mauris elementum sed imperdiet libero odio non\n amet. Tortor condimentum non convallis posuere pulvinar. Neque malesuada volutpat sit quis. Ac justo gravida vitae mollis. Ut tellus\n nunc ultrices egestas vitae tellus sed. Pellentesque nunc id quisque scelerisque et pellentesque eu ultricies.\n </div>\n <div class=\"eui-u-mb-m\">\n Dolor rhoncus tempor netus sit mauris. Turpis curabitur amet eu lectus sem habitant magna non. Eros lorem eu lectus proin venenatis\n tellus. Velit praesent consectetur ligula venenatis magna sed dictum. Quisque vivamus ipsum mattis morbi pulvinar bibendum. Netus\n risus sit adipiscing augue augue eget est.\n </div>\n <div class=\"eui-u-mb-m\">\n Justo feugiat duis fames in luctus elit. Sit id in turpis quam habitasse amet ut sed sem. Ut luctus amet sit lacinia sed eu sed a\n senectus. Fusce gravida augue quis bibendum aliquet. Quam egestas quam iaculis urna condimentum amet. Odio aliquam massa vel\n vestibulum tincidunt dolor tincidunt netus facilisi. Ut sociis metus pellentesque leo amet. Diam lectus pretium id tincidunt\n habitasse. Eget tortor quisque tristique scelerisque quam vestibulum morbi ornare pellentesque. Nunc eget volutpat id mauris amet ut\n aliquet nunc dictumst. Elit blandit a suspendisse commodo. Velit quis ut varius leo pharetra risus leo eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Consequat phasellus ullamcorper mauris id tortor ultrices nunc. Lacinia eu sapien rhoncus lacinia sed augue justo molestie ornare.\n Integer ridiculus gravida pulvinar iaculis nisl eleifend senectus. Imperdiet vitae orci massa ac eget etiam est nulla. Netus nibh\n ipsum auctor eros nunc aliquam enim. Donec pretium vel amet blandit sed quisque sed. Tempor ipsum nunc leo ultricies ut. Odio tellus\n ultricies diam cras. Diam maecenas amet gravida nunc. Feugiat egestas eget ullamcorper consequat. Varius faucibus nisl dolor dolor\n diam ultrices odio iaculis lorem. Egestas tristique est egestas ornare. Tortor eu orci orci posuere blandit amet sit semper\n pharetra. Sed dictumst dolor phasellus urna nisl auctor sit in vulputate.\n </div>\n</div>\n" }]
|
|
2513
|
-
}], propDecorators: { textSize: [{
|
|
2514
|
-
type: Input
|
|
2515
|
-
}] } });
|
|
1932
|
+
args: [{ selector: 'eui-showcase-doc-lorem-ipsum', imports: [], template: "@if (textSize() === 'small') {\n <div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n <div class=\"eui-u-mb-m\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque. Aenean\n consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed vitae tellus ac nisl facilisis posuere. Mauris cursus dui nec arcu molestie sodales. Morbi vel enim semper, luctus odio vitae,\n lacinia nisl. Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium. Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"eui-u-mb-m\">Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.</div>\n </div>\n}\n\n@if (textSize() === 'medium') {\n <div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n <div class=\"eui-u-mb-m\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus. Curabitur venenatis eros at eros ultrices, eu feugiat eros\n efficitur. Sed quis nulla non augue scelerisque gravida vitae sed neque. Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"eui-u-mb-m\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci. Suspendisse eu augue at nibh egestas eleifend. Ut tristique enim in\n lectus aliquam, non tincidunt tortor vulputate. Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"eui-u-mb-m\">\n Vestibulum hendrerit risus a libero gravida venenatis. Mauris non enim sit amet odio pellentesque scelerisque in et velit. Quisque\n efficitur eros ut magna rutrum aliquet. Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui. Nullam commodo mi quis\n nibh euismod interdum. In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"eui-u-mb-m\">\n Ut eget tellus a magna fermentum tempor at id erat. Nam fringilla eros sed leo facilisis, et mollis orci elementum. Donec\n consectetur libero sed arcu rhoncus, vel elementum augue mollis. Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed pharetra lorem in justo rhoncus tempor. Phasellus vel elit eget massa consectetur porttitor eu ut ex. Donec sed ex sit amet\n purus blandit pharetra. Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"eui-u-mb-m\">\n Pellentesque convallis nulla in lectus molestie mollis. Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"eui-u-mb-m\">Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.</div>\n <div class=\"eui-u-mb-m\">\n Pellentesque gravida diam quis orci suscipit hendrerit. Vestibulum congue sapien sed pretium gravida. Nullam ornare lectus sed\n pulvinar fringilla. Nam dictum eros sit amet lectus aliquet tincidunt. Quisque eu augue eget felis tincidunt hendrerit. Aenean vel\n lorem vel sem consequat congue.\n </div>\n <div class=\"eui-u-mb-m\">Phasellus finibus libero at blandit sollicitudin. Praesent pulvinar libero a lorem scelerisque sodales.</div>\n <div class=\"eui-u-mb-m\">Donec tempor quam eget turpis dignissim egestas. Pellentesque vulputate nisi eu ornare euismod.</div>\n </div>\n}\n\n@if (textSize() === 'large') {\n <div>\n <div class=\"eui-u-mb-m\">\n Lorem ipsum dolor sit amet consectetur. Nec maecenas turpis eget curabitur. Neque accumsan nulla vestibulum vulputate. Etiam lorem\n sit leo aliquam. Penatibus suspendisse sit in metus sodales pretium erat tempor. Congue aliquam varius nec pellentesque. Diam\n tincidunt neque aliquam a natoque egestas nibh in urna. Volutpat enim erat magna sociis blandit odio ut convallis. Montes blandit\n maecenas pellentesque magna. Ipsum at porta justo massa aliquet vulputate sit. Nec non semper urna morbi nec ut in eu. Tristique\n morbi nam tempus id.\n </div>\n <div class=\"eui-u-mb-m\">\n Amet eu phasellus dignissim lacus. Pellentesque tristique sed leo eu mattis quam ut sem sed. Id lacus erat urna arcu ac risus\n sodales. Scelerisque risus auctor erat mattis habitant facilisis. Orci velit nunc fermentum condimentum volutpat. Nec tellus at\n risus cras. Malesuada ultrices vestibulum arcu sagittis quis purus. Sit ultricies suspendisse ante augue malesuada mattis eget\n fermentum et. Lobortis et ridiculus turpis elit a mi faucibus. Sit vitae nunc etiam euismod massa nisi nibh arcu nulla. Elit ipsum\n lorem vestibulum nulla senectus curabitur. Turpis non eu eu rhoncus. Dictum porttitor pulvinar commodo nec sapien est at erat et.\n Nisl pellentesque pellentesque tempus tristique commodo eget urna tempor. Porta mi accumsan senectus risus eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Velit vulputate amet id tellus. Quam aliquet eros hendrerit cursus id et amet in nam. Eget elementum diam ut magna porttitor. Cursus\n neque vulputate malesuada congue enim. Ac in sed et justo adipiscing habitasse elit tincidunt dictum. Dui ornare ac ligula duis. Sit\n mi a eu dictum est magna morbi. Morbi hendrerit non senectus sit platea gravida id. Fermentum vulputate arcu pretium cras elit.\n </div>\n <div class=\"eui-u-mb-m\">\n Enim et nunc eget ac commodo sagittis. Turpis facilisi enim enim nisi eu sed. Amet viverra felis in ac orci ullamcorper. At\n ridiculus enim nec velit nulla luctus lorem non ultricies. Urna gravida sem curabitur quis diam ut porttitor aliquam sapien. Id\n adipiscing libero feugiat imperdiet senectus mattis non nulla condimentum.\n </div>\n <div class=\"eui-u-mb-m\">\n Etiam felis parturient et amet. Enim neque eu risus ante tristique nisl nisl vulputate. Arcu turpis semper vitae ultrices sit\n ultrices. Sed arcu pharetra vel sapien in. Turpis vestibulum tellus quis arcu egestas viverra cursus quisque. Eu volutpat mauris\n sagittis integer fermentum fringilla penatibus. Velit et quis et arcu velit tortor.\n </div>\n <div class=\"eui-u-mb-m\">\n Nisl fringilla nibh eu nunc pellentesque dignissim vestibulum mus porttitor. Consequat non eu nulla lectus ultrices. Viverra duis\n enim aliquet ut massa laoreet consequat. Sociis dignissim sodales vitae maecenas nec aliquam. Volutpat feugiat urna id sed. In\n fringilla dui neque montes ut et lorem velit consequat. Ut fermentum amet dictum proin et. Aenean odio ac quisque ultrices tellus\n mattis posuere et curabitur. Proin est suspendisse iaculis nullam eros sit amet aliquam laoreet. Libero tincidunt quis et odio\n imperdiet risus neque. Odio et dui duis odio accumsan. Lacus nibh urna at risus euismod lobortis cursus. Porta risus mi gravida\n aliquet. Leo viverra diam vulputate sollicitudin cursus erat sed.\n </div>\n <div class=\"eui-u-mb-m\">\n Erat consectetur sem nulla sed viverra ipsum adipiscing nunc. Porttitor eget sodales integer maecenas tortor quam sit pharetra\n lorem. Egestas ut mauris urna vitae a mollis. Nam cursus amet sit dolor. Mattis mattis laoreet sed massa proin tristique ullamcorper\n commodo. Sit in tortor posuere nec lorem fringilla.\n </div>\n <div class=\"eui-u-mb-m\">\n Fringilla elementum quisque vitae pharetra risus pellentesque eu nulla. Enim egestas velit est tempor ut vulputate tellus tincidunt\n ut. Non enim lorem nec in mattis. Vitae nulla vitae lectus varius aliquet massa lectus morbi. Placerat vel consectetur commodo nibh\n ullamcorper vitae tellus sed. Nisi lacus quis at malesuada elementum. Turpis et ut egestas adipiscing et ac. Auctor aliquam dictum\n dolor diam sit tellus tempus. Elementum venenatis arcu id a. Duis imperdiet id elementum tempor facilisis rhoncus rhoncus posuere\n egestas. Imperdiet odio lorem posuere sit. Molestie amet quisque tellus phasellus nisi. Lobortis mi faucibus elit semper. Ipsum eu\n adipiscing fringilla at felis maecenas. Egestas tortor odio laoreet neque.\n </div>\n <div class=\"eui-u-mb-m\">\n Sollicitudin rhoncus nunc ultricies lorem massa sagittis integer elit. Consequat mauris elementum sed imperdiet libero odio non\n amet. Tortor condimentum non convallis posuere pulvinar. Neque malesuada volutpat sit quis. Ac justo gravida vitae mollis. Ut tellus\n nunc ultrices egestas vitae tellus sed. Pellentesque nunc id quisque scelerisque et pellentesque eu ultricies.\n </div>\n <div class=\"eui-u-mb-m\">\n Dolor rhoncus tempor netus sit mauris. Turpis curabitur amet eu lectus sem habitant magna non. Eros lorem eu lectus proin venenatis\n tellus. Velit praesent consectetur ligula venenatis magna sed dictum. Quisque vivamus ipsum mattis morbi pulvinar bibendum. Netus\n risus sit adipiscing augue augue eget est.\n </div>\n <div class=\"eui-u-mb-m\">\n Justo feugiat duis fames in luctus elit. Sit id in turpis quam habitasse amet ut sed sem. Ut luctus amet sit lacinia sed eu sed a\n senectus. Fusce gravida augue quis bibendum aliquet. Quam egestas quam iaculis urna condimentum amet. Odio aliquam massa vel\n vestibulum tincidunt dolor tincidunt netus facilisi. Ut sociis metus pellentesque leo amet. Diam lectus pretium id tincidunt\n habitasse. Eget tortor quisque tristique scelerisque quam vestibulum morbi ornare pellentesque. Nunc eget volutpat id mauris amet ut\n aliquet nunc dictumst. Elit blandit a suspendisse commodo. Velit quis ut varius leo pharetra risus leo eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Consequat phasellus ullamcorper mauris id tortor ultrices nunc. Lacinia eu sapien rhoncus lacinia sed augue justo molestie ornare.\n Integer ridiculus gravida pulvinar iaculis nisl eleifend senectus. Imperdiet vitae orci massa ac eget etiam est nulla. Netus nibh\n ipsum auctor eros nunc aliquam enim. Donec pretium vel amet blandit sed quisque sed. Tempor ipsum nunc leo ultricies ut. Odio tellus\n ultricies diam cras. Diam maecenas amet gravida nunc. Feugiat egestas eget ullamcorper consequat. Varius faucibus nisl dolor dolor\n diam ultrices odio iaculis lorem. Egestas tristique est egestas ornare. Tortor eu orci orci posuere blandit amet sit semper\n pharetra. Sed dictumst dolor phasellus urna nisl auctor sit in vulputate.\n </div>\n </div>\n}\n" }]
|
|
1933
|
+
}], propDecorators: { textSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "textSize", required: false }] }] } });
|
|
2516
1934
|
|
|
2517
1935
|
class PlaygroundComponent {
|
|
2518
1936
|
constructor() {
|
|
2519
|
-
this.title = 'eUI Playground'
|
|
2520
|
-
|
|
1937
|
+
this.title = input('eUI Playground', /* @ts-ignore */
|
|
1938
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
1939
|
+
this.htmlContent = input(undefined, /* @ts-ignore */
|
|
1940
|
+
...(ngDevMode ? [{ debugName: "htmlContent" }] : /* istanbul ignore next */ []));
|
|
1941
|
+
this.sampleId = input(undefined, /* @ts-ignore */
|
|
1942
|
+
...(ngDevMode ? [{ debugName: "sampleId" }] : /* istanbul ignore next */ []));
|
|
1943
|
+
this.typescriptContent = input(undefined, /* @ts-ignore */
|
|
1944
|
+
...(ngDevMode ? [{ debugName: "typescriptContent" }] : /* istanbul ignore next */ []));
|
|
1945
|
+
this.activated = input(false, /* @ts-ignore */
|
|
1946
|
+
...(ngDevMode ? [{ debugName: "activated" }] : /* istanbul ignore next */ []));
|
|
1947
|
+
this.modules = input(undefined, /* @ts-ignore */
|
|
1948
|
+
...(ngDevMode ? [{ debugName: "modules" }] : /* istanbul ignore next */ []));
|
|
2521
1949
|
this.isLoaded = false;
|
|
1950
|
+
this.stackblitzElWrapper = viewChild('container', { ...(ngDevMode ? { debugName: "stackblitzElWrapper" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
2522
1951
|
this.sb = inject(StackblitzService);
|
|
2523
|
-
|
|
2524
|
-
|
|
2525
|
-
if (changes.activated) {
|
|
2526
|
-
if (changes.activated.currentValue) {
|
|
1952
|
+
effect(() => {
|
|
1953
|
+
if (this.activated()) {
|
|
2527
1954
|
this.initStackblitz();
|
|
2528
1955
|
}
|
|
2529
1956
|
else {
|
|
2530
1957
|
this.isLoaded = false;
|
|
2531
1958
|
}
|
|
2532
|
-
}
|
|
1959
|
+
});
|
|
2533
1960
|
}
|
|
2534
1961
|
initStackblitz() {
|
|
2535
1962
|
this.sb.getStackblitzDependencies()
|
|
2536
1963
|
.then((deps) => {
|
|
2537
1964
|
const { dependencies, devDependencies } = deps;
|
|
2538
|
-
const { selector } = this.sb.extractComponentMetadata(this.typescriptContent);
|
|
2539
|
-
const moduleName = this.sb.extractModuleName(this.typescriptContent);
|
|
2540
|
-
const componentName = this.sb.extractComponentName(this.typescriptContent);
|
|
1965
|
+
const { selector } = this.sb.extractComponentMetadata(this.typescriptContent());
|
|
1966
|
+
const moduleName = this.sb.extractModuleName(this.typescriptContent());
|
|
1967
|
+
const componentName = this.sb.extractComponentName(this.typescriptContent());
|
|
2541
1968
|
const project = {
|
|
2542
|
-
title: this.title,
|
|
2543
|
-
description: `An eUI example for the ${this.title}.`,
|
|
1969
|
+
title: this.title(),
|
|
1970
|
+
description: `An eUI example for the ${this.title()}.`,
|
|
2544
1971
|
template: 'angular-cli',
|
|
2545
1972
|
files: {
|
|
2546
|
-
'src/component.html': this.htmlContent,
|
|
2547
|
-
'src/component.ts': moduleName ? this.sb.appendVitalNgModules(this.typescriptContent) : this.typescriptContent,
|
|
1973
|
+
'src/component.html': this.htmlContent(),
|
|
1974
|
+
'src/component.ts': moduleName ? this.sb.appendVitalNgModules(this.typescriptContent()) : this.typescriptContent(),
|
|
2548
1975
|
'src/main.ts': mainFile(moduleName, componentName),
|
|
2549
1976
|
'src/polyfills.ts': polyfillsFile,
|
|
2550
1977
|
'src/index.html': indexHtmlFile(selector),
|
|
@@ -2564,7 +1991,7 @@ class PlaygroundComponent {
|
|
|
2564
1991
|
},
|
|
2565
1992
|
dependencies,
|
|
2566
1993
|
};
|
|
2567
|
-
return sdk.embedProject(`stackblitz-${this.sampleId}`, project, {
|
|
1994
|
+
return sdk.embedProject(`stackblitz-${this.sampleId()}`, project, {
|
|
2568
1995
|
height: 500,
|
|
2569
1996
|
openFile: ['src/component.ts', 'src/component.html'],
|
|
2570
1997
|
});
|
|
@@ -2574,30 +2001,15 @@ class PlaygroundComponent {
|
|
|
2574
2001
|
this.isLoaded = true;
|
|
2575
2002
|
});
|
|
2576
2003
|
}
|
|
2577
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2578
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2004
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PlaygroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2005
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: PlaygroundComponent, isStandalone: true, selector: "eui-playground", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, htmlContent: { classPropertyName: "htmlContent", publicName: "htmlContent", isSignal: true, isRequired: false, transformFunction: null }, sampleId: { classPropertyName: "sampleId", publicName: "sampleId", isSignal: true, isRequired: false, transformFunction: null }, typescriptContent: { classPropertyName: "typescriptContent", publicName: "typescriptContent", isSignal: true, isRequired: false, transformFunction: null }, activated: { classPropertyName: "activated", publicName: "activated", isSignal: true, isRequired: false, transformFunction: null }, modules: { classPropertyName: "modules", publicName: "modules", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "stackblitzElWrapper", first: true, predicate: ["container"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n <iframe #container id=\"stackblitz-{{sampleId()}}\"></iframe>\n</eui-block-content>\n", dependencies: [{ kind: "component", type: i1$2.EuiBlockContentComponent, selector: "eui-block-content", inputs: ["role", "ariaLabel", "isBlocked"] }] }); }
|
|
2579
2006
|
}
|
|
2580
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2007
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PlaygroundComponent, decorators: [{
|
|
2581
2008
|
type: Component,
|
|
2582
2009
|
args: [{ selector: 'eui-playground', imports: [
|
|
2583
2010
|
...EUI_BLOCK_CONTENT,
|
|
2584
|
-
], template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n <iframe #container id=\"stackblitz-{{sampleId}}\"></iframe>\n</eui-block-content>\n" }]
|
|
2585
|
-
}], propDecorators: { title: [{
|
|
2586
|
-
type: Input
|
|
2587
|
-
}], htmlContent: [{
|
|
2588
|
-
type: Input
|
|
2589
|
-
}], sampleId: [{
|
|
2590
|
-
type: Input
|
|
2591
|
-
}], typescriptContent: [{
|
|
2592
|
-
type: Input
|
|
2593
|
-
}], activated: [{
|
|
2594
|
-
type: Input
|
|
2595
|
-
}], modules: [{
|
|
2596
|
-
type: Input
|
|
2597
|
-
}], stackblitzElWrapper: [{
|
|
2598
|
-
type: ViewChild,
|
|
2599
|
-
args: ['container', { read: ElementRef, static: true }]
|
|
2600
|
-
}] } });
|
|
2011
|
+
], template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n <iframe #container id=\"stackblitz-{{sampleId()}}\"></iframe>\n</eui-block-content>\n" }]
|
|
2012
|
+
}], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], htmlContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "htmlContent", required: false }] }], sampleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sampleId", required: false }] }], typescriptContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "typescriptContent", required: false }] }], activated: [{ type: i0.Input, args: [{ isSignal: true, alias: "activated", required: false }] }], modules: [{ type: i0.Input, args: [{ isSignal: true, alias: "modules", required: false }] }], stackblitzElWrapper: [{ type: i0.ViewChild, args: ['container', { ...{ read: ElementRef }, isSignal: true }] }] } });
|
|
2601
2013
|
|
|
2602
2014
|
const EUI_SHOWCASE = [
|
|
2603
2015
|
DocPageAccessibilityContentDirective,
|
|
@@ -2611,6 +2023,8 @@ const EUI_SHOWCASE = [
|
|
|
2611
2023
|
DocPageSamplesContentDirective,
|
|
2612
2024
|
DocPageSectionsContentDirective,
|
|
2613
2025
|
DocPageThemingContentDirective,
|
|
2026
|
+
DocPageVisualSpecsContentDirective,
|
|
2027
|
+
DocPagePlaygroundContentDirective,
|
|
2614
2028
|
DocPageCodeFabComponent,
|
|
2615
2029
|
DocPageCodeModalComponent,
|
|
2616
2030
|
DocPagePatternComponent,
|
|
@@ -2640,5 +2054,5 @@ const EUI_SHOWCASE = [
|
|
|
2640
2054
|
* Generated bundle index. Do not edit.
|
|
2641
2055
|
*/
|
|
2642
2056
|
|
|
2643
|
-
export { ConfigurationService, DocPageAccessibilityContentDirective,
|
|
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 };
|
|
2644
2058
|
//# sourceMappingURL=eui-showcase.mjs.map
|