@eui/showcase 21.0.0-alpha.15 → 21.0.0-alpha.16
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 +743 -744
- package/fesm2022/eui-showcase.mjs.map +1 -1
- package/index.d.ts +250 -179
- package/index.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -1,41 +1,216 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { signal, Injectable, Input, Component, inject, HostBinding, ViewEncapsulation, ChangeDetectorRef, booleanAttribute, ViewChild, forwardRef, ContentChildren, Directive, HostListener, ContentChild, ElementRef } from '@angular/core';
|
|
3
|
+
import * as i2 from '@eui/components/eui-icon';
|
|
4
|
+
import { EUI_ICON } from '@eui/components/eui-icon';
|
|
5
|
+
import { HttpClient } from '@angular/common/http';
|
|
6
|
+
import { Router, ActivatedRoute } from '@angular/router';
|
|
7
|
+
import { take, map, catchError } from 'rxjs/operators';
|
|
8
|
+
import * as i2$1 from 'ngx-markdown';
|
|
9
|
+
import { MarkdownService, MarkdownModule } from 'ngx-markdown';
|
|
10
|
+
import * as i4 from '@eui/components/eui-page';
|
|
11
|
+
import { EUI_PAGE } from '@eui/components/eui-page';
|
|
3
12
|
import * as i1 from '@angular/common';
|
|
4
|
-
import {
|
|
5
|
-
import * as i2 from '@eui/components/eui-card';
|
|
6
|
-
import { EuiCardModule } from '@eui/components/eui-card';
|
|
7
|
-
import * as i3 from '@eui/components/eui-button';
|
|
8
|
-
import { EuiButtonModule } from '@eui/components/eui-button';
|
|
9
|
-
import * as i4 from '@eui/components/eui-tabs';
|
|
10
|
-
import { EUI_TABS } from '@eui/components/eui-tabs';
|
|
11
|
-
import * as i3$1 from '@eui/components/eui-page';
|
|
12
|
-
import { EuiPageModule } from '@eui/components/eui-page';
|
|
13
|
-
import * as i4$1 from '@eui/components/eui-chip';
|
|
14
|
-
import { EuiChipModule } from '@eui/components/eui-chip';
|
|
15
|
-
import * as i2$1 from '@eui/components/eui-dialog';
|
|
16
|
-
import { EuiDialogModule } from '@eui/components/eui-dialog';
|
|
17
|
-
import * as i5$1 from '@eui/components/eui-alert';
|
|
18
|
-
import { EuiAlertModule } from '@eui/components/eui-alert';
|
|
19
|
-
import * as i1$1 from '@eui/components/eui-block-content';
|
|
20
|
-
import { EuiBlockContentModule } from '@eui/components/eui-block-content';
|
|
21
|
-
import * as i6$1 from '@eui/components/eui-badge';
|
|
22
|
-
import { EuiBadgeModule } from '@eui/components/eui-badge';
|
|
23
|
-
import * as i5 from '@eui/components/eui-icon';
|
|
24
|
-
import { EuiIconModule } from '@eui/components/eui-icon';
|
|
25
|
-
import * as i6 from '@eui/components/eui-label';
|
|
26
|
-
import { EuiLabelModule } from '@eui/components/eui-label';
|
|
27
|
-
import * as i7 from '@eui/components/eui-avatar';
|
|
28
|
-
import { EuiAvatarModule } from '@eui/components/eui-avatar';
|
|
13
|
+
import { NgClass, CommonModule, Location } from '@angular/common';
|
|
29
14
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
30
|
-
import { Router, ActivatedRoute } from '@angular/router';
|
|
31
|
-
import { HttpClient } from '@angular/common/http';
|
|
32
15
|
import { Clipboard } from '@angular/cdk/clipboard';
|
|
33
16
|
import { lastValueFrom, forkJoin, Observable } from 'rxjs';
|
|
34
|
-
import { map, catchError, take } from 'rxjs/operators';
|
|
35
17
|
import { EuiAppShellService, EuiGrowlService } from '@eui/core';
|
|
18
|
+
import * as i3 from '@eui/components/eui-tabs';
|
|
19
|
+
import { EUI_TABS } from '@eui/components/eui-tabs';
|
|
36
20
|
import sdk from '@stackblitz/sdk';
|
|
37
|
-
import * as i3$
|
|
38
|
-
import {
|
|
21
|
+
import * as i3$1 from '@eui/components/eui-label';
|
|
22
|
+
import { EUI_LABEL } from '@eui/components/eui-label';
|
|
23
|
+
import * as i4$1 from '@eui/components/eui-card';
|
|
24
|
+
import { EUI_CARD } from '@eui/components/eui-card';
|
|
25
|
+
import * as i6 from '@eui/components/eui-button';
|
|
26
|
+
import { EUI_BUTTON } from '@eui/components/eui-button';
|
|
27
|
+
import * as i2$2 from '@eui/components/eui-alert';
|
|
28
|
+
import { EUI_ALERT } from '@eui/components/eui-alert';
|
|
29
|
+
import * as i5 from '@eui/components/eui-chip';
|
|
30
|
+
import { EUI_CHIP } from '@eui/components/eui-chip';
|
|
31
|
+
import * as i1$1 from '@eui/components/eui-block-content';
|
|
32
|
+
import { EUI_BLOCK_CONTENT } from '@eui/components/eui-block-content';
|
|
33
|
+
import * as i3$2 from '@eui/components/eui-dialog';
|
|
34
|
+
import { EUI_DIALOG } from '@eui/components/eui-dialog';
|
|
35
|
+
import * as i6$1 from '@eui/components/eui-badge';
|
|
36
|
+
import { EUI_BADGE } from '@eui/components/eui-badge';
|
|
37
|
+
import * as i6$2 from '@eui/components/eui-avatar';
|
|
38
|
+
import { EUI_AVATAR } from '@eui/components/eui-avatar';
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* A service to update and configure the Showcase module state.
|
|
42
|
+
*/
|
|
43
|
+
class ConfigurationService {
|
|
44
|
+
constructor() {
|
|
45
|
+
/**
|
|
46
|
+
* A single signal to hold the configuration service state. The state is
|
|
47
|
+
* extensible to user's preferences through generics.
|
|
48
|
+
*
|
|
49
|
+
* Default value for renderPlayground will be true.
|
|
50
|
+
*/
|
|
51
|
+
this.state = signal({ renderPlayground: true }, ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Update the state of configuration. Deep merge is not available thus if
|
|
55
|
+
* a deep update needs to happen make sure you carry other parts of the state
|
|
56
|
+
* too.
|
|
57
|
+
* e.g.
|
|
58
|
+
* Given state { rootA, rootB, rootC: { subC_A: {a: 1}, subC_B: {b: 1} } }
|
|
59
|
+
* the update({ rootC: { subC_A: {a: 1, extra: null }}})
|
|
60
|
+
* will result in
|
|
61
|
+
* { rootA, rootB, rootC: { subC_A: {a: 1, extra: null } } }
|
|
62
|
+
*
|
|
63
|
+
* @param partialState
|
|
64
|
+
*/
|
|
65
|
+
update(partialState) {
|
|
66
|
+
this.state.set({ ...this.state(), ...partialState });
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* returns the configuration state as a readonly signal
|
|
70
|
+
*/
|
|
71
|
+
get configuration() {
|
|
72
|
+
return this.state.asReadonly();
|
|
73
|
+
}
|
|
74
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: ConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
75
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: ConfigurationService, providedIn: 'root' }); }
|
|
76
|
+
}
|
|
77
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: ConfigurationService, decorators: [{
|
|
78
|
+
type: Injectable,
|
|
79
|
+
args: [{
|
|
80
|
+
providedIn: 'root',
|
|
81
|
+
}]
|
|
82
|
+
}] });
|
|
83
|
+
|
|
84
|
+
class DocPageCodeComponent {
|
|
85
|
+
constructor() {
|
|
86
|
+
this.codeFolder = '';
|
|
87
|
+
this.showcase = 'ux';
|
|
88
|
+
}
|
|
89
|
+
onOpenCode() {
|
|
90
|
+
// eslint-disable-next-line max-len
|
|
91
|
+
const sourceRootPath = `https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-${this.showcase}/-/blob/master/src/app/`;
|
|
92
|
+
window.open(sourceRootPath + this.codeFolder, '_blank');
|
|
93
|
+
}
|
|
94
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
95
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocPageCodeComponent, isStandalone: true, selector: "eui-showcase-doc-page-code", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, ngImport: i0, template: "<button type=\"button\" euiButton euiAccent (click)=\"onOpenCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n</button>\n", dependencies: [{ kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }] }); }
|
|
96
|
+
}
|
|
97
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageCodeComponent, decorators: [{
|
|
98
|
+
type: Component,
|
|
99
|
+
args: [{ selector: 'eui-showcase-doc-page-code', imports: [
|
|
100
|
+
...EUI_ICON,
|
|
101
|
+
], template: "<button type=\"button\" euiButton euiAccent (click)=\"onOpenCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n</button>\n" }]
|
|
102
|
+
}], propDecorators: { codeFolder: [{
|
|
103
|
+
type: Input
|
|
104
|
+
}], showcase: [{
|
|
105
|
+
type: Input
|
|
106
|
+
}] } });
|
|
107
|
+
|
|
108
|
+
class DocPageDevGuideComponent {
|
|
109
|
+
constructor() {
|
|
110
|
+
this.cssClass = 'eui-doc-page';
|
|
111
|
+
this.rootDocsFolder = 'docs';
|
|
112
|
+
this.showcaseName = 'showcase-dev-guide';
|
|
113
|
+
this.headers = [];
|
|
114
|
+
this.markdownService = inject(MarkdownService);
|
|
115
|
+
this.http = inject(HttpClient);
|
|
116
|
+
this.router = inject(Router);
|
|
117
|
+
this.route = inject(ActivatedRoute);
|
|
118
|
+
}
|
|
119
|
+
ngOnInit() {
|
|
120
|
+
this.subscription = this.route.url.subscribe((u) => {
|
|
121
|
+
this._loadMdContent(`/${this.rootDocsFolder}/` + u.join('/'));
|
|
122
|
+
});
|
|
123
|
+
/**
|
|
124
|
+
* callback for heading renderer. It will be called for each heading in the markdown.
|
|
125
|
+
*
|
|
126
|
+
* @param text the encoded heading text
|
|
127
|
+
* @param level the heading level
|
|
128
|
+
* @param raw the raw heading text (decoded)
|
|
129
|
+
*/
|
|
130
|
+
// TODO v21
|
|
131
|
+
// this.markdownService.renderer.heading = ({ raw, text, depth }: Tokens.Heading): string => {
|
|
132
|
+
// if (depth === 2 || depth === 3) {
|
|
133
|
+
// const newHeader = `<h${depth} id="${raw}">${text}</h${depth}>`;
|
|
134
|
+
// if (text.indexOf('<a ') === -1 && text.indexOf('<em>') === -1) {
|
|
135
|
+
// this.headers.push({ id: raw, label: raw, level: depth });
|
|
136
|
+
// }
|
|
137
|
+
// return newHeader;
|
|
138
|
+
// }
|
|
139
|
+
// return `<h${depth}>${text}</h${depth}>`;
|
|
140
|
+
// };
|
|
141
|
+
}
|
|
142
|
+
ngAfterViewInit() {
|
|
143
|
+
this.route.fragment.pipe(take(1)).subscribe((fragment) => {
|
|
144
|
+
if (fragment) {
|
|
145
|
+
setTimeout(() => {
|
|
146
|
+
this.fragmentId = fragment;
|
|
147
|
+
const fgm = document.getElementById(fragment);
|
|
148
|
+
fgm.scrollIntoView();
|
|
149
|
+
}, 1);
|
|
150
|
+
}
|
|
151
|
+
});
|
|
152
|
+
}
|
|
153
|
+
ngOnDestroy() {
|
|
154
|
+
if (this.subscription) {
|
|
155
|
+
this.subscription.unsubscribe();
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
onNavClick(fragmentId) {
|
|
159
|
+
this._scrollToFragment(fragmentId);
|
|
160
|
+
}
|
|
161
|
+
_loadMdContent(url) {
|
|
162
|
+
let mdPath, contextRoot;
|
|
163
|
+
const currentUrl = window.location;
|
|
164
|
+
const pathNameArray = currentUrl.pathname.split('/');
|
|
165
|
+
this.headers = [];
|
|
166
|
+
if (url) {
|
|
167
|
+
mdPath = url.substr(1);
|
|
168
|
+
}
|
|
169
|
+
else {
|
|
170
|
+
mdPath = pathNameArray.slice(pathNameArray.length - 3).join('/');
|
|
171
|
+
}
|
|
172
|
+
contextRoot = `${currentUrl.protocol}//${currentUrl.host}`;
|
|
173
|
+
if (pathNameArray[1] !== this.showcaseName) {
|
|
174
|
+
contextRoot += `/${pathNameArray[1]}`;
|
|
175
|
+
}
|
|
176
|
+
const filePath = `${contextRoot}/assets/${mdPath}.md`;
|
|
177
|
+
this.http.get(filePath, { responseType: 'text' }).pipe(map((md) => md.replace(new RegExp(`assets/${this.rootDocsFolder}`, 'g'), `${contextRoot}/assets/${this.rootDocsFolder}`))).subscribe((md) => {
|
|
178
|
+
this.markdown = md;
|
|
179
|
+
const top = document.getElementById('top');
|
|
180
|
+
top.scrollIntoView();
|
|
181
|
+
});
|
|
182
|
+
}
|
|
183
|
+
_scrollToFragment(fragmentId) {
|
|
184
|
+
// forcing reload when deep link with fragment
|
|
185
|
+
this.router.onSameUrlNavigation = 'reload';
|
|
186
|
+
this.router.navigate(['.'], { relativeTo: this.route, fragment: fragmentId });
|
|
187
|
+
if (fragmentId) {
|
|
188
|
+
setTimeout(() => {
|
|
189
|
+
const fgm = document.getElementById(fragmentId);
|
|
190
|
+
if (fgm) {
|
|
191
|
+
fgm.scrollIntoView();
|
|
192
|
+
}
|
|
193
|
+
});
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageDevGuideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
197
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: DocPageDevGuideComponent, isStandalone: true, selector: "eui-showcase-doc-page-dev-guide", inputs: { rootDocsFolder: "rootDocsFolder", showcaseName: "showcaseName" }, host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <span id=\"top\"></span>\n <markdown class=\"doc-content\" [data]=\"markdown\"></markdown>\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column class=\"eui-u-hidden-mobile\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @for (header of headers; track header.id) {\n <li class=\"doc-page-navigation-item\" (click)=\"onNavClick(header.id)\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === header.id\">\n <span [ngClass]=\"header.level === 3 ? 'eui-u-ml-m eui-u-f-regular': ''\">\n {{header.label}}\n </span>\n </li>\n }\n </ul>\n </div>\n </eui-page-column-body>\n\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title .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-lighter)}.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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i4.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i4.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i4.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i4.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "ngmodule", type: MarkdownModule }, { kind: "component", type: i2$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 }); }
|
|
198
|
+
}
|
|
199
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageDevGuideComponent, decorators: [{
|
|
200
|
+
type: Component,
|
|
201
|
+
args: [{ selector: 'eui-showcase-doc-page-dev-guide', encapsulation: ViewEncapsulation.None, imports: [
|
|
202
|
+
NgClass,
|
|
203
|
+
...EUI_PAGE,
|
|
204
|
+
MarkdownModule, // .forRoot({ sanitize: SecurityContext.NONE }),
|
|
205
|
+
], template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <span id=\"top\"></span>\n <markdown class=\"doc-content\" [data]=\"markdown\"></markdown>\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column class=\"eui-u-hidden-mobile\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @for (header of headers; track header.id) {\n <li class=\"doc-page-navigation-item\" (click)=\"onNavClick(header.id)\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === header.id\">\n <span [ngClass]=\"header.level === 3 ? 'eui-u-ml-m eui-u-f-regular': ''\">\n {{header.label}}\n </span>\n </li>\n }\n </ul>\n </div>\n </eui-page-column-body>\n\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title .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-lighter)}.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"] }]
|
|
206
|
+
}], propDecorators: { cssClass: [{
|
|
207
|
+
type: HostBinding,
|
|
208
|
+
args: ['class']
|
|
209
|
+
}], rootDocsFolder: [{
|
|
210
|
+
type: Input
|
|
211
|
+
}], showcaseName: [{
|
|
212
|
+
type: Input
|
|
213
|
+
}] } });
|
|
39
214
|
|
|
40
215
|
const polyfillsFile = 'import \'zone.js\';';
|
|
41
216
|
const mainFile = (moduleName, componentName) => `
|
|
@@ -491,77 +666,16 @@ class StackblitzService {
|
|
|
491
666
|
getCurrentShowcaseEuiVersion() {
|
|
492
667
|
return lastValueFrom(this.http.get('assets/app-metadata.json', { responseType: 'json' })).then((res) => res?.appVersion || 'latest');
|
|
493
668
|
}
|
|
494
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
495
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
496
|
-
}
|
|
497
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: StackblitzService, decorators: [{
|
|
498
|
-
type: Injectable
|
|
499
|
-
}] });
|
|
500
|
-
|
|
501
|
-
/**
|
|
502
|
-
* A service to update and configure the Showcase module state.
|
|
503
|
-
*/
|
|
504
|
-
class ConfigurationService {
|
|
505
|
-
constructor() {
|
|
506
|
-
/**
|
|
507
|
-
* A single signal to hold the configuration service state. The state is
|
|
508
|
-
* extensible to user's preferences through generics.
|
|
509
|
-
*
|
|
510
|
-
* Default value for renderPlayground will be true.
|
|
511
|
-
*/
|
|
512
|
-
this.state = signal({ renderPlayground: true }, ...(ngDevMode ? [{ debugName: "state" }] : []));
|
|
513
|
-
}
|
|
514
|
-
/**
|
|
515
|
-
* Update the state of configuration. Deep merge is not available thus if
|
|
516
|
-
* a deep update needs to happen make sure you carry other parts of the state
|
|
517
|
-
* too.
|
|
518
|
-
* e.g.
|
|
519
|
-
* Given state { rootA, rootB, rootC: { subC_A: {a: 1}, subC_B: {b: 1} } }
|
|
520
|
-
* the update({ rootC: { subC_A: {a: 1, extra: null }}})
|
|
521
|
-
* will result in
|
|
522
|
-
* { rootA, rootB, rootC: { subC_A: {a: 1, extra: null } } }
|
|
523
|
-
*
|
|
524
|
-
* @param partialState
|
|
525
|
-
*/
|
|
526
|
-
update(partialState) {
|
|
527
|
-
this.state.set({ ...this.state(), ...partialState });
|
|
528
|
-
}
|
|
529
|
-
/**
|
|
530
|
-
* returns the configuration state as a readonly signal
|
|
531
|
-
*/
|
|
532
|
-
get configuration() {
|
|
533
|
-
return this.state.asReadonly();
|
|
534
|
-
}
|
|
535
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: ConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
536
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: ConfigurationService, providedIn: 'root' }); }
|
|
669
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: StackblitzService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
670
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: StackblitzService, providedIn: 'root' }); }
|
|
537
671
|
}
|
|
538
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
672
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: StackblitzService, decorators: [{
|
|
539
673
|
type: Injectable,
|
|
540
674
|
args: [{
|
|
541
675
|
providedIn: 'root',
|
|
542
676
|
}]
|
|
543
677
|
}] });
|
|
544
678
|
|
|
545
|
-
class EuiCodeHighlighterDirective {
|
|
546
|
-
constructor() {
|
|
547
|
-
this.el = inject(ElementRef);
|
|
548
|
-
}
|
|
549
|
-
ngAfterViewInit() {
|
|
550
|
-
if (window['Prism']) {
|
|
551
|
-
window['Prism'].highlightElement(this.el.nativeElement);
|
|
552
|
-
}
|
|
553
|
-
}
|
|
554
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EuiCodeHighlighterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
555
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: EuiCodeHighlighterDirective, isStandalone: false, selector: "[euiCode]", ngImport: i0 }); }
|
|
556
|
-
}
|
|
557
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EuiCodeHighlighterDirective, decorators: [{
|
|
558
|
-
type: Directive,
|
|
559
|
-
args: [{
|
|
560
|
-
selector: '[euiCode]',
|
|
561
|
-
standalone: false,
|
|
562
|
-
}]
|
|
563
|
-
}] });
|
|
564
|
-
|
|
565
679
|
class DocSampleComponent {
|
|
566
680
|
constructor() {
|
|
567
681
|
this.id = '';
|
|
@@ -731,12 +845,19 @@ class DocSampleComponent {
|
|
|
731
845
|
});
|
|
732
846
|
}));
|
|
733
847
|
}
|
|
734
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
735
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.0-next.
|
|
848
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
849
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.0-next.3", type: DocSampleComponent, isStandalone: true, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", category: "category", description: "description", defaultValue: "defaultValue", styleClass: "styleClass", renderPlayground: ["renderPlayground", "renderPlayground", booleanAttribute], isCodeButtonVisible: ["isCodeButtonVisible", "isCodeButtonVisible", booleanAttribute], isInnerSection: ["isInnerSection", "isInnerSection", booleanAttribute] }, host: { properties: { "class": "this.classes" } }, ngImport: i0, 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 (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 <div *ngIf=\"shouldRenderPlayground()\" class=\"doc-sample-title__items eui-u-mr-s\">\n <button\n *ngIf=\"isCodeButtonVisible\"\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeS\n (click)=\"onStackblitzOpen()\">\n <span euiLabel>Stackblitz</span>\n <eui-icon-svg icon=\"eui-flash-o\" />\n </button>\n </div>\n <div class=\"doc-sample-title__items\">\n <button\n *ngIf=\"isCodeButtonVisible\"\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeS\n (click)=\"onToggleCode()\"\n [euiDisabled]=\"isCodeLoading\">\n <eui-icon-svg *ngIf=\"isCodeLoading\" isLoading></eui-icon-svg>\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <eui-icon-svg icon=\"eui-code\" />\n </button>\n </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n <eui-card euiNoContentPadding class=\"eui-u-mb-m\">\n <eui-card-content>\n <eui-tabs (tabActivate)=\"onTabActivate($event)\">\n <eui-tab [isVisible]=\"htmlContent\">\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>{{htmlContent}}</code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"tsContent\">\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>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n </eui-tab-body>\n </eui-tab>\n </eui-tabs>\n </eui-card-content>\n </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-3xl);margin-top:var(--eui-s-8xl);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%;letter-spacing:-.75px;font:var(--eui-f-xl-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;letter-spacing:-.5px;margin:var(--eui-s-5xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-primary);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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation"], 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: i3$1.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: i4$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i4$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
736
850
|
}
|
|
737
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
851
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocSampleComponent, decorators: [{
|
|
738
852
|
type: Component,
|
|
739
|
-
args: [{ selector: 'eui-showcase-doc-sample', encapsulation: ViewEncapsulation.None,
|
|
853
|
+
args: [{ selector: 'eui-showcase-doc-sample', encapsulation: ViewEncapsulation.None, imports: [
|
|
854
|
+
CommonModule,
|
|
855
|
+
...EUI_TABS,
|
|
856
|
+
...EUI_LABEL,
|
|
857
|
+
...EUI_CARD,
|
|
858
|
+
...EUI_ICON,
|
|
859
|
+
...EUI_BUTTON,
|
|
860
|
+
], 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 (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 <div *ngIf=\"shouldRenderPlayground()\" class=\"doc-sample-title__items eui-u-mr-s\">\n <button\n *ngIf=\"isCodeButtonVisible\"\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeS\n (click)=\"onStackblitzOpen()\">\n <span euiLabel>Stackblitz</span>\n <eui-icon-svg icon=\"eui-flash-o\" />\n </button>\n </div>\n <div class=\"doc-sample-title__items\">\n <button\n *ngIf=\"isCodeButtonVisible\"\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeS\n (click)=\"onToggleCode()\"\n [euiDisabled]=\"isCodeLoading\">\n <eui-icon-svg *ngIf=\"isCodeLoading\" isLoading></eui-icon-svg>\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <eui-icon-svg icon=\"eui-code\" />\n </button>\n </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n <eui-card euiNoContentPadding class=\"eui-u-mb-m\">\n <eui-card-content>\n <eui-tabs (tabActivate)=\"onTabActivate($event)\">\n <eui-tab [isVisible]=\"htmlContent\">\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>{{htmlContent}}</code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"tsContent\">\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>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n </eui-tab-body>\n </eui-tab>\n </eui-tabs>\n </eui-card-content>\n </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-3xl);margin-top:var(--eui-s-8xl);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%;letter-spacing:-.75px;font:var(--eui-f-xl-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;letter-spacing:-.5px;margin:var(--eui-s-5xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-primary);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"] }]
|
|
740
861
|
}], propDecorators: { id: [{
|
|
741
862
|
type: Input
|
|
742
863
|
}], label: [{
|
|
@@ -775,12 +896,12 @@ class DocSectionComponent {
|
|
|
775
896
|
this.label = this.id;
|
|
776
897
|
}
|
|
777
898
|
}
|
|
778
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
779
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.
|
|
899
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
900
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", 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-6xl);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 }); }
|
|
780
901
|
}
|
|
781
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
902
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocSectionComponent, decorators: [{
|
|
782
903
|
type: Component,
|
|
783
|
-
args: [{ selector: 'eui-showcase-doc-section', encapsulation: ViewEncapsulation.None,
|
|
904
|
+
args: [{ selector: 'eui-showcase-doc-section', encapsulation: ViewEncapsulation.None, 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-6xl);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"] }]
|
|
784
905
|
}], propDecorators: { string: [{
|
|
785
906
|
type: HostBinding,
|
|
786
907
|
args: ['class']
|
|
@@ -792,28 +913,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1",
|
|
|
792
913
|
type: Input
|
|
793
914
|
}] } });
|
|
794
915
|
|
|
795
|
-
class DocPageCodeComponent {
|
|
796
|
-
constructor() {
|
|
797
|
-
this.codeFolder = '';
|
|
798
|
-
this.showcase = 'ux';
|
|
799
|
-
}
|
|
800
|
-
onOpenCode() {
|
|
801
|
-
// eslint-disable-next-line max-len
|
|
802
|
-
const sourceRootPath = `https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-${this.showcase}/-/blob/master/src/app/`;
|
|
803
|
-
window.open(sourceRootPath + this.codeFolder, '_blank');
|
|
804
|
-
}
|
|
805
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocPageCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
806
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.1", type: DocPageCodeComponent, isStandalone: false, selector: "eui-showcase-doc-page-code", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, ngImport: i0, template: "<button type=\"button\" euiButton euiAccent (click)=\"onOpenCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n</button>\n", dependencies: [{ kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i6.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"] }] }); }
|
|
807
|
-
}
|
|
808
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocPageCodeComponent, decorators: [{
|
|
809
|
-
type: Component,
|
|
810
|
-
args: [{ selector: 'eui-showcase-doc-page-code', standalone: false, template: "<button type=\"button\" euiButton euiAccent (click)=\"onOpenCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n</button>\n" }]
|
|
811
|
-
}], propDecorators: { codeFolder: [{
|
|
812
|
-
type: Input
|
|
813
|
-
}], showcase: [{
|
|
814
|
-
type: Input
|
|
815
|
-
}] } });
|
|
816
|
-
|
|
817
916
|
class DocPageComponent {
|
|
818
917
|
constructor() {
|
|
819
918
|
this.cssClass = 'eui-doc-page';
|
|
@@ -1126,12 +1225,21 @@ class DocPageComponent {
|
|
|
1126
1225
|
}
|
|
1127
1226
|
return result;
|
|
1128
1227
|
}
|
|
1129
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1130
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.1", type: DocPageComponent, isStandalone: false, 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 .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-lighter)}.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: "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: i4.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i4.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i4.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i4.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab"] }, { kind: "component", type: i3$1.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i3$1.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i3$1.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i3$1.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3$1.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i3$1.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i3$1.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i4$1.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i5$1.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i5$1.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i6.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1228
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1229
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", 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 .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-lighter)}.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$2.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i2$2.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i3.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation"], 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", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile"], 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: i3$1.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", "isSquared", "isFilled"], outputs: ["remove"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1131
1230
|
}
|
|
1132
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1231
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageComponent, decorators: [{
|
|
1133
1232
|
type: Component,
|
|
1134
|
-
args: [{ selector: 'eui-showcase-doc-page', encapsulation: ViewEncapsulation.None, standalone: false, 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 .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-lighter)}.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"] }]
|
|
1233
|
+
args: [{ selector: 'eui-showcase-doc-page', encapsulation: ViewEncapsulation.None, imports: [
|
|
1234
|
+
CommonModule,
|
|
1235
|
+
DocPageCodeComponent,
|
|
1236
|
+
...EUI_ALERT,
|
|
1237
|
+
...EUI_TABS,
|
|
1238
|
+
...EUI_PAGE,
|
|
1239
|
+
...EUI_LABEL,
|
|
1240
|
+
...EUI_CHIP,
|
|
1241
|
+
...EUI_BLOCK_CONTENT,
|
|
1242
|
+
], 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 .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-lighter)}.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"] }]
|
|
1135
1243
|
}], propDecorators: { cssClass: [{
|
|
1136
1244
|
type: HostBinding,
|
|
1137
1245
|
args: ['class']
|
|
@@ -1195,312 +1303,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1",
|
|
|
1195
1303
|
}] } });
|
|
1196
1304
|
/* eslint-disable @angular-eslint/directive-selector */
|
|
1197
1305
|
class DocPageOverviewContentDirective {
|
|
1198
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1199
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.
|
|
1306
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageOverviewContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1307
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocPageOverviewContentDirective, isStandalone: true, selector: "docPageOverview", ngImport: i0 }); }
|
|
1200
1308
|
}
|
|
1201
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1309
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageOverviewContentDirective, decorators: [{
|
|
1202
1310
|
type: Directive,
|
|
1203
|
-
args: [{ selector: 'docPageOverview'
|
|
1311
|
+
args: [{ selector: 'docPageOverview' }]
|
|
1204
1312
|
}] });
|
|
1205
1313
|
class DocPageOverviewDefaultContentDirective {
|
|
1206
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1207
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.
|
|
1314
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageOverviewDefaultContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1315
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocPageOverviewDefaultContentDirective, isStandalone: true, selector: "docPageOverviewDefault", ngImport: i0 }); }
|
|
1208
1316
|
}
|
|
1209
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1317
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageOverviewDefaultContentDirective, decorators: [{
|
|
1210
1318
|
type: Directive,
|
|
1211
|
-
args: [{ selector: 'docPageOverviewDefault'
|
|
1319
|
+
args: [{ selector: 'docPageOverviewDefault' }]
|
|
1212
1320
|
}] });
|
|
1213
1321
|
class DocPageInteractiveContentDirective {
|
|
1214
1322
|
constructor() {
|
|
1215
1323
|
this.title = 'ADVANCED EXAMPLES';
|
|
1216
1324
|
this.subTitle = 'Advanced use cases';
|
|
1217
1325
|
}
|
|
1218
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1219
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.
|
|
1326
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageInteractiveContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1327
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocPageInteractiveContentDirective, isStandalone: true, selector: "docPageInteractive", inputs: { title: "title", subTitle: "subTitle" }, ngImport: i0 }); }
|
|
1220
1328
|
}
|
|
1221
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1329
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageInteractiveContentDirective, decorators: [{
|
|
1222
1330
|
type: Directive,
|
|
1223
|
-
args: [{ selector: 'docPageInteractive'
|
|
1331
|
+
args: [{ selector: 'docPageInteractive' }]
|
|
1224
1332
|
}], propDecorators: { title: [{
|
|
1225
1333
|
type: Input
|
|
1226
1334
|
}], subTitle: [{
|
|
1227
1335
|
type: Input
|
|
1228
1336
|
}] } });
|
|
1229
1337
|
class DocPageSamplesContentDirective {
|
|
1230
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1231
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.
|
|
1338
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageSamplesContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1339
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocPageSamplesContentDirective, isStandalone: true, selector: "docPageSamples", ngImport: i0 }); }
|
|
1232
1340
|
}
|
|
1233
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1341
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageSamplesContentDirective, decorators: [{
|
|
1234
1342
|
type: Directive,
|
|
1235
|
-
args: [{ selector: 'docPageSamples'
|
|
1343
|
+
args: [{ selector: 'docPageSamples' }]
|
|
1236
1344
|
}] });
|
|
1237
1345
|
class DocPageSectionsContentDirective {
|
|
1238
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1239
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.
|
|
1346
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageSectionsContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1347
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocPageSectionsContentDirective, isStandalone: true, selector: "docPageSections", ngImport: i0 }); }
|
|
1240
1348
|
}
|
|
1241
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1349
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageSectionsContentDirective, decorators: [{
|
|
1242
1350
|
type: Directive,
|
|
1243
|
-
args: [{ selector: 'docPageSections'
|
|
1351
|
+
args: [{ selector: 'docPageSections' }]
|
|
1244
1352
|
}] });
|
|
1245
1353
|
class DocPageAccessibilityContentDirective {
|
|
1246
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1247
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.
|
|
1354
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageAccessibilityContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1355
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocPageAccessibilityContentDirective, isStandalone: true, selector: "docPageAccessibility", ngImport: i0 }); }
|
|
1248
1356
|
}
|
|
1249
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1357
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageAccessibilityContentDirective, decorators: [{
|
|
1250
1358
|
type: Directive,
|
|
1251
|
-
args: [{ selector: 'docPageAccessibility'
|
|
1359
|
+
args: [{ selector: 'docPageAccessibility' }]
|
|
1252
1360
|
}] });
|
|
1253
1361
|
class DocPageApiContentDirective {
|
|
1254
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1255
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.
|
|
1362
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageApiContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1363
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocPageApiContentDirective, isStandalone: true, selector: "docPageApi", ngImport: i0 }); }
|
|
1256
1364
|
}
|
|
1257
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1365
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageApiContentDirective, decorators: [{
|
|
1258
1366
|
type: Directive,
|
|
1259
|
-
args: [{ selector: 'docPageApi'
|
|
1367
|
+
args: [{ selector: 'docPageApi' }]
|
|
1260
1368
|
}] });
|
|
1261
1369
|
class DocPageThemingContentDirective {
|
|
1262
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1263
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.
|
|
1370
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageThemingContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1371
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocPageThemingContentDirective, isStandalone: true, selector: "docPageTheming", ngImport: i0 }); }
|
|
1264
1372
|
}
|
|
1265
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1373
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageThemingContentDirective, decorators: [{
|
|
1266
1374
|
type: Directive,
|
|
1267
|
-
args: [{ selector: 'docPageTheming'
|
|
1268
|
-
}] });
|
|
1269
|
-
|
|
1270
|
-
class DocSampleApiComponent {
|
|
1271
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocSampleApiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1272
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.1", type: DocSampleApiComponent, isStandalone: false, selector: "eui-showcase-doc-sample-api", ngImport: i0, template: "" }); }
|
|
1273
|
-
}
|
|
1274
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocSampleApiComponent, decorators: [{
|
|
1275
|
-
type: Component,
|
|
1276
|
-
args: [{ selector: 'eui-showcase-doc-sample-api', standalone: false, template: "" }]
|
|
1375
|
+
args: [{ selector: 'docPageTheming' }]
|
|
1277
1376
|
}] });
|
|
1278
1377
|
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.1", type: DocSectionCodeComponent, isStandalone: false, selector: "eui-showcase-doc-section-code", inputs: { label: "label", content: "content", styleClass: "styleClass", versionLabel: "versionLabel", isDeprecated: "isDeprecated", isCodeExpanded: "isCodeExpanded" }, queries: [{ propertyName: "sectionDescription", first: true, predicate: i0.forwardRef(() => DocSectionCodeDescriptionTagDirective), descendants: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i0.forwardRef(() => DocSectionCodeHtmlTagDirective), descendants: true }, { propertyName: "sectionCodeTS", first: true, predicate: i0.forwardRef(() => DocSectionCodeTsTagDirective), descendants: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i0.forwardRef(() => DocSectionCodeServiceTagDirective), descendants: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i0.forwardRef(() => DocSectionCodeCssTagDirective), descendants: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i0.forwardRef(() => DocSectionCodeDocTagDirective), descendants: 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 <span *ngIf=\"versionLabel\" class=\"eui-u-color-danger\">{{ versionLabel }}</span>\n <button type=\"button\" euiButton [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n </div>\n <div *ngIf=\"isDeprecated\">\n <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"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\"></ng-content></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\"></ng-content></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\"></ng-content></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\"></ng-content></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\"></ng-content>\n </div>\n </eui-tab-body>\n </eui-tab>\n </eui-tabs>\n <ng-template [ngIf]=\"!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS\">\n <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content></ng-content></code></pre>\n </ng-template>\n</ng-template>\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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i4.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i4.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i4.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i4.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab"] }, { kind: "component", type: i6.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }] }); }
|
|
1293
|
-
}
|
|
1294
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocSectionCodeComponent, decorators: [{
|
|
1295
|
-
type: Component,
|
|
1296
|
-
args: [{ selector: 'eui-showcase-doc-section-code', standalone: false, 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 <span *ngIf=\"versionLabel\" class=\"eui-u-color-danger\">{{ versionLabel }}</span>\n <button type=\"button\" euiButton [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n </div>\n <div *ngIf=\"isDeprecated\">\n <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"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\"></ng-content></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\"></ng-content></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\"></ng-content></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\"></ng-content></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\"></ng-content>\n </div>\n </eui-tab-body>\n </eui-tab>\n </eui-tabs>\n <ng-template [ngIf]=\"!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS\">\n <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content></ng-content></code></pre>\n </ng-template>\n</ng-template>\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"] }]
|
|
1297
|
-
}], propDecorators: { label: [{
|
|
1298
|
-
type: Input
|
|
1299
|
-
}], content: [{
|
|
1300
|
-
type: Input
|
|
1301
|
-
}], styleClass: [{
|
|
1302
|
-
type: Input
|
|
1303
|
-
}], versionLabel: [{
|
|
1304
|
-
type: Input
|
|
1305
|
-
}], isDeprecated: [{
|
|
1306
|
-
type: Input
|
|
1307
|
-
}], isCodeExpanded: [{
|
|
1308
|
-
type: Input
|
|
1309
|
-
}], sectionDescription: [{
|
|
1310
|
-
type: ContentChild,
|
|
1311
|
-
args: [forwardRef(() => DocSectionCodeDescriptionTagDirective)]
|
|
1312
|
-
}], sectionCodeHTML: [{
|
|
1313
|
-
type: ContentChild,
|
|
1314
|
-
args: [forwardRef(() => DocSectionCodeHtmlTagDirective)]
|
|
1315
|
-
}], sectionCodeTS: [{
|
|
1316
|
-
type: ContentChild,
|
|
1317
|
-
args: [forwardRef(() => DocSectionCodeTsTagDirective)]
|
|
1318
|
-
}], sectionCodeSERVICE: [{
|
|
1319
|
-
type: ContentChild,
|
|
1320
|
-
args: [forwardRef(() => DocSectionCodeServiceTagDirective)]
|
|
1321
|
-
}], sectionCodeCSS: [{
|
|
1322
|
-
type: ContentChild,
|
|
1323
|
-
args: [forwardRef(() => DocSectionCodeCssTagDirective)]
|
|
1324
|
-
}], sectionCodeDOC: [{
|
|
1325
|
-
type: ContentChild,
|
|
1326
|
-
args: [forwardRef(() => DocSectionCodeDocTagDirective)]
|
|
1327
|
-
}] } });
|
|
1328
|
-
/* eslint-disable @angular-eslint/directive-selector */
|
|
1329
|
-
class DocSectionCodeDescriptionTagDirective {
|
|
1330
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1331
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: DocSectionCodeDescriptionTagDirective, isStandalone: false, selector: "sectionDescription", ngImport: i0 }); }
|
|
1332
|
-
}
|
|
1333
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, decorators: [{
|
|
1334
|
-
type: Directive,
|
|
1335
|
-
args: [{ selector: 'sectionDescription', standalone: false }]
|
|
1336
|
-
}] });
|
|
1337
|
-
class DocSectionCodeHtmlTagDirective {
|
|
1338
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocSectionCodeHtmlTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1339
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: DocSectionCodeHtmlTagDirective, isStandalone: false, selector: "sectionCodeHTML", ngImport: i0 }); }
|
|
1340
|
-
}
|
|
1341
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocSectionCodeHtmlTagDirective, decorators: [{
|
|
1342
|
-
type: Directive,
|
|
1343
|
-
args: [{ selector: 'sectionCodeHTML', standalone: false }]
|
|
1344
|
-
}] });
|
|
1345
|
-
class DocSectionCodeTsTagDirective {
|
|
1346
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocSectionCodeTsTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1347
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: DocSectionCodeTsTagDirective, isStandalone: false, selector: "sectionCodeTS", ngImport: i0 }); }
|
|
1348
|
-
}
|
|
1349
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocSectionCodeTsTagDirective, decorators: [{
|
|
1350
|
-
type: Directive,
|
|
1351
|
-
args: [{ selector: 'sectionCodeTS', standalone: false }]
|
|
1352
|
-
}] });
|
|
1353
|
-
class DocSectionCodeServiceTagDirective {
|
|
1354
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocSectionCodeServiceTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1355
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: DocSectionCodeServiceTagDirective, isStandalone: false, selector: "sectionCodeSERVICE", ngImport: i0 }); }
|
|
1356
|
-
}
|
|
1357
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocSectionCodeServiceTagDirective, decorators: [{
|
|
1358
|
-
type: Directive,
|
|
1359
|
-
args: [{ selector: 'sectionCodeSERVICE', standalone: false }]
|
|
1360
|
-
}] });
|
|
1361
|
-
class DocSectionCodeCssTagDirective {
|
|
1362
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocSectionCodeCssTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1363
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: DocSectionCodeCssTagDirective, isStandalone: false, selector: "sectionCodeCSS", ngImport: i0 }); }
|
|
1364
|
-
}
|
|
1365
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocSectionCodeCssTagDirective, decorators: [{
|
|
1366
|
-
type: Directive,
|
|
1367
|
-
args: [{ selector: 'sectionCodeCSS', standalone: false }]
|
|
1368
|
-
}] });
|
|
1369
|
-
class DocSectionCodeDocTagDirective {
|
|
1370
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocSectionCodeDocTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1371
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: DocSectionCodeDocTagDirective, isStandalone: false, selector: "sectionCodeDOC", ngImport: i0 }); }
|
|
1372
|
-
}
|
|
1373
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocSectionCodeDocTagDirective, decorators: [{
|
|
1374
|
-
type: Directive,
|
|
1375
|
-
args: [{ selector: 'sectionCodeDOC', standalone: false }]
|
|
1376
|
-
}] });
|
|
1377
|
-
|
|
1378
|
-
class DocPageDevGuideComponent {
|
|
1379
|
-
constructor() {
|
|
1380
|
-
this.cssClass = 'eui-doc-page';
|
|
1381
|
-
this.rootDocsFolder = 'docs';
|
|
1382
|
-
this.showcaseName = 'showcase-dev-guide';
|
|
1383
|
-
this.headers = [];
|
|
1384
|
-
this.markdownService = inject(MarkdownService);
|
|
1385
|
-
this.http = inject(HttpClient);
|
|
1386
|
-
this.router = inject(Router);
|
|
1387
|
-
this.route = inject(ActivatedRoute);
|
|
1388
|
-
}
|
|
1389
|
-
ngOnInit() {
|
|
1390
|
-
this.subscription = this.route.url.subscribe((u) => {
|
|
1391
|
-
this._loadMdContent(`/${this.rootDocsFolder}/` + u.join('/'));
|
|
1392
|
-
});
|
|
1393
|
-
/**
|
|
1394
|
-
* callback for heading renderer. It will be called for each heading in the markdown.
|
|
1395
|
-
*
|
|
1396
|
-
* @param text the encoded heading text
|
|
1397
|
-
* @param level the heading level
|
|
1398
|
-
* @param raw the raw heading text (decoded)
|
|
1399
|
-
*/
|
|
1400
|
-
// TODO v21
|
|
1401
|
-
// this.markdownService.renderer.heading = ({ raw, text, depth }: Tokens.Heading): string => {
|
|
1402
|
-
// if (depth === 2 || depth === 3) {
|
|
1403
|
-
// const newHeader = `<h${depth} id="${raw}">${text}</h${depth}>`;
|
|
1404
|
-
// if (text.indexOf('<a ') === -1 && text.indexOf('<em>') === -1) {
|
|
1405
|
-
// this.headers.push({ id: raw, label: raw, level: depth });
|
|
1406
|
-
// }
|
|
1407
|
-
// return newHeader;
|
|
1408
|
-
// }
|
|
1409
|
-
// return `<h${depth}>${text}</h${depth}>`;
|
|
1410
|
-
// };
|
|
1411
|
-
}
|
|
1412
|
-
ngAfterViewInit() {
|
|
1413
|
-
this.route.fragment.pipe(take(1)).subscribe((fragment) => {
|
|
1414
|
-
if (fragment) {
|
|
1415
|
-
setTimeout(() => {
|
|
1416
|
-
this.fragmentId = fragment;
|
|
1417
|
-
const fgm = document.getElementById(fragment);
|
|
1418
|
-
fgm.scrollIntoView();
|
|
1419
|
-
}, 1);
|
|
1420
|
-
}
|
|
1421
|
-
});
|
|
1422
|
-
}
|
|
1423
|
-
ngOnDestroy() {
|
|
1424
|
-
if (this.subscription) {
|
|
1425
|
-
this.subscription.unsubscribe();
|
|
1426
|
-
}
|
|
1427
|
-
}
|
|
1428
|
-
onNavClick(fragmentId) {
|
|
1429
|
-
this._scrollToFragment(fragmentId);
|
|
1430
|
-
}
|
|
1431
|
-
_loadMdContent(url) {
|
|
1432
|
-
let mdPath, contextRoot;
|
|
1433
|
-
const currentUrl = window.location;
|
|
1434
|
-
const pathNameArray = currentUrl.pathname.split('/');
|
|
1435
|
-
this.headers = [];
|
|
1436
|
-
if (url) {
|
|
1437
|
-
mdPath = url.substr(1);
|
|
1438
|
-
}
|
|
1439
|
-
else {
|
|
1440
|
-
mdPath = pathNameArray.slice(pathNameArray.length - 3).join('/');
|
|
1441
|
-
}
|
|
1442
|
-
contextRoot = `${currentUrl.protocol}//${currentUrl.host}`;
|
|
1443
|
-
if (pathNameArray[1] !== this.showcaseName) {
|
|
1444
|
-
contextRoot += `/${pathNameArray[1]}`;
|
|
1445
|
-
}
|
|
1446
|
-
const filePath = `${contextRoot}/assets/${mdPath}.md`;
|
|
1447
|
-
this.http.get(filePath, { responseType: 'text' }).pipe(map((md) => md.replace(new RegExp(`assets/${this.rootDocsFolder}`, 'g'), `${contextRoot}/assets/${this.rootDocsFolder}`))).subscribe((md) => {
|
|
1448
|
-
this.markdown = md;
|
|
1449
|
-
const top = document.getElementById('top');
|
|
1450
|
-
top.scrollIntoView();
|
|
1451
|
-
});
|
|
1452
|
-
}
|
|
1453
|
-
_scrollToFragment(fragmentId) {
|
|
1454
|
-
// forcing reload when deep link with fragment
|
|
1455
|
-
this.router.onSameUrlNavigation = 'reload';
|
|
1456
|
-
this.router.navigate(['.'], { relativeTo: this.route, fragment: fragmentId });
|
|
1457
|
-
if (fragmentId) {
|
|
1458
|
-
setTimeout(() => {
|
|
1459
|
-
const fgm = document.getElementById(fragmentId);
|
|
1460
|
-
if (fgm) {
|
|
1461
|
-
fgm.scrollIntoView();
|
|
1462
|
-
}
|
|
1463
|
-
});
|
|
1464
|
-
}
|
|
1465
|
-
}
|
|
1466
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocPageDevGuideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1467
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.1", type: DocPageDevGuideComponent, isStandalone: false, selector: "eui-showcase-doc-page-dev-guide", inputs: { rootDocsFolder: "rootDocsFolder", showcaseName: "showcaseName" }, host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <span id=\"top\"></span>\n <markdown class=\"doc-content\" [data]=\"markdown\"></markdown>\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column class=\"eui-u-hidden-mobile\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @for (header of headers; track header.id) {\n <li class=\"doc-page-navigation-item\" (click)=\"onNavClick(header.id)\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === header.id\">\n <span [ngClass]=\"header.level === 3 ? 'eui-u-ml-m eui-u-f-regular': ''\">\n {{header.label}}\n </span>\n </li>\n }\n </ul>\n </div>\n </eui-page-column-body>\n\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title .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-lighter)}.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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$1.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i3$1.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i3$1.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i3$1.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3$1.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i3$2.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1468
|
-
}
|
|
1469
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocPageDevGuideComponent, decorators: [{
|
|
1470
|
-
type: Component,
|
|
1471
|
-
args: [{ selector: 'eui-showcase-doc-page-dev-guide', encapsulation: ViewEncapsulation.None, standalone: false, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <span id=\"top\"></span>\n <markdown class=\"doc-content\" [data]=\"markdown\"></markdown>\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column class=\"eui-u-hidden-mobile\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @for (header of headers; track header.id) {\n <li class=\"doc-page-navigation-item\" (click)=\"onNavClick(header.id)\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === header.id\">\n <span [ngClass]=\"header.level === 3 ? 'eui-u-ml-m eui-u-f-regular': ''\">\n {{header.label}}\n </span>\n </li>\n }\n </ul>\n </div>\n </eui-page-column-body>\n\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title .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-lighter)}.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"] }]
|
|
1472
|
-
}], propDecorators: { cssClass: [{
|
|
1473
|
-
type: HostBinding,
|
|
1474
|
-
args: ['class']
|
|
1475
|
-
}], rootDocsFolder: [{
|
|
1476
|
-
type: Input
|
|
1477
|
-
}], showcaseName: [{
|
|
1478
|
-
type: Input
|
|
1479
|
-
}] } });
|
|
1480
|
-
|
|
1481
|
-
class DocPageCodeModalComponent {
|
|
1482
|
-
constructor() {
|
|
1483
|
-
this.width = '95vw';
|
|
1484
|
-
this.asService = inject(EuiAppShellService);
|
|
1485
|
-
}
|
|
1486
|
-
toggleCode() {
|
|
1487
|
-
this.dialog.openDialog();
|
|
1488
|
-
}
|
|
1489
|
-
onClose() {
|
|
1490
|
-
this.dialog.closeDialog();
|
|
1491
|
-
}
|
|
1492
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocPageCodeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1493
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.1", type: DocPageCodeModalComponent, isStandalone: false, selector: "eui-showcase-doc-page-code-modal", inputs: { width: "width" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<button type=\"button\" euiButton euiAccent (click)=\"toggleCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n</button>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"width\">\n <ng-content></ng-content>\n</eui-dialog>\n", dependencies: [{ kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i2$1.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: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i6.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"] }] }); }
|
|
1494
|
-
}
|
|
1495
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocPageCodeModalComponent, decorators: [{
|
|
1496
|
-
type: Component,
|
|
1497
|
-
args: [{ selector: 'eui-showcase-doc-page-code-modal', standalone: false, template: "<button type=\"button\" euiButton euiAccent (click)=\"toggleCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n</button>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"width\">\n <ng-content></ng-content>\n</eui-dialog>\n" }]
|
|
1498
|
-
}], propDecorators: { width: [{
|
|
1499
|
-
type: Input
|
|
1500
|
-
}], dialog: [{
|
|
1501
|
-
type: ViewChild,
|
|
1502
|
-
args: ['dialog']
|
|
1503
|
-
}] } });
|
|
1378
|
+
const EUI_SHOWCASE_DOC_PAGE = [
|
|
1379
|
+
DocPageAccessibilityContentDirective,
|
|
1380
|
+
DocPageApiContentDirective,
|
|
1381
|
+
DocPageCodeComponent,
|
|
1382
|
+
DocPageComponent,
|
|
1383
|
+
DocPageDevGuideComponent,
|
|
1384
|
+
DocPageInteractiveContentDirective,
|
|
1385
|
+
DocPageOverviewContentDirective,
|
|
1386
|
+
DocPageOverviewDefaultContentDirective,
|
|
1387
|
+
DocPageSamplesContentDirective,
|
|
1388
|
+
DocPageSectionsContentDirective,
|
|
1389
|
+
DocPageThemingContentDirective,
|
|
1390
|
+
];
|
|
1504
1391
|
|
|
1505
1392
|
class DocPageCodeFabComponent {
|
|
1506
1393
|
constructor() {
|
|
@@ -1521,12 +1408,16 @@ class DocPageCodeFabComponent {
|
|
|
1521
1408
|
const sourceRootPath = `${showcaseRoot}/showcase-${this.showcase}/`;
|
|
1522
1409
|
window.open(sourceRootPath + this.codeFolder, '_blank');
|
|
1523
1410
|
}
|
|
1524
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1525
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.
|
|
1411
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageCodeFabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1412
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: DocPageCodeFabComponent, isStandalone: true, selector: "eui-showcase-doc-page-code-fab", inputs: { codeFolder: "codeFolder", showcase: "showcase", hasContentDialog: "hasContentDialog" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: 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-accent eui--accent\">\n <eui-icon-svg icon=\"eui-code\" size=\"l\" (click)=\"toggleCode()\"></eui-icon-svg>\n </div>\n</div>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"'50vw'\">\n <button type=\"button\" *ngIf=\"codeFolder\" euiButton euiAccent euiSizeS (click)=\"onOpenCode()\">\n <eui-icon-svg icon=\"eui-code\" set=\"eui\" size=\"m\" fillColor=\"grey-100\" class=\"eui-u-mr-xs\"></eui-icon-svg> VIEW SOURCES\n </button>\n <ng-content></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-accent eui--accent\" (click)=\"onOpenCode()\">\n <eui-icon-svg icon=\"eui-code\" size=\"l\"></eui-icon-svg>\n </button>\n</div>\n\n}\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i3$2.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"] }] }); }
|
|
1526
1413
|
}
|
|
1527
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1414
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageCodeFabComponent, decorators: [{
|
|
1528
1415
|
type: Component,
|
|
1529
|
-
args: [{ selector: 'eui-showcase-doc-page-code-fab',
|
|
1416
|
+
args: [{ selector: 'eui-showcase-doc-page-code-fab', imports: [
|
|
1417
|
+
CommonModule,
|
|
1418
|
+
...EUI_ICON,
|
|
1419
|
+
...EUI_DIALOG,
|
|
1420
|
+
], 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-accent eui--accent\">\n <eui-icon-svg icon=\"eui-code\" size=\"l\" (click)=\"toggleCode()\"></eui-icon-svg>\n </div>\n</div>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"'50vw'\">\n <button type=\"button\" *ngIf=\"codeFolder\" euiButton euiAccent euiSizeS (click)=\"onOpenCode()\">\n <eui-icon-svg icon=\"eui-code\" set=\"eui\" size=\"m\" fillColor=\"grey-100\" class=\"eui-u-mr-xs\"></eui-icon-svg> VIEW SOURCES\n </button>\n <ng-content></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-accent eui--accent\" (click)=\"onOpenCode()\">\n <eui-icon-svg icon=\"eui-code\" size=\"l\"></eui-icon-svg>\n </button>\n</div>\n\n}\n\n" }]
|
|
1530
1421
|
}], propDecorators: { codeFolder: [{
|
|
1531
1422
|
type: Input
|
|
1532
1423
|
}], showcase: [{
|
|
@@ -1538,132 +1429,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1",
|
|
|
1538
1429
|
args: ['dialog']
|
|
1539
1430
|
}] } });
|
|
1540
1431
|
|
|
1541
|
-
|
|
1432
|
+
const EUI_SHOWCASE_DOC_PAGE_CODE_FAB = [
|
|
1433
|
+
DocPageCodeFabComponent,
|
|
1434
|
+
];
|
|
1435
|
+
|
|
1436
|
+
class DocPageCodeModalComponent {
|
|
1542
1437
|
constructor() {
|
|
1543
|
-
this.
|
|
1438
|
+
this.width = '95vw';
|
|
1439
|
+
this.asService = inject(EuiAppShellService);
|
|
1440
|
+
}
|
|
1441
|
+
toggleCode() {
|
|
1442
|
+
this.dialog.openDialog();
|
|
1443
|
+
}
|
|
1444
|
+
onClose() {
|
|
1445
|
+
this.dialog.closeDialog();
|
|
1544
1446
|
}
|
|
1545
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1546
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.1", type: LoremIpsumSampleComponent, isStandalone: false, 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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
1447
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageCodeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1448
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocPageCodeModalComponent, isStandalone: true, selector: "eui-showcase-doc-page-code-modal", inputs: { width: "width" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<button type=\"button\" euiButton euiAccent (click)=\"toggleCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n</button>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"width\">\n <ng-content></ng-content>\n</eui-dialog>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i3$2.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.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }] }); }
|
|
1547
1449
|
}
|
|
1548
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1450
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPageCodeModalComponent, decorators: [{
|
|
1549
1451
|
type: Component,
|
|
1550
|
-
args: [{ selector: 'eui-showcase-doc-lorem-ipsum', standalone: false, 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" }]
|
|
1551
|
-
|
|
1452
|
+
args: [{ selector: 'eui-showcase-doc-page-code-modal', imports: [
|
|
1453
|
+
CommonModule,
|
|
1454
|
+
...EUI_DIALOG,
|
|
1455
|
+
...EUI_ICON,
|
|
1456
|
+
], template: "<button type=\"button\" euiButton euiAccent (click)=\"toggleCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n</button>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"width\">\n <ng-content></ng-content>\n</eui-dialog>\n" }]
|
|
1457
|
+
}], propDecorators: { width: [{
|
|
1552
1458
|
type: Input
|
|
1459
|
+
}], dialog: [{
|
|
1460
|
+
type: ViewChild,
|
|
1461
|
+
args: ['dialog']
|
|
1553
1462
|
}] } });
|
|
1554
1463
|
|
|
1555
|
-
|
|
1464
|
+
const EUI_SHOWCASE_DOC_PAGE_CODE_MODAL = [
|
|
1465
|
+
DocPageCodeModalComponent,
|
|
1466
|
+
];
|
|
1467
|
+
|
|
1468
|
+
/* eslint-disable max-len */
|
|
1469
|
+
/* eslint-disable */
|
|
1470
|
+
class DocPagePatternSampleDirective {
|
|
1471
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPagePatternSampleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1472
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocPagePatternSampleDirective, isStandalone: true, selector: "docPagePatternSample", ngImport: i0 }); }
|
|
1473
|
+
}
|
|
1474
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPagePatternSampleDirective, decorators: [{
|
|
1475
|
+
type: Directive,
|
|
1476
|
+
args: [{ selector: 'docPagePatternSample' }]
|
|
1477
|
+
}] });
|
|
1478
|
+
class DocPagePatternDocDirective {
|
|
1479
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPagePatternDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1480
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocPagePatternDocDirective, isStandalone: true, selector: "docPagePatternDoc", ngImport: i0 }); }
|
|
1481
|
+
}
|
|
1482
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPagePatternDocDirective, decorators: [{
|
|
1483
|
+
type: Directive,
|
|
1484
|
+
args: [{ selector: 'docPagePatternDoc' }]
|
|
1485
|
+
}] });
|
|
1486
|
+
class DocPagePatternComponent {
|
|
1556
1487
|
constructor() {
|
|
1557
|
-
this.
|
|
1558
|
-
this.
|
|
1559
|
-
this.
|
|
1560
|
-
this.
|
|
1488
|
+
this.docEntries = [];
|
|
1489
|
+
this.dos = [];
|
|
1490
|
+
this.donts = [];
|
|
1491
|
+
this.topPosToStartShowing = 100;
|
|
1492
|
+
this.tabSelectedIndex = 0;
|
|
1493
|
+
this.sanitizer = inject(DomSanitizer);
|
|
1561
1494
|
}
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
if (changes.activated.currentValue) {
|
|
1565
|
-
this.initStackblitz();
|
|
1566
|
-
}
|
|
1567
|
-
else {
|
|
1568
|
-
this.isLoaded = false;
|
|
1569
|
-
}
|
|
1570
|
-
}
|
|
1571
|
-
}
|
|
1572
|
-
initStackblitz() {
|
|
1573
|
-
this.sb.getStackblitzDependencies()
|
|
1574
|
-
.then((deps) => {
|
|
1575
|
-
const { dependencies, devDependencies } = deps;
|
|
1576
|
-
const { selector } = this.sb.extractComponentMetadata(this.typescriptContent);
|
|
1577
|
-
const moduleName = this.sb.extractModuleName(this.typescriptContent);
|
|
1578
|
-
const componentName = this.sb.extractComponentName(this.typescriptContent);
|
|
1579
|
-
const project = {
|
|
1580
|
-
title: this.title,
|
|
1581
|
-
description: `An eUI example for the ${this.title}.`,
|
|
1582
|
-
template: 'angular-cli',
|
|
1583
|
-
files: {
|
|
1584
|
-
'src/component.html': this.htmlContent,
|
|
1585
|
-
'src/component.ts': moduleName ? this.sb.appendVitalNgModules(this.typescriptContent) : this.typescriptContent,
|
|
1586
|
-
'src/main.ts': mainFile(moduleName, componentName),
|
|
1587
|
-
'src/polyfills.ts': polyfillsFile,
|
|
1588
|
-
'src/index.html': indexHtmlFile(selector),
|
|
1589
|
-
'angular.json': angularJsonFile,
|
|
1590
|
-
'package.json': JSON.stringify({
|
|
1591
|
-
...PACKAGE_JSON,
|
|
1592
|
-
dependencies,
|
|
1593
|
-
devDependencies,
|
|
1594
|
-
}, null, 2),
|
|
1595
|
-
'tsconfig.json': tsConfig,
|
|
1596
|
-
},
|
|
1597
|
-
settings: {
|
|
1598
|
-
compile: {
|
|
1599
|
-
trigger: 'auto',
|
|
1600
|
-
clearConsole: true,
|
|
1601
|
-
},
|
|
1602
|
-
},
|
|
1603
|
-
dependencies,
|
|
1604
|
-
};
|
|
1605
|
-
return sdk.embedProject(`stackblitz-${this.sampleId}`, project, {
|
|
1606
|
-
height: 500,
|
|
1607
|
-
openFile: ['src/component.ts', 'src/component.html'],
|
|
1608
|
-
});
|
|
1609
|
-
})
|
|
1610
|
-
.then((instance) => {
|
|
1611
|
-
this.stackblitzInstance = instance;
|
|
1612
|
-
this.isLoaded = true;
|
|
1613
|
-
});
|
|
1614
|
-
}
|
|
1615
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: PlaygroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1616
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.1", type: PlaygroundComponent, isStandalone: false, selector: "eui-playground", inputs: { title: "title", htmlContent: "htmlContent", sampleId: "sampleId", typescriptContent: "typescriptContent", activated: "activated", modules: "modules" }, viewQueries: [{ propertyName: "stackblitzElWrapper", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }], usesOnChanges: 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$1.EuiBlockContentComponent, selector: "eui-block-content", inputs: ["role", "ariaLabel", "isBlocked"] }] }); }
|
|
1617
|
-
}
|
|
1618
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: PlaygroundComponent, decorators: [{
|
|
1619
|
-
type: Component,
|
|
1620
|
-
args: [{ selector: 'eui-playground', standalone: false, template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n <iframe #container id=\"stackblitz-{{sampleId}}\"></iframe>\n</eui-block-content>\n" }]
|
|
1621
|
-
}], propDecorators: { title: [{
|
|
1622
|
-
type: Input
|
|
1623
|
-
}], htmlContent: [{
|
|
1624
|
-
type: Input
|
|
1625
|
-
}], sampleId: [{
|
|
1626
|
-
type: Input
|
|
1627
|
-
}], typescriptContent: [{
|
|
1628
|
-
type: Input
|
|
1629
|
-
}], activated: [{
|
|
1630
|
-
type: Input
|
|
1631
|
-
}], modules: [{
|
|
1632
|
-
type: Input
|
|
1633
|
-
}], stackblitzElWrapper: [{
|
|
1634
|
-
type: ViewChild,
|
|
1635
|
-
args: ['container', { read: ElementRef, static: true }]
|
|
1636
|
-
}] } });
|
|
1637
|
-
|
|
1638
|
-
/* eslint-disable max-len */
|
|
1639
|
-
/* eslint-disable */
|
|
1640
|
-
class DocPagePatternSampleDirective {
|
|
1641
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocPagePatternSampleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1642
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: DocPagePatternSampleDirective, isStandalone: false, selector: "docPagePatternSample", ngImport: i0 }); }
|
|
1643
|
-
}
|
|
1644
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocPagePatternSampleDirective, decorators: [{
|
|
1645
|
-
type: Directive,
|
|
1646
|
-
args: [{ selector: 'docPagePatternSample', standalone: false }]
|
|
1647
|
-
}] });
|
|
1648
|
-
class DocPagePatternDocDirective {
|
|
1649
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocPagePatternDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1650
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.1", type: DocPagePatternDocDirective, isStandalone: false, selector: "docPagePatternDoc", ngImport: i0 }); }
|
|
1651
|
-
}
|
|
1652
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: DocPagePatternDocDirective, decorators: [{
|
|
1653
|
-
type: Directive,
|
|
1654
|
-
args: [{ selector: 'docPagePatternDoc', standalone: false }]
|
|
1655
|
-
}] });
|
|
1656
|
-
class DocPagePatternComponent {
|
|
1657
|
-
constructor() {
|
|
1658
|
-
this.docEntries = [];
|
|
1659
|
-
this.dos = [];
|
|
1660
|
-
this.donts = [];
|
|
1661
|
-
this.topPosToStartShowing = 100;
|
|
1662
|
-
this.tabSelectedIndex = 0;
|
|
1663
|
-
this.sanitizer = inject(DomSanitizer);
|
|
1664
|
-
}
|
|
1665
|
-
get cssClasses() {
|
|
1666
|
-
return ['doc-page-pattern'].join(' ').trim();
|
|
1495
|
+
get cssClasses() {
|
|
1496
|
+
return ['doc-page-pattern'].join(' ').trim();
|
|
1667
1497
|
}
|
|
1668
1498
|
checkScroll() {
|
|
1669
1499
|
const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
|
|
@@ -1696,12 +1526,20 @@ class DocPagePatternComponent {
|
|
|
1696
1526
|
behavior: 'smooth',
|
|
1697
1527
|
});
|
|
1698
1528
|
}
|
|
1699
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1700
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.1", type: DocPagePatternComponent, isStandalone: false, selector: "eui-showcase-doc-page-pattern", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", docEntries: "docEntries", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl", figmaEmbedSrc: "figmaEmbedSrc" }, host: { listeners: { "window:scroll": "checkScroll()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "sampleContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSampleDirective), descendants: true }, { propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternDocDirective), descendants: true }], ngImport: i0, template: "<eui-tabs (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-label>Usage and documentation</eui-label>\n <eui-tab-body>\n <h2 class=\"eui-u-c-primary eui-u-mb-none eui-u-text-h2\">{{ label }}</h2>\n\n <h3 class=\"eui-u-text-h3\">Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n </ng-container>\n <ng-template #screenshot>\n <ng-container *ngIf=\"figmaUrl !== 'PENDING_DS'\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Anatomy</h3>\n <img\n src=\"assets/images/design-system/{{ anatomyImage }}\"\n alt=\"Design anatomy image\"\n width=\"90%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n </ng-container>\n </ng-template>\n\n <ng-container *ngIf=\"docEntries.length !== 0\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Design system references</h3>\n\n <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n <eui-badge *ngIf=\"ref?.id\" euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n </div>\n </eui-card-header-title>\n <eui-card-header-right-content>\n <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\n </eui-chip>\n </eui-card-header-right-content>\n </eui-card-header>\n <eui-card-content>\n <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n\n <ng-container *ngIf=\"ref.whenToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n </ng-container>\n <ng-container *ngIf=\"ref.whenNotToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n </ng-container>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Do's</strong>\n </h6>\n <li *ngFor=\"let do of ref.dos\">{{ do }}</li>\n </ng-container>\n </div>\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Dont's</strong>\n </h6>\n <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n </ng-container>\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </ng-container>\n\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n <ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n Pending Design system publication. Will be available in a future release.\n </ng-container>\n <ng-template #figmaOK>\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n </ng-template>\n </eui-tab-body>\n </eui-tab>\n <eui-tab>\n <eui-label>Pattern sample</eui-label>\n <eui-tab-body>\n <ng-content select=\"docPagePatternSample\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tabs-right-content>\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode($event)\">\n <eui-icon-svg icon=\"code-slash:sharp\"></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: "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.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i2.EuiCardHeaderRightContentComponent, selector: "eui-card-header-right-content" }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i4.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i4.EuiTabsRightContentComponent, selector: "eui-tabs-right-content" }, { kind: "component", type: i4.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i4.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab"] }, { kind: "component", type: i4$1.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i6$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i6.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 }); }
|
|
1529
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPagePatternComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1530
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocPagePatternComponent, isStandalone: true, selector: "eui-showcase-doc-page-pattern", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", docEntries: "docEntries", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl", figmaEmbedSrc: "figmaEmbedSrc" }, host: { listeners: { "window:scroll": "checkScroll()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "sampleContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSampleDirective), descendants: true }, { propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternDocDirective), descendants: true }], ngImport: i0, template: "<eui-tabs (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-label>Usage and documentation</eui-label>\n <eui-tab-body>\n <h2 class=\"eui-u-c-primary eui-u-mb-none eui-u-text-h2\">{{ label }}</h2>\n\n <h3 class=\"eui-u-text-h3\">Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n </ng-container>\n <ng-template #screenshot>\n <ng-container *ngIf=\"figmaUrl !== 'PENDING_DS'\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Anatomy</h3>\n <img\n src=\"assets/images/design-system/{{ anatomyImage }}\"\n alt=\"Design anatomy image\"\n width=\"90%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n </ng-container>\n </ng-template>\n\n <ng-container *ngIf=\"docEntries.length !== 0\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Design system references</h3>\n\n <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n <eui-badge *ngIf=\"ref?.id\" euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n </div>\n </eui-card-header-title>\n <eui-card-header-right-content>\n <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\n </eui-chip>\n </eui-card-header-right-content>\n </eui-card-header>\n <eui-card-content>\n <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n\n <ng-container *ngIf=\"ref.whenToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n </ng-container>\n <ng-container *ngIf=\"ref.whenNotToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n </ng-container>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Do's</strong>\n </h6>\n <li *ngFor=\"let do of ref.dos\">{{ do }}</li>\n </ng-container>\n </div>\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Dont's</strong>\n </h6>\n <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n </ng-container>\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </ng-container>\n\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n <ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n Pending Design system publication. Will be available in a future release.\n </ng-container>\n <ng-template #figmaOK>\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n </ng-template>\n </eui-tab-body>\n </eui-tab>\n <eui-tab>\n <eui-label>Pattern sample</eui-label>\n <eui-tab-body>\n <ng-content select=\"docPagePatternSample\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tabs-right-content>\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode($event)\">\n <eui-icon-svg icon=\"code-slash:sharp\"></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", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i3.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation"], 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$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i4$1.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i4$1.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i4$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i4$1.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i4$1.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", "isSquared", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i6$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i3$1.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 }); }
|
|
1701
1531
|
}
|
|
1702
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1532
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPagePatternComponent, decorators: [{
|
|
1703
1533
|
type: Component,
|
|
1704
|
-
args: [{ selector: 'eui-showcase-doc-page-pattern', encapsulation: ViewEncapsulation.None, standalone: false, template: "<eui-tabs (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-label>Usage and documentation</eui-label>\n <eui-tab-body>\n <h2 class=\"eui-u-c-primary eui-u-mb-none eui-u-text-h2\">{{ label }}</h2>\n\n <h3 class=\"eui-u-text-h3\">Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n </ng-container>\n <ng-template #screenshot>\n <ng-container *ngIf=\"figmaUrl !== 'PENDING_DS'\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Anatomy</h3>\n <img\n src=\"assets/images/design-system/{{ anatomyImage }}\"\n alt=\"Design anatomy image\"\n width=\"90%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n </ng-container>\n </ng-template>\n\n <ng-container *ngIf=\"docEntries.length !== 0\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Design system references</h3>\n\n <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n <eui-badge *ngIf=\"ref?.id\" euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n </div>\n </eui-card-header-title>\n <eui-card-header-right-content>\n <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\n </eui-chip>\n </eui-card-header-right-content>\n </eui-card-header>\n <eui-card-content>\n <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n\n <ng-container *ngIf=\"ref.whenToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n </ng-container>\n <ng-container *ngIf=\"ref.whenNotToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n </ng-container>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Do's</strong>\n </h6>\n <li *ngFor=\"let do of ref.dos\">{{ do }}</li>\n </ng-container>\n </div>\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Dont's</strong>\n </h6>\n <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n </ng-container>\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </ng-container>\n\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n <ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n Pending Design system publication. Will be available in a future release.\n </ng-container>\n <ng-template #figmaOK>\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n </ng-template>\n </eui-tab-body>\n </eui-tab>\n <eui-tab>\n <eui-label>Pattern sample</eui-label>\n <eui-tab-body>\n <ng-content select=\"docPagePatternSample\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tabs-right-content>\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode($event)\">\n <eui-icon-svg icon=\"code-slash:sharp\"></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"] }]
|
|
1534
|
+
args: [{ selector: 'eui-showcase-doc-page-pattern', encapsulation: ViewEncapsulation.None, imports: [
|
|
1535
|
+
CommonModule,
|
|
1536
|
+
...EUI_ICON,
|
|
1537
|
+
...EUI_TABS,
|
|
1538
|
+
...EUI_CARD,
|
|
1539
|
+
...EUI_CHIP,
|
|
1540
|
+
...EUI_BADGE,
|
|
1541
|
+
...EUI_LABEL,
|
|
1542
|
+
], template: "<eui-tabs (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-label>Usage and documentation</eui-label>\n <eui-tab-body>\n <h2 class=\"eui-u-c-primary eui-u-mb-none eui-u-text-h2\">{{ label }}</h2>\n\n <h3 class=\"eui-u-text-h3\">Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n </ng-container>\n <ng-template #screenshot>\n <ng-container *ngIf=\"figmaUrl !== 'PENDING_DS'\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Anatomy</h3>\n <img\n src=\"assets/images/design-system/{{ anatomyImage }}\"\n alt=\"Design anatomy image\"\n width=\"90%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n </ng-container>\n </ng-template>\n\n <ng-container *ngIf=\"docEntries.length !== 0\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Design system references</h3>\n\n <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n <eui-badge *ngIf=\"ref?.id\" euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n </div>\n </eui-card-header-title>\n <eui-card-header-right-content>\n <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\n </eui-chip>\n </eui-card-header-right-content>\n </eui-card-header>\n <eui-card-content>\n <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n\n <ng-container *ngIf=\"ref.whenToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n </ng-container>\n <ng-container *ngIf=\"ref.whenNotToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n </ng-container>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Do's</strong>\n </h6>\n <li *ngFor=\"let do of ref.dos\">{{ do }}</li>\n </ng-container>\n </div>\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Dont's</strong>\n </h6>\n <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n </ng-container>\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </ng-container>\n\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n <ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n Pending Design system publication. Will be available in a future release.\n </ng-container>\n <ng-template #figmaOK>\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n </ng-template>\n </eui-tab-body>\n </eui-tab>\n <eui-tab>\n <eui-label>Pattern sample</eui-label>\n <eui-tab-body>\n <ng-content select=\"docPagePatternSample\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tabs-right-content>\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode($event)\">\n <eui-icon-svg icon=\"code-slash:sharp\"></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"] }]
|
|
1705
1543
|
}], propDecorators: { cssClasses: [{
|
|
1706
1544
|
type: HostBinding,
|
|
1707
1545
|
args: ['class']
|
|
@@ -1734,15 +1572,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1",
|
|
|
1734
1572
|
args: ['window:scroll']
|
|
1735
1573
|
}] } });
|
|
1736
1574
|
|
|
1575
|
+
const EUI_SHOWCASE_DOC_PAGE_PATTERN = [
|
|
1576
|
+
DocPagePatternComponent,
|
|
1577
|
+
DocPagePatternDocDirective,
|
|
1578
|
+
DocPagePatternSampleDirective,
|
|
1579
|
+
];
|
|
1580
|
+
|
|
1581
|
+
/* eslint-disable */
|
|
1582
|
+
class DocPagePatternSampleDocDirective {
|
|
1583
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPagePatternSampleDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1584
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocPagePatternSampleDocDirective, isStandalone: true, selector: "eui-showcase-doc-pattern-sample-doc", ngImport: i0 }); }
|
|
1585
|
+
}
|
|
1586
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPagePatternSampleDocDirective, decorators: [{
|
|
1587
|
+
type: Directive,
|
|
1588
|
+
args: [{ selector: 'eui-showcase-doc-pattern-sample-doc' }]
|
|
1589
|
+
}] });
|
|
1590
|
+
class DocPagePatternSampleComponent {
|
|
1591
|
+
constructor() {
|
|
1592
|
+
this.docEntries = [];
|
|
1593
|
+
this.isSmall = false;
|
|
1594
|
+
this.isTiny = false;
|
|
1595
|
+
this.isMedium = false;
|
|
1596
|
+
this.isLarge = false;
|
|
1597
|
+
this.isExtraLarge = false;
|
|
1598
|
+
this.hasAutoHeight = false;
|
|
1599
|
+
}
|
|
1600
|
+
get cssClasses() {
|
|
1601
|
+
return [
|
|
1602
|
+
'eui-showcase-doc-page-pattern-sample',
|
|
1603
|
+
!this.codeFolder ? 'no-code' : '',
|
|
1604
|
+
].join(' ').trim();
|
|
1605
|
+
}
|
|
1606
|
+
openCode() {
|
|
1607
|
+
// eslint-disable-next-line max-len
|
|
1608
|
+
const showcaseRoot = 'https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-ux-components/-/blob/master/src/app/features/showcase-design-patterns/';
|
|
1609
|
+
window.open(showcaseRoot + this.codeFolder, '_blank');
|
|
1610
|
+
}
|
|
1611
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPagePatternSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1612
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0-next.3", type: DocPagePatternSampleComponent, isStandalone: true, selector: "eui-showcase-doc-pattern-sample", inputs: { label: "label", docEntries: "docEntries", codeFolder: "codeFolder", refsImage: "refsImage", refsImage2: "refsImage2", figmaLink: "figmaLink", isSmall: "isSmall", isTiny: "isTiny", isMedium: "isMedium", isLarge: "isLarge", isExtraLarge: "isExtraLarge", hasAutoHeight: "hasAutoHeight" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSampleDocDirective), descendants: true }], ngImport: i0, template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label }}</div>\n\n@if (figmaLink) {\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 pattern page\n </a>\n </span>\n}\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 <eui-badge *ngFor=\"let ref of docEntries;\" [euiDanger]=\"ref.mandatory\" [euiSecondary]=\"ref.outsidePattern\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-p-absolute\" [style]=\"ref.position\">\n {{ref.id}}\n </eui-badge>\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 euiAccent 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}", 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:4rem 4rem 1rem;background-color:var(--eui-c-bg);position:relative;flex-direction:column}:host .content{display:flex;height:35rem;width:100%;position:relative;background-color:var(--eui-c-bg);box-shadow:var(--eui-sh-4)}: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-6xl)}:host.no-code .content-wrapper{padding:2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i6$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }] }); }
|
|
1613
|
+
}
|
|
1614
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPagePatternSampleComponent, decorators: [{
|
|
1615
|
+
type: Component,
|
|
1616
|
+
args: [{ selector: 'eui-showcase-doc-pattern-sample', imports: [
|
|
1617
|
+
CommonModule,
|
|
1618
|
+
...EUI_BADGE,
|
|
1619
|
+
], template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label }}</div>\n\n@if (figmaLink) {\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 pattern page\n </a>\n </span>\n}\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 <eui-badge *ngFor=\"let ref of docEntries;\" [euiDanger]=\"ref.mandatory\" [euiSecondary]=\"ref.outsidePattern\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-p-absolute\" [style]=\"ref.position\">\n {{ref.id}}\n </eui-badge>\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 euiAccent 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}", 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:4rem 4rem 1rem;background-color:var(--eui-c-bg);position:relative;flex-direction:column}:host .content{display:flex;height:35rem;width:100%;position:relative;background-color:var(--eui-c-bg);box-shadow:var(--eui-sh-4)}: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-6xl)}:host.no-code .content-wrapper{padding:2rem}\n"] }]
|
|
1620
|
+
}], propDecorators: { cssClasses: [{
|
|
1621
|
+
type: HostBinding,
|
|
1622
|
+
args: ['class']
|
|
1623
|
+
}], label: [{
|
|
1624
|
+
type: Input
|
|
1625
|
+
}], docEntries: [{
|
|
1626
|
+
type: Input
|
|
1627
|
+
}], codeFolder: [{
|
|
1628
|
+
type: Input
|
|
1629
|
+
}], refsImage: [{
|
|
1630
|
+
type: Input
|
|
1631
|
+
}], refsImage2: [{
|
|
1632
|
+
type: Input
|
|
1633
|
+
}], figmaLink: [{
|
|
1634
|
+
type: Input
|
|
1635
|
+
}], isSmall: [{
|
|
1636
|
+
type: Input
|
|
1637
|
+
}], isTiny: [{
|
|
1638
|
+
type: Input
|
|
1639
|
+
}], isMedium: [{
|
|
1640
|
+
type: Input
|
|
1641
|
+
}], isLarge: [{
|
|
1642
|
+
type: Input
|
|
1643
|
+
}], isExtraLarge: [{
|
|
1644
|
+
type: Input
|
|
1645
|
+
}], hasAutoHeight: [{
|
|
1646
|
+
type: Input
|
|
1647
|
+
}], docContent: [{
|
|
1648
|
+
type: ContentChild,
|
|
1649
|
+
args: [forwardRef(() => DocPagePatternSampleDocDirective)]
|
|
1650
|
+
}] } });
|
|
1651
|
+
|
|
1652
|
+
class DocPagePatternSampleRefsComponent {
|
|
1653
|
+
constructor() {
|
|
1654
|
+
this.string = 'eui-showcase-doc-page-pattern-sample-refs';
|
|
1655
|
+
this.docEntries = [];
|
|
1656
|
+
}
|
|
1657
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPagePatternSampleRefsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1658
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocPagePatternSampleRefsComponent, isStandalone: true, selector: "eui-showcase-doc-pattern-sample-refs", inputs: { docEntries: "docEntries", codeFolder: "codeFolder" }, host: { properties: { "class": "this.string" } }, ngImport: i0, 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\" *ngFor=\"let ref of docEntries\">\n <eui-card class=\"eui-u-height-100\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n <eui-badge *ngIf=\"ref?.id\" [euiDanger]=\"ref.mandatory\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\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 <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 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\n <ng-container *ngIf=\"ref.whenToUse\">\n <div class=\"eui-u-f-bold\">When to use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n </ng-container>\n <ng-container *ngIf=\"ref.whenNotToUse\">\n <div class=\"eui-u-f-bold\">When to not use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n </ng-container>\n <div class=\"row eui-u-mt-l\">\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"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 <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 <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 <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n </ng-container>\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </div>\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: "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: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i4$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i4$1.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i4$1.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i4$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i6$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }] }); }
|
|
1659
|
+
}
|
|
1660
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPagePatternSampleRefsComponent, decorators: [{
|
|
1661
|
+
type: Component,
|
|
1662
|
+
args: [{ selector: 'eui-showcase-doc-pattern-sample-refs', imports: [
|
|
1663
|
+
CommonModule,
|
|
1664
|
+
...EUI_CHIP,
|
|
1665
|
+
...EUI_CARD,
|
|
1666
|
+
...EUI_BADGE,
|
|
1667
|
+
], 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\" *ngFor=\"let ref of docEntries\">\n <eui-card class=\"eui-u-height-100\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n <eui-badge *ngIf=\"ref?.id\" [euiDanger]=\"ref.mandatory\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\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 <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 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\n <ng-container *ngIf=\"ref.whenToUse\">\n <div class=\"eui-u-f-bold\">When to use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n </ng-container>\n <ng-container *ngIf=\"ref.whenNotToUse\">\n <div class=\"eui-u-f-bold\">When to not use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n </ng-container>\n <div class=\"row eui-u-mt-l\">\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"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 <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 <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 <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n </ng-container>\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </div>\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"] }]
|
|
1668
|
+
}], propDecorators: { string: [{
|
|
1669
|
+
type: HostBinding,
|
|
1670
|
+
args: ['class']
|
|
1671
|
+
}], docEntries: [{
|
|
1672
|
+
type: Input
|
|
1673
|
+
}], codeFolder: [{
|
|
1674
|
+
type: Input
|
|
1675
|
+
}] } });
|
|
1676
|
+
|
|
1677
|
+
const EUI_SHOWCASE_DOC_PAGE_PATTERN_SAMPLE = [
|
|
1678
|
+
DocPagePatternSampleComponent,
|
|
1679
|
+
DocPagePatternSampleDocDirective,
|
|
1680
|
+
DocPagePatternSampleRefsComponent,
|
|
1681
|
+
];
|
|
1682
|
+
|
|
1737
1683
|
/* eslint-disable max-len */
|
|
1738
1684
|
/* eslint-disable */
|
|
1739
1685
|
class DocPagePatternSimpleDocDirective {
|
|
1740
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1741
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.
|
|
1686
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPagePatternSimpleDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1687
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocPagePatternSimpleDocDirective, isStandalone: true, selector: "docPagePatternDoc", ngImport: i0 }); }
|
|
1742
1688
|
}
|
|
1743
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1689
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPagePatternSimpleDocDirective, decorators: [{
|
|
1744
1690
|
type: Directive,
|
|
1745
|
-
args: [{ selector: 'docPagePatternDoc'
|
|
1691
|
+
args: [{ selector: 'docPagePatternDoc' }]
|
|
1746
1692
|
}] });
|
|
1747
1693
|
class DocPagePatternSimpleComponent {
|
|
1748
1694
|
constructor() {
|
|
@@ -1787,12 +1733,20 @@ class DocPagePatternSimpleComponent {
|
|
|
1787
1733
|
behavior: 'smooth',
|
|
1788
1734
|
});
|
|
1789
1735
|
}
|
|
1790
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1791
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.1", type: DocPagePatternSimpleComponent, isStandalone: false, 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,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n</ng-template>\n\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: "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.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i4$1.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i6.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: i7.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "isFlat", "hasNoBackground", "isReverse"] }, { kind: "component", type: i7.EuiAvatarTextComponent, selector: "eui-avatar-text" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1736
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPagePatternSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1737
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", 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,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n</ng-template>\n\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: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "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", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i4$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i4$1.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i4$1.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i4$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i4$1.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", "isSquared", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i6$2.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "isFlat", "hasNoBackground", "isReverse"] }, { kind: "component", type: i6$2.EuiAvatarTextComponent, selector: "eui-avatar-text" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1792
1738
|
}
|
|
1793
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1739
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocPagePatternSimpleComponent, decorators: [{
|
|
1794
1740
|
type: Component,
|
|
1795
|
-
args: [{ selector: 'eui-showcase-doc-page-pattern-simple', encapsulation: ViewEncapsulation.None,
|
|
1741
|
+
args: [{ selector: 'eui-showcase-doc-page-pattern-simple', encapsulation: ViewEncapsulation.None, imports: [
|
|
1742
|
+
CommonModule,
|
|
1743
|
+
...EUI_BUTTON,
|
|
1744
|
+
...EUI_TABS,
|
|
1745
|
+
...EUI_ICON,
|
|
1746
|
+
...EUI_CARD,
|
|
1747
|
+
...EUI_CHIP,
|
|
1748
|
+
...EUI_AVATAR,
|
|
1749
|
+
], 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,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n</ng-template>\n\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"] }]
|
|
1796
1750
|
}], propDecorators: { cssClasses: [{
|
|
1797
1751
|
type: HostBinding,
|
|
1798
1752
|
args: ['class']
|
|
@@ -1822,252 +1776,297 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.1",
|
|
|
1822
1776
|
args: ['window:scroll']
|
|
1823
1777
|
}] } });
|
|
1824
1778
|
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1779
|
+
const EUI_SHOWCASE_DOC_PAGE_PATTERN_SIMPLE = [
|
|
1780
|
+
DocPagePatternSimpleComponent,
|
|
1781
|
+
DocPagePatternSimpleDocDirective,
|
|
1782
|
+
];
|
|
1783
|
+
|
|
1784
|
+
const EUI_SHOWCASE_DOC_SAMPLE = [
|
|
1785
|
+
DocSampleComponent,
|
|
1786
|
+
];
|
|
1787
|
+
|
|
1788
|
+
class DocSampleApiComponent {
|
|
1789
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocSampleApiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1790
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocSampleApiComponent, isStandalone: true, selector: "eui-showcase-doc-sample-api", ngImport: i0, template: "" }); }
|
|
1829
1791
|
}
|
|
1830
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1831
|
-
type:
|
|
1832
|
-
args: [{ selector: 'eui-showcase-doc-
|
|
1792
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocSampleApiComponent, decorators: [{
|
|
1793
|
+
type: Component,
|
|
1794
|
+
args: [{ selector: 'eui-showcase-doc-sample-api', template: "" }]
|
|
1833
1795
|
}] });
|
|
1834
|
-
|
|
1796
|
+
|
|
1797
|
+
const EUI_SHOWCASE_DOC_SAMPLE_API = [
|
|
1798
|
+
DocSampleApiComponent,
|
|
1799
|
+
];
|
|
1800
|
+
|
|
1801
|
+
const EUI_SHOWCASE_DOC_SECTION = [
|
|
1802
|
+
DocSectionComponent,
|
|
1803
|
+
];
|
|
1804
|
+
|
|
1805
|
+
class DocSectionCodeComponent {
|
|
1835
1806
|
constructor() {
|
|
1836
|
-
this.
|
|
1837
|
-
this.
|
|
1838
|
-
this.isTiny = false;
|
|
1839
|
-
this.isMedium = false;
|
|
1840
|
-
this.isLarge = false;
|
|
1841
|
-
this.isExtraLarge = false;
|
|
1842
|
-
this.hasAutoHeight = false;
|
|
1807
|
+
this.isDeprecated = false;
|
|
1808
|
+
this.isCodeExpanded = false;
|
|
1843
1809
|
}
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
'eui-showcase-doc-page-pattern-sample',
|
|
1847
|
-
!this.codeFolder ? 'no-code' : '',
|
|
1848
|
-
].join(' ').trim();
|
|
1810
|
+
toggleCode() {
|
|
1811
|
+
this.isCodeExpanded = !this.isCodeExpanded;
|
|
1849
1812
|
}
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
window.open(showcaseRoot + this.codeFolder, '_blank');
|
|
1813
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1814
|
+
isDefined(object) {
|
|
1815
|
+
return object;
|
|
1854
1816
|
}
|
|
1855
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1856
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1817
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocSectionCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1818
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocSectionCodeComponent, isStandalone: true, selector: "eui-showcase-doc-section-code", inputs: { label: "label", content: "content", styleClass: "styleClass", versionLabel: "versionLabel", isDeprecated: "isDeprecated", isCodeExpanded: "isCodeExpanded" }, queries: [{ propertyName: "sectionDescription", first: true, predicate: i0.forwardRef(() => DocSectionCodeDescriptionTagDirective), descendants: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i0.forwardRef(() => DocSectionCodeHtmlTagDirective), descendants: true }, { propertyName: "sectionCodeTS", first: true, predicate: i0.forwardRef(() => DocSectionCodeTsTagDirective), descendants: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i0.forwardRef(() => DocSectionCodeServiceTagDirective), descendants: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i0.forwardRef(() => DocSectionCodeCssTagDirective), descendants: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i0.forwardRef(() => DocSectionCodeDocTagDirective), descendants: 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 <span *ngIf=\"versionLabel\" class=\"eui-u-color-danger\">{{ versionLabel }}</span>\n <button type=\"button\" euiButton [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n </div>\n <div *ngIf=\"isDeprecated\">\n <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"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\"></ng-content></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\"></ng-content></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\"></ng-content></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\"></ng-content></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\"></ng-content>\n </div>\n </eui-tab-body>\n </eui-tab>\n </eui-tabs>\n <ng-template [ngIf]=\"!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS\">\n <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content></ng-content></code></pre>\n </ng-template>\n</ng-template>\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.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.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation"], 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: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }] }); }
|
|
1857
1819
|
}
|
|
1858
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1820
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocSectionCodeComponent, decorators: [{
|
|
1859
1821
|
type: Component,
|
|
1860
|
-
args: [{ selector: 'eui-showcase-doc-
|
|
1861
|
-
|
|
1862
|
-
|
|
1863
|
-
|
|
1864
|
-
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
type: Input
|
|
1868
|
-
}], codeFolder: [{
|
|
1869
|
-
type: Input
|
|
1870
|
-
}], refsImage: [{
|
|
1871
|
-
type: Input
|
|
1872
|
-
}], refsImage2: [{
|
|
1873
|
-
type: Input
|
|
1874
|
-
}], figmaLink: [{
|
|
1875
|
-
type: Input
|
|
1876
|
-
}], isSmall: [{
|
|
1822
|
+
args: [{ selector: 'eui-showcase-doc-section-code', imports: [
|
|
1823
|
+
CommonModule,
|
|
1824
|
+
...EUI_LABEL,
|
|
1825
|
+
...EUI_TABS,
|
|
1826
|
+
...EUI_BUTTON,
|
|
1827
|
+
], 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 <span *ngIf=\"versionLabel\" class=\"eui-u-color-danger\">{{ versionLabel }}</span>\n <button type=\"button\" euiButton [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n </div>\n <div *ngIf=\"isDeprecated\">\n <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"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\"></ng-content></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\"></ng-content></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\"></ng-content></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\"></ng-content></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\"></ng-content>\n </div>\n </eui-tab-body>\n </eui-tab>\n </eui-tabs>\n <ng-template [ngIf]=\"!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS\">\n <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content></ng-content></code></pre>\n </ng-template>\n</ng-template>\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"] }]
|
|
1828
|
+
}], propDecorators: { label: [{
|
|
1877
1829
|
type: Input
|
|
1878
|
-
}],
|
|
1830
|
+
}], content: [{
|
|
1879
1831
|
type: Input
|
|
1880
|
-
}],
|
|
1832
|
+
}], styleClass: [{
|
|
1881
1833
|
type: Input
|
|
1882
|
-
}],
|
|
1834
|
+
}], versionLabel: [{
|
|
1883
1835
|
type: Input
|
|
1884
|
-
}],
|
|
1836
|
+
}], isDeprecated: [{
|
|
1885
1837
|
type: Input
|
|
1886
|
-
}],
|
|
1838
|
+
}], isCodeExpanded: [{
|
|
1887
1839
|
type: Input
|
|
1888
|
-
}],
|
|
1840
|
+
}], sectionDescription: [{
|
|
1889
1841
|
type: ContentChild,
|
|
1890
|
-
args: [forwardRef(() =>
|
|
1842
|
+
args: [forwardRef(() => DocSectionCodeDescriptionTagDirective)]
|
|
1843
|
+
}], sectionCodeHTML: [{
|
|
1844
|
+
type: ContentChild,
|
|
1845
|
+
args: [forwardRef(() => DocSectionCodeHtmlTagDirective)]
|
|
1846
|
+
}], sectionCodeTS: [{
|
|
1847
|
+
type: ContentChild,
|
|
1848
|
+
args: [forwardRef(() => DocSectionCodeTsTagDirective)]
|
|
1849
|
+
}], sectionCodeSERVICE: [{
|
|
1850
|
+
type: ContentChild,
|
|
1851
|
+
args: [forwardRef(() => DocSectionCodeServiceTagDirective)]
|
|
1852
|
+
}], sectionCodeCSS: [{
|
|
1853
|
+
type: ContentChild,
|
|
1854
|
+
args: [forwardRef(() => DocSectionCodeCssTagDirective)]
|
|
1855
|
+
}], sectionCodeDOC: [{
|
|
1856
|
+
type: ContentChild,
|
|
1857
|
+
args: [forwardRef(() => DocSectionCodeDocTagDirective)]
|
|
1891
1858
|
}] } });
|
|
1859
|
+
/* eslint-disable @angular-eslint/directive-selector */
|
|
1860
|
+
class DocSectionCodeDescriptionTagDirective {
|
|
1861
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1862
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocSectionCodeDescriptionTagDirective, isStandalone: true, selector: "sectionDescription", ngImport: i0 }); }
|
|
1863
|
+
}
|
|
1864
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, decorators: [{
|
|
1865
|
+
type: Directive,
|
|
1866
|
+
args: [{ selector: 'sectionDescription' }]
|
|
1867
|
+
}] });
|
|
1868
|
+
class DocSectionCodeHtmlTagDirective {
|
|
1869
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocSectionCodeHtmlTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1870
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocSectionCodeHtmlTagDirective, isStandalone: true, selector: "sectionCodeHTML", ngImport: i0 }); }
|
|
1871
|
+
}
|
|
1872
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocSectionCodeHtmlTagDirective, decorators: [{
|
|
1873
|
+
type: Directive,
|
|
1874
|
+
args: [{ selector: 'sectionCodeHTML' }]
|
|
1875
|
+
}] });
|
|
1876
|
+
class DocSectionCodeTsTagDirective {
|
|
1877
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocSectionCodeTsTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1878
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocSectionCodeTsTagDirective, isStandalone: true, selector: "sectionCodeTS", ngImport: i0 }); }
|
|
1879
|
+
}
|
|
1880
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocSectionCodeTsTagDirective, decorators: [{
|
|
1881
|
+
type: Directive,
|
|
1882
|
+
args: [{ selector: 'sectionCodeTS' }]
|
|
1883
|
+
}] });
|
|
1884
|
+
class DocSectionCodeServiceTagDirective {
|
|
1885
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocSectionCodeServiceTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1886
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocSectionCodeServiceTagDirective, isStandalone: true, selector: "sectionCodeSERVICE", ngImport: i0 }); }
|
|
1887
|
+
}
|
|
1888
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocSectionCodeServiceTagDirective, decorators: [{
|
|
1889
|
+
type: Directive,
|
|
1890
|
+
args: [{ selector: 'sectionCodeSERVICE' }]
|
|
1891
|
+
}] });
|
|
1892
|
+
class DocSectionCodeCssTagDirective {
|
|
1893
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocSectionCodeCssTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1894
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocSectionCodeCssTagDirective, isStandalone: true, selector: "sectionCodeCSS", ngImport: i0 }); }
|
|
1895
|
+
}
|
|
1896
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocSectionCodeCssTagDirective, decorators: [{
|
|
1897
|
+
type: Directive,
|
|
1898
|
+
args: [{ selector: 'sectionCodeCSS' }]
|
|
1899
|
+
}] });
|
|
1900
|
+
class DocSectionCodeDocTagDirective {
|
|
1901
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocSectionCodeDocTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1902
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: DocSectionCodeDocTagDirective, isStandalone: true, selector: "sectionCodeDOC", ngImport: i0 }); }
|
|
1903
|
+
}
|
|
1904
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: DocSectionCodeDocTagDirective, decorators: [{
|
|
1905
|
+
type: Directive,
|
|
1906
|
+
args: [{ selector: 'sectionCodeDOC' }]
|
|
1907
|
+
}] });
|
|
1892
1908
|
|
|
1893
|
-
|
|
1909
|
+
const EUI_SHOWCASE_DOC_SECTION_CODE = [
|
|
1910
|
+
DocSectionCodeComponent,
|
|
1911
|
+
DocSectionCodeCssTagDirective,
|
|
1912
|
+
DocSectionCodeDescriptionTagDirective,
|
|
1913
|
+
DocSectionCodeDocTagDirective,
|
|
1914
|
+
DocSectionCodeHtmlTagDirective,
|
|
1915
|
+
DocSectionCodeServiceTagDirective,
|
|
1916
|
+
DocSectionCodeTsTagDirective,
|
|
1917
|
+
];
|
|
1918
|
+
|
|
1919
|
+
class EuiCodeHighlighterDirective {
|
|
1894
1920
|
constructor() {
|
|
1895
|
-
this.
|
|
1896
|
-
|
|
1921
|
+
this.el = inject(ElementRef);
|
|
1922
|
+
}
|
|
1923
|
+
ngAfterViewInit() {
|
|
1924
|
+
if (window['Prism']) {
|
|
1925
|
+
window['Prism'].highlightElement(this.el.nativeElement);
|
|
1926
|
+
}
|
|
1927
|
+
}
|
|
1928
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiCodeHighlighterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1929
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0-next.3", type: EuiCodeHighlighterDirective, isStandalone: true, selector: "[euiCode]", ngImport: i0 }); }
|
|
1930
|
+
}
|
|
1931
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: EuiCodeHighlighterDirective, decorators: [{
|
|
1932
|
+
type: Directive,
|
|
1933
|
+
args: [{
|
|
1934
|
+
selector: '[euiCode]',
|
|
1935
|
+
}]
|
|
1936
|
+
}] });
|
|
1937
|
+
|
|
1938
|
+
const EUI_SHOWCASE_CODE_HIGHLIGHTER = [
|
|
1939
|
+
EuiCodeHighlighterDirective,
|
|
1940
|
+
];
|
|
1941
|
+
|
|
1942
|
+
class LoremIpsumSampleComponent {
|
|
1943
|
+
constructor() {
|
|
1944
|
+
this.textSize = 'large';
|
|
1897
1945
|
}
|
|
1898
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1899
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.1", type: DocPagePatternSampleRefsComponent, isStandalone: false, selector: "eui-showcase-doc-pattern-sample-refs", inputs: { docEntries: "docEntries", codeFolder: "codeFolder" }, host: { properties: { "class": "this.string" } }, ngImport: i0, 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\" *ngFor=\"let ref of docEntries\">\n <eui-card class=\"eui-u-height-100\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n <eui-badge *ngIf=\"ref?.id\" [euiDanger]=\"ref.mandatory\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\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 <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 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\n <ng-container *ngIf=\"ref.whenToUse\">\n <div class=\"eui-u-f-bold\">When to use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n </ng-container>\n <ng-container *ngIf=\"ref.whenNotToUse\">\n <div class=\"eui-u-f-bold\">When to not use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n </ng-container>\n <div class=\"row eui-u-mt-l\">\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"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 <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 <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 <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n </ng-container>\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </div>\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: "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.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i4$1.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i6$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i6.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"] }] }); }
|
|
1946
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: LoremIpsumSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1947
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", 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"] }] }); }
|
|
1900
1948
|
}
|
|
1901
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
1949
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: LoremIpsumSampleComponent, decorators: [{
|
|
1902
1950
|
type: Component,
|
|
1903
|
-
args: [{ selector: 'eui-showcase-doc-
|
|
1904
|
-
|
|
1905
|
-
type: HostBinding,
|
|
1906
|
-
|
|
1907
|
-
}], docEntries: [{
|
|
1908
|
-
type: Input
|
|
1909
|
-
}], codeFolder: [{
|
|
1951
|
+
args: [{ selector: 'eui-showcase-doc-lorem-ipsum', imports: [
|
|
1952
|
+
CommonModule,
|
|
1953
|
+
], 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" }]
|
|
1954
|
+
}], propDecorators: { textSize: [{
|
|
1910
1955
|
type: Input
|
|
1911
1956
|
}] } });
|
|
1912
1957
|
|
|
1913
|
-
const
|
|
1914
|
-
EuiCodeHighlighterDirective,
|
|
1915
|
-
DocPageComponent,
|
|
1916
|
-
DocPageDevGuideComponent,
|
|
1917
|
-
DocPageCodeComponent,
|
|
1918
|
-
DocPageCodeFabComponent,
|
|
1919
|
-
DocPageCodeModalComponent,
|
|
1920
|
-
DocPageOverviewContentDirective,
|
|
1921
|
-
DocPageOverviewDefaultContentDirective,
|
|
1922
|
-
DocPageApiContentDirective,
|
|
1923
|
-
DocPageInteractiveContentDirective,
|
|
1924
|
-
DocPageSamplesContentDirective,
|
|
1925
|
-
DocPageSectionsContentDirective,
|
|
1926
|
-
DocPageAccessibilityContentDirective,
|
|
1927
|
-
DocPageThemingContentDirective,
|
|
1928
|
-
DocSampleComponent,
|
|
1929
|
-
DocSampleApiComponent,
|
|
1930
|
-
DocSectionComponent,
|
|
1931
|
-
DocSectionCodeComponent,
|
|
1932
|
-
DocSectionCodeHtmlTagDirective,
|
|
1933
|
-
DocSectionCodeTsTagDirective,
|
|
1934
|
-
DocSectionCodeServiceTagDirective,
|
|
1935
|
-
DocSectionCodeCssTagDirective,
|
|
1936
|
-
DocSectionCodeDocTagDirective,
|
|
1937
|
-
DocSectionCodeDescriptionTagDirective,
|
|
1958
|
+
const EUI_SHOWCASE_LOREM_IPSUM = [
|
|
1938
1959
|
LoremIpsumSampleComponent,
|
|
1939
|
-
PlaygroundComponent,
|
|
1940
|
-
DocPagePatternComponent,
|
|
1941
|
-
DocPagePatternDocDirective,
|
|
1942
|
-
DocPagePatternSampleDirective,
|
|
1943
|
-
DocPagePatternSimpleComponent,
|
|
1944
|
-
DocPagePatternSimpleDocDirective,
|
|
1945
|
-
DocPagePatternSampleComponent,
|
|
1946
|
-
DocPagePatternSampleDocDirective,
|
|
1947
|
-
DocPagePatternSampleRefsComponent,
|
|
1948
1960
|
];
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
|
|
1954
|
-
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
|
|
1958
|
-
|
|
1959
|
-
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
|
|
1972
|
-
|
|
1973
|
-
|
|
1974
|
-
|
|
1975
|
-
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
|
|
1980
|
-
|
|
1981
|
-
|
|
1982
|
-
|
|
1983
|
-
|
|
1984
|
-
|
|
1985
|
-
|
|
1986
|
-
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2012
|
-
DocSectionCodeHtmlTagDirective,
|
|
2013
|
-
DocSectionCodeTsTagDirective,
|
|
2014
|
-
DocSectionCodeServiceTagDirective,
|
|
2015
|
-
DocSectionCodeCssTagDirective,
|
|
2016
|
-
DocSectionCodeDocTagDirective,
|
|
2017
|
-
DocSectionCodeDescriptionTagDirective,
|
|
2018
|
-
LoremIpsumSampleComponent,
|
|
2019
|
-
PlaygroundComponent,
|
|
2020
|
-
DocPagePatternComponent,
|
|
2021
|
-
DocPagePatternDocDirective,
|
|
2022
|
-
DocPagePatternSampleDirective,
|
|
2023
|
-
DocPagePatternSimpleComponent,
|
|
2024
|
-
DocPagePatternSimpleDocDirective,
|
|
2025
|
-
DocPagePatternSampleComponent,
|
|
2026
|
-
DocPagePatternSampleDocDirective,
|
|
2027
|
-
DocPagePatternSampleRefsComponent] }); }
|
|
2028
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0-next.1", ngImport: i0, type: EuiShowcaseModule, providers: [StackblitzService], imports: [CommonModule,
|
|
2029
|
-
EuiCardModule,
|
|
2030
|
-
EuiButtonModule, EUI_TABS, EuiPageModule,
|
|
2031
|
-
EuiChipModule,
|
|
2032
|
-
EuiDialogModule,
|
|
2033
|
-
EuiAlertModule,
|
|
2034
|
-
EuiBlockContentModule,
|
|
2035
|
-
EuiBadgeModule,
|
|
2036
|
-
EuiIconModule,
|
|
2037
|
-
EuiLabelModule,
|
|
2038
|
-
EuiAvatarModule,
|
|
2039
|
-
MarkdownModule.forRoot({ sanitize: SecurityContext.NONE })] }); }
|
|
1961
|
+
|
|
1962
|
+
class PlaygroundComponent {
|
|
1963
|
+
constructor() {
|
|
1964
|
+
this.title = 'eUI Playground';
|
|
1965
|
+
this.activated = false;
|
|
1966
|
+
this.isLoaded = false;
|
|
1967
|
+
this.sb = inject(StackblitzService);
|
|
1968
|
+
}
|
|
1969
|
+
ngOnChanges(changes) {
|
|
1970
|
+
if (changes.activated) {
|
|
1971
|
+
if (changes.activated.currentValue) {
|
|
1972
|
+
this.initStackblitz();
|
|
1973
|
+
}
|
|
1974
|
+
else {
|
|
1975
|
+
this.isLoaded = false;
|
|
1976
|
+
}
|
|
1977
|
+
}
|
|
1978
|
+
}
|
|
1979
|
+
initStackblitz() {
|
|
1980
|
+
this.sb.getStackblitzDependencies()
|
|
1981
|
+
.then((deps) => {
|
|
1982
|
+
const { dependencies, devDependencies } = deps;
|
|
1983
|
+
const { selector } = this.sb.extractComponentMetadata(this.typescriptContent);
|
|
1984
|
+
const moduleName = this.sb.extractModuleName(this.typescriptContent);
|
|
1985
|
+
const componentName = this.sb.extractComponentName(this.typescriptContent);
|
|
1986
|
+
const project = {
|
|
1987
|
+
title: this.title,
|
|
1988
|
+
description: `An eUI example for the ${this.title}.`,
|
|
1989
|
+
template: 'angular-cli',
|
|
1990
|
+
files: {
|
|
1991
|
+
'src/component.html': this.htmlContent,
|
|
1992
|
+
'src/component.ts': moduleName ? this.sb.appendVitalNgModules(this.typescriptContent) : this.typescriptContent,
|
|
1993
|
+
'src/main.ts': mainFile(moduleName, componentName),
|
|
1994
|
+
'src/polyfills.ts': polyfillsFile,
|
|
1995
|
+
'src/index.html': indexHtmlFile(selector),
|
|
1996
|
+
'angular.json': angularJsonFile,
|
|
1997
|
+
'package.json': JSON.stringify({
|
|
1998
|
+
...PACKAGE_JSON,
|
|
1999
|
+
dependencies,
|
|
2000
|
+
devDependencies,
|
|
2001
|
+
}, null, 2),
|
|
2002
|
+
'tsconfig.json': tsConfig,
|
|
2003
|
+
},
|
|
2004
|
+
settings: {
|
|
2005
|
+
compile: {
|
|
2006
|
+
trigger: 'auto',
|
|
2007
|
+
clearConsole: true,
|
|
2008
|
+
},
|
|
2009
|
+
},
|
|
2010
|
+
dependencies,
|
|
2011
|
+
};
|
|
2012
|
+
return sdk.embedProject(`stackblitz-${this.sampleId}`, project, {
|
|
2013
|
+
height: 500,
|
|
2014
|
+
openFile: ['src/component.ts', 'src/component.html'],
|
|
2015
|
+
});
|
|
2016
|
+
})
|
|
2017
|
+
.then((instance) => {
|
|
2018
|
+
this.stackblitzInstance = instance;
|
|
2019
|
+
this.isLoaded = true;
|
|
2020
|
+
});
|
|
2021
|
+
}
|
|
2022
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: PlaygroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2023
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.3", type: PlaygroundComponent, isStandalone: true, selector: "eui-playground", inputs: { title: "title", htmlContent: "htmlContent", sampleId: "sampleId", typescriptContent: "typescriptContent", activated: "activated", modules: "modules" }, viewQueries: [{ propertyName: "stackblitzElWrapper", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }], usesOnChanges: 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$1.EuiBlockContentComponent, selector: "eui-block-content", inputs: ["role", "ariaLabel", "isBlocked"] }] }); }
|
|
2040
2024
|
}
|
|
2041
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.
|
|
2042
|
-
type:
|
|
2043
|
-
args: [{
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2025
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.3", ngImport: i0, type: PlaygroundComponent, decorators: [{
|
|
2026
|
+
type: Component,
|
|
2027
|
+
args: [{ selector: 'eui-playground', imports: [
|
|
2028
|
+
...EUI_BLOCK_CONTENT,
|
|
2029
|
+
], template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n <iframe #container id=\"stackblitz-{{sampleId}}\"></iframe>\n</eui-block-content>\n" }]
|
|
2030
|
+
}], propDecorators: { title: [{
|
|
2031
|
+
type: Input
|
|
2032
|
+
}], htmlContent: [{
|
|
2033
|
+
type: Input
|
|
2034
|
+
}], sampleId: [{
|
|
2035
|
+
type: Input
|
|
2036
|
+
}], typescriptContent: [{
|
|
2037
|
+
type: Input
|
|
2038
|
+
}], activated: [{
|
|
2039
|
+
type: Input
|
|
2040
|
+
}], modules: [{
|
|
2041
|
+
type: Input
|
|
2042
|
+
}], stackblitzElWrapper: [{
|
|
2043
|
+
type: ViewChild,
|
|
2044
|
+
args: ['container', { read: ElementRef, static: true }]
|
|
2045
|
+
}] } });
|
|
2046
|
+
|
|
2047
|
+
const EUI_SHOWCASE_PLAYGROUND = [
|
|
2048
|
+
PlaygroundComponent,
|
|
2049
|
+
];
|
|
2050
|
+
|
|
2051
|
+
const EUI_SHOWCASE = [
|
|
2052
|
+
...EUI_SHOWCASE_DOC_PAGE,
|
|
2053
|
+
...EUI_SHOWCASE_DOC_PAGE_CODE_FAB,
|
|
2054
|
+
...EUI_SHOWCASE_DOC_PAGE_CODE_MODAL,
|
|
2055
|
+
...EUI_SHOWCASE_DOC_PAGE_PATTERN,
|
|
2056
|
+
...EUI_SHOWCASE_DOC_PAGE_PATTERN_SAMPLE,
|
|
2057
|
+
...EUI_SHOWCASE_DOC_PAGE_PATTERN_SIMPLE,
|
|
2058
|
+
...EUI_SHOWCASE_DOC_SAMPLE,
|
|
2059
|
+
...EUI_SHOWCASE_DOC_SAMPLE_API,
|
|
2060
|
+
...EUI_SHOWCASE_DOC_SECTION,
|
|
2061
|
+
...EUI_SHOWCASE_DOC_SECTION_CODE,
|
|
2062
|
+
...EUI_SHOWCASE_CODE_HIGHLIGHTER,
|
|
2063
|
+
...EUI_SHOWCASE_LOREM_IPSUM,
|
|
2064
|
+
...EUI_SHOWCASE_PLAYGROUND,
|
|
2065
|
+
];
|
|
2067
2066
|
|
|
2068
2067
|
/**
|
|
2069
2068
|
* Generated bundle index. Do not edit.
|
|
2070
2069
|
*/
|
|
2071
2070
|
|
|
2072
|
-
export { ConfigurationService, DocPageAccessibilityContentDirective, DocPageApiContentDirective, DocPageCodeComponent, DocPageCodeFabComponent, DocPageCodeModalComponent, DocPageComponent, DocPageDevGuideComponent, DocPageInteractiveContentDirective, DocPageOverviewContentDirective, DocPageOverviewDefaultContentDirective, DocPagePatternComponent, DocPagePatternDocDirective, DocPagePatternSampleComponent, DocPagePatternSampleDirective, DocPagePatternSampleDocDirective, DocPagePatternSampleRefsComponent, DocPagePatternSimpleComponent, DocPagePatternSimpleDocDirective, DocPageSamplesContentDirective, DocPageSectionsContentDirective, DocPageThemingContentDirective, DocSampleApiComponent, DocSampleComponent, DocSectionCodeComponent, DocSectionCodeCssTagDirective, DocSectionCodeDescriptionTagDirective, DocSectionCodeDocTagDirective, DocSectionCodeHtmlTagDirective, DocSectionCodeServiceTagDirective, DocSectionCodeTsTagDirective, DocSectionComponent,
|
|
2071
|
+
export { ConfigurationService, DocPageAccessibilityContentDirective, DocPageApiContentDirective, DocPageCodeComponent, DocPageCodeFabComponent, DocPageCodeModalComponent, DocPageComponent, DocPageDevGuideComponent, DocPageInteractiveContentDirective, DocPageOverviewContentDirective, DocPageOverviewDefaultContentDirective, DocPagePatternComponent, DocPagePatternDocDirective, DocPagePatternSampleComponent, DocPagePatternSampleDirective, DocPagePatternSampleDocDirective, DocPagePatternSampleRefsComponent, DocPagePatternSimpleComponent, DocPagePatternSimpleDocDirective, DocPageSamplesContentDirective, DocPageSectionsContentDirective, DocPageThemingContentDirective, DocSampleApiComponent, DocSampleComponent, DocSectionCodeComponent, DocSectionCodeCssTagDirective, DocSectionCodeDescriptionTagDirective, DocSectionCodeDocTagDirective, DocSectionCodeHtmlTagDirective, DocSectionCodeServiceTagDirective, DocSectionCodeTsTagDirective, DocSectionComponent, EUI_SHOWCASE, EUI_SHOWCASE_CODE_HIGHLIGHTER, EUI_SHOWCASE_DOC_PAGE, EUI_SHOWCASE_DOC_PAGE_CODE_FAB, EUI_SHOWCASE_DOC_PAGE_CODE_MODAL, EUI_SHOWCASE_DOC_PAGE_PATTERN, EUI_SHOWCASE_DOC_PAGE_PATTERN_SAMPLE, EUI_SHOWCASE_DOC_PAGE_PATTERN_SIMPLE, EUI_SHOWCASE_DOC_SAMPLE, EUI_SHOWCASE_DOC_SAMPLE_API, EUI_SHOWCASE_DOC_SECTION, EUI_SHOWCASE_DOC_SECTION_CODE, EUI_SHOWCASE_LOREM_IPSUM, EUI_SHOWCASE_PLAYGROUND, EuiCodeHighlighterDirective, LoremIpsumSampleComponent, PACKAGE_JSON, PlaygroundComponent, StackblitzService, angularJsonFile, indexHtmlFile, mainFile, moduleFile, polyfillsFile, tsConfig };
|
|
2073
2072
|
//# sourceMappingURL=eui-showcase.mjs.map
|