@eui/showcase 23.0.0-alpha.1 → 23.0.0-alpha.10
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 +869 -1060
- package/fesm2022/eui-showcase.mjs.map +1 -1
- package/package.json +11 -10
- package/types/eui-showcase.d.ts +326 -285
- package/types/eui-showcase.d.ts.map +1 -1
|
@@ -1,44 +1,43 @@
|
|
|
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, DestroyRef, Injector, 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
|
|
16
|
-
import * as i4$1 from '@eui/components/eui-page-v2';
|
|
15
|
+
import { NgClass, Location } from '@angular/common';
|
|
16
|
+
import * as i3$1 from '@eui/components/eui-page-v2';
|
|
17
17
|
import { EUI_PAGE as EUI_PAGE$1 } from '@eui/components/eui-page-v2';
|
|
18
18
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
19
19
|
import { Clipboard } from '@angular/cdk/clipboard';
|
|
20
20
|
import { lastValueFrom, forkJoin, Observable } from 'rxjs';
|
|
21
21
|
import { EuiAppShellService, EuiGrowlService } from '@eui/core';
|
|
22
|
-
import * as
|
|
22
|
+
import * as i2$2 from '@eui/components/eui-tabs';
|
|
23
23
|
import { EUI_TABS } from '@eui/components/eui-tabs';
|
|
24
24
|
import sdk from '@stackblitz/sdk';
|
|
25
|
-
import * as
|
|
25
|
+
import * as i4 from '@eui/components/eui-label';
|
|
26
26
|
import { EUI_LABEL } from '@eui/components/eui-label';
|
|
27
|
-
import * as
|
|
27
|
+
import * as i3$2 from '@eui/components/eui-card';
|
|
28
28
|
import { EUI_CARD } from '@eui/components/eui-card';
|
|
29
|
-
import * as
|
|
29
|
+
import * as i1$1 from '@eui/components/eui-alert';
|
|
30
30
|
import { EUI_ALERT } from '@eui/components/eui-alert';
|
|
31
|
-
import * as
|
|
31
|
+
import * as i5 from '@eui/components/eui-chip';
|
|
32
32
|
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';
|
|
33
|
+
import * as i2$3 from '@eui/components/eui-dialog';
|
|
36
34
|
import { EUI_DIALOG } from '@eui/components/eui-dialog';
|
|
37
|
-
import
|
|
38
|
-
import * as i6$1 from '@eui/components/eui-badge';
|
|
35
|
+
import * as i5$1 from '@eui/components/eui-badge';
|
|
39
36
|
import { EUI_BADGE } from '@eui/components/eui-badge';
|
|
40
|
-
import * as
|
|
37
|
+
import * as i5$2 from '@eui/components/eui-avatar';
|
|
41
38
|
import { EUI_AVATAR } from '@eui/components/eui-avatar';
|
|
39
|
+
import * as i1$2 from '@eui/components/eui-block-content';
|
|
40
|
+
import { EUI_BLOCK_CONTENT } from '@eui/components/eui-block-content';
|
|
42
41
|
|
|
43
42
|
/**
|
|
44
43
|
* A service to update and configure the Showcase module state.
|
|
@@ -51,7 +50,8 @@ class ConfigurationService {
|
|
|
51
50
|
*
|
|
52
51
|
* Default value for renderPlayground will be true.
|
|
53
52
|
*/
|
|
54
|
-
this.state = signal({ renderPlayground: true },
|
|
53
|
+
this.state = signal({ renderPlayground: true }, /* @ts-ignore */
|
|
54
|
+
...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
55
55
|
}
|
|
56
56
|
/**
|
|
57
57
|
* Update the state of configuration. Deep merge is not available thus if
|
|
@@ -74,10 +74,10 @@ class ConfigurationService {
|
|
|
74
74
|
get configuration() {
|
|
75
75
|
return this.state.asReadonly();
|
|
76
76
|
}
|
|
77
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
78
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
77
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
78
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ConfigurationService, providedIn: 'root' }); }
|
|
79
79
|
}
|
|
80
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
80
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ConfigurationService, decorators: [{
|
|
81
81
|
type: Injectable,
|
|
82
82
|
args: [{
|
|
83
83
|
providedIn: 'root',
|
|
@@ -86,98 +86,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
86
86
|
|
|
87
87
|
class DocPageCodeComponent {
|
|
88
88
|
constructor() {
|
|
89
|
-
this.codeFolder = ''
|
|
90
|
-
|
|
89
|
+
this.codeFolder = input('', /* @ts-ignore */
|
|
90
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
91
|
+
this.showcase = input('ux', /* @ts-ignore */
|
|
92
|
+
...(ngDevMode ? [{ debugName: "showcase" }] : /* istanbul ignore next */ []));
|
|
91
93
|
}
|
|
92
94
|
onOpenCode() {
|
|
93
95
|
// 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');
|
|
96
|
+
const sourceRootPath = `https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-${this.showcase()}/-/blob/master/src/app/`;
|
|
97
|
+
window.open(sourceRootPath + this.codeFolder(), '_blank');
|
|
96
98
|
}
|
|
97
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
98
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
99
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
100
|
+
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
101
|
}
|
|
100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
102
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeComponent, decorators: [{
|
|
101
103
|
type: Component,
|
|
102
104
|
args: [{ selector: 'eui-showcase-doc-page-code', imports: [
|
|
103
105
|
...EUI_ICON,
|
|
104
106
|
...EUI_BUTTON,
|
|
105
107
|
], 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
|
-
}] } });
|
|
108
|
+
}], propDecorators: { codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }], showcase: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcase", required: false }] }] } });
|
|
111
109
|
|
|
112
110
|
class DocPageDevGuideComponent {
|
|
113
111
|
constructor() {
|
|
114
|
-
this.
|
|
115
|
-
|
|
116
|
-
this.showcaseName = 'showcase-dev-guide'
|
|
112
|
+
this.rootDocsFolder = input('docs', /* @ts-ignore */
|
|
113
|
+
...(ngDevMode ? [{ debugName: "rootDocsFolder" }] : /* istanbul ignore next */ []));
|
|
114
|
+
this.showcaseName = input('showcase-dev-guide', /* @ts-ignore */
|
|
115
|
+
...(ngDevMode ? [{ debugName: "showcaseName" }] : /* istanbul ignore next */ []));
|
|
117
116
|
this.headers = [];
|
|
118
117
|
this.markdownService = inject(MarkdownService);
|
|
119
118
|
this.http = inject(HttpClient);
|
|
120
119
|
this.router = inject(Router);
|
|
121
120
|
this.route = inject(ActivatedRoute);
|
|
122
|
-
this.cdRef = inject(
|
|
121
|
+
this.cdRef = inject(ChangeDetectorRef);
|
|
122
|
+
this.route.url.pipe(takeUntilDestroyed()).subscribe((u) => {
|
|
123
|
+
this._loadMdContent(`/${this.rootDocsFolder()}/` + u.join('/'));
|
|
124
|
+
});
|
|
125
|
+
this.route.fragment.pipe(take(1), takeUntilDestroyed()).subscribe((fragment) => {
|
|
126
|
+
if (fragment) {
|
|
127
|
+
this.fragmentId = fragment;
|
|
128
|
+
afterNextRender(() => {
|
|
129
|
+
this.cdRef.detectChanges();
|
|
130
|
+
const fgm = document.getElementById(fragment);
|
|
131
|
+
fgm?.scrollIntoView();
|
|
132
|
+
});
|
|
133
|
+
}
|
|
134
|
+
});
|
|
123
135
|
}
|
|
124
136
|
ngOnInit() {
|
|
125
|
-
this.subscription = this.route.url.subscribe((u) => {
|
|
126
|
-
this._loadMdContent(`/${this.rootDocsFolder}/` + u.join('/'));
|
|
127
|
-
});
|
|
128
137
|
/**
|
|
129
138
|
* 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
139
|
*/
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
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}>`;
|
|
140
|
+
this.markdownService.renderer.heading = ({ raw, text, depth }) => {
|
|
141
|
+
if (depth === 2 || depth === 3) {
|
|
142
|
+
const newHeader = `<h${depth} id="${raw}">${text}</h${depth}>`;
|
|
149
143
|
if (text.indexOf('<a ') === -1 && text.indexOf('<em>') === -1) {
|
|
150
|
-
this.headers.push({ id: raw, label: raw, level:
|
|
144
|
+
this.headers.push({ id: raw, label: raw, level: depth });
|
|
151
145
|
}
|
|
152
146
|
return newHeader;
|
|
153
147
|
}
|
|
154
|
-
return `<h${
|
|
148
|
+
return `<h${depth}>${text}</h${depth}>`;
|
|
155
149
|
};
|
|
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
150
|
}
|
|
165
151
|
ngAfterViewInit() {
|
|
166
|
-
|
|
167
|
-
if (fragment) {
|
|
168
|
-
setTimeout(() => {
|
|
169
|
-
this.fragmentId = fragment;
|
|
170
|
-
this.cdRef.detectChanges();
|
|
171
|
-
const fgm = document.getElementById(fragment);
|
|
172
|
-
fgm?.scrollIntoView();
|
|
173
|
-
}, 1);
|
|
174
|
-
}
|
|
175
|
-
});
|
|
176
|
-
}
|
|
177
|
-
ngOnDestroy() {
|
|
178
|
-
if (this.subscription) {
|
|
179
|
-
this.subscription.unsubscribe();
|
|
180
|
-
}
|
|
152
|
+
// Fragment scrolling is handled in constructor via afterNextRender
|
|
181
153
|
}
|
|
182
154
|
onNavClick(fragmentId) {
|
|
183
155
|
this._scrollToFragment(fragmentId);
|
|
@@ -188,25 +160,24 @@ class DocPageDevGuideComponent {
|
|
|
188
160
|
const pathNameArray = currentUrl.pathname.split('/');
|
|
189
161
|
this.headers = [];
|
|
190
162
|
if (url) {
|
|
191
|
-
mdPath = url.
|
|
163
|
+
mdPath = url.substring(1);
|
|
192
164
|
}
|
|
193
165
|
else {
|
|
194
166
|
mdPath = pathNameArray.slice(pathNameArray.length - 3).join('/');
|
|
195
167
|
}
|
|
196
168
|
contextRoot = `${currentUrl.protocol}//${currentUrl.host}`;
|
|
197
|
-
if (pathNameArray[1] !== this.showcaseName) {
|
|
169
|
+
if (pathNameArray[1] !== this.showcaseName()) {
|
|
198
170
|
contextRoot += `/${pathNameArray[1]}`;
|
|
199
171
|
}
|
|
200
172
|
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) => {
|
|
173
|
+
this.http.get(filePath, { responseType: 'text' }).pipe(map((md) => md.replace(new RegExp(`assets/${this.rootDocsFolder()}`, 'g'), `${contextRoot}/assets/${this.rootDocsFolder()}`))).subscribe((md) => {
|
|
202
174
|
this.markdown = md;
|
|
203
175
|
this.cdRef.detectChanges();
|
|
204
176
|
const top = document.getElementById('top');
|
|
205
|
-
top
|
|
177
|
+
top?.scrollIntoView();
|
|
206
178
|
});
|
|
207
179
|
}
|
|
208
180
|
_scrollToFragment(fragmentId) {
|
|
209
|
-
// forcing reload when deep link with fragment
|
|
210
181
|
this.router.onSameUrlNavigation = 'reload';
|
|
211
182
|
this.router.navigate(['.'], { relativeTo: this.route, fragment: fragmentId });
|
|
212
183
|
if (fragmentId) {
|
|
@@ -218,74 +189,59 @@ class DocPageDevGuideComponent {
|
|
|
218
189
|
});
|
|
219
190
|
}
|
|
220
191
|
}
|
|
221
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
222
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
192
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageDevGuideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
193
|
+
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 }); }
|
|
223
194
|
}
|
|
224
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
195
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageDevGuideComponent, decorators: [{
|
|
225
196
|
type: Component,
|
|
226
|
-
args: [{ selector: 'eui-showcase-doc-page-dev-guide', encapsulation: ViewEncapsulation.None, imports: [
|
|
197
|
+
args: [{ selector: 'eui-showcase-doc-page-dev-guide', encapsulation: ViewEncapsulation.None, host: { class: 'eui-doc-page' }, imports: [
|
|
227
198
|
NgClass,
|
|
228
199
|
...EUI_PAGE,
|
|
229
|
-
MarkdownModule,
|
|
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\"
|
|
231
|
-
}], propDecorators: {
|
|
232
|
-
type: HostBinding,
|
|
233
|
-
args: ['class']
|
|
234
|
-
}], rootDocsFolder: [{
|
|
235
|
-
type: Input
|
|
236
|
-
}], showcaseName: [{
|
|
237
|
-
type: Input
|
|
238
|
-
}] } });
|
|
200
|
+
MarkdownModule,
|
|
201
|
+
], 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"] }]
|
|
202
|
+
}], ctorParameters: () => [], propDecorators: { rootDocsFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootDocsFolder", required: false }] }], showcaseName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcaseName", required: false }] }] } });
|
|
239
203
|
|
|
240
204
|
class DocPageDevGuideComponentV2 {
|
|
241
205
|
constructor() {
|
|
242
|
-
this.
|
|
243
|
-
|
|
244
|
-
this.showcaseName = 'showcase-dev-guide'
|
|
206
|
+
this.rootDocsFolder = input('docs', /* @ts-ignore */
|
|
207
|
+
...(ngDevMode ? [{ debugName: "rootDocsFolder" }] : /* istanbul ignore next */ []));
|
|
208
|
+
this.showcaseName = input('showcase-dev-guide', /* @ts-ignore */
|
|
209
|
+
...(ngDevMode ? [{ debugName: "showcaseName" }] : /* istanbul ignore next */ []));
|
|
245
210
|
this.headers = [];
|
|
246
211
|
this.markdownService = inject(MarkdownService);
|
|
247
212
|
this.http = inject(HttpClient);
|
|
248
213
|
this.router = inject(Router);
|
|
249
214
|
this.route = inject(ActivatedRoute);
|
|
215
|
+
this.route.url.pipe(takeUntilDestroyed()).subscribe((u) => {
|
|
216
|
+
this._loadMdContent(`/${this.rootDocsFolder()}/` + u.join('/'));
|
|
217
|
+
});
|
|
218
|
+
this.route.fragment.pipe(take(1), takeUntilDestroyed()).subscribe((fragment) => {
|
|
219
|
+
if (fragment) {
|
|
220
|
+
this.fragmentId = fragment;
|
|
221
|
+
afterNextRender(() => {
|
|
222
|
+
const fgm = document.getElementById(fragment);
|
|
223
|
+
fgm?.scrollIntoView();
|
|
224
|
+
});
|
|
225
|
+
}
|
|
226
|
+
});
|
|
250
227
|
}
|
|
251
228
|
ngOnInit() {
|
|
252
|
-
this.subscription = this.route.url.subscribe((u) => {
|
|
253
|
-
this._loadMdContent(`/${this.rootDocsFolder}/` + u.join('/'));
|
|
254
|
-
});
|
|
255
229
|
/**
|
|
256
230
|
* 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
231
|
*/
|
|
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);
|
|
232
|
+
this.markdownService.renderer.heading = ({ raw, text, depth }) => {
|
|
233
|
+
if (depth === 2 || depth === 3) {
|
|
234
|
+
const newHeader = `<h${depth} id="${raw}">${text}</h${depth}>`;
|
|
235
|
+
if (text.indexOf('<a ') === -1 && text.indexOf('<em>') === -1) {
|
|
236
|
+
this.headers.push({ id: raw, label: raw, level: depth });
|
|
237
|
+
}
|
|
238
|
+
return newHeader;
|
|
282
239
|
}
|
|
283
|
-
|
|
240
|
+
return `<h${depth}>${text}</h${depth}>`;
|
|
241
|
+
};
|
|
284
242
|
}
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
this.subscription.unsubscribe();
|
|
288
|
-
}
|
|
243
|
+
ngAfterViewInit() {
|
|
244
|
+
// Fragment scrolling is handled in constructor via afterNextRender
|
|
289
245
|
}
|
|
290
246
|
onNavClick(fragmentId) {
|
|
291
247
|
this._scrollToFragment(fragmentId);
|
|
@@ -296,24 +252,23 @@ class DocPageDevGuideComponentV2 {
|
|
|
296
252
|
const pathNameArray = currentUrl.pathname.split('/');
|
|
297
253
|
this.headers = [];
|
|
298
254
|
if (url) {
|
|
299
|
-
mdPath = url.
|
|
255
|
+
mdPath = url.substring(1);
|
|
300
256
|
}
|
|
301
257
|
else {
|
|
302
258
|
mdPath = pathNameArray.slice(pathNameArray.length - 3).join('/');
|
|
303
259
|
}
|
|
304
260
|
contextRoot = `${currentUrl.protocol}//${currentUrl.host}`;
|
|
305
|
-
if (pathNameArray[1] !== this.showcaseName) {
|
|
261
|
+
if (pathNameArray[1] !== this.showcaseName()) {
|
|
306
262
|
contextRoot += `/${pathNameArray[1]}`;
|
|
307
263
|
}
|
|
308
264
|
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) => {
|
|
265
|
+
this.http.get(filePath, { responseType: 'text' }).pipe(map((md) => md.replace(new RegExp(`assets/${this.rootDocsFolder()}`, 'g'), `${contextRoot}/assets/${this.rootDocsFolder()}`))).subscribe((md) => {
|
|
310
266
|
this.markdown = md;
|
|
311
267
|
const top = document.getElementById('top');
|
|
312
|
-
top
|
|
268
|
+
top?.scrollIntoView();
|
|
313
269
|
});
|
|
314
270
|
}
|
|
315
271
|
_scrollToFragment(fragmentId) {
|
|
316
|
-
// forcing reload when deep link with fragment
|
|
317
272
|
this.router.onSameUrlNavigation = 'reload';
|
|
318
273
|
this.router.navigate(['.'], { relativeTo: this.route, fragment: fragmentId });
|
|
319
274
|
if (fragmentId) {
|
|
@@ -325,24 +280,17 @@ class DocPageDevGuideComponentV2 {
|
|
|
325
280
|
});
|
|
326
281
|
}
|
|
327
282
|
}
|
|
328
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
329
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
283
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageDevGuideComponentV2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
284
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPageDevGuideComponentV2, isStandalone: true, selector: "eui-showcase-doc-page-dev-guide-v2", 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{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-3xl)!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-3xl-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-4xl)}.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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$1.EuiPage, selector: "eui-page" }, { kind: "component", type: i3$1.EuiPageContent, selector: "eui-page-content" }, { kind: "component", type: i3$1.EuiPageColumns, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3$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: i3$1.EuiPageColumnBody, selector: "eui-page-column-body" }, { 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
285
|
}
|
|
331
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
286
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageDevGuideComponentV2, decorators: [{
|
|
332
287
|
type: Component,
|
|
333
|
-
args: [{ selector: 'eui-showcase-doc-page-dev-guide-v2', encapsulation: ViewEncapsulation.None, imports: [
|
|
288
|
+
args: [{ selector: 'eui-showcase-doc-page-dev-guide-v2', encapsulation: ViewEncapsulation.None, host: { class: 'eui-doc-page' }, imports: [
|
|
334
289
|
NgClass,
|
|
335
290
|
...EUI_PAGE$1,
|
|
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
|
-
}] } });
|
|
291
|
+
MarkdownModule,
|
|
292
|
+
], 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{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-3xl)!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-3xl-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-4xl)}.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"] }]
|
|
293
|
+
}], 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
294
|
|
|
347
295
|
const polyfillsFile = 'import \'zone.js\';';
|
|
348
296
|
const mainFile = (moduleName, componentName) => `
|
|
@@ -353,7 +301,7 @@ import { BrowserModule${!moduleName ? ', bootstrapApplication' : ''} } from '@an
|
|
|
353
301
|
import { InjectionToken, ${!moduleName ? 'importProvidersFrom' : 'NgModule'} } from '@angular/core';
|
|
354
302
|
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
|
|
355
303
|
import { reducers as coreReducers, CoreModule, EUI_CONFIG_TOKEN } from '@eui/core';
|
|
356
|
-
import {
|
|
304
|
+
import { provideTranslateService, TranslatePipe } from '@ngx-translate/core';
|
|
357
305
|
|
|
358
306
|
${moduleName ? `import { ${componentName}, ${moduleName} } from './component';` : `import { ${componentName} } from './component';`}
|
|
359
307
|
|
|
@@ -364,10 +312,10 @@ ${moduleName ? `
|
|
|
364
312
|
imports: [
|
|
365
313
|
BrowserModule,
|
|
366
314
|
CoreModule.forRoot(),
|
|
367
|
-
TranslateModule.forRoot(),
|
|
368
315
|
${moduleName},
|
|
369
316
|
],
|
|
370
317
|
providers: [
|
|
318
|
+
provideTranslateService(),
|
|
371
319
|
provideHttpClient(withInterceptorsFromDi()),
|
|
372
320
|
{
|
|
373
321
|
provide: REDUCER_TOKEN,
|
|
@@ -422,8 +370,8 @@ bootstrapApplication(${componentName}, {
|
|
|
422
370
|
BrowserAnimationsModule,
|
|
423
371
|
BrowserModule,
|
|
424
372
|
CoreModule.forRoot(),
|
|
425
|
-
TranslateModule.forRoot(),
|
|
426
373
|
),
|
|
374
|
+
provideTranslateService(),
|
|
427
375
|
],
|
|
428
376
|
});
|
|
429
377
|
`}
|
|
@@ -435,7 +383,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
|
435
383
|
import { RouterModule } from '@angular/router';
|
|
436
384
|
import { APP_BASE_HREF } from '@angular/common';
|
|
437
385
|
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
|
|
438
|
-
import {
|
|
386
|
+
import { provideTranslateService, TranslatePipe } from '@ngx-translate/core';
|
|
439
387
|
import { FormsModule } from '@angular/forms';
|
|
440
388
|
import { CommonModule } from '@angular/common';
|
|
441
389
|
import { EuiAllModule } from '@eui/components';
|
|
@@ -464,13 +412,13 @@ export const REDUCER_TOKEN = new InjectionToken<any>('Registered Reducers');
|
|
|
464
412
|
RouterModule.forRoot([]),
|
|
465
413
|
EuiCoreModule.forRoot(),
|
|
466
414
|
EffectsModule.forRoot([...CoreModuleEffects]),
|
|
467
|
-
TranslateModule.forRoot(translateConfig),
|
|
468
415
|
` +
|
|
469
416
|
m.map((i) => `${i.name},`).join('') +
|
|
470
417
|
`
|
|
471
418
|
],
|
|
472
419
|
declarations: [${componentName}],
|
|
473
420
|
providers: [
|
|
421
|
+
provideTranslateService(translateConfig),
|
|
474
422
|
provideHttpClient(withInterceptorsFromDi()),
|
|
475
423
|
{
|
|
476
424
|
provide: REDUCER_TOKEN,
|
|
@@ -685,19 +633,39 @@ class StackblitzService {
|
|
|
685
633
|
* @param sampleId
|
|
686
634
|
*/
|
|
687
635
|
openStackBlitz(htmlContent, typescriptContent, title, sampleId) {
|
|
636
|
+
this.openStackBlitzWithFiles([
|
|
637
|
+
{ name: 'component.html', content: htmlContent },
|
|
638
|
+
{ name: 'component.ts', content: typescriptContent },
|
|
639
|
+
], title, sampleId);
|
|
640
|
+
}
|
|
641
|
+
/**
|
|
642
|
+
* Open a stackblitz project with all sample files
|
|
643
|
+
* @param files Array of file objects with name and content
|
|
644
|
+
* @param title
|
|
645
|
+
* @param sampleId
|
|
646
|
+
*/
|
|
647
|
+
openStackBlitzWithFiles(files, title, sampleId) {
|
|
688
648
|
this.getStackblitzDependencies()
|
|
689
649
|
.then((deps) => {
|
|
690
650
|
const { dependencies, devDependencies } = deps;
|
|
651
|
+
const tsFile = files.find(f => f.name === 'component.ts');
|
|
652
|
+
const typescriptContent = tsFile?.content || '';
|
|
691
653
|
const { selector } = this.extractComponentMetadata(typescriptContent);
|
|
692
654
|
const moduleName = this.extractModuleName(typescriptContent);
|
|
693
655
|
const componentName = this.extractComponentName(typescriptContent);
|
|
656
|
+
const sampleFiles = {};
|
|
657
|
+
files.forEach(f => {
|
|
658
|
+
const content = f.name === 'component.ts' && moduleName
|
|
659
|
+
? this.appendVitalNgModules(f.content)
|
|
660
|
+
: f.content;
|
|
661
|
+
sampleFiles[`src/${f.name}`] = content;
|
|
662
|
+
});
|
|
694
663
|
const project = {
|
|
695
664
|
title: title,
|
|
696
665
|
description: `An eUI example for the ${title}.`,
|
|
697
666
|
template: 'node',
|
|
698
667
|
files: {
|
|
699
|
-
|
|
700
|
-
'src/component.ts': moduleName ? this.appendVitalNgModules(typescriptContent) : typescriptContent,
|
|
668
|
+
...sampleFiles,
|
|
701
669
|
'src/main.ts': mainFile(moduleName, componentName),
|
|
702
670
|
'src/polyfills.ts': polyfillsFile,
|
|
703
671
|
'src/index.html': indexHtmlFile(selector),
|
|
@@ -718,8 +686,9 @@ class StackblitzService {
|
|
|
718
686
|
},
|
|
719
687
|
dependencies,
|
|
720
688
|
};
|
|
689
|
+
const openFiles = files.map(f => `src/${f.name}`);
|
|
721
690
|
return sdk.openProject(project, {
|
|
722
|
-
openFile:
|
|
691
|
+
openFile: openFiles,
|
|
723
692
|
zenMode: true,
|
|
724
693
|
});
|
|
725
694
|
});
|
|
@@ -757,6 +726,7 @@ class StackblitzService {
|
|
|
757
726
|
'rxjs',
|
|
758
727
|
'tslib',
|
|
759
728
|
'zone.js',
|
|
729
|
+
'deepmerge-ts',
|
|
760
730
|
];
|
|
761
731
|
const stackblitzDevDependencies = ['@angular-devkit/build-angular', '@angular/cli', '@angular/compiler-cli', 'typescript'];
|
|
762
732
|
return this.getCurrentShowcaseEuiVersion()
|
|
@@ -772,6 +742,7 @@ class StackblitzService {
|
|
|
772
742
|
'@types/cleave.js': '1.4.12',
|
|
773
743
|
moment: '^2.19.3',
|
|
774
744
|
extend: '^3.0.2',
|
|
745
|
+
'@faker-js/faker': '^9.0.0',
|
|
775
746
|
};
|
|
776
747
|
// filter devDependencies to only what stackblitz needs
|
|
777
748
|
filteredArr = Object.entries(dependencies).filter((v) => stackblitzDevDependencies.find((s) => s === v[0]));
|
|
@@ -799,10 +770,10 @@ class StackblitzService {
|
|
|
799
770
|
getCurrentShowcaseEuiVersion() {
|
|
800
771
|
return lastValueFrom(this.http.get('assets/app-metadata.json', { responseType: 'json' })).then((res) => res?.appVersion || 'latest');
|
|
801
772
|
}
|
|
802
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
803
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
773
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StackblitzService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
774
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StackblitzService, providedIn: 'root' }); }
|
|
804
775
|
}
|
|
805
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
776
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StackblitzService, decorators: [{
|
|
806
777
|
type: Injectable,
|
|
807
778
|
args: [{
|
|
808
779
|
providedIn: 'root',
|
|
@@ -811,7 +782,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
811
782
|
|
|
812
783
|
class EuiCodeHighlighterDirective {
|
|
813
784
|
constructor() {
|
|
814
|
-
this.code = input(
|
|
785
|
+
this.code = input(/* @ts-ignore */
|
|
786
|
+
...(ngDevMode ? [undefined, { debugName: "code" }] : /* istanbul ignore next */ []));
|
|
815
787
|
this.el = inject(ElementRef);
|
|
816
788
|
this.renderer = inject(Renderer2);
|
|
817
789
|
effect(() => {
|
|
@@ -830,10 +802,10 @@ class EuiCodeHighlighterDirective {
|
|
|
830
802
|
window['Prism'].highlightElement(this.el.nativeElement);
|
|
831
803
|
}
|
|
832
804
|
}
|
|
833
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
834
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
805
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EuiCodeHighlighterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
806
|
+
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
807
|
}
|
|
836
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
808
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EuiCodeHighlighterDirective, decorators: [{
|
|
837
809
|
type: Directive,
|
|
838
810
|
args: [{
|
|
839
811
|
selector: '[euiCode]',
|
|
@@ -842,17 +814,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
842
814
|
|
|
843
815
|
class DocSampleComponent {
|
|
844
816
|
constructor() {
|
|
845
|
-
this.id = ''
|
|
846
|
-
|
|
847
|
-
this.
|
|
848
|
-
|
|
849
|
-
this.
|
|
850
|
-
|
|
851
|
-
this.
|
|
817
|
+
this.id = input('', /* @ts-ignore */
|
|
818
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
819
|
+
this.label = input('', /* @ts-ignore */
|
|
820
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
821
|
+
this.category = input(undefined, /* @ts-ignore */
|
|
822
|
+
...(ngDevMode ? [{ debugName: "category" }] : /* istanbul ignore next */ []));
|
|
823
|
+
this.description = input(undefined, /* @ts-ignore */
|
|
824
|
+
...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
825
|
+
this.defaultValue = input(undefined, /* @ts-ignore */
|
|
826
|
+
...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
|
|
827
|
+
this.styleClass = input('', /* @ts-ignore */
|
|
828
|
+
...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
|
|
829
|
+
this.renderPlayground = input(null, { ...(ngDevMode ? { debugName: "renderPlayground" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
830
|
+
this.isCodeButtonVisible = input(true, { ...(ngDevMode ? { debugName: "isCodeButtonVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
831
|
+
this.isInnerSection = input(false, { ...(ngDevMode ? { debugName: "isInnerSection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
852
832
|
this.isCodeLoaded = false;
|
|
853
833
|
this.isCodeLoading = false;
|
|
854
834
|
this.isCodeExpanded = false;
|
|
855
835
|
this.playground_activated = false;
|
|
836
|
+
this.sampleFiles = [];
|
|
856
837
|
this.conf = inject(ConfigurationService);
|
|
857
838
|
this.sb = inject(StackblitzService);
|
|
858
839
|
this._http = inject(HttpClient);
|
|
@@ -862,11 +843,6 @@ class DocSampleComponent {
|
|
|
862
843
|
this.clipboard = inject(Clipboard);
|
|
863
844
|
this.router = inject(Router);
|
|
864
845
|
}
|
|
865
|
-
ngAfterContentInit() {
|
|
866
|
-
if (!this.label) {
|
|
867
|
-
this.label = this.id;
|
|
868
|
-
}
|
|
869
|
-
}
|
|
870
846
|
copyCurrentUrlToClipboard(id) {
|
|
871
847
|
try {
|
|
872
848
|
const baseDomain = window?.location?.origin;
|
|
@@ -927,18 +903,17 @@ class DocSampleComponent {
|
|
|
927
903
|
* open the code sample in stackblitz
|
|
928
904
|
*/
|
|
929
905
|
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);
|
|
906
|
+
this.loadCodeFiles().subscribe(() => {
|
|
907
|
+
this.sb.openStackBlitzWithFiles(this.sampleFiles.map(f => ({ name: f.name, content: f.content })), 'eUI Playground', this.id());
|
|
934
908
|
});
|
|
935
909
|
}
|
|
936
910
|
/**
|
|
937
911
|
* returns whenever playground should render. Input has precedence over Configuration service
|
|
938
912
|
*/
|
|
939
913
|
shouldRenderPlayground() {
|
|
940
|
-
|
|
941
|
-
|
|
914
|
+
const renderPlayground = this.renderPlayground();
|
|
915
|
+
return renderPlayground === undefined || renderPlayground === null ?
|
|
916
|
+
this.conf.configuration().renderPlayground : renderPlayground;
|
|
942
917
|
}
|
|
943
918
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
944
919
|
_getComponent(id) {
|
|
@@ -962,6 +937,37 @@ class DocSampleComponent {
|
|
|
962
937
|
}
|
|
963
938
|
loadCodeFiles() {
|
|
964
939
|
this.isCodeLoading = true;
|
|
940
|
+
const samplesPath = this.getSamplesPath();
|
|
941
|
+
return this._http.get(`${samplesPath}/metadata.json`).pipe(switchMap(metadata => {
|
|
942
|
+
const requests = {};
|
|
943
|
+
metadata.files.forEach(f => {
|
|
944
|
+
requests[f.name] = this._http.get(`${samplesPath}/${f.name}`, { responseType: 'text' });
|
|
945
|
+
});
|
|
946
|
+
return forkJoin(requests).pipe(map(contents => {
|
|
947
|
+
this.sampleFiles = metadata.files.map(f => ({
|
|
948
|
+
name: f.name,
|
|
949
|
+
type: f.type,
|
|
950
|
+
content: this.filterOutExcludeContent(contents[f.name]),
|
|
951
|
+
label: f.classType || f.className || this.getFileLabel(f.name, f.type),
|
|
952
|
+
}));
|
|
953
|
+
// Keep backward compat
|
|
954
|
+
const tsFile = this.sampleFiles.find(f => f.name === 'component.ts');
|
|
955
|
+
const htmlFile = this.sampleFiles.find(f => f.name === 'component.html');
|
|
956
|
+
this.tsContent = tsFile?.content ?? '';
|
|
957
|
+
this.htmlContent = htmlFile?.content ?? '';
|
|
958
|
+
this.isCodeLoaded = true;
|
|
959
|
+
this.isCodeLoading = false;
|
|
960
|
+
return { typescript: this.tsContent, html: this.htmlContent };
|
|
961
|
+
}));
|
|
962
|
+
}), catchError((error) => {
|
|
963
|
+
this.growlService.growlError(`Issue while fetching : ${error.url} : ${error.status}-${error.statusText}`);
|
|
964
|
+
this.isCodeLoading = false;
|
|
965
|
+
return new Observable((subscriber) => {
|
|
966
|
+
subscriber.error(error);
|
|
967
|
+
});
|
|
968
|
+
}));
|
|
969
|
+
}
|
|
970
|
+
getSamplesPath() {
|
|
965
971
|
const url = window.location;
|
|
966
972
|
const pathName = url.pathname;
|
|
967
973
|
const pathNameArray = pathName.split('/');
|
|
@@ -983,36 +989,21 @@ class DocSampleComponent {
|
|
|
983
989
|
}
|
|
984
990
|
samplePathArray = samplePathArray.reverse();
|
|
985
991
|
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
|
-
}));
|
|
992
|
+
samplePathArray.push(this.id());
|
|
993
|
+
return `assets/samples/${samplePathArray.join('/')}`;
|
|
994
|
+
}
|
|
995
|
+
getFileLabel(name, type) {
|
|
996
|
+
const labels = { typescript: 'Typescript', html: 'HTML', scss: 'SCSS', css: 'CSS' };
|
|
997
|
+
return name === 'component.ts' ? 'Typescript'
|
|
998
|
+
: name === 'component.html' ? 'HTML'
|
|
999
|
+
: `${name} (${labels[type] || type})`;
|
|
1000
|
+
}
|
|
1001
|
+
getCodeLanguage(type) {
|
|
1002
|
+
const languages = { typescript: 'language-javascript', html: 'language-markup', scss: 'language-css', css: 'language-css' };
|
|
1003
|
+
return languages[type] || 'language-markup';
|
|
1011
1004
|
}
|
|
1012
1005
|
/**
|
|
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)
|
|
1006
|
+
* filter out the content between the pattern below in both html and ts files.
|
|
1016
1007
|
* @param content the content of the file to filter out the exclude content
|
|
1017
1008
|
*/
|
|
1018
1009
|
filterOutExcludeContent(content) {
|
|
@@ -1020,91 +1011,105 @@ class DocSampleComponent {
|
|
|
1020
1011
|
const patternTS = /\n?\/\/\s*EXCLUDE_START[\s\S]*?\/\/\s*EXCLUDE_END\n?/g;
|
|
1021
1012
|
return content.replace(patternHtml, '').replace(patternTS, '');
|
|
1022
1013
|
}
|
|
1023
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1024
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1014
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1015
|
+
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: i4.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$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$2.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
1016
|
}
|
|
1026
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1017
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSampleComponent, decorators: [{
|
|
1027
1018
|
type: Component,
|
|
1028
|
-
args: [{ selector: 'eui-showcase-doc-sample', encapsulation: ViewEncapsulation.None, imports: [
|
|
1029
|
-
CommonModule,
|
|
1019
|
+
args: [{ selector: 'eui-showcase-doc-sample', encapsulation: ViewEncapsulation.None, host: { class: 'eui-showcase-doc-sample' }, imports: [
|
|
1030
1020
|
...EUI_TABS,
|
|
1031
1021
|
...EUI_LABEL,
|
|
1032
1022
|
...EUI_CARD,
|
|
1033
1023
|
...EUI_ICON,
|
|
1034
1024
|
...EUI_BUTTON,
|
|
1035
1025
|
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
|
-
}] } });
|
|
1026
|
+
], 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"] }]
|
|
1027
|
+
}], 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
1028
|
|
|
1063
1029
|
class DocSectionComponent {
|
|
1064
1030
|
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 }); }
|
|
1031
|
+
this.id = input('', /* @ts-ignore */
|
|
1032
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
1033
|
+
this.label = input('', /* @ts-ignore */
|
|
1034
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1035
|
+
this.styleClass = input('', /* @ts-ignore */
|
|
1036
|
+
...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
|
|
1037
|
+
}
|
|
1038
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1039
|
+
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
1040
|
}
|
|
1078
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1041
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionComponent, decorators: [{
|
|
1079
1042
|
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
|
-
}] } });
|
|
1043
|
+
args: [{ selector: 'eui-showcase-doc-section', encapsulation: ViewEncapsulation.None, host: {
|
|
1044
|
+
class: 'eui-showcase-doc-section',
|
|
1045
|
+
}, 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"] }]
|
|
1046
|
+
}], 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
1047
|
|
|
1092
1048
|
class DocPageComponent {
|
|
1093
1049
|
constructor() {
|
|
1094
|
-
this.
|
|
1095
|
-
|
|
1096
|
-
this.
|
|
1097
|
-
|
|
1098
|
-
this.
|
|
1099
|
-
|
|
1100
|
-
this.
|
|
1101
|
-
this.
|
|
1102
|
-
this.
|
|
1050
|
+
this.id = input(undefined, /* @ts-ignore */
|
|
1051
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
1052
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
1053
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1054
|
+
this.subLabel = input(undefined, /* @ts-ignore */
|
|
1055
|
+
...(ngDevMode ? [{ debugName: "subLabel" }] : /* istanbul ignore next */ []));
|
|
1056
|
+
this.isNotReadyInput = input(false, { ...(ngDevMode ? { debugName: "isNotReadyInput" } : /* istanbul ignore next */ {}), alias: 'isNotReady' });
|
|
1057
|
+
this.isDeprecatedInput = input(false, { ...(ngDevMode ? { debugName: "isDeprecatedInput" } : /* istanbul ignore next */ {}), alias: 'isDeprecated' });
|
|
1058
|
+
this.isLegacyInput = input(false, { ...(ngDevMode ? { debugName: "isLegacyInput" } : /* istanbul ignore next */ {}), alias: 'isLegacy' });
|
|
1059
|
+
this.codeFolder = input(undefined, /* @ts-ignore */
|
|
1060
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
1061
|
+
this.showcase = input('ux', /* @ts-ignore */
|
|
1062
|
+
...(ngDevMode ? [{ debugName: "showcase" }] : /* istanbul ignore next */ []));
|
|
1063
|
+
this.isNavigationVisible = model(true, /* @ts-ignore */
|
|
1064
|
+
...(ngDevMode ? [{ debugName: "isNavigationVisible" }] : /* istanbul ignore next */ []));
|
|
1065
|
+
this.hasApi = input(true, /* @ts-ignore */
|
|
1066
|
+
...(ngDevMode ? [{ debugName: "hasApi" }] : /* istanbul ignore next */ []));
|
|
1067
|
+
this.hasA11y = input(true, /* @ts-ignore */
|
|
1068
|
+
...(ngDevMode ? [{ debugName: "hasA11y" }] : /* istanbul ignore next */ []));
|
|
1069
|
+
this.customApiUrl = input(null, /* @ts-ignore */
|
|
1070
|
+
...(ngDevMode ? [{ debugName: "customApiUrl" }] : /* istanbul ignore next */ []));
|
|
1071
|
+
// Writable signals for properties that are both input-driven and internally mutated
|
|
1072
|
+
this.isNotReady = signal(false, /* @ts-ignore */
|
|
1073
|
+
...(ngDevMode ? [{ debugName: "isNotReady" }] : /* istanbul ignore next */ []));
|
|
1074
|
+
this.isDeprecated = signal(false, /* @ts-ignore */
|
|
1075
|
+
...(ngDevMode ? [{ debugName: "isDeprecated" }] : /* istanbul ignore next */ []));
|
|
1076
|
+
this.isLegacy = signal(false, /* @ts-ignore */
|
|
1077
|
+
...(ngDevMode ? [{ debugName: "isLegacy" }] : /* istanbul ignore next */ []));
|
|
1103
1078
|
this.isLoading = true;
|
|
1104
1079
|
this.isNavClicked = true;
|
|
1105
1080
|
this.hasCategories = false;
|
|
1106
1081
|
this.categories = [];
|
|
1082
|
+
this.scrollHandler = null;
|
|
1083
|
+
this.scrollContainer = null;
|
|
1084
|
+
this.isDestroyed = false;
|
|
1085
|
+
this.samples = contentChildren(DocSampleComponent, { ...(ngDevMode ? { debugName: "samples" } : /* istanbul ignore next */ {}), descendants: true });
|
|
1086
|
+
this.sections = contentChildren(DocSectionComponent, { ...(ngDevMode ? { debugName: "sections" } : /* istanbul ignore next */ {}), descendants: true });
|
|
1087
|
+
this.pageOverviewContent = contentChildren(forwardRef(() => DocPageOverviewContentDirective), /* @ts-ignore */
|
|
1088
|
+
...(ngDevMode ? [{ debugName: "pageOverviewContent" }] : /* istanbul ignore next */ []));
|
|
1089
|
+
this.pageOverviewDefaultContent = contentChildren(forwardRef(() => DocPageOverviewDefaultContentDirective), /* @ts-ignore */
|
|
1090
|
+
...(ngDevMode ? [{ debugName: "pageOverviewDefaultContent" }] : /* istanbul ignore next */ []));
|
|
1091
|
+
this.pageSamplesContent = contentChildren(forwardRef(() => DocPageSamplesContentDirective), /* @ts-ignore */
|
|
1092
|
+
...(ngDevMode ? [{ debugName: "pageSamplesContent" }] : /* istanbul ignore next */ []));
|
|
1093
|
+
this.pageSectionsContent = contentChildren(forwardRef(() => DocPageSectionsContentDirective), /* @ts-ignore */
|
|
1094
|
+
...(ngDevMode ? [{ debugName: "pageSectionsContent" }] : /* istanbul ignore next */ []));
|
|
1095
|
+
this.pageInteractiveContent = contentChildren(forwardRef(() => DocPageInteractiveContentDirective), /* @ts-ignore */
|
|
1096
|
+
...(ngDevMode ? [{ debugName: "pageInteractiveContent" }] : /* istanbul ignore next */ []));
|
|
1097
|
+
this.pageAccessibilityContent = contentChildren(forwardRef(() => DocPageAccessibilityContentDirective), /* @ts-ignore */
|
|
1098
|
+
...(ngDevMode ? [{ debugName: "pageAccessibilityContent" }] : /* istanbul ignore next */ []));
|
|
1099
|
+
this.pageApiContent = contentChildren(forwardRef(() => DocPageApiContentDirective), /* @ts-ignore */
|
|
1100
|
+
...(ngDevMode ? [{ debugName: "pageApiContent" }] : /* istanbul ignore next */ []));
|
|
1101
|
+
this.pageThemingContent = contentChildren(forwardRef(() => DocPageThemingContentDirective), /* @ts-ignore */
|
|
1102
|
+
...(ngDevMode ? [{ debugName: "pageThemingContent" }] : /* istanbul ignore next */ []));
|
|
1103
|
+
this.tabsContent = viewChild('tabsContent', /* @ts-ignore */
|
|
1104
|
+
...(ngDevMode ? [{ debugName: "tabsContent" }] : /* istanbul ignore next */ []));
|
|
1107
1105
|
this.sanitizer = inject(DomSanitizer);
|
|
1106
|
+
this.location = inject(Location);
|
|
1107
|
+
this.router = inject(Router);
|
|
1108
|
+
this.route = inject(ActivatedRoute);
|
|
1109
|
+
this.asService = inject(EuiAppShellService);
|
|
1110
|
+
this.cd = inject(ChangeDetectorRef);
|
|
1111
|
+
this.destroyRef = inject(DestroyRef);
|
|
1112
|
+
this.injector = inject(Injector);
|
|
1108
1113
|
this.TABS_DEF = [
|
|
1109
1114
|
{ index: 0, id: 'samples' },
|
|
1110
1115
|
{ index: 1, id: 'api' },
|
|
@@ -1123,136 +1128,175 @@ class DocPageComponent {
|
|
|
1123
1128
|
{ index: 70, id: 'Composition' },
|
|
1124
1129
|
{ index: 80, id: 'Misc' },
|
|
1125
1130
|
];
|
|
1126
|
-
this.location = inject(Location);
|
|
1127
|
-
this.router = inject(Router);
|
|
1128
|
-
this.route = inject(ActivatedRoute);
|
|
1129
|
-
this.asService = inject(EuiAppShellService);
|
|
1130
1131
|
}
|
|
1131
1132
|
ngOnInit() {
|
|
1132
|
-
|
|
1133
|
+
// Sync input signals to writable signals
|
|
1134
|
+
if (this.isNotReadyInput())
|
|
1135
|
+
this.isNotReady.set(true);
|
|
1136
|
+
if (this.isDeprecatedInput())
|
|
1137
|
+
this.isDeprecated.set(true);
|
|
1138
|
+
if (this.isLegacyInput())
|
|
1139
|
+
this.isLegacy.set(true);
|
|
1140
|
+
this.destroyRef.onDestroy(() => this.isDestroyed = true);
|
|
1141
|
+
afterNextRender(() => {
|
|
1133
1142
|
this.asService.isBlockDocumentActive = true;
|
|
1134
|
-
});
|
|
1143
|
+
}, { injector: this.injector });
|
|
1135
1144
|
this.appMetadata = this.asService.state.appMetadata;
|
|
1136
|
-
|
|
1137
|
-
|
|
1145
|
+
const id = this.id();
|
|
1146
|
+
if (id && !this.label()) {
|
|
1147
|
+
// label is a signal, but it's an input - we can't mutate it.
|
|
1148
|
+
// The template already handles id() as fallback via label() || id()
|
|
1138
1149
|
}
|
|
1139
1150
|
this.fragmentId = this.route.snapshot.fragment;
|
|
1140
1151
|
}
|
|
1141
1152
|
ngAfterViewInit() {
|
|
1142
|
-
//
|
|
1153
|
+
// Getting API url
|
|
1143
1154
|
try {
|
|
1144
1155
|
this.apiUrl = this._getApiUrl();
|
|
1145
|
-
|
|
1156
|
+
afterNextRender(() => {
|
|
1146
1157
|
this.apiUrlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.apiUrl);
|
|
1147
|
-
});
|
|
1158
|
+
}, { injector: this.injector });
|
|
1148
1159
|
}
|
|
1149
1160
|
catch (e) {
|
|
1150
|
-
|
|
1161
|
+
// API URL construction failed - non-critical
|
|
1151
1162
|
}
|
|
1152
|
-
|
|
1153
|
-
const tab = this.TABS_DEF.
|
|
1154
|
-
const
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
tabIndex = sampleTabIndex;
|
|
1158
|
-
}
|
|
1159
|
-
else {
|
|
1160
|
-
tabIndex = tab.index;
|
|
1161
|
-
}
|
|
1162
|
-
// constructing categories, if at least one set, if not backward compat with old display
|
|
1163
|
-
const categoriesJson = {};
|
|
1164
|
-
this.samples.forEach((s) => {
|
|
1165
|
-
// "Default" or "_default" sample are always put first in the nav list
|
|
1166
|
-
if (!s.category && s.id !== '_default' && s.id !== 'Default' && s.id !== 'default') {
|
|
1167
|
-
if (!categoriesJson['others']) {
|
|
1168
|
-
categoriesJson['others'] = [];
|
|
1169
|
-
categoriesJson['others'].push(s);
|
|
1170
|
-
}
|
|
1171
|
-
else {
|
|
1172
|
-
categoriesJson['others'].push(s);
|
|
1173
|
-
}
|
|
1174
|
-
}
|
|
1175
|
-
else {
|
|
1176
|
-
if (s.id === '_default' || s.id === 'Default' || s.id === 'default') {
|
|
1177
|
-
if (!categoriesJson['Base']) {
|
|
1178
|
-
categoriesJson['Base'] = [];
|
|
1179
|
-
categoriesJson['Base'].push(s);
|
|
1180
|
-
}
|
|
1181
|
-
else {
|
|
1182
|
-
categoriesJson['Base'].push(s);
|
|
1183
|
-
}
|
|
1184
|
-
}
|
|
1185
|
-
else {
|
|
1186
|
-
this.hasCategories = true;
|
|
1187
|
-
if (!categoriesJson[s.category]) {
|
|
1188
|
-
categoriesJson[s.category] = [];
|
|
1189
|
-
categoriesJson[s.category].push(s);
|
|
1190
|
-
}
|
|
1191
|
-
else {
|
|
1192
|
-
categoriesJson[s.category].push(s);
|
|
1193
|
-
}
|
|
1194
|
-
}
|
|
1195
|
-
}
|
|
1196
|
-
});
|
|
1197
|
-
// making the list of categories iterable for display
|
|
1198
|
-
// console.log(categoriesJson)
|
|
1199
|
-
Object.keys(categoriesJson).forEach((c) => {
|
|
1200
|
-
const normalizedKey = c.toLowerCase();
|
|
1201
|
-
const existingCategory = this.categories.find(cat => cat.name.toLowerCase() === normalizedKey);
|
|
1202
|
-
if (existingCategory) {
|
|
1203
|
-
existingCategory.samples = [...existingCategory.samples, ...categoriesJson[c]].sort((a, b) => {
|
|
1204
|
-
return a.label.localeCompare(b.label);
|
|
1205
|
-
});
|
|
1206
|
-
}
|
|
1207
|
-
else {
|
|
1208
|
-
this.categories.push({
|
|
1209
|
-
name: c,
|
|
1210
|
-
samples: categoriesJson[c].sort((a, b) => {
|
|
1211
|
-
return a.label.localeCompare(b.label);
|
|
1212
|
-
}),
|
|
1213
|
-
});
|
|
1214
|
-
}
|
|
1215
|
-
});
|
|
1216
|
-
// push the "others" at the end of the nav list
|
|
1217
|
-
this.categories.sort((a, b) => {
|
|
1218
|
-
return this.getCategoryIndex(a.name) - this.getCategoryIndex(b.name);
|
|
1219
|
-
});
|
|
1220
|
-
this.categories.push(this.categories.splice(this.categories.findIndex(v => v.name == 'others'), 1)[0]);
|
|
1163
|
+
afterNextRender(() => {
|
|
1164
|
+
const tab = this.TABS_DEF.find((t) => t.id === this.fragmentId);
|
|
1165
|
+
const tabIndex = tab ? tab.index : 0;
|
|
1166
|
+
this._buildCategories();
|
|
1167
|
+
this.cd.detectChanges();
|
|
1221
1168
|
setTimeout(() => {
|
|
1222
1169
|
this._scrollToFragment(this.fragmentId, tabIndex, true, true);
|
|
1223
1170
|
this.asService.isBlockDocumentActive = false;
|
|
1224
1171
|
this.isLoading = false;
|
|
1172
|
+
this.isNavClicked = false;
|
|
1173
|
+
setTimeout(() => this.setupScrollSpy(), 500);
|
|
1225
1174
|
}, 1);
|
|
1226
|
-
});
|
|
1175
|
+
}, { injector: this.injector });
|
|
1227
1176
|
}
|
|
1228
1177
|
getCategoryIndex(name) {
|
|
1229
1178
|
const category = this.CATEGORIES_DEF.find(cat => cat.id.toLowerCase() === name.toLowerCase());
|
|
1230
1179
|
return category ? category.index : this.CATEGORIES_DEF.find(cat => cat.id === 'free-category').index;
|
|
1231
1180
|
}
|
|
1181
|
+
setupScrollSpy() {
|
|
1182
|
+
if (this.isDestroyed)
|
|
1183
|
+
return;
|
|
1184
|
+
const hostEl = document.querySelector('.eui-doc-page');
|
|
1185
|
+
if (!hostEl)
|
|
1186
|
+
return;
|
|
1187
|
+
const scrollEl = hostEl.querySelector('.eui-page-column__body');
|
|
1188
|
+
if (!scrollEl)
|
|
1189
|
+
return;
|
|
1190
|
+
this.scrollContainer = scrollEl;
|
|
1191
|
+
this.scrollHandler = () => {
|
|
1192
|
+
if (this.isNavClicked)
|
|
1193
|
+
return;
|
|
1194
|
+
const ids = [];
|
|
1195
|
+
['overview', 'samples', 'accessibility', 'theming', 'interactive'].forEach(id => {
|
|
1196
|
+
if (document.getElementById(id))
|
|
1197
|
+
ids.push(id);
|
|
1198
|
+
});
|
|
1199
|
+
this.samples()?.forEach((s) => {
|
|
1200
|
+
const sId = s.id();
|
|
1201
|
+
if (sId && document.getElementById(sId))
|
|
1202
|
+
ids.push(sId);
|
|
1203
|
+
});
|
|
1204
|
+
this.sections()?.forEach((s) => {
|
|
1205
|
+
const sId = s.id();
|
|
1206
|
+
if (sId && document.getElementById(sId))
|
|
1207
|
+
ids.push(sId);
|
|
1208
|
+
});
|
|
1209
|
+
const containerRect = scrollEl.getBoundingClientRect();
|
|
1210
|
+
let activeId = null;
|
|
1211
|
+
let bestDistance = -Infinity;
|
|
1212
|
+
for (const id of ids) {
|
|
1213
|
+
const el = document.getElementById(id);
|
|
1214
|
+
if (!el)
|
|
1215
|
+
continue;
|
|
1216
|
+
const elTop = el.getBoundingClientRect().top - containerRect.top;
|
|
1217
|
+
if (elTop <= 150 && elTop > bestDistance) {
|
|
1218
|
+
bestDistance = elTop;
|
|
1219
|
+
activeId = id;
|
|
1220
|
+
}
|
|
1221
|
+
}
|
|
1222
|
+
if (activeId && activeId !== this.fragmentId) {
|
|
1223
|
+
this.fragmentId = activeId;
|
|
1224
|
+
}
|
|
1225
|
+
};
|
|
1226
|
+
scrollEl.addEventListener('scroll', this.scrollHandler, { passive: true });
|
|
1227
|
+
this.destroyRef.onDestroy(() => {
|
|
1228
|
+
if (this.scrollHandler && this.scrollContainer) {
|
|
1229
|
+
this.scrollContainer.removeEventListener('scroll', this.scrollHandler);
|
|
1230
|
+
}
|
|
1231
|
+
});
|
|
1232
|
+
}
|
|
1232
1233
|
onNavClick(fragmentId, tabIndex) {
|
|
1233
1234
|
this.fragmentId = fragmentId;
|
|
1234
1235
|
this.isNavClicked = true;
|
|
1235
1236
|
this._scrollToFragment(this.fragmentId, tabIndex, false, true);
|
|
1237
|
+
setTimeout(() => {
|
|
1238
|
+
this.isNavClicked = false;
|
|
1239
|
+
}, 800);
|
|
1236
1240
|
}
|
|
1237
1241
|
onTabActivate(event) {
|
|
1238
1242
|
if (!this.isLoading && !this.isNavClicked) {
|
|
1239
|
-
const tabId = this.TABS_DEF.
|
|
1240
|
-
|
|
1243
|
+
const tabId = this.TABS_DEF.find((t) => t.index === event.index)?.id;
|
|
1244
|
+
if (tabId) {
|
|
1245
|
+
this._scrollToFragment(tabId, event.index, false, false);
|
|
1246
|
+
}
|
|
1241
1247
|
}
|
|
1242
1248
|
this.isNavClicked = false;
|
|
1243
1249
|
}
|
|
1250
|
+
_buildCategories() {
|
|
1251
|
+
const categoriesJson = {};
|
|
1252
|
+
this.samples().forEach((s) => {
|
|
1253
|
+
const id = s.id();
|
|
1254
|
+
const category = s.category();
|
|
1255
|
+
const isDefault = id === '_default' || id === 'Default' || id === 'default';
|
|
1256
|
+
if (isDefault) {
|
|
1257
|
+
(categoriesJson['Base'] ??= []).push(s);
|
|
1258
|
+
}
|
|
1259
|
+
else if (category) {
|
|
1260
|
+
this.hasCategories = true;
|
|
1261
|
+
(categoriesJson[category] ??= []).push(s);
|
|
1262
|
+
}
|
|
1263
|
+
else {
|
|
1264
|
+
(categoriesJson['others'] ??= []).push(s);
|
|
1265
|
+
}
|
|
1266
|
+
});
|
|
1267
|
+
Object.keys(categoriesJson).forEach((c) => {
|
|
1268
|
+
const normalizedKey = c.toLowerCase();
|
|
1269
|
+
const existingCategory = this.categories.find(cat => cat.name.toLowerCase() === normalizedKey);
|
|
1270
|
+
if (existingCategory) {
|
|
1271
|
+
existingCategory.samples = [...existingCategory.samples, ...categoriesJson[c]].sort((a, b) => a.label().localeCompare(b.label()));
|
|
1272
|
+
}
|
|
1273
|
+
else {
|
|
1274
|
+
this.categories.push({
|
|
1275
|
+
name: c,
|
|
1276
|
+
samples: categoriesJson[c].sort((a, b) => a.label().localeCompare(b.label())),
|
|
1277
|
+
});
|
|
1278
|
+
}
|
|
1279
|
+
});
|
|
1280
|
+
this.categories.sort((a, b) => this.getCategoryIndex(a.name) - this.getCategoryIndex(b.name));
|
|
1281
|
+
const othersIndex = this.categories.findIndex(v => v.name === 'others');
|
|
1282
|
+
if (othersIndex > -1) {
|
|
1283
|
+
this.categories.push(this.categories.splice(othersIndex, 1)[0]);
|
|
1284
|
+
}
|
|
1285
|
+
}
|
|
1244
1286
|
_scrollToFragment(fragmentId, tabIndex, init, changeTab) {
|
|
1245
1287
|
if (init) {
|
|
1246
|
-
|
|
1247
|
-
|
|
1288
|
+
const tabsContent = this.tabsContent();
|
|
1289
|
+
if (tabsContent) {
|
|
1290
|
+
tabsContent.activateTab(tabIndex);
|
|
1248
1291
|
}
|
|
1249
1292
|
}
|
|
1250
1293
|
else {
|
|
1251
1294
|
if (changeTab) {
|
|
1252
1295
|
this.router.onSameUrlNavigation = 'reload';
|
|
1253
1296
|
this.router.navigate(['.'], { relativeTo: this.route, fragment: fragmentId }).then(() => {
|
|
1254
|
-
|
|
1255
|
-
|
|
1297
|
+
const tabsContent = this.tabsContent();
|
|
1298
|
+
if (tabsContent) {
|
|
1299
|
+
tabsContent.activateTab(tabIndex);
|
|
1256
1300
|
}
|
|
1257
1301
|
});
|
|
1258
1302
|
}
|
|
@@ -1288,21 +1332,9 @@ class DocPageComponent {
|
|
|
1288
1332
|
], [])
|
|
1289
1333
|
: [];
|
|
1290
1334
|
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
|
-
}
|
|
1335
|
+
return flatLinks.find((item) => item.id === id) ?? flatLinks.find((item) => item.alternateId === id);
|
|
1303
1336
|
}
|
|
1304
1337
|
_getApiUrl() {
|
|
1305
|
-
// console.log('getApiUrl');
|
|
1306
1338
|
const url = window.location;
|
|
1307
1339
|
const protocol = url.protocol;
|
|
1308
1340
|
const host = url.host;
|
|
@@ -1310,24 +1342,20 @@ class DocPageComponent {
|
|
|
1310
1342
|
const pathNameArray = pathName.split('/');
|
|
1311
1343
|
let name = pathNameArray[pathNameArray.length - 1];
|
|
1312
1344
|
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
1345
|
let protocolGen = protocol;
|
|
1319
1346
|
let hostGen = host;
|
|
1347
|
+
const cmpType = pathNameArray[pathNameArray.length - 1];
|
|
1320
1348
|
if (host.indexOf('localhost') > -1) {
|
|
1321
1349
|
protocolGen = 'https:';
|
|
1322
1350
|
hostGen = 'euidev.ecdevops.eu';
|
|
1323
1351
|
}
|
|
1324
1352
|
const appVersionNumber = this.appMetadata.appVersion.split('.')[0];
|
|
1325
1353
|
let docTypeRoot = `eui-docs-eui-${appVersionNumber}.x`;
|
|
1326
|
-
if (
|
|
1354
|
+
if (cmpType && cmpType.indexOf('ecl-') > -1) {
|
|
1327
1355
|
docTypeRoot = `eui-docs-ecl-${appVersionNumber}.x`;
|
|
1328
1356
|
}
|
|
1329
|
-
if (
|
|
1330
|
-
docTypeRoot = `eui-docs-mobile
|
|
1357
|
+
if (cmpType && cmpType.indexOf('euim-') > -1) {
|
|
1358
|
+
docTypeRoot = `eui-docs-eui-mobile-${appVersionNumber}.x`;
|
|
1331
1359
|
}
|
|
1332
1360
|
if (category === 'layout-components' || category === 'externals' || category === 'layout' || category === 'atoms') {
|
|
1333
1361
|
category = 'components';
|
|
@@ -1341,7 +1369,6 @@ class DocPageComponent {
|
|
|
1341
1369
|
if (this.cmp && this.cmp.alternateApiCategory) {
|
|
1342
1370
|
category = this.cmp.alternateApiCategory;
|
|
1343
1371
|
}
|
|
1344
|
-
// console.log(this.cmp);
|
|
1345
1372
|
if (this.cmp) {
|
|
1346
1373
|
switch (this.cmp.status) {
|
|
1347
1374
|
case 'success':
|
|
@@ -1351,20 +1378,19 @@ class DocPageComponent {
|
|
|
1351
1378
|
case 'warning':
|
|
1352
1379
|
this.stateLabel = 'will be removed in eUI 21';
|
|
1353
1380
|
this.stateTypeClass = 'warning';
|
|
1354
|
-
this.isDeprecated
|
|
1381
|
+
this.isDeprecated.set(true);
|
|
1355
1382
|
break;
|
|
1356
1383
|
case 'danger':
|
|
1357
1384
|
this.stateLabel = 'will be removed in eUI 21';
|
|
1358
1385
|
this.stateTypeClass = 'danger';
|
|
1359
|
-
this.isLegacy
|
|
1386
|
+
this.isLegacy.set(true);
|
|
1360
1387
|
break;
|
|
1361
1388
|
case 'info':
|
|
1362
1389
|
this.stateLabel = 'NOT READY';
|
|
1363
1390
|
this.stateTypeClass = 'accent';
|
|
1364
|
-
this.isNotReady
|
|
1391
|
+
this.isNotReady.set(true);
|
|
1365
1392
|
break;
|
|
1366
1393
|
}
|
|
1367
|
-
// construct cmp module import string
|
|
1368
1394
|
if (this.cmp.metadata?.moduleName) {
|
|
1369
1395
|
this.cmpImportModule = `import { ${this.cmp.metadata?.moduleName} } from '@eui/${this.cmp.metadata?.subEntryName}';`;
|
|
1370
1396
|
}
|
|
@@ -1375,39 +1401,33 @@ class DocPageComponent {
|
|
|
1375
1401
|
}
|
|
1376
1402
|
}
|
|
1377
1403
|
catch (e) {
|
|
1378
|
-
|
|
1404
|
+
// Component status resolution failed - non-critical
|
|
1379
1405
|
}
|
|
1380
1406
|
});
|
|
1381
1407
|
const formattedName = this._camelCaseString(name + '-' + category.slice(0, -1), '-', true);
|
|
1382
|
-
|
|
1408
|
+
const customApiUrl = this.customApiUrl();
|
|
1409
|
+
return customApiUrl ? `${protocolGen}//${hostGen}/${docTypeRoot}/${customApiUrl}.html` : `${protocolGen}//${hostGen}/${docTypeRoot}/${category}/${formattedName}.html`;
|
|
1383
1410
|
}
|
|
1384
|
-
_camelCaseString(
|
|
1385
|
-
const stringArray =
|
|
1411
|
+
_camelCaseString(str, separator, first) {
|
|
1412
|
+
const stringArray = str.split(separator);
|
|
1386
1413
|
let result = '';
|
|
1387
|
-
let s;
|
|
1388
1414
|
for (let i = 0; i < stringArray.length; i++) {
|
|
1389
|
-
s = stringArray[i];
|
|
1415
|
+
const s = stringArray[i];
|
|
1390
1416
|
if (i === 0) {
|
|
1391
|
-
|
|
1392
|
-
result += s.substring(0, 1).toUpperCase() + s.substr(1);
|
|
1393
|
-
}
|
|
1394
|
-
else {
|
|
1395
|
-
result += s;
|
|
1396
|
-
}
|
|
1417
|
+
result += first ? s.substring(0, 1).toUpperCase() + s.substring(1) : s;
|
|
1397
1418
|
}
|
|
1398
1419
|
else {
|
|
1399
|
-
result += s.substring(0, 1).toUpperCase() + s.
|
|
1420
|
+
result += s.substring(0, 1).toUpperCase() + s.substring(1);
|
|
1400
1421
|
}
|
|
1401
1422
|
}
|
|
1402
1423
|
return result;
|
|
1403
1424
|
}
|
|
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 }); }
|
|
1425
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1426
|
+
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 }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true, isSignal: 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>\n <eui-tab-header>\n <eui-label> OPTIONS & SAMPLES </eui-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>\n <eui-tab-header>\n <eui-label> API </eui-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>\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 @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 (pageThemingContent().length > 0) {\n <eui-tab>\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\" />\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageInteractiveContent().length > 0) {\n <eui-tab>\n <eui-tab-header>\n <eui-label>\n {{ pageInteractiveContent()[0].title() }}\n </eui-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\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @if (pageSectionsContent().length === 0) {\n @if (hasApi()) {\n <li\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 }\n @if (hasA11y()) {\n <li\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 @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 }\n @if (pageThemingContent().length === 0) {\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', 3)\">\n <span>{{ pageInteractiveContent()[0].title() }}</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.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.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: i5.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
1427
|
}
|
|
1407
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1428
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageComponent, decorators: [{
|
|
1408
1429
|
type: Component,
|
|
1409
|
-
args: [{ selector: 'eui-showcase-doc-page', encapsulation: ViewEncapsulation.None, imports: [
|
|
1410
|
-
CommonModule,
|
|
1430
|
+
args: [{ selector: 'eui-showcase-doc-page', encapsulation: ViewEncapsulation.None, host: { class: 'eui-doc-page' }, imports: [
|
|
1411
1431
|
DocPageCodeComponent,
|
|
1412
1432
|
EuiCodeHighlighterDirective,
|
|
1413
1433
|
...EUI_ALERT,
|
|
@@ -1415,159 +1435,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1415
1435
|
...EUI_PAGE,
|
|
1416
1436
|
...EUI_LABEL,
|
|
1417
1437
|
...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: [{
|
|
1460
|
-
type: ContentChildren,
|
|
1461
|
-
args: [forwardRef(() => DocPageSamplesContentDirective)]
|
|
1462
|
-
}], pageSectionsContent: [{
|
|
1463
|
-
type: ContentChildren,
|
|
1464
|
-
args: [forwardRef(() => DocPageSectionsContentDirective)]
|
|
1465
|
-
}], pageInteractiveContent: [{
|
|
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: [{
|
|
1478
|
-
type: ViewChild,
|
|
1479
|
-
args: ['tabsContent']
|
|
1480
|
-
}] } });
|
|
1438
|
+
], 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>\n <eui-tab-header>\n <eui-label> OPTIONS & SAMPLES </eui-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>\n <eui-tab-header>\n <eui-label> API </eui-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>\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 @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 (pageThemingContent().length > 0) {\n <eui-tab>\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\" />\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageInteractiveContent().length > 0) {\n <eui-tab>\n <eui-tab-header>\n <eui-label>\n {{ pageInteractiveContent()[0].title() }}\n </eui-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\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @if (pageSectionsContent().length === 0) {\n @if (hasApi()) {\n <li\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 }\n @if (hasA11y()) {\n <li\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 @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 }\n @if (pageThemingContent().length === 0) {\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', 3)\">\n <span>{{ pageInteractiveContent()[0].title() }}</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"] }]
|
|
1439
|
+
}], 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 }] }], tabsContent: [{ type: i0.ViewChild, args: ['tabsContent', { isSignal: true }] }] } });
|
|
1481
1440
|
/* eslint-disable @angular-eslint/directive-selector */
|
|
1482
1441
|
class DocPageOverviewContentDirective {
|
|
1483
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1484
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1442
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageOverviewContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1443
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageOverviewContentDirective, isStandalone: true, selector: "docPageOverview", ngImport: i0 }); }
|
|
1485
1444
|
}
|
|
1486
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1445
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageOverviewContentDirective, decorators: [{
|
|
1487
1446
|
type: Directive,
|
|
1488
1447
|
args: [{ selector: 'docPageOverview' }]
|
|
1489
1448
|
}] });
|
|
1490
1449
|
class DocPageOverviewDefaultContentDirective {
|
|
1491
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1492
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1450
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageOverviewDefaultContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1451
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageOverviewDefaultContentDirective, isStandalone: true, selector: "docPageOverviewDefault", ngImport: i0 }); }
|
|
1493
1452
|
}
|
|
1494
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1453
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageOverviewDefaultContentDirective, decorators: [{
|
|
1495
1454
|
type: Directive,
|
|
1496
1455
|
args: [{ selector: 'docPageOverviewDefault' }]
|
|
1497
1456
|
}] });
|
|
1498
1457
|
class DocPageInteractiveContentDirective {
|
|
1499
1458
|
constructor() {
|
|
1500
|
-
this.title = 'ADVANCED EXAMPLES'
|
|
1501
|
-
|
|
1459
|
+
this.title = input('ADVANCED EXAMPLES', /* @ts-ignore */
|
|
1460
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
1461
|
+
this.subTitle = input('Advanced use cases', /* @ts-ignore */
|
|
1462
|
+
...(ngDevMode ? [{ debugName: "subTitle" }] : /* istanbul ignore next */ []));
|
|
1502
1463
|
}
|
|
1503
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1504
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
1464
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageInteractiveContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1465
|
+
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
1466
|
}
|
|
1506
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1467
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageInteractiveContentDirective, decorators: [{
|
|
1507
1468
|
type: Directive,
|
|
1508
1469
|
args: [{ selector: 'docPageInteractive' }]
|
|
1509
|
-
}], propDecorators: { title: [{
|
|
1510
|
-
type: Input
|
|
1511
|
-
}], subTitle: [{
|
|
1512
|
-
type: Input
|
|
1513
|
-
}] } });
|
|
1470
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }] } });
|
|
1514
1471
|
class DocPageSamplesContentDirective {
|
|
1515
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1516
|
-
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: DocPageSamplesContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1473
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageSamplesContentDirective, isStandalone: true, selector: "docPageSamples", ngImport: i0 }); }
|
|
1517
1474
|
}
|
|
1518
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1475
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageSamplesContentDirective, decorators: [{
|
|
1519
1476
|
type: Directive,
|
|
1520
1477
|
args: [{ selector: 'docPageSamples' }]
|
|
1521
1478
|
}] });
|
|
1522
1479
|
class DocPageSectionsContentDirective {
|
|
1523
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1524
|
-
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: DocPageSectionsContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1481
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageSectionsContentDirective, isStandalone: true, selector: "docPageSections", ngImport: i0 }); }
|
|
1525
1482
|
}
|
|
1526
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1483
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageSectionsContentDirective, decorators: [{
|
|
1527
1484
|
type: Directive,
|
|
1528
1485
|
args: [{ selector: 'docPageSections' }]
|
|
1529
1486
|
}] });
|
|
1530
1487
|
class DocPageAccessibilityContentDirective {
|
|
1531
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1532
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1488
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageAccessibilityContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1489
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageAccessibilityContentDirective, isStandalone: true, selector: "docPageAccessibility", ngImport: i0 }); }
|
|
1533
1490
|
}
|
|
1534
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1491
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageAccessibilityContentDirective, decorators: [{
|
|
1535
1492
|
type: Directive,
|
|
1536
1493
|
args: [{ selector: 'docPageAccessibility' }]
|
|
1537
1494
|
}] });
|
|
1538
1495
|
class DocPageApiContentDirective {
|
|
1539
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1540
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1496
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageApiContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1497
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageApiContentDirective, isStandalone: true, selector: "docPageApi", ngImport: i0 }); }
|
|
1541
1498
|
}
|
|
1542
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1499
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageApiContentDirective, decorators: [{
|
|
1543
1500
|
type: Directive,
|
|
1544
1501
|
args: [{ selector: 'docPageApi' }]
|
|
1545
1502
|
}] });
|
|
1546
1503
|
class DocPageThemingContentDirective {
|
|
1547
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1548
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
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 }); }
|
|
1549
1506
|
}
|
|
1550
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1507
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageThemingContentDirective, decorators: [{
|
|
1551
1508
|
type: Directive,
|
|
1552
1509
|
args: [{ selector: 'docPageTheming' }]
|
|
1553
1510
|
}] });
|
|
1554
1511
|
|
|
1555
1512
|
class DocPageComponentV2 {
|
|
1556
1513
|
constructor() {
|
|
1557
|
-
this.
|
|
1558
|
-
|
|
1559
|
-
this.
|
|
1560
|
-
|
|
1561
|
-
this.
|
|
1562
|
-
|
|
1563
|
-
this.
|
|
1564
|
-
this.
|
|
1565
|
-
this.
|
|
1514
|
+
this.id = input(undefined, /* @ts-ignore */
|
|
1515
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
1516
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
1517
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1518
|
+
this.subLabel = input(undefined, /* @ts-ignore */
|
|
1519
|
+
...(ngDevMode ? [{ debugName: "subLabel" }] : /* istanbul ignore next */ []));
|
|
1520
|
+
this.isNotReadyInput = input(false, { ...(ngDevMode ? { debugName: "isNotReadyInput" } : /* istanbul ignore next */ {}), alias: 'isNotReady' });
|
|
1521
|
+
this.isDeprecatedInput = input(false, { ...(ngDevMode ? { debugName: "isDeprecatedInput" } : /* istanbul ignore next */ {}), alias: 'isDeprecated' });
|
|
1522
|
+
this.isLegacyInput = input(false, { ...(ngDevMode ? { debugName: "isLegacyInput" } : /* istanbul ignore next */ {}), alias: 'isLegacy' });
|
|
1523
|
+
this.codeFolder = input(undefined, /* @ts-ignore */
|
|
1524
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
1525
|
+
this.showcase = input('ux', /* @ts-ignore */
|
|
1526
|
+
...(ngDevMode ? [{ debugName: "showcase" }] : /* istanbul ignore next */ []));
|
|
1527
|
+
this.isNavigationVisible = input(true, /* @ts-ignore */
|
|
1528
|
+
...(ngDevMode ? [{ debugName: "isNavigationVisible" }] : /* istanbul ignore next */ []));
|
|
1529
|
+
this.hasApi = input(true, /* @ts-ignore */
|
|
1530
|
+
...(ngDevMode ? [{ debugName: "hasApi" }] : /* istanbul ignore next */ []));
|
|
1531
|
+
this.hasA11y = input(true, /* @ts-ignore */
|
|
1532
|
+
...(ngDevMode ? [{ debugName: "hasA11y" }] : /* istanbul ignore next */ []));
|
|
1533
|
+
this.customApiUrl = input(null, /* @ts-ignore */
|
|
1534
|
+
...(ngDevMode ? [{ debugName: "customApiUrl" }] : /* istanbul ignore next */ []));
|
|
1535
|
+
// Writable signals for properties that are both input-driven and internally mutated
|
|
1536
|
+
this.isNotReady = signal(false, /* @ts-ignore */
|
|
1537
|
+
...(ngDevMode ? [{ debugName: "isNotReady" }] : /* istanbul ignore next */ []));
|
|
1538
|
+
this.isDeprecated = signal(false, /* @ts-ignore */
|
|
1539
|
+
...(ngDevMode ? [{ debugName: "isDeprecated" }] : /* istanbul ignore next */ []));
|
|
1540
|
+
this.isLegacy = signal(false, /* @ts-ignore */
|
|
1541
|
+
...(ngDevMode ? [{ debugName: "isLegacy" }] : /* istanbul ignore next */ []));
|
|
1566
1542
|
this.isLoading = true;
|
|
1567
1543
|
this.isNavClicked = true;
|
|
1568
1544
|
this.hasCategories = false;
|
|
1569
1545
|
this.categories = [];
|
|
1546
|
+
this.samples = contentChildren(DocSampleComponent, { ...(ngDevMode ? { debugName: "samples" } : /* istanbul ignore next */ {}), descendants: true });
|
|
1547
|
+
this.sections = contentChildren(DocSectionComponent, { ...(ngDevMode ? { debugName: "sections" } : /* istanbul ignore next */ {}), descendants: true });
|
|
1548
|
+
this.pageOverviewContent = contentChildren(forwardRef(() => DocPageOverviewContentDirectiveV2), /* @ts-ignore */
|
|
1549
|
+
...(ngDevMode ? [{ debugName: "pageOverviewContent" }] : /* istanbul ignore next */ []));
|
|
1550
|
+
this.pageOverviewDefaultContent = contentChildren(forwardRef(() => DocPageOverviewDefaultContentDirectiveV2), /* @ts-ignore */
|
|
1551
|
+
...(ngDevMode ? [{ debugName: "pageOverviewDefaultContent" }] : /* istanbul ignore next */ []));
|
|
1552
|
+
this.pageSamplesContent = contentChildren(forwardRef(() => DocPageSamplesContentDirectiveV2), /* @ts-ignore */
|
|
1553
|
+
...(ngDevMode ? [{ debugName: "pageSamplesContent" }] : /* istanbul ignore next */ []));
|
|
1554
|
+
this.pageSectionsContent = contentChildren(forwardRef(() => DocPageSectionsContentDirectiveV2), /* @ts-ignore */
|
|
1555
|
+
...(ngDevMode ? [{ debugName: "pageSectionsContent" }] : /* istanbul ignore next */ []));
|
|
1556
|
+
this.pageInteractiveContent = contentChildren(forwardRef(() => DocPageInteractiveContentDirectiveV2), /* @ts-ignore */
|
|
1557
|
+
...(ngDevMode ? [{ debugName: "pageInteractiveContent" }] : /* istanbul ignore next */ []));
|
|
1558
|
+
this.pageAccessibilityContent = contentChildren(forwardRef(() => DocPageAccessibilityContentDirectiveV2), /* @ts-ignore */
|
|
1559
|
+
...(ngDevMode ? [{ debugName: "pageAccessibilityContent" }] : /* istanbul ignore next */ []));
|
|
1560
|
+
this.pageApiContent = contentChildren(forwardRef(() => DocPageApiContentDirectiveV2), /* @ts-ignore */
|
|
1561
|
+
...(ngDevMode ? [{ debugName: "pageApiContent" }] : /* istanbul ignore next */ []));
|
|
1562
|
+
this.pageThemingContent = contentChildren(forwardRef(() => DocPageThemingContentDirectiveV2), /* @ts-ignore */
|
|
1563
|
+
...(ngDevMode ? [{ debugName: "pageThemingContent" }] : /* istanbul ignore next */ []));
|
|
1564
|
+
this.tabsContent = viewChild('tabsContent', /* @ts-ignore */
|
|
1565
|
+
...(ngDevMode ? [{ debugName: "tabsContent" }] : /* istanbul ignore next */ []));
|
|
1570
1566
|
this.sanitizer = inject(DomSanitizer);
|
|
1567
|
+
this.location = inject(Location);
|
|
1568
|
+
this.router = inject(Router);
|
|
1569
|
+
this.route = inject(ActivatedRoute);
|
|
1570
|
+
this.asService = inject(EuiAppShellService);
|
|
1571
1571
|
this.TABS_DEF = [
|
|
1572
1572
|
{ index: 0, id: 'samples' },
|
|
1573
1573
|
{ index: 1, id: 'api' },
|
|
@@ -1586,101 +1586,36 @@ class DocPageComponentV2 {
|
|
|
1586
1586
|
{ index: 70, id: 'Composition' },
|
|
1587
1587
|
{ index: 80, id: 'Misc' },
|
|
1588
1588
|
];
|
|
1589
|
-
this.location = inject(Location);
|
|
1590
|
-
this.router = inject(Router);
|
|
1591
|
-
this.route = inject(ActivatedRoute);
|
|
1592
|
-
this.asService = inject(EuiAppShellService);
|
|
1593
1589
|
}
|
|
1594
1590
|
ngOnInit() {
|
|
1595
|
-
|
|
1591
|
+
// Sync input signals to writable signals
|
|
1592
|
+
if (this.isNotReadyInput())
|
|
1593
|
+
this.isNotReady.set(true);
|
|
1594
|
+
if (this.isDeprecatedInput())
|
|
1595
|
+
this.isDeprecated.set(true);
|
|
1596
|
+
if (this.isLegacyInput())
|
|
1597
|
+
this.isLegacy.set(true);
|
|
1598
|
+
afterNextRender(() => {
|
|
1596
1599
|
this.asService.isBlockDocumentActive = true;
|
|
1597
1600
|
});
|
|
1598
1601
|
this.appMetadata = this.asService.state.appMetadata;
|
|
1599
|
-
if (this.id && !this.label) {
|
|
1600
|
-
this.label = this.id;
|
|
1601
|
-
}
|
|
1602
1602
|
this.fragmentId = this.route.snapshot.fragment;
|
|
1603
1603
|
}
|
|
1604
1604
|
ngAfterViewInit() {
|
|
1605
|
-
//
|
|
1605
|
+
// Getting API url
|
|
1606
1606
|
try {
|
|
1607
1607
|
this.apiUrl = this._getApiUrl();
|
|
1608
|
-
|
|
1608
|
+
afterNextRender(() => {
|
|
1609
1609
|
this.apiUrlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.apiUrl);
|
|
1610
1610
|
});
|
|
1611
1611
|
}
|
|
1612
1612
|
catch (e) {
|
|
1613
|
-
|
|
1613
|
+
// API URL construction failed - non-critical
|
|
1614
1614
|
}
|
|
1615
|
-
|
|
1616
|
-
const tab = this.TABS_DEF.
|
|
1617
|
-
const
|
|
1618
|
-
|
|
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
|
-
});
|
|
1615
|
+
afterNextRender(() => {
|
|
1616
|
+
const tab = this.TABS_DEF.find((t) => t.id === this.fragmentId);
|
|
1617
|
+
const tabIndex = tab ? tab.index : 0;
|
|
1618
|
+
this._buildCategories();
|
|
1684
1619
|
setTimeout(() => {
|
|
1685
1620
|
this._scrollToFragment(this.fragmentId, tabIndex, true, true);
|
|
1686
1621
|
this.asService.isBlockDocumentActive = false;
|
|
@@ -1699,23 +1634,63 @@ class DocPageComponentV2 {
|
|
|
1699
1634
|
}
|
|
1700
1635
|
onTabActivate(event) {
|
|
1701
1636
|
if (!this.isLoading && !this.isNavClicked) {
|
|
1702
|
-
const tabId = this.TABS_DEF.
|
|
1703
|
-
|
|
1637
|
+
const tabId = this.TABS_DEF.find((t) => t.index === event.index)?.id;
|
|
1638
|
+
if (tabId) {
|
|
1639
|
+
this._scrollToFragment(tabId, event.index, false, false);
|
|
1640
|
+
}
|
|
1704
1641
|
}
|
|
1705
1642
|
this.isNavClicked = false;
|
|
1706
1643
|
}
|
|
1644
|
+
_buildCategories() {
|
|
1645
|
+
const categoriesJson = {};
|
|
1646
|
+
this.samples().forEach((s) => {
|
|
1647
|
+
const id = s.id();
|
|
1648
|
+
const category = s.category();
|
|
1649
|
+
const isDefault = id === '_default' || id === 'Default' || id === 'default';
|
|
1650
|
+
if (isDefault) {
|
|
1651
|
+
(categoriesJson['Base'] ??= []).push(s);
|
|
1652
|
+
}
|
|
1653
|
+
else if (category) {
|
|
1654
|
+
this.hasCategories = true;
|
|
1655
|
+
(categoriesJson[category] ??= []).push(s);
|
|
1656
|
+
}
|
|
1657
|
+
else {
|
|
1658
|
+
(categoriesJson['others'] ??= []).push(s);
|
|
1659
|
+
}
|
|
1660
|
+
});
|
|
1661
|
+
Object.keys(categoriesJson).forEach((c) => {
|
|
1662
|
+
const normalizedKey = c.toLowerCase();
|
|
1663
|
+
const existingCategory = this.categories.find(cat => cat.name.toLowerCase() === normalizedKey);
|
|
1664
|
+
if (existingCategory) {
|
|
1665
|
+
existingCategory.samples = [...existingCategory.samples, ...categoriesJson[c]].sort((a, b) => a.label().localeCompare(b.label()));
|
|
1666
|
+
}
|
|
1667
|
+
else {
|
|
1668
|
+
this.categories.push({
|
|
1669
|
+
name: c,
|
|
1670
|
+
samples: categoriesJson[c].sort((a, b) => a.label().localeCompare(b.label())),
|
|
1671
|
+
});
|
|
1672
|
+
}
|
|
1673
|
+
});
|
|
1674
|
+
const othersIndex = this.categories.findIndex(v => v.name === 'others');
|
|
1675
|
+
if (othersIndex > -1) {
|
|
1676
|
+
this.categories.push(this.categories.splice(othersIndex, 1)[0]);
|
|
1677
|
+
}
|
|
1678
|
+
this.categories.sort((a, b) => this.getCategoryIndex(a.name) - this.getCategoryIndex(b.name));
|
|
1679
|
+
}
|
|
1707
1680
|
_scrollToFragment(fragmentId, tabIndex, init, changeTab) {
|
|
1708
1681
|
if (init) {
|
|
1709
|
-
|
|
1710
|
-
|
|
1682
|
+
const tabsContent = this.tabsContent();
|
|
1683
|
+
if (tabsContent) {
|
|
1684
|
+
tabsContent.activateTab(tabIndex);
|
|
1711
1685
|
}
|
|
1712
1686
|
}
|
|
1713
1687
|
else {
|
|
1714
1688
|
if (changeTab) {
|
|
1715
1689
|
this.router.onSameUrlNavigation = 'reload';
|
|
1716
1690
|
this.router.navigate(['.'], { relativeTo: this.route, fragment: fragmentId }).then(() => {
|
|
1717
|
-
|
|
1718
|
-
|
|
1691
|
+
const tabsContent = this.tabsContent();
|
|
1692
|
+
if (tabsContent) {
|
|
1693
|
+
tabsContent.activateTab(tabIndex);
|
|
1719
1694
|
}
|
|
1720
1695
|
});
|
|
1721
1696
|
}
|
|
@@ -1751,21 +1726,9 @@ class DocPageComponentV2 {
|
|
|
1751
1726
|
], [])
|
|
1752
1727
|
: [];
|
|
1753
1728
|
const flatLinks = flatten(this.asService.state.sidebarLinks);
|
|
1754
|
-
|
|
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
|
-
}
|
|
1729
|
+
return flatLinks.find((item) => item.id === id) ?? flatLinks.find((item) => item.alternateId === id);
|
|
1766
1730
|
}
|
|
1767
1731
|
_getApiUrl() {
|
|
1768
|
-
// console.log('getApiUrl');
|
|
1769
1732
|
const url = window.location;
|
|
1770
1733
|
const protocol = url.protocol;
|
|
1771
1734
|
const host = url.host;
|
|
@@ -1773,8 +1736,7 @@ class DocPageComponentV2 {
|
|
|
1773
1736
|
const pathNameArray = pathName.split('/');
|
|
1774
1737
|
let name = pathNameArray[pathNameArray.length - 1];
|
|
1775
1738
|
let category = pathNameArray[pathNameArray.length - 2];
|
|
1776
|
-
let showcaseType;
|
|
1777
|
-
showcaseType = pathNameArray[pathNameArray.length - 3];
|
|
1739
|
+
let showcaseType = pathNameArray[pathNameArray.length - 3];
|
|
1778
1740
|
if (showcaseType?.indexOf('eui-showcase') === -1) {
|
|
1779
1741
|
showcaseType = pathNameArray[pathNameArray.length - 4];
|
|
1780
1742
|
}
|
|
@@ -1804,7 +1766,6 @@ class DocPageComponentV2 {
|
|
|
1804
1766
|
if (this.cmp && this.cmp.alternateApiCategory) {
|
|
1805
1767
|
category = this.cmp.alternateApiCategory;
|
|
1806
1768
|
}
|
|
1807
|
-
// console.log(this.cmp);
|
|
1808
1769
|
if (this.cmp) {
|
|
1809
1770
|
switch (this.cmp.status) {
|
|
1810
1771
|
case 'success':
|
|
@@ -1814,20 +1775,19 @@ class DocPageComponentV2 {
|
|
|
1814
1775
|
case 'warning':
|
|
1815
1776
|
this.stateLabel = 'will be removed in eUI 21';
|
|
1816
1777
|
this.stateTypeClass = 'warning';
|
|
1817
|
-
this.isDeprecated
|
|
1778
|
+
this.isDeprecated.set(true);
|
|
1818
1779
|
break;
|
|
1819
1780
|
case 'danger':
|
|
1820
1781
|
this.stateLabel = 'will be removed in eUI 21';
|
|
1821
1782
|
this.stateTypeClass = 'danger';
|
|
1822
|
-
this.isLegacy
|
|
1783
|
+
this.isLegacy.set(true);
|
|
1823
1784
|
break;
|
|
1824
1785
|
case 'info':
|
|
1825
1786
|
this.stateLabel = 'NOT READY';
|
|
1826
1787
|
this.stateTypeClass = 'accent';
|
|
1827
|
-
this.isNotReady
|
|
1788
|
+
this.isNotReady.set(true);
|
|
1828
1789
|
break;
|
|
1829
1790
|
}
|
|
1830
|
-
// construct cmp module import string
|
|
1831
1791
|
if (this.cmp.metadata?.moduleName) {
|
|
1832
1792
|
this.cmpImportModule = `import { ${this.cmp.metadata?.moduleName} } from '@eui/${this.cmp.metadata?.subEntryName}';`;
|
|
1833
1793
|
}
|
|
@@ -1838,282 +1798,220 @@ class DocPageComponentV2 {
|
|
|
1838
1798
|
}
|
|
1839
1799
|
}
|
|
1840
1800
|
catch (e) {
|
|
1841
|
-
|
|
1801
|
+
// Component status resolution failed - non-critical
|
|
1842
1802
|
}
|
|
1843
1803
|
});
|
|
1844
1804
|
const formattedName = this._camelCaseString(name + '-' + category.slice(0, -1), '-', true);
|
|
1845
|
-
|
|
1805
|
+
const customApiUrl = this.customApiUrl();
|
|
1806
|
+
return customApiUrl ? `${protocolGen}//${hostGen}/${docTypeRoot}/${category}/${customApiUrl}.html` : `${protocolGen}//${hostGen}/${docTypeRoot}/${category}/${formattedName}.html`;
|
|
1846
1807
|
}
|
|
1847
|
-
_camelCaseString(
|
|
1848
|
-
const stringArray =
|
|
1808
|
+
_camelCaseString(str, separator, first) {
|
|
1809
|
+
const stringArray = str.split(separator);
|
|
1849
1810
|
let result = '';
|
|
1850
|
-
let s;
|
|
1851
1811
|
for (let i = 0; i < stringArray.length; i++) {
|
|
1852
|
-
s = stringArray[i];
|
|
1812
|
+
const s = stringArray[i];
|
|
1853
1813
|
if (i === 0) {
|
|
1854
|
-
|
|
1855
|
-
result += s.substring(0, 1).toUpperCase() + s.substr(1);
|
|
1856
|
-
}
|
|
1857
|
-
else {
|
|
1858
|
-
result += s;
|
|
1859
|
-
}
|
|
1814
|
+
result += first ? s.substring(0, 1).toUpperCase() + s.substring(1) : s;
|
|
1860
1815
|
}
|
|
1861
1816
|
else {
|
|
1862
|
-
result += s.substring(0, 1).toUpperCase() + s.
|
|
1817
|
+
result += s.substring(0, 1).toUpperCase() + s.substring(1);
|
|
1863
1818
|
}
|
|
1864
1819
|
}
|
|
1865
1820
|
return result;
|
|
1866
1821
|
}
|
|
1867
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
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 }); }
|
|
1822
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageComponentV2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1823
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPageComponentV2, isStandalone: true, selector: "eui-showcase-doc-page-v2", 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 } }, 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(() => DocPageOverviewContentDirectiveV2), isSignal: true }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirectiveV2), isSignal: true }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirectiveV2), isSignal: true }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirectiveV2), isSignal: true }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirectiveV2), isSignal: true }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirectiveV2), isSignal: true }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirectiveV2), isSignal: true }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirectiveV2), isSignal: true }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true, isSignal: 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() || id() }}</eui-page-header-label>\n <eui-page-header-sub-label>{{subLabel()}}</eui-page-header-sub-label>\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>\n <eui-tab-header>\n <eui-label> OPTIONS & SAMPLES </eui-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=\"docPageOverviewV2\" />\n </div>\n }\n @if (pageOverviewDefaultContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverviewDefaultV2\" />\n </div>\n }\n <br />\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamplesV2\" />\n </eui-tab-body>\n </eui-tab>\n @if (hasApi()) {\n <eui-tab>\n <eui-tab-header>\n <eui-label> API </eui-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>\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 @if (pageAccessibilityContent().length !== 0) {\n <ng-content select=\"docPageAccessibilityV2\" />\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 (pageThemingContent().length > 0) {\n <eui-tab>\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=\"docPageThemingV2\" />\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageInteractiveContent().length > 0) {\n <eui-tab>\n <eui-tab-header>\n <eui-label>\n {{ pageInteractiveContent()[0].title() }}\n </eui-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=\"docPageInteractiveV2\" />\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=\"docPageSectionsV2\" />\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-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 <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @if (pageSectionsContent().length === 0) {\n @if (hasApi()) {\n <li\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 }\n @if (hasA11y()) {\n <li\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 @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 }\n @if (pageThemingContent().length === 0) {\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', 3)\">\n <span>{{ pageInteractiveContent()[0].title() }}</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{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-3xl)!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-3xl-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-4xl)}.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: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { 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.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i3$1.EuiPage, selector: "eui-page" }, { kind: "component", type: i3$1.EuiPageContent, selector: "eui-page-content" }, { kind: "component", type: i3$1.EuiPageHeader, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i3$1.EuiPageHeaderLabel, selector: "eui-page-header-label" }, { kind: "component", type: i3$1.EuiPageHeaderSubLabel, selector: "eui-page-header-sub-label" }, { kind: "component", type: i3$1.EuiPageHeaderActionItems, selector: "eui-page-header-action-items" }, { kind: "component", type: i3$1.EuiPageColumns, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3$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: i3$1.EuiPageColumnHeader, selector: "eui-page-column-header", inputs: ["expandAriaLabel", "collapseAriaLabel"] }, { kind: "component", type: i3$1.EuiPageColumnHeaderLabel, selector: "eui-page-column-header-label" }, { kind: "component", type: i3$1.EuiPageColumnBody, selector: "eui-page-column-body" }, { kind: "component", type: i4.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: i5.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
1824
|
}
|
|
1870
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1825
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageComponentV2, decorators: [{
|
|
1871
1826
|
type: Component,
|
|
1872
|
-
args: [{ selector: 'eui-showcase-doc-page-v2', encapsulation: ViewEncapsulation.None, imports: [
|
|
1873
|
-
CommonModule,
|
|
1827
|
+
args: [{ selector: 'eui-showcase-doc-page-v2', encapsulation: ViewEncapsulation.None, host: { class: 'eui-doc-page' }, imports: [
|
|
1874
1828
|
DocPageCodeComponent,
|
|
1875
1829
|
...EUI_ALERT,
|
|
1876
1830
|
...EUI_TABS,
|
|
1877
1831
|
...EUI_PAGE$1,
|
|
1878
1832
|
...EUI_LABEL,
|
|
1879
1833
|
...EUI_CHIP,
|
|
1880
|
-
...EUI_BLOCK_CONTENT,
|
|
1881
1834
|
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: {
|
|
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
|
-
}] } });
|
|
1835
|
+
], 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() || id() }}</eui-page-header-label>\n <eui-page-header-sub-label>{{subLabel()}}</eui-page-header-sub-label>\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>\n <eui-tab-header>\n <eui-label> OPTIONS & SAMPLES </eui-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=\"docPageOverviewV2\" />\n </div>\n }\n @if (pageOverviewDefaultContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverviewDefaultV2\" />\n </div>\n }\n <br />\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamplesV2\" />\n </eui-tab-body>\n </eui-tab>\n @if (hasApi()) {\n <eui-tab>\n <eui-tab-header>\n <eui-label> API </eui-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>\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 @if (pageAccessibilityContent().length !== 0) {\n <ng-content select=\"docPageAccessibilityV2\" />\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 (pageThemingContent().length > 0) {\n <eui-tab>\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=\"docPageThemingV2\" />\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageInteractiveContent().length > 0) {\n <eui-tab>\n <eui-tab-header>\n <eui-label>\n {{ pageInteractiveContent()[0].title() }}\n </eui-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=\"docPageInteractiveV2\" />\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=\"docPageSectionsV2\" />\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-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 <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @if (pageSectionsContent().length === 0) {\n @if (hasApi()) {\n <li\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 }\n @if (hasA11y()) {\n <li\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 @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 }\n @if (pageThemingContent().length === 0) {\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', 3)\">\n <span>{{ pageInteractiveContent()[0].title() }}</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{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-3xl)!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-3xl-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-4xl)}.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"] }]
|
|
1836
|
+
}], 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 }] }], 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(() => DocPageOverviewContentDirectiveV2), { isSignal: true }] }], pageOverviewDefaultContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewDefaultContentDirectiveV2), { isSignal: true }] }], pageSamplesContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSamplesContentDirectiveV2), { isSignal: true }] }], pageSectionsContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSectionsContentDirectiveV2), { isSignal: true }] }], pageInteractiveContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageInteractiveContentDirectiveV2), { isSignal: true }] }], pageAccessibilityContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageAccessibilityContentDirectiveV2), { isSignal: true }] }], pageApiContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageApiContentDirectiveV2), { isSignal: true }] }], pageThemingContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageThemingContentDirectiveV2), { isSignal: true }] }], tabsContent: [{ type: i0.ViewChild, args: ['tabsContent', { isSignal: true }] }] } });
|
|
1944
1837
|
/* eslint-disable @angular-eslint/directive-selector */
|
|
1945
1838
|
class DocPageOverviewContentDirectiveV2 {
|
|
1946
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1947
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1839
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageOverviewContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1840
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageOverviewContentDirectiveV2, isStandalone: true, selector: "docPageOverviewV2", ngImport: i0 }); }
|
|
1948
1841
|
}
|
|
1949
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1842
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageOverviewContentDirectiveV2, decorators: [{
|
|
1950
1843
|
type: Directive,
|
|
1951
1844
|
args: [{ selector: 'docPageOverviewV2' }]
|
|
1952
1845
|
}] });
|
|
1953
1846
|
class DocPageOverviewDefaultContentDirectiveV2 {
|
|
1954
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1955
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1847
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageOverviewDefaultContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1848
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageOverviewDefaultContentDirectiveV2, isStandalone: true, selector: "docPageOverviewDefaultV2", ngImport: i0 }); }
|
|
1956
1849
|
}
|
|
1957
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1850
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageOverviewDefaultContentDirectiveV2, decorators: [{
|
|
1958
1851
|
type: Directive,
|
|
1959
1852
|
args: [{ selector: 'docPageOverviewDefaultV2' }]
|
|
1960
1853
|
}] });
|
|
1961
1854
|
class DocPageInteractiveContentDirectiveV2 {
|
|
1962
1855
|
constructor() {
|
|
1963
|
-
this.title = 'ADVANCED EXAMPLES'
|
|
1964
|
-
|
|
1856
|
+
this.title = input('ADVANCED EXAMPLES', /* @ts-ignore */
|
|
1857
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
1858
|
+
this.subTitle = input('Advanced use cases', /* @ts-ignore */
|
|
1859
|
+
...(ngDevMode ? [{ debugName: "subTitle" }] : /* istanbul ignore next */ []));
|
|
1965
1860
|
}
|
|
1966
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1967
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
1861
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageInteractiveContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1862
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: DocPageInteractiveContentDirectiveV2, isStandalone: true, selector: "docPageInteractiveV2", 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 }); }
|
|
1968
1863
|
}
|
|
1969
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1864
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageInteractiveContentDirectiveV2, decorators: [{
|
|
1970
1865
|
type: Directive,
|
|
1971
1866
|
args: [{ selector: 'docPageInteractiveV2' }]
|
|
1972
|
-
}], propDecorators: { title: [{
|
|
1973
|
-
type: Input
|
|
1974
|
-
}], subTitle: [{
|
|
1975
|
-
type: Input
|
|
1976
|
-
}] } });
|
|
1867
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }] } });
|
|
1977
1868
|
class DocPageSamplesContentDirectiveV2 {
|
|
1978
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1979
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1869
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageSamplesContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1870
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageSamplesContentDirectiveV2, isStandalone: true, selector: "docPageSamplesV2", ngImport: i0 }); }
|
|
1980
1871
|
}
|
|
1981
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1872
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageSamplesContentDirectiveV2, decorators: [{
|
|
1982
1873
|
type: Directive,
|
|
1983
1874
|
args: [{ selector: 'docPageSamplesV2' }]
|
|
1984
1875
|
}] });
|
|
1985
1876
|
class DocPageSectionsContentDirectiveV2 {
|
|
1986
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1987
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1877
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageSectionsContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1878
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageSectionsContentDirectiveV2, isStandalone: true, selector: "docPageSectionsV2", ngImport: i0 }); }
|
|
1988
1879
|
}
|
|
1989
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1880
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageSectionsContentDirectiveV2, decorators: [{
|
|
1990
1881
|
type: Directive,
|
|
1991
1882
|
args: [{ selector: 'docPageSectionsV2' }]
|
|
1992
1883
|
}] });
|
|
1993
1884
|
class DocPageAccessibilityContentDirectiveV2 {
|
|
1994
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1995
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1885
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageAccessibilityContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1886
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageAccessibilityContentDirectiveV2, isStandalone: true, selector: "docPageAccessibilityV2", ngImport: i0 }); }
|
|
1996
1887
|
}
|
|
1997
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1888
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageAccessibilityContentDirectiveV2, decorators: [{
|
|
1998
1889
|
type: Directive,
|
|
1999
1890
|
args: [{ selector: 'docPageAccessibilityV2' }]
|
|
2000
1891
|
}] });
|
|
2001
1892
|
class DocPageApiContentDirectiveV2 {
|
|
2002
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2003
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1893
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageApiContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1894
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageApiContentDirectiveV2, isStandalone: true, selector: "docPageApiV2", ngImport: i0 }); }
|
|
2004
1895
|
}
|
|
2005
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1896
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageApiContentDirectiveV2, decorators: [{
|
|
2006
1897
|
type: Directive,
|
|
2007
1898
|
args: [{ selector: 'docPageApiV2' }]
|
|
2008
1899
|
}] });
|
|
2009
1900
|
class DocPageThemingContentDirectiveV2 {
|
|
2010
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2011
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1901
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageThemingContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1902
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageThemingContentDirectiveV2, isStandalone: true, selector: "docPageThemingV2", ngImport: i0 }); }
|
|
2012
1903
|
}
|
|
2013
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1904
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageThemingContentDirectiveV2, decorators: [{
|
|
2014
1905
|
type: Directive,
|
|
2015
1906
|
args: [{ selector: 'docPageThemingV2' }]
|
|
2016
1907
|
}] });
|
|
2017
1908
|
|
|
2018
1909
|
class DocPageCodeFabComponent {
|
|
2019
1910
|
constructor() {
|
|
2020
|
-
this.codeFolder = ''
|
|
2021
|
-
|
|
2022
|
-
this.
|
|
1911
|
+
this.codeFolder = input('', /* @ts-ignore */
|
|
1912
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
1913
|
+
this.showcase = input('design-patterns', /* @ts-ignore */
|
|
1914
|
+
...(ngDevMode ? [{ debugName: "showcase" }] : /* istanbul ignore next */ []));
|
|
1915
|
+
this.hasContentDialog = input(true, /* @ts-ignore */
|
|
1916
|
+
...(ngDevMode ? [{ debugName: "hasContentDialog" }] : /* istanbul ignore next */ []));
|
|
1917
|
+
this.dialog = viewChild('dialog', /* @ts-ignore */
|
|
1918
|
+
...(ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []));
|
|
2023
1919
|
this.asService = inject(EuiAppShellService);
|
|
2024
1920
|
}
|
|
2025
1921
|
toggleCode() {
|
|
2026
|
-
this.dialog
|
|
1922
|
+
this.dialog()?.openDialog();
|
|
2027
1923
|
}
|
|
2028
1924
|
onClose() {
|
|
2029
|
-
this.dialog
|
|
1925
|
+
this.dialog()?.closeDialog();
|
|
2030
1926
|
}
|
|
2031
1927
|
onOpenCode() {
|
|
2032
|
-
// eslint-disable-next-line max-len
|
|
2033
1928
|
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');
|
|
1929
|
+
const sourceRootPath = `${showcaseRoot}/showcase-${this.showcase()}/`;
|
|
1930
|
+
window.open(sourceRootPath + this.codeFolder(), '_blank');
|
|
2036
1931
|
}
|
|
2037
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2038
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1932
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeFabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1933
|
+
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$3.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
1934
|
}
|
|
2040
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1935
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeFabComponent, decorators: [{
|
|
2041
1936
|
type: Component,
|
|
2042
1937
|
args: [{ selector: 'eui-showcase-doc-page-code-fab', imports: [
|
|
2043
|
-
CommonModule,
|
|
2044
|
-
EuiTooltipDirective,
|
|
2045
1938
|
...EUI_ICON,
|
|
2046
1939
|
...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
|
-
}] } });
|
|
1940
|
+
...EUI_BUTTON
|
|
1941
|
+
], 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" }]
|
|
1942
|
+
}], 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
1943
|
|
|
2060
1944
|
class DocPageCodeModalComponent {
|
|
2061
1945
|
constructor() {
|
|
2062
|
-
this.width = '95vw'
|
|
1946
|
+
this.width = input('95vw', /* @ts-ignore */
|
|
1947
|
+
...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
1948
|
+
this.dialog = viewChild('dialog', /* @ts-ignore */
|
|
1949
|
+
...(ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []));
|
|
2063
1950
|
this.asService = inject(EuiAppShellService);
|
|
2064
1951
|
}
|
|
2065
1952
|
toggleCode() {
|
|
2066
|
-
this.dialog
|
|
1953
|
+
this.dialog()?.openDialog();
|
|
2067
1954
|
}
|
|
2068
1955
|
onClose() {
|
|
2069
|
-
this.dialog
|
|
1956
|
+
this.dialog()?.closeDialog();
|
|
2070
1957
|
}
|
|
2071
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2072
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1958
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1959
|
+
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$3.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
1960
|
}
|
|
2074
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1961
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeModalComponent, decorators: [{
|
|
2075
1962
|
type: Component,
|
|
2076
1963
|
args: [{ selector: 'eui-showcase-doc-page-code-modal', imports: [
|
|
2077
|
-
CommonModule,
|
|
2078
1964
|
...EUI_DIALOG,
|
|
2079
1965
|
...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
|
-
}] } });
|
|
1966
|
+
], 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" }]
|
|
1967
|
+
}], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], dialog: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }] } });
|
|
2087
1968
|
|
|
2088
|
-
/* eslint-disable max-len */
|
|
2089
1969
|
/* eslint-disable */
|
|
2090
1970
|
class DocPagePatternSampleDirective {
|
|
2091
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2092
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1971
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1972
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPagePatternSampleDirective, isStandalone: true, selector: "docPagePatternSample", ngImport: i0 }); }
|
|
2093
1973
|
}
|
|
2094
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1974
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleDirective, decorators: [{
|
|
2095
1975
|
type: Directive,
|
|
2096
1976
|
args: [{ selector: 'docPagePatternSample' }]
|
|
2097
1977
|
}] });
|
|
2098
1978
|
class DocPagePatternDocDirective {
|
|
2099
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2100
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1979
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1980
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPagePatternDocDirective, isStandalone: true, selector: "docPagePatternDoc", ngImport: i0 }); }
|
|
2101
1981
|
}
|
|
2102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1982
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternDocDirective, decorators: [{
|
|
2103
1983
|
type: Directive,
|
|
2104
1984
|
args: [{ selector: 'docPagePatternDoc' }]
|
|
2105
1985
|
}] });
|
|
2106
1986
|
class DocPagePatternComponent {
|
|
2107
1987
|
constructor() {
|
|
2108
|
-
this.
|
|
2109
|
-
|
|
2110
|
-
this.
|
|
1988
|
+
this.id = input(undefined, /* @ts-ignore */
|
|
1989
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
1990
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
1991
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1992
|
+
this.anatomyImage = input(undefined, /* @ts-ignore */
|
|
1993
|
+
...(ngDevMode ? [{ debugName: "anatomyImage" }] : /* istanbul ignore next */ []));
|
|
1994
|
+
this.docEntries = input([], /* @ts-ignore */
|
|
1995
|
+
...(ngDevMode ? [{ debugName: "docEntries" }] : /* istanbul ignore next */ []));
|
|
1996
|
+
this.dos = input([], /* @ts-ignore */
|
|
1997
|
+
...(ngDevMode ? [{ debugName: "dos" }] : /* istanbul ignore next */ []));
|
|
1998
|
+
this.donts = input([], /* @ts-ignore */
|
|
1999
|
+
...(ngDevMode ? [{ debugName: "donts" }] : /* istanbul ignore next */ []));
|
|
2000
|
+
this.sourceUrl = input(undefined, /* @ts-ignore */
|
|
2001
|
+
...(ngDevMode ? [{ debugName: "sourceUrl" }] : /* istanbul ignore next */ []));
|
|
2002
|
+
this.figmaUrl = input(undefined, /* @ts-ignore */
|
|
2003
|
+
...(ngDevMode ? [{ debugName: "figmaUrl" }] : /* istanbul ignore next */ []));
|
|
2004
|
+
this.figmaEmbedSrc = input(undefined, /* @ts-ignore */
|
|
2005
|
+
...(ngDevMode ? [{ debugName: "figmaEmbedSrc" }] : /* istanbul ignore next */ []));
|
|
2111
2006
|
this.topPosToStartShowing = 100;
|
|
2112
2007
|
this.tabSelectedIndex = 0;
|
|
2113
2008
|
this.sanitizer = inject(DomSanitizer);
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
|
|
2009
|
+
effect(() => {
|
|
2010
|
+
const figmaEmbedSrc = this.figmaEmbedSrc();
|
|
2011
|
+
if (figmaEmbedSrc) {
|
|
2012
|
+
this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(figmaEmbedSrc);
|
|
2013
|
+
}
|
|
2014
|
+
});
|
|
2117
2015
|
}
|
|
2118
2016
|
checkScroll() {
|
|
2119
2017
|
const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
|
|
@@ -2124,17 +2022,10 @@ class DocPagePatternComponent {
|
|
|
2124
2022
|
this.isShowGoTop = false;
|
|
2125
2023
|
}
|
|
2126
2024
|
}
|
|
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
|
|
2025
|
+
onNavigateToCode() {
|
|
2135
2026
|
const showcase = 'ux-patterns';
|
|
2136
2027
|
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');
|
|
2028
|
+
window.open(sourceRootPath + this.sourceUrl(), '_blank');
|
|
2138
2029
|
}
|
|
2139
2030
|
onTabActivate(event) {
|
|
2140
2031
|
this.tabSelectedIndex = event.index;
|
|
@@ -2146,170 +2037,139 @@ class DocPagePatternComponent {
|
|
|
2146
2037
|
behavior: 'smooth',
|
|
2147
2038
|
});
|
|
2148
2039
|
}
|
|
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,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 </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 }); }
|
|
2040
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2041
|
+
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,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"], 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$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i3$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i3$2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i3$2.EuiCardHeaderRightContentComponent, selector: "eui-card-header-right-content" }, { kind: "component", type: i5.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.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }, { kind: "component", type: i4.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
2042
|
}
|
|
2152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2043
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternComponent, decorators: [{
|
|
2153
2044
|
type: Component,
|
|
2154
|
-
args: [{ selector: 'eui-showcase-doc-page-pattern', encapsulation: ViewEncapsulation.None, imports: [
|
|
2155
|
-
CommonModule,
|
|
2045
|
+
args: [{ selector: 'eui-showcase-doc-page-pattern', encapsulation: ViewEncapsulation.None, host: { class: 'doc-page-pattern' }, imports: [
|
|
2156
2046
|
...EUI_ICON,
|
|
2157
2047
|
...EUI_TABS,
|
|
2158
2048
|
...EUI_CARD,
|
|
2159
2049
|
...EUI_CHIP,
|
|
2160
2050
|
...EUI_BADGE,
|
|
2161
2051
|
...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,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 </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: [{
|
|
2052
|
+
], 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"] }]
|
|
2053
|
+
}], 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
2054
|
type: HostListener,
|
|
2192
2055
|
args: ['window:scroll']
|
|
2193
2056
|
}] } });
|
|
2194
2057
|
|
|
2195
2058
|
class DocPagePatternSampleRefsComponent {
|
|
2196
2059
|
constructor() {
|
|
2197
|
-
this.
|
|
2198
|
-
|
|
2060
|
+
this.docEntries = input([], /* @ts-ignore */
|
|
2061
|
+
...(ngDevMode ? [{ debugName: "docEntries" }] : /* istanbul ignore next */ []));
|
|
2062
|
+
this.codeFolder = input(undefined, /* @ts-ignore */
|
|
2063
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
2199
2064
|
}
|
|
2200
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2201
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2065
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleRefsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2066
|
+
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: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i3$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i3$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i5$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }] }); }
|
|
2202
2067
|
}
|
|
2203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2068
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleRefsComponent, decorators: [{
|
|
2204
2069
|
type: Component,
|
|
2205
|
-
args: [{ selector: 'eui-showcase-doc-pattern-sample-refs', imports: [
|
|
2206
|
-
CommonModule,
|
|
2070
|
+
args: [{ selector: 'eui-showcase-doc-pattern-sample-refs', host: { class: 'eui-showcase-doc-page-pattern-sample-refs' }, imports: [
|
|
2207
2071
|
...EUI_CHIP,
|
|
2208
2072
|
...EUI_CARD,
|
|
2209
2073
|
...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
|
-
}] } });
|
|
2074
|
+
], 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"] }]
|
|
2075
|
+
}], propDecorators: { docEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "docEntries", required: false }] }], codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }] } });
|
|
2219
2076
|
|
|
2220
2077
|
/* eslint-disable */
|
|
2221
2078
|
class DocPagePatternSampleDocDirective {
|
|
2222
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2223
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2079
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2080
|
+
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
2081
|
}
|
|
2225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2082
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleDocDirective, decorators: [{
|
|
2226
2083
|
type: Directive,
|
|
2227
2084
|
args: [{ selector: 'eui-showcase-doc-pattern-sample-doc' }]
|
|
2228
2085
|
}] });
|
|
2229
2086
|
class DocPagePatternSampleComponent {
|
|
2230
2087
|
constructor() {
|
|
2231
|
-
this.
|
|
2232
|
-
|
|
2233
|
-
this.
|
|
2234
|
-
|
|
2235
|
-
this.
|
|
2236
|
-
|
|
2237
|
-
this.
|
|
2238
|
-
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2088
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
2089
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2090
|
+
this.docEntries = input([], /* @ts-ignore */
|
|
2091
|
+
...(ngDevMode ? [{ debugName: "docEntries" }] : /* istanbul ignore next */ []));
|
|
2092
|
+
this.codeFolder = input(undefined, /* @ts-ignore */
|
|
2093
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
2094
|
+
this.refsImage = input(undefined, /* @ts-ignore */
|
|
2095
|
+
...(ngDevMode ? [{ debugName: "refsImage" }] : /* istanbul ignore next */ []));
|
|
2096
|
+
this.refsImage2 = input(undefined, /* @ts-ignore */
|
|
2097
|
+
...(ngDevMode ? [{ debugName: "refsImage2" }] : /* istanbul ignore next */ []));
|
|
2098
|
+
this.figmaLink = input(undefined, /* @ts-ignore */
|
|
2099
|
+
...(ngDevMode ? [{ debugName: "figmaLink" }] : /* istanbul ignore next */ []));
|
|
2100
|
+
this.aiLink = input(undefined, /* @ts-ignore */
|
|
2101
|
+
...(ngDevMode ? [{ debugName: "aiLink" }] : /* istanbul ignore next */ []));
|
|
2102
|
+
this.isSmall = input(false, /* @ts-ignore */
|
|
2103
|
+
...(ngDevMode ? [{ debugName: "isSmall" }] : /* istanbul ignore next */ []));
|
|
2104
|
+
this.isTiny = input(false, /* @ts-ignore */
|
|
2105
|
+
...(ngDevMode ? [{ debugName: "isTiny" }] : /* istanbul ignore next */ []));
|
|
2106
|
+
this.isMedium = input(false, /* @ts-ignore */
|
|
2107
|
+
...(ngDevMode ? [{ debugName: "isMedium" }] : /* istanbul ignore next */ []));
|
|
2108
|
+
this.isLarge = input(false, /* @ts-ignore */
|
|
2109
|
+
...(ngDevMode ? [{ debugName: "isLarge" }] : /* istanbul ignore next */ []));
|
|
2110
|
+
this.isExtraLarge = input(false, /* @ts-ignore */
|
|
2111
|
+
...(ngDevMode ? [{ debugName: "isExtraLarge" }] : /* istanbul ignore next */ []));
|
|
2112
|
+
this.hasAutoHeight = input(false, /* @ts-ignore */
|
|
2113
|
+
...(ngDevMode ? [{ debugName: "hasAutoHeight" }] : /* istanbul ignore next */ []));
|
|
2114
|
+
this.docContent = contentChild(forwardRef(() => DocPagePatternSampleDocDirective), /* @ts-ignore */
|
|
2115
|
+
...(ngDevMode ? [{ debugName: "docContent" }] : /* istanbul ignore next */ []));
|
|
2244
2116
|
}
|
|
2245
2117
|
openCode() {
|
|
2246
|
-
// eslint-disable-next-line max-len
|
|
2247
2118
|
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');
|
|
2119
|
+
window.open(showcaseRoot + this.codeFolder(), '_blank');
|
|
2249
2120
|
}
|
|
2250
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2251
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2121
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2122
|
+
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$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "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
2123
|
}
|
|
2253
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleComponent, decorators: [{
|
|
2254
2125
|
type: Component,
|
|
2255
|
-
args: [{ selector: 'eui-showcase-doc-pattern-sample', imports: [
|
|
2256
|
-
CommonModule,
|
|
2126
|
+
args: [{ selector: 'eui-showcase-doc-pattern-sample', host: { class: 'eui-showcase-doc-page-pattern-sample', '[class.no-code]': '!codeFolder()' }, imports: [
|
|
2257
2127
|
...EUI_BADGE,
|
|
2258
2128
|
...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
|
-
}] } });
|
|
2129
|
+
], 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"] }]
|
|
2130
|
+
}], 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
2131
|
|
|
2292
|
-
/* eslint-disable max-len */
|
|
2293
2132
|
/* eslint-disable */
|
|
2294
2133
|
class DocPagePatternSimpleDocDirective {
|
|
2295
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2296
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2134
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSimpleDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2135
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPagePatternSimpleDocDirective, isStandalone: true, selector: "docPagePatternDoc", ngImport: i0 }); }
|
|
2297
2136
|
}
|
|
2298
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2137
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSimpleDocDirective, decorators: [{
|
|
2299
2138
|
type: Directive,
|
|
2300
2139
|
args: [{ selector: 'docPagePatternDoc' }]
|
|
2301
2140
|
}] });
|
|
2141
|
+
const REPOSITORY_URL = (showcase) => `https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-${showcase}/-/blob/master/src/app/features/`;
|
|
2302
2142
|
class DocPagePatternSimpleComponent {
|
|
2303
2143
|
constructor() {
|
|
2304
|
-
this.
|
|
2305
|
-
|
|
2306
|
-
this.
|
|
2144
|
+
this.docContent = contentChild(forwardRef(() => DocPagePatternSimpleDocDirective), /* @ts-ignore */
|
|
2145
|
+
...(ngDevMode ? [{ debugName: "docContent" }] : /* istanbul ignore next */ []));
|
|
2146
|
+
this.id = input(undefined, /* @ts-ignore */
|
|
2147
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
2148
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
2149
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2150
|
+
this.anatomyImage = input(undefined, /* @ts-ignore */
|
|
2151
|
+
...(ngDevMode ? [{ debugName: "anatomyImage" }] : /* istanbul ignore next */ []));
|
|
2152
|
+
this.docEntries = input([], /* @ts-ignore */
|
|
2153
|
+
...(ngDevMode ? [{ debugName: "docEntries" }] : /* istanbul ignore next */ []));
|
|
2154
|
+
this.dos = input([], /* @ts-ignore */
|
|
2155
|
+
...(ngDevMode ? [{ debugName: "dos" }] : /* istanbul ignore next */ []));
|
|
2156
|
+
this.donts = input([], /* @ts-ignore */
|
|
2157
|
+
...(ngDevMode ? [{ debugName: "donts" }] : /* istanbul ignore next */ []));
|
|
2158
|
+
this.sourceUrl = input(undefined, /* @ts-ignore */
|
|
2159
|
+
...(ngDevMode ? [{ debugName: "sourceUrl" }] : /* istanbul ignore next */ []));
|
|
2160
|
+
this.figmaUrl = input(undefined, /* @ts-ignore */
|
|
2161
|
+
...(ngDevMode ? [{ debugName: "figmaUrl" }] : /* istanbul ignore next */ []));
|
|
2162
|
+
this.figmaEmbedSrc = input(undefined, /* @ts-ignore */
|
|
2163
|
+
...(ngDevMode ? [{ debugName: "figmaEmbedSrc" }] : /* istanbul ignore next */ []));
|
|
2307
2164
|
this.topPosToStartShowing = 100;
|
|
2308
2165
|
this.tabSelectedIndex = 0;
|
|
2309
2166
|
this.sanitizer = inject(DomSanitizer);
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
2167
|
+
effect(() => {
|
|
2168
|
+
const figmaEmbedSrc = this.figmaEmbedSrc();
|
|
2169
|
+
if (figmaEmbedSrc) {
|
|
2170
|
+
this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(figmaEmbedSrc);
|
|
2171
|
+
}
|
|
2172
|
+
});
|
|
2313
2173
|
}
|
|
2314
2174
|
checkScroll() {
|
|
2315
2175
|
const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
|
|
@@ -2320,17 +2180,10 @@ class DocPagePatternSimpleComponent {
|
|
|
2320
2180
|
this.isShowGoTop = false;
|
|
2321
2181
|
}
|
|
2322
2182
|
}
|
|
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
|
|
2183
|
+
onNavigateToCode() {
|
|
2331
2184
|
const showcase = 'ux-patterns';
|
|
2332
|
-
const sourceRootPath =
|
|
2333
|
-
window.open(sourceRootPath + this.sourceUrl, '_blank');
|
|
2185
|
+
const sourceRootPath = REPOSITORY_URL(showcase);
|
|
2186
|
+
window.open(sourceRootPath + this.sourceUrl(), '_blank');
|
|
2334
2187
|
}
|
|
2335
2188
|
onTabSelect(event) {
|
|
2336
2189
|
this.tabSelectedIndex = event.index;
|
|
@@ -2342,209 +2195,180 @@ class DocPagePatternSimpleComponent {
|
|
|
2342
2195
|
behavior: 'smooth',
|
|
2343
2196
|
});
|
|
2344
2197
|
}
|
|
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 }); }
|
|
2198
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2199
|
+
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,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\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$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i3$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i3$2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i5$2.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "hasNoBackground", "isReverse", "colorPalette"] }, { kind: "component", type: i5$2.EuiAvatarTextComponent, selector: "eui-avatar-text" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2347
2200
|
}
|
|
2348
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2201
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSimpleComponent, decorators: [{
|
|
2349
2202
|
type: Component,
|
|
2350
|
-
args: [{ selector: 'eui-showcase-doc-page-pattern-simple', encapsulation: ViewEncapsulation.None, imports: [
|
|
2351
|
-
CommonModule,
|
|
2203
|
+
args: [{ selector: 'eui-showcase-doc-page-pattern-simple', encapsulation: ViewEncapsulation.None, host: { class: 'doc-page-pattern' }, imports: [
|
|
2352
2204
|
...EUI_BUTTON,
|
|
2353
|
-
...EUI_TABS,
|
|
2354
2205
|
...EUI_ICON,
|
|
2355
2206
|
...EUI_CARD,
|
|
2356
2207
|
...EUI_CHIP,
|
|
2357
2208
|
...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: [{
|
|
2209
|
+
], 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,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\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"] }]
|
|
2210
|
+
}], 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
2211
|
type: HostListener,
|
|
2385
2212
|
args: ['window:scroll']
|
|
2386
2213
|
}] } });
|
|
2387
2214
|
|
|
2388
2215
|
class DocSampleApiComponent {
|
|
2389
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2390
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2216
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSampleApiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2217
|
+
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
2218
|
}
|
|
2392
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2219
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSampleApiComponent, decorators: [{
|
|
2393
2220
|
type: Component,
|
|
2394
2221
|
args: [{ selector: 'eui-showcase-doc-sample-api', template: "" }]
|
|
2395
2222
|
}] });
|
|
2396
2223
|
|
|
2397
2224
|
class DocSectionCodeComponent {
|
|
2398
2225
|
constructor() {
|
|
2399
|
-
this.
|
|
2400
|
-
|
|
2226
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
2227
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2228
|
+
this.content = input(undefined, /* @ts-ignore */
|
|
2229
|
+
...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
|
|
2230
|
+
this.styleClass = input(undefined, /* @ts-ignore */
|
|
2231
|
+
...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
|
|
2232
|
+
this.versionLabel = input(undefined, /* @ts-ignore */
|
|
2233
|
+
...(ngDevMode ? [{ debugName: "versionLabel" }] : /* istanbul ignore next */ []));
|
|
2234
|
+
this.isDeprecated = input(false, /* @ts-ignore */
|
|
2235
|
+
...(ngDevMode ? [{ debugName: "isDeprecated" }] : /* istanbul ignore next */ []));
|
|
2236
|
+
this.isCodeExpanded = signal(false, /* @ts-ignore */
|
|
2237
|
+
...(ngDevMode ? [{ debugName: "isCodeExpanded" }] : /* istanbul ignore next */ []));
|
|
2238
|
+
this.sectionDescription = contentChild(forwardRef(() => DocSectionCodeDescriptionTagDirective), /* @ts-ignore */
|
|
2239
|
+
...(ngDevMode ? [{ debugName: "sectionDescription" }] : /* istanbul ignore next */ []));
|
|
2240
|
+
this.sectionCodeHTML = contentChild(forwardRef(() => DocSectionCodeHtmlTagDirective), /* @ts-ignore */
|
|
2241
|
+
...(ngDevMode ? [{ debugName: "sectionCodeHTML" }] : /* istanbul ignore next */ []));
|
|
2242
|
+
this.sectionCodeTS = contentChild(forwardRef(() => DocSectionCodeTsTagDirective), /* @ts-ignore */
|
|
2243
|
+
...(ngDevMode ? [{ debugName: "sectionCodeTS" }] : /* istanbul ignore next */ []));
|
|
2244
|
+
this.sectionCodeSERVICE = contentChild(forwardRef(() => DocSectionCodeServiceTagDirective), /* @ts-ignore */
|
|
2245
|
+
...(ngDevMode ? [{ debugName: "sectionCodeSERVICE" }] : /* istanbul ignore next */ []));
|
|
2246
|
+
this.sectionCodeCSS = contentChild(forwardRef(() => DocSectionCodeCssTagDirective), /* @ts-ignore */
|
|
2247
|
+
...(ngDevMode ? [{ debugName: "sectionCodeCSS" }] : /* istanbul ignore next */ []));
|
|
2248
|
+
this.sectionCodeDOC = contentChild(forwardRef(() => DocSectionCodeDocTagDirective), /* @ts-ignore */
|
|
2249
|
+
...(ngDevMode ? [{ debugName: "sectionCodeDOC" }] : /* istanbul ignore next */ []));
|
|
2401
2250
|
}
|
|
2402
2251
|
toggleCode() {
|
|
2403
|
-
this.isCodeExpanded
|
|
2252
|
+
this.isCodeExpanded.update(v => !v);
|
|
2404
2253
|
}
|
|
2405
2254
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2406
2255
|
isDefined(object) {
|
|
2407
2256
|
return object;
|
|
2408
2257
|
}
|
|
2409
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2410
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2258
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2259
|
+
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: i4.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
2260
|
}
|
|
2412
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2261
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeComponent, decorators: [{
|
|
2413
2262
|
type: Component,
|
|
2414
2263
|
args: [{ selector: 'eui-showcase-doc-section-code', imports: [
|
|
2415
|
-
CommonModule,
|
|
2416
2264
|
...EUI_LABEL,
|
|
2417
2265
|
...EUI_TABS,
|
|
2418
2266
|
...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
|
-
}] } });
|
|
2267
|
+
], 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"] }]
|
|
2268
|
+
}], 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
2269
|
/* eslint-disable @angular-eslint/directive-selector */
|
|
2452
2270
|
class DocSectionCodeDescriptionTagDirective {
|
|
2453
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2454
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2271
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2272
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocSectionCodeDescriptionTagDirective, isStandalone: true, selector: "sectionDescription", ngImport: i0 }); }
|
|
2455
2273
|
}
|
|
2456
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2274
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, decorators: [{
|
|
2457
2275
|
type: Directive,
|
|
2458
2276
|
args: [{ selector: 'sectionDescription' }]
|
|
2459
2277
|
}] });
|
|
2460
2278
|
class DocSectionCodeHtmlTagDirective {
|
|
2461
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2462
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2279
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeHtmlTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2280
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocSectionCodeHtmlTagDirective, isStandalone: true, selector: "sectionCodeHTML", ngImport: i0 }); }
|
|
2463
2281
|
}
|
|
2464
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2282
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeHtmlTagDirective, decorators: [{
|
|
2465
2283
|
type: Directive,
|
|
2466
2284
|
args: [{ selector: 'sectionCodeHTML' }]
|
|
2467
2285
|
}] });
|
|
2468
2286
|
class DocSectionCodeTsTagDirective {
|
|
2469
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2470
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2287
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeTsTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2288
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocSectionCodeTsTagDirective, isStandalone: true, selector: "sectionCodeTS", ngImport: i0 }); }
|
|
2471
2289
|
}
|
|
2472
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2290
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeTsTagDirective, decorators: [{
|
|
2473
2291
|
type: Directive,
|
|
2474
2292
|
args: [{ selector: 'sectionCodeTS' }]
|
|
2475
2293
|
}] });
|
|
2476
2294
|
class DocSectionCodeServiceTagDirective {
|
|
2477
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2478
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2295
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeServiceTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2296
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocSectionCodeServiceTagDirective, isStandalone: true, selector: "sectionCodeSERVICE", ngImport: i0 }); }
|
|
2479
2297
|
}
|
|
2480
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2298
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeServiceTagDirective, decorators: [{
|
|
2481
2299
|
type: Directive,
|
|
2482
2300
|
args: [{ selector: 'sectionCodeSERVICE' }]
|
|
2483
2301
|
}] });
|
|
2484
2302
|
class DocSectionCodeCssTagDirective {
|
|
2485
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2486
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2303
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeCssTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2304
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocSectionCodeCssTagDirective, isStandalone: true, selector: "sectionCodeCSS", ngImport: i0 }); }
|
|
2487
2305
|
}
|
|
2488
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2306
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeCssTagDirective, decorators: [{
|
|
2489
2307
|
type: Directive,
|
|
2490
2308
|
args: [{ selector: 'sectionCodeCSS' }]
|
|
2491
2309
|
}] });
|
|
2492
2310
|
class DocSectionCodeDocTagDirective {
|
|
2493
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2494
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2311
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeDocTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2312
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocSectionCodeDocTagDirective, isStandalone: true, selector: "sectionCodeDOC", ngImport: i0 }); }
|
|
2495
2313
|
}
|
|
2496
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2314
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeDocTagDirective, decorators: [{
|
|
2497
2315
|
type: Directive,
|
|
2498
2316
|
args: [{ selector: 'sectionCodeDOC' }]
|
|
2499
2317
|
}] });
|
|
2500
2318
|
|
|
2501
2319
|
class LoremIpsumSampleComponent {
|
|
2502
2320
|
constructor() {
|
|
2503
|
-
this.textSize = 'large'
|
|
2321
|
+
this.textSize = input('large', /* @ts-ignore */
|
|
2322
|
+
...(ngDevMode ? [{ debugName: "textSize" }] : /* istanbul ignore next */ []));
|
|
2504
2323
|
}
|
|
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"] }] }); }
|
|
2324
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LoremIpsumSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2325
|
+
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
2326
|
}
|
|
2508
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2327
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LoremIpsumSampleComponent, decorators: [{
|
|
2509
2328
|
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
|
-
}] } });
|
|
2329
|
+
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" }]
|
|
2330
|
+
}], propDecorators: { textSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "textSize", required: false }] }] } });
|
|
2516
2331
|
|
|
2517
2332
|
class PlaygroundComponent {
|
|
2518
2333
|
constructor() {
|
|
2519
|
-
this.title = 'eUI Playground'
|
|
2520
|
-
|
|
2334
|
+
this.title = input('eUI Playground', /* @ts-ignore */
|
|
2335
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
2336
|
+
this.htmlContent = input(undefined, /* @ts-ignore */
|
|
2337
|
+
...(ngDevMode ? [{ debugName: "htmlContent" }] : /* istanbul ignore next */ []));
|
|
2338
|
+
this.sampleId = input(undefined, /* @ts-ignore */
|
|
2339
|
+
...(ngDevMode ? [{ debugName: "sampleId" }] : /* istanbul ignore next */ []));
|
|
2340
|
+
this.typescriptContent = input(undefined, /* @ts-ignore */
|
|
2341
|
+
...(ngDevMode ? [{ debugName: "typescriptContent" }] : /* istanbul ignore next */ []));
|
|
2342
|
+
this.activated = input(false, /* @ts-ignore */
|
|
2343
|
+
...(ngDevMode ? [{ debugName: "activated" }] : /* istanbul ignore next */ []));
|
|
2344
|
+
this.modules = input(undefined, /* @ts-ignore */
|
|
2345
|
+
...(ngDevMode ? [{ debugName: "modules" }] : /* istanbul ignore next */ []));
|
|
2521
2346
|
this.isLoaded = false;
|
|
2347
|
+
this.stackblitzElWrapper = viewChild('container', { ...(ngDevMode ? { debugName: "stackblitzElWrapper" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
2522
2348
|
this.sb = inject(StackblitzService);
|
|
2523
|
-
|
|
2524
|
-
|
|
2525
|
-
if (changes.activated) {
|
|
2526
|
-
if (changes.activated.currentValue) {
|
|
2349
|
+
effect(() => {
|
|
2350
|
+
if (this.activated()) {
|
|
2527
2351
|
this.initStackblitz();
|
|
2528
2352
|
}
|
|
2529
2353
|
else {
|
|
2530
2354
|
this.isLoaded = false;
|
|
2531
2355
|
}
|
|
2532
|
-
}
|
|
2356
|
+
});
|
|
2533
2357
|
}
|
|
2534
2358
|
initStackblitz() {
|
|
2535
2359
|
this.sb.getStackblitzDependencies()
|
|
2536
2360
|
.then((deps) => {
|
|
2537
2361
|
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);
|
|
2362
|
+
const { selector } = this.sb.extractComponentMetadata(this.typescriptContent());
|
|
2363
|
+
const moduleName = this.sb.extractModuleName(this.typescriptContent());
|
|
2364
|
+
const componentName = this.sb.extractComponentName(this.typescriptContent());
|
|
2541
2365
|
const project = {
|
|
2542
|
-
title: this.title,
|
|
2543
|
-
description: `An eUI example for the ${this.title}.`,
|
|
2366
|
+
title: this.title(),
|
|
2367
|
+
description: `An eUI example for the ${this.title()}.`,
|
|
2544
2368
|
template: 'angular-cli',
|
|
2545
2369
|
files: {
|
|
2546
|
-
'src/component.html': this.htmlContent,
|
|
2547
|
-
'src/component.ts': moduleName ? this.sb.appendVitalNgModules(this.typescriptContent) : this.typescriptContent,
|
|
2370
|
+
'src/component.html': this.htmlContent(),
|
|
2371
|
+
'src/component.ts': moduleName ? this.sb.appendVitalNgModules(this.typescriptContent()) : this.typescriptContent(),
|
|
2548
2372
|
'src/main.ts': mainFile(moduleName, componentName),
|
|
2549
2373
|
'src/polyfills.ts': polyfillsFile,
|
|
2550
2374
|
'src/index.html': indexHtmlFile(selector),
|
|
@@ -2564,7 +2388,7 @@ class PlaygroundComponent {
|
|
|
2564
2388
|
},
|
|
2565
2389
|
dependencies,
|
|
2566
2390
|
};
|
|
2567
|
-
return sdk.embedProject(`stackblitz-${this.sampleId}`, project, {
|
|
2391
|
+
return sdk.embedProject(`stackblitz-${this.sampleId()}`, project, {
|
|
2568
2392
|
height: 500,
|
|
2569
2393
|
openFile: ['src/component.ts', 'src/component.html'],
|
|
2570
2394
|
});
|
|
@@ -2574,30 +2398,15 @@ class PlaygroundComponent {
|
|
|
2574
2398
|
this.isLoaded = true;
|
|
2575
2399
|
});
|
|
2576
2400
|
}
|
|
2577
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2578
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2401
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PlaygroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2402
|
+
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
2403
|
}
|
|
2580
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2404
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PlaygroundComponent, decorators: [{
|
|
2581
2405
|
type: Component,
|
|
2582
2406
|
args: [{ selector: 'eui-playground', imports: [
|
|
2583
2407
|
...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
|
-
}] } });
|
|
2408
|
+
], template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n <iframe #container id=\"stackblitz-{{sampleId()}}\"></iframe>\n</eui-block-content>\n" }]
|
|
2409
|
+
}], 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
2410
|
|
|
2602
2411
|
const EUI_SHOWCASE = [
|
|
2603
2412
|
DocPageAccessibilityContentDirective,
|